/* Mülkhane — tek dosya, sayfa önekiyle ara
   CORE      :root .app .sidebar .content .page-head
   OZET      .stat-card .activity- .home-peek
   AUTH      body.page-auth .auth-
   BANK      body.page-bank .bank- .iban-
   AYAR      .set- .content--settings
   BORC      body.page-unpaid .due-
   SMS       body.page-bulk .bulk-
   BINALAR   body.page-buildings .bldg-
   SAKINLER  body.page-residents .who-
   BAKIM     body.page-maintain .upk-
   BORCLAND  body.page-debit .deb- .deb-cuts
   TANIM     body.page-defs .def-
   GIDER     body.page-outgo .out-
   GELIR     body.page-income .out-
   ARAC      body.page-plates .plt-
   ARSIV     body.page-arch .ark-
   TASINAN   body.page-moved .mov-
   SMSINT    body.page-smsin .ngm-
   PAYINT    body.page-payin .ngm-
   KASA      body.page-till .till-
   PERSONEL  body.page-staff .crew- body.page-leave .leave-
   RAPOR     body.page-reports .rep-
   HQ        body.page-hqlock .ngm- body.page-hqset .hq- body.page-fee .hq- body.page-hqpay .hq- body.page-sites .hq-
*/

:root {
    --brand: #e80508;
    --sidebar: #f4f4f4;
    --bg: var(--sidebar);
    --white: #ffffff;
    --text: #1a1a1a;
    --gray-10: #f4f4f4;
    --gray-20: #ebebeb;
    --gray-40: #b3b3b3;
    --gray-50: #9a9a9a;
    --gray-60: #888888;
    --gray-70: #5c5c5c;
    --gray-80: #333333;
    --green: #107e3e;
    --orange: #ff9941;
    --teal: #49b3ae;
    --red: #e53935;
    --avatar: #286075;
    --paid: #246d64;
    --unpaid: #87cac0;
    --content-pad: 24px;
    --sidebar-w: 272px;
    --bottom-nav: 72px;
    --font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--sidebar);
    letter-spacing: -0.2px;
    font-weight: 400;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p {
    margin: 0;
    font-family: inherit;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    border-color: var(--gray-40);
    box-shadow: none;
}

img { display: block; max-width: 100%; }

i.icomoon-liga {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.nav-ico {
    display: block;
    flex-shrink: 0;
    color: inherit;
}

.app {
    min-height: 100dvh;
    display: flex;
    background: var(--sidebar);
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    width: var(--sidebar-w);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--sidebar);
    padding: 32px 20px 20px;
    flex-shrink: 0;
    overflow: visible;
    transition: width 0.28s ease, padding 0.28s ease;
}

.brand { display: inline-flex; align-items: center; }
.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    color: #111;
    text-decoration: none;
}
.brand-logo__mark {
    width: 36px;
    height: 27px;
    flex-shrink: 0;
}
.brand-logo__word {
    color: #111;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}
.brand-logo__word em {
    color: var(--brand);
    font-style: normal;
    font-weight: 700;
}
.brand--mobile { display: none; }

.sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-fold {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #111;
    flex-shrink: 0;
}

.sidebar-fold:hover { background: #fff; }

html.nav-slim { --sidebar-w: 72px; }

html.nav-slim .sidebar {
    width: 72px;
    padding: 24px 4px 16px;
}

html.nav-slim .brand-logo__word { display: none; }

html.nav-slim .brand-logo { gap: 0; }

html.nav-slim .brand-logo__mark {
    width: 30px;
    height: 22px;
}

html.nav-slim .sidebar__head {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

html.nav-slim .sidebar-fold {
    width: 26px;
    height: 26px;
}

html.nav-slim .sidebar__nav { margin-top: 20px; gap: 8px; }

html.nav-slim .sidebar__bottom { align-items: center; }

html.nav-slim .sidebar__nav > .nav-link > .nav-link__text,
html.nav-slim .sidebar__nav > .nav-fly > .nav-link > .nav-link__text,
html.nav-slim .sidebar__nav > .nav-fly > .nav-link > .nav-fly__caret { display: none; }

html.nav-slim .sidebar__nav > .nav-link,
html.nav-slim .sidebar__nav > .nav-fly > .nav-link {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
}

html.nav-slim .sidebar__nav > .nav-link > .nav-link__icon,
html.nav-slim .sidebar__nav > .nav-fly > .nav-link > .nav-link__icon { position: static; }

html.nav-slim .trial-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    min-height: 48px;
    margin: 8px 0 12px;
    padding: 0;
    gap: 0;
    border-radius: 14px;
    text-align: center;
}

html.nav-slim .trial-wrap__kicker,
html.nav-slim .trial-wrap__cta { display: none; }

html.nav-slim .trial-wrap__days {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2px;
}

html.nav-slim .trial-wrap__days strong {
    display: block;
    width: 100%;
    font-size: 18px;
    letter-spacing: 0;
    text-align: center;
}

html.nav-slim .trial-wrap__days span {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

html.nav-slim .trial-wrap__days i {
    display: block;
    color: var(--brand);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

html.nav-slim .trial-wrap:hover {
    background: var(--brand);
    border-color: var(--brand);
}

html.nav-slim .trial-wrap:hover .trial-wrap__days strong,
html.nav-slim .trial-wrap:hover .trial-wrap__days i { color: #fff; }

html.nav-slim .sidebar-fold { transform: rotate(180deg); }

.sidebar__user { display: none; }

.sidebar__nav,
.sidebar__bottom {
    display: flex;
    flex-direction: column;
}

.sidebar__nav { margin-top: 24px; gap: 4px; }
.sidebar__bottom { margin-top: auto; }

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px 0 48px;
    border-radius: 12px;
    background: var(--gray-10);
    color: var(--gray-70);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
    line-height: 16.8px;
    white-space: nowrap;
}

.nav-link__icon {
    position: absolute;
    left: 12px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: inherit;
}

.nav-link:hover,
.nav-link.is-active,
.nav-fly.is-active > .nav-link,
.nav-fly:hover > .nav-link {
    background: var(--brand);
    color: #fff;
}

.nav-link:hover .nav-link__icon,
.nav-link:hover .nav-ico,
.nav-link.is-active .nav-link__icon,
.nav-link.is-active i,
.nav-link.is-active .nav-ico,
.nav-fly.is-active > .nav-link .nav-ico,
.nav-fly:hover > .nav-link .nav-ico { color: #fff; }

.nav-link--button { width: 100%; text-align: left; }

.nav-fly { position: relative; }

.nav-fly > .nav-link { padding-right: 36px; }

.nav-fly__caret {
    position: absolute;
    right: 12px;
    color: inherit;
    transition: transform 0.2s ease;
}

.nav-fly:hover > .nav-link .nav-fly__caret,
.nav-fly:focus-within > .nav-link .nav-fly__caret,
.nav-fly.is-open > .nav-link .nav-fly__caret {
    transform: rotate(180deg);
}

.nav-fly__panel {
    position: fixed;
    z-index: 42;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 280px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.nav-fly__panel::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 24px;
}

.nav-fly__panel::after {
    content: "";
    position: absolute;
    left: -6px;
    top: var(--fly-caret, 50%);
    z-index: 1;
    width: 11px;
    height: 11px;
    margin-top: -6px;
    background: #fff;
    border-left: 1px solid var(--gray-20);
    border-bottom: 1px solid var(--gray-20);
    transform: rotate(45deg);
}

.nav-fly:hover > .nav-fly__panel,
.nav-fly:focus-within > .nav-fly__panel,
.nav-fly.is-open > .nav-fly__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.nav-fly--nested {
    width: 100%;
}

.nav-fly__back { display: none; }

.nav-fly__panel .nav-link,
.nav-fly__panel .nav-fly > .nav-link {
    background: #fff;
    color: var(--gray-70);
    white-space: normal;
    line-height: 1.25;
}

.nav-fly__panel .nav-link:hover,
.nav-fly__panel .nav-link.is-active,
.nav-fly__panel .nav-fly:hover > .nav-link,
.nav-fly__panel .nav-fly.is-active > .nav-link {
    background: var(--brand);
    color: #fff;
}

.nav-fly__panel .nav-link:hover .nav-ico,
.nav-fly__panel .nav-link.is-active .nav-ico,
.nav-fly__panel .nav-fly:hover > .nav-link .nav-ico,
.nav-fly__panel .nav-fly.is-active > .nav-link .nav-ico { color: #fff; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.btn--dark { background: var(--gray-80); color: #fff; }

.trial-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 8px 0 16px;
    padding: 16px 14px 14px;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    background: #fff;
}

.trial-wrap:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.trial-wrap:hover .trial-wrap__kicker,
.trial-wrap:hover .trial-wrap__days strong,
.trial-wrap:hover .trial-wrap__days span { color: #fff; }

.trial-wrap:hover .trial-wrap__cta {
    background: #fff;
    color: var(--brand);
}

.trial-wrap__kicker {
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.trial-wrap__days {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.trial-wrap__days strong {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
}

.trial-wrap__days span {
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.trial-wrap__days i {
    font-style: normal;
    font-weight: inherit;
}

.trial-wrap--due .trial-wrap__days strong {
    font-size: 22px;
}

.trial-wrap__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: 6px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 1180px) and (min-width: 768px) {
    .bulk-panel[data-bulk-panel="reports"] .panel-head {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .bulk-panel[data-bulk-panel="reports"] .bulk-card__bar {
        flex: 1 1 100%;
        order: 8;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
    }

    .bulk-panel[data-bulk-panel="reports"] [data-bulk-sync] {
        margin-left: auto;
        font-size: 11px;
    }

    .bulk-table-wrap { overflow-x: hidden; }

    .bulk-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .bulk-table th,
    .bulk-table td { padding: 10px 8px; }

    .bulk-table__pluscell,
    .bulk-table th:first-child,
    .bulk-table td:first-child {
        width: 44px;
        max-width: 44px;
    }

    .bulk-table__id,
    .bulk-table__from,
    .bulk-table__when { display: none; }

    .bulk-table__msg {
        width: auto;
        max-width: none;
        overflow: hidden;
    }

    .bulk-table__msg b {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    .bulk-table__msg small {
        display: block;
        margin-top: 3px;
        color: var(--gray-70);
        font-size: 11px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bulk-table__n {
        width: 72px;
        max-width: 72px;
        text-align: center;
    }
}

.trial-fab {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #111;
    line-height: 1;
}

.trial-fab strong {
    color: var(--brand);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.trial-fab span {
    color: var(--gray-50);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    position: relative;
}

.topbar--mobile { display: none; }

.content {
    position: relative;
    flex: 1;
    padding: var(--content-pad);
    overflow: auto;
    background: var(--bg);
}

.page-head,
.hero,
.dashboard-top,
.dashboard-bottom,
.flow-panel,
.debt-panel,
.empty-panel { position: relative; }

.page-head {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-height: 48px;
    margin: 0 0 16px;
}

.page-context {
    margin-right: auto;
}

.page-context__kicker {
    margin: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-context__line {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.page-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding-right: 38px;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.2px;
    color: var(--text);
}

.page-title__count { color: inherit; font-weight: 600; }
.page-back {
    display: grid;
    place-items: center;
    margin-right: auto;
    color: #000;
}

.page-head:has(.page-context) .page-back {
    margin-right: 0;
}

.page-greet,
.page-head__greet,
.hero__greet {
    margin: 0;
    padding: 16px 0;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: #000;
}

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

.icon-btn,
.topbar-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--brand);
}

.topbar-icon {
    position: relative;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--gray-20);
    color: #111;
}

.topbar-icon__dot {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--brand);
    color: #fff;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.topbar-icon:hover { background: #f7f7f7; }

.topbar__end {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-menu,
.topbar-bell {
    border: 0;
    background: transparent;
    color: #111;
}

.topbar-menu:hover,
.topbar-bell:hover { background: transparent; }

body.menu-open .topbar-menu { color: var(--brand); }

.user-chip__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
}

.user-chip__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.user-chip__meta strong {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}

.user-chip__meta small {
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
}

.avatar--logo {
    background: #f4f4f4;
    padding: 0;
}

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

.user-chip__caret { color: var(--gray-50); }

.dropdown__ico {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #fff1f1;
    color: var(--brand);
}

.dropdown { position: relative; }

.dropdown__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 220px;
    display: none;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 8px;
}

.dropdown__panel--wide { width: 360px; }
.dropdown.is-open .dropdown__panel { display: block; }

.dropdown__list {
    max-height: calc(6 * 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 10px;
    font-size: 13px;
    font-weight: 700;
}

.dropdown__head em {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 99px;
    background: #fff1f1;
    color: var(--brand);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.dropdown__all {
    flex-shrink: 0;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.dropdown__read {
    flex-shrink: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

.dropdown__all:disabled,
.dropdown__read:disabled {
    opacity: 0.4;
    cursor: default;
}

.dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
}

.dropdown__panel--wide .dropdown__item {
    align-items: flex-start;
    min-height: 72px;
    padding: 10px;
}

.dropdown__panel--wide .dropdown__item > div {
    min-width: 0;
    flex: 1;
}

.dropdown__panel--wide .dropdown__item p {
    margin: 0;
    letter-spacing: 0;
    word-break: break-word;
}

.dropdown__item:hover { background: #f7f7f7; }
.dropdown__item small { color: var(--gray-60); }
.dropdown__item.is-read { opacity: 0.55; }
.dropdown__item .dropdown__read { margin-left: auto; align-self: center; }

.dropdown__empty {
    margin: 0;
    padding: 16px 12px;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 600;
}

.user-chip .dropdown__panel {
    min-width: 196px;
    padding: 6px;
}

.hero { margin: 0; }

/* OZET */
.home-match-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin: 0 0 16px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    animation: home-match-flash 7.2s ease-in-out infinite;
}

.home-match-alert__ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: auto;
    height: auto;
    background: none;
}

.home-match-alert:hover {
    animation-play-state: paused;
}

@keyframes home-match-flash {
    0%, 42% {
        background: var(--brand);
        color: #fff;
        border-color: transparent;
    }
    50%, 92% {
        background: #111;
        color: #fff;
        border-color: transparent;
    }
    100% {
        background: var(--brand);
        color: #fff;
        border-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-match-alert { animation: none; }
}

.dashboard-top {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

.stat-grid {
    flex: 0 0 420px;
    width: 420px;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 14px 16px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.stat-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.stat-card__copy {
    min-width: 0;
}

.stat-card__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff1f1;
    color: var(--brand);
}

.stat-card h3 {
    margin: 0;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.stat-card__period {
    margin: 2px 0 0;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.stat-card__value {
    margin: 0;
    color: #111;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.is-mobile { display: none; }

.activity-panel {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.panel {
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    padding: 16px 18px;
}

.panel h2,
.panel__head h2,
.panel-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.activity-panel h2 { font-weight: 700; }

.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.panel-head__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff1f1;
    color: var(--brand);
    flex-shrink: 0;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-tabs { display: flex; align-items: center; gap: 4px; }

.filter-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 16px;
    border-radius: 12px;
    background: #f4f4f4;
    color: #000;
}

.filter-tab.is-active {
    background: var(--brand);
    color: #fff;
}

.filter-tab.is-active i,
.filter-tab.is-active .nav-ico { color: #fff; }

.act-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    line-height: 0;
    border-radius: 12px;
    background: #f4f4f4;
    color: #111;
}

.act-ico:hover { background: #ececec; }

.act-ico.is-on {
    background: #ececec;
    color: #111;
}

.act-ico:disabled { color: #bbb; }

.act-filter {
    position: relative;
    display: flex;
    align-items: center;
}

.act-filter__go.is-on {
    width: auto;
    min-width: 44px;
    padding: 0 12px 0 10px;
    gap: 8px;
}

.act-filter__go span {
    max-width: 180px;
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act-filter__go.is-on,
.act-filter__go.is-on:hover {
    background: var(--brand);
    color: #fff;
}

.act-filter__go.is-on:hover {
    background: #c70407;
}

.act-filter__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(280px, calc(100vw - 40px));
    padding: 14px;
    border-radius: 16px;
    background: #fafafa;
}

.act-filter__menu[hidden] { display: none; }

.act-when__range {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0 2px;
}

.act-when__range[hidden] { display: none; }

.act-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.act-field span {
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

.act-field__pair {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 6px;
}

.act-field select,
.act-field input[type="time"] {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.act-field select:focus,
.act-field input[type="time"]:focus {
    outline: none;
    background: #f4f4f4;
}

.act-more {
    flex: none;
    height: 8px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 8px;
    min-height: 0;
    overflow: auto;
}

.activity-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    flex: none;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 12px;
}

.activity-item__ico {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--brand);
    border: 1px solid #f0e4e4;
}

.activity-item__title,
.activity-item__detail {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.activity-item__title { font-weight: 600; }
.activity-item__detail { margin-top: 4px; font-weight: 400; }

.activity-item__time {
    align-self: flex-start;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.side-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chart-panel { min-height: 320px; display: flex; flex-direction: column; gap: 12px; }

.area-chart {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
}

.area-chart__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.area-chart__head small {
    display: block;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 600;
}

.area-chart__sums {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.area-chart__head strong {
    display: block;
    margin-top: 2px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.area-chart__plot {
    flex: 1;
    min-height: 188px;
    padding: 18px 8px 8px;
    background: #fafafa;
    border-radius: 14px;
}

.area-chart__canvas {
    position: relative;
    height: 168px;
}

.area-chart__plot svg {
    display: block;
    width: 100%;
    height: 168px;
    overflow: visible;
}

.area-chart__plot line {
    stroke: #ececec;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.area-chart__fill {
    fill: url(#rentAreaFill);
}

.area-chart__stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.area-chart__stroke--paid {
    stroke: var(--brand);
    stroke-width: 2.4;
}

.area-chart__stroke--unpaid {
    stroke: #8a8a8a;
    stroke-width: 2;
    stroke-dasharray: 5 6;
}

.area-chart__guide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background: rgba(232, 5, 8, 0.2);
    pointer-events: none;
    opacity: 0;
}

.area-chart.is-hover .area-chart__guide { opacity: 1; }

.area-chart__dot {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 6px rgba(232, 5, 8, 0.12);
    pointer-events: none;
}

.area-chart__dot--wait {
    background: #8a8a8a;
    box-shadow: 0 0 0 6px rgba(17, 17, 17, 0.08);
}

.area-chart__hits {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.area-chart__hits button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.area-chart__tip {
    position: absolute;
    z-index: 4;
    min-width: 176px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    pointer-events: none;
}

.area-chart__tip.is-start { transform: translate(12px, 8px); }
.area-chart__tip.is-end { transform: translate(calc(-100% - 8px), 8px); }

.area-chart__tip small {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.area-chart__tip p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.area-chart__tip p + p { margin-top: 4px; }

.area-chart__tip i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.area-chart__tip i.is-paid { background: var(--brand); }
.area-chart__tip i.is-wait { background: #cfcfcf; }

.area-chart__tip b {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
}

.area-chart__months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 0;
    padding: 0 4px;
    list-style: none;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.area-chart__months li { text-align: center; cursor: default; }
.area-chart__months .is-now {
    color: #111;
    font-weight: 700;
}

.chart-legend {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-70);
    font-size: 13px;
    font-weight: 500;
}

.chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.chart-legend__paid i { background: var(--brand); }
.chart-legend__unpaid i { background: #8a8a8a; }

.mix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 2px 0 4px;
}

.mix-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 148px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: #fafafa;
}

.mix-tile--live {
    background: #fff1f1;
}

.mix-tile small {
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mix-tile--live small { color: var(--brand); }

.mix-tile strong {
    margin-top: auto;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.mix-tile--live strong { color: var(--brand); }

.mix-tile span {
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.note-panel p {
    margin: 12px 0 0;
    color: var(--gray-70);
    font-size: 14px;
}

.flow-panel { margin-bottom: 24px; }
.flow-panel .panel-head { margin-bottom: 12px; }

.flow-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.flow-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--gray-20);
}

.flow-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 12px;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.flow-tab.is-active {
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
    margin-bottom: -1px;
}

.flow-month {
    margin: 0;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-peek {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.home-peek figure {
    margin: 0;
    width: 112px;
    flex-shrink: 0;
}

.home-peek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-peek__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
}

.home-peek__body small {
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-peek__body strong {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.home-peek__body span {
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 500;
}

.empty-state {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.empty-state[hidden],
.activity-list[hidden],
.activity-item[hidden] { display: none; }

.empty-state--compact { min-height: 140px; padding: 8px 0 4px; }

.empty-state__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    border-radius: 14px;
    background: #fff1f1;
    color: var(--brand);
}

.empty-state p { margin: 0; color: var(--gray-50); font-size: 13px; max-width: 420px; line-height: 1.45; }
.empty-state__title { color: #111 !important; font-size: 15px !important; font-weight: 600; }

.debt-panel { margin-bottom: 24px; }

.empty-panel {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
}

.empty-panel__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    color: var(--brand);
    font-size: 28px;
}

.bottom-nav,
.sidebar-backdrop { display: none; }

@media (max-width: 1180px) {
    .page-title { font-size: 24px; line-height: 1.2; }
    .page-greet,
    .page-head__greet,
    .hero__greet { font-size: 20px; }

    .dashboard-bottom { grid-template-columns: 1fr; }
    .act-ico {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
    .act-filter__go.is-on {
        width: auto;
        padding: 0 10px 0 8px;
        gap: 6px;
    }
    .act-filter__go span {
        max-width: 150px;
        font-size: 12px;
    }
    .act-filter__menu { min-width: min(240px, calc(100vw - 40px)); }
    .activity-item {
        flex: none;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: start;
        padding: 10px 12px;
    }
    .activity-item__title,
    .activity-item__detail {
        font-size: 12px;
        letter-spacing: 0;
    }
    .activity-item__time { font-size: 11px; }

    .filter-tab {
        min-height: 36px;
        padding: 4px 10px;
    }

    .page-head { z-index: 50; }

    .dropdown__panel--wide { width: min(320px, calc(100vw - 32px)); }
    .dropdown__panel--wide .dropdown__list { max-height: calc(4 * 56px); }
    .dropdown__panel--wide .dropdown__head {
        padding: 6px 8px 8px;
        font-size: 12px;
    }
    .dropdown__panel--wide .dropdown__item {
        min-height: 56px;
        padding: 8px;
        font-size: 12px;
        gap: 8px;
    }
    .dropdown__panel--wide .dropdown__ico {
        width: 28px;
        height: 28px;
    }

    body.dropdown-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(17, 17, 17, 0.28);
    }
}

@media (max-width: 767px) {
    .page-head .user-chip,
    .page-head .topbar__actions,
    .is-desktop { display: none; }

    .topbar--mobile .brand--mobile { flex-shrink: 0; }

    .topbar--mobile .topbar__end {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
    }

    .topbar--mobile .user-chip {
        display: block;
        flex: 0 0 auto;
    }

    .topbar--mobile .user-chip__btn {
        gap: 2px;
        padding: 2px 4px 2px 2px;
    }

    .topbar--mobile .user-chip__meta { display: none; }

    .topbar--mobile .user-chip .avatar {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .topbar--mobile .user-chip .dropdown__panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        width: max-content;
        min-width: 148px;
        max-width: 200px;
    }

    .topbar--mobile .user-chip .dropdown__item {
        min-height: 0;
        align-items: center;
        white-space: nowrap;
    }

    .is-mobile,
    .brand--mobile,
    .topbar--mobile,
    .trial-fab { display: flex; }

    .bottom-nav { display: none !important; }

    .app { display: block; }

    .topbar--mobile {
        position: sticky;
        top: 0;
        z-index: 50;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 9px 16px;
        background: #fff;
        border-bottom: 1px solid var(--gray-20);
        overflow: visible;
    }

    body.menu-open .topbar--mobile {
        border-bottom: 0;
    }

    .topbar--mobile .dropdown.is-open .dropdown__panel {
        display: flex;
        flex-direction: column;
    }

    .topbar--mobile .dropdown__panel {
        position: fixed;
        top: 58px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: none;
        z-index: 60;
        overflow: hidden;
        padding: 6px;
        border-radius: 12px;
    }

    .topbar--mobile .dropdown__head {
        padding: 6px 8px 8px;
        font-size: 12px;
    }

    .topbar--mobile .dropdown__all { font-size: 11px; }

    .topbar--mobile .dropdown__list {
        flex: none;
        max-height: calc(4 * 56px);
        overflow-y: auto;
    }

    .topbar--mobile .dropdown__item {
        min-height: 56px;
        padding: 8px;
        font-size: 12px;
        gap: 8px;
    }

    .topbar--mobile .dropdown__ico {
        width: 28px;
        height: 28px;
    }

    .content { padding: 16px 16px 24px; }
    .page-head { z-index: 1; min-height: 0; margin: 0; }
    .page-head:has(.page-context) { margin: 0 0 16px; }
    .page-context__line { font-size: 16px; }
    .page-title { font-size: 24px; line-height: 1.2; padding-right: 0; }
    .page-greet,
    .page-head__greet,
    .hero__greet { font-size: 16px; padding: 0 0 16px; }

    .dashboard-top { flex-direction: column; align-items: stretch; }
    .stat-grid { flex: none; width: 100%; max-width: none; gap: 10px; }
    .activity-panel { flex: none; }
    .activity-list {
        flex: none;
        max-height: min(420px, 55vh);
        overflow: auto;
    }
    .stat-card { padding: 14px 12px 16px; }
    .stat-card__top { gap: 10px; margin-bottom: 12px; }
    .stat-card__icon { width: 36px; height: 36px; }
    .stat-card h3 { font-size: 13px; }
    .stat-card__period { font-size: 11px; }
    .stat-card__value { font-size: 20px; }

    .panel { padding: 16px 12px; border-radius: 16px; }
    .panel__head { margin-bottom: 12px; gap: 8px; }
    .activity-item__ico { width: 32px; height: 32px; }

    .trial-fab {
        position: fixed;
        left: 16px;
        bottom: 16px;
        z-index: 25;
        width: 52px;
        height: 52px;
        border: 1px solid var(--gray-20);
        border-radius: 14px;
        background: #fff;
    }

    .sidebar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        z-index: 48;
        width: 72px;
        height: auto;
        padding: 66px 8px 16px;
        background: #fff;
        border-right: 1px solid var(--gray-20);
        box-shadow: none;
        overflow: visible;
        left: -72px;
        transition: left 0.36s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }

    .sidebar__head,
    .sidebar__bottom { display: none; }

    .sidebar__nav { margin-top: 0; }

    .sidebar__nav > .nav-link > .nav-link__text,
    .sidebar__nav > .nav-fly > .nav-link > .nav-link__text,
    .sidebar__nav > .nav-fly > .nav-link > .nav-fly__caret { display: none; }

    .sidebar__nav { gap: 8px; }

    .sidebar__nav > .nav-link,
    .sidebar__nav > .nav-fly > .nav-link {
        width: 48px;
        height: 48px;
        margin: 0 auto;
        padding: 0;
        justify-content: center;
        border-radius: 14px;
    }

    .sidebar__nav > .nav-link > .nav-link__icon,
    .sidebar__nav > .nav-fly > .nav-link > .nav-link__icon { position: static; }

    .nav-fly__panel {
        z-index: 51;
        width: min(228px, calc(100vw - 84px));
        max-height: calc(100dvh - 70px);
        overflow: hidden;
        padding: 8px;
        gap: 3px;
        border-radius: 12px;
    }

    .nav-fly__panel .nav-link,
    .nav-fly__panel .nav-fly > .nav-link {
        min-height: 40px;
        padding: 0 10px 0 38px;
        font-size: 13px;
        letter-spacing: -0.2px;
        border-radius: 10px;
    }

    .nav-fly__panel .nav-link__icon {
        left: 10px;
        width: 20px;
        height: 20px;
    }

    .nav-fly__panel .nav-ico {
        width: 18px !important;
        height: 18px !important;
    }

    .nav-fly__panel .nav-fly > .nav-link { padding-right: 28px; }

    .nav-fly__panel .nav-fly__caret {
        right: 8px;
        width: 14px !important;
        height: 14px !important;
    }

    .nav-fly__back {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 40px;
        padding: 0 10px;
        border-radius: 10px;
        background: var(--gray-10);
        color: #111;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
    }

    .nav-fly__panel:has(> .nav-fly--nested.is-open) > :not(.nav-fly--nested.is-open) {
        display: none;
    }

    .nav-fly--nested.is-open {
        display: contents;
    }

    .nav-fly--nested.is-open > .nav-link {
        display: none;
    }

    .nav-fly--nested > .nav-fly__panel {
        display: none;
        position: static;
        inset: auto;
        width: 100%;
        max-height: none;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        transform: none;
    }

    .nav-fly--nested.is-open > .nav-fly__panel {
        display: flex;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .nav-fly--nested > .nav-fly__panel::before,
    .nav-fly--nested > .nav-fly__panel::after { display: none; }

    .sidebar__nav > .nav-fly > .nav-fly__panel {
        overflow-y: auto;
    }

    .nav-fly:hover > .nav-fly__panel,
    .nav-fly:focus-within > .nav-fly__panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-6px);
    }

    .nav-fly.is-open > .nav-fly__panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .nav-fly.is-open > .nav-link,
    .nav-fly.is-open > .nav-link:hover {
        background: var(--brand);
        color: #fff;
    }

    .nav-fly.is-open > .nav-link .nav-ico { color: #fff; }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(20, 16, 24, 0.22);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.28s ease, visibility 0.28s;
    }

    body.menu-open .sidebar {
        left: 0;
        pointer-events: auto;
    }

    body.menu-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.menu-open { overflow: hidden; }

    .bulk-jobmask { left: 0; }

    .bulk-jobview {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    body.menu-open .bulk-jobmask { left: 72px; }

    body.menu-open .bulk-jobview { left: calc(72px + 16px); }

    .flow-tabs { width: 100%; overflow: auto; }
    .bulk-toolbar .flow-tabs { overflow: visible; }
    .mix-tile { min-height: 132px; }
    .mix-tile strong { font-size: 36px; }
}

@media (max-width: 520px) {
    .area-chart__head { flex-wrap: wrap; }
    .area-chart__head strong { font-size: 24px; }
    .flow-month { width: 100%; }
}

body.page-bank .content--bank {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

body.page-bank .page-context {
    min-width: 0;
    margin-right: auto;
}

body.page-bank .page-head__tools {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    order: 2;
}

body.page-bank .page-head .topbar__actions {
    order: 3;
}

body.page-bank .page-head .due-pay {
    border-radius: 10px;
}

.btn-add {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 16px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.btn-add i,
.btn-add .nav-ico { color: #fff; }

.btn-add-fab {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 30;
    align-items: center;
    gap: 8px;
    max-height: 48px;
    padding: 4px 16px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.btn-add-fab i,
.btn-add-fab .nav-ico { color: #fff; }

@media (max-width: 1020px) {
    .page-head .btn-add { display: none; }
    .btn-add-fab { display: inline-flex; }
}


@media (max-width: 767px) {
    .page-title { padding-right: 0; }
    .btn-add-fab { bottom: 16px; }
}

html:has(body.page-auth) {
    height: 100%;
    overflow: hidden;
}

/* AUTH */
body.page-auth {
    height: 100dvh;
    overflow: hidden;
    background: #fff;
}

.auth {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(380px, 0.82fr) minmax(0, 1.18fr);
    overflow: hidden;
}

.auth-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 36px 48px 28px;
    overflow: auto;
    background: #fff;
}

.auth-form__top,
.auth-form__body,
.auth-foot {
    width: 100%;
    max-width: 392px;
}

.auth-form__top {
    display: flex;
    align-items: center;
}

.auth-form__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 32px 0;
}

.auth-logo {
    display: inline-flex;
    margin: 0 0 28px;
}

.auth-logo .brand-logo {
    height: 56px;
    gap: 12px;
}

.auth-logo .brand-logo__mark {
    width: 64px;
    height: 48px;
}

.auth-logo .brand-logo__word {
    font-size: 38px;
}

.auth-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.auth-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 600;
}

.auth-steps li i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f0f0f0;
    color: var(--gray-50);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.auth-steps li.is-current { color: #111; }
.auth-steps li.is-current i,
.auth-steps li.is-done i {
    background: var(--brand);
    color: #fff;
}

.auth-steps li.is-done { color: var(--gray-70); }

.auth-steps li + li::before {
    content: "";
    width: 28px;
    height: 1px;
    margin-right: 2px;
    background: #e6e6e6;
}

.auth-kicker {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.15;
}

.auth-lead {
    margin: 0 0 28px;
    color: var(--gray-60);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

.auth-error {
    margin: -12px 0 18px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 500;
}

.auth-field {
    display: block;
    margin-bottom: 16px;
}

.auth-field > span,
.auth-field__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
}

.auth-field input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fafafa;
    font: inherit;
    font-size: 15px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.auth-field input:focus {
    outline: none;
    border-color: #f3b4b5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.auth-field input[readonly] {
    background: #f4f4f4;
    color: var(--gray-70);
}

.auth-password[hidden] { display: none !important; }

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.auth-remember input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.auth-remember__switch {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 99px;
    background: #e4e4e4;
    font-style: normal;
    transition: background 0.15s ease;
}

.auth-remember__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease;
}

.auth-remember:has(input:checked) {
    color: #444;
}

.auth-remember:has(input:checked) .auth-remember__switch {
    background: var(--brand);
}

.auth-remember:has(input:checked) .auth-remember__switch::after {
    transform: translateX(14px);
}

.auth-remember:has(input:focus-visible) .auth-remember__switch {
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.auth-actions {
    display: flex;
    margin-top: 8px;
}

.auth-back {
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border-radius: 12px;
    background: #ececec;
    color: #9f9f9f;
    font-size: 15px;
    font-weight: 700;
}

.auth-submit i,
.auth-submit .nav-ico { color: inherit; }

.auth-submit__arrow {
    transform: rotate(-90deg);
}

.auth-submit.is-ready {
    background: var(--brand);
    color: #fff;
}

.auth-foot {
    color: #9a9a9a;
    font-size: 12px;
    line-height: 1.55;
}

.auth-foot a {
    color: #666;
    text-decoration: underline;
}

.auth-pitch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 48px 48px 40px 32px;
    background:
        radial-gradient(ellipse at 80% 10%, #fff1f1 0%, transparent 42%),
        #fafafa;
}

.auth-pitch__mark {
    position: absolute;
    right: -10%;
    bottom: -6%;
    width: min(58vw, 560px);
    height: auto;
    opacity: 0.055;
    pointer-events: none;
}

.auth-pitch__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 760px;
    max-height: 100%;
    min-height: 0;
}

.auth-pitch__copy {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 28px 0;
    text-align: left;
}

.auth-pitch__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.auth-logo--pitch {
    display: inline-flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}

.auth-logo--pitch .brand-logo {
    height: 40px;
    gap: 8px;
}

.auth-logo--pitch .brand-logo__mark {
    width: 42px;
    height: 32px;
}

.auth-logo--pitch .brand-logo__word {
    font-size: 24px;
}

.auth-logo__ile {
    margin-left: 6px;
    color: #111;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.auth-pitch h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.045em;
}

.auth-pitch h2 em {
    font-style: normal;
    color: var(--brand);
}

.auth-pitch p {
    margin: 0;
    max-width: 440px;
    color: var(--gray-60);
    font-size: 15px;
    line-height: 1.5;
}

.auth-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0 12px 22px;
}

.auth-board {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(17, 17, 17, 0.1);
}

.auth-board__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 64px;
    padding: 18px 0;
    background: #fafafa;
    border-right: 1px solid var(--gray-20);
    color: var(--gray-50);
}

.auth-board__nav .nav-ico:nth-child(2) { color: var(--brand); }

.auth-board__logo {
    width: 28px;
    height: 21px;
    margin-bottom: 8px;
    background: var(--brand);
    clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0 38%);
}

.auth-board__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
}

.auth-board__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.auth-board__stats article {
    padding: 12px;
    background: #fafafa;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
}

.auth-board__stats small {
    display: block;
    margin-bottom: 6px;
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 500;
}

.auth-board__stats b {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.auth-board__row {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.auth-board__chart,
.auth-board__photo {
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
}

.auth-board__chart {
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: #fff;
}

.auth-board__chart span {
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

.auth-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 1;
    margin-top: 16px;
    padding: 0 6px 4px;
}

.auth-bars i {
    flex: 1;
    height: var(--h);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #ff5a5c 0%, var(--brand) 100%);
}

.auth-bars i:nth-child(even) {
    background: #ead9d9;
}

.auth-board__photo {
    position: relative;
    margin: 0;
}

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

.auth-board__photo figcaption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 8px;
    color: #111;
    font-size: 11px;
    font-weight: 600;
}

.auth-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 168px;
    padding: 12px 14px 12px 12px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(17, 17, 17, 0.1);
}

.auth-float__ico {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff1f1;
    color: var(--brand);
}

.auth-float small {
    display: block;
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 500;
}

.auth-float strong {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.auth-float--pay {
    top: -18px;
    right: -8px;
    animation: auth-float 5.5s ease-in-out infinite;
}

.auth-float--home {
    left: -10px;
    bottom: 28px;
    animation: auth-float 6.5s ease-in-out infinite reverse;
}

@keyframes auth-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.auth-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-shrink: 0;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
}

.auth-features__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #fff1f1;
    border-radius: 10px;
    color: var(--brand);
}

.auth-features strong {
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 1180px) {
    .auth-float { display: none; }
    .auth-showcase { margin: 0 0 22px; }
    .auth-features { grid-template-columns: 1fr 1fr; }
    .auth-pitch h2 { font-size: 30px; }
}

@media (max-width: 980px) {
    html:has(body.page-auth),
    body.page-auth { height: auto; overflow: auto; }
    .auth { height: auto; overflow: visible; grid-template-columns: 1fr; }
    .auth-pitch { display: none; }
    .auth-form { height: auto; padding: 28px 24px 32px; }
    .auth-title { font-size: 28px; }
}

@media (max-height: 820px) {
    .auth-form { padding: 20px 40px 16px; }
    .auth-form__body { padding: 12px 0; }
    .auth-logo { margin-bottom: 16px; }
    .auth-steps { margin-bottom: 16px; }
    .auth-pitch { padding: 28px 36px 24px 24px; }
    .auth-pitch__copy { margin-bottom: 16px; }
    .auth-features { gap: 8px; }
    .auth-features li { padding: 8px 10px; }
    .auth-features__icon { width: 28px; height: 28px; }
}

@media (max-height: 700px) {
    .auth-logo .brand-logo { height: 44px; }
    .auth-logo .brand-logo__mark { width: 48px; height: 36px; }
    .auth-logo .brand-logo__word { font-size: 28px; }
    .auth-pitch h2 { font-size: 26px; }
}

.bank-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.bank-notice--ok {
    color: #111;
    background: #fafafa;
    border: 1px solid var(--gray-20);
}

.bank-notice--error {
    color: var(--brand);
    background: #fff1f1;
    border: 1px solid #f3b4b5;
}

.bank-split {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.bank-roll {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-roll--peek { margin: 0 0 16px; }

.bank-roll__kicker {
    margin: 0 2px 4px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bank-roll__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fafafa;
}

.bank-roll--peek .bank-roll__item { background: #fff; grid-template-columns: auto minmax(0, 1fr); }

.bank-roll__item img {
    width: 56px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    padding: 4px 6px;
    border-radius: 8px;
    background: #fff;
}

.bank-roll--peek .bank-roll__item img { background: #fafafa; }
.bank-roll__item img.is-ink { background: #111; }

.bank-roll__item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
}

.bank-roll__item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.bank-roll__acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.bank-roll__go,
.bank-roll__edit,
.bank-roll__drop,
.bank-roll__acts form button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.bank-roll__go .nav-ico,
.bank-roll__edit .nav-ico,
.bank-roll__drop .nav-ico,
.bank-roll__acts form button .nav-ico {
    display: block;
    flex-shrink: 0;
}

.bank-roll__go,
.bank-roll__edit {
    background: #111;
    color: #fff;
}

.bank-roll__go:hover,
.bank-roll__edit:hover { background: var(--brand); color: #fff; }

.bank-roll__drop {
    background: #fff;
    color: var(--brand);
}

.bank-roll__drop:hover { background: #fff1f1; color: var(--brand); }

.bank-roll__acts form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bank-roll__acts form[hidden] { display: none !important; }

.bank-roll__acts form span {
    overflow: visible;
    text-overflow: unset;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bank-roll__acts form button { background: #fafafa; color: #111; }
.bank-roll__acts form button:hover { background: #fff1f1; }
.bank-roll__acts form button[type="submit"] { background: #111; color: #fff; }
.bank-roll__acts form button[type="submit"]:hover { background: var(--brand); color: #fff; }

.bank-void {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0 4px;
}

.bank-void strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.bank-void p {
    color: #888;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.bank-void--solo {
    padding: 28px 24px;
    background: #fafafa;
    border-radius: 16px;
}

.bank-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bank-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px 18px;
    align-items: center;
    padding: 18px 20px 14px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.bank-card.is-off { background: #fafafa; }

.bank-card > img {
    width: 64px;
    height: 40px;
    object-fit: contain;
    padding: 6px 8px;
    border-radius: 10px;
    background: #fafafa;
}

.bank-card.is-off > img { background: #fff; }
.bank-card > img.is-ink { background: #111; }

.bank-card__main { min-width: 0; }

.bank-card__main strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.bank-card__main span {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-card__main em {
    display: block;
    margin-top: 6px;
    color: var(--brand);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.bank-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.bank-card__bal { margin: 0; text-align: right; }

.bank-card__bal small {
    display: block;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bank-card__bal strong {
    display: block;
    margin-top: 2px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.bank-card.is-off .bank-card__bal strong { color: #888; }

.bank-card__acts {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-20);
}

.bank-live { margin: 0; }

.bank-live__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px 0 8px;
    border: 1px solid var(--gray-20);
    border-radius: 999px;
    background: #fff;
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.bank-live__btn i {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: #d7d7d7;
}

.bank-live__btn i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.bank-live__btn.is-on {
    border-color: #111;
    color: #111;
}

.bank-live__btn.is-on i { background: #111; }
.bank-live__btn.is-on i::after { transform: translateX(14px); }

.move-off {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fafafa;
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.bank-aside {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    padding: 28px 24px 24px;
    background: #fafafa;
    color: #111;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.bank-aside__kicker {
    margin: 0 0 10px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bank-aside h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.bank-aside > p {
    margin: 0 0 12px;
    color: var(--gray-60);
    font-size: 14px;
    line-height: 1.5;
}

.bank-aside__back {
    margin: 0 0 24px;
    color: #888;
    font-size: 13px;
    font-weight: 700;
}

.bank-aside__back:hover { color: #111; }

@property --rail-at {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

.bank-rail {
    --rail-at: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: --rail-at 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.bank-rail::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 5px;
    width: 2px;
    background: #e4e4e4;
    border-radius: 2px;
}

.bank-rail::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 5px;
    width: 2px;
    height: calc((100% - 44px) * (var(--rail-at) - 1) / 3);
    background: linear-gradient(180deg, #ff4d50, var(--brand));
    border-radius: 2px;
    z-index: 1;
}

.bank-rail button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 16px 0;
    color: var(--gray-50);
    text-align: left;
    transition: color 0.45s ease;
}

.bank-rail button i {
    position: relative;
    width: 28px;
    height: 12px;
    flex-shrink: 0;
    z-index: 1;
    transition: width 0.45s ease, height 0.45s ease;
}

.bank-rail button i::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    border: 1.5px solid #c4c4c4;
    border-radius: 50%;
    background: #fafafa;
    box-sizing: border-box;
    transition: background 0.5s ease, border-color 0.5s ease, width 0.45s ease, height 0.45s ease, left 0.45s ease, top 0.45s ease;
}

.bank-rail button i::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 5px;
    width: 16px;
    height: 1.5px;
    background: #c4c4c4;
    transition: background 0.5s ease, width 0.45s ease, height 0.45s ease, left 0.45s ease, top 0.45s ease;
}

.bank-rail button span {
    font-size: 15px;
    font-weight: 600;
}

.bank-rail button.is-done { color: #111; }
.bank-rail button.is-done i::before {
    border-color: var(--brand);
    background: var(--brand);
}
.bank-rail button.is-done i::after { background: var(--brand); }
.bank-rail button.is-on { color: #111; }
.bank-rail button.is-on i {
    width: 30px;
    height: 14px;
}
.bank-rail button.is-on i::before {
    left: -1px;
    top: -1px;
    width: 14px;
    height: 14px;
    border-color: var(--brand);
    background: var(--brand);
}
.bank-rail button.is-on i::after {
    left: 13px;
    top: 6px;
    width: 18px;
    height: 2px;
    background: var(--brand);
}
.bank-rail button:disabled { opacity: 0.4; cursor: default; }

.bank-aside__now {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--gray-20);
}

.bank-aside__now small {
    display: block;
    margin-bottom: 4px;
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bank-aside__now span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-aside__now img {
    width: 72px;
    height: 44px;
    object-fit: contain;
}

.bank-aside__now img.is-ink { mix-blend-mode: screen; }

.bank-aside__now strong { font-size: 16px; }

.bank-main {
    padding: 28px 28px 24px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.bank-count {
    margin: 0 0 18px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bank-step { display: none; }
.bank-step.is-open {
    display: block;
    animation: bank-step-in 0.35s ease;
}

@keyframes bank-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.bank-step h2 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.bank-step > p {
    margin: 0 0 24px;
    color: var(--gray-60);
    font-size: 14px;
    line-height: 1.5;
}

.bank-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 0 0 28px;
}

.bank-pick__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    cursor: pointer;
}

.bank-pick__item img {
    width: 56px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.bank-pick__item img.is-ink { mix-blend-mode: screen; }

.bank-pick__item strong { font-size: 13px; font-weight: 600; }
.bank-pick__item input { display: none; }

.bank-pick__item.is-on,
.bank-pick__item:has(input:checked) {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.bank-pick__item.is-on img,
.bank-pick__item:has(input:checked) img {
    padding: 4px 6px;
    background: #fff;
    border-radius: 8px;
    mix-blend-mode: normal;
}

.bank-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.bank-field[hidden],
.bank-note[hidden] {
    display: none !important;
}

.bank-field i {
    color: var(--brand);
    font-style: normal;
}

.bank-field > input,
.pass-field,
.iban-field {
    width: 100%;
    height: 48px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
    color-scheme: light;
}

.bank-field > input {
    padding: 0 14px;
    font: inherit;
    font-weight: 500;
    color: var(--text);
    caret-color: var(--text);
    outline: none;
    box-shadow: none;
}

.bank-field > input::placeholder,
.iban-field input::placeholder,
.pass-field input::placeholder {
    color: var(--gray-50);
    -webkit-text-fill-color: var(--gray-50);
    opacity: 1;
}

.bank-field > input:focus,
.pass-field:focus-within,
.iban-field:focus-within {
    border-color: #f3b4b5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.page-bank input:-webkit-autofill,
.page-bank input:-webkit-autofill:hover,
.page-bank input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--brand);
    border: 1px solid #ececec;
    box-shadow: 0 0 0 1000px #fafafa inset;
    transition: background-color 99999s ease-out;
}

.iban-field {
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.iban-field__prefix {
    margin-right: 8px;
    font-size: 13px;
    font-weight: 700;
    user-select: none;
}

.iban-field input,
.pass-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 500;
    color: var(--text);
    caret-color: var(--text);
    outline: none;
    box-shadow: none;
}

.bank-site { position: relative; }

.bank-hits {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.bank-hits[hidden] { display: none !important; }

.bank-hits button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
}

.bank-hits button:hover { background: #fafafa; }
.bank-hits strong { font-size: 13px; font-weight: 700; }
.bank-hits span { color: var(--gray-60); font-size: 12px; font-weight: 500; }

.bank-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.bank-chip[hidden] { display: none !important; }

.bank-chip button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

.bank-chip button:hover { background: #fff; color: #111; }

.pass-field {
    display: flex;
    align-items: center;
    padding: 0 8px 0 14px;
}

.pass-field__toggle {
    display: grid;
    place-items: center;
    width: 36px;
    color: var(--gray-50);
}

.bank-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.bank-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.bank-btn--done { background: var(--brand); }

.bank-btn:disabled {
    background: #ececec;
    color: #9f9f9f;
    cursor: default;
}

.bank-doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    margin-bottom: 20px;
    background: #f5f5f5;
    border-radius: 12px;
}

.bank-doc__file {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-doc__file strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.bank-doc__file small { display: block; margin-top: 2px; color: var(--gray-50); font-size: 12px; line-height: 1.2; }
.bank-doc__file .nav-ico,
.bank-doc__file .icomoon-liga { color: var(--brand); }

.bank-doc__acts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bank-doc__acts form { display: flex; }

.bank-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.bank-ghost .nav-ico,
.bank-ghost .icomoon-liga {
    display: block;
    line-height: 1;
}

.bank-confirm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bank-confirm label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.bank-confirm input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.bank-tick {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #d4d4d4;
    border-radius: 7px;
    background: #fff;
    color: #fff;
    flex-shrink: 0;
}

.bank-tick .icomoon-liga { opacity: 0; line-height: 1; }

.bank-confirm input:checked + .bank-tick,
.bldg-sheet__take input:checked + .bank-tick {
    border-color: var(--brand);
    background: var(--brand);
}

.bank-confirm input:checked + .bank-tick .icomoon-liga,
.bldg-sheet__take input:checked + .bank-tick .icomoon-liga { opacity: 1; }

.bank-confirm label span { line-height: 1.35; }

.bank-note {
    margin: 0 0 16px;
    color: var(--gray-50);
    font-size: 13px;
}

.move-soap {
    margin: 0 0 16px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #fafafa;
}

.move-soap summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    color: #555;
    font-size: 13px;
    font-weight: 600;
}

.move-soap summary::-webkit-details-marker { display: none; }

.move-soap__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 28px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #888;
    cursor: pointer;
}

.move-soap__copy:hover { color: #111; }

.move-soap__copy em {
    font-style: normal;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.move-soap pre {
    margin: 0;
    padding: 0 14px 14px;
    max-height: 420px;
    overflow: auto;
    color: #333;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.move-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.move-head__bank {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.move-head__bank img {
    width: 56px;
    height: 34px;
    object-fit: contain;
}

.move-head__bank h2 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -0.04em;
}

.move-head__bank p {
    margin: 4px 0 0;
    color: #888;
    font-size: 13px;
}

.move-head__side {
    display: flex;
    align-items: center;
    gap: 14px;
}

.move-head__side strong {
    display: block;
    font-size: 20px;
    letter-spacing: -0.04em;
    text-align: right;
}

.move-head__side small {
    display: block;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.move-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.move-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fafafa;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.move-tabs button.is-on {
    background: #111;
    color: #fff;
}

.move-tabs b {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    text-align: center;
}

html:has(body.page-bank .move-board),
body.page-bank:has(.move-board) {
    height: 100dvh;
    overflow: hidden;
}

body.page-bank:has(.move-board) .app,
body.page-bank:has(.move-board) .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-bank .content--bank:has(.move-board) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-bank .content--bank:has(.move-board) > .page-head,
body.page-bank:has(.move-board) .bank-notice,
body.page-bank:has(.move-board) .move-head,
body.page-bank:has(.move-board) .bank-note,
body.page-bank:has(.move-board) .move-soap,
body.page-bank:has(.move-board) .move-tabs {
    flex-shrink: 0;
}

body.page-bank:has(.move-board) .move-soap pre {
    max-height: min(22vh, 220px);
}

.move-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.move-board {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    min-height: 160px;
    overflow: hidden;
}

.move-pager {
    flex-shrink: 0;
    padding: 8px 0 0;
    border-top: 0;
    background: transparent;
}

.move-pager[hidden] { display: none !important; }

.move-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 36px minmax(180px, auto) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fafafa;
}

.move-row[hidden],
.move-pick[hidden],
.move-ata[hidden],
.move-ata-mask[hidden],
.move-empty[hidden],
.move-pick__hits[hidden],
.move-ata__who[hidden],
.move-ata__find[hidden],
.move-ata__sender[hidden] { display: none !important; }

.move-row time {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.move-row time strong { font-size: 13px; }
.move-row time span { color: #888; font-size: 12px; }

.move-row > p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.move-way {
    font-style: normal;
    font-weight: 800;
}

.move-way--a { color: #0a7a32; }
.move-way--b { color: var(--brand); }

.move-row__act {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.move-row__act span {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: #444;
    font-size: 12px;
    font-weight: 700;
}

.move-row__act span small {
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

.move-row__act button,
.move-row__act form button {
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.move-row__act button[data-move-assign] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #111;
    color: #fff;
}

.move-row > strong {
    font-size: 15px;
    letter-spacing: -0.03em;
    text-align: right;
    white-space: nowrap;
}

.move-empty {
    margin: 8px 0;
    color: #888;
    font-size: 14px;
}

.move-ata-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.22);
    backdrop-filter: blur(2px);
}

.move-ata {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    display: flex;
    flex-direction: column;
    width: min(480px, calc(100vw - 32px));
    max-height: min(86dvh, 620px);
    overflow: hidden;
    padding: 8px 22px 18px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(17, 17, 17, 0.1);
    transform: translate(-50%, -50%);
}

.move-ata form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.move-ata__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 12px;
}

.move-ata__head strong {
    margin-right: auto;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.move-ata__head button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #888;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
}

.move-ata__head button:hover { background: #f4f4f4; color: #111; }

.move-ata__find,
.move-ata__sender {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #5c5c5c;
    font-size: 13px;
    font-weight: 600;
}

.move-ata input[type="search"],
.move-ata select {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #f7f7f7;
    font: inherit;
    font-weight: 500;
    color: #111;
}

.move-ata select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.move-ata__sender small {
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.move-ata__who {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 2px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #fafafa;
}

.move-ata__tick {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #111;
}

.move-ata__tick::after {
    content: "";
    width: 7px;
    height: 12px;
    margin-top: -1px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.move-ata__who-body { min-width: 0; }

.move-ata__who small {
    display: block;
    margin-bottom: 3px;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.move-ata__who p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.move-ata__who strong {
    font-size: 15px;
    font-weight: 700;
}

.move-ata__who em,
.move-pick__hits em {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    color: #5c5c5c;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.move-pick__hits em {
    background: #f0f0f0;
}

.move-ata__who span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-ata__who button {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.move-ata__who button:hover { color: #111; }

.move-pick__hits {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 0 0;
    max-height: 220px;
    overflow: auto;
}

.move-pick__hits button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    text-align: left;
}

.move-pick__hits button:hover { background: #f7f7f7; }

.move-pick__hits strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}

.move-pick__hits span { color: #888; font-size: 12px; font-weight: 500; }

.move-pick__acts {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
}

.move-pick__acts button {
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.move-pick__acts button:hover { color: #111; }

.move-pick__acts button[type="submit"] {
    padding: 0 14px;
    background: var(--brand);
    color: #fff;
}

.move-pick__acts button[type="submit"]:hover { background: #c80406; color: #fff; }

.move-pick__acts button[type="submit"]:disabled {
    background: #f0f0f0;
    color: #bbb;
}

@media (max-width: 767px) {
    .move-head,
    .move-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .move-head__side,
    .move-row__act,
    .move-row > strong { text-align: left; }

    .move-row__act span { align-items: flex-start; }

    html:has(body.page-bank .move-board),
    body.page-bank:has(.move-board) {
        height: 100dvh;
        overflow: hidden;
    }

    body.page-bank:has(.move-board) .app {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body.page-bank:has(.move-board) .topbar--mobile {
        position: relative;
        flex-shrink: 0;
    }

    body.page-bank .content--bank:has(.move-board) {
        padding-bottom: 16px;
    }
}

@media (max-width: 767px) {
    body.page-bank .content--bank:has(.bank-split) {
        display: block;
        padding: 0 0 0 118px;
        overflow: visible;
    }

    body.page-bank .content--bank:has(.bank-split) > .page-head {
        margin: 0;
        padding: 12px 16px 8px;
    }

    .page-bank .topbar--mobile {
        border-bottom: 0;
    }

    body.page-bank .content--bank:has(.bank-split) .bank-notice {
        margin: 0;
        padding: 0 16px 8px;
    }

    .bank-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bank-card__side,
    .bank-card__acts {
        grid-column: 1 / -1;
    }

    .bank-card__side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .bank-board {
        margin-bottom: calc(var(--bottom-nav) + 8px);
    }

    .bank-roll--peek {
        margin: 0 16px 12px;
    }

    .bank-split {
        display: block;
    }

    .bank-aside {
        position: fixed;
        top: 50px;
        left: 0;
        bottom: 0;
        z-index: 22;
        width: 118px;
        min-height: 0;
        padding: 16px 10px calc(var(--bottom-nav) + 16px) 16px;
        background: #fff;
        border: 0;
        border-right: 1px solid var(--gray-20);
        border-radius: 0;
    }

    .bank-aside__kicker,
    .bank-aside h2,
    .bank-aside > p,
    .bank-aside__back,
    .bank-aside__now {
        display: none;
    }

    .bank-rail::before {
        top: 20px;
        bottom: 20px;
        transform: none;
    }

    .bank-rail::after {
        display: block;
        top: 20px;
        left: 5px;
        height: calc((100% - 40px) * (var(--rail-at) - 1) / 3);
        transform: none;
    }

    .bank-rail button {
        gap: 8px;
        padding: 14px 0;
    }

    .bank-rail button span {
        font-size: 13px;
        white-space: nowrap;
    }

    .bank-main {
        margin: 0 16px calc(var(--bottom-nav) + 24px);
        padding: 20px 16px;
    }

    .bank-roll__item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bank-roll__acts {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .bank-doc,
    .bank-doc__acts { flex-direction: column; align-items: flex-start; }
}

.content--settings {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0;
    background: #fff;
}

.content--settings > .page-head {
    margin: 0;
    padding: var(--content-pad) var(--content-pad) 8px;
}

.set-rail {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 24;
    align-self: stretch;
    min-height: 100%;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 0 20px;
    background: #fff;
    border-right: 1px solid var(--gray-20);
}

.set-main {
    flex: 1;
    min-width: 0;
    padding: 8px var(--content-pad) 32px;
}

.acct {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 8px 40px;
    align-items: start;
    width: 100%;
    min-height: 100%;
    padding: 12px 0 0;
}

.acct__id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.acct__mark {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 18px;
    background: #f4f4f4;
    color: #111;
}

.acct__mark i {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
}

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

.acct__mark.has-logo {
    background: #fff;
    border: 1px solid var(--gray-20);
}

.acct__logo-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.acct__logo-go,
.acct__logo-off {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.acct__logo-go {
    background: #111;
    color: #fff;
}

.acct__logo-go:hover { background: var(--brand); }

.acct__logo-off {
    background: #f4f4f4;
    color: #555;
}

.acct__logo-off:hover {
    background: #eee;
    color: #111;
}

.acct__logo-acts small {
    flex: 1 1 100%;
    margin: 0;
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

.acct__id strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct__id small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    margin-top: -4px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct__body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    padding-left: 40px;
    border-left: 1px solid var(--gray-20);
}

.acct__block p {
    margin: 0 0 12px;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
}

.acct__block small {
    display: block;
    margin: -8px 0 12px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.acct__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.acct__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.acct__field.is-wide { grid-column: 1 / -1; }

.acct__field > span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.acct__field em {
    color: var(--brand);
    font-style: normal;
}

.acct__field input,
.acct .set-pass {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: #f4f4f4;
}

.acct__field input {
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    outline: none;
}

.acct input:-webkit-autofill,
.acct input:-webkit-autofill:hover,
.acct input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111;
    box-shadow: 0 0 0 1000px #f4f4f4 inset;
}

.acct .set-pass {
    display: flex;
    align-items: center;
    padding: 0 6px 0 12px;
}

.acct .set-pass input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    outline: none;
}

.acct .set-pass__toggle {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #888;
}

.acct .set-pass__toggle:hover {
    background: #fff;
    color: #111;
}

.acct__lock {
    margin: 12px 0 0;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.acct__foot {
    display: flex;
    justify-content: flex-end;
}

.acct__save {
    min-width: 120px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.acct__save:hover { background: #111; }

.set-rail a {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--gray-50);
}

.set-rail a.is-on {
    color: var(--brand);
    background: #fff1f1;
}

.set-rail a span {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: #111;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 40;
}

.set-rail a:hover span,
.set-rail a:focus-visible span { opacity: 1; }

.set-panel { display: none; }
.set-panel.is-open {
    display: block;
    animation: set-in 0.28s ease;
}

@keyframes set-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.set-page { max-width: 720px; }

.set-me {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
}

.set-me__who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.set-me__who i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f4f4f4;
    color: #111;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.set-me__who strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
    line-height: 1.2;
}

.set-me__who small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.set-me__sheet {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    border-radius: 16px;
    background: #fff;
}

.set-me__block p {
    margin: 0 0 12px;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
}

.set-me__hint {
    display: block;
    margin: -8px 0 12px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.set-me__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.set-me__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.set-me__field.is-wide { grid-column: 1 / -1; }

.set-me__field > span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.set-me__field em {
    color: var(--brand);
    font-style: normal;
}

.set-me__field input,
.set-me .set-pass {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: #f4f4f4;
}

.set-me__field input {
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    outline: none;
}

.set-me .set-pass {
    display: flex;
    align-items: center;
    padding: 0 6px 0 12px;
}

.set-me .set-pass input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    outline: none;
}

.set-me .set-pass__toggle {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #888;
}

.set-me .set-pass__toggle:hover {
    background: #fff;
    color: #111;
}

.set-me__lock {
    margin: 12px 0 0;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.set-me__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.set-me__save {
    min-width: 120px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.set-me__save:hover { background: #111; }

.set-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 8px;
    font-size: 14px;
}

.set-line a {
    color: var(--brand);
    font-weight: 700;
}

.set-line span { color: var(--gray-50); }

.set-notice {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
}

.set-notice--ok { color: var(--green); }
.set-notice--error { color: var(--brand); }

.set-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.set-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.set-field i {
    color: var(--brand);
    font-style: normal;
}

.set-field > input,
.set-pass {
    width: 100%;
    height: 44px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
}

.set-field > input {
    padding: 0 12px;
    font: inherit;
    font-weight: 500;
    color: var(--text);
    outline: none;
}

.set-pass {
    display: flex;
    align-items: center;
    padding: 0 6px 0 12px;
}

.set-pass input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 500;
    outline: none;
}

.set-pass__toggle {
    display: grid;
    place-items: center;
    width: 32px;
    color: var(--gray-50);
}

.set-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}

.set-grid + .set-notes {
    padding-top: 18px;
    margin-top: 20px;
    border-top: 1px solid var(--gray-20);
}

.set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    cursor: pointer;
}

.set-row span {
    font-size: 13px;
    font-weight: 600;
}

.set-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.set-switch {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 99px;
    background: #e4e4e4;
    flex-shrink: 0;
}

.set-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease;
}

.set-row:has(input:checked) .set-switch { background: var(--brand); }
.set-row:has(input:checked) .set-switch::after { transform: translateX(16px); }

.set-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 18px;
    margin-top: 16px;
    border-top: 1px solid var(--gray-20);
}

.set-save {
    min-width: 120px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .content--settings > .page-head {
        padding: 12px 16px 8px;
    }

    .acct {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 8px 0 0;
    }

    .acct__body {
        padding-left: 0;
        border-left: 0;
    }

    .acct__grid { grid-template-columns: 1fr; }

    .set-rail {
        grid-column: 1;
        grid-row: 1 / -1;
        position: sticky;
        top: 0;
        width: 56px;
        min-height: 100%;
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
        padding: 24px 0 calc(var(--bottom-nav) + 16px);
        overflow: visible;
        border-right: 1px solid var(--gray-20);
        border-bottom: 0;
    }

    .page-settings .topbar--mobile {
        border-bottom: 0;
    }

    .set-rail a {
        width: 40px;
        height: 40px;
    }

    .set-rail a span {
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
    }

    .set-main {
        padding: 0 16px calc(var(--bottom-nav) + 24px);
    }

    .set-grid,
    .set-notes,
    .set-me__grid { grid-template-columns: 1fr; }
}

/* BORC */
body.page-unpaid .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
    align-items: center;
    gap: 10px 16px;
    overflow: visible;
}

body.page-unpaid .page-context {
    grid-area: ctx;
    min-width: 0;
    margin-right: 0;
}

body.page-unpaid .page-head .topbar__actions {
    grid-area: acts;
    flex-shrink: 0;
}

body.page-unpaid .page-context__line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-unpaid .page-head__tools {
    grid-area: tools;
    min-width: 0;
}

body.page-unpaid .page-head__tools .due-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

body.page-unpaid .due-tools__lead {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

body.page-unpaid .due-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

body.page-unpaid .due-tools__go {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

body.page-unpaid .due-pay,
body.page-unpaid .due-bulk {
    margin-left: 0;
}

.due-bulk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.due-bulk:hover { background: #2a2a2a; }

.due-sort__ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.due-sort__name {
    white-space: nowrap;
}

.due-sort__chev {
    display: grid;
    flex-shrink: 0;
}

.due-bar {
    display: none;
}

.due-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
}

.due-sort { position: relative; flex: 0 0 auto; }

.due-sort__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--gray-10);
    color: #111;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.due-sort__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
}

.due-sort__menu[hidden] { display: none; }

.due-sort__menu button {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.due-sort__menu button:hover { background: var(--gray-10); }
.due-sort__menu button.is-on { background: var(--brand); color: #fff; }

.due-pay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.due-search {
    position: relative;
    width: 220px;
}

.due-search__ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-50);
    display: grid;
    place-items: center;
    pointer-events: none;
}

.due-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: inherit;
    outline: none;
    box-shadow: none;
}

.due-search input:focus,
.due-search input:focus-visible {
    outline: none;
    border-color: var(--gray-40);
    box-shadow: none;
}

body.page-unpaid {
    height: 100dvh;
    overflow: hidden;
}

body.page-unpaid .app,
body.page-unpaid .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-unpaid .content--unpaid,
body.page-lawyer .content--lawyer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-unpaid .page-head { flex-shrink: 0; }

body.page-lawyer {
    height: 100dvh;
    overflow: hidden;
}

body.page-lawyer .app,
body.page-lawyer .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-lawyer .page-head { flex-shrink: 0; }

.due-split {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 0.92fr);
    gap: 16px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.due-people,
.due-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.due-people__list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
}

.due-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.due-row:hover,
.due-row.is-on { background: var(--gray-10); }

.due-row__ico {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--brand);
    border: 1px solid #f0e4e4;
}

.due-row__text { min-width: 0; }

.due-row__text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.due-row__text small {
    display: block;
    margin-top: 3px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.due-row__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.due-row__meta b {
    font-size: 13px;
    font-weight: 700;
}

.due-row__meta em {
    color: var(--gray-50);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.due-empty {
    margin: 0;
    padding: 20px 16px 24px;
    color: var(--gray-50);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.due-pane { padding: 0; overflow: hidden; }

.due-pane__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--gray-20);
}

.due-pane__back {
    display: none;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #111;
    transform: rotate(90deg);
}

.due-pane__head strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.due-pane__head small {
    display: block;
    margin-top: 3px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.due-pane__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 20px 0;
}

.due-pane__list {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
}

.due-month {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 96px;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 14px;
    background: #fff;
    border-radius: 0;
    border-bottom: 1px solid var(--gray-20);
    cursor: pointer;
}

.due-month:last-child { border-bottom: 0; }

.due-month input { position: absolute; opacity: 0; pointer-events: none; }

.due-month__box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--gray-20);
}

.due-month:has(input:checked) .due-month__box {
    background: var(--brand);
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

.due-month__name { font-size: 13px; font-weight: 600; }

.due-month__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: 96px;
}

.due-month__side em {
    color: var(--gray-50);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.due-month__side strong {
    color: var(--brand);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.due-pane__foot {
    flex-shrink: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--gray-20);
}

.due-pane__sum {
    margin: 10px 14px 16px 0;
    color: var(--gray-70);
    font-size: 16px;
    font-weight: 600;
    text-align: right;
}

.due-pane__sum strong {
    color: #111;
    font-size: 17px;
    font-weight: 700;
}

.due-pane__acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.due-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--gray-10);
    color: #111;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.due-act--brand { background: var(--brand); color: #fff; }
.due-act.is-on {
    background: #111;
    color: #fff;
}
.due-act--dark { background: var(--gray-80); color: #fff; }
.due-act .nav-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lex-flash {
    flex-shrink: 0;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--gray-20);
    border-radius: 0;
    background: #fafafa;
    font-size: 13px;
    font-weight: 700;
}

.lex-flash[hidden] { display: none !important; }
.lex-flash--ok { border-color: #111; }
.lex-flash--error { color: var(--brand); border-color: #f3b4b5; background: #fff1f1; }

.lex {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0;
    flex: 1;
    min-height: 0;
    border: 1px solid #ececec;
    background: #fff;
}

.lex-rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 16px 0 0;
    border-right: 1px solid #ececec;
    background: #fafafa;
}

.lex-find {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 16px 12px;
    color: #888;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lex-find input,
.lex-find select {
    height: 36px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #d8d8d8;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.lex-find input:focus,
.lex-find select:focus {
    border-bottom-color: var(--brand);
    outline: none;
}

.lex-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 4px 16px 12px;
    border-bottom: 1px solid #ececec;
}

.lex-tabs button {
    height: 34px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #888;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lex-tabs button.is-on {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.lex-rail__count {
    margin: 0 16px 8px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.lex-stack {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.lex-file {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 10px 16px 10px 12px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.lex-file i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 52px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.04em;
    box-shadow: 3px 3px 0 #ececec;
}

.lex-file div { min-width: 0; }

.lex-file strong {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lex-file span {
    display: block;
    overflow: hidden;
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lex-file em {
    color: #111;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lex-file:hover,
.lex-file.is-on {
    background: #fff;
    border-left-color: var(--brand);
}

.lex-file.is-on i {
    background: var(--brand);
    color: #fff;
    box-shadow: none;
}

.lex-file.is-done em,
.lex-file.is-done strong { color: #888; }

.lex-empty {
    margin: 12px 16px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.lex-empty[hidden] { display: none !important; }

.lex-brief {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 22px 28px 24px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 27px,
            #f3f3f3 27px,
            #f3f3f3 28px
        );
}

.lex-brief__back {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
}

.lex-cover {
    position: relative;
    margin: 0 0 22px;
    padding: 0 0 18px 18px;
    border-bottom: 1px solid #ececec;
    border-left: 4px solid var(--brand);
}

.lex-cover__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.lex-cover__top span {
    color: #888;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.lex-stamp {
    margin-left: auto;
    padding: 4px 10px;
    border: 1.5px solid var(--brand);
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(-8deg);
}

.lex-stamp[data-state="follow"] {
    border-color: #111;
    color: #111;
}

.lex-stamp[data-state="done"] {
    border-color: #bbb;
    color: #888;
}

.lex-cover h2 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.lex-cover p {
    margin: 0;
    color: #666;
    font-size: 13px;
    font-weight: 600;
}

.lex-cover__sum {
    display: block;
    margin-top: 14px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.lex-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 0 0 22px;
}

.lex-cols h3 {
    margin: 0 0 6px;
    color: #888;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lex-cols p {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
}

.lex-cols span {
    display: block;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.lex-ledger {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #111;
}

.lex-ledger li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dotted #d8d8d8;
}

.lex-ledger i {
    color: #bbb;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.lex-ledger span { font-size: 14px; font-weight: 700; }

.lex-ledger b {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

.lex-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 22px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
}

.lex-note textarea {
    min-height: 96px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #d8d8d8;
    border-radius: 0;
    background: repeating-linear-gradient(
        #fff,
        #fff 27px,
        #f1f1f1 27px,
        #f1f1f1 28px
    );
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #111;
    line-height: 28px;
    resize: vertical;
}

.lex-note textarea:focus {
    border-bottom-color: var(--brand);
    outline: none;
}

.lex-note button {
    align-self: flex-end;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #111;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.lex-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #ececec;
}

.lex-states {
    display: flex;
    gap: 0;
}

.lex-states button {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #ececec;
    background: #fff;
    color: #888;
    font-size: 12px;
    font-weight: 800;
}

.lex-states button:first-child { border-radius: 0; }
.lex-states button + button { border-left: 0; }

.lex-states button.is-on {
    background: #111;
    border-color: #111;
    color: #fff;
}

.lex-foot__go {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.lex-foot__go button {
    height: 34px;
    padding: 0 12px;
    background: transparent;
    color: #111;
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lex-foot__recall {
    text-decoration: none !important;
    color: var(--brand) !important;
}

@media (max-width: 900px) {
    .lex { grid-template-columns: 1fr; }
    .lex-brief { display: none; }
    .lex.is-brief .lex-rail { display: none; }
    .lex.is-brief .lex-brief { display: flex; }
    .lex-brief__back { display: inline-flex; }
    .lex-cols { grid-template-columns: 1fr; }
    .lex-foot__go { margin-left: 0; }
}

.law-mask {
    position: fixed;
    inset: 0;
    z-index: 82;
    background: rgba(17, 17, 17, 0.38);
}

.law-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 83;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 32px));
    max-height: min(86dvh, 640px);
    overflow: hidden;
    background: #fff;
    color: #111;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
    transform: translate(-50%, -50%);
}

.law-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
}

.law-sheet__head > div { min-width: 0; margin-right: auto; }

.law-sheet__head small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.law-sheet__head strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.law-sheet__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
}

.law-sheet__x:hover { background: #111; color: #fff; }

.law-sheet__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 0 18px 8px;
    overflow: auto;
}

.law-sheet__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.law-sheet__empty {
    margin: 0;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.law-sheet__note[hidden] { display: none !important; }

.law-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: #fafafa;
    cursor: pointer;
}

.law-pick:has(input:checked) {
    background: var(--brand);
    color: #fff;
}

.law-pick input {
    flex-shrink: 0;
    accent-color: var(--brand);
}

.law-pick:has(input:checked) input { accent-color: #fff; }

.law-pick__face {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.law-pick:has(input:checked) .law-pick__face {
    background: #fff;
    color: var(--brand);
}

.law-pick__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.law-pick > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
}

.law-pick strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.law-pick small {
    display: block;
    overflow: hidden;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.law-pick:has(input:checked) small { color: rgba(255, 255, 255, 0.7); }

.law-sheet__note {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.law-sheet__note > span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.law-sheet__note textarea {
    width: 100%;
    min-height: 88px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: #fafafa;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    resize: vertical;
    outline: none;
}

.law-sheet__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 16px;
}

.law-sheet__cancel {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.law-sheet__go {
    min-height: 40px;
    margin-left: auto;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.law-sheet__cancel:hover,
.law-sheet__go:hover { filter: brightness(0.97); }

.law-mask[hidden],
.law-sheet[hidden] { display: none !important; }

.due-done { z-index: 88; }
.due-done [hidden] { display: none !important; }

.due-act[data-tip] { position: relative; }
.due-act[data-tip]:hover::after,
.due-act[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    max-width: 220px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    pointer-events: none;
}

.due-sms-mask {
    position: fixed;
    inset: 0;
    z-index: 84;
    background: rgba(17, 17, 17, 0.38);
}

.due-sms {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 85;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 32px));
    max-height: min(92dvh, 100%);
    overflow: hidden;
    background: #fff;
    color: #111;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
    transform: translate(-50%, -50%);
}

.due-sms.is-send {
    height: min(92dvh, 100%);
}

.due-sms__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
}

.due-sms__head > div { min-width: 0; margin-right: auto; }

.due-sms__head small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.due-sms__head strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.due-sms__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
}

.due-sms__x:hover { background: #111; color: #fff; }

.due-sms__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
    padding: 0 18px 8px;
    overflow: hidden;
}

.due-sms__ask p {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.due-sms__ask small {
    display: block;
    margin-top: 8px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.due-sms__hits {
    --due-sms-row: 48px;
    --due-sms-gap: 6px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--due-sms-gap);
    overflow: auto;
}

.due-sms__row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
    height: var(--due-sms-row);
    padding: 6px 12px;
    border-radius: 12px;
    background: #fafafa;
    box-sizing: border-box;
    overflow: hidden;
}

.due-sms__row > div { min-width: 0; margin-right: auto; }

.due-sms__row strong,
.due-sms__row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.due-sms__row strong { font-size: 14px; font-weight: 800; }

.due-sms__row small {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.due-sms__row em {
    flex-shrink: 0;
    max-width: 42%;
    overflow: hidden;
    color: #888;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.due-sms__row.is-run em { color: #111; }
.due-sms__row.is-ok em { color: #111; }
.due-sms__row.is-bad em { color: var(--brand); }

.due-sms__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 18px 16px;
}

.due-sms__prog p {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.due-sms__prog i {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #fafafa;
    font-style: normal;
}

.due-sms__prog b {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--brand);
}

.due-sms__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.due-sms__cancel,
.due-sms__no,
.due-sms__stop {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.due-sms__yes {
    min-height: 40px;
    margin-left: auto;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.due-sms__cancel:hover,
.due-sms__no:hover,
.due-sms__yes:hover,
.due-sms__stop:hover { filter: brightness(0.97); }

.due-sms-mask[hidden],
.due-sms[hidden],
.due-sms__ask[hidden],
.due-sms__hits[hidden],
.due-sms__prog[hidden],
.due-sms__cancel[hidden],
.due-sms__no[hidden],
.due-sms__yes[hidden],
.due-sms__stop[hidden] { display: none !important; }

.due-take-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.38);
}

.due-take {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    display: flex;
    flex-direction: column;
    width: min(520px, calc(100vw - 32px));
    max-height: min(86dvh, 640px);
    overflow: hidden;
    background: #fff;
    color: #111;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
    transform: translate(-50%, -50%);
}

.due-take__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
}

.due-take__head > div { min-width: 0; margin-right: auto; }

.due-take__head small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.due-take__head strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.due-take__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
}

.due-take__x:hover { background: #111; color: #fff; }

.due-take__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 0 18px 8px;
    overflow: auto;
}

.due-take__find {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: #fafafa;
}

.due-take__find span {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    color: #888;
}

.due-take__find input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    appearance: none;
}

.due-take__find input::-webkit-search-decoration,
.due-take__find input::-webkit-search-cancel-button {
    appearance: none;
}

.due-take__body label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.due-take__body label > span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.due-take__body label input,
.due-take__body select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: #fafafa;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.due-take__body label input:focus,
.due-take__body select:focus,
.due-take__find input:focus {
    outline: none;
}

.due-take__hits {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow: auto;
}

.due-take__hits button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: #fafafa;
    color: #111;
    text-align: left;
    cursor: pointer;
}

.due-take__hits button strong {
    font-size: 13px;
    font-weight: 800;
}

.due-take__hits button small {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.due-take__hits button:hover,
.due-take__hits button.is-on {
    background: #111;
    color: #fff;
}

.due-take__hits button:hover small,
.due-take__hits button.is-on small { color: rgba(255, 255, 255, 0.7); }

.due-take__picked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
}

.due-take__picked strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.due-take__picked small {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
}

.due-take__picked > div { min-width: 0; margin-right: auto; }

.due-take__picked button {
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.due-take__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.due-take__note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.due-take__note.is-warn {
    background: #fff1f1;
    color: var(--brand);
}

.due-take__left,
.due-take__sum {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fafafa;
    font-size: 13px;
    font-weight: 700;
}

.due-take__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 16px;
}

.due-take__cancel {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.due-take__go {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.due-take__again {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.due-take__save {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.due-take__cancel:hover,
.due-take__again:hover,
.due-take__save:hover { filter: brightness(0.97); }

.due-take-mask[hidden],
.due-take[hidden],
.due-take__picked[hidden],
.due-take__find[hidden],
.due-take__hits[hidden],
.due-take__sum[hidden],
.due-take__note[hidden] { display: none !important; }

.due-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--gray-20);
}

.due-pager__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

.due-page {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--gray-10);
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.due-page.is-on { background: var(--brand); color: #fff; }
.due-page:disabled { opacity: 0.35; cursor: default; }
.due-page--gap {
    background: transparent;
    min-width: 20px;
    padding: 0;
    color: var(--gray-50);
}

@media (max-width: 900px) {
    html:has(body.page-unpaid),
    html:has(body.page-lawyer),
    body.page-unpaid,
    body.page-lawyer {
        height: 100dvh;
        overflow: hidden;
    }
    body.page-unpaid .app,
    body.page-lawyer .app {
        display: flex;
        flex-direction: row;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-unpaid .shell,
    body.page-lawyer .shell {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-unpaid .page-head__tools .due-tools {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
    }
    body.page-unpaid .due-tools__lead { flex: 1 1 auto; min-width: 0; }
    body.page-unpaid .due-search { flex: 1 1 auto; width: auto; min-width: 0; }
    .due-split { grid-template-columns: 1fr; }
    .due-pane { display: none; }
    .due-split.is-detail .due-people { display: none; }
    .due-split.is-detail .due-pane { display: block; }
    .due-pane__back { display: grid; }
}

@media (max-width: 767px) {
    body.page-unpaid .app { flex-direction: column; }
    body.page-unpaid .shell { flex: 1; }
    body.page-unpaid .page-head__tools .due-tools {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }
    body.page-unpaid .due-tools { gap: 8px; }
    body.page-unpaid .due-sort { flex: 0 0 auto; min-width: 36px; }
    body.page-unpaid .due-sort__go {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    body.page-unpaid .due-sort__name,
    body.page-unpaid .due-sort__chev { display: none; }
    body.page-unpaid .due-sort__menu {
        min-width: min(280px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
    }
    body.page-unpaid .due-search { flex: 1 1 auto; width: auto; min-width: 0; }
    body.page-unpaid .due-tools__go {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        justify-self: stretch;
    }
    body.page-unpaid .due-pay,
    body.page-unpaid .due-bulk {
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        justify-content: center;
    }
    body.page-unpaid .due-pay span,
    body.page-unpaid .due-bulk span { display: inline; }
}

/* SMS */
body.page-bulk {
    height: 100dvh;
    overflow: hidden;
}

body.page-bulk .app,
body.page-bulk .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-bulk .content--bulk {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-bulk .panel {
    min-width: 0;
}

body.page-bulk .page-head { flex-shrink: 0; }

.bulk {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bulk-toolbar { flex-shrink: 0; margin-bottom: 20px; }

.bulk-toolbar .flow-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
}

.bulk-toolbar .flow-tab {
    justify-content: center;
    min-width: 0;
    padding: 10px 6px 12px;
    text-align: center;
}

.bulk-toolbar .flow-tab.is-on {
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
    margin-bottom: -1px;
}

.bulk.is-temps .bulk-compose,
.bulk.is-temps .bulk-panel {
    margin-right: 320px;
}

.bulk-note {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.bulk-note--ok {
    color: #111;
    background: #fafafa;
    border: 1px solid var(--gray-20);
}

.bulk-note--err {
    color: var(--brand);
    background: #fff1f1;
    border: 1px solid #f3b4b5;
}

.bulk-panel[hidden],
.bulk-compose[hidden] {
    display: none !important;
}

.bulk-compose {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    align-items: stretch;
    flex: 1;
    min-height: 0;
    gap: 24px;
}

.bulk-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.bulk-compose > .bulk-col {
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.bulk-col .panel-head {
    margin-bottom: 12px;
}

.bulk-col__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 12px;
}

.bulk-col .bulk-search {
    background: #fff;
}

.bulk-col:first-child {
    height: 100%;
    min-height: 0;
}

.bulk-col .panel-head,
.bulk-panel .panel-head {
    width: 100%;
}

.bulk-col .panel-head [data-bulk-picked],
.bulk-picked {
    flex-shrink: 0;
    margin: 0 0 0 auto;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.bulk-panel .panel-head [data-bulk-sync] {
    flex-shrink: 0;
    white-space: nowrap;
}

.bulk-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.bulk-refresh .nav-ico { color: #fff; }

.bulk-refresh:hover { background: #333; }

.bulk-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

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

.bulk-back:hover { background: #fafafa; }

.bulk-col .panel-head h2 { flex: none; }

.bulk-col__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 12px;
}

.bulk-sites[hidden],
.bulk-chips[hidden] {
    display: none !important;
}

.bulk-sites {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.bulk-site {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--gray-20);
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

.bulk-site.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.bulk-card {
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.bulk-card__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    margin: 0 12px;
}

.bulk-panel[data-bulk-panel="reports"] .due-sort {
    flex: 0 0 auto;
}

.bulk-panel[data-bulk-panel="reports"] .due-sort__menu {
    min-width: 180px;
}

.bulk.is-pick.is-chosen [data-bulk-findbar],
.bulk.is-sites.is-chosen [data-bulk-findbar] { display: none; }

.bulk-search {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 6px 0 10px;
    background: #fafafa;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
}

.bulk-search__ico {
    color: var(--gray-50);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.bulk-search__ico .nav-ico {
    width: 14px;
    height: 14px;
}

.bulk-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    outline: none;
    box-shadow: none;
}

.bulk-search:focus-within { border-color: var(--gray-40); }

.bulk-link {
    flex-shrink: 0;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 600;
}

.bulk-link:hover { color: #111; }

.bulk-search .bulk-link,
.bulk-search .bulk-find {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 26px;
    margin-left: 4px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-search .bulk-link .nav-ico,
.bulk-search .bulk-find .nav-ico { color: #fff; }

.bulk-search .bulk-link:hover,
.bulk-search .bulk-find:hover { background: #333; }

.bulk-search .bulk-link.is-clear,
.bulk-search .bulk-find {
    background: var(--brand);
    color: #fff;
}

.bulk-search .bulk-link.is-clear:hover,
.bulk-search .bulk-find:hover { background: #c40407; }

.bulk-find {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bulk.is-sites [data-bulk-all] { display: none; }

.bulk-chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.bulk-pick {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px 14px;
    padding: 16px 16px 14px;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.bulk-pick__ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}

.bulk-pick__ico .nav-ico { color: #fff; }

.bulk.is-sites .bulk-pick__ico .nav-ico {
    width: 16px;
    height: 16px;
}

.bulk-pick__kicker {
    margin: 4px 0 0;
    color: #111;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bulk.is-sites .bulk-pick__kicker {
    font-style: italic;
}

.bulk-pick__body strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.bulk-pick__role {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff1f1;
    color: var(--brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-style: normal;
}

.bulk-pick__meta {
    margin: 10px 0 0;
    color: var(--gray-70);
    font-size: 14px;
    font-weight: 500;
}

.bulk-pick__swap {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--gray-20);
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

.bulk-pick__swap:hover { background: #fafafa; }

.bulk.is-pick .bulk-person,
.bulk.is-sites .bulk-person {
    grid-template-columns: 20px minmax(0, 1fr);
}

.bulk.is-pick .bulk-person__amt,
.bulk.is-sites .bulk-person__amt { display: none; }

.bulk-hit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    margin-bottom: 8px;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 12px;
    text-align: left;
}

.bulk-hit--site {
    grid-template-columns: 28px minmax(0, 1fr) auto;
}

.bulk-hit__ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff1f1;
    color: var(--brand);
}

.bulk-hit__ico .nav-ico {
    width: 16px;
    height: 16px;
    color: var(--brand);
}

.bulk-hit:hover { background: #f4f4f4; }

.bulk-hit.is-on { background: #fff1f1; }

.bulk-hit strong { font-size: 13px; font-weight: 700; }

.bulk-hit b {
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 700;
}

.bulk-empty--hint {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 180px;
    padding: 36px 24px;
}

.bulk-people {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.bulk-person {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #fafafa;
    border-radius: 12px;
    cursor: pointer;
}

.bulk-person:hover { background: #f4f4f4; }

.bulk-person input { position: absolute; opacity: 0; pointer-events: none; }

.bulk-person__box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--gray-20);
}

.bulk-person:has(input:checked) .bulk-person__box {
    background: var(--brand);
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

.bulk-person__text { min-width: 0; }

.bulk-person__text strong,
.bulk-person__text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-person__text strong { font-size: 13px; font-weight: 700; }

.bulk-person__text small {
    margin-top: 2px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.bulk-person__amt {
    color: var(--brand);
    font-family: inherit;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.bulk-write {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 10px;
    background: #fafafa;
    border-radius: 12px;
}

.bulk-write textarea {
    width: 100%;
    height: 120px;
    min-height: 120px;
    resize: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: #111;
    caret-color: #111;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.bulk-write textarea:focus {
    outline: none;
    box-shadow: none;
    border: 0;
}

.bulk-write textarea:-webkit-autofill,
.bulk-write textarea:-webkit-autofill:hover,
.bulk-write textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #111;
    caret-color: #111;
    box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 99999s ease-out;
}

.bulk-write__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-20);
}

.bulk-write__count {
    margin: 0;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.bulk-temp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--gray-20);
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.bulk-temps {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 320px;
    height: auto;
    max-height: none;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    background: #fff;
    color: #111;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    transition:
        opacity 0.28s ease,
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.36s;
}

.bulk.is-temps .bulk-temps {
    visibility: visible;
    overflow: auto;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    transition:
        opacity 0.28s ease,
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

.bulk-temps__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 0;
}

.bulk-temps__back,
.bulk-temps__new {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.bulk-temps__back { color: #111; }

.bulk-temps__back[hidden],
.bulk-temps__new[hidden],
.bulk-temps__form[hidden],
.bulk-temps__list[hidden] {
    display: none !important;
}

.bulk-temps__new { margin-left: auto; }

.bulk-temps.is-edit .bulk-temps__close { margin-left: auto; }

.bulk-temps__head strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.bulk-temps__close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #111;
}

.bulk-temps__close:hover { color: var(--brand); }

.bulk-temps__list {
    display: flex;
    flex-direction: column;
    padding: 4px 6px 10px;
}

.bulk-temps__empty {
    margin: 12px 10px;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 500;
}

.bulk-temp {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--gray-20);
}

.bulk-temp:last-child { border-bottom: 0; }

.bulk-temp__go {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    text-align: left;
}

.bulk-temp__acts {
    display: flex;
    flex-shrink: 0;
    margin-top: -2px;
}

.bulk-temp__act {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: transparent;
    color: var(--brand);
}

.bulk-temp__act .nav-ico,
.bulk-temp__act:hover,
.bulk-temp__act--del:hover {
    color: var(--brand);
}

.bulk-temp__go strong,
.bulk-temp__go small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-temp__go strong { font-size: 13px; font-weight: 600; }

.bulk-temp__go small {
    margin-top: 2px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.bulk-temps__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 16px;
}

.bulk-temps__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bulk-temps__form span {
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 700;
}

.bulk-temps__form input,
.bulk-temps__form textarea {
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--gray-20);
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: inherit;
}

.bulk-temps__form textarea {
    min-height: 120px;
    resize: vertical;
}

.bulk-temps__hint {
    margin: 0;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.bulk-temps__save {
    min-height: 40px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.bulk-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.bulk-send .nav-ico { color: #fff; }

.bulk-q {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--gray-20);
}

.bulk-q:last-child { border-bottom: 0; }

.bulk-q strong,
.bulk-q small { display: block; }

.bulk-q strong { font-size: 14px; font-weight: 700; }

.bulk-q small {
    margin-top: 4px;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.bulk-status {
    flex-shrink: 0;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--gray-10);
    color: var(--gray-70);
    font-size: 12px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
}

.bulk-status--wait { background: #fff1f1; color: var(--brand); }

.bulk-empty {
    margin: 0;
    padding: 28px 16px;
    color: var(--gray-50);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.bulk-repbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.bulk-repbar p {
    margin: 0;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 500;
}

.bulk-panel[data-bulk-panel="reports"]:not([hidden]) {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.bulk-panel[data-bulk-panel="reports"] .panel-head {
    margin-bottom: 12px;
}

.bulk-panel[data-bulk-panel="reports"] .bulk-search {
    background: #fff;
}

.bulk-jobs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    overflow: hidden;
}

.bulk-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bulk-jobs .due-pager {
    flex-shrink: 0;
    background: #fff;
}

.bulk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bulk-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.bulk-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-20);
    color: #111;
    vertical-align: middle;
}

.bulk-table tbody tr:nth-child(odd) td { background: #fff; }
.bulk-table tbody tr:nth-child(even) td { background: #fafafa; }

.bulk-table__row { cursor: pointer; }

.bulk-table__row:hover td { background: #f4f4f4; }

.bulk-table__id,
.bulk-table__from,
.bulk-table__msg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-table__id { max-width: 180px; }

.bulk-table__msg { max-width: 280px; }

.bulk-table__msg b {
    font-weight: 500;
}

.bulk-table__msg small { display: none; }

.bulk-table__n {
    text-align: center;
    font-weight: 700;
}

.bulk-table__pluscell,
.bulk-table td:first-child {
    width: 48px;
    text-align: center;
}

.bulk-table__plus {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    appearance: none;
    font-size: 0;
    line-height: 0;
}

.bulk-table__plus::before,
.bulk-table__plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.bulk-table__plus::before {
    width: 10px;
    height: 2px;
}

.bulk-table__plus::after {
    width: 2px;
    height: 10px;
}

.bulk-table__plus.is-open { background: #111; }

.bulk-table__plus.is-open::after { opacity: 0; }

.bulk-table__row.is-on td { background: #fff1f1; }

.bulk-jobmask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-w);
    z-index: 35;
    background: rgba(17, 17, 17, 0.79);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.bulk.is-job .bulk-jobmask {
    opacity: 1;
    pointer-events: auto;
}

.bulk-jobview {
    position: fixed;
    left: calc(var(--sidebar-w) + 16px);
    right: 16px;
    bottom: 16px;
    z-index: 36;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: min(72dvh, 520px);
    padding: 10px 20px 18px;
    background: #fff;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.22);
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        visibility 0s linear 0.36s;
}

.bulk.is-job .bulk-jobview {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        visibility 0s linear 0s;
}

.bulk-jobview__grip {
    display: block;
    width: 40px;
    height: 4px;
    margin: 2px auto 14px;
    border-radius: 99px;
    background: #d8d8d8;
}

.bulk-jobview__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.bulk-jobview__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fafafa;
    color: #111;
    flex-shrink: 0;
}

.bulk-jobview__x:hover { background: var(--gray-10); }

.bulk-jobview__meta {
    min-width: 0;
}

.bulk-jobview__meta strong,
.bulk-jobview__meta small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-jobview__meta small {
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 600;
}

.bulk-jobview__meta strong {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.bulk-jobview__msg {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 12px;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.bulk-jobview__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.bulk-jobview__stats b {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    padding: 8px 6px;
    background: #fafafa;
    border-radius: 12px;
    font-weight: 400;
}

.bulk-jobview__stats b strong {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.bulk-jobview__stats b span {
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 600;
}

.bulk-jobview__stats b.is-dup,
.bulk-jobview__stats b.is-pay,
.bulk-jobview__stats b.is-bad {
    background: #fff1f1;
}

.bulk-jobview__stats b.is-dup strong,
.bulk-jobview__stats b.is-dup span,
.bulk-jobview__stats b.is-pay strong,
.bulk-jobview__stats b.is-pay span,
.bulk-jobview__stats b.is-bad strong,
.bulk-jobview__stats b.is-bad span { color: var(--brand); }

.bulk-jobview__list {
    margin-top: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.bulk-jobview__empty {
    margin: 14px 0 0;
    color: var(--gray-50);
    font-size: 13px;
}

.bulk-jobview .bulk-hithead,
.bulk-jobview .bulk-hit {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.2fr) 140px 80px;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    background: none;
    border-radius: 0;
    text-align: left;
}

.bulk-jobview .bulk-hit:hover { background: none; }

.bulk-hithead {
    flex-shrink: 0;
    margin-top: 14px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--gray-20);
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 700;
}

.bulk-hit {
    min-height: 64px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-20);
}

.bulk-hit:last-child { border-bottom: 0; }

.bulk-hit__who,
.bulk-hit__state { min-width: 0; }

.bulk-hit__who strong,
.bulk-hit__who small,
.bulk-hit__msg {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-hit__who strong {
    font-size: 13px;
    font-weight: 700;
}

.bulk-hit__who small,
.bulk-hit__state small {
    display: block;
    margin-top: 3px;
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 500;
}

.bulk-hit time {
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.bulk-hit__msg {
    margin: 0;
    color: var(--gray-70);
    font-size: 12px;
    font-weight: 500;
}

.bulk-jobview .bulk-again { justify-self: end; }

.bulk-again {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.bulk-again:hover { background: #c40407; }

.bulk-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.bulk-tag--ok { background: #f4f4f4; color: #111; }
.bulk-tag--wait { background: #f4f4f4; color: #111; }
.bulk-tag--dup,
.bulk-tag--pay,
.bulk-tag--bad { background: #fff1f1; color: var(--brand); }
.bulk-tag--retry { background: #111; color: #fff; }

.bulk-mjobs { display: none; }

.bulk-mjob {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    padding: 12px 14px;
    background: #fafafa;
    border: 0;
    border-radius: 14px;
    text-align: left;
}

.bulk-mjob + .bulk-mjob { margin-top: 8px; }

.bulk-mjob.is-on { background: #fff1f1; }

.bulk-mjob__text { min-width: 0; }

.bulk-mjob__text strong,
.bulk-mjob__text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-mjob__text strong {
    font-size: 13px;
    font-weight: 700;
}

.bulk-mjob__text small {
    margin-top: 3px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.bulk-mjob__stat {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
}

.bulk-mjob__stat.is-ok,
.bulk-mjob__stat.is-wait { color: #111; }

.bulk-mjob__stat.is-dup,
.bulk-mjob__stat.is-pay,
.bulk-mjob__stat.is-bad { color: var(--brand); }

.bulk-jobs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
    gap: 12px;
}

.bulk-job {
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    overflow: hidden;
}

.bulk-job__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px;
    width: 100%;
    padding: 18px 18px 12px;
    text-align: left;
}

.bulk-job__copy strong,
.bulk-job__copy small { display: block; }

.bulk-job__copy strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.bulk-job__copy small {
    margin-top: 6px;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 500;
}

.bulk-job__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.bulk-job__stats span {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--gray-10);
    color: var(--gray-70);
    font-size: 12px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
}

.bulk-job__bar {
    height: 3px;
    margin: 0 18px 16px;
    background: var(--gray-10);
    border-radius: 99px;
    overflow: hidden;
}

.bulk-job__bar i {
    display: block;
    height: 100%;
    background: var(--brand);
}

.bulk-job__people {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-20);
    background: #fafafa;
}

.bulk-rec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--gray-20);
}

.bulk-rec:last-child { border-bottom: 0; }

.bulk-rec strong { font-size: 14px; font-weight: 700; }
.bulk-rec small { color: var(--gray-50); font-size: 13px; font-weight: 500; }

.bulk-rec em {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.bulk-rec em.is-ok { color: #111; }
.bulk-rec em.is-wait { color: var(--gray-50); }
.bulk-rec em.is-bad { color: var(--brand); }

@media (max-width: 900px) {
    html:has(body.page-bulk),
    body.page-bulk {
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }
    body.page-bulk .app {
        display: flex;
        flex-direction: row;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-bulk .shell {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-bulk .content--bulk {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .bulk {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .bulk.is-temps .bulk-compose,
    .bulk.is-temps .bulk-panel { margin-right: 0; }
    .bulk-compose {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr);
        flex: 1;
        min-height: 0;
        overflow: hidden;
        align-items: stretch;
    }
    .bulk-col { overflow: hidden; }
    .bulk-people {
        flex: 1;
        max-height: none;
        overflow: auto;
    }
    .bulk-write textarea { height: 120px; min-height: 120px; }
    .bulk-toolbar .flow-tab {
        font-size: 12px;
        padding: 10px 6px 12px;
    }
    .bulk-panel[data-bulk-panel="reports"]:not([hidden]) {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .bulk-table-wrap {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    .bulk-panel[data-bulk-panel="reports"] .panel-head {
        flex-wrap: wrap;
        gap: 8px 10px;
    }
    .bulk-panel[data-bulk-panel="reports"] .bulk-card__bar {
        flex: 1 1 200px;
        min-width: 200px;
        margin: 0 8px;
    }
    .bulk-panel[data-bulk-panel="reports"] [data-bulk-sync] {
        flex: 0 1 auto;
        font-size: 11px;
    }
    .bulk-jobmask {
        left: var(--sidebar-w);
        right: 0;
    }
    .bulk-jobview {
        left: calc(var(--sidebar-w) + 16px);
        right: 16px;
        bottom: 16px;
        max-height: min(70dvh, 480px);
    }
    .bulk-jobview .bulk-hithead,
    .bulk-jobview .bulk-hit {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto;
        align-items: start;
        gap: 8px 10px;
    }
    .bulk-jobview .bulk-tag {
        white-space: normal;
        text-align: left;
    }
}

@media (max-width: 767px) {
    body.page-bulk .app { flex-direction: column; }
    body.page-bulk .shell { flex: 1; }
    .bulk-jobmask { left: 0; }
    .bulk-jobview {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
    body.menu-open .bulk-jobmask { left: 72px; }
    body.menu-open .bulk-jobview { left: calc(72px + 16px); }
    .bulk-compose {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .bulk-col:first-child {
        flex: 1;
        height: auto;
    }
    .bulk-toolbar .flow-tab {
        flex-direction: column;
        gap: 4px;
        font-size: 11px;
        padding: 8px 4px 10px;
    }
    .bulk-table { display: none; }
    .bulk-mjobs { display: block; }
    .bulk-col .panel-head {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        margin-bottom: 8px;
    }
    .bulk-col .panel-head__icon {
        grid-column: 1;
        grid-row: 1;
    }
    .bulk-col .panel-head h2 {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    .bulk-col .panel-head [data-bulk-picked],
    .bulk-col .bulk-picked {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        margin: 0;
    }
    .bulk-col .bulk-card__bar {
        grid-column: 1 / -1;
        grid-row: 2;
        flex: none;
        order: unset;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }
    .bulk-col .bulk-search {
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
        height: 34px;
        padding: 0 4px 0 10px;
    }
    .bulk-col .bulk-search input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 0;
        height: 100%;
        font-size: 13px;
    }
    .bulk-col .bulk-search .bulk-link,
    .bulk-col .bulk-search .bulk-find {
        width: auto;
        min-height: 24px;
        margin-left: 2px;
        padding: 0 8px;
        font-size: 11px;
    }
    .bulk-panel[data-bulk-panel="reports"]:not([hidden]) {
        padding: 0;
        background: transparent;
        border: none;
    }
    .bulk-panel[data-bulk-panel="reports"] .panel-head {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
    }
    .bulk-panel[data-bulk-panel="reports"] .panel-head__icon {
        grid-column: 1;
        grid-row: 1;
    }
    .bulk-panel[data-bulk-panel="reports"] .panel-head h2 {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bulk-panel[data-bulk-panel="reports"] .bulk-refresh {
        grid-column: 3;
        grid-row: 1;
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 10px;
    }
    .bulk-panel[data-bulk-panel="reports"] .bulk-refresh span { display: none; }
    .bulk-panel[data-bulk-panel="reports"] .due-sort__go {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .bulk-panel[data-bulk-panel="reports"] .due-sort__name,
    .bulk-panel[data-bulk-panel="reports"] .due-sort__chev { display: none; }
    .bulk-panel[data-bulk-panel="reports"] .due-sort__menu {
        min-width: min(200px, calc(100vw - 32px));
    }
    .bulk-panel[data-bulk-panel="reports"] .bulk-card__bar {
        grid-column: 1 / -1;
        grid-row: 2;
        flex: none;
        order: unset;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }
    .bulk-panel[data-bulk-panel="reports"] .bulk-search {
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
        height: 40px;
        padding: 0 12px;
    }
    .bulk-panel[data-bulk-panel="reports"] .bulk-search input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 0;
        height: 100%;
        font-size: 13px;
    }
    .bulk-panel[data-bulk-panel="reports"] [data-bulk-sync] {
        grid-column: 1 / -1;
        grid-row: 3;
        flex: none;
        order: unset;
        margin: 0 0 4px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bulk-panel[data-bulk-panel="reports"] .bulk-table-wrap {
        margin: 0;
        padding: 0 12px;
    }
    .bulk-mjob {
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        min-height: 0;
        padding: 14px 0;
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid var(--gray-20);
    }
    .bulk-mjob + .bulk-mjob { margin-top: 0; }
    .bulk-mjob:last-child { border-bottom: 0; }
    .bulk-mjob.is-on { background: transparent; }
    .bulk-mjob.is-on .bulk-mjob__text strong { color: var(--brand); }
    .bulk-mjob__text strong {
        font-size: 14px;
        font-weight: 600;
    }
    .bulk-mjob__text small {
        margin-top: 4px;
        font-size: 12px;
    }
    .bulk-jobview .bulk-hithead,
    .bulk-jobview .bulk-hit {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.85fr) auto;
        align-items: start;
        gap: 8px;
    }
    .bulk-jobview .bulk-hithead { font-size: 10px; }
    .bulk-jobview .bulk-hit time {
        font-size: 11px;
        white-space: normal;
        line-height: 1.35;
    }
    .bulk-jobview .bulk-again {
        min-height: 26px;
        padding: 0 10px;
        font-size: 11px;
        justify-self: end;
        align-self: start;
    }
}

/* BINALAR */
body.page-buildings {
    height: 100dvh;
    overflow: hidden;
}

body.page-buildings .app,
body.page-buildings .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-buildings .content--buildings {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-buildings .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
    align-items: center;
    gap: 10px 16px;
    overflow: visible;
    flex-shrink: 0;
}

body.page-buildings .page-context {
    grid-area: ctx;
    min-width: 0;
    margin-right: 0;
}

body.page-buildings .page-head .topbar__actions {
    grid-area: acts;
    flex-shrink: 0;
}

body.page-buildings .page-context__line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-buildings .page-head__tools {
    grid-area: tools;
    min-width: 0;
}

body.page-buildings .page-head__tools .due-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

body.page-buildings .due-tools__lead {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

body.page-buildings .due-search {
    flex: 0 1 260px;
    width: auto;
    min-width: 0;
    max-width: 280px;
}

body.page-buildings .due-pay {
    margin-left: auto;
}

.bldg-add {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.bldg-add .nav-ico {
    width: 15px;
    height: 15px;
}



.bldg {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.bldg.is-map {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.bldg-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.bldg-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 2px 8px;
}

.bldg-empty {
    margin: 24px 0 0;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.bldg-empty[hidden],
.bldg-mask[hidden],
.bldg-sheet[hidden],
.bldg-out[hidden],
.bldg-spd[hidden],
.bldg-sheet__danger[hidden],
.bldg-sheet__ask[hidden],
.bldg-menu[hidden],
.bldg-map[hidden],
.bldg-map__link[hidden] {
    display: none !important;
}

.bldg-map {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.bldg-map__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--gray-20);
}

.bldg-map__back {
    display: none;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #111;
    transform: rotate(90deg);
}

.bldg-map__meta { min-width: 0; flex: 1; }

.bldg-map__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
}

.bldg-map__close:hover {
    background: #111;
    color: #fff;
}

.bldg-map__head strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.bldg-map__head small {
    display: block;
    margin-top: 4px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.bldg-map__link {
    display: inline-block;
    margin-top: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.bldg-map__frame {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #e5e3df;
}

.bldg-map__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.bldg-map__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}

.bldg-map__zoom button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #111;
}

.bldg-map__zoom button + button {
    border-top: 1px solid var(--gray-20);
}

.bldg-map__zoom button:hover { color: var(--brand); }

.bldg-card {
    display: flex;
    align-items: stretch;
    height: 76px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    cursor: pointer;
}

.bldg-card.is-on {
    border-color: var(--brand);
}

.bldg-card:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.bldg-card:hover .bldg-card__who strong,
.bldg-card:hover .bldg-card__who span {
    color: #fff;
}

.bldg-card__shot {
    width: 112px;
    margin: 0;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 16px 0 0 16px;
    background: #ececec;
}

.bldg-card__shot img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
}

.bldg-card__who {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 14px;
}

.bldg-card__who strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #111;
}

.bldg-card__who span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 500;
}

.bldg-card__mgr {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.bldg-card__mgr[hidden] { display: none !important; }

.bldg-card__acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-self: center;
    min-width: 0;
    margin-left: auto;
    padding: 0 14px 0 0;
}

.bldg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f5f5;
    color: #333;
}

.bldg-btn:hover { background: var(--brand); color: #fff; }

.bldg-btn--kasa {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    background: rgba(232, 5, 8, 0.1);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
}

.bldg-btn--kasa:hover { background: var(--brand); color: #fff; }

.bldg-btn--docs {
    background: #fafafa;
    color: #111;
}

.bldg-btn--docs:hover { background: var(--brand); color: #fff; }

.bldg-btn--who {
    width: auto;
    padding: 0 8px;
    gap: 4px;
}

.bldg-btn--who svg {
    width: 14px;
    height: 14px;
}

.bldg-btn--pay {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bldg-btn--pay:hover { background: var(--brand); color: #fff; }

.bldg-btn--wa {
    background: #f5f5f5;
    color: #111;
}

.bldg-btn--wa:hover { background: var(--brand); color: #fff; }

.bldg-btn--edit {
    background: #f5f5f5;
    color: #111;
}

.bldg-btn--edit:hover { background: var(--brand); color: #fff; }

.bldg-card:hover .bldg-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.bldg-card:hover .bldg-btn--pay {
    background: #111;
    color: #fff;
}

.bldg-card:hover .bldg-btn:hover,
.bldg-card:hover .bldg-btn--kasa:hover,
.bldg-card:hover .bldg-btn--wa:hover,
.bldg-card:hover .bldg-btn--edit:hover,
.bldg-card:hover .bldg-btn--pay:hover {
    background: #fff;
    color: var(--brand);
}

.bldg-btn.is-off {
    opacity: 0.4;
    pointer-events: none;
}

.bldg-drop { position: relative; }

.bldg-card:has(.bldg-drop.is-open) {
    background: var(--brand);
    border-color: var(--brand);
}

.bldg-card:has(.bldg-drop.is-open) .bldg-card__who strong,
.bldg-card:has(.bldg-drop.is-open) .bldg-card__who span { color: #fff; }

.bldg-card:has(.bldg-drop.is-open) .bldg-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.bldg-card:has(.bldg-drop.is-open) .bldg-btn--pay {
    background: #111;
    color: #fff;
}

.bldg-card:has(.bldg-drop.is-open) .bldg-btn:hover,
.bldg-card:has(.bldg-drop.is-open) .bldg-btn--kasa:hover,
.bldg-card:has(.bldg-drop.is-open) .bldg-btn--wa:hover,
.bldg-card:has(.bldg-drop.is-open) .bldg-btn--edit:hover,
.bldg-card:has(.bldg-drop.is-open) .bldg-btn--pay:hover {
    background: #fff;
    color: var(--brand);
}

.bldg-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 260px;
    padding: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(17, 17, 17, 0.14);
}

.bldg-menu--end { left: auto; right: 0; min-width: 160px; }

.bldg-menu--spend {
    z-index: 90;
    min-width: 248px;
    max-width: min(280px, calc(100vw - 24px));
    padding: 6px;
    animation: bldg-menu-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bldg-menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bldg-menu--spend p {
    margin: 0;
    padding: 6px 8px 4px;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bldg-menu a,
.bldg-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.bldg-menu a:hover,
.bldg-menu button:hover { background: #fafafa; }

.bldg-menu--spend button {
    align-items: flex-start;
    min-height: 0;
    padding: 8px;
    gap: 8px;
    border-radius: 8px;
}

.bldg-spend__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.bldg-spend__ico svg {
    display: block;
    width: 14px;
    height: 14px;
}
.bldg-spend__ico.is-live { background: #fff1f1; color: var(--brand); }
.bldg-spend__ico.is-own { background: #111; color: #fff; }

.bldg-menu--spend span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bldg-menu--spend strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.bldg-menu a strong,
.bldg-menu a small { display: block; }

.bldg-menu a small,
.bldg-menu--spend small {
    margin-top: 1px;
    color: #888;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}

.bldg-menu .is-danger {
    color: var(--brand);
    border-top: 1px solid #f0f0f0;
}

.bldg-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.5);
}

.bldg-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    display: flex;
    flex-direction: column;
    width: min(920px, calc(100vw - 32px));
    max-height: min(86dvh, 720px);
    overflow: hidden;
    background: #fff;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.2);
    transform: translate(-50%, -50%);
}

.bldg-sheet.is-log {
    width: min(1180px, calc(100vw - 32px));
}

.bldg-sheet__body {
    display: flex;
    min-height: 0;
    flex: 1;
}

.bldg-sheet__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 0;
}

.bldg-sheet__head strong {
    margin-right: auto;
    font-size: 13px;
    font-weight: 700;
}

.bldg-sheet__close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #111;
}

.bldg-sheet__close:hover { color: var(--brand); }

.bldg-sheet__form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 12px;
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 16px 20px 18px;
}

.bldg-sheet__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bldg-sheet__form label[hidden] { display: none; }

.bldg-sheet__form span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.bldg-sheet__form input:not([type="checkbox"]):not([type="hidden"]),
.bldg-sheet__form select,
.bldg-sheet__form textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-size: 13px;
    color: #111;
}

.bldg-sheet__form textarea {
    min-height: 92px;
    resize: vertical;
}

.bldg-sheet__aidat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.bldg-sheet__aidat:has([data-bldg-history][hidden]) {
    grid-template-columns: minmax(0, 1fr);
}

.bldg-sheet__hist-go[hidden] { display: none; }

.bldg-sheet__hist-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.bldg-sheet__hist-go svg {
    flex: 0 0 auto;
}

.bldg-sheet__note { grid-column: span 2; grid-row: span 2; }

.bldg-sheet__form .bldg-out__switch {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 6px 2px 0;
}

.bldg-sheet__form .bldg-out__switch span {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.bldg-sheet__form .bldg-out__switch b {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    white-space: normal;
}

.bldg-sheet__form .bldg-out__switch i {
    flex: 0 0 40px;
}

.bldg-sheet__pic {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bldg-pic {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bldg-pic__shot {
    display: grid;
    place-items: center;
    width: 72px;
    height: 52px;
    margin: 0;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #f4f4f4;
}

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

.bldg-pic__shot i {
    display: grid;
    color: #bbb;
}

.bldg-pic__shot i[hidden],
.bldg-pic__shot img[hidden] {
    display: none !important;
}

.bldg-pic__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bldg-pic__go,
.bldg-pic__off {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.bldg-pic__go {
    background: #111;
    color: #fff;
}

.bldg-pic__off {
    border: 1px solid #ececec;
    background: #fafafa;
    color: #111;
}

.bldg-pic__meta small {
    width: 100%;
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

.bldg-log {
    display: flex;
    flex-direction: column;
    flex: 0 0 248px;
    width: 248px;
    min-height: 0;
    overflow: auto;
    padding: 16px 16px 18px;
    border-right: 1px solid #ececec;
    background: #fafafa;
}

.bldg-log[hidden] { display: none !important; }

.bldg-log__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.bldg-log__head svg {
    flex: 0 0 auto;
    color: var(--brand);
}

.bldg-log__empty {
    margin: 0;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.bldg-log__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bldg-log__row {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 0 10px;
    padding: 0 0 18px;
}

.bldg-log__row:last-child { padding-bottom: 0; }

.bldg-log__row:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: #ececec;
}

.bldg-log__dot {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px #ffe8e8;
    font-style: normal;
}

.bldg-log__when strong {
    display: block;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.bldg-log__when time {
    display: block;
    margin-top: 2px;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.bldg-log__sum {
    margin: 8px 0 0;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.bldg-log__was {
    color: #aaa;
    font-weight: 600;
}

.bldg-log__sum em {
    display: inline;
    margin-left: 6px;
    color: var(--brand);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.bldg-sheet__foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.bldg-sheet__danger {
    grid-column: 1 / -1;
}

.bldg-sheet__save,
.bldg-sheet__cancel {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.bldg-sheet__save {
    background: var(--brand);
    color: #fff;
}

.bldg-sheet__cancel {
    background: #f4f4f4;
    color: #111;
}

.bldg-sheet__del {
    min-height: 36px;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.bldg-sheet__ask {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

.bldg-sheet__ask button {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--gray-10);
    color: #111;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.bldg-sheet__ask [data-bldg-del-yes] {
    background: var(--brand);
    color: #fff;
}

@media (max-width: 900px) {
    .bldg-sheet__form { grid-template-columns: 1fr 1fr; }
    .bldg-sheet__note { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 767px) {
    .bldg-sheet.is-log { width: calc(100vw - 16px); }
    .bldg-log { flex-basis: 168px; width: 168px; padding: 14px 12px 16px; }
    .bldg-sheet__form { grid-template-columns: 1fr; padding: 14px 14px 16px; }
    .bldg-sheet__aidat { grid-template-columns: 1fr; }
    .bldg-sheet__foot { flex-wrap: wrap; }
}

@media (max-width: 1180px) {
    .bldg-card__shot { width: 88px; }
    .bldg-btn--kasa span,
    .bldg-btn--pay span,
    .bldg-btn--pay > :last-child { display: none; }
    .bldg-btn--kasa,
    .bldg-btn--pay { width: 36px; height: 36px; padding: 0; gap: 0; }
}

.bldg-flash {
    margin: 0 0 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff1f1;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.bldg-flash.is-ok { background: #111; color: #fff; }
.bldg-flash[hidden] { display: none !important; }

.bldg-need {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 86;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    background: #fff;
    color: #111;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.2);
    transform: translate(-50%, -50%);
}

.bldg-need[hidden] { display: none !important; }

.bldg-need strong {
    font-size: 16px;
    font-weight: 800;
}

.bldg-need[data-bldg-who] strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.bldg-need p {
    margin: 0;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.bldg-need p b { color: #111; }

.bldg-need footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.bldg-need button,
.bldg-need a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.bldg-need button {
    background: #f4f4f4;
    color: #111;
}

.bldg-need a,
.bldg-need .is-yes {
    background: var(--brand);
    color: #fff;
}

.bldg-need.is-close {
    z-index: 90;
    width: min(520px, calc(100vw - 32px));
}

.bldg-need.is-close footer {
    flex-wrap: wrap;
}

.bldg-need.is-close footer button {
    flex: 1 1 190px;
    height: auto;
    min-height: 40px;
    padding: 8px 12px;
    line-height: 1.3;
    text-align: center;
}

.bldg-mask[data-deb-close-mask] {
    z-index: 89;
}

.bldg-out {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 82;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(440px, calc(100vw - 32px));
    max-height: min(86dvh, 680px);
    overflow: auto;
    padding: 22px 22px 18px;
    background: #fff;
    border-radius: 16px;
    transform: translate(-50%, -50%);
    animation: bldg-out-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bldg-out-in {
    from {
        transform: translate(-50%, -50%) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.bldg-out[hidden] { display: none !important; }

.bldg-out__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bldg-out__head p {
    margin: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bldg-out__head strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.bldg-out__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f4f4f4;
}

.bldg-out__x:hover { background: #fff1f1; color: var(--brand); }

.bldg-out__err {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff1f1;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.bldg-out__err[hidden] { display: none !important; }

.bldg-out__label {
    margin: 14px 0 8px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.bldg-out__pick {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f4f4f4;
    text-align: left;
}

.bldg-out__pick:hover { background: #fff1f1; }
.bldg-out__pick.is-on { background: #fff1f1; color: #111; }
.bldg-out__pick span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bldg-out__pick b {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.bldg-out__pick small {
    color: #888;
    font-size: 11px;
    font-weight: 500;
}
.bldg-out__pick.is-on small { color: #888; }

.bldg-out__who {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 16px;
    padding: 8px 8px 8px 10px;
    border-radius: 12px;
    background: #fff1f1;
    color: #111;
    text-align: left;
}

.bldg-out__who span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.bldg-out__who small {
    color: #888;
    font-size: 10px;
    font-weight: 600;
}

.bldg-out__who strong {
    font-size: 13px;
    font-weight: 700;
}

.bldg-out__who em {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.bldg-out__who:hover em { background: #111; color: #fff; }

.bldg-out__sum {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
}

.bldg-out__sum span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.bldg-out__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 12px;
}

.bldg-out__grid label,
.bldg-out__kind,
.bldg-out__when {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bldg-out__kind[hidden] { display: none !important; }

.bldg-out__grid > label:last-child {
    grid-column: 1 / -1;
}

.bldg-out__grid label span,
.bldg-out__kind span,
.bldg-out__when span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.bldg-out__form input,
.bldg-out__form select {
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background-color: #f4f4f4;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
    appearance: none;
}

.bldg-out__form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.4'%3E%3Cpath d='M6.2 9.2 12 15l5.8-5.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.bldg-out__form input:focus,
.bldg-out__form select:focus {
    background-color: #fff1f1;
    border-color: transparent;
    box-shadow: none;
}

.bldg-out__sum input {
    height: 52px;
    padding: 0 14px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.bldg-out__kind { position: relative; }

.bldg-out__kind-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bldg-out__kind-head b {
    padding: 2px 8px;
    border-radius: 99px;
    background: #f4f4f4;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.bldg-out__kind-head b.is-cut {
    background: #fff1f1;
    color: var(--brand);
}

.bldg-out__kind-head b.is-free {
    background: #f4f4f4;
    color: #555;
}

.bldg-out__kind-head b[hidden] { display: none !important; }

.bldg-out__hits {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
}

.bldg-out__hits[hidden] { display: none !important; }

.bldg-out__hits button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    text-align: left;
}

.bldg-out__hits button:hover { background: #f4f4f4; }
.bldg-out__hits strong { font-size: 12px; font-weight: 600; }
.bldg-out__hits em {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 99px;
    background: #f4f4f4;
    color: #888;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}
.bldg-out__hits button.is-cut em {
    background: #fff1f1;
    color: var(--brand);
}

.bldg-out__when div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bldg-out__fixed {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f4f4f4;
    color: #888;
    font-size: 13px;
    font-weight: 700;
}

.bldg-out__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 12px;
    background: #f4f4f4;
}

.bldg-out__split label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.bldg-out__split label.is-on { background: #fff; color: #111; }
.bldg-out__split input { position: absolute; opacity: 0; pointer-events: none; }

.bldg-out__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 4px 2px;
    background: transparent;
    text-align: left;
}

.bldg-out__switch b {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.bldg-out__switch small {
    display: block;
    margin-top: 3px;
    color: #888;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.bldg-out__switch i {
    position: relative;
    width: 40px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 99px;
    background: #e8e8e8;
}

.bldg-out__switch i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
}

.bldg-out__switch[aria-checked="true"] i { background: var(--brand); }
.bldg-out__switch[aria-checked="true"] i::after { left: 19px; }
.bldg-out__switch[hidden] { display: none !important; }
.bldg-out__switch + .bldg-out__switch { margin-top: 12px; }

.bldg-out__firm { margin-top: 10px; }
.bldg-out__firm[hidden],
.bldg-out__firm-empty[hidden],
.bldg-out__who[hidden] { display: none !important; }

.bldg-out__firm-empty {
    margin: 0 0 8px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.bldg-out__firm .bldg-out__who {
    margin: 0;
    background: #fafafa;
}

.bldg-out__firm .bldg-out__who em { color: #111; }

.bldg-out__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.bldg-out__cancel,
.bldg-out__save {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.bldg-out__cancel { background: #f4f4f4; }
.bldg-out__cancel:hover { background: #ececec; }
.bldg-out__save {
    background: #d5d5d5;
    color: #fff;
    cursor: not-allowed;
}
.bldg-out__save.is-ready {
    background: var(--brand);
    cursor: pointer;
}
.bldg-out__save.is-ready:hover { background: #111; color: #fff; }
.bldg-out__save:disabled { pointer-events: none; }

.bldg-spd {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 82;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(460px, calc(100vw - 32px));
    max-height: min(80dvh, 640px);
    overflow: hidden;
    padding: 18px 16px 14px;
    background: #fff;
    border-radius: 16px;
    transform: translate(-50%, -50%);
    animation: bldg-out-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.bldg-spd[hidden] { display: none !important; }

.bldg-spd__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.bldg-spd__head p {
    margin: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bldg-spd__head strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
}

.bldg-spd__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #111;
}

.bldg-spd__x:hover { background: #fafafa; }

.bldg-spd__when {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-shrink: 0;
}

.bldg-spd__when label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bldg-spd__when span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.bldg-spd__when select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.bldg-spd__when select:focus {
    outline: none;
    background: #f4f4f4;
}

.bldg-spd__sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.bldg-spd__sum[hidden] { display: none !important; }

.bldg-spd__sum span {
    color: #111;
    font-size: 14px;
    font-weight: 800;
}

.bldg-spd__sum strong {
    font-size: 16px;
    font-weight: 800;
}

.bldg-spd__list {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

.bldg-spd__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bldg-spd__group h3 {
    margin: 2px 2px 0;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bldg-spd__row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fafafa;
}

.bldg-spd__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #fff;
}

.bldg-spd__mark.is-live { background: var(--brand); }
.bldg-spd__mark.is-own { background: #111; }
.bldg-spd__mark.is-shop { background: #5c5c5c; }

.bldg-spd__text small.is-plain {
    display: block;
    margin-top: 4px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.bldg-spd__text { min-width: 0; }

.bldg-spd__text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.bldg-spd__text small {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.bldg-spd__text em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 8px;
    background: #fff;
    color: #666;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.bldg-spd__row b {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.bldg-spd__row > button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--brand);
}

.bldg-spd__row > button:hover { background: #fff; }

.bldg-spd__ask {
    display: flex;
    gap: 6px;
}

.bldg-spd__ask button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.bldg-spd__ask [data-bldg-spd-no] { background: #fff; color: #111; }
.bldg-spd__ask [data-bldg-spd-yes] { background: #111; color: #fff; }

.bldg-spd__empty {
    margin: 0;
    color: #888;
}

.bldg-spd__empty strong {
    display: block;
    margin: 0 0 4px;
    color: #111;
    font-size: 14px;
}

.bldg-spd__empty span { font-size: 13px; font-weight: 600; }

.bldg-spd__empty[hidden] { display: none !important; }

.bldg-spd__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bldg-spd__prints {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.bldg-spd__prints button,
.bldg-spd__done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.bldg-spd__prints button svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.bldg-spd__prints button {
    border-color: transparent;
    background: var(--brand);
    color: #fff;
}

.bldg-spd__prints button:hover {
    background: var(--brand);
    color: #fff;
    filter: brightness(0.97);
}

.bldg-spd__prints button:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.bldg-spd__done {
    flex-shrink: 0;
    color: #888;
}

.bldg-spd__done:hover { background: #f4f4f4; color: #111; }

@media (max-width: 520px) {
    .bldg-spd { width: calc(100vw - 16px); padding: 16px 14px 12px; }

    .bldg-spd__row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas:
            "mark text money"
            "mark text act";
    }

    .bldg-spd__mark { grid-area: mark; }
    .bldg-spd__text { grid-area: text; }
    .bldg-spd__row b { grid-area: money; }
    .bldg-spd__row > button,
    .bldg-spd__ask { grid-area: act; justify-self: end; }

}

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

@media (max-width: 900px) {
    html:has(body.page-buildings),
    body.page-buildings {
        height: 100dvh;
        overflow: hidden;
    }
    body.page-buildings .app {
        display: flex;
        flex-direction: row;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-buildings .shell {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-buildings .due-search { flex: 1 1 auto; max-width: none; }
    .bldg,
    .bldg.is-map { grid-template-columns: minmax(0, 1fr); }
    .bldg.is-map .bldg-map {
        width: 100%;
        min-width: 0;
    }
    .bldg-map { display: none; }
    .bldg.is-map .bldg-col { display: none; }
    .bldg.is-map .bldg-map { display: flex; }
    .bldg-map__back { display: grid; }
}

@media (max-width: 767px) {
    body.page-buildings .app { flex-direction: column; }
    body.page-buildings .shell { flex: 1; }
    body.page-buildings .due-tools { flex-wrap: nowrap; gap: 4px; }
    body.page-buildings .due-sort { flex: 0 0 auto; min-width: 0; }
    body.page-buildings .due-sort__go {
        width: auto;
        height: 36px;
        min-height: 36px;
        padding: 0 10px;
    }
    body.page-buildings .due-sort__menu {
        left: 0;
        right: auto;
        min-width: 200px;
    }
    body.page-buildings .due-search { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
    body.page-buildings .due-pay { flex: 0 0 auto; margin-left: 0; }
    body.page-buildings .due-pay span { display: none; }
    body.page-buildings .page-context__line { font-size: 13px; }

    .bldg-card { height: 64px; }
    .bldg-card__shot { width: 64px; }
    .bldg-card__who { padding: 8px 10px; }
    .bldg-card__who strong { font-size: 13px; }
    .bldg-card__who span { font-size: 12px; }
    .bldg-card__acts { padding: 0 8px 0 0; gap: 4px; }
    .bldg-card .bldg-btn,
    .bldg-card .bldg-btn--kasa,
    .bldg-card .bldg-btn--docs,
    .bldg-card .bldg-btn--pay {
        width: 26px;
        height: 26px;
        min-width: 26px;
        padding: 0;
        gap: 0;
    }
    .bldg-card .bldg-btn--who {
        width: auto;
        min-width: 42px;
        padding: 0 6px;
        gap: 3px;
    }
    .bldg-card .bldg-btn--who svg {
        width: 12px;
        height: 12px;
    }
    .bldg-btn--pay span,
    .bldg-btn--pay > :last-child { display: none; }
    .bldg-drop { flex-shrink: 0; }
    .bldg-menu { left: 0; right: auto; min-width: 220px; }
    .bldg-mask { background: rgba(17, 17, 17, 0.79); }
}

/* SAKINLER */
body.page-residents {
    height: 100dvh;
    overflow: hidden;
}

body.page-residents .app,
body.page-residents .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-residents .content--residents {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-residents .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
    align-items: center;
    gap: 10px 16px;
    overflow: visible;
    flex-shrink: 0;
}

body.page-residents .page-context { grid-area: ctx; min-width: 0; margin-right: 0; }
body.page-residents .page-head .topbar__actions { grid-area: acts; flex-shrink: 0; }
body.page-residents .page-context__line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-residents .page-head__tools { grid-area: tools; min-width: 0; overflow: visible; }

body.page-residents .page-head__tools .due-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    overflow: visible;
}

body.page-residents .due-tools__lead {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

body.page-residents .due-search {
    flex: 0 1 260px;
    width: auto;
    min-width: 0;
    max-width: 280px;
}

.who-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.who-dot {
    position: relative;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #d8d8d8;
}

.who-dot::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 20;
    padding: 5px 8px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(2px);
}

.who-dot:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.who-dot--all::after {
    left: 0;
    transform: translateY(2px);
}

.who-dot--all:hover::after {
    transform: translateY(0);
}

.who-dot--all {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px #bbb;
}

.who-dot--kiraci { background: var(--brand); }
.who-dot--owner { background: #111; }
.who-dot--other { background: #8a8a8a; }

.who-dot.is-on {
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

.who-dot--kiraci.is-on { box-shadow: 0 0 0 3px rgba(232, 5, 8, 0.22); }
.who-dot--owner.is-on { box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.18); }
.who-dot--other.is-on { box-shadow: 0 0 0 3px rgba(138, 138, 138, 0.28); }

body.page-residents .due-tools__go {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

body.page-residents .due-pay { margin-left: 0; }

.who-rule-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    max-width: 228px;
    padding: 5px 12px;
    border-radius: 10px;
    background: #f4f4f4;
    color: #111;
    text-align: left;
    line-height: 1.2;
}

.who-rule-go span {
    font-size: 12px;
    font-weight: 700;
}

.who-rule-go:hover {
    background: #fff1f1;
    color: var(--brand);
}

body.page-who-detail .page-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "back ctx acts";
    align-items: center;
    gap: 12px 16px;
}

body.page-who-detail .page-back {
    grid-area: back;
    margin: 0;
}

body.page-who-detail .page-context { grid-area: ctx; }
body.page-who-detail .page-head .topbar__actions { grid-area: acts; }

.who-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.who-head .due-sort { position: relative; }

.who-head__year,
.who-head__print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.who-head__print {
    border-color: transparent;
    background: var(--brand);
    color: #fff;
}

.who-head__year:hover,
.who-head__print:hover { filter: brightness(0.97); }

.who {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.who-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    align-content: start;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 2px 2px 8px;
}

[data-who-flats][hidden] { display: none !important; }

.who-desk__flats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.who-desk__flats button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #fafafa;
    color: #111;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.who-desk__flats button.is-full {
    background: #f0f0f0;
}

.who-desk__flats button.is-share {
    background: #fff4f4;
}

.who-desk__flats button:hover,
.who-desk__flats button.is-on {
    background: #111;
    color: #fff;
}

.who-desk__flats button.is-locked,
.who-desk__flats button.is-locked:hover,
.who-desk__flats button:disabled,
.who-desk__flats button:disabled:hover {
    background: #f3f3f3;
    color: #b5b5b5;
    cursor: not-allowed;
    opacity: 1;
}

.who-flat-tip {
    position: fixed;
    z-index: 90;
    padding: 8px 12px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

.who-empty {
    margin: 24px 0 0;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.who-empty[hidden],
.who-flat-tip[hidden],
.who-mask[hidden],
.who-desk[hidden],
.who-desk__move[hidden],
.who-move[hidden],
.who-rule[hidden],
.who-rule__home[hidden],
.who-rule__pane[hidden],
.who-rule__back[hidden],
.who-rule__foot[hidden],
.who-rule__find[hidden],
.who-rule__dues[hidden],
.who-card em[hidden] {
    display: none !important;
}

.who-card {
    display: flex;
    flex-direction: column;
    min-height: 248px;
    padding: 20px 16px 14px;
    background: var(--sidebar);
    border: 1px solid #ececec;
    border-radius: 16px;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.who-card--kiraci:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.who-card--owner:hover {
    background: #111;
    border-color: #111;
}

.who-card--other:hover {
    background: #8a8a8a;
    border-color: #8a8a8a;
}

.who-card:hover strong,
.who-card:hover small,
.who-card:hover .who-card__meta {
    color: #fff;
}

.who-card--other strong,
.who-card--other:hover strong {
    color: #111;
}

.who-card:hover em {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.who-card:hover .who-card__mark {
    background: #fff;
    box-shadow: none;
}

.who-card--kiraci:hover .who-card__mark { color: var(--brand); }
.who-card--owner:hover .who-card__mark { color: #111; }
.who-card--other:hover .who-card__mark { color: #8a8a8a; }

.who-card:hover .who-card__ico { color: #fff; }

.who-card:hover .who-ico {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.who-card--kiraci:hover .who-ico:hover {
    background: #fff;
    color: var(--brand);
}

.who-card--owner:hover .who-ico:hover {
    background: #fff;
    color: #111;
}

.who-card--other:hover .who-ico:hover {
    background: #fff;
    color: #8a8a8a;
}

.who-card__mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    color: #fff;
}

.who-card--kiraci .who-card__mark {
    background: var(--brand);
    box-shadow: 0 0 0 6px rgba(232, 5, 8, 0.08);
}

.who-card--owner .who-card__mark {
    background: #111;
    box-shadow: 0 0 0 6px rgba(17, 17, 17, 0.06);
}

.who-card--other .who-card__mark {
    background: #8a8a8a;
    box-shadow: 0 0 0 6px rgba(138, 138, 138, 0.1);
}

.who-card__who {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.who-card strong,
.who-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.who-card strong {
    max-width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.who-card em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f6f6f6;
    color: #666;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.who-card--kiraci em {
    background: rgba(232, 5, 8, 0.08);
    color: var(--brand);
}

.who-card--owner em {
    background: rgba(17, 17, 17, 0.06);
    color: #111;
}

.who-card--other em {
    background: rgba(138, 138, 138, 0.12);
    color: #666;
}

.who-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.who-card__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: #666;
}

.who-card__meta[hidden] { display: none !important; }

.who-card__ico {
    display: grid;
    place-items: center;
    flex: 0 0 14px;
    color: #c4c4c4;
}

.who-card__ico svg {
    width: 14px;
    height: 14px;
}

.who-card small {
    max-width: calc(100% - 20px);
    font-size: 12px;
    font-weight: 500;
}

.who-card__acts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.who-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f6f6f6;
    color: var(--brand);
}

.who-ico:hover { background: rgba(232, 5, 8, 0.1); }
a.who-ico { color: inherit; text-decoration: none; }

.who-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.who-book {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.who-book[hidden] { display: none !important; }

.who-book__wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.who-book__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.who-book__table th,
.who-book__table td {
    padding: 9px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--gray-20);
}

.who-book__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.who-book__table tbody tr:nth-child(even) td { background: #fafafa; }

.who-book__table tbody td i {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(232, 5, 8, 0.08);
    color: var(--brand);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.who-book__table tbody tr.is-moved td:first-child { font-weight: 700; }

.who-book__table tfoot th,
.who-book__table tfoot td {
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 0;
}

.who-st {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
}

.who-st--paid { background: #f4f4f4; color: #111; }
.who-st--unpaid { background: rgba(232, 5, 8, 0.08); color: var(--brand); }
.who-st--partial { background: #111; color: #fff; }
.who-st--none { background: transparent; color: #aaa; padding: 0; }

button.who-st {
    border: 0;
    cursor: pointer;
    font: inherit;
}

button.who-st:hover { filter: brightness(0.96); }

.who-book__month {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: #111;
    font-weight: 800;
}

.who-book__slot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    box-shadow: none;
    appearance: none;
    cursor: pointer;
}

.who-book__slot:hover .who-book__month,
.who-book__slot:hover .who-book__link { color: var(--brand); }

.who-book__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #111;
    pointer-events: none;
    flex-shrink: 0;
}

.who-book__link .nav-ico {
    width: 16px;
    height: 16px;
}

.who-book__table tbody tr:hover td { background: #f7f7f7; }

.who-paymask {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(17, 17, 17, 0.38);
}

.who-paymask[hidden],
.who-pay[hidden] { display: none !important; }

.who-pay {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 91;
    display: flex;
    flex-direction: column;
    width: min(480px, calc(100vw - 32px));
    background: #fff;
    color: #111;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
    transform: translate(-50%, -50%);
}

.who-pay__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid #ececec;
}

.who-pay__head > div { min-width: 0; margin-right: auto; }

.who-pay__head small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.who-pay__head strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.who-pay__x {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    background: #f4f4f4;
    color: #111;
}

.who-pay__x svg {
    display: block;
}

.who-pay__x:hover { background: #111; color: #fff; }

.who-pay__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.who-pay__body p {
    margin: 0;
    color: #5c5c5c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.who-pay__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #ececec;
    border-radius: 12px;
    font-size: 13px;
}

.who-pay__table th,
.who-pay__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #ececec;
}

.who-pay__table tbody tr:last-child td { border-bottom: 0; }

.who-pay__table thead th {
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 0;
}

.who-pay__table thead th:first-child { border-radius: 11px 0 0 0; }
.who-pay__table thead th:last-child { border-radius: 0 11px 0 0; }

.who-pay__table th:last-child,
.who-pay__table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.who-pay__table tbody tr:nth-child(even) td { background: #fafafa; }

.who-pay__body p.who-pay__sum {
    margin: 14px 2px 0;
    color: #111;
    font-size: 14px;
    font-weight: 700;
}

.who-pay__sum strong { font-weight: 800; }

.who-pay__foot {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 14px;
}

.who-pay__print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.who-pay__print:hover { filter: brightness(0.97); }

@media (max-width: 767px) {
    .who-book__table th,
    .who-book__table td {
        padding: 8px 6px;
        font-size: 11px;
    }
    .who-book__table th:nth-child(n + 3),
    .who-book__table td:nth-child(n + 3) {
        text-align: right;
    }
}

@media print {
    html,
    body,
    body.page-residents,
    html:has(body.page-who-detail) {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }
    body.page-who-detail .sidebar,
    body.page-who-detail .sidebar-backdrop,
    body.page-who-detail .topbar,
    body.page-who-detail .page-head .topbar__actions,
    body.page-who-detail .who-head,
    body.page-who-detail .page-back,
    body.page-who-detail .who-pay,
    body.page-who-detail .who-paymask {
        display: none !important;
    }
    body.page-who-detail .app,
    body.page-who-detail .shell,
    body.page-who-detail .content--residents,
    body.page-who-detail .who-detail,
    body.page-who-detail .who-book,
    body.page-who-detail .who-book__wrap {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    body.page-who-detail .page-head {
        display: block !important;
        padding: 0 0 12px !important;
        border: 0 !important;
    }
    body.page-who-detail .who-book__table th:nth-child(3),
    body.page-who-detail .who-book__table td:nth-child(3) { display: table-cell !important; }
    body.page-who-detail .who-book__table thead th {
        background: #111 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.who-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.38);
}

.who-desk {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 32px));
    max-height: min(86dvh, 640px);
    overflow: hidden;
    background: #fff;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
    transform: translate(-50%, -50%);
}

.who-desk__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f1f1f1;
}

.who-desk__mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
}

.who-desk__mark.is-add {
    background: var(--sidebar);
    color: #111;
}

.who-desk__mark.is-kiraci { background: var(--brand); }
.who-desk__mark.is-owner { background: #111; }
.who-desk__mark.is-other { background: #8a8a8a; }

.who-desk__head > div { min-width: 0; margin-right: auto; }

.who-desk__head small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.who-desk__head strong {
    display: block;
    overflow: hidden;
    font-size: 17px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.who-desk__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #111;
}

.who-desk__x:hover { color: var(--brand); }

.who-desk__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.who-desk__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 18px 8px;
    overflow: auto;
}

.who-desk__wide { grid-column: 1 / -1; }

.who-desk__shop {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #fafafa;
}

.who-desk__shop[hidden] { display: none !important; }

.who-desk__types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.who-desk__types em {
    color: #111;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.who-desk__types button {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: #f4f4f4;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.who-desk__types button:hover,
.who-desk__types button.is-on {
    background: #111;
    color: #fff;
}

.who-desk__shop input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #f4f4f4;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.who-desk__shop input:focus {
    outline: none;
    background: #fff;
}

.who-desk__shop-lead {
    margin: 2px 0 0;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.who-desk__shop-lead[hidden] { display: none !important; }

.who-desk__pay {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.who-desk__pay label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.who-desk__pay span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.who-desk__lands { grid-template-columns: 1fr 1fr; }

.who-desk__pay[hidden] { display: none !important; }

.who-desk__carry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #fafafa;
}

.who-desk__carry[hidden] { display: none !important; }

.who-desk__carry > p {
    margin: 0;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.who-desk__carry-year {
    display: flex;
    align-items: center;
    gap: 8px;
}

.who-desk__carry-year button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff;
    color: #111;
}

.who-desk__carry-year button:hover { background: #f4f4f4; }

.who-desk__carry-year strong {
    min-width: 48px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

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

.who-desk__carry-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
}

.who-desk__carry-grid span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.who-desk__carry-grid input {
    width: 100%;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.who-desk__carry-grid input:focus {
    outline: none;
}

@media (max-width: 720px) {
    .who-desk__carry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

[data-who-hisse][hidden],
[data-who-lives][hidden],
[data-who-unit-box][hidden],
[data-who-seat-hint][hidden],
[data-who-plate-hint][hidden] { display: none !important; }

[data-who-plate-hint] {
    color: #e80508;
    font-size: 12px;
    font-weight: 600;
}

[data-who-seat-hint] {
    color: #e80508;
    font-size: 12px;
    font-weight: 600;
}

[data-who-seat-hint].is-note {
    color: #8a6a00;
}

.who-desk__form label > span:first-child {
    font-variant-ligatures: none;
}

.who-lives {
    position: relative;
    gap: 6px;
    width: 100%;
    min-width: 0;
    cursor: pointer;
}

.who-lives__cap {
    display: block;
    height: 12px;
    line-height: 12px;
    visibility: hidden;
}

.who-lives__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    width: 100%;
}

.who-lives input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.who-lives__tick {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1.5px solid #d4d4d4;
    border-radius: 7px;
    background: #fff;
}

.who-lives__tick::after {
    content: '';
    width: 11px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: rotate(-45deg) translate(0, -1px);
}

.who-lives input:checked + .who-lives__tick {
    border-color: var(--brand);
    background: var(--brand);
}

.who-lives input:checked + .who-lives__tick::after {
    opacity: 1;
}

.who-lives input:focus-visible + .who-lives__tick {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.who-desk__form .who-lives__row > span {
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

[data-who-hisse] small {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.who-desk__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.who-desk__form span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.who-desk__form input,
.who-desk__form select {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: var(--sidebar);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.who-desk__form input:focus,
.who-desk__form select:focus {
    outline: none;
    border-color: #111;
    background: #fff;
}

.who-desk__form .who-lives input {
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.who-desk__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid #f1f1f1;
}

.who-desk__move {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-right: auto;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--sidebar);
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.who-desk__move:hover {
    background: #fff0f0;
    color: var(--brand);
}

.who-desk__go {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.who-desk__cancel {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--sidebar);
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.who-desk__save {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: #d5d5d5;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: not-allowed;
}

.who-desk__save.is-ready {
    background: var(--brand);
    cursor: pointer;
}

.who-move {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 82;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(400px, calc(100vw - 32px));
    padding: 22px 22px 18px;
    background: #fff;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
    transform: translate(-50%, -50%);
}

.who-move__mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    background: var(--brand);
    color: #fff;
    border-radius: 14px;
}

.who-move small {
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.who-move strong {
    display: block;
    margin: 4px 0 8px;
    font-size: 18px;
    font-weight: 800;
}

.who-move p {
    margin: 0 0 18px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.who-move__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.who-move__no,
.who-move__yes {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.who-move__no {
    background: var(--sidebar);
    color: #111;
}

.who-move__yes {
    background: var(--brand);
    color: #fff;
}

.who-rule {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 82;
    display: flex;
    flex-direction: column;
    width: min(840px, calc(100vw - 32px));
    max-height: min(86dvh, 640px);
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    transform: translate(-50%, -50%);
    animation: who-rule-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes who-rule-in {
    from {
        transform: translate(-50%, -50%) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.who-rule__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 16px 12px;
}

.who-rule__head > div {
    min-width: 0;
    margin-right: auto;
}

.who-rule__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f4f4f4;
}

.who-rule__back svg { transform: rotate(90deg); }

.who-rule__back:hover {
    background: #fff1f1;
    color: var(--brand);
}

.who-rule__head p {
    margin: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.who-rule__head strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.who-rule__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f4f4f4;
}

.who-rule__x:hover {
    background: #fff1f1;
    color: var(--brand);
}

.who-rule__desk {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.who-rule__index {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    overflow: auto;
    background: #fafafa;
}

.who-rule__index button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 10px;
    width: 100%;
    height: auto;
    padding: 16px 14px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.who-rule__index button i {
    display: grid;
    place-items: center;
    grid-row: 1 / 3;
    width: 22px;
    color: #888;
}

.who-rule__index button span {
    font-size: 14px;
    font-weight: 800;
}

.who-rule__index button small {
    color: #888;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.who-rule__index button.is-on {
    background: #111;
    color: #fff;
}

.who-rule__index button.is-on i,
.who-rule__index button.is-on small { color: #fff; }

.who-rule__index button:hover {
    background: var(--brand);
    color: #fff;
}

.who-rule__index button:hover i,
.who-rule__index button:hover small { color: #fff; }

.who-rule__board {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: auto;
    padding: 22px 24px 24px;
    background: #fff;
}

.who-rule__lead {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.who-rule__lead > div {
    min-width: 0;
    margin-right: auto;
}

.who-rule__lead h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.who-rule__lead p {
    margin: 0;
    color: var(--gray-70);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.who-rule__pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.who-rule__note {
    margin: 0;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.who-rule__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 10px 12px 14px;
    border-radius: 14px;
    background: #fafafa;
    color: #111;
}

.who-rule__chip[hidden] { display: none !important; }

.who-rule__chip > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.who-rule__chip strong {
    font-size: 15px;
    font-weight: 700;
}

.who-rule__chip small {
    color: #888;
    font-size: 12px;
    font-weight: 500;
}

.who-rule__chip button {
    flex-shrink: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: transparent;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.who-rule__chip button:hover {
    background: #fff;
}

.who-rule__find {
    position: relative;
    display: block;
}

.who-rule__find span {
    position: absolute;
    left: 12px;
    top: 50%;
    color: #888;
    transform: translateY(-50%);
    pointer-events: none;
}

.who-rule__find input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 0;
    border-radius: 10px;
    background: #f4f4f4;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.who-rule__find input:focus { outline: none; background: #fff; }

.who-rule__hits {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 168px;
    overflow: auto;
    padding: 6px;
    border-radius: 12px;
    background: #fafafa;
}

.who-rule__hits[hidden] { display: none !important; }

.who-rule__hits button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    background: transparent;
    text-align: left;
}

.who-rule__hits button strong {
    font-size: 13px;
    font-weight: 700;
}

.who-rule__hits button small {
    color: #888;
    font-size: 11px;
    font-weight: 500;
}

.who-rule__hits button:hover { background: #fff; }

.who-rule__hits button.is-on {
    background: #f4f4f4;
    color: #111;
}

.who-rule__hits button.is-on small { color: #888; }

.who-rule__hits p {
    margin: 0;
    padding: 8px 10px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.who-rule__dues {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.who-rule__dues button {
    display: flex;
    min-height: 118px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    background: #fafafa;
    text-align: left;
}

.who-rule__dues button:hover { background: #f4f4f4; }

.who-rule__dues button.is-on {
    background: var(--brand);
    color: #fff;
}

.who-rule__dues button.is-on small { color: rgba(255, 255, 255, 0.82); }

.who-rule__dues strong {
    font-size: 14px;
    font-weight: 700;
}

.who-rule__dues small {
    color: #888;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.who-rule__picks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.who-rule__picks button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fafafa;
    text-align: left;
}

.who-rule__picks button:hover { background: #f4f4f4; }

.who-rule__picks button.is-on {
    background: var(--brand);
    color: #fff;
}

.who-rule__picks button.is-on strong { color: #fff; }

.who-rule__picks button.is-on small { color: rgba(255, 255, 255, 0.82); }

.who-rule__picks button:disabled {
    opacity: 0.38;
    pointer-events: none;
}

.who-rule__picks strong {
    font-size: 13px;
    font-weight: 700;
}

.who-rule__picks small {
    color: #888;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.who-rule__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.who-rule__lead .who-rule__save {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .who-rule__desk { grid-template-columns: 1fr; }
    .who-rule__index {
        flex-direction: row;
        gap: 6px;
        overflow: hidden;
    }
    .who-rule__index button {
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 10px;
    }
    .who-rule__lead { flex-wrap: wrap; }
    .who-rule__who { grid-template-columns: 1fr; }
    .who-rule__dues button { min-height: 112px; padding: 12px; }
    .who-rule__dues strong { font-size: 13px; }
}

.who-rule__cancel {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: #f4f4f4;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.who-rule__save {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.who-rule__save:disabled {
    background: #ececec;
    color: #999;
}

.who-rule__save.is-done,
.who-rule__save.is-done:disabled {
    background: var(--brand);
    color: #fff;
}

.who-rule__cancel:hover,
.who-rule__save:hover { filter: brightness(0.97); }
.who-rule__save:disabled:hover { filter: none; }

.who-rule__shops {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.who-rule__shop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fafafa;
}

.who-rule__shop > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.who-rule__shop strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.who-rule__shop small {
    color: var(--gray-70);
    font-size: 11px;
    font-weight: 600;
}

.who-rule__shop b {
    justify-self: end;
    padding: 4px 8px;
    border-radius: 8px;
    background: #f4f4f4;
    color: #111;
    font-size: 12px;
    font-weight: 800;
}

.who-rule__shop button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f4f4f4;
    color: #111;
    font-size: 16px;
    line-height: 1;
}

.who-rule__shop button:hover {
    background: #fff1f1;
    color: var(--brand);
}

.who-rule__new {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: #fafafa;
}

.who-rule__who {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.who-rule__who input:first-child { grid-column: 1 / -1; }

.who-rule__new input[data-who-shop-name],
.who-rule__new input[data-who-shop-kind],
.who-rule__who input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #f4f4f4;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.who-rule__new input::placeholder {
    color: var(--gray-50);
    opacity: 1;
}

.who-rule__new input:focus { outline: none; background: #fff; }

.who-rule__types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.who-rule__types span {
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.who-rule__types button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    background: #f4f4f4;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.who-rule__types button:hover {
    background: #111;
    color: #fff;
}

.who-rule__types button.is-on {
    background: #111;
    color: #fff;
}

.who-rule__more {
    display: flex;
    align-items: center;
    gap: 8px;
}

.who-rule__pct,
.who-rule__lands {
    display: grid;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.who-rule__pct {
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.who-rule__lands {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.who-rule__pct[hidden],
.who-rule__lands[hidden] { display: none !important; }

.who-rule__pct input,
.who-rule__lands input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #f4f4f4;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.who-rule__lands label {
    position: relative;
    display: block;
    min-width: 0;
}

.who-rule__lands input { padding-right: 42px; }

.who-rule__pct em,
.who-rule__lands em {
    color: var(--gray-70);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.who-rule__lands em {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.who-rule__more button {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    html:has(body.page-residents),
    body.page-residents {
        height: 100dvh;
        overflow: hidden;
    }
    body.page-residents .app {
        display: flex;
        flex-direction: row;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-residents .shell {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-residents .due-search { flex: 1 1 auto; max-width: none; }
    .who-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 10px; }
    .who-card { min-height: 0; padding: 16px 12px 12px; }
}

@media (max-width: 767px) {
    .who-list {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: max-content;
        align-items: start;
        gap: 8px;
    }
    .who-card {
        min-height: auto;
        height: auto;
        padding: 14px 8px 12px;
        overflow: visible;
    }
    .who-card small {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    .who-card__mark { width: 40px; height: 40px; margin-bottom: 10px; }
    body.page-residents .app { flex-direction: column; }
    body.page-residents .shell { flex: 1; }
    body.page-residents .due-tools {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    body.page-residents .due-tools__lead {
        flex: 1 1 100%;
        width: 100%;
    }
    body.page-residents .due-sort { flex: 0 0 auto; min-width: 36px; }
    body.page-residents .due-sort__go {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
    }
    body.page-residents .due-sort__name,
    body.page-residents .due-sort__chev { display: none; }
    body.page-residents .due-search { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
    body.page-residents .due-tools__go {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        gap: 8px;
    }
    body.page-residents .due-pay {
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
        margin-left: 0;
        padding: 0;
        justify-content: center;
    }
    body.page-residents .due-pay span { display: none; }
    .who-rule-go {
        flex: 1 1 auto;
        max-width: none;
        min-height: 40px;
        padding: 6px 12px;
        gap: 8px;
    }
    .who-rule-go span {
        font-size: 12px;
        line-height: 1.25;
        text-align: left;
    }
    body.page-residents .page-context__line { font-size: 14px; }
    .who-desk__grid { grid-template-columns: 1fr; }
    .who-desk__foot { flex-wrap: wrap; }
    .who-desk__move { width: 100%; margin-right: 0; justify-content: center; }
}


/* BAKIM */
body.page-maintain {
    height: 100dvh;
    overflow: hidden;
}

body.page-maintain .app,
body.page-maintain .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-maintain .content--maintain {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-maintain .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
    align-items: center;
    gap: 10px 16px;
    overflow: visible;
    flex-shrink: 0;
    z-index: 20;
}

body.page-maintain .page-context {
    grid-area: ctx;
    min-width: 0;
    margin-right: 0;
}

body.page-maintain .page-head .topbar__actions {
    grid-area: acts;
    flex-shrink: 0;
}

body.page-maintain .page-context__line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-maintain .page-head__tools {
    grid-area: tools;
    min-width: 0;
}

body.page-maintain .page-head__tools .due-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

body.page-maintain .due-tools__lead {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

body.page-maintain .due-search {
    flex: 0 1 260px;
    width: auto;
    min-width: 0;
    max-width: 280px;
}

body.page-maintain .due-pay {
    margin-left: auto;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

body.page-maintain .due-pay .nav-ico {
    width: 15px;
    height: 15px;
}

.upk {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.upk-board {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 2px 2px 24px;
}

.upk-empty {
    margin: 24px 0 0;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.upk-item {
    display: flex;
    align-items: stretch;
    min-height: 76px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.upk-item:last-child { margin-bottom: 0; }

.upk-item.is-on,
.upk-item:hover {
    border-color: #e8e8e8;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.04);
}

.upk-item.is-gecikti {
    background: var(--brand);
    border-color: var(--brand);
}

.upk-item.is-gecikti.is-on,
.upk-item.is-gecikti:hover {
    background: #c80407;
    border-color: #c80407;
    box-shadow: none;
}

.upk-item__wait {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 0 0 118px;
    width: 118px;
    min-width: 118px;
    padding: 14px 8px 14px 16px;
}

.upk-item__wait strong {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: #111;
    white-space: nowrap;
}

.upk-item__wait em {
    color: var(--gray-50);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.upk-item.is-bugun .upk-item__wait strong { color: var(--brand); }
.upk-item.is-yaklasiyor .upk-item__wait strong { color: #111; }
.upk-item.is-planli .upk-item__wait strong { color: var(--gray-50); }

.upk-item.is-gecikti .upk-item__wait strong,
.upk-item.is-gecikti .upk-line__main strong {
    color: #fff;
}

.upk-item.is-gecikti .upk-item__wait em,
.upk-item.is-gecikti .upk-line__main small {
    color: rgba(255, 255, 255, 0.78);
}

.upk-item.is-gecikti .upk-line { border-top-color: rgba(255, 255, 255, 0.18); }

.upk-item.is-gecikti .upk-item__done {
    background: #111;
    color: #fff;
}

.upk-item.is-gecikti .upk-item__done:hover {
    background: var(--brand);
    color: #fff;
}

.upk-item__stack {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.upk-line {
    display: flex;
    align-items: center;
    min-height: 76px;
    border-top: 1px solid var(--gray-20);
}

.upk-line:first-child { border-top: 0; }

.upk-line__main {
    flex: 1;
    min-width: 0;
    padding: 12px 8px 12px 6px;
    text-align: left;
}

.upk-line__main strong,
.upk-line__main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upk-line__main strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111;
}

.upk-line__main small {
    margin-top: 3px;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 500;
}

.upk-item__done {
    flex-shrink: 0;
    min-height: 36px;
    margin: 0 14px 0 4px;
    padding: 0 14px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.upk-item__done:hover { background: var(--brand); }

.upk-item__done.is-later,
.upk-item__done.is-later:hover,
.upk-item.is-gecikti .upk-item__done.is-later,
.upk-item.is-gecikti .upk-item__done.is-later:hover {
    background: var(--gray-10);
    color: #111;
    cursor: default;
}

.upk-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.5);
}

.upk-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    width: min(520px, calc(100vw - 32px));
    max-height: min(86dvh, 640px);
    overflow: auto;
    background: #fff;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.2);
    transform: translate(-50%, -50%);
}

.upk-sheet__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 0;
}

.upk-sheet__head strong {
    margin-right: auto;
    font-size: 13px;
    font-weight: 700;
}

.upk-sheet__close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #111;
}

.upk-sheet__close:hover { color: var(--brand); }

.upk-sheet__copy {
    margin: 8px 20px 0;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.upk-sheet__form {
    display: grid;
    gap: 12px;
    padding: 16px 20px 20px;
}

.upk-sheet__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upk-sheet__form span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.upk-sheet__form span i { color: var(--brand); font-style: normal; }

.upk-sheet__form input,
.upk-sheet__form select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-weight: 500;
}

.upk-sheet__form input:focus,
.upk-sheet__form select:focus {
    border-color: #f3b4b5;
    background: #fff;
}

.upk-sheet__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.upk-sheet__save,
.upk-sheet__gone,
.upk-sheet__del {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.upk-sheet__save {
    margin-left: auto;
    background: var(--brand);
    color: #fff;
}

.upk-sheet__gone {
    background: #111;
    color: #fff;
}

.upk-sheet__del { color: var(--brand); }

.upk-empty[hidden],
.upk-mask[hidden],
.upk-sheet[hidden],
.upk-sheet__gone[hidden],
.upk-sheet__del[hidden],
.upk-sheet__form label[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    body.page-maintain .due-search {
        flex: 1 1 auto;
        max-width: none;
    }

    .upk-item { min-height: 0; }
    .upk-item__wait {
        flex-basis: 104px;
        width: 104px;
        min-width: 104px;
        padding: 12px 6px 12px 12px;
    }
    .upk-item__wait strong { font-size: 22px; }
    .upk-line { min-height: 64px; }
    .upk-item__done { margin: 0 10px 0 4px; }
}

@media (max-width: 767px) {
    body.page-maintain .app { flex-direction: column; }
    body.page-maintain .shell { flex: 1; }
    body.page-maintain .due-tools { flex-wrap: nowrap; gap: 4px; }
    body.page-maintain .due-sort { flex: 0 0 auto; }
    body.page-maintain .due-pay { margin-left: 0; }
    body.page-maintain .due-pay span { display: none; }
    body.page-maintain .page-context__line { font-size: 13px; }
    body.page-maintain .page-head:has(.page-context) { margin: 0 0 10px; }
    .upk-mask { background: rgba(17, 17, 17, 0.79); }
}

/* BORCLAND */
body.page-debit .content--debit {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.deb {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.deb-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
    background: #f4f4f4;
}

.deb-path {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #111;
    text-align: left;
}

.deb-path:hover,
.deb-path:focus,
.deb-path:focus-visible {
    background: #fff;
    color: #111;
}

.deb-path:hover i,
.deb-path:focus i,
.deb-path:focus-visible i {
    background: #f4f4f4;
    color: #111;
}

.deb-path:hover small,
.deb-path:focus small,
.deb-path:focus-visible small {
    color: var(--gray-60);
}

.deb-path i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    background: #f4f4f4;
    color: #111;
    font-style: normal;
}

.deb-path span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.deb-path strong {
    font-size: 15px;
    font-weight: 700;
}

.deb-path small {
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.deb-path.is-on,
.deb-path.is-on:hover,
.deb-path.is-on:focus,
.deb-path.is-on:focus-visible {
    background: #111;
    color: #fff;
}

.deb-path.is-on i,
.deb-path.is-on:hover i,
.deb-path.is-on:focus i,
.deb-path.is-on:focus-visible i {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.deb-path.is-on small,
.deb-path.is-on:hover small,
.deb-path.is-on:focus small,
.deb-path.is-on:focus-visible small { color: rgba(255, 255, 255, 0.72); }

.deb-desk {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1fr);
    gap: 14px;
    align-items: start;
}

.deb-pick,
.deb-slip {
    min-width: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
}

.deb-pick { padding: 14px; }

.deb-search {
    position: relative;
    display: block;
}

.deb-search span {
    position: absolute;
    left: 12px;
    top: 50%;
    color: var(--gray-50);
    transform: translateY(-50%);
    pointer-events: none;
}

.deb-search input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 38px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-weight: 500;
}

.deb-hits {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    max-height: 260px;
    overflow: auto;
    padding: 6px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background: #fafafa;
}

.deb-hit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    text-align: left;
}

.deb-hit:hover { background: #fff; }

.deb-hit strong { font-size: 13px; font-weight: 700; }

.deb-hit small {
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 500;
}

.deb-hit.is-on { opacity: 0.45; cursor: default; }

.deb-hit.is-off {
    opacity: 0.4;
    cursor: not-allowed;
}

.deb-lock {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.deb-who {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.deb-who__go {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    text-align: left;
}

.deb-who__go strong { font-size: 13px; font-weight: 700; }

.deb-who__go small {
    color: var(--gray-60);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

.deb-who__go.is-on {
    background: #111;
    border-color: #111;
    color: #fff;
}

.deb-who__go.is-on small {
    color: #fff;
}

.deb-who__note {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    animation: deb-who-flash 4s linear infinite;
}

@keyframes deb-who-flash {
    0%, 42% { background-color: var(--brand); }
    50%, 92% { background-color: #111; }
    100% { background-color: var(--brand); }
}

.deb-who__note .nav-ico {
    flex-shrink: 0;
    margin-top: 2px;
    color: #fff;
}

.deb-who__note strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.deb-who__note span span {
    display: block;
    margin-top: 3px;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .deb-who__note { animation: none; }
}

.deb-bag__head {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.deb-bag__head strong {
    margin-right: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.deb-bag__wipe {
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.deb-bag {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.deb-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px dashed #ececec;
}

.deb-item b {
    color: var(--gray-40);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.deb-item strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deb-item small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deb-item button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--gray-50);
    font-size: 18px;
    line-height: 1;
}

.deb-item button:hover { color: var(--brand); background: #fff5f5; }

.deb-tag {
    font-style: normal;
    font-weight: 700;
}

.deb-tag.is-equal { color: #555; }
.deb-tag.is-share { color: var(--brand); }

.deb-bag__empty {
    margin: 12px 0 4px;
    color: var(--gray-50);
    font-size: 13px;
    font-weight: 600;
}

.deb-slip {
    position: sticky;
    top: 8px;
    padding: 16px;
}

.deb-slip__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.deb-slip__head strong {
    margin-right: auto;
    font-size: 15px;
    font-weight: 700;
}

.deb-when {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.deb-slip .due-sort { min-width: 0; }

.deb-slip .due-sort__go {
    width: 100%;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #ececec;
    background: #fafafa;
    font-size: 13px;
}

.deb-slip .due-sort__menu {
    min-width: 100%;
    width: 100%;
    max-height: 240px;
    overflow: auto;
}

.deb-slip__sum {
    margin: 0 0 14px;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.deb-slip label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.deb-when label { margin-bottom: 0; }

.deb-slip label span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.deb-slip input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-weight: 500;
}

.deb-slip__go {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.deb-slip__go:disabled {
    cursor: default;
    opacity: 0.35;
}

body.page-debit .due-sort__menu button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.deb-flash {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.deb-flash.is-bad {
    background: #fff1f1;
    color: var(--brand);
}

.deb-hits[hidden],
.deb-lock[hidden],
.deb-who[hidden],
.deb-bag__empty[hidden],
.deb-bag__wipe[hidden],
.deb-flash[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    body.page-debit .app { flex-direction: column; }
    .deb-desk { grid-template-columns: 1fr; }
    .deb-slip { position: static; }
    .deb-who { grid-template-columns: 1fr; }
    .deb-path { align-items: flex-start; min-height: 0; }
}


/* ARAC */
body.page-plates {
    height: 100dvh;
    overflow: hidden;
}

body.page-plates .app,
body.page-plates .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-plates .content--plates {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-plates .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
    align-items: center;
    gap: 10px 16px;
    overflow: visible;
    flex-shrink: 0;
}

body.page-plates .page-context { grid-area: ctx; min-width: 0; margin-right: 0; }
body.page-plates .page-head .topbar__actions { grid-area: acts; flex-shrink: 0; }
body.page-plates .page-context__line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-plates .page-head__tools { grid-area: tools; min-width: 0; overflow: visible; }

body.page-plates .page-head__tools .due-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

body.page-plates .due-tools__lead {
    display: flex;
    align-items: center;
    min-width: 0;
}

body.page-plates .due-search {
    width: 100%;
    max-width: 360px;
}

.plt {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.plt-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.plt-book {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #ececec;
    border-radius: 16px;
    background: #fff;
}

.plt-book[hidden] { display: none !important; }

.plt-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.plt-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid #f1f1f1;
}

.plt-pager[hidden] { display: none !important; }

.plt-row {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: 18px 28px;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #f1f1f1;
}

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

.plt-who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.plt-av {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.plt-who__meta { min-width: 0; }

.plt-who__meta a {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plt-who__meta a:hover { color: var(--brand); }

.plt-who__meta small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plt-plates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.plt-plate-wrap {
    position: relative;
    display: inline-flex;
}

.plt-plate {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    height: 32px;
    padding: 0 0 0 28px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    background: var(--sidebar);
}

.plt-plate__eu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--brand);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

.plt-plate__no {
    display: flex;
    align-items: center;
    padding: 0 10px 0 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}

.plt-plate__no i {
    font-style: normal;
    margin-right: 0.35em;
}

.plt-plate__no i:last-child { margin-right: 0; }

.plt-plate__x {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #ececec;
    border-radius: 50%;
    background: #fff;
    color: var(--gray-50);
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    box-shadow: 0 2px 6px rgba(17, 17, 17, 0.08);
}

.plt-plate-wrap:hover .plt-plate__x,
.plt-plate__x:focus { opacity: 1; }

.plt-plate__x:hover { color: var(--brand); }

.plt-slot {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px dashed #d4d4d4;
    border-radius: 8px;
    background: var(--sidebar);
    color: var(--gray-50);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.plt-slot:hover {
    border-color: var(--gray-40);
    color: var(--text);
}

.plt-composer {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    height: 32px;
    padding: 0 0 0 28px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    background: var(--sidebar);
}

.plt-composer__eu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--brand);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

.plt-composer input {
    width: 132px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    outline: none;
}

.plt-composer button {
    padding: 0 12px;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.plt-empty {
    margin: auto;
    padding: 48px 16px;
    color: var(--gray-50);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.plt-empty[hidden] { display: none !important; }

.plt-mask {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(17, 17, 17, 0.28);
}

.plt-mask[hidden] { display: none !important; }

.plt-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 61;
    width: min(420px, calc(100vw - 32px));
    padding: 18px 18px 16px;
    border: 1px solid #ececec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.16);
    transform: translate(-50%, -50%);
}

.plt-sheet[hidden] { display: none !important; }

.plt-sheet__head {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.plt-sheet__head strong { font-size: 16px; }

.plt-sheet__close {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--gray-60);
}

.plt-sheet__close:hover { background: var(--gray-10); }

.plt-sheet__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plt-sheet__form label span {
    display: block;
    margin-bottom: 6px;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 700;
}

.plt-sheet__form input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-weight: 600;
}

.plt-sheet__form input:focus {
    outline: none;
    border-color: #111;
    background: #fff;
}

.plt-hits {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow: auto;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.plt-hits[hidden] { display: none !important; }

.plt-hit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
}

.plt-hit + .plt-hit { border-top: 1px solid #f1f1f1; }
.plt-hit:hover { background: #fafafa; }
.plt-hit strong { font-size: 14px; }
.plt-hit small { color: var(--gray-60); font-size: 12px; }

.plt-picked {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff5f5;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.plt-picked[hidden] { display: none !important; }

.plt-sheet__go {
    justify-content: center;
    min-height: 42px;
    width: 100%;
}

.plt-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 70;
    padding: 10px 16px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transform: translateX(-50%);
}

.plt-toast[hidden] { display: none !important; }

@media (max-width: 767px) {
    body.page-plates { height: auto; overflow: auto; }
    body.page-plates .app { flex-direction: column; height: auto; overflow: visible; }
    body.page-plates .shell,
    body.page-plates .content--plates { height: auto; overflow: visible; }
    body.page-plates .due-search { max-width: none; }
    body.page-plates .due-pay { padding: 0 10px; }
    body.page-plates .due-pay span { display: none; }
    .plt {
        max-width: 100%;
        width: 100%;
    }
    .plt-stage,
    .plt-book { max-width: 100%; }
    .plt-book { overflow: visible; }
    .plt-list { overflow: visible; padding-bottom: 72px; }
    .plt-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
        max-width: 100%;
        min-width: 0;
    }
    .plt-plates { max-width: 100%; }
    .plt-plate,
    .plt-composer { height: 30px; padding-left: 26px; }
    .plt-plate__eu,
    .plt-composer__eu {
        width: 26px;
        font-size: 7px;
        padding: 0;
        border-radius: 0;
    }
    .plt-plate__no { font-size: 12px; padding-right: 8px; }
    .plt-slot { width: 30px; height: 30px; }
    .plt-composer input { width: 118px; font-size: 12px; }
}

/* ARSIV */
html:has(body.page-arch),
body.page-arch {
    height: 100dvh;
    overflow: hidden;
}

body.page-arch .app,
body.page-arch .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-arch .content--arch {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-arch .page-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "back ctx acts"
        "tools tools tools";
    align-items: center;
    gap: 10px 16px;
    overflow: visible;
    flex-shrink: 0;
}

body.page-arch .page-back {
    grid-area: back;
    margin: 0;
}

body.page-arch .page-back[hidden] { display: none !important; }

body.page-arch:not(.is-room) .page-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
}

body.page-arch.is-room .page-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "back ctx acts";
}

body.page-arch.is-room .page-head__tools { display: none !important; }

body.page-arch .page-context { grid-area: ctx; min-width: 0; margin-right: 0; }
body.page-arch .page-head .topbar__actions {
    grid-area: acts;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
body.page-arch .page-context__line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-arch .page-head__tools { grid-area: tools; min-width: 0; overflow: visible; }

body.page-arch .page-head__tools .due-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

body.page-arch .topbar__actions .due-pay {
    flex-shrink: 0;
}

body.page-arch .due-search {
    width: 100%;
    max-width: 360px;
}

.ark {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.ark-home,
.ark-room {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.ark-home[hidden],
.ark-room[hidden] { display: none !important; }

.ark-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ark-empty {
    position: absolute;
    inset: 0 0 48px;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--gray-50);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.ark-empty[hidden] { display: none !important; }

.ark-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px 0 0;
}

.ark-pager[hidden] { display: none !important; }

.ark-bin {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    background: var(--sidebar);
}

.ark-bin.is-open {
    border-color: var(--brand);
}

.ark-bin.is-open .ark-bin__n { color: var(--brand); }

.ark-bin:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.ark-bin:hover .ark-bin__who strong,
.ark-bin:hover .ark-bin__who small,
.ark-bin:hover .ark-bin__n {
    color: #fff;
}

.ark-bin__top {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 72px;
    min-height: 72px;
    padding: 0;
    text-align: left;
}

.ark-bin__shot {
    width: 72px;
    height: 72px;
    margin: 0;
    overflow: hidden;
    flex-shrink: 0;
    background: #ececec;
}

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

.ark-bin__who {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 12px 14px;
}

.ark-bin__who strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ark-bin__who small {
    overflow: hidden;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ark-bin__n {
    margin: auto 16px auto auto;
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ark-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.5);
}

.ark-mask[hidden] { display: none !important; }

.ark-pop__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #111;
    flex-shrink: 0;
}

.ark-pop__x:hover { color: var(--brand); }

.ark-room__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0 2px 12px;
}

.ark-room__search {
    width: 100%;
    max-width: 360px;
}

.ark-room .due-sort__menu {
    z-index: 30;
}

.ark-range {
    min-width: 240px;
    gap: 10px;
}

.ark-range__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ark-range__field span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ark-range__field input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.ark-room .due-sort__go.is-on {
    box-shadow: inset 0 0 0 1.5px var(--brand);
}

.ark-none {
    margin: auto;
    padding: 48px 12px;
    color: var(--gray-50);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.ark-up {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(520px, calc(100vw - 32px));
    max-height: min(86dvh, 560px);
    background: #fff;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.2);
    transform: translate(-50%, -50%);
}

.ark-up[hidden] { display: none !important; }

.ark-up__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f1f1;
}

.ark-up__head > div { min-width: 0; margin-right: auto; }

.ark-up__head strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

.ark-up__head small {
    display: block;
    margin-top: 4px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.ark-up__head .ark-pop__x { margin-left: auto; }

.ark-up__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ark-up__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px 16px 4px;
}

.ark-up__main,
.ark-up__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ark-up__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ark-up__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ark-up__form span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.ark-up__form input,
.ark-up__form select,
.ark-up__form textarea {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.ark-up__form textarea {
    min-height: 108px;
    resize: vertical;
    font-weight: 500;
}

.ark-up__form input:focus,
.ark-up__form select:focus,
.ark-up__form textarea:focus {
    outline: none;
    border-color: #111;
}

.ark-up__side { min-height: 0; }

.ark-up__drop {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    border: 1.5px dashed #f0c8c8;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff5f5 0%, #fffafa 100%);
    cursor: pointer;
}

.ark-up__drop.is-on {
    border-color: var(--brand);
    background: #ffecec;
}

.ark-up__drop.has-file { cursor: default; }

.ark-up__pick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.ark-up__drop.has-file .ark-up__pick { display: none; }

.ark-up__idle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex: 0 0 auto;
    padding: 12px 14px;
    text-align: left;
}

.ark-up__idle[hidden] { display: none !important; }

.ark-up__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
}

.ark-up__idle span {
    min-width: 0;
}

.ark-up__idle strong {
    color: #111;
    font-size: 14px;
    font-weight: 800;
}

.ark-up__idle em {
    display: block;
    max-width: none;
    margin-top: 2px;
    color: var(--gray-60);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
}

.ark-up__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 10px 14px;
}

.ark-up__preview[hidden] { display: none !important; }

.ark-up__preview b {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff5f5;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
}

.ark-up__preview strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ark-up__preview small {
    display: block;
    margin-top: 4px;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 600;
}

.ark-up__clear {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
    color: var(--gray-60);
    flex-shrink: 0;
}

.ark-up__clear:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.ark-up__bar {
    margin-top: auto;
    padding: 12px 14px 14px;
    border-top: 1px solid #f0c8c8;
    background: rgba(255, 255, 255, 0.86);
}

.ark-up__bar[hidden] { display: none !important; }

.ark-up__bar span {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.ark-up__bar em { font-style: normal; }

.ark-up__bar i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f3d6d3;
}

.ark-up__bar u {
    display: block;
    height: 100%;
    width: 0;
    background: var(--brand);
    text-decoration: none;
    transition: width 0.16s ease;
}

.ark-up__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 14px;
}

.ark-up__cancel,
.ark-up__go {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.ark-up__cancel {
    background: #f4f4f4;
    color: #111;
}

.ark-up__go {
    background: var(--brand);
    color: #fff;
}

.ark-sheet {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: var(--sidebar);
}

.ark-sheet table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.ark-sheet th,
.ark-sheet td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
}

.ark-sheet thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ebebeb;
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ark-sheet tbody td {
    border-top: 1px solid var(--gray-20);
    background: var(--sidebar);
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

.ark-sheet th:nth-child(3),
.ark-sheet td:nth-child(3),
.ark-sheet th:last-child,
.ark-sheet td:last-child { text-align: right; }

.ark-sheet th:last-child,
.ark-sheet td:last-child { width: 140px; white-space: nowrap; }

.ark-sheet th:nth-child(1),
.ark-sheet td:nth-child(1) { width: 118px; }

.ark-sheet th:nth-child(3),
.ark-sheet td:nth-child(3) { width: 88px; }

.ark-sheet .ark-file__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ark-sheet .ark-file__size {
    color: var(--gray-70);
    font-weight: 600;
    white-space: nowrap;
}

.ark-sheet td.ark-none {
    padding: 48px 12px;
    border-top: 0;
    color: var(--gray-50);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.ark-file__cat {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e8e8e8;
    color: #333;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    white-space: nowrap;
}

.ark-sheet .ark-file__acts { justify-content: flex-end; }

.ark-file__acts {
    display: flex;
    gap: 8px;
}

.ark-file__acts button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: var(--sidebar);
    color: #111;
}

.ark-file__acts button:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.ark-up__err {
    margin: 8px 0 0;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 767px) {
    body.page-arch .app {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-arch .shell {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    body.page-arch .due-search { max-width: none; }
    body.page-arch.is-room .page-head .topbar__actions {
        display: flex;
    }
    body.page-arch.is-room .page-head .topbar-icon,
    body.page-arch.is-room .page-head .user-chip {
        display: none;
    }
    .ark-bin__shot { width: 64px; height: 64px; }
    .ark-bin__top { height: 64px; min-height: 64px; }
    .ark-up { width: calc(100vw - 24px); }
    .ark-up__grid,
    .ark-up__row { grid-template-columns: 1fr; }
    .ark-up__drop { min-height: 0; }
    .ark-sheet { overflow-x: hidden; overflow-y: auto; }
    .ark-sheet table,
    .ark-sheet tbody { display: block; width: 100%; }
    .ark-sheet thead { display: none; }
    .ark-sheet tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding: 12px 14px;
        border-top: 1px solid var(--gray-20);
    }
    .ark-sheet tr::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }
    .ark-sheet tbody td {
        display: block;
        width: auto;
        padding: 0;
        border-top: 0;
        text-align: left;
        white-space: normal;
    }
    .ark-sheet td:nth-child(2) {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ark-sheet td:last-child {
        order: 2;
        flex: 0 0 auto;
        width: auto;
    }
    .ark-sheet td:nth-child(1),
    .ark-sheet td:nth-child(3) {
        order: 4;
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        overflow: hidden;
    }
    .ark-sheet tr:has(td.ark-none) { display: block; }
    .ark-sheet tr:has(td.ark-none)::after { content: none; }
    .ark-sheet td.ark-none {
        display: block;
        width: 100%;
        padding: 32px 12px;
        text-align: center;
    }
    .ark-file__acts { gap: 6px; }
    .ark-file__acts button { width: 32px; height: 32px; }
    .ark-room__search { max-width: none; }
}

html:has(body.page-moved),
body.page-moved {
    height: 100dvh;
    overflow: hidden;
}

body.page-moved .app,
body.page-moved .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-moved .content--moved {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--sidebar);
}

body.page-moved .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
    align-items: center;
    gap: 10px 16px;
    flex-shrink: 0;
}

body.page-moved .page-context { grid-area: ctx; min-width: 0; margin-right: 0; }
body.page-moved .page-head .topbar__actions { grid-area: acts; flex-shrink: 0; }
body.page-moved .page-head__tools { grid-area: tools; min-width: 0; }
body.page-moved .page-head__tools .due-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

body.page-moved .due-search {
    width: 100%;
    max-width: 360px;
}

.mov {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.mov-stack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    align-content: start;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 2px 2px 8px;
}

.mov-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--gray-50);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.mov-empty[hidden] { display: none !important; }

.mov-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 236px;
    padding: 18px 14px 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    text-align: center;
}

.mov-card--kiraci {
    background: #ffe8e8;
    border-color: #f5c4c4;
}

.mov-card--owner {
    background: #ececec;
    border-color: #d4d4d4;
}

.mov-card--other {
    background: #efefef;
    border-color: #d8d8d8;
}

.mov-card:hover strong,
.mov-card:hover em,
.mov-card:hover small,
.mov-card:hover .mov-card__why,
.mov-card:hover .mov-card__meta,
.mov-card:hover .mov-card__debt,
.mov-card:hover .mov-card__debt.is-on,
.mov-card:hover .mov-card__when {
    color: #fff;
}

.mov-card:hover .mov-card__ico { color: #fff; }

.mov-card:hover em {
    background: rgba(255, 255, 255, 0.2);
}

.mov-card:hover .mov-card__foot {
    border-color: rgba(255, 255, 255, 0.28);
}

.mov-card:hover .mov-card__mark {
    background: #fff;
}

.mov-card--kiraci:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.mov-card--kiraci:hover .mov-card__mark { color: var(--brand); }

.mov-card--owner:hover {
    background: #111;
    border-color: #111;
}

.mov-card--owner:hover .mov-card__mark { color: #111; }

.mov-card--other:hover {
    background: #8a8a8a;
    border-color: #8a8a8a;
}

.mov-card--other:hover .mov-card__mark { color: #8a8a8a; }

.mov-card__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.mov-card--kiraci .mov-card__mark {
    background: var(--brand);
    box-shadow: 0 0 0 6px rgba(232, 5, 8, 0.12);
}

.mov-card--owner .mov-card__mark {
    background: #111;
    box-shadow: 0 0 0 6px rgba(17, 17, 17, 0.08);
}

.mov-card--other .mov-card__mark {
    background: #8a8a8a;
    box-shadow: 0 0 0 6px rgba(138, 138, 138, 0.12);
}

.mov-card strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mov-card em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-top: 6px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.mov-card--kiraci em {
    background: rgba(232, 5, 8, 0.14);
    color: var(--brand);
}

.mov-card--owner em {
    background: rgba(17, 17, 17, 0.08);
    color: #111;
}

.mov-card--other em {
    background: rgba(138, 138, 138, 0.18);
    color: #555;
}

.mov-card__why {
    margin-top: 4px;
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

.mov-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
}

.mov-card__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: #666;
}

.mov-card__ico {
    display: grid;
    place-items: center;
    flex: 0 0 14px;
    color: #c4c4c4;
}

.mov-card__meta small {
    max-width: calc(100% - 20px);
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mov-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #ececec;
}

.mov-card__debt {
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mov-card--kiraci .mov-card__debt.is-on { color: var(--brand); }
.mov-card--owner .mov-card__debt.is-on { color: #111; }
.mov-card--other .mov-card__debt.is-on { color: #555; }

.mov-card__when {
    color: #888;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 767px) {
    body.page-moved .app {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.page-moved .shell { flex: 1; min-height: 0; overflow: hidden; }
    body.page-moved .due-search { max-width: none; }
    .mov-stack {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
        gap: 8px;
    }
    .mov-card { min-height: 0; padding: 14px 10px 10px; }
    .mov-card__mark { width: 40px; height: 40px; font-size: 12px; }
}


body.page-smsin .content--smsin,
body.page-payin .content--payin,
body.page-store .content--store,
body.page-hqlock .content--hqlock,
body.page-hqset .content--hqset,
body.page-fee .content--fee,
body.page-hqpay .content--hqpay,
body.page-sites .content--sites {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    background: var(--sidebar);
}

.ngm-flash {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.ngm-flash[hidden] { display: none !important; }

.ngm-flash--ok {
    color: #111;
    background: #fafafa;
    border: 1px solid var(--gray-20);
}

.ngm-flash--error {
    color: var(--brand);
    background: #fff1f1;
    border: 1px solid #f3b4b5;
}

.ngm {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.ngm-side {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: #fafafa;
    color: #111;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
}

.ngm-side__kicker {
    margin: 0 0 10px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.page-payin .ngm-side__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 0 14px;
    border-radius: 14px;
    background: #fff1f1;
    color: var(--brand);
}

.ngm-side h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.ngm-side > p {
    margin: 0 0 24px;
    color: var(--gray-60);
    font-size: 14px;
    line-height: 1.5;
}

.ngm-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 auto;
    padding: 0;
}

.ngm-meta div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-20);
}

.ngm-meta dt {
    color: var(--gray-50);
    font-size: 12px;
    font-weight: 700;
}

.ngm-meta dd {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.ngm-meta dd.is-on { color: var(--green); }
.ngm-meta dd.is-off { color: #888; }

.ngm-jump {
    display: inline-flex;
    align-items: center;
    margin-top: 28px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.ngm-main h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ngm-main > p {
    margin: 0 0 22px;
    color: var(--gray-60);
    font-size: 14px;
    line-height: 1.5;
}

.ngm-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.ngm-field i {
    color: var(--brand);
    font-style: normal;
}

.ngm-field input,
.ngm-field select,
.ngm-field textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-weight: 500;
    color: var(--text);
    outline: none;
}

.ngm-field input:focus,
.ngm-field select:focus,
.ngm-field textarea:focus {
    border-color: #f3b4b5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.ngm-field input[readonly] {
    color: var(--gray-70);
    cursor: text;
}

.ngm-field textarea {
    min-height: 180px;
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.45;
}

.ngm-fetch {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: -4px 0 18px;
    padding: 0 14px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.ngm-acts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-20);
}

.ngm-tick {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

.ngm-tick input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.ngm-tick__box {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1.5px solid #d4d4d4;
    border-radius: 7px;
    background: #fff;
}

.ngm-tick__box::after {
    content: '';
    width: 11px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    opacity: 0;
    transform: rotate(-45deg) translate(0, -1px);
}

.ngm-tick input:checked + .ngm-tick__box {
    border-color: var(--brand);
    background: var(--brand);
}

.ngm-tick input:checked + .ngm-tick__box::after { opacity: 1; }

.ngm-tick span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.ngm-go {
    min-width: 140px;
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.ngm-acts .ngm-fetch {
    margin: 0;
    height: 44px;
}

.ngm-acts .ngm-go {
    margin-left: auto;
}

.ngm-test {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-20);
}

@media (max-width: 900px) {
    .ngm { grid-template-columns: 1fr; }
    .ngm-acts { flex-wrap: wrap; }
}

.hq-hint {
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 600;
}

.hq-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid #ececec;
}

.hq-switch a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    color: #666;
    font-size: 13px;
    font-weight: 700;
}

.hq-switch a:hover { color: #111; background: #fafafa; }

.hq-switch a.is-on {
    color: #111;
    background: #fafafa;
    box-shadow: inset 0 -2px 0 var(--brand);
}

.hq-switch svg { flex-shrink: 0; }

.hq-switch__group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid #ececec;
}

.hq-switch__label {
    padding: 0 6px;
    color: #888;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.hq-switch__group.is-on .hq-switch__label { color: #111; }

.hq-veil {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(17, 17, 17, 0.79);
}

body.is-hqveil .content {
    visibility: hidden;
}

body.is-hqveil .trial-fab {
    visibility: hidden;
    pointer-events: none;
}

.hq-veil__card {
    width: min(400px, 100%);
    padding: 32px 28px 28px;
    background: #fff;
    color: #111;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.22);
}

.hq-veil__kicker {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hq-veil__card h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hq-veil__card > p {
    margin: 0 0 18px;
    color: var(--gray-60);
    font-size: 14px;
    line-height: 1.45;
}

.hq-veil__err {
    margin: 0 0 14px !important;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.hq-veil__card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
    text-align: left;
}

.hq-veil__card label span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.hq-veil__card input {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
}

.hq-veil__card input:focus {
    border-color: #f3b4b5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.hq-veil__card button {
    width: 100%;
    height: 44px;
    margin-top: 8px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .hq-veil {
        position: fixed;
        z-index: 80;
    }
}

.hq-sub {
    margin: 28px 0 8px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hq-lockbox {
    margin: 0 0 8px;
    padding: 16px;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: #fafafa;
}

.hq-lockbox p {
    margin: 8px 0 0 34px;
    color: var(--gray-60);
    font-size: 13px;
    line-height: 1.45;
}

.hq-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 8px;
    align-items: start;
    align-content: start;
}

.hq-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 84px;
    padding: 14px 72px 14px 48px;
    border: 1.5px solid #ececec;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    align-self: start;
}

.hq-mode input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
}

.hq-mode__dot {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #d4d4d4;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
}

.hq-mode__dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0;
}

.hq-mode span {
    font-size: 15px;
    font-weight: 800;
}

.hq-mode small {
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 600;
}

.hq-mode em {
    position: absolute;
    top: 12px;
    right: 14px;
    display: none;
    color: var(--brand);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hq-mode.is-on,
.hq-mode:has(input:checked) {
    border-color: var(--brand);
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgba(232, 5, 8, 0.12);
}

.hq-mode.is-on .hq-mode__dot,
.hq-mode:has(input:checked) .hq-mode__dot {
    border-color: var(--brand);
}

.hq-mode.is-on .hq-mode__dot::after,
.hq-mode:has(input:checked) .hq-mode__dot::after {
    opacity: 1;
}

.hq-mode.is-on em,
.hq-mode:has(input:checked) em {
    display: block;
}

.hq-mode-now {
    margin: -8px 0 18px;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.hq-fixed[hidden],
.hq-ladder[hidden],
.hq-preview[hidden],
.hq-acts-left[hidden],
.ngm-fetch[hidden] {
    display: none !important;
}

.hq-preview {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    margin: 0 0 18px;
}

.hq-preview .ngm-field { margin: 0; }

.hq-preview p {
    margin: 0 0 2px;
    color: var(--gray-60);
    font-size: 14px;
    font-weight: 700;
}

.hq-ladder {
    margin: 0 0 8px;
    padding: 4px 0 4px 16px;
    border-left: 2px solid #ececec;
}

.hq-ladder__head {
    display: grid;
    grid-template-columns: 104px 16px 104px minmax(0, 1fr) 40px;
    gap: 8px;
    margin: 0 0 8px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hq-ladder__range { grid-column: 1 / 4; }
.hq-ladder__rate { grid-column: 4 / 5; }

.hq-ladder__note {
    margin: 4px 0 0;
    color: #888;
    font-size: 12px;
    line-height: 1.45;
}

.hq-rung {
    display: grid;
    grid-template-columns: 104px 16px 104px minmax(0, 1fr) 40px;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
}

.hq-rung input {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.hq-rung input:focus {
    border-color: #f3b4b5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.hq-rung i {
    color: #bbb;
    text-align: center;
    font-style: normal;
    font-weight: 700;
}

.hq-rung__drop {
    display: grid;
    place-items: center;
    width: 40px;
    height: 42px;
    border-radius: 10px;
    color: #888;
}

.hq-rung__drop:hover { color: var(--brand); background: #fff1f1; }

.hq-acts-left {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hq-acts-left .ngm-fetch { margin: 0; }

.hq-ticks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: #fafafa;
}

.hq-mask,
.hq-sheet {
    display: none;
}

.hq-mask:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(17, 17, 17, 0.38);
}

.hq-sheet:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 121;
    width: min(480px, calc(100vw - 32px));
    max-height: min(86dvh, 680px);
    overflow: auto;
    padding: 0 0 18px;
    background: #fff;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 20px;
    box-shadow: 0 22px 54px rgba(17, 17, 17, 0.16);
    transform: translate(-50%, -50%);
}

body.page-fee .hq-sheet:not([hidden]) { width: min(520px, calc(100vw - 32px)); }

.hq-sheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f1f1f1;
}

.hq-sheet__head small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.hq-sheet__head strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hq-sheet__head > div { margin-right: auto; min-width: 0; }

.hq-sheet__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #111;
}

.hq-sheet__x:hover { color: var(--brand); }

.hq-sheet__start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 16px 18px 0;
}

.hq-sheet__start .ngm-field { margin: 0; }
.hq-sheet__start .ngm-go { min-width: 108px; }

.hq-sheet__hint {
    margin: 8px 18px 0;
    color: var(--gray-60);
    font-size: 12px;
    line-height: 1.45;
}

.hq-sheet__form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px 0;
}

.hq-sheet__two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hq-filter {
    display: flex;
    gap: 8px;
    padding: 14px 18px 8px;
}

.hq-chip {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #ececec;
    border-radius: 999px;
    background: #fafafa;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.hq-chip.is-on {
    border-color: #111;
    background: #111;
    color: #fff;
}

.hq-months {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 18px 0;
}

.hq-months__empty {
    margin: 8px 0 0;
    color: var(--gray-60);
    font-size: 13px;
}

.hq-month {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
}

.hq-month.is-open { background: #ffe8e8; }
.hq-month.is-paid { background: #ececec; }

.hq-month div { margin-right: auto; min-width: 0; }

.hq-month strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.hq-month span {
    color: #666;
    font-size: 12px;
    font-weight: 600;
}

.hq-month button {
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.hq-month.is-open button { color: var(--brand); }
.hq-month.is-paid button { color: #111; }

.hq-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.hq-hub {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hq-hub__top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hq-hub__top p {
    margin: 0 auto 0 0;
    max-width: 520px;
    color: var(--gray-60);
    font-size: 13px;
    line-height: 1.45;
}

.hq-hub__top code {
    font-size: 12px;
    font-weight: 700;
    color: #111;
}

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

.hq-kpis article {
    padding: 16px 18px;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: #fafafa;
}

.hq-kpis span {
    display: block;
    margin-bottom: 6px;
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.hq-kpis strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hq-gb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: #fff;
}

.hq-gb strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 800;
}

.hq-gb p {
    margin: 0;
    color: var(--gray-60);
    font-size: 12px;
    line-height: 1.45;
}

.hq-gb label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hq-gb input {
    width: 108px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.hq-gb input:focus {
    border-color: #f3b4b5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.hq-gb label span {
    color: #888;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.hq-gb .ngm-go { min-width: 108px; }

.hq-gb--stack {
    grid-template-columns: 1fr;
    margin-top: 18px;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--gray-20);
    border-radius: 0;
    background: transparent;
}

.hq-gb--stack .ngm-go {
    width: 100%;
    margin-top: 4px;
}

.hq-tools {
    display: flex;
    align-items: end;
    gap: 16px;
}

.hq-tools__search { flex: 1; margin: 0; }

.hq-tools p {
    margin: 0 0 10px;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 700;
}

.hq-notify {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed #d8d8d8;
    border-radius: 14px;
    background: #fafafa;
}

.hq-notify > div { flex: 1; min-width: 0; }

.hq-notify span {
    display: block;
    margin-bottom: 4px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hq-notify input {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.hq-notify .ngm-fetch { margin: 0; height: 40px; }

.ngm-side .hq-notify { margin-top: 12px; }

.hq-lic__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.hq-lic__head > div:first-child { margin-right: auto; min-width: 0; }

.hq-lic__head h2 { margin: 0 0 4px; }

.hq-lic__head p {
    margin: 0;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 700;
}

.hq-lic__head-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hq-lic__head-acts .ngm-fetch { margin: 0; }

.hq-lic__bar {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(0, 1fr) 160px;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.hq-lic__q,
.hq-lic__sort { margin: 0; }

.hq-lic__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 2px;
}

.hq-lic__wrap {
    overflow: auto;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: #fff;
}

.hq-lic {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.hq-lic th {
    position: sticky;
    top: 0;
    padding: 10px 12px;
    background: #fafafa;
    color: #888;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.hq-lic td {
    padding: 12px;
    border-top: 1px solid #f1f1f1;
    vertical-align: middle;
}

.hq-lic td strong,
.hq-lic td b {
    display: block;
    font-size: 14px;
    font-weight: 800;
}

.hq-lic td span {
    display: block;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.hq-lic tr.is-off td strong { color: #888; }

.hq-lic__state {
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff1f1;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}

tr.is-off .hq-lic__state {
    background: #ececec;
    color: #666;
}

.hq-lic__meter {
    width: 88px;
    height: 6px;
    margin: 0 0 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #ececec;
}

.hq-lic__meter i {
    display: block;
    height: 100%;
    background: #111;
}

.hq-lic__key {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #111;
}

.hq-lic__key:hover { color: var(--brand); }

.hq-lic td:last-child {
    white-space: nowrap;
    text-align: right;
}

.hq-lic td:last-child button {
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.hq-lic td:last-child button:hover { background: #fafafa; }

.hq-lic td:last-child .is-danger { color: var(--brand); }

.hq-lic__pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    color: #888;
    font-size: 13px;
    font-weight: 700;
}

.hq-lic__pager button {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.hq-lic__pager button:disabled { opacity: 0.4; }

.hq-lic__pane { display: none; }

@media (max-width: 760px) {
    .hq-lic__wrap { overflow: visible; }
    .hq-lic { min-width: 0; }
    .hq-lic thead { display: none; }
    .hq-lic,
    .hq-lic tbody { display: block; width: 100%; }

    .hq-lic tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        cursor: pointer;
    }

    .hq-lic td {
        display: none;
        width: auto;
        padding: 0;
        border: 0;
    }

    .hq-lic td:first-child { display: block; min-width: 0; }
    .hq-lic td:nth-child(4) { display: block; text-align: right; }
    .hq-lic td:nth-child(4) span { display: none; }
    .hq-lic td:nth-child(4) b { font-size: 13px; }

    .ngm.is-detail .hq-rail,
    .ngm.is-detail .hq-kpis,
    .ngm.is-detail .hq-lic__bar,
    .ngm.is-detail .hq-lic__wrap,
    .ngm.is-detail .hq-empty,
    .ngm.is-detail .hq-lic__pager { display: none; }

    .ngm.is-detail .hq-lic__pane {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--gray-20);
        border-radius: 16px;
        overflow: visible;
    }
}

.hq-lic__pane-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--gray-20);
}

.hq-lic__pane-back {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #111;
    transform: rotate(90deg);
}

.hq-lic__pane-head strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hq-lic__pane-head small {
    display: block;
    margin-top: 3px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.hq-pane__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}

.hq-pane__row > span {
    color: #888;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hq-pane__row b,
.hq-pane__row small { display: block; }
.hq-pane__row small {
    margin-top: 2px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.hq-pane__acts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 16px 16px 20px;
}

.hq-pane__acts .hq-lic__fee {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    min-width: 0;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}

.hq-pane__acts .hq-lic__fee:hover { color: #fff; }

.hq-pane__acts button {
    min-width: 0;
    height: 44px;
    border-radius: 12px;
    background: #f4f4f4;
    font-size: 13px;
    font-weight: 700;
}

.hq-pane__acts .is-danger { color: var(--brand); }

.hq-toast { display: none; }

.hq-toast:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 140;
    max-width: min(440px, calc(100vw - 32px));
    padding: 12px 14px;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(17, 17, 17, 0.12);
    font-size: 13px;
    font-weight: 700;
}

.hq-toast button {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.hq-keybox {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px dashed #d8d8d8;
    border-radius: 14px;
    background: #fafafa;
}

.hq-keybox[hidden] { display: none !important; }

.hq-keybox > span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
}

.hq-keybox > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.hq-keybox input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.hq-keybox .ngm-fetch { margin: 0; height: 40px; }

.hq-keybox__rotate {
    margin-top: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}

.hq-keybox i {
    display: block;
    margin-top: 8px;
    color: var(--gray-60);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.hq-sheet--lic:not([hidden]) { width: min(560px, calc(100vw - 32px)); }

.hq-tick-inline {
    align-self: end;
    margin: 0 0 16px;
    min-height: 48px;
}

.hq-empty {
    margin: 18px 0 0;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 600;
}

body.page-fee .ngm {
    align-items: start;
}

body.page-fee .ngm-side {
    min-height: 420px;
}

body.page-fee .ngm-side .ngm-jump {
    margin-top: auto;
}

body.page-fee .ngm-main {
    min-width: 0;
}

body.page-fee .ngm-side h2,
body.page-hqpay .ngm-side h2,
body.page-sites .ngm-side h2 {
    font-size: 26px;
    word-break: break-word;
}

body.page-sites .ngm {
    align-items: start;
}

body.page-sites .ngm-side {
    min-height: 520px;
}

body.page-sites .ngm-side h2 {
    font-size: 42px;
    letter-spacing: -0.05em;
}

body.page-sites .ngm-main {
    min-width: 0;
}

body.page-sites .ngm-side code {
    font-size: 12px;
    font-weight: 700;
    color: #111;
}

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

@media (max-width: 900px) {
    .hq-hub__top { flex-wrap: wrap; }

    .hq-ladder__head,
    .hq-rung {
        grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 40px;
    }

    .hq-ladder__range { grid-column: 1 / 4; }
    .hq-ladder__rate { grid-column: 1 / 4; }
    .hq-rung input[name="rate[]"] { grid-column: 1 / 3; }
    .hq-rung__drop { grid-column: 4; grid-row: 1; }
}

.deb-cuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -4px 0 14px;
}

.deb-cuts[hidden] { display: none !important; }

.deb-cuts button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    font-size: 12px;
    font-weight: 700;
}

.deb-cuts button:hover {
    border-color: #111;
    background: #fff;
}

.def-flash {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.def-flash[hidden] { display: none !important; }
.def-flash--ok { border-color: #111; }
.def-flash--error { color: var(--brand); border-color: #f3b4b5; background: #fff1f1; }

.def {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 0;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    background: #fff;
}

.def-index {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #fafafa;
}

.def-index button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 10px;
    align-content: center;
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 16px 14px;
    border: 0;
    margin: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}

.def-index button i {
    display: grid;
    place-items: center;
    grid-row: 1 / 3;
    width: 22px;
    color: #888;
}

.def-index button span {
    font-size: 14px;
    font-weight: 800;
}

.def-index button small {
    color: #888;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.def-index button.is-on {
    background: #111;
    color: #fff;
}

.def-index button.is-on i,
.def-index button.is-on small {
    color: #fff;
}

.def--gates {
    min-height: 0;
    align-items: start;
}

.def--gates .def-index {
    align-self: stretch;
}

.def--gates .def-index button {
    flex: 0 0 auto;
    min-height: 72px;
}

.def--gates .gate-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
    margin-bottom: 14px;
}

.def--gates .gate-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.def--gates .gate-row .ngm-field {
    margin-bottom: 0;
}

.def--gates .ngm-field input {
    height: 40px;
}

.def--gates .hq-ticks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin-bottom: 14px;
}

.def--gates .gate-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.def--gates .gate-copy .ngm-field {
    width: 100%;
}

.def--gates .gate-copy .ngm-fetch {
    margin: 8px 0 0;
}

.def-index button:hover {
    background: var(--brand);
    color: #fff;
}

.def-index button:hover i,
.def-index button:hover small {
    color: #fff;
}

.def-board {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 24px 24px;
}

.def-board__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.def-board__head > div { margin-right: auto; min-width: 0; }

.def-board h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.def-board__head p {
    margin: 0;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.def-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.def-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.def-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: #fafafa;
}

.def-row strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.def-row span {
    display: block;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 500;
}

.def-row button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: 700;
}

.def-row button:hover { background: #ececec; }

.def-row .is-drop {
    color: var(--brand);
    background: #fff1f1;
}

.def-row .is-drop:hover { background: #ffe4e4; }

.def-empty {
    margin: 8px 0 0;
    padding: 28px 16px;
    border: 1px dashed var(--gray-20);
    border-radius: 14px;
    background: #fafafa;
    color: var(--gray-60);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.def-empty[hidden] { display: none !important; }

.def-mask { display: none; }

.def-mask:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.38);
}

.def-sheet { display: none; }

.def-sheet:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    width: min(480px, calc(100vw - 32px));
    max-height: min(86dvh, 720px);
    overflow: auto;
    padding: 0 0 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.2);
    transform: translate(-50%, -50%);
}

.def-sheet header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #f1f1f1;
}

.def-sheet header small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.def-sheet header strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.def-sheet header > div { margin-right: auto; }

.def-sheet header button {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fafafa;
}

.def-sheet .ngm-field small {
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 600;
}

.def-sheet form { padding: 8px 18px 0; }

.def-sheet .ngm-fetch,
.def-sheet .ngm-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.def-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.def-hint {
    margin: 0 0 10px;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 600;
}

.def-row--law {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
}

.def-add[hidden] { display: none !important; }

.def-face {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.def-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.def-mug {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0 16px;
}

.def-mug .def-face { width: 64px; height: 64px; font-size: 16px; border-radius: 14px; }

.def-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.def-file input { display: none; }

.def-mug button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.def-pick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}

.def-pick input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-weight: 500;
}

.def-pick input:focus {
    border-color: #f3b4b5;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.def-hits {
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    left: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.def-hits[hidden] { display: none !important; }

.def-hits button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
}

.def-hits button:hover { background: #fafafa; }

.def-hits strong { font-size: 13px; font-weight: 700; }

.def-hits span { color: var(--gray-60); font-size: 12px; font-weight: 500; }

.def-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.def-chip__item,
.def-chip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
}

.def-chip[hidden] { display: none !important; }

.def-chip__item strong,
.def-chip strong { font-size: 13px; font-weight: 700; }

.def-chip span { color: var(--gray-60); font-size: 12px; font-weight: 500; }

.def-chip button,
.def-chip__item span {
    margin-left: auto;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.def-gate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: start;
    margin-bottom: 16px;
}

.def-gate .def-pick { grid-column: 1; margin: 0; }

.def-chip { grid-column: 1; }

.def-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
}

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

.def-bulk button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: 700;
}

.def-bulk button:first-child {
    background: var(--brand);
    color: #fff;
}

.def-roster {
    overflow-x: auto;
    padding: 8px;
    border: 1px solid var(--gray-20);
    border-radius: 14px;
    background: #fafafa;
}

.def-roster[hidden] { display: none !important; }

.def-roster__head,
.def-roster__row {
    display: grid;
    grid-template-columns: 56px minmax(140px, 1.1fr) 90px 64px 88px minmax(220px, auto);
    gap: 8px;
    align-items: center;
    min-width: 720px;
}

.def-roster__head {
    padding: 8px 12px;
    color: var(--gray-50);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.def-roster__row {
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
}

.def-roster__row + .def-roster__row { margin-top: 6px; }

.def-roster__row strong { font-size: 16px; font-weight: 700; }

.def-roster__row b { display: block; font-size: 14px; font-weight: 700; }

.def-roster__row small,
.def-roster__row span { color: var(--gray-60); font-size: 12px; font-weight: 500; }

.def-roster__row code {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
}

.def-roster__go {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.def-roster__go button,
.def-roster__go a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 12px;
    font-weight: 700;
}

.def-roster__go button:hover,
.def-roster__go a:hover { background: #ececec; }

.def-roster__go button:disabled,
.def-roster__go a:not([href]) {
    color: var(--gray-40);
    background: transparent;
    pointer-events: none;
}

@media (max-width: 900px) {
    .def {
        grid-template-columns: 1fr;
        align-content: start;
        min-height: 0;
    }
    .def-index {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        align-content: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
    }
    .def-index button {
        flex: none;
        min-width: 0;
        width: auto;
        height: 100%;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 3px 8px;
        margin: 0;
        padding: 12px;
        border-radius: 0;
        box-shadow: none;
    }
    .def-index button span,
    .def-index button small {
        overflow-wrap: anywhere;
    }
    .def-index button span { line-height: 1.3; }
    .def-index button small { line-height: 1.3; }
    .def--gates .def-index { grid-auto-rows: auto; }
    .def--gates .def-index button { height: auto; }
    .def--gates .gate-row,
    .def--gates .gate-row--2 { grid-template-columns: 1fr; }
    .def-gate { grid-template-columns: 1fr; }
    .def-bulk { grid-column: 1; grid-row: auto; }
    .def-board { padding: 16px; }
    .def-board h2 { font-size: 18px; }
    .def-row { padding: 10px 12px; gap: 6px; }
    .def-row strong { font-size: 13px; }
    .def-row span { font-size: 11px; }
    .def-row button { height: 32px; padding: 0 8px; font-size: 11px; }
}

@media (max-width: 767px) {
    .def-board h2 { font-size: 16px; }
    .def-row strong { font-size: 12px; letter-spacing: 0; }
    .def-row span { font-size: 10px; }
}

body.page-outgo,
body.page-income {
    height: 100dvh;
    overflow: hidden;
}

body.page-outgo .app,
body.page-outgo .shell,
body.page-income .app,
body.page-income .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-outgo .content--outgo,
body.page-income .content--income {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-outgo .page-head,
body.page-income .page-head { flex-shrink: 0; }

.out-flash {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.out-flash[hidden] { display: none !important; }
.out-flash--ok { border-color: #111; }
.out-flash--error { color: var(--brand); border-color: #f3b4b5; background: #fff1f1; }

.out {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #ececec;
    border-radius: 16px;
    background: #fff;
}

.out-yard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 16px 14px;
    background: #fafafa;
    border-right: 1px solid #ececec;
}

.out-yard__bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.out-find {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #888;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.out-find input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.out-find input:focus {
    border-color: #f3b4b5;
    outline: none;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.out-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #ececec;
    font-size: 12px;
    font-weight: 800;
}

.out-add:hover { border-color: #111; }
.out-add:disabled { opacity: 0.45; pointer-events: none; }

.out-add--dark {
    background: #111;
    border-color: #111;
    color: #fff;
}

.out-add--dark:hover { background: var(--brand); border-color: var(--brand); }

.out-firms {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    min-height: 0;
    padding-right: 2px;
}

.out-firm {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px;
    border-radius: 12px;
    text-align: left;
}

.out-firm i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
}

.out-firm div { min-width: 0; }

.out-firm strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
}

.out-firm div span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

.out-firm__go {
    display: flex;
    gap: 2px;
}

.out-firm__go em {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-style: normal;
    opacity: 0.55;
}

.out-firm__go em:hover { opacity: 1; background: #fff; color: #111; }

.out-firm:hover { background: var(--brand); color: #fff; }
.out-firm:hover i { background: rgba(255, 255, 255, 0.16); color: #fff; }
.out-firm:hover div span { color: rgba(255, 255, 255, 0.78); }
.out-firm:hover .out-firm__go em { color: #fff; opacity: 1; }
.out-firm:hover .out-firm__go em:hover { background: #fff; color: #111; }

.out-firm.is-on { background: #111; color: #fff; }
.out-firm.is-on i { background: rgba(255, 255, 255, 0.12); color: #fff; }
.out-firm.is-on div span { color: rgba(255, 255, 255, 0.7); }
.out-firm.is-on .out-firm__go em { color: #fff; }
.out-firm.is-on:hover { background: var(--brand); }
.out-firm.is-on .out-firm__go em:hover { background: #fff; color: #111; }

.out-desk {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #fafafa;
}

.out-desk__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 8px;
}

.out-desk__head p {
    margin: 0 0 4px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.out-desk__head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.out-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    padding: 0 20px 14px;
}

.out-tools[hidden] { display: none !important; }

.out-tools .out-find { flex: 1; min-width: 180px; }

.out-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.out-chips button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fafafa;
    font-size: 11px;
    font-weight: 800;
}

.out-chips button.is-on {
    background: #111;
    border-color: #111;
    color: #fff;
}

.out-chips button[hidden] { display: none !important; }

.out-chips button i {
    display: inline;
    margin-left: 4px;
    color: var(--brand);
    font-style: normal;
    font-weight: 800;
}

.out-chips button.is-on i { color: #fff; }

.out-tickets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
    gap: 12px;
    align-content: start;
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    padding: 0 20px 20px;
}

.out-ticket {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--gray-20);
    border-radius: 16px;
    background: #fff;
    text-align: left;
}

.out-ticket:hover { background: #fafafa; }
.out-ticket.is-on { background: #fff1f1; }

.out-ticket__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.out-ticket strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.out-ticket > span {
    margin-top: -4px;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 600;
}

.out-mark {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 8px;
    background: #f4f4f4;
    color: #111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.out-ticket.is-open .out-mark,
.out-ticket.is-part .out-mark,
.out-ticket.is-over .out-mark,
.out-mark.is-open,
.out-mark.is-over { color: var(--brand); background: #fff1f1; }

.out-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #f0f0f0;
}

.out-track i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #111;
}

.out-ticket.is-open .out-track i,
.out-ticket.is-part .out-track i,
.out-ticket.is-over .out-track i,
.out-track.is-over i { background: var(--brand); }

.out-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f1f1;
}

.out-mini em {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-style: normal;
    color: var(--gray-60);
    font-size: 11px;
    font-weight: 600;
}

.out-mini b {
    color: #111;
    font-size: 15px;
    font-weight: 800;
}

.out-empty {
    margin: 8px 20px 20px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.out-empty[hidden],
.out-tickets[hidden],
.out-slip[hidden] { display: none !important; }

.out-slip {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: auto;
    padding: 16px 20px 24px;
    background: #fff;
}

.out-slip__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    height: 32px;
    margin-bottom: 10px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 800;
}

.out-slip__cover h2 {
    margin: 8px 0 4px;
    font-size: 22px;
    font-weight: 800;
}

.out-slip__cover p {
    margin: 0;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.out-slip__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.out-slip__top span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.out-figs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 12px;
}

.out-figs div {
    padding: 12px;
    border-radius: 14px;
    background: #fafafa;
}

.out-figs small {
    display: block;
    margin-bottom: 4px;
    color: #888;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.out-figs strong {
    font-size: 16px;
    font-weight: 800;
}

.out-slip .out-track { margin-bottom: 14px; }

.out-slip__go {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.out-slip__go button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: #f4f4f4;
    font-size: 12px;
    font-weight: 800;
}

.out-slip__go button:hover { background: #ececec; }

.out-slip__go .out-go {
    background: var(--brand);
    color: #fff;
}

.out-slip__go .out-go:hover { background: #c80407; }

.out-slip__go .out-ink {
    background: #111;
    color: #fff;
}

.out-slip__go .out-ink:hover { background: #333; }

.out-slip__go .out-danger { color: var(--brand); }

.out-log {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px dashed #e4e4e4;
}

.out-log li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #e4e4e4;
}

.out-log li.is-charge strong,
.out-log li.is-charge b { color: #111; }

.out-log li.is-pay strong,
.out-log li.is-pay b { color: var(--brand); }

.out-log strong { display: block; font-size: 13px; font-weight: 800; }
.out-log span { color: #888; font-size: 12px; font-weight: 600; }
.out-log b { font-size: 14px; font-weight: 800; }

.out-log button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #888;
}

.out-log button:hover { background: #fff1f1; color: var(--brand); }

.out-log__empty {
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.out-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.out-hint {
    margin: 0 18px 10px;
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 600;
}

.out-pick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    margin: 0 18px 12px;
    font-size: 13px;
    font-weight: 600;
}

.out-pick i { color: var(--brand); font-style: normal; }

.out-pick input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--gray-20);
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-weight: 500;
}

.out-pick input:focus {
    border-color: #f3b4b5;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(232, 5, 8, 0.08);
}

.out-hits {
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    left: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.out-hits[hidden] { display: none !important; }

.out-hits button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
}

.out-hits button:hover { background: #fafafa; }
.out-hits strong { font-size: 13px; font-weight: 700; }
.out-hits span { color: var(--gray-60); font-size: 12px; font-weight: 500; }

.out-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 18px 12px;
    padding: 8px 12px;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.out-chip[hidden] { display: none !important; }

.out-chip button {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

.out-mask { display: none; }

.out-mask:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.38);
}

.out-ask[hidden] { display: none !important; }

.out-ask:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 82;
    width: min(400px, calc(100vw - 32px));
    padding: 22px 22px 18px;
    background: #fff;
    color: #111;
    border: 1px solid #ececec;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.18);
    transform: translate(-50%, -50%);
}

.out-ask__mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    background: var(--brand);
    color: #fff;
    border-radius: 14px;
}

.out-ask small {
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.out-ask strong {
    display: block;
    margin: 4px 0 8px;
    font-size: 18px;
    font-weight: 800;
}

.out-ask p {
    margin: 0 0 18px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.out-ask__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.out-ask__no,
.out-ask__yes {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.out-ask__no {
    background: var(--sidebar);
    color: #111;
}

.out-ask__yes {
    background: var(--brand);
    color: #fff;
}

.out-sheet { display: none; }

.out-sheet:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    width: min(480px, calc(100vw - 32px));
    max-height: min(86dvh, 720px);
    overflow: auto;
    padding: 0 0 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(17, 17, 17, 0.2);
    transform: translate(-50%, -50%);
}

.out-sheet header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #f1f1f1;
}

.out-sheet header small {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.out-sheet header strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.out-sheet header button {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.out-sheet header button:hover { background: #f4f4f4; }

.out-yard .out-empty { margin: 8px 2px; }

.out-sheet .ngm-field { padding: 8px 18px 0; margin-bottom: 8px; }

.out-sheet .out-two {
    padding: 0 18px;
}

.out-sheet .out-two .ngm-field {
    padding-left: 0;
    padding-right: 0;
}

.out-sheet .ngm-acts { padding: 8px 18px 0; }

.out-sheet .ngm-fetch,
.out-sheet .ngm-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .out { grid-template-columns: minmax(118px, 36%) minmax(0, 1fr); }
    .out-yard {
        padding: 10px 8px;
        max-height: none;
    }
    .out-yard__bar { gap: 8px; margin-bottom: 8px; }
    .out-find input { height: 36px; padding: 0 10px; font-size: 12px; }
    .out-add { height: 32px; padding: 0 8px; font-size: 11px; }
    .out-firm {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        padding: 6px;
    }
    .out-firm i {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 10px;
    }
    .out-firm__go {
        grid-column: 1 / -1;
        display: none;
        justify-content: flex-end;
    }
    .out-firm.is-on .out-firm__go { display: flex; }
    .out-desk__head { padding: 14px 12px 6px; }
    .out-tools { padding: 0 12px 10px; }
    .out-tickets { padding: 0 12px 12px; gap: 8px; }
    .out.is-open { grid-template-columns: minmax(0, 1fr); }
    .out.is-open .out-yard,
    .out.is-open .out-desk__head,
    .out.is-open .out-tools,
    .out.is-open .out-tickets,
    .out.is-open .out-empty { display: none; }
    .out-slip__top span { min-width: 0; flex: 1; }
    .out-desk__head h2 { font-size: 18px; }
    .out-ticket { padding: 12px; }
    .out-ticket strong { font-size: 14px; }
    .out-ticket > span { font-size: 12px; }
    .out-mini b { font-size: 14px; }
    .out-figs { grid-template-columns: 1fr 1fr; }
    .out-figs strong { font-size: 14px; }
    .out-slip__cover h2 { font-size: 18px; }
}

@media (max-width: 767px) {
    .out-two { grid-template-columns: 1fr; }
    .out-desk__head h2 { font-size: 16px; }
    .out-ticket strong { font-size: 12px; }
    .out-firm strong { font-size: 12px; }
    .out-firm span { font-size: 10px; }
}

/* KASA  body.page-till .till- */

body.page-till .content--till {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.till {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 920px;
}

.till-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 8px 4px 4px;
}

.till-hero__sum small {
    display: block;
    margin-bottom: 8px;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.till-hero__sum strong {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
}

.till-hero__sum strong span {
    color: #888;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.till-hero__tools {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.till-find {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 220px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
}

.till-find input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.till-find input:focus {
    outline: none;
    background: #fff1f1;
}

.till-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.till-go:hover { background: var(--brand); color: #fff; }

.till-board {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.till-pack {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.till-pack[hidden] { display: none !important; }

.till-pack__bank {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    background: #fafafa;
}

.till-pack__bank.is-ink { background: #111; }

.till-pack__bank img {
    width: 64px;
    height: 40px;
    object-fit: contain;
}

.till-pack__body { min-width: 0; }

.till-pack__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 8px;
}

.till-pack__head strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.till-pack__head span {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.till-pack__head em {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-size: 15px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.till-pack__head em span {
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.till-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    border-radius: 12px;
    margin: 0 8px 8px;
}

.till-slot:hover { background: #fafafa; }
.till-slot.is-focus { background: #fff1f1; }
.till-slot[hidden] { display: none !important; }

.till-slot strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.till-slot span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.till-slot em {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 1px;
    font-size: 22px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.till-slot em span {
    color: #888;
    font-size: 13px;
    font-weight: 700;
}

.till-empty {
    margin: 0;
    padding: 12px 4px 24px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.till-empty[hidden] { display: none !important; }

.till-void {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 420px;
    padding: 28px 8px;
}

.till-void strong {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.till-void p {
    color: #888;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .till-hero__sum strong { font-size: 32px; }
    .till-hero__tools {
        width: 100%;
    }
    .till-find { flex: 1; width: auto; }
    .till-pack { grid-template-columns: 1fr; }
    .till-pack__bank {
        justify-content: flex-start;
        padding: 14px 20px 0;
        background: #fff;
    }
    .till-pack__bank.is-ink {
        background: #111;
        padding: 14px 20px;
    }
    .till-slot em { font-size: 18px; }
}

@media (max-width: 767px) {
    .till-hero__sum strong { font-size: 28px; }
    .till-hero__sum strong span { font-size: 14px; }
    .till-slot {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px 16px;
    }
    .till-slot em { justify-content: flex-start; }
}

/* PERSONEL  body.page-staff .crew- */

body.page-staff {
    height: 100dvh;
    overflow: hidden;
}

body.page-staff.is-sheet .trial-fab {
    visibility: hidden;
    pointer-events: none;
}

body.page-staff .app,
body.page-staff .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-staff .content--staff {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-staff .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "ctx acts"
        "tools tools";
    align-items: center;
    gap: 10px 16px;
    overflow: visible;
    flex-shrink: 0;
}

body.page-staff .page-context { grid-area: ctx; min-width: 0; margin-right: 0; }
body.page-staff .page-head .topbar__actions { grid-area: acts; flex-shrink: 0; }
body.page-staff .page-head__tools { grid-area: tools; min-width: 0; }

body.page-staff .page-head__tools .due-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

body.page-staff .due-tools__lead {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

body.page-staff .due-search {
    flex: 0 1 280px;
    width: auto;
    max-width: 320px;
}

body.page-staff .due-pay { margin-left: auto; }

.crew-add { gap: 6px; }

.crew-flash {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.crew-flash.is-error { background: var(--brand); }
.crew-flash[hidden] { display: none !important; }

.crew {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.crew-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 2px 0 12px;
}

.crew-list:empty { display: none; }

.crew-empty {
    margin: 18px 4px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.crew-empty[hidden],
.crew-mask[hidden],
.crew-sheet[hidden],
.crew-shot__off[hidden],
.crew-err[hidden],
.crew-sheet__danger[hidden] { display: none !important; }

.crew-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.crew-card:hover { background: #fafafa; }

.crew-card__face {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.crew-card__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crew-card strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
}

.crew-card div > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.crew-card__acts {
    display: flex;
    gap: 4px;
}

.crew-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #111;
}

.crew-ico:hover { background: #111; color: #fff; }

.crew-mask {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(17, 17, 17, 0.5);
}

.crew-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 81;
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 24px));
    max-height: min(90dvh, 760px);
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    transform: translate(-50%, -50%);
}

.crew-sheet__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 0;
}

.crew-sheet__head strong {
    margin-right: auto;
    font-size: 14px;
    font-weight: 800;
}

.crew-sheet__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.crew-sheet__close:hover { background: #fafafa; color: var(--brand); }

.crew-sheet__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 12px;
    overflow: auto;
    padding: 16px 20px 18px;
}

.crew-err {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.crew-shot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.crew-shot__pic {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: 50%;
    background: #fafafa;
    color: #888;
    cursor: pointer;
}

.crew-shot__pic img,
.crew-shot__pic i,
.crew-shot__pic b {
    grid-area: 1 / 1;
}

.crew-shot__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crew-shot__pic b {
    color: #111;
    font-size: 22px;
    font-weight: 800;
}

.crew-shot__pic i[hidden],
.crew-shot__pic img[hidden],
.crew-shot__pic b[hidden] { display: none !important; }

.crew-shot__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.crew-shot__meta strong { font-size: 13px; font-weight: 800; }
.crew-shot__meta small { color: #888; font-size: 11px; font-weight: 600; }
.crew-shot__meta em {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-style: normal;
}

.crew-shot__go,
.crew-shot__off {
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.crew-shot__go { background: #111; color: #fff; }
.crew-shot__go:hover { background: var(--brand); }
.crew-shot__off { background: #fafafa; color: #111; }
.crew-shot__off:hover { background: #111; color: #fff; }

.crew-sheet__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crew-sheet__form label > span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.crew-sheet__form label > small {
    color: #aaa;
    font-size: 11px;
    font-weight: 600;
}

.crew-sheet__form input,
.crew-sheet__form select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-size: 13px;
    color: #111;
}

.crew-sheet__form input:focus,
.crew-sheet__form input:focus-visible,
.crew-sheet__form select:focus {
    outline: none;
    background: #fafafa;
}

.crew-name { grid-column: 1 / -1; }

.crew-sex {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.crew-sex > span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.crew-sex div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
}

.crew-sheet__form .crew-sex label {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    overflow: hidden;
    border-radius: 10px;
    background: #fafafa;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.crew-sheet__form .crew-sex label:hover { background: #f4f4f4; }
.crew-sheet__form .crew-sex label.is-on,
.crew-sheet__form .crew-sex label.is-on:hover { background: #111; color: #fff; }
.crew-sheet__form .crew-sex input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    appearance: none;
    pointer-events: none;
}

.crew-roles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.crew-roles > span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.crew-roles__hint {
    margin: 0;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.crew-roles__hint[hidden] { display: none !important; }

.crew-roles div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.crew-sheet__form .crew-roles label {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.crew-sheet__form .crew-roles label:hover {
    border-color: #ccc;
    background: #fafafa;
}

.crew-sheet__form .crew-roles label.is-on,
.crew-sheet__form .crew-roles label.is-on:hover {
    border-color: #111;
    background: #111;
    color: #fff;
}

.crew-sheet__form .crew-roles input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    appearance: none;
    pointer-events: none;
}

.crew-sheet__foot {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.crew-sheet__cancel,
.crew-sheet__save,
.crew-sheet__del {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.crew-sheet__cancel { background: #fafafa; }
.crew-sheet__cancel:hover { background: #ececec; }
.crew-sheet__save { background: var(--brand); color: #fff; }
.crew-sheet__save:hover { background: #111; color: #fff; }

.crew-sheet__danger { grid-column: 1 / -1; }

.crew-sheet__del {
    width: 100%;
    background: #fafafa;
    color: var(--brand);
}

.crew-sheet__del:hover { background: #111; color: #fff; }

@media (max-width: 767px) {
    body.page-staff .due-tools {
        flex-wrap: wrap;
    }
    body.page-staff .due-search { flex: 1 1 100%; max-width: none; }
    body.page-staff .due-pay { width: 100%; justify-content: center; margin-left: 0; }
    .crew-sheet__form { grid-template-columns: 1fr; }
    .crew-card strong { font-size: 13px; }
    .crew-card div > span { font-size: 11px; }
}

/* YILLIK İZİN  body.page-leave .leave- */

body.page-leave .page-head__tools {
    padding: 0;
}

.leave-tools {
    display: flex;
    justify-content: flex-end;
}

.leave-done {
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.leave-done:hover,
.leave-done.is-on {
    background: #111;
    color: #fff;
}

.leave-flash {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.leave-flash.is-error { background: var(--brand); }
.leave-flash[hidden],
.leave-board[hidden],
.leave-empty[hidden] { display: none !important; }

.leave {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.leave-empty {
    margin: 8px 2px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.leave-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
    padding-bottom: 28px;
}

.leave-cols,
.leave-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.15fr) 196px;
    gap: 0 28px;
    align-items: start;
    width: 100%;
}

.leave-cols {
    padding: 0 4px 4px;
}

.leave-cols span {
    color: #9a9a9a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.leave-cols span:last-child { text-align: right; }

.leave-item {
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
}

.leave-cal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 112px;
    padding: 16px 14px;
    border-radius: 16px;
    background: #fff;
}

.leave-item.is-wait .leave-cal {
    background: #111;
    color: #fff;
}

.leave-item.is-done .leave-cal { color: #888; }

.leave-cal__d {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.leave-cal__d b {
    width: 1.35em;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.leave-cal__d span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
}

.leave-who {
    min-width: 0;
}

.leave-who strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.leave-who__unit {
    margin: 6px 0 0;
    color: #888;
    font-size: 13px;
    font-weight: 700;
}

.leave-who__days {
    margin: 10px 0 0;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.leave-addr {
    margin: 0;
    min-width: 0;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.leave-act {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.leave-ok,
.leave-no {
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.leave-ok { background: var(--brand); color: #fff; }
.leave-ok:hover { background: #111; color: #fff; }
.leave-no { background: #fafafa; color: #111; }
.leave-no:hover { background: #111; color: #fff; }

.leave-mark {
    margin: 0;
    padding-top: 4px;
    color: #111;
    font-size: 13px;
    font-weight: 800;
}

.leave-item.is-no .leave-mark { color: var(--brand); }

.leave.is-archive .leave-item.is-done .leave-cal {
    background: #111;
    color: #fff;
}

.leave.is-archive .leave-item.is-done .leave-who strong,
.leave.is-archive .leave-item.is-done .leave-addr {
    color: #111;
}

.leave.is-archive .leave-item.is-done .leave-who__days {
    color: var(--brand);
}

.leave.is-archive .leave-mark {
    padding: 8px 12px;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
}

@media (max-width: 900px) {
    .leave-cols,
    .leave-item {
        grid-template-columns: 112px minmax(0, 1fr) 196px;
        grid-template-areas:
            "cal who act"
            "cal addr act";
    }
    .leave-cols span:nth-child(3) { display: none; }
    .leave-cal { grid-area: cal; }
    .leave-who { grid-area: who; }
    .leave-addr { grid-area: addr; padding-top: 0; }
    .leave-act { grid-area: act; }
}

@media (max-width: 639px) {
    .leave-cols { display: none; }
    .leave-item {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-areas:
            "cal who"
            "cal addr"
            "act act";
        gap: 8px 16px;
    }
    .leave-cal {
        min-height: 96px;
        padding: 12px 10px;
    }
    .leave-cal__d b { font-size: 26px; }
    .leave-item { align-items: start; }
    .leave-act { justify-content: flex-start; }
}


/* PROFİLLER  body.page-grant .grant- */

body.page-grant .due-tools { justify-content: flex-end; }

.grant-list[hidden],
.grant-edit[hidden],
.grant-edit__drop[hidden],
.due-pay[hidden] { display: none !important; }

.grant {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.grant-list,
.grant-edit {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 2px 0 20px;
}

.grant-list {
    gap: 10px;
}

.grant-list:empty { display: none; }

.grant-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.grant-card:hover { background: #fafafa; }

.grant-card__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f4f4;
    color: #111;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.grant-card strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
}

.grant-card__acts {
    display: flex;
    gap: 6px;
}

.grant-card__acts [data-grant-edit] {
    background: #111;
    color: #fff;
}

.grant-card__acts [data-grant-edit]:hover {
    background: #000;
    color: #fff;
}

.grant-card__acts [data-grant-kill] {
    background: var(--brand);
    color: #fff;
}

.grant-card__acts [data-grant-kill]:hover {
    background: #c00407;
    color: #fff;
}

.grant-edit { gap: 14px; }

.grant-win {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.grant-win__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 12px 0 16px;
    background: #fafafa;
    flex-shrink: 0;
}

.grant-win__dots {
    display: flex;
    gap: 6px;
}

.grant-win__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e8e8e8;
}

.grant-win__dots i:nth-child(1) { background: #ff5f57; }
.grant-win__dots i:nth-child(2) { background: #febc2e; }
.grant-win__dots i:nth-child(3) { background: #28c840; }

.grant-win__url {
    min-width: 0;
    height: 32px;
    margin-right: auto;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    line-height: 32px;
}

.grant-win__url em {
    color: var(--brand);
    font-style: normal;
}

.grant-name {
    width: 220px;
    max-width: 32vw;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.grant-name:focus,
.grant-name:focus-visible {
    outline: none;
    background: #fff;
}

.grant-name::placeholder { color: #b3b3b3; font-weight: 600; }

.grant-win__body {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.grant-nav {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    padding: 20px 16px 16px;
    background: #f4f4f4;
    flex-shrink: 0;
}

.grant-nav__brand { margin-bottom: 20px; }

.grant-nav__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.grant-win .nav-fly:hover > .nav-fly__panel,
.grant-win .nav-fly:focus-within > .nav-fly__panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.grant-win .nav-fly.is-open > .nav-fly__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.grant-win .nav-link.is-on,
.grant-win .nav-fly.is-on > .nav-link,
.grant-win .nav-link.is-on:hover,
.grant-win .nav-fly.is-on > .nav-link:hover {
    background: var(--brand);
    color: #fff;
}

.grant-win .nav-fly.is-part > .nav-link,
.grant-win .nav-fly.is-part > .nav-link:hover {
    background: #111;
    color: #fff;
}

.grant-win .nav-link.is-on .nav-ico,
.grant-win .nav-fly.is-on > .nav-link .nav-ico,
.grant-win .nav-fly.is-part > .nav-link .nav-ico { color: #fff; }

html.nav-slim .grant-nav .nav-link__text,
html.nav-slim .grant-nav .nav-fly__caret { display: block; }

html.nav-slim .grant-nav .grant-nav__list > .nav-link,
html.nav-slim .grant-nav .grant-nav__list > .nav-fly > .nav-link {
    width: 100%;
    height: auto;
    min-height: 48px;
    margin: 0;
    padding: 0 12px 0 48px;
    justify-content: flex-start;
}

html.nav-slim .grant-nav .grant-nav__list > .nav-link > .nav-link__icon,
html.nav-slim .grant-nav .grant-nav__list > .nav-fly > .nav-link > .nav-link__icon {
    position: absolute;
}

html.nav-slim .grant-nav .brand-logo__word { display: inline; }

.grant-stage {
    flex: 1;
    min-width: 0;
    background: #fff;
}

.grant-win__bar .grant-sheet__cancel,
.grant-win__bar .grant-sheet__save {
    height: 32px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 12px;
}

.grant-sheet__cancel,
.grant-sheet__save,
.grant-sheet__del {
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.grant-sheet__cancel { background: #fff; color: #111; }
.grant-sheet__cancel:hover { background: #111; color: #fff; }
.grant-sheet__save { background: var(--brand); color: #fff; }
.grant-sheet__save:hover { background: #111; color: #fff; }
.grant-sheet__del {
    width: auto;
    background: #fff;
    color: var(--brand);
}
.grant-sheet__del:hover { background: #111; color: #fff; }

@media (max-width: 767px) {
    .grant-card strong { font-size: 14px; }
    .grant-win__bar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 10px 12px; }
    .grant-win__url { display: none; }
    .grant-name { max-width: none; flex: 1 1 120px; }
    .grant-win__body { flex-direction: column; }
    .grant-nav {
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow: auto;
    }
    .grant-stage { display: none; }
    .grant-win .nav-fly__back {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        margin-bottom: 4px;
        border-radius: 12px;
        background: #fff;
        color: #111;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
    }
    .grant-win .nav-fly__back:hover { background: #111; color: #fff; }
    .grant-nav.is-drill .grant-nav__list > .nav-link,
    .grant-nav.is-drill .grant-nav__list > .nav-fly:not(.is-open) { display: none; }
    .grant-win .grant-nav__list > .nav-fly.is-open > .nav-link { display: none; }
    .grant-win .grant-nav__list > .nav-fly.is-open > .nav-fly__panel {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .grant-win .grant-nav__list > .nav-fly.is-open > .nav-fly__panel::before,
    .grant-win .grant-nav__list > .nav-fly.is-open > .nav-fly__panel::after { display: none; }
    .grant-win .nav-fly__panel:has(> .nav-fly--nested.is-open) > :not(.nav-fly--nested.is-open) {
        display: none;
    }
    .grant-win .nav-fly--nested.is-open { display: contents; }
    .grant-win .nav-fly--nested.is-open > .nav-link { display: none; }
    .grant-win .nav-fly--nested > .nav-fly__panel {
        display: none;
        position: static;
        inset: auto;
        width: 100%;
        max-height: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }
    .grant-win .nav-fly--nested.is-open > .nav-fly__panel {
        display: flex;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .grant-win .nav-fly--nested > .nav-fly__panel::before,
    .grant-win .nav-fly--nested > .nav-fly__panel::after { display: none; }
}

body.page-reports {
    height: 100dvh;
    overflow: hidden;
}

body.page-reports .app,
body.page-reports .shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-reports .content--reports {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.page-reports .page-head { flex-shrink: 0; }

.rep {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    flex: 1;
}

.rep-main {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.rep-index {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    overflow: auto;
    border-radius: 16px;
    background: #fafafa;
}

.rep-index button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 10px;
    width: 100%;
    padding: 16px 14px;
    border-radius: 16px;
    background: #fff;
    text-align: left;
}

.rep-index button i {
    display: grid;
    place-items: center;
    grid-row: 1 / 3;
    width: 22px;
    color: #888;
}

.rep-index button span {
    font-size: 14px;
    font-weight: 800;
}

.rep-index button small {
    color: #888;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.rep-index button.is-on {
    background: #111;
    color: #fff;
}

.rep-index button.is-on i,
.rep-index button.is-on small { color: #fff; }

.rep-index button:hover {
    background: var(--brand);
    color: #fff;
}

.rep-index button:hover i,
.rep-index button:hover small { color: #fff; }

.rep-board {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
    overflow: auto;
    border-radius: 16px;
    background: #fff;
    letter-spacing: 0;
}

.rep-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.rep-out {
    display: inline-flex;
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #fafafa;
}

.rep-out button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px 0 10px;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.rep-out button i {
    display: grid;
    place-items: center;
    width: 16px;
}

.rep-out button:hover { background: var(--brand); color: #fff; }

.rep-out button:disabled {
    opacity: 0.35;
    cursor: default;
    background: #fff;
    color: inherit;
}

.rep-out button:disabled:hover { background: #fff; color: inherit; }

.rep-subs {
    display: inline-flex;
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #fafafa;
}

.rep-subs button {
    display: inline-flex;
    width: auto;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 10px;
    border-radius: 10px;
    background: transparent;
    letter-spacing: 0;
    word-spacing: 0.06em;
}

.rep-subs button i {
    display: grid;
    place-items: center;
    width: 16px;
    color: inherit;
}

.rep-subs button em { display: none; }

.rep-subs button strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    word-spacing: 0.06em;
}

.rep-subs button:hover { background: var(--brand); color: #fff; }

.rep-subs button.is-on {
    background: #111;
    color: #fff;
}

.rep-pane {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 10px;
}

.rep-pane[hidden],
.rep-find[hidden],
.rep-hits[hidden],
.rep-who[hidden],
.rep-when__row[hidden],
.rep-sum[hidden],
.rep-sheet[hidden],
.rep-people[hidden],
.rep-grid[hidden],
.rep-empty[hidden],
.rep-pager[hidden],
.rep-board[hidden] { display: none !important; }

.rep-tools {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: end;
    gap: 12px 16px;
}

.rep-tools:not(:has(.rep-when)) { grid-template-columns: minmax(0, 1fr); }

.rep-tools:has([data-rep-place]) {
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 260px);
    align-items: end;
}

.rep-tools--frm {
    grid-template-columns: minmax(200px, 1.2fr) minmax(128px, 160px) minmax(180px, 1fr) auto;
    align-items: start;
}


.rep-kicker,
.rep-field > span {
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    word-spacing: 0.08em;
    text-transform: uppercase;
}

.rep-bar {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.rep-find {
    position: relative;
    display: block;
}

.rep-find span {
    position: absolute;
    left: 12px;
    top: 50%;
    color: #888;
    transform: translateY(-50%);
    pointer-events: none;
}

.rep-find input,
.rep-field select,
.rep-field input[type="search"],
.rep-field input[type="date"] {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #fafafa;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    word-spacing: 0.06em;
}

.rep-find input { padding-left: 38px; }

.rep-find input:focus,
.rep-field select:focus,
.rep-field input[type="search"]:focus,
.rep-field input[type="date"]:focus {
    outline: none;
    background: #f4f4f4;
}

.rep-hits {
    position: absolute;
    z-index: 3;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow: auto;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
}

.rep-hits p {
    margin: 0;
    padding: 10px 12px;
    color: #888;
    font-size: 13px;
    font-weight: 600;
}

.rep-pane[data-rep-pane="borc"],
.rep-pane[data-rep-pane="yas"],
.rep-pane[data-rep-pane="msk"],
.rep-pane[data-rep-pane="def"],
.rep-pane[data-rep-pane="frm"] { overflow: hidden; }

.rep-lead {
    margin: 0;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.rep-people {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.rep-pager {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

.rep-pager__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.rep-who {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fafafa;
    text-align: left;
}

.rep-who:hover { background: #f4f4f4; }

.rep-who__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #fff;
}

.rep-who__mark--kiraci { background: var(--brand); }
.rep-who__mark--owner { background: #111; }
.rep-who__mark--other { background: #8a8a8a; }

.rep-who__text { min-width: 0; }

.rep-who__text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.rep-who__text small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rep-who__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.rep-who__meta b {
    font-size: 13px;
    font-weight: 700;
}

.rep-who__meta em {
    color: #888;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.rep-who > button {
    flex-shrink: 0;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.rep-who > button:hover { background: #fff; }

.rep-when {
    display: grid;
    grid-template-columns: repeat(3, minmax(112px, 148px));
    gap: 8px;
}

.rep-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.rep-when__row { display: contents; }

.rep-sum {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.rep-sum div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fafafa;
}

.rep-sum small {
    color: #888;
    font-size: 11px;
    font-weight: 600;
}

.rep-sum strong {
    font-size: 16px;
    font-weight: 800;
}

.rep-sum em {
    color: #888;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.rep-sum--age { grid-template-columns: repeat(6, minmax(0, 1fr)); }

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

.rep-sum--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.rep-age {
    display: grid;
    grid-template-columns: 36px minmax(160px, 1.1fr) minmax(0, 1.6fr) auto;
    grid-template-areas: "mark text bins total";
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fafafa;
}

.rep-age:hover { background: #f4f4f4; }

.rep-age .rep-who__mark { grid-area: mark; }

.rep-age .rep-who__text { grid-area: text; min-width: 0; }

.rep-age__bins {
    display: grid;
    grid-area: bins;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.rep-age__total { grid-area: total; }

.rep-age__bin,
.rep-age__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.rep-age__bin small,
.rep-age__total small {
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rep-age__bin strong,
.rep-age__total strong {
    font-size: 13px;
    font-weight: 800;
}

.rep-age__bin[data-empty] strong { color: #bbb; font-weight: 600; }

.rep-age__total strong { font-size: 14px; }

.rep-grid {
    min-height: 0;
    flex: 1;
    overflow: auto;
    border-radius: 14px;
    background: #fff;
}

.rep-grid table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.rep-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 16%;
    padding: 10px 10px 12px;
    background: #fafafa;
    text-align: left;
    vertical-align: bottom;
}

.rep-grid thead th:nth-child(1) { width: 12%; }
.rep-grid thead th:nth-child(3),
.rep-grid thead th:nth-child(6) { width: 14%; }
.rep-grid thead th:nth-child(4),
.rep-grid thead th:nth-child(5) { width: 18%; }

.rep-grid--frm table { min-width: 1080px; }

.rep-grid--frm thead th { width: auto; }

.rep-grid--frm thead th:nth-child(1) { width: 10%; }
.rep-grid--frm thead th:nth-child(2) { width: 16%; }
.rep-grid--frm thead th:nth-child(3),
.rep-grid--frm thead th:nth-child(4) { width: 12%; }
.rep-grid--frm thead th:nth-child(5) { width: 22%; }
.rep-grid--frm thead th:nth-child(6),
.rep-grid--frm thead th:nth-child(7),
.rep-grid--frm thead th:nth-child(8) { width: 9%; }

.rep-grid--frm .is-num { text-align: right; white-space: nowrap; }

.rep-grid thead th span {
    display: block;
    margin: 0 0 6px;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rep-grid thead input,
.rep-grid thead select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.rep-grid thead input:focus,
.rep-grid thead select:focus {
    outline: none;
    background: #f4f4f4;
}

.rep-grid td {
    padding: 11px 12px;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.rep-grid tbody tr:nth-child(even) td { background: #fafafa; }

.rep-grid tbody tr:hover td { background: #f4f4f4; }

.rep-grid td strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.rep-grid td em {
    display: block;
    color: #888;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.rep-grid td em:empty { display: none; }

.rep-book {
    display: grid;
    min-height: 0;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    overflow: auto;
}

.rep-book[hidden] { display: none !important; }

.rep-book__side {
    min-width: 0;
    overflow: auto;
    border-radius: 14px;
    background: #fafafa;
}

.rep-book__side h3 {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px 14px 0 0;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

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

.rep-book th,
.rep-book td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    font-size: 12px;
    font-weight: 600;
}

.rep-book thead th {
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rep-book td:nth-child(4) {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.rep-book .is-num,
.rep-book th:last-child,
.rep-book td:last-child,
.rep-book tfoot td:last-child { text-align: right; white-space: nowrap; }

.rep-book tbody tr:nth-child(even) td { background: #fff; }

.rep-book tfoot td {
    background: #fff;
    font-weight: 800;
}

.rep-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 28px 8px 12px;
    letter-spacing: 0;
}

.rep-empty strong {
    color: #111;
    font-size: 15px;
    font-weight: 700;
}

.rep-empty span {
    color: #888;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.rep-sheet {
    min-height: 0;
    overflow: auto;
    border-radius: 14px;
    background: #fafafa;
}

.rep-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.rep-sheet th,
.rep-sheet td {
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}

.rep-sheet thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f4f4;
    font-size: 11px;
    font-weight: 700;
}

.rep-sheet tbody tr:nth-child(even) td { background: #fff; }

.rep-td-when { display: none; }

.rep-st {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
}

.rep-st--paid { background: #fff; color: #111; }
.rep-st--unpaid { background: #111; color: #fff; }
.rep-st--partial { background: var(--brand); color: #fff; }
.rep-st--rent { background: var(--brand); color: #fff; }
.rep-st--own { background: #111; color: #fff; }
.rep-st--shop { background: #ececec; color: #555; }

@media (max-width: 1180px) {
    .rep { grid-template-columns: 56px minmax(0, 1fr); }

    .rep-index { padding: 6px; }

    .rep-index button {
        display: grid;
        place-items: center;
        grid-template-columns: none;
        min-height: 44px;
        padding: 10px 0;
        border-radius: 12px;
    }

    .rep-index button i {
        grid-row: auto;
        width: 20px;
    }

    .rep-index button span,
    .rep-index button small { display: none; }
}

@media (max-width: 900px) {
    .rep-board { padding: 12px; }

    .rep-tools,
    .rep-tools:has([data-rep-place]),
    .rep-tools--frm { grid-template-columns: 1fr 1fr; }

    .rep-book {
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .rep-book__side {
        flex: 0 0 auto;
        overflow: visible;
    }

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

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

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

    .rep-when > .rep-field { grid-column: 1 / -1; }

    .rep-sum { grid-template-columns: 1fr 1fr; }

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

    .rep-age {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas:
            "mark text total"
            "bins bins bins";
    }

    .rep-board[data-rep-view="msk"],
    .rep-board[data-rep-view="frm"] { overflow: auto; }

    .rep-pane[data-rep-pane="msk"],
    .rep-pane[data-rep-pane="frm"] { overflow: visible; }

    .rep-grid[data-rep-grid="msk"],
    .rep-grid[data-rep-grid="frm"] {
        flex: 0 0 auto;
        overflow: visible;
    }

    .rep-grid[data-rep-grid="msk"] table,
    .rep-grid[data-rep-grid="frm"] table {
        min-width: 0;
        display: block;
        width: 100%;
    }

    .rep-grid[data-rep-grid="msk"] thead,
    .rep-grid[data-rep-grid="msk"] tbody,
    .rep-grid[data-rep-grid="frm"] thead,
    .rep-grid[data-rep-grid="frm"] tbody {
        display: block;
        width: 100%;
    }

    .rep-grid[data-rep-grid="msk"] thead,
    .rep-grid[data-rep-grid="frm"] thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .rep-grid[data-rep-grid="msk"] thead tr,
    .rep-grid[data-rep-grid="msk"] tbody tr,
    .rep-grid[data-rep-grid="frm"] thead tr,
    .rep-grid[data-rep-grid="frm"] tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 12px;
        width: 100%;
        padding: 12px;
        border-radius: 14px;
        background: #fafafa;
    }

    .rep-grid[data-rep-grid="msk"] thead tr,
    .rep-grid[data-rep-grid="msk"] tbody tr {
        grid-template-areas:
            "no place"
            "type st"
            "owner who";
    }

    .rep-grid[data-rep-grid="frm"] thead tr,
    .rep-grid[data-rep-grid="frm"] tbody tr {
        grid-template-areas:
            "date place"
            "type paper"
            "note note"
            "belge pay"
            "bal bal";
    }

    .rep-grid[data-rep-grid="msk"] thead tr,
    .rep-grid[data-rep-grid="frm"] thead tr { margin: 0 0 6px; }

    .rep-grid[data-rep-grid="msk"] tbody tr,
    .rep-grid[data-rep-grid="frm"] tbody tr { margin: 0 0 6px; }

    .rep-grid[data-rep-grid="msk"] thead th,
    .rep-grid[data-rep-grid="msk"] thead th:nth-child(1),
    .rep-grid[data-rep-grid="msk"] thead th:nth-child(3),
    .rep-grid[data-rep-grid="msk"] thead th:nth-child(4),
    .rep-grid[data-rep-grid="msk"] thead th:nth-child(5),
    .rep-grid[data-rep-grid="msk"] thead th:nth-child(6),
    .rep-grid[data-rep-grid="msk"] td,
    .rep-grid[data-rep-grid="frm"] thead th,
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(1),
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(2),
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(3),
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(4),
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(5),
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(6),
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(7),
    .rep-grid[data-rep-grid="frm"] thead th:nth-child(8),
    .rep-grid[data-rep-grid="frm"] td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        background: transparent;
        white-space: normal;
    }

    .rep-grid[data-rep-grid="msk"] thead th,
    .rep-grid[data-rep-grid="frm"] thead th { position: static; }

    .rep-grid[data-rep-grid="msk"] thead th span,
    .rep-grid[data-rep-grid="frm"] thead th span { white-space: nowrap; }

    .rep-grid[data-rep-grid="msk"] td,
    .rep-grid[data-rep-grid="frm"] td { overflow-wrap: break-word; }

    .rep-grid[data-rep-grid="msk"] thead th:nth-child(1),
    .rep-grid[data-rep-grid="msk"] td:nth-child(1) { grid-area: no; }

    .rep-grid[data-rep-grid="msk"] thead th:nth-child(2),
    .rep-grid[data-rep-grid="msk"] td:nth-child(2) { grid-area: place; }

    .rep-grid[data-rep-grid="msk"] thead th:nth-child(3),
    .rep-grid[data-rep-grid="msk"] td:nth-child(3) { grid-area: type; }

    .rep-grid[data-rep-grid="msk"] thead th:nth-child(4),
    .rep-grid[data-rep-grid="msk"] td:nth-child(4) { grid-area: owner; }

    .rep-grid[data-rep-grid="msk"] thead th:nth-child(5),
    .rep-grid[data-rep-grid="msk"] td:nth-child(5) { grid-area: who; }

    .rep-grid[data-rep-grid="msk"] thead th:nth-child(6),
    .rep-grid[data-rep-grid="msk"] td:nth-child(6) { grid-area: st; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(1),
    .rep-grid[data-rep-grid="frm"] td:nth-child(1) { grid-area: date; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(2),
    .rep-grid[data-rep-grid="frm"] td:nth-child(2) { grid-area: place; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(3),
    .rep-grid[data-rep-grid="frm"] td:nth-child(3) { grid-area: type; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(4),
    .rep-grid[data-rep-grid="frm"] td:nth-child(4) { grid-area: paper; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(5),
    .rep-grid[data-rep-grid="frm"] td:nth-child(5) { grid-area: note; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(6),
    .rep-grid[data-rep-grid="frm"] td:nth-child(6) { grid-area: belge; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(7),
    .rep-grid[data-rep-grid="frm"] td:nth-child(7) { grid-area: pay; }

    .rep-grid[data-rep-grid="frm"] thead th:nth-child(8),
    .rep-grid[data-rep-grid="frm"] td:nth-child(8) { grid-area: bal; }

    .rep-grid[data-rep-grid="msk"] tbody tr:nth-child(even) td,
    .rep-grid[data-rep-grid="msk"] tbody tr:hover td,
    .rep-grid[data-rep-grid="frm"] tbody tr:nth-child(even) td,
    .rep-grid[data-rep-grid="frm"] tbody tr:hover td { background: transparent; }

    .rep-grid[data-rep-grid="msk"] td::before,
    .rep-grid[data-rep-grid="frm"] td::before {
        content: attr(data-col);
        display: block;
        margin: 0 0 3px;
        color: #888;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

@media (max-width: 720px) {
    .rep-subs button { min-height: 36px; padding: 0 10px 0 8px; }

    .rep-subs button em {
        display: block;
        font-style: normal;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .rep-subs button strong { display: none; }

    .rep-sum--age { grid-template-columns: 1fr 1fr; }

    .rep-sum--5 { grid-template-columns: 1fr 1fr; }

    .rep-board[data-rep-view="yas"] { overflow: auto; }

    .rep-pane[data-rep-pane="yas"] { overflow: visible; }

    .rep-people[data-rep-people="yas"] {
        flex: 0 0 auto;
        overflow: visible;
    }

    .rep-tools,
    .rep-tools:has([data-rep-place]),
    .rep-tools--frm { grid-template-columns: 1fr; }

    .rep-age {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas:
            "mark text total"
            "bins bins bins";
        min-height: 0;
    }

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

    .rep-age__bin strong,
    .rep-age__total strong { font-size: 12px; }

    .rep-sheet {
        overflow: visible;
        background: transparent;
    }

    .rep-sheet table,
    .rep-sheet tbody { display: block; width: 100%; }

    .rep-sheet thead { display: none; }

    .rep-sheet tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 4px 14px;
        margin: 0 0 6px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #fafafa;
    }

    .rep-sheet th,
    .rep-sheet td {
        display: none;
        padding: 0;
        white-space: normal;
        letter-spacing: 0;
        background: transparent;
    }

    .rep-sheet tbody tr:nth-child(even) td { background: transparent; }

    .rep-sheet .rep-td-title {
        display: block;
        grid-column: 1;
        grid-row: 1;
        font-size: 14px;
        font-weight: 700;
    }

    .rep-sheet .rep-td-when {
        display: block;
        grid-column: 1;
        grid-row: 2;
        color: #888;
        font-size: 12px;
        font-weight: 500;
    }

    .rep-sheet .rep-td-amt:not([data-empty]),
    .rep-sheet .rep-td-st {
        display: block;
        grid-column: 2;
        grid-row: 1;
        font-size: 15px;
        font-weight: 800;
        text-align: right;
    }

    .rep-sheet .rep-td-bal {
        display: block;
        grid-column: 2;
        grid-row: 2;
        color: #888;
        font-size: 12px;
        font-weight: 600;
        text-align: right;
    }

    .rep-sheet td[colspan] {
        display: block;
        grid-column: 1 / -1;
        color: #888;
        font-size: 13px;
        font-weight: 600;
    }
}

body.page-arch .page-head__tools .ark-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

body.page-arch .page-head__tools .ark-head .due-tools {
    flex: 1 1 auto;
    min-width: 0;
}

.ark-quota {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: "mark text" "bar bar";
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
    flex: 0 0 auto;
    min-width: 220px;
    padding: 8px 12px 10px;
    border: 1px solid var(--gray-20);
    border-radius: 12px;
    background: #fff;
}

.ark-quota__mark {
    grid-area: mark;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff1f1;
    color: var(--brand);
}

.ark-quota__mark svg {
    width: 18px;
    height: 18px;
}

.ark-quota__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.15;
}

.ark-quota__text strong {
    color: #111;
    font-size: 14px;
    font-weight: 700;
}

.ark-quota__text span {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.ark-quota__meter {
    grid-area: bar;
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: #ececec;
}

.ark-quota__meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
}

@media (max-width: 760px) {
    body.page-arch .page-head__tools .ark-head {
        flex-direction: column;
        align-items: stretch;
    }

    .ark-quota {
        align-self: flex-start;
    }

    .ark-quota__text {
        white-space: normal;
    }
}

.page-legal {
    margin: 0;
    min-height: 100%;
    background: #fff;
    color: #111;
}

.doc {
    width: min(720px, calc(100% - 40px));
    margin: 0 auto;
    padding: 40px 0 64px;
}

.doc__logo { display: inline-flex; margin-bottom: 28px; }

.doc__kicker {
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc h1 {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.15;
}

.doc__lead {
    margin: 0 0 8px;
    color: var(--gray-60);
    font-size: 16px;
    line-height: 1.5;
}

.doc__meta {
    margin: 0 0 28px;
    color: #9a9a9a;
    font-size: 13px;
}

.doc section { margin: 0 0 22px; }

.doc h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.doc p,
.doc li {
    margin: 0 0 8px;
    color: #333;
    font-size: 15px;
    line-height: 1.55;
}

.doc ul {
    margin: 0;
    padding: 0 0 0 18px;
}

.doc__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-20);
}

.doc__links a {
    color: #111;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .doc { padding-top: 24px; }
    .doc h1 { font-size: 26px; }
}