:root {
    --portal-green: #008767;
    --portal-green-dark: #006b52;
    --portal-green-light: #26a07f;
    --portal-green-soft: #e5f4f1;
    --portal-forest: #2d4f41;
    --portal-ink: #2d3436;
    --portal-muted: #556b67;
    --portal-hint: #9ca3af;
    --portal-line: #e2e8f0;
    --portal-bg: #f5f9f8;
    --portal-surface-muted: #f0f4f4;
    --portal-side: 252px;
    --portal-header: 48px;
    --portal-page-x: 14px;
    --portal-radius-input: 10px;
    --portal-radius-card: 16px;
    --portal-radius-lg: 20px;
    --portal-nav-inset: 72px;
    --portal-btn-height: 52px;
}

* { box-sizing: border-box; }

body.portal-body {
    margin: 0;
    font-family: "Hind Siliguri", sans-serif;
    color: var(--portal-ink);
    background: var(--portal-bg);
}

h1, h2, h3, .portal-display {
    font-family: "Tiro Bangla", serif;
}

.shell-body .portal-sidebar.shell-sidebar {
    /* layout: shell.css */
}

.portal-sidebar:not(.shell-sidebar) {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--portal-side);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    color: #e7f3ee;
    background:
        radial-gradient(120% 40% at 0% 0%, rgba(47, 179, 119, .22), transparent 42%),
        linear-gradient(180deg, #12382c 0%, #0c241c 100%);
    box-shadow: 12px 0 32px -28px rgba(0, 0, 0, .7);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .7rem .7rem .2rem;
    padding: .55rem .6rem;
    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.portal-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.portal-brand-mark img { height: 22px; width: auto; }
.portal-brand-copy { min-width: 0; }
.portal-brand-copy strong {
    display: block;
    font-size: .92rem;
    line-height: 1.15;
}
.portal-brand-copy span {
    display: block;
    color: rgba(231, 243, 238, .68);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-side-scroll {
    overflow: auto;
    padding: .45rem .65rem .9rem;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.portal-side-scroll::-webkit-scrollbar { width: 8px; }
.portal-side-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 99px;
}

.portal-side-label {
    margin: .85rem .45rem .28rem;
    color: rgba(231, 243, 238, .48);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.portal-side-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(231, 243, 238, .86);
    text-decoration: none;
    border-radius: 12px;
    padding: .38rem .45rem;
    margin-bottom: .12rem;
    font-size: .92rem;
    font-weight: 500;
}

.portal-side-link i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    font-size: .95rem;
    flex: 0 0 auto;
}

.portal-side-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.portal-side-link.active {
    background: #e8f7f1;
    color: #0d3b2e;
    font-weight: 700;
}

.portal-side-link.active i {
    background: #008767;
    color: #fff;
}

.portal-main {
    min-height: 100vh;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--portal-header);
    min-height: var(--portal-header);
    max-height: var(--portal-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .9rem;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--portal-line);
}

.portal-topbar-title {
    margin: 0;
    font-family: "Hind Siliguri", sans-serif;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-topbar-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
}

.portal-profile-toggle {
    height: 32px;
    border: 1px solid var(--portal-line);
    background: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .55rem 0 .2rem;
    color: var(--portal-ink);
    font-size: .8rem;
    font-weight: 600;
}

.portal-profile-toggle i { font-size: .7rem; color: var(--portal-muted); }
.portal-profile-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-profile-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e7f5f0;
    color: var(--portal-green-dark);
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.portal-profile-menu {
    width: min(280px, calc(100vw - 1.5rem));
    border: 1px solid var(--portal-line);
    border-radius: 16px;
    padding: .45rem;
    box-shadow: 0 18px 40px -24px rgba(13, 59, 46, .45);
    margin-top: .35rem !important;
}

.portal-profile-card {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .55rem .5rem .7rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--portal-line);
}

.portal-profile-card .portal-profile-avatar { width: 38px; height: 38px; }
.portal-profile-card strong, .portal-profile-card small { display: block; }
.portal-profile-card small { color: var(--portal-muted); font-size: .75rem; }

.portal-profile-menu .dropdown-item {
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    padding: .5rem .6rem;
}

.portal-profile-menu .dropdown-item:hover { background: #f3fbf7; color: var(--portal-green-dark); }
.portal-profile-logout {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    color: #be123c;
}

.portal-content {
    padding: var(--portal-page-x) var(--portal-page-x) calc(var(--portal-nav-inset) + env(safe-area-inset-bottom));
    max-width: 960px;
}

.portal-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--portal-radius-lg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.portal-stat {
    padding: 1rem 1.05rem;
}

.portal-stat small { color: var(--portal-muted); }
.portal-stat strong {
    display: block;
    margin-top: .2rem;
    font-size: 1.35rem;
}

.portal-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .07);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: .45rem .2rem calc(.45rem + env(safe-area-inset-bottom));
}

.portal-bottom a {
    text-align: center;
    text-decoration: none;
    color: var(--portal-muted);
    font-size: .68rem;
    font-weight: 500;
    padding: .35rem 0 .15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    position: relative;
}

.portal-bottom a .portal-nav-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    line-height: 1;
}

.portal-bottom a.active {
    color: var(--portal-green);
    font-weight: 700;
}

.portal-bottom a.active:not(.portal-nav-more)::after {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 99px;
    background: var(--portal-green);
    margin-top: .1rem;
}

.portal-bottom a.portal-nav-more .portal-nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--portal-surface-muted);
    font-size: .95rem;
}

.portal-bottom a.portal-nav-more.active .portal-nav-icon {
    background: var(--portal-green-soft);
}

.btn-portal {
    background: var(--portal-green);
    border-color: var(--portal-green);
    color: #fff;
    border-radius: var(--portal-radius-card);
    font-weight: 600;
    min-height: var(--portal-btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-portal:hover { background: var(--portal-green-dark); color: #fff; }

.btn-outline-portal {
    border: 1.2px solid var(--portal-green);
    color: var(--portal-green);
    background: #fff;
    font-weight: 700;
    font-size: .75rem;
    border-radius: 10px;
    padding: .4rem .75rem;
    font-family: inherit;
}

.btn-outline-portal:hover {
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
}

.text-purple { color: #7c3aed !important; }

.btn-portal-soft {
    background: #fff;
    border: 1px solid var(--portal-line);
    color: var(--portal-ink);
    border-radius: 12px;
    font-weight: 600;
}

.portal-segment {
    display: flex;
    gap: .4rem;
    overflow: auto;
    padding-bottom: .25rem;
}

.portal-segment a,
.portal-segment button {
    white-space: nowrap;
    text-decoration: none;
    border-radius: 999px;
    padding: .4rem .8rem;
    background: #fff;
    border: 1px solid var(--portal-line);
    color: var(--portal-ink);
    font-size: .9rem;
    cursor: pointer;
    font-family: inherit;
}

.portal-segment button {
    appearance: none;
}

.portal-segment a.active,
.portal-segment button.active {
    background: var(--portal-green);
    border-color: var(--portal-green);
    color: #fff;
}

.portal-record {
    display: block;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--portal-line);
    color: inherit;
    text-decoration: none;
}

.portal-record:last-child { border-bottom: 0; }

/* Flutter AppEntityTile + AppSurfaceCard list */
.portal-list-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--portal-radius-lg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.portal-entity {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: .65rem;
    align-items: center;
    padding: .75rem var(--portal-page-x);
    border-bottom: 1px solid var(--portal-line);
    color: inherit;
    text-decoration: none;
}

.portal-entity:last-child { border-bottom: 0; }
.portal-entity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    font-weight: 800;
    font-size: 1rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.portal-entity-body { min-width: 0; }
.portal-entity-title {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-entity-sub {
    display: block;
    font-size: .78rem;
    color: var(--portal-muted);
    margin-top: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-entity-amount,
.portal-expense-card-amount {
    font-variant-numeric: lining-nums tabular-nums;
}

.portal-entity-amount {
    font-weight: 800;
    font-size: .9rem;
    color: var(--portal-forest);
    white-space: nowrap;
}

.portal-entity-amount.is-due { color: #dc2626; }
.portal-entity-amount.is-credit { color: var(--portal-green); }

.portal-empty {
    padding: 1.25rem var(--portal-page-x);
    text-align: center;
    color: var(--portal-muted);
    font-size: .9rem;
}

.portal-loader-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    min-height: 5rem;
}

.portal-loader-wrap.is-lg {
    min-height: 8rem;
}

.portal-loader {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(0, 135, 103, .18);
    border-top-color: #008767;
    border-radius: 50%;
    animation: portal-spin .75s linear infinite;
}

.portal-loader-lg {
    width: 2.75rem;
    height: 2.75rem;
    border-width: 3px;
}

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

.portal-content {
    position: relative;
}

.portal-page-loader {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

.portal-page-loader.is-active {
    opacity: 1;
    pointer-events: auto;
}

.portal-page-loader[hidden] {
    display: none !important;
}

.portal-frame-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
}

.portal-frame-host {
    position: relative;
}

.portal-reports-view {
    margin: calc(-1 * var(--portal-page-x)) calc(-1 * var(--portal-page-x)) 0;
}

.portal-reports-offline {
    margin: var(--portal-page-x);
    padding: 2rem 1.25rem;
    text-align: center;
    background: #fff;
    border-radius: var(--portal-radius-lg);
    border: 1px solid var(--portal-line);
}

.portal-reports-offline-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto .85rem;
    border-radius: 22px;
    background: var(--portal-green-soft);
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    color: var(--portal-green);
}

.portal-reports-offline strong {
    display: block;
    font-size: 1rem;
    margin-bottom: .35rem;
}

.portal-reports-offline p {
    margin: 0;
    color: var(--portal-muted);
    font-size: .88rem;
}

.portal-reports-frame-host {
    background: #f3f4f6;
    min-height: calc(100dvh - var(--portal-nav-inset) - 48px);
}

.portal-reports-frame-host iframe {
    display: block;
    width: 100%;
    height: calc(100dvh - var(--portal-nav-inset) - 48px);
    border: 0;
    background: #f3f4f6;
}

.portal-reports-refresh {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    color: var(--portal-green-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.portal-reports-refresh:active {
    transform: scale(.96);
}

/* Building detail (Flutter PropertyDetailScreen) */
.building-detail-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .65rem;
}

.building-detail-overview {
    padding: .75rem .85rem;
    margin-bottom: .75rem;
}

.building-detail-overview-top {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.building-detail-overview-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.building-detail-overview-text {
    flex: 1;
    min-width: 0;
}

.building-detail-overview-text strong {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.15;
}

.building-detail-overview-text span {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--portal-muted);
}

.building-detail-type-chip {
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: var(--portal-surface-muted);
    border: 1px solid var(--portal-line);
    flex-shrink: 0;
}

.building-detail-occ-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--portal-surface-muted);
    margin: .65rem 0 .55rem;
    overflow: hidden;
}

.building-detail-occ-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.building-detail-overview-stats {
    display: flex;
    align-items: center;
}

.building-detail-overview-stats > div {
    flex: 1;
    text-align: center;
}

.building-detail-overview-stats strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
}

.building-detail-overview-stats small {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    color: var(--portal-muted);
}

.building-detail-stat-div {
    width: 1px;
    height: 28px;
    background: var(--portal-line);
    margin: 0 .35rem;
}

.building-detail-tabs {
    margin-bottom: .65rem;
}

.building-detail-tabs-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.building-detail-tabs-scroll::-webkit-scrollbar { display: none; }

.building-detail-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .65rem;
    border-radius: 10px;
    border: 1px solid var(--portal-line);
    background: #fff;
    font-size: .72rem;
    font-weight: 700;
    color: var(--portal-muted);
}

.building-detail-tab.is-active {
    background: var(--portal-green-soft);
    border-color: rgba(0, 135, 103, .35);
    color: var(--portal-green-dark);
}

.building-detail-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: .65rem;
    scrollbar-width: none;
}

.building-detail-pill {
    flex: 0 0 auto;
    border: 1px solid var(--portal-line);
    background: #fff;
    border-radius: 10px;
    padding: .35rem .55rem;
    font-size: .66rem;
    font-weight: 700;
    color: var(--portal-muted);
}

.building-detail-pill.is-active {
    background: var(--portal-green-soft);
    border-color: rgba(0, 135, 103, .35);
    color: var(--portal-green-dark);
}

.building-detail-month-chip {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    border: 1px solid var(--portal-line);
    background: #fff;
    border-radius: 10px;
    padding: .45rem .65rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--portal-muted);
}

.building-detail-month-chip.is-active {
    background: var(--portal-green-soft);
    border-color: rgba(0, 135, 103, .35);
    color: var(--portal-green);
}

.building-detail-panel-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
}

.building-detail-panel[hidden] {
    display: none !important;
}

@media (min-width: 992px) {
    .portal-reports-view {
        margin-left: 0;
        margin-right: 0;
    }

    .portal-reports-frame-host,
    .portal-reports-frame-host iframe {
        min-height: calc(100dvh - 80px);
        height: calc(100dvh - 80px);
    }
}

/* Flutter AppSearchField */
.portal-search-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 40px;
    padding: 0 .85rem;
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-input);
}

.portal-search-bar i { color: var(--portal-hint); }
.portal-search-bar input {
    border: 0;
    outline: 0;
    width: 100%;
    background: transparent;
    font-size: .9rem;
    font-family: inherit;
}

/* Flutter AppSegmentedTabBar (directory tabs) */
.portal-segment-box {
    display: flex;
    gap: .25rem;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius-input);
    overflow: auto;
}

.portal-segment-box a,
.portal-segment-box button {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    text-decoration: none;
    border: 0;
    background: transparent;
    color: var(--portal-muted);
    font-size: .78rem;
    font-weight: 600;
    padding: .45rem .5rem;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.portal-segment-box a.active,
.portal-segment-box button.active {
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
}

.portal-page-head { margin-bottom: .75rem; }
.portal-page-head-text .h4 { font-size: 1.15rem; font-weight: 800; font-family: "Hind Siliguri", sans-serif; }

.portal-mobile-title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    font-family: "Hind Siliguri", sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--portal-forest);
    line-height: 36px;
}

a.shell-menu.portal-mobile-back { text-decoration: none; color: #0d3b2e; }

.portal-sticky-action {
    position: fixed;
    left: var(--portal-page-x);
    right: var(--portal-page-x);
    bottom: calc(var(--portal-nav-inset) + env(safe-area-inset-bottom) + 8px);
    z-index: 1025;
    max-width: calc(960px - 2 * var(--portal-page-x));
    margin: 0 auto;
}

.portal-sticky-action .btn-portal {
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 135, 103, .35);
}

/* More screen module cards */
.portal-more-section {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--portal-muted);
    margin: .85rem 0 .35rem;
}

.portal-more-module {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--portal-radius-lg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    padding: .65rem .5rem .75rem;
    margin-bottom: .65rem;
}

.portal-more-module > strong {
    display: block;
    font-size: .85rem;
    font-weight: 800;
    padding: 0 .35rem .45rem;
    font-family: "Hind Siliguri", sans-serif;
}

.portal-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}

.portal-more-grid form { margin: 0; }
.portal-more-tile {
    width: 100%;
    text-decoration: none;
    color: inherit;
    text-align: center;
    padding: .55rem .25rem .45rem;
    border-radius: var(--portal-radius-lg);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.portal-more-tile:active { background: var(--portal-green-soft); }

.portal-more-tile-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto .35rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.portal-more-tile span {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--portal-ink);
}

.portal-more-tile-icon.tone-teal { background: #e5f4f1; color: #008767; }
.portal-more-tile-icon.tone-blue { background: #e7f1ff; color: #2563eb; }
.portal-more-tile-icon.tone-amber { background: #fff4df; color: #d97706; }
.portal-more-tile-icon.tone-violet { background: #f3e8ff; color: #7c3aed; }
.portal-more-tile-icon.tone-coral { background: #ffe8e8; color: #e11d48; }
.portal-more-tile-icon.tone-green { background: #e7f6ee; color: #1f9d55; }
.portal-more-tile-icon.tone-pink { background: #fce7f3; color: #db2777; }
.portal-more-tile-icon.tone-sky { background: #e0f2fe; color: #0284c7; }
.portal-more-tile-icon.tone-indigo { background: #e0e7ff; color: #4f46e5; }

.portal-filter-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--portal-radius-lg);
    padding: .75rem var(--portal-page-x);
    margin-bottom: .65rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: #edf6f1;
    position: relative;
    overflow-x: hidden;
}

.auth-page-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.auth-page-bg__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% -15%, rgba(38, 160, 127, .18), transparent 55%),
        radial-gradient(ellipse 55% 45% at 100% 50%, rgba(20, 122, 83, .1), transparent 52%),
        radial-gradient(ellipse 50% 40% at 0% 85%, rgba(47, 179, 119, .12), transparent 50%),
        linear-gradient(165deg, #f7fcf9 0%, #edf6f1 42%, #e6f2ec 100%);
}

.auth-page-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.55;
    will-change: transform;
}

.auth-page-bg__orb--1 {
    width: min(420px, 70vw);
    height: min(420px, 70vw);
    top: -12%;
    right: -8%;
    background: rgba(26, 157, 102, .35);
}

.auth-page-bg__orb--2 {
    width: min(360px, 65vw);
    height: min(360px, 65vw);
    bottom: -10%;
    left: -12%;
    background: rgba(0, 135, 103, .28);
}

.auth-page-bg__orb--3 {
    width: min(220px, 45vw);
    height: min(220px, 45vw);
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .85);
    opacity: 0.9;
    filter: blur(48px);
}

.auth-page-bg__grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(20, 122, 83, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 122, 83, .06) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 72%);
}

.auth-page-center {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem 2.5rem;
}

.auth-site-brand {
    text-align: center;
    margin-bottom: 1.35rem;
    max-width: 520px;
}

.auth-site-logo {
    display: block;
    width: min(320px, 88vw);
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
}

.auth-card {
    width: min(440px, 100%);
    background: #fff;
    border-radius: 22px;
    padding: 1.75rem 1.65rem 1.5rem;
    box-shadow: 0 28px 60px -36px rgba(14, 92, 63, .45);
    border: 1px solid rgba(20, 122, 83, .08);
}

.auth-card-brand {
    text-align: center;
    margin-bottom: .25rem;
}

.auth-card-headline {
    margin: 0;
    font-size: 1.22rem;
    line-height: 1.35;
    color: #147a53;
    font-weight: 700;
}

.auth-card-sub {
    margin: .45rem 0 0;
    color: #6b7c76;
    font-size: .82rem;
    line-height: 1.45;
}

.auth-card-meta {
    margin-top: .55rem;
    font-size: .72rem;
    color: #9aa8a2;
    letter-spacing: .02em;
}

.auth-card-rule {
    width: 42px;
    height: 3px;
    margin: .85rem auto 1.1rem;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #147a53, transparent);
    opacity: .35;
}

.auth-card-body { text-align: left; }

.auth-step-caption {
    text-align: center;
    color: #147a53;
    font-weight: 700;
    font-size: .82rem;
    margin: -.35rem 0 .35rem;
}

.auth-step-lead {
    text-align: center;
    color: #6b7c76;
    font-size: .78rem;
    line-height: 1.45;
    margin: 0 0 .85rem;
}

/* Register — compact layout & plan picker */
.auth-card:has(.auth-register) {
    padding: 1.15rem 1.2rem 1rem;
}

.auth-card:has(.auth-register) .auth-card-headline {
    font-size: 1.05rem;
}

.auth-card:has(.auth-register) .auth-card-sub {
    font-size: .74rem;
    margin-top: .2rem;
    line-height: 1.35;
}

.auth-card:has(.auth-register) .auth-card-rule {
    width: 36px;
    margin: .45rem auto .55rem;
}

.auth-register .auth-steps {
    margin-bottom: .45rem;
}

.auth-register .auth-step-caption {
    margin: -.2rem 0 .2rem;
    font-size: .78rem;
}

.auth-register .auth-step-lead {
    font-size: .72rem;
    line-height: 1.35;
    margin-bottom: .55rem;
}

.auth-register .portal-sys .sys-field {
    margin-bottom: 0.55rem;
}

.auth-register .sys-field--pin,
.auth-register .sys-field--plans {
    margin-bottom: 0.45rem;
}

.auth-register .auth-register__submit {
    margin-top: 0.35rem !important;
}

.auth-register .btn-auth-submit {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.register-phone-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.45rem;
}

.register-phone-row .auth-back {
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--portal-green-dark);
    font-weight: 600;
}

.register-phone-row .phone-chip {
    margin-bottom: 0;
    padding: 0.22rem 0.55rem;
    font-size: 0.8125rem;
}

.auth-foot--compact {
    margin-top: 0.65rem;
    font-size: 0.8125rem;
}

.plan-trial-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.45rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: #065f46;
    background: linear-gradient(135deg, #ecfdf5, #e7f5f0);
    border: 1px solid rgba(20, 122, 83, 0.22);
    border-radius: 0;
}

.plan-trial-banner i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #147a53;
    font-size: 0.875rem;
}

.plan-picker {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plan-picker__row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.4rem 0.55rem;
    border: 1px solid #d8e3de;
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.plan-picker__row:hover {
    border-color: #c5d4cd;
    background: #f9fcfb;
}

.plan-picker__row:has(input:checked) {
    border-color: #147a53;
    background: #f3fbf7;
    box-shadow: 0 0 0 1px rgba(20, 122, 83, 0.35);
}

.plan-picker__row.is-popular:not(:has(input:checked)) {
    border-color: rgba(20, 122, 83, 0.35);
}

.plan-picker__row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-picker__mark {
    width: 16px;
    height: 16px;
    border: 2px solid #b8c9c2;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.plan-picker__row:has(input:checked) .plan-picker__mark {
    border-color: #147a53;
}

.plan-picker__row:has(input:checked) .plan-picker__mark::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #147a53;
}

.plan-picker__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.plan-picker__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
}

.plan-picker__name {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--portal-ink);
    line-height: 1.2;
}

.plan-picker__badge {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.35rem;
    background: #147a53;
    color: #fff;
    border-radius: 0;
}

.plan-picker__trial {
    font-size: 0.625rem;
    font-weight: 600;
    color: #147a53;
}

.plan-picker__price {
    text-align: right;
    flex-shrink: 0;
    line-height: 1.15;
}

.plan-picker__amount {
    display: block;
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--portal-forest);
    font-variant-numeric: tabular-nums;
}

.plan-picker__period {
    display: block;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--portal-muted);
}
.auth-label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
    font-size: .92rem;
}

/* Portal auth — system inputs (flat, square, app-like) */
.portal-sys {
    --sys-h: 44px;
    --sys-border: #d8e3de;
    --sys-border-focus: #147a53;
    --sys-surface: #fff;
    --sys-surface-soft: #f6f9f8;
}

.portal-sys .sys-field {
    margin-bottom: 0.85rem;
}

.portal-sys .sys-field.mb-0 {
    margin-bottom: 0;
}

.portal-sys .sys-field > .pin-field,
.portal-sys .sys-field > .sys-pin {
    margin-bottom: 0;
}

.portal-sys .sys-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--portal-forest);
    margin-bottom: 0.35rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.portal-sys .sys-control {
    display: flex;
    align-items: stretch;
    min-height: var(--sys-h);
    background: var(--sys-surface);
    border: 1px solid var(--sys-border);
    border-radius: 0;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.portal-sys .sys-control:hover {
    border-color: #c5d4cd;
    background: var(--sys-surface-soft);
}

.portal-sys .sys-control:focus-within {
    border-color: var(--sys-border-focus);
    background: var(--sys-surface);
    box-shadow: 0 0 0 3px rgba(20, 122, 83, 0.14);
}

.portal-sys .sys-input {
    display: block;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: var(--sys-h);
    min-height: var(--sys-h);
    padding: 0 0.875rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--portal-ink);
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
}

.portal-sys .sys-input::placeholder {
    color: var(--portal-hint);
    font-weight: 400;
}

.portal-sys .sys-input:focus {
    outline: none;
}

.portal-sys .vstack > .sys-field,
.portal-sys .vstack.gap-2 > .sys-field,
.portal-sys .vstack.gap-3 > .sys-field {
    margin-bottom: 0;
}

.portal-sys .sys-control--select {
    position: relative;
    padding: 0;
}

.portal-sys .sys-select {
    display: block;
    width: 100%;
    height: var(--sys-h);
    min-height: var(--sys-h);
    padding: 0 2.25rem 0 0.875rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--portal-ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23556b67' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.portal-sys .sys-select:focus {
    outline: none;
}

.portal-sys .sys-control--textarea {
    min-height: auto;
    align-items: stretch;
}

.portal-sys .sys-textarea {
    display: block;
    width: 100%;
    min-height: 5rem;
    padding: 0.625rem 0.875rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--portal-ink);
    line-height: 1.45;
    resize: vertical;
}

.portal-sys .sys-textarea:focus {
    outline: none;
}

.portal-sys .sys-control--file {
    padding: 0.35rem 0.875rem;
    min-height: var(--sys-h);
}

.portal-sys .sys-file {
    width: 100%;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--portal-ink);
    border: none;
    background: transparent;
}

.portal-sys .sys-file:focus {
    outline: none;
}

.portal-sys .sys-control--phone .sys-phone__prefix {
    flex-shrink: 0;
    min-width: 3.25rem;
    padding: 0 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--sys-border-focus);
    background: var(--sys-surface-soft);
    border-right: 1px solid var(--sys-border);
    user-select: none;
}

.portal-sys .sys-control--phone:focus-within .sys-phone__prefix {
    background: #eef6f2;
    border-right-color: rgba(20, 122, 83, 0.25);
}

.portal-sys .sys-input--phone {
    padding-left: 0.75rem;
}

.portal-sys .sys-pin {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin-bottom: 0;
}
.portal-sys .sys-pin:not(:has(.sys-pin__toggle)) {
    grid-template-columns: minmax(0, 1fr);
}

.portal-sys .sys-pin__boxes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: var(--sys-h);
    background: var(--sys-surface);
    border: 1px solid var(--sys-border);
    border-radius: 0;
    gap: 0;
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.portal-sys .sys-pin:focus-within .sys-pin__boxes {
    border-color: var(--sys-border-focus);
    box-shadow: 0 0 0 3px rgba(20, 122, 83, 0.14);
}

.portal-sys .sys-pin__box {
    height: var(--sys-h);
    min-height: var(--sys-h);
    max-height: var(--sys-h);
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--sys-border);
    background: transparent;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0;
    color: var(--portal-ink);
}

.portal-sys .sys-pin__box:last-child {
    border-right: none;
}

.portal-sys .sys-pin__box:focus {
    outline: none;
    background: #eef6f2;
}

.portal-sys .sys-pin__box[type="password"] {
    -webkit-text-security: disc;
    font-size: 1rem;
}

.portal-sys .sys-pin__toggle {
    min-width: 3rem;
    width: 3rem;
    height: var(--sys-h);
    min-height: var(--sys-h);
    padding: 0.15rem 0.2rem;
    border: 1px solid var(--sys-border);
    border-radius: 0;
    background: var(--sys-surface);
    color: var(--sys-border-focus);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.portal-sys .sys-pin__toggle:hover {
    background: var(--sys-surface-soft);
    border-color: #c5d4cd;
}

.portal-sys .sys-pin__toggle i {
    font-size: 1.05rem;
}

.portal-sys .sys-pin__toggle .pin-toggle__text {
    font-size: 0.5625rem;
    font-weight: 600;
}
.auth-input,
.phone-field input {
    width: 100%;
    border: 1px solid #d7e4de;
    background: #f8fbfa;
    border-radius: 14px;
    min-height: 52px;
    padding: .7rem .9rem;
    font-size: 1rem;
}
.auth-input { margin-bottom: .85rem; }
.auth-input:focus,
.phone-field input:focus,
.pin-box:focus {
    outline: 2px solid rgba(0, 135, 103, .25);
    border-color: var(--portal-green);
    background: #fff;
}
.phone-field {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.phone-field--joined {
    gap: 0;
    border: 1px solid #d7e4de;
    border-radius: 14px;
    background: #f8fbfa;
    overflow: hidden;
}

.phone-field--joined:focus-within {
    outline: 2px solid rgba(20, 122, 83, .22);
    border-color: #147a53;
    background: #fff;
}

.phone-field--joined .phone-prefix,
.phone-field span.phone-prefix {
    min-width: 58px;
    height: 52px;
    display: grid;
    place-items: center;
    background: #e8f5ef;
    color: #147a53;
    font-weight: 700;
    border-right: 1px solid #d7e4de;
    flex-shrink: 0;
}

.phone-field--joined input {
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 52px;
}

.phone-field--joined input:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
}

.phone-field span:not(.phone-prefix) {
    min-width: 58px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e7f5f0;
    color: var(--portal-green-dark);
    font-weight: 700;
}
.pin-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.pin-boxes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.35rem, 2vw, 0.5rem);
    min-width: 0;
}

.pin-box {
    width: 100%;
    max-width: none;
    height: clamp(46px, 12vw, 52px);
    min-height: 46px;
    text-align: center;
    font-size: clamp(1.15rem, 4vw, 1.35rem);
    font-weight: 700;
    border: 1px solid #d7e4de;
    border-radius: 14px;
    background: #f8fbfa;
    padding: 0;
    -webkit-text-security: none;
}

.pin-box[type="password"] {
    -webkit-text-security: disc;
    font-size: clamp(1rem, 3.5vw, 1.2rem);
}

.pin-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    flex-shrink: 0;
    min-width: 52px;
    height: clamp(46px, 12vw, 52px);
    padding: 0.35rem 0.45rem;
    border: 1px solid #d7e4de;
    border-radius: 12px;
    background: #f8fbfa;
    color: #147a53;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pin-toggle:hover {
    background: #e8f5ef;
    border-color: rgba(20, 122, 83, .25);
    color: #0f5c3e;
}

.pin-toggle:focus-visible {
    outline: 2px solid rgba(20, 122, 83, .35);
    outline-offset: 2px;
}

.pin-toggle i {
    font-size: 1.15rem;
}

.pin-toggle__text {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.btn-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #1a9d66 0%, #147a53 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 12px 28px -14px rgba(20, 122, 83, .75);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-auth-submit:hover,
.btn-auth-submit:focus {
    color: #fff;
    background: linear-gradient(180deg, #15905d 0%, #126b49 100%);
    box-shadow: 0 14px 32px -12px rgba(20, 122, 83, .85);
}

.btn-auth-submit:active { transform: translateY(1px); }
.btn-auth-submit.is-busy { opacity: .78; pointer-events: none; }

.auth-link-strong { font-weight: 700 !important; }
.auth-foot--center { justify-content: center; }
.auth-alert.is-info {
    background: #e8f6f0;
    color: #0f5c3e;
}
.auth-forgot-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: 0 0 1.15rem;
}
.auth-forgot-steps span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: #8a9994;
    font-size: .75rem;
    font-weight: 700;
}
.auth-forgot-steps span::before {
    content: "";
    width: 100%;
    height: 3px;
    border-radius: 99px;
    background: #e4eeea;
}
.auth-forgot-steps span.is-on,
.auth-forgot-steps span.is-done { color: #147a53; }
.auth-forgot-steps span.is-on::before,
.auth-forgot-steps span.is-done::before { background: #147a53; }
.auth-forgot-phone {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .75rem .85rem;
    background: #f4faf7;
    border: 1px solid rgba(20, 122, 83, .14);
    border-radius: 14px;
}
.auth-forgot-phone i {
    color: #147a53;
    font-size: 1.15rem;
}
.auth-forgot-phone span { display: flex; flex-direction: column; min-width: 0; }
.auth-forgot-phone small { color: #6b7c76; font-size: .72rem; }
.auth-forgot-phone strong {
    color: #16382c;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.auth-forgot-phone button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #147a53;
    font-weight: 700;
    font-size: .82rem;
    padding: 0;
}
.auth-forgot-otp input[type="number"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
    -moz-appearance: textfield;
}
.auth-forgot-otp input[type="number"]::-webkit-outer-spin-button,
.auth-forgot-otp input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.auth-forgot-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: .9rem 0 .85rem;
    color: #5f736c;
    font-size: .84rem;
}
.auth-forgot-clock {
    min-width: 4.4rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #e8f6f0;
    color: #147a53;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.auth-forgot-resend {
    display: block;
    width: 100%;
    margin: .85rem 0 .9rem;
    border: 0;
    background: transparent;
    color: #147a53;
    font-weight: 700;
    text-align: center;
}
.auth-forgot-resend:disabled { display: none; }
.auth-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .2rem 0 1rem;
    color: var(--portal-muted);
}
.auth-links, .auth-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .92rem;
}
.auth-links a, .auth-foot a, .auth-back {
    color: #147a53;
    font-weight: 600;
    text-decoration: none;
}
.auth-back {
    border: 0;
    background: transparent;
    padding: 0;
    margin-bottom: .8rem;
}
.auth-alert {
    background: #fff1f1;
    color: #9b1c1c;
    border-radius: 12px;
    padding: .7rem .85rem;
    margin-bottom: .9rem;
}
.auth-steps { display: flex; gap: .4rem; margin-bottom: .7rem; }
.auth-steps span {
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: #d7e4de;
}
.auth-steps span.is-on { background: var(--portal-green); }
.phone-chip {
    display: inline-flex;
    margin-bottom: .9rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #e7f5f0;
    color: var(--portal-green-dark);
    font-weight: 700;
}
.plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}
.plan-card {
    position: relative;
    border: 1.5px solid #d7e4de;
    border-radius: 14px;
    padding: .7rem .75rem;
    cursor: pointer;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 78px;
}
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card:has(input:checked),
.plan-card.is-popular:has(input:checked) {
    border-color: var(--portal-green);
    background: #f3fbf7;
    box-shadow: inset 0 0 0 1px var(--portal-green);
}
.plan-card-top { display: flex; justify-content: space-between; gap: .3rem; align-items: center; }
.plan-card-name { font-weight: 700; font-size: .92rem; }
.plan-card-price { font-weight: 700; color: var(--portal-forest); }
.plan-card-price small { font-weight: 500; color: var(--portal-muted); }
.plan-badge {
    font-size: .68rem;
    background: #e7f5f0;
    color: var(--portal-green-dark);
    border-radius: 999px;
    padding: .1rem .4rem;
}
.btn-portal.is-busy { opacity: .75; }

.dash-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.dash-kicker { color: var(--portal-green); font-weight: 700; font-size: .82rem; }
.dash-hello { font-size: clamp(1.5rem, 2vw, 2rem); margin: .1rem 0 .2rem; }
.dash-hero p { margin: 0; color: var(--portal-muted); }
.dash-hero-net {
    background: linear-gradient(160deg, #0d4a34, #008767);
    color: #fff;
    border-radius: 18px;
    padding: .85rem 1.1rem;
    min-width: 180px;
}
.dash-hero-net span { display: block; opacity: .8; font-size: .8rem; }
.dash-hero-net strong { font-size: 1.45rem; }
.dash-stat {
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 18px;
    padding: .95rem 1rem 1rem;
    box-shadow: 0 16px 36px -28px rgba(27, 67, 50, .8);
    min-height: 132px;
}
.dash-stat small, .dash-stat em { display: block; color: var(--portal-muted); font-style: normal; }
.dash-stat strong { display: block; font-size: 1.45rem; margin: .15rem 0 .2rem; }
.dash-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: .55rem;
    background: #e7f5f0;
    color: var(--portal-green-dark);
}
.dash-stat.is-amber .dash-stat-icon { background: #fff4e5; color: #b45309; }
.dash-stat.is-rose .dash-stat-icon { background: #ffecec; color: #be123c; }
.dash-stat.is-teal .dash-stat-icon { background: #e6f7f4; color: #0f766e; }
.dash-panel { padding: 1rem 1rem .4rem; }
.dash-panel header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .6rem;
}
.dash-panel h2 { font-size: 1.05rem; margin: 0; font-family: "Hind Siliguri", sans-serif; font-weight: 700; }
.dash-panel header p { margin: .1rem 0 0; color: var(--portal-muted); font-size: .82rem; }
.dash-panel header a { color: var(--portal-green-dark); font-weight: 700; text-decoration: none; font-size: .88rem; }
.dash-chart { position: relative; height: 230px; }
.dash-chart-tall { height: 280px; }
.dash-chart-short { height: 210px; }
.dash-progress {
    height: 12px;
    background: #e7f0ec;
    border-radius: 99px;
    overflow: hidden;
    margin: .2rem 0 1rem;
}
.dash-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0d4a34, #26a07f);
    border-radius: inherit;
}
.dash-progress-label { color: var(--portal-green-dark); font-size: 1.2rem; }
.dash-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-bottom: .8rem; }
.dash-split small { color: var(--portal-muted); }
.dash-split strong { display: block; }
.dash-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.dash-actions a {
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 16px;
    padding: .8rem .7rem;
    text-decoration: none;
    color: var(--portal-ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.dash-actions a:hover { border-color: var(--portal-green); color: var(--portal-green-dark); }
.dash-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .7rem;
    align-items: center;
    padding: .75rem .15rem;
    border-top: 1px solid var(--portal-line);
    color: inherit;
    text-decoration: none;
}
.dash-row strong, .dash-row small { display: block; }
.dash-row small { color: var(--portal-muted); }
.dash-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e7f5f0;
    color: var(--portal-green-dark);
    font-weight: 700;
}
.dash-avatar.is-due { background: #ffecec; color: #be123c; }

@media (max-width: 991.98px) {
    .dash-hero { flex-direction: column; align-items: stretch; }
    .dash-hero-net { min-width: 0; }
    .dash-actions { grid-template-columns: 1fr 1fr; }
    .dash-chart-tall, .dash-chart { height: 220px; }
}

.swal2-popup.portal-swal-toast {
    font-family: "Hind Siliguri", sans-serif;
    font-size: .9rem;
}

.portal-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.portal-lock-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.portal-lock-overlay[hidden] {
    display: none !important;
}

body.portal-lock-open {
    overflow: hidden;
}

.portal-lock-modal {
    position: relative;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 20px;
    padding: 1.35rem 1.25rem 1.15rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 135, 103, .08);
    text-align: center;
    overflow: hidden;
}

.portal-lock-modal-glow {
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 55%;
    background: radial-gradient(ellipse, rgba(0, 135, 103, .14) 0%, transparent 70%);
    pointer-events: none;
}

.portal-lock-modal-icon {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto .75rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(145deg, #008767, #006b52);
    box-shadow: 0 8px 20px rgba(0, 135, 103, .35);
}

.portal-lock-modal-title {
    position: relative;
    margin: 0 0 .45rem;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: "Hind Siliguri", sans-serif;
    color: #0f172a;
}

.portal-lock-modal-lead {
    position: relative;
    margin: 0 0 .85rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--portal-muted);
}

.portal-lock-modal-meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    justify-content: center;
    margin-bottom: .85rem;
    font-size: .75rem;
    font-weight: 600;
    color: #334155;
}

.portal-lock-modal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
}

.portal-lock-modal-points {
    position: relative;
    list-style: none;
    margin: 0 0 1rem;
    padding: .65rem .75rem;
    text-align: left;
    border-radius: 12px;
    background: #f8faf9;
    border: 1px solid var(--portal-line);
    font-size: .8rem;
}

.portal-lock-modal-points li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    color: #475569;
}

.portal-lock-modal-points li:last-child {
    margin-bottom: 0;
}

.portal-lock-modal-points li i.bi-check2 {
    color: var(--portal-green);
    margin-top: 2px;
}

.portal-lock-modal-points li i.bi-x-lg {
    color: #dc2626;
    font-size: .7rem;
    margin-top: 4px;
}

.portal-lock-modal-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (min-width: 992px) {
    .portal-main { margin-left: var(--portal-side); }
    .portal-content { padding: 1.4rem 1.6rem 2rem; max-width: none; }
    .portal-bottom { display: none; }
    .portal-page-head-text { display: block; }
    .portal-page-action-wrap {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: auto;
        max-width: none;
    }
    .portal-page-action-wrap .btn-portal {
        width: auto;
        min-height: auto;
        box-shadow: none;
    }
    .portal-content:has(.portal-page-action-wrap) {
        padding-bottom: 2rem;
    }
}

@media (max-width: 991.98px) {
    .portal-sidebar:not(.shell-sidebar) { display: none; }
    .portal-profile-name, .portal-profile-toggle .bi-chevron-down { display: none; }
    .portal-profile-toggle { padding-right: .2rem; }
    .portal-topbar .desktop-only { display: none !important; }
    .portal-table { display: none; }
    .plan-grid { grid-template-columns: 1fr 1fr; }
    .auth-page-center { padding: 1.5rem 1rem 2rem; justify-content: flex-start; padding-top: 2rem; }
    .auth-card { padding: 1.5rem 1.25rem 1.35rem; border-radius: 20px; }
    .pin-field {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pin-toggle {
        min-width: 48px;
    }
    .auth-page-bg__orb--3 { display: none; }
    .auth-page-bg__grid { opacity: 0.22; background-size: 28px 28px; }

    .portal-page-head-text { display: none; }
    .portal-page-head:has(.portal-page-action) {
        margin-bottom: 0;
    }
    .portal-page-head--mobile-action-bar .portal-page-action-wrap {
        display: none;
    }
    .portal-page-head--mobile-action-bar:has(.portal-page-action) {
        margin-bottom: 0;
        min-height: 0;
    }
    .portal-page-action-wrap {
        position: fixed;
        left: var(--portal-page-x);
        right: var(--portal-page-x);
        bottom: calc(var(--portal-nav-inset) + env(safe-area-inset-bottom) + 8px);
        z-index: 1025;
    }
    .portal-page-action-wrap .btn-portal {
        width: 100%;
        box-shadow: 0 8px 24px rgba(0, 135, 103, .35);
    }
    .portal-content:has(.portal-page-action-wrap) {
        padding-bottom: calc(var(--portal-nav-inset) + 56px + env(safe-area-inset-bottom));
    }

    .portal-content:has(.portal-page-head--mobile-action-bar) {
        padding-bottom: calc(var(--portal-nav-inset) + env(safe-area-inset-bottom) + 12px);
    }

    .portal-content .form-control,
    .portal-content .form-select {
        min-height: 42px;
        border-radius: var(--portal-radius-input);
        border-color: var(--portal-line);
    }

    .portal-segment {
        flex-wrap: nowrap;
    }

    .portal-filter-card .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Subscription (Flutter SubscriptionScreen parity) */
.portal-sub-section-label {
    font-size: .78rem;
    font-weight: 800;
    color: var(--portal-muted);
    letter-spacing: .02em;
    margin-bottom: .5rem;
}

.portal-sub-renew-card {
    border-radius: 12px;
    padding: .85rem 1rem;
    border: 1px solid transparent;
}

.portal-sub-renew-card.is-pending {
    background: rgba(0, 135, 103, .08);
    border-color: rgba(0, 135, 103, .28);
    color: #065f46;
}

.portal-sub-renew-card.is-rejected {
    background: rgba(220, 38, 38, .06);
    border-color: rgba(220, 38, 38, .25);
    color: #991b1b;
}

.portal-sub-current-banner {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    margin-bottom: .65rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--portal-green-soft), rgba(0, 135, 103, .12));
    border: 1px solid rgba(0, 135, 103, .16);
}

.portal-sub-current-banner .portal-sub-verified {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .85);
    display: grid;
    place-items: center;
    color: var(--portal-green);
    flex-shrink: 0;
}

.portal-sub-plan-card {
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 14px;
    padding: .7rem .75rem;
    margin-bottom: .5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.portal-sub-plan-card.is-popular {
    border-color: rgba(0, 135, 103, .35);
    box-shadow: 0 6px 16px rgba(0, 135, 103, .08);
}

.portal-sub-plan-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.portal-sub-plan-price {
    color: var(--portal-green);
    font-weight: 900;
    font-size: 1.125rem;
    line-height: 1.1;
}

.portal-sub-plan-price small {
    font-size: .68rem;
    font-weight: 600;
    color: var(--portal-muted);
}

.portal-sub-badge-popular {
    display: inline-block;
    font-size: .58rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: #fff1e0;
    border: 1px solid rgba(245, 158, 11, .35);
    color: #c2410c;
    vertical-align: middle;
    margin-left: 4px;
}

.portal-sub-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--portal-muted);
    background: var(--portal-surface-muted, #f4f6f5);
    padding: 3px 8px;
    border-radius: 7px;
    margin: 0 4px 4px 0;
}

.portal-sub-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 600;
    background: var(--portal-surface-muted, #f4f6f5);
    padding: 4px 8px;
    border-radius: 8px;
    margin: 0 4px 4px 0;
}

.portal-sub-info-pill i {
    color: var(--portal-green);
    font-size: .75rem;
}

.portal-sub-row-card {
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    padding: .55rem .75rem;
    margin-bottom: .35rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.portal-sub-status-chip {
    font-size: .65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.portal-sub-status-chip.is-success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.portal-sub-status-chip.is-pending { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.portal-sub-status-chip.is-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.portal-sub-status-chip.is-neutral { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

.portal-sub-badge-active {
    font-size: .58rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
    margin-left: 4px;
}

.portal-sub-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .35);
}

.portal-sub-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    max-height: 92vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
}

.portal-sub-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: var(--portal-line);
    margin: 8px auto 0;
}

.portal-sub-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: .65rem 1rem .5rem;
    border-bottom: 1px solid var(--portal-line);
}

.portal-sub-sheet-body {
    padding: .75rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.portal-sub-sheet-foot {
    padding: .65rem 1rem 1rem;
    border-top: 1px solid var(--portal-line);
}

.portal-sub-bkash-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem .75rem;
    border-radius: 12px;
    background: rgba(226, 19, 110, .06);
    border: 1px solid rgba(226, 19, 110, .18);
}

.portal-sub-bkash-label {
    display: block;
    font-weight: 800;
    font-size: .72rem;
    color: #e2136e;
    margin-bottom: 2px;
}

.portal-sub-bkash-box strong {
    font-size: 1rem;
    letter-spacing: .03em;
}

.portal-sub-bkash-copy {
    color: #e2136e !important;
}

.portal-sub-features-compact {
    padding: .65rem .7rem;
    border-radius: 12px;
    background: var(--portal-surface-muted, #f4f6f5);
}

.portal-sub-features-compact ul {
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
}

.portal-sub-features-compact li {
    display: flex;
    gap: 6px;
    font-size: .75rem;
    margin-bottom: 4px;
    line-height: 1.35;
}

.portal-sub-features-compact li i {
    color: #059669;
    margin-top: 2px;
}

.portal-sub-quote-box {
    padding: .65rem .75rem;
    border-radius: 12px;
    background: var(--portal-surface-muted, #f4f6f5);
    font-size: .8rem;
}

.portal-sub-quote-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-weight: 600;
}

.portal-sub-quote-row.is-total {
    font-weight: 800;
    color: var(--portal-green);
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--portal-line);
}

body.portal-sub-sheet-open {
    overflow: hidden;
}

@media (min-width: 992px) {
    .portal-sub-sheet {
        left: 50%;
        right: auto;
        bottom: 50%;
        transform: translate(-50%, 50%);
        width: min(440px, 92vw);
        max-height: 85vh;
        border-radius: 16px;
    }

    .portal-sub-sheet-handle {
        display: none;
    }
}

/* Directory (Flutter building / flat / tenant lists) */
.portal-dir-stack {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.portal-dir-buildings-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.portal-dir-count {
    font-size: .82rem;
    font-weight: 700;
    color: var(--portal-muted);
}

.portal-building-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.portal-building-card.is-watermark .portal-building-stats {
    border-top-width: 2px;
    border-top-color: rgba(0, 135, 103, .35);
}

.portal-building-card-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    padding: .75rem .45rem .6rem .75rem;
}

.portal-building-card-tap {
    display: flex;
    gap: .65rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.portal-card-menu {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.portal-card-menu-btn {
    border: 0;
    background: transparent;
    color: var(--portal-muted);
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.portal-card-menu-btn:hover {
    background: rgba(0, 0, 0, .05);
    color: #334155;
}

.portal-card-dropdown {
    font-size: .82rem;
    font-family: "Hind Siliguri", sans-serif;
    min-width: 11rem;
    border-radius: 10px;
    border-color: var(--portal-line);
    padding: .35rem 0;
    z-index: 1080;
}

.portal-dir-stack .portal-building-card:has(.dropdown.show),
.portal-dir-stack-tenants .portal-tenant-card:has(.dropdown.show),
.portal-floor-scroll .portal-flat-tile:has(.dropdown.show),
.portal-floor-section:has(.dropdown.show) {
    overflow: visible;
    z-index: 20;
    position: relative;
}

.portal-card-dropdown .dropdown-item {
    font-weight: 600;
    padding: .45rem .85rem;
}

.portal-card-dropdown .dropdown-item i {
    opacity: .85;
}

.portal-building-watermark {
    position: absolute;
    right: .5rem;
    bottom: 0;
    font-size: 4.5rem;
    color: rgba(0, 135, 103, .06);
    pointer-events: none;
}

.portal-building-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.portal-building-body {
    flex: 1;
    min-width: 0;
}

.portal-building-name {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.15;
}

.portal-building-address {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    color: var(--portal-muted);
    margin-top: 4px;
}

.portal-building-type {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    font-size: .62rem;
    font-weight: 700;
}

.portal-building-stats {
    display: flex;
    border-top: 1px solid var(--portal-line);
    text-decoration: none;
    color: inherit;
}

.portal-building-stat {
    flex: 1;
    text-align: center;
    padding: .65rem .25rem;
    border-right: 1px solid var(--portal-line);
}

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

.portal-building-stat i { display: block; font-size: .9rem; margin-bottom: 2px; }

.portal-building-stat strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.portal-building-stat small {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    color: var(--portal-muted);
    margin-top: 2px;
}

.portal-building-filter {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.portal-building-filter-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    display: grid;
    place-items: center;
}

.portal-building-filter-text {
    flex: 1;
    min-width: 0;
}

.portal-building-filter-text small {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    color: var(--portal-muted);
}

.portal-building-filter-select {
    border: 0;
    background: transparent;
    font-weight: 800;
    font-size: .92rem;
    width: 100%;
    padding: 0;
    font-family: inherit;
    color: #0f172a;
}

.portal-building-filter-count {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    font-size: .68rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.portal-building-filter-chevron {
    color: var(--portal-muted);
}

.portal-floor-section {
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
    margin-bottom: .65rem;
}

.portal-floor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .65rem;
    border-bottom: 1px solid var(--portal-line);
}

.portal-floor-head-main {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: inherit;
}

.portal-floor-add {
    flex-shrink: 1;
    min-width: 0;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 10px;
}

.portal-floor-toggle {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--portal-muted);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.portal-floor-body {
    position: relative;
}

.portal-floor-section.is-collapsed .portal-floor-body {
    display: none;
}

.portal-floor-section.is-carousel .portal-floor-scroll {
    padding-left: 2rem;
    padding-right: 2rem;
}

.portal-floor-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border: 1px solid var(--portal-line);
    border-radius: 50%;
    background: #fff;
    color: var(--portal-muted);
    display: grid;
    place-items: center;
    padding: 0;
}

.portal-floor-arrow.is-prev { left: 6px; }
.portal-floor-arrow.is-next { right: 6px; }

.portal-floor-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    display: grid;
    place-items: center;
}

.portal-floor-head strong {
    display: block;
    font-size: .88rem;
    font-weight: 800;
}

.portal-floor-head small {
    font-size: .68rem;
    color: var(--portal-muted);
    font-weight: 600;
}

.portal-floor-scroll {
    display: flex;
    gap: .55rem;
    padding: .65rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.portal-units-directory .portal-floor-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
}

@media (min-width: 768px) {
    .portal-units-directory .portal-floor-scroll {
        grid-template-columns: repeat(auto-fill, minmax(120px, 140px));
    }
}

.portal-units-directory .portal-flat-tile {
    width: 100%;
    max-width: 100%;
    flex: none;
}

.portal-flat-tile {
    flex: 0 0 112px;
    width: 112px;
    height: 128px;
    scroll-snap-align: start;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: .2rem .15rem .35rem;
    text-align: center;
    position: relative;
}

.portal-flat-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 22px;
    padding: 0 .15rem;
}

.portal-flat-tile-tap {
    text-decoration: none;
    color: inherit;
}

.portal-flat-tile-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    padding: 0 .2rem;
}

.portal-flat-tile .portal-card-menu-btn {
    width: 22px;
    height: 22px;
    font-size: .75rem;
}

.portal-flat-tile .portal-card-dropdown {
    font-size: .75rem;
    min-width: 10rem;
}

.portal-flat-tile.is-booked {
    border-color: rgba(0, 135, 103, .25);
}

.portal-flat-tile-no {
    font-size: .78rem;
    font-weight: 800;
    text-align: left;
    padding-left: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-flat-tile-badge {
    width: 30px;
    height: 30px;
    margin: .15rem auto;
    border-radius: 8px;
    background: #f4f6f5;
    color: var(--portal-muted);
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: .85rem;
}

.portal-flat-tile.is-booked .portal-flat-tile-badge {
    background: var(--portal-green-soft);
    color: var(--portal-green);
}

.portal-flat-tile-status {
    font-size: .62rem;
    font-weight: 700;
    color: var(--portal-muted);
    line-height: 1.15;
    min-height: 1.4rem;
    overflow: hidden;
}

.portal-flat-tile.is-booked .portal-flat-tile-status {
    color: var(--portal-green-dark);
}

.portal-flat-tile-rent {
    margin-top: auto;
    font-size: .72rem;
    font-weight: 800;
}

.portal-tenant-toolbar-search {
    display: flex;
    gap: .5rem;
    align-items: stretch;
    margin-bottom: .55rem;
}

.portal-tenant-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    padding: 0 .75rem;
}

.portal-tenant-filters {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.portal-tenant-filter-scroll {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    flex: 1;
}

.portal-tenant-filter-pill {
    border: 1px solid var(--portal-line);
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: .65rem;
    font-weight: 700;
    color: var(--portal-muted);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.portal-tenant-filter-pill.active {
    border-color: var(--portal-green);
    border-width: 1.2px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
}

.portal-tenant-filter-reset {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--portal-line);
    background: #fff;
    color: var(--portal-muted);
    flex-shrink: 0;
    cursor: pointer;
}

.portal-dir-stack-tenants {
    gap: .4rem;
}

.portal-tenant-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    overflow: hidden;
}

.portal-tenant-card-main {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    padding: .6rem .4rem .45rem .55rem;
}

.portal-tenant-card-tap {
    display: flex;
    gap: .5rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.portal-tenant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.portal-tenant-card-body {
    flex: 1;
    min-width: 0;
}

.portal-tenant-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.portal-tenant-name-row strong {
    font-size: .88rem;
    font-weight: 800;
}

.portal-tenant-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 700;
}

.portal-tenant-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.portal-tenant-status.is-active { background: #d1fae5; color: #059669; }
.portal-tenant-status.is-active .portal-tenant-status-dot { background: #059669; }
.portal-tenant-status.is-expired { background: #ffedd5; color: #ea580c; }
.portal-tenant-status.is-expired .portal-tenant-status-dot { background: #ea580c; }
.portal-tenant-status.is-due { background: #fee2e2; color: #dc2626; }
.portal-tenant-status.is-due .portal-tenant-status-dot { background: #dc2626; }
.portal-tenant-status.is-inactive { background: #f3f4f6; color: #6b7280; }
.portal-tenant-status.is-inactive .portal-tenant-status-dot { background: #6b7280; }

.portal-tenant-details {
    margin-top: 4px;
}

.portal-tenant-detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    color: var(--portal-muted);
    line-height: 1.2;
}

.portal-tenant-phone-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 .55rem .45rem;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--portal-green-soft);
}

.portal-tenant-phone-bar > i {
    color: var(--portal-green-dark);
    font-size: .85rem;
}

.portal-tenant-phone-copy {
    flex: 1;
    border: 0;
    background: transparent;
    text-align: left;
    font-weight: 800;
    font-size: .75rem;
    color: var(--portal-secondary, #c45c00);
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.portal-tenant-phone-call {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--portal-green);
    color: #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: .75rem;
}

.portal-tenant-actions {
    display: flex;
    border-top: 1px solid var(--portal-line);
}

.portal-tenant-actions a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--portal-muted);
    padding: 6px 2px;
    font-size: .58rem;
    font-weight: 600;
    border-right: 1px solid var(--portal-line);
}

.portal-tenant-actions a:last-child { border-right: 0; }

.portal-tenant-actions a i {
    display: block;
    font-size: .95rem;
    margin-bottom: 2px;
}

.portal-unit-form-card .form-label {
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.portal-tenant-form-section {
    padding: .65rem .75rem;
    border: 1px solid rgba(0, 135, 103, 0.12);
    border-radius: 14px;
    background: rgba(0, 135, 103, 0.03);
}

.portal-tenant-form-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    font-weight: 800;
    color: var(--portal-green-dark);
    margin: 0 0 .65rem;
}

.portal-tenant-form-section-title .bi {
    font-size: 1rem;
    opacity: .85;
}

.portal-segment-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.portal-segment-pill {
    flex: 1 1 calc(50% - .35rem);
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.portal-segment-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.portal-segment-pill span {
    display: block;
    text-align: center;
    font-size: .76rem;
    font-weight: 700;
    padding: .5rem .45rem;
    border-radius: 10px;
    border: 1px solid var(--portal-line);
    background: #fff;
    color: var(--portal-muted);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.portal-segment-pill input:checked + span {
    background: var(--portal-green-soft);
    border-color: rgba(0, 135, 103, 0.25);
    color: var(--portal-green-dark);
}

.portal-tenant-rent-panel {
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 135, 103, .16);
    background: rgba(0, 135, 103, .05);
}

.portal-tenant-rent-panel.is-warning {
    border-color: rgba(217, 119, 6, .28);
    background: rgba(255, 247, 237, .9);
}

.portal-tenant-rent-panel.is-danger {
    border-color: rgba(220, 38, 38, .22);
    background: rgba(254, 226, 226, .7);
}

.portal-tenant-rent-list {
    margin: 0;
    padding-left: 1.05rem;
    color: var(--portal-text);
    font-size: .78rem;
}

.portal-tenant-rent-choice {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .35rem 0 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--portal-text);
    cursor: pointer;
}

.portal-tenant-rent-choice input {
    margin-top: .15rem;
}

.portal-charge-card {
    margin-top: .15rem;
    padding: .7rem .7rem .6rem;
    border: 1px solid rgba(0, 135, 103, .14);
    border-radius: 12px;
    background: #fff;
}

.portal-charge-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

.portal-charge-head strong {
    display: block;
    font-size: .82rem;
    font-weight: 800;
    color: var(--portal-ink, #1a2e28);
}

.portal-charge-head small {
    display: block;
    margin-top: .1rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--portal-muted);
    line-height: 1.3;
}

.portal-charge-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    border: 0;
    border-radius: 999px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
    font-size: .72rem;
    font-weight: 800;
    padding: .38rem .7rem;
}

.portal-charge-add:hover { background: #d7efe8; }

.portal-charge-empty,
.portal-charge-total {
    margin: .55rem 0 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--portal-muted);
}

.portal-charge-total {
    color: var(--portal-green-dark);
    font-weight: 800;
}

.portal-other-bill-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(6.2rem, .75fr) 34px;
    gap: .45rem;
    align-items: end;
    margin-top: .55rem;
}

.portal-other-bill-row .sys-field { margin-bottom: 0; }

.portal-other-bill-row .sys-label {
    font-size: .72rem;
    margin-bottom: .25rem;
}

.portal-charge-prefix {
    display: grid;
    place-items: center;
    padding-left: .7rem;
    color: var(--portal-green-dark);
    font-weight: 800;
    font-size: .85rem;
}

.portal-charge-amount .sys-input { padding-left: .35rem; }

.portal-other-bill-remove {
    width: 34px;
    height: var(--sys-h, 46px);
    border: 0;
    border-radius: 10px;
    background: #fff1f2;
    color: #be123c;
    display: grid;
    place-items: center;
    padding: 0;
}

.portal-other-bill-remove:hover { background: #ffe4e6; }

@media (max-width: 460px) {
    .portal-other-bill-row {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .portal-charge-amount { grid-column: 1; }

    .portal-other-bill-remove {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

.portal-unit-form-actions {
    margin-top: .5rem;
    padding-top: .25rem;
}

/* Entity modal — footer actions */
.portal-unit-modal .portal-unit-form {
    padding-bottom: 0.15rem;
}

.portal-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0.65rem;
    margin-top: 1.35rem;
    padding: 1rem 0 0.5rem;
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 22%, #fff 100%);
    border-top: 1px solid rgba(0, 135, 103, 0.1);
}

.portal-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.6rem 1rem;
    border-radius: 14px;
    font-family: "Hind Siliguri", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.portal-modal-btn .bi {
    font-size: 1.05rem;
    opacity: 0.92;
}

.portal-modal-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.portal-modal-btn--ghost {
    background: #fff;
    color: var(--portal-ink, #1a2e28);
    border: 1.5px solid #dfe8e4;
    box-shadow: 0 1px 2px rgba(1, 44, 36, 0.05);
}

.portal-modal-btn--ghost:hover {
    background: #f4faf8;
    border-color: #b8d4cb;
    color: var(--portal-forest, #012c24);
}

.portal-modal-btn--primary {
    position: relative;
    border: none;
    color: #fff;
    background: linear-gradient(165deg, #00a882 0%, var(--portal-green, #008767) 55%, #007058 100%);
    box-shadow: 0 4px 16px rgba(0, 135, 103, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.portal-modal-btn--primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(0, 135, 103, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    filter: brightness(1.03);
}

.portal-modal-btn--primary:disabled,
.portal-modal-btn.is-loading {
    cursor: wait;
    pointer-events: none;
}

.portal-modal-btn--primary.is-loading {
    opacity: 1;
    color: transparent;
}

.portal-modal-btn--primary.is-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.625rem 0 0 -0.625rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: portal-spin 0.65s linear infinite;
}

.portal-modal-body--busy .portal-unit-form {
    pointer-events: none;
    user-select: none;
}

.portal-modal-busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(2px);
}

/* —— Home dashboard (Flutter parity) —— */
.dash-home {
    margin: calc(-1 * var(--portal-page-x)) calc(-1 * var(--portal-page-x)) 0;
    padding-bottom: .5rem;
}

.dash-home-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: var(--portal-page-x);
    padding: .65rem .75rem;
    background: rgba(190, 18, 60, .08);
    border-radius: 10px;
    font-size: .82rem;
    color: #be123c;
}

.dash-home-error-retry {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #be123c;
    font-weight: 700;
    font-size: .82rem;
}

.dash-home-hero {
    position: relative;
    background: linear-gradient(135deg, var(--portal-green) 0%, var(--portal-green-dark) 100%);
    color: #fff;
    overflow: hidden;
}

.dash-home-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image: repeating-linear-gradient(
        -12deg,
        transparent,
        transparent 6px,
        rgba(255, 255, 255, .06) 6px,
        rgba(255, 255, 255, .06) 7px
    );
    pointer-events: none;
}

.dash-home-hero-inner {
    position: relative;
    padding: .65rem var(--portal-page-x) 1.1rem;
}

.dash-home-hero-top {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.dash-home-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.dash-home-hero-text { flex: 1; min-width: 0; }

.dash-home-greet {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
}

.dash-home-name {
    margin: .1rem 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-home-date {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
}

.dash-home-refresh {
    border: 0;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}

.dash-home-org {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .45rem .65rem;
    background: rgba(255, 255, 255, .12);
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
}

.dash-home-org span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-home-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: -10px var(--portal-page-x) 0;
    position: relative;
    z-index: 2;
}

.dash-home-stat {
    background: #fff;
    border-radius: 10px;
    padding: .45rem .35rem .5rem;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
}

.dash-home-stat i {
    font-size: .95rem;
    color: var(--portal-green);
}

.dash-home-stat.is-secondary i { color: var(--portal-forest); }
.dash-home-stat.is-secondary strong { color: var(--portal-forest); }

.dash-home-stat strong {
    display: block;
    margin-top: .2rem;
    font-size: .95rem;
    font-weight: 900;
    color: var(--portal-green);
    line-height: 1;
}

.dash-home-stat small {
    display: block;
    margin-top: .15rem;
    font-size: .62rem;
    font-weight: 600;
    color: var(--portal-muted);
    line-height: 1.1;
}

.dash-home-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
    margin: .65rem var(--portal-page-x) 0;
}

.dash-home-chart-card {
    padding: .65rem .7rem .55rem;
    border-radius: 12px;
    border-color: rgba(0, 135, 103, .08);
}

.dash-home-chart-card--wide {
    grid-column: 1 / -1;
}

.dash-home-chart-head {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-bottom: .45rem;
}

.dash-home-chart-head h2 {
    margin: 0;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--portal-forest);
}

.dash-home-chart-head p {
    margin: .12rem 0 0;
    font-size: .68rem;
    font-weight: 600;
    color: var(--portal-muted);
    line-height: 1.25;
}

.dash-home-chart-canvas {
    position: relative;
    height: 168px;
}

.dash-home-chart-canvas--donut {
    height: 150px;
}

.dash-home-chart-canvas--short {
    height: 120px;
}

.dash-home-chart-donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    font-size: .62rem;
    font-weight: 800;
    color: var(--portal-green-dark);
    text-align: center;
    padding: 0 2rem;
    line-height: 1.2;
}

.dash-home-chart-legend {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
}

.dash-home-chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    font-weight: 600;
    color: var(--portal-muted);
}

.dash-home-chart-legend li span {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.dash-home-chart-legend li strong {
    color: var(--portal-forest);
    font-weight: 800;
}

@media (min-width: 768px) {
    .dash-home-charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-home-chart-card--wide {
        grid-column: 1 / -1;
    }
}

.dash-home-setup {
    margin: .75rem var(--portal-page-x) 0;
    padding: .55rem .65rem;
    border-radius: 12px;
    border-color: rgba(0, 135, 103, .08);
}

.dash-home-setup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.dash-home-setup-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 800;
}

.dash-home-tutorials {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    color: var(--portal-green);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
}

.dash-home-setup-badge {
    font-size: .62rem;
    font-weight: 800;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
}

.dash-home-setup-steps {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-top: .5rem;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.dash-home-setup-steps::-webkit-scrollbar { display: none; }

.dash-home-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .55rem;
    border-radius: 8px;
    border: 1px solid var(--portal-line);
    background: var(--portal-surface-muted);
    font-size: .66rem;
    font-weight: 700;
    color: var(--portal-muted);
    text-decoration: none;
    white-space: nowrap;
}

.dash-home-step.is-done {
    background: rgba(229, 244, 241, .65);
    border-color: rgba(0, 135, 103, .18);
    color: var(--portal-green-dark);
}

.dash-home-step i { font-size: .82rem; }

.dash-home-section {
    padding: .65rem var(--portal-page-x) 0;
}

.dash-home-section-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
}

.dash-home-section-head h2 {
    margin: 0;
    flex: 1;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.1;
}

.dash-home-section-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--portal-green-soft);
    display: grid;
    place-items: center;
    color: var(--portal-green);
    font-size: .72rem;
}

.dash-home-section-icon.is-sm { width: 22px; height: 22px; }

.dash-home-section-icon.is-gradient {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(0, 135, 103, .14), var(--portal-green-soft));
}

.dash-home-see-all {
    font-size: .82rem;
    font-weight: 700;
    color: var(--portal-green);
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.dash-home-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.dash-home-quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: .35rem .25rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    text-decoration: none;
    color: var(--portal-ink);
}

.dash-home-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: rgba(229, 244, 241, .9);
    color: var(--portal-green);
    border: 1px solid rgba(0, 135, 103, .12);
}

.dash-home-quick.is-secondary .dash-home-quick-icon {
    background: rgba(212, 242, 232, .85);
    color: var(--portal-forest);
    border-color: rgba(45, 79, 65, .12);
}

.dash-home-quick-label {
    margin-top: .25rem;
    font-size: .68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.05;
}

.dash-home-slider-wrap {
    padding: .75rem var(--portal-page-x) 0;
}

.dash-home-slider {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
    background: #fff;
    aspect-ratio: 16 / 9;
}

.dash-home-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.dash-home-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.dash-home-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.dash-home-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: .5rem;
}

.dash-home-slider-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 135, 103, .25);
    transition: width .22s ease, background .22s ease;
}

.dash-home-slider-dots span.is-active {
    width: 18px;
    background: var(--portal-green);
}

.dash-home-summary {
    margin: .55rem var(--portal-page-x) 0;
    padding: .65rem .75rem;
    border-radius: 12px;
}

.dash-home-summary-head {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.dash-home-summary-head h2 {
    margin: 0;
    flex: 1;
    font-size: .85rem;
    font-weight: 800;
}

.dash-home-period {
    font-size: .68rem;
    font-weight: 700;
    color: var(--portal-muted);
    padding: .15rem .4rem;
    border: 1px solid var(--portal-line);
    border-radius: 6px;
    background: var(--portal-bg);
}

.dash-home-summary-main {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
}

.dash-home-collected {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--portal-green);
    line-height: 1;
}

.dash-home-collected-label {
    margin: .15rem 0 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--portal-muted);
}

.dash-home-ring {
    --dash-p: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: conic-gradient(var(--portal-green) calc(var(--dash-p) * 1%), var(--portal-green-soft) 0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
}

.dash-home-ring::before {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
}

.dash-home-ring span {
    position: relative;
    z-index: 1;
    font-size: .62rem;
    font-weight: 800;
    color: var(--portal-green);
}

.dash-home-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: .65rem;
}

.dash-home-metric {
    text-align: center;
    padding: .4rem .25rem;
    border-radius: 8px;
}

.dash-home-metric i { font-size: .82rem; }

.dash-home-metric strong {
    display: block;
    margin-top: .15rem;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.dash-home-metric small {
    display: block;
    margin-top: .15rem;
    font-size: .58rem;
    font-weight: 600;
    color: var(--portal-muted);
    line-height: 1.05;
}

.dash-home-metric.is-expected { background: rgba(212, 242, 232, .45); color: var(--portal-forest); }
.dash-home-metric.is-expense { background: rgba(254, 226, 226, .45); color: #dc2626; }
.dash-home-metric.is-outstanding { background: rgba(255, 237, 213, .45); color: #b45309; }

.dash-home-due {
    padding: .85rem var(--portal-page-x) 0;
}

.dash-home-due-card {
    display: flex;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    margin-bottom: 6px;
    overflow: hidden;
}

.dash-home-due-accent {
    width: 3px;
    flex-shrink: 0;
    background: #dc2626;
}

.dash-home-due-card.is-partial .dash-home-due-accent { background: #d97706; }

.dash-home-due-body { flex: 1; min-width: 0; padding: .5rem .55rem; }

.dash-home-due-top {
    display: block;
    text-decoration: none;
    color: inherit;
}

.dash-home-due-title {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.dash-home-due-title strong {
    flex: 1;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-home-status {
    font-size: .62rem;
    font-weight: 700;
    padding: .12rem .35rem;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
}

.dash-home-due-card.is-partial .dash-home-status {
    background: #fffbeb;
    color: #b45309;
}

.dash-home-due-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .25rem;
    min-width: 0;
}

.dash-home-month {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .58rem;
    font-weight: 700;
    color: var(--portal-green);
    padding: .12rem .35rem;
    border-radius: 999px;
    background: var(--portal-green-soft);
    border: 1px solid rgba(0, 135, 103, .16);
    flex-shrink: 0;
}

.dash-home-due-unit {
    font-size: .62rem;
    font-weight: 600;
    color: var(--portal-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-home-due-payrow {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    padding: .35rem .4rem;
    background: rgba(240, 244, 244, .55);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 8px;
}

.dash-home-due-amounts {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    text-align: center;
    min-width: 0;
}

.dash-home-due-amounts small {
    display: block;
    font-size: .58rem;
    color: var(--portal-muted);
    font-weight: 600;
}

.dash-home-due-amounts strong {
    display: block;
    font-size: .66rem;
    font-weight: 800;
}

.dash-home-due-amounts strong.is-em { color: #dc2626; }
.dash-home-due-card.is-partial .dash-home-due-amounts strong.is-em { color: #d97706; }

.dash-home-take-pay {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .45rem;
    border-radius: 7px;
    border: 1px solid rgba(45, 79, 65, .4);
    background: rgba(45, 79, 65, .08);
    color: var(--portal-forest);
    font-size: .58rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 380px) {
    .dash-home-take-pay span { display: none; }
    .dash-home-quick-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
    .dash-home {
        margin-left: 0;
        margin-right: 0;
        border-radius: var(--portal-radius-lg);
        overflow: hidden;
    }
    .dash-home-hero-inner,
    .dash-home-stat-strip,
    .dash-home-section,
    .dash-home-slider-wrap,
    .dash-home-summary,
    .dash-home-due,
    .dash-home-setup {
        max-width: 100%;
    }
}

/* Portal dashboard */
.dash-board {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-bottom: 0.35rem;
}

.dash-board-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    background: #fff5f5;
    border: 1px solid rgba(190, 18, 60, 0.15);
    border-radius: var(--portal-radius-input);
    font-size: 0.8125rem;
    color: #be123c;
}

.dash-board-error-retry {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #be123c;
    font-weight: 700;
    font-size: 0.8125rem;
}

.dash-board-welcome {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(0, 135, 103, 0.12);
}

.dash-board-welcome-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--portal-green-dark), var(--portal-green-light));
}

.dash-board-welcome-body {
    padding: 1rem 1rem 0.85rem;
}

.dash-board-welcome-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.dash-board-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--portal-green-soft), #fff);
    border: 1px solid rgba(0, 135, 103, 0.15);
    color: var(--portal-green-dark);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.125rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 135, 103, 0.12);
}

.dash-board-head-text {
    flex: 1;
    min-width: 0;
}

.dash-board-greet {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--portal-muted);
    letter-spacing: 0.01em;
}

.dash-board-name {
    margin: 0.12rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--portal-forest);
}

.dash-board-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--portal-muted);
    line-height: 1.35;
}

.dash-board-org i {
    color: var(--portal-green);
    margin-right: 0.15rem;
}

.dash-board-refresh {
    border: 1px solid var(--portal-line);
    background: #fff;
    color: var(--portal-green-dark);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dash-board-refresh:hover {
    background: var(--portal-green-soft);
    border-color: rgba(0, 135, 103, 0.25);
}

.dash-board-kpis {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0.65rem 0 0;
    border-top: 1px solid var(--portal-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.65rem;
}

.dash-board-kpi {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.dash-board-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--portal-surface-muted);
    color: var(--portal-green-dark);
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.dash-board-kpi-data strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--portal-forest);
    line-height: 1.1;
}

.dash-board-kpi-data small {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--portal-muted);
}

.dash-board-block {
    padding: 1rem 1rem 0.9rem;
}

.dash-board-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.dash-board-block-head h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--portal-forest);
    line-height: 1.25;
}

.dash-board-block-head p {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--portal-muted);
    line-height: 1.35;
}

.dash-board-text-btn {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--portal-green-dark);
    text-decoration: none;
    white-space: nowrap;
}

.dash-board-text-btn--link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.dash-board-pill {
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
}

.dash-board-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.dash-board-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.65rem 0.35rem;
    min-height: 76px;
    border-radius: var(--portal-radius-input);
    border: 1px solid var(--portal-line);
    background: #fff;
    text-decoration: none;
    color: var(--portal-ink);
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dash-board-action:hover {
    border-color: rgba(0, 135, 103, 0.3);
    box-shadow: 0 6px 16px rgba(0, 135, 103, 0.1);
    transform: translateY(-1px);
}

.dash-board-action.is-accent {
    border-color: rgba(0, 135, 103, 0.35);
    background: linear-gradient(180deg, rgba(0, 135, 103, 0.08), #fff 55%);
}

.dash-board-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
    display: grid;
    place-items: center;
    font-size: 1.125rem;
}

.dash-board-action.is-accent .dash-board-action-icon {
    background: var(--portal-green);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 135, 103, 0.25);
}

.dash-board-action-label {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25;
    max-width: 100%;
}

.dash-board-insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.dash-board-finance-panel {
    padding: 0.75rem;
    border-radius: var(--portal-radius-input);
    background: linear-gradient(160deg, #f8fcfb, #fff);
    border: 1px solid rgba(0, 135, 103, 0.1);
}

.dash-board-finance-kicker {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--portal-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-board-collected {
    margin: 0.15rem 0 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--portal-green-dark);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.dash-board-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.65rem 0 0.75rem;
}

.dash-board-progress {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    background: #e8eeec;
    overflow: hidden;
}

.dash-board-progress-bar {
    height: 100%;
    width: calc(var(--dash-p, 0) * 1%);
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--portal-green-dark), var(--portal-green-light));
    transition: width 0.4s ease;
}

.dash-board-progress-pct {
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--portal-green-dark);
    white-space: nowrap;
}

.dash-board-finance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
}

.dash-board-finance div {
    padding: 0.45rem 0.4rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--portal-line);
    text-align: center;
}

.dash-board-finance div.is-warn {
    border-color: rgba(217, 119, 6, 0.2);
    background: #fffbeb;
}

.dash-board-finance div.is-muted {
    background: #f8fafc;
}

.dash-board-finance dt {
    margin: 0;
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--portal-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-board-finance dd {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--portal-forest);
}

.dash-board-finance div.is-warn dd { color: #b45309; }
.dash-board-finance div.is-muted dd { color: #64748b; }

.dash-board-chart-panel {
    padding: 0.65rem 0.5rem 0.25rem;
    border-radius: var(--portal-radius-input);
    border: 1px solid var(--portal-line);
    background: #fff;
}

.dash-board-chart-title {
    margin: 0 0 0.35rem 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--portal-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-board-chart-wrap {
    position: relative;
    height: 168px;
}

.dash-board-setup-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dash-board-setup .dash-home-step {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--portal-line);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--portal-ink);
    background: var(--portal-surface-muted);
}

.dash-board-setup .dash-home-step.is-done {
    opacity: 0.5;
}

.dash-board-due-list .dash-board-due-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--portal-line);
}

.dash-board-due-list .dash-board-due-row:last-child {
    border-bottom: 0;
}

.dash-board-due-main {
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.dash-board-due-main strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--portal-forest);
}

.dash-board-due-main span {
    display: block;
    font-size: 0.6875rem;
    color: var(--portal-muted);
    margin-top: 0.12rem;
}

.dash-board-due-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.dash-board-due-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.18rem 0.45rem;
    border-radius: 6px;
    background: #fef2f2;
    color: #b91c1c;
}

.dash-board-due-side strong {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--portal-forest);
}

.dash-board-due-pay {
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    background: var(--portal-green);
    color: #fff;
    text-decoration: none;
}

@media (min-width: 480px) {
    .dash-board-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 399px) {
    .dash-board-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .dash-board-insights-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: stretch;
    }

    .dash-board-chart-wrap {
        height: 188px;
    }
}

/* Unit create / edit modal */
.portal-unit-modal-root[hidden] {
    display: none !important;
}

.portal-unit-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(6, 40, 32, 0.45);
    backdrop-filter: blur(2px);
}

.portal-unit-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1065;
    max-height: 92vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
}

.portal-unit-modal-handle {
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: var(--portal-line);
    margin: 8px auto 0;
}

.portal-unit-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem 0.65rem;
    border-bottom: 1px solid var(--portal-line);
}

.portal-unit-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    font-family: "Hind Siliguri", sans-serif;
    color: var(--portal-forest);
}

.portal-unit-modal-close {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f0f5f3;
    color: #3d524c;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.portal-unit-modal-close:hover {
    background: #e3eeea;
    border-color: #c5dbd3;
    color: var(--portal-forest, #012c24);
}

.portal-unit-modal-close:active {
    transform: scale(0.94);
}

.portal-unit-modal-body {
    position: relative;
    padding: 0.85rem 1rem 0.65rem;
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

body.portal-unit-modal-open {
    overflow: hidden;
}

.portal-expense-list-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.portal-expense-list-meta {
    text-align: center;
    margin-top: 0.35rem;
}

.portal-expense-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 0.35rem 0 0.5rem;
}

.portal-expense-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    font-family: "Hind Siliguri", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--portal-green, #008767);
    background: #fff;
    border: 1px solid rgba(0, 135, 103, 0.22);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.portal-expense-load-more-btn .bi {
    font-size: 0.72rem;
    opacity: 0.85;
}

.portal-expense-load-more-btn:hover:not(:disabled) {
    background: var(--portal-green-soft, #e8f5f1);
    border-color: rgba(0, 135, 103, 0.35);
}

.portal-expense-load-more-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.portal-expense-empty {
    padding: 2rem 1rem;
}

.portal-expense-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--portal-surface, #fff);
    border: 1px solid var(--portal-border, #e8ecea);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(1, 44, 36, 0.04);
}

.portal-expense-card-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e8f5f1, #d4ede4);
    color: var(--portal-green, #008767);
    font-size: 1.1rem;
}

.portal-expense-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-expense-card-category {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--portal-ink, #012c24);
    margin-bottom: 0.2rem;
}

.portal-expense-card-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--portal-muted, #5f736d);
    line-height: 1.35;
}

.portal-expense-card-meta .bi {
    font-size: 0.72rem;
    opacity: 0.85;
}

.portal-expense-card-muted {
    color: var(--portal-muted, #5f736d);
}

.portal-expense-card-note {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--portal-muted, #5f736d);
    line-height: 1.4;
}

.portal-expense-card-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    text-align: right;
}

.portal-expense-card-amount {
    font-weight: 700;
    font-size: 0.95rem;
    color: #dc2626;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

.portal-app .form-control[type="number"],
.portal-app .form-control[type="tel"],
.portal-app .form-control[type="date"],
.portal-app .form-control[type="datetime-local"],
.portal-app .form-control[type="month"],
.portal-app .form-control[type="week"],
.portal-app .form-control[inputmode="numeric"],
.portal-app .form-control[inputmode="decimal"],
.portal-app .form-control[lang="en"],
.sys-input--latin,
.sys-input[lang="en"],
.portal-sys .sys-input[type="number"],
.portal-sys .sys-input[type="tel"],
.portal-sys .sys-input[type="date"],
.portal-sys .sys-input[type="datetime-local"],
.portal-sys .sys-input[type="month"],
.portal-sys .sys-input[type="week"],
.portal-sys .sys-input[inputmode="numeric"],
.portal-sys .sys-input[inputmode="decimal"] {
    font-variant-numeric: lining-nums tabular-nums;
}

.portal-expense-card-edit {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
}

@media (max-width: 575.98px) {
    .portal-expense-card {
        flex-wrap: wrap;
    }

    .portal-expense-card-side {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.25rem;
        border-top: 1px dashed var(--portal-border, #e8ecea);
    }
}

@media (min-width: 768px) {
    .portal-unit-modal {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(480px, calc(100vw - 2rem));
        max-height: min(90vh, 720px);
        border-radius: 16px;
    }

    .portal-unit-modal-handle {
        display: none;
    }
}

/* Invoice and payment workspace */
.portal-billing-summary {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--portal-border, #e2e8e5);
    border-radius: 12px;
    background: var(--portal-surface-muted, #f7faf8);
}

.portal-billing-summary > span,
.portal-billing-summary small {
    color: var(--portal-muted, #5f736d);
}

.portal-billing-summary-lines {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.55rem;
    margin-top: 0.25rem;
    border-top: 1px dashed var(--portal-border, #e2e8e5);
}

.portal-billing-summary-lines > span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.82rem;
}

.portal-billing-summary-lines > span.is-new strong {
    color: var(--portal-primary, #008767);
}

.portal-extra-charge-head {
    display: grid;
    gap: 0.15rem;
}

.portal-extra-charge-head small {
    color: var(--portal-muted, #5f736d);
    font-size: 0.78rem;
}

.portal-extra-charge-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.3fr) minmax(110px, 0.7fr) auto;
    gap: 0.5rem;
    align-items: start;
}

.portal-garage-period-meta {
    color: var(--portal-muted, #5f736d);
    font-size: 0.78rem;
}

.portal-garage-period-history {
    display: grid;
    gap: 0.3rem;
    padding-top: 0.45rem;
    margin-top: 0.2rem;
    border-top: 1px dashed var(--portal-border, #e2e8e5);
}

.portal-garage-period-history > span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.78rem;
}

.portal-billing-prompt {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    background: #f7faf9;
    color: var(--portal-muted);
    font-size: .78rem;
    font-weight: 600;
}

.portal-billing-prompt i { font-size: 1.1rem; }

.portal-billing-line {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(110px, 0.65fr) minmax(130px, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.portal-billing-line .sys-input {
    min-width: 0;
}

.portal-billing-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--portal-primary-soft, #e8f7f1);
}

.portal-billing-total strong {
    color: var(--portal-primary, #008767);
    font-variant-numeric: lining-nums tabular-nums;
}

.portal-billing-toggle {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border: 1px solid var(--portal-border, #e2e8e5);
    border-radius: 12px;
    cursor: pointer;
}

.portal-billing-toggle input {
    margin-top: 0.2rem;
}

.portal-billing-toggle span {
    display: grid;
    gap: 0.15rem;
}

.portal-billing-toggle small {
    color: var(--portal-muted, #5f736d);
}

.portal-billing-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.portal-billing-kpis > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem;
    border-radius: 10px;
    background: var(--portal-surface-muted, #f7faf8);
}

.portal-billing-kpis span {
    color: var(--portal-muted, #5f736d);
    font-size: 0.75rem;
}

.portal-billing-status {
    align-self: flex-start;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--portal-surface-muted, #f1f5f3);
    color: var(--portal-muted, #5f736d);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.portal-billing-status.is-paid {
    background: var(--portal-primary-soft, #e8f7f1);
    color: var(--portal-primary, #008767);
}

.portal-billing-status.is-overdue {
    background: #fff1f2;
    color: #be123c;
}

.portal-card-section-title {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--portal-border, #e2e8e5);
    font-weight: 700;
}

.portal-billing-list-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.75rem;
    border-bottom: 1px solid var(--portal-border, #e2e8e5);
}

.portal-billing-list-row:last-child {
    border-bottom: 0;
}

.portal-billing-list-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    padding: 0.8rem 0 0.8rem 1rem;
    color: inherit;
    text-decoration: none;
}

.portal-billing-list-main .portal-entity-main {
    display: grid;
    min-width: 0;
    flex: 1;
}

.portal-billing-list-main .portal-entity-main > span {
    overflow: hidden;
    color: var(--portal-muted, #5f736d);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-billing-load-more {
    display: flex;
    justify-content: center;
    padding: 0.85rem;
}

@media (max-width: 575.98px) {
    .portal-billing-line {
        grid-template-columns: minmax(0, 1fr) minmax(100px, 0.55fr) auto;
    }

    .portal-billing-line [data-line-note] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .portal-billing-kpis {
        grid-template-columns: 1fr;
    }

    .portal-billing-list-row {
        align-items: stretch;
        flex-direction: column;
        padding: 0;
    }

    .portal-billing-list-row > .btn {
        align-self: flex-end;
        margin: 0 0.75rem 0.65rem;
    }
}

/* SMS workspace */
.portal-sms-usage {
    display: grid;
    gap: 0.55rem;
}

.portal-sms-usage-row {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr auto;
    gap: 0.65rem;
    align-items: center;
    font-size: 0.78rem;
}

.portal-sms-usage-row > div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--portal-border, #e2e8e5);
}

.portal-sms-usage-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--portal-primary, #008767);
}

.portal-sms-dispatch {
    display: grid;
    gap: 0.35rem;
    cursor: pointer;
}

.portal-sms-packages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.portal-sms-package {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem;
    border: 1px solid var(--portal-border, #e2e8e5);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
}

.portal-sms-package span {
    color: var(--portal-muted, #5f736d);
    font-size: 0.78rem;
}

.portal-sms-package.is-active {
    border-color: var(--portal-primary, #008767);
    background: var(--portal-primary-soft, #e8f7f1);
}

.portal-billing-status.is-failed {
    background: #fff1f2;
    color: #be123c;
}

.portal-billing-status.is-pending,
.portal-billing-status.is-processing {
    background: #fff7ed;
    color: #c2410c;
}

@media (max-width: 575.98px) {
    .portal-sms-packages {
        grid-template-columns: 1fr;
    }
}

/* Flutter-aligned SMS workspace */
.portal-sms-shell {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.portal-sms-top-tabs,
.portal-sms-subnav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
}

.portal-sms-top-tabs {
    position: sticky;
    top: var(--portal-header);
    z-index: 20;
    margin: -0.4rem -0.25rem 1rem;
    border-bottom: 1px solid var(--portal-line);
}

.portal-sms-top-tabs button,
.portal-sms-subnav button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.65rem 0.35rem;
    border: 0;
    color: var(--portal-muted);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
}

.portal-sms-top-tabs button::after {
    position: absolute;
    right: 18%;
    bottom: -1px;
    left: 18%;
    height: 3px;
    border-radius: 4px 4px 0 0;
    background: var(--portal-green);
    content: "";
    opacity: 0;
}

.portal-sms-top-tabs button.is-active,
.portal-sms-subnav button.is-active {
    color: var(--portal-green);
}

.portal-sms-top-tabs button.is-active::after { opacity: 1; }
.portal-sms-panel { animation: portal-sms-fade 0.18s ease; }
.portal-sms-panel[hidden] { display: none !important; }
.portal-sms-subnav { display: none; }

@keyframes portal-sms-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.portal-sms-balance-hero {
    overflow: hidden;
    padding: 1.35rem 1.4rem;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 15%, rgba(72, 199, 155, 0.26), transparent 34%),
        linear-gradient(135deg, #123d31 0%, #1e5a48 100%);
    box-shadow: 0 12px 28px -18px rgba(18, 61, 49, 0.8);
}

.portal-sms-balance-hero > span,
.portal-sms-balance-hero > small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
}

.portal-sms-balance-hero > strong {
    display: block;
    margin: 0.15rem 0;
    font-family: "Tiro Bangla", serif;
    font-size: clamp(2rem, 8vw, 2.8rem);
    line-height: 1.15;
}

.portal-sms-balance-hero hr {
    margin: 1rem 0 0.75rem;
    border-color: rgba(255, 255, 255, 0.18);
}

.portal-sms-balance-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.75rem;
}

.portal-sms-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.8rem;
}

.portal-sms-stat-tile {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem 0.45rem;
    border: 1px solid rgba(0, 135, 103, 0.1);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    box-shadow: 0 3px 12px rgba(31, 70, 58, 0.05);
}

.portal-sms-stat-tile strong {
    color: var(--portal-green);
    font-size: 1.2rem;
}

.portal-sms-stat-tile span {
    color: var(--portal-muted);
    font-size: 0.7rem;
}

.portal-sms-section-title {
    margin: 1.3rem 0 0.55rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
}

.portal-list-card {
    overflow: hidden;
    border: 1px solid rgba(45, 79, 65, 0.08);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(31, 70, 58, 0.05);
}

.portal-sms-usage-card { padding: 0.35rem 1rem; }
.portal-sms-usage-row {
    grid-template-columns: 10px minmax(84px, auto) auto;
    gap: 0.55rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--portal-line);
}
.portal-sms-usage-row:last-child { border-bottom: 0; }
.portal-sms-usage-row > div {
    grid-column: 2 / -1;
    height: 5px;
    margin-top: -0.3rem;
}
.portal-sms-usage-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sms-segment-color);
}

.portal-segment-primary,
.portal-segment-filter {
    display: grid;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 13px;
    background: #eaf1ef;
}
.portal-segment-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-segment-primary--scroll {
    display: flex;
    overflow-x: auto;
    margin-bottom: 0.9rem;
}
.portal-segment-primary--scroll button { flex: 1 0 auto; }
.portal-segment-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0.75rem 0;
    background: transparent;
}
.portal-segment-primary button,
.portal-segment-filter button {
    min-height: 38px;
    padding: 0.45rem 0.65rem;
    border: 0;
    border-radius: 10px;
    color: var(--portal-muted);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
}
.portal-segment-primary button.is-active {
    color: var(--portal-green);
    background: #fff;
    box-shadow: 0 2px 7px rgba(31, 70, 58, 0.1);
}
.portal-segment-filter button {
    min-height: 34px;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    background: #fff;
}
.portal-segment-filter button.is-active {
    border-color: var(--portal-green);
    color: #fff;
    background: var(--portal-green);
}

.portal-sms-dispatch-row {
    position: relative;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem 0.9rem 0.85rem 0;
    border-bottom: 1px solid var(--portal-line);
    cursor: pointer;
}
.portal-sms-dispatch-row:last-child { border-bottom: 0; }
.portal-sms-dispatch-row:hover { background: #fbfdfc; }
.portal-sms-dispatch-accent {
    align-self: stretch;
    border-radius: 0 5px 5px 0;
    background: #f59e0b;
}
.portal-sms-dispatch-accent.is-sent { background: var(--portal-green); }
.portal-sms-dispatch-accent.is-failed { background: #e05252; }
.portal-sms-dispatch-content,
.portal-sms-dispatch-side {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.portal-sms-dispatch-content { gap: 0.12rem; }
.portal-sms-dispatch-content > strong { font-size: 0.86rem; }
.portal-sms-dispatch-content > span {
    color: var(--portal-muted);
    font-size: 0.72rem;
}
.portal-sms-dispatch-content .portal-sms-dispatch-message {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.18rem;
    color: var(--portal-ink);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.portal-sms-dispatch-side {
    align-items: flex-end;
    gap: 0.35rem;
}
.portal-sms-dispatch-side time {
    color: var(--portal-hint);
    font-size: 0.65rem;
    white-space: nowrap;
}
.portal-sms-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    color: #9a6412;
    background: #fff4dd;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-sms-status-chip.is-sent,
.portal-sms-status-chip.is-approved { color: #047857; background: #e7f7f1; }
.portal-sms-status-chip.is-failed,
.portal-sms-status-chip.is-rejected { color: #be123c; background: #fff0f2; }
.portal-sms-retry-link {
    align-self: flex-start;
    padding: 0.2rem 0;
    border: 0;
    color: #b42318;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
}
.portal-sms-history-footer { padding-top: 0.75rem; }
.portal-sms-history-footer small {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--portal-muted);
    text-align: center;
}

.portal-sms-template-editor { padding: 1rem; }
.portal-sms-template-editor textarea {
    border-color: var(--portal-line);
    border-radius: 13px;
    background: #fbfdfc;
}
.portal-sms-choice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.portal-sms-choice-chip {
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    color: var(--portal-muted);
    background: #fff;
    font-size: 0.75rem;
}
.portal-sms-choice-chip.is-active,
.portal-sms-choice-chip:hover {
    border-color: var(--portal-green);
    color: var(--portal-green);
    background: var(--portal-green-soft);
}

.portal-sms-package-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
.portal-sms-package-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem;
    border: 1px solid var(--portal-line);
    border-radius: 15px;
    color: inherit;
    background: #fff;
    text-align: left;
}
.portal-sms-package-card > span:nth-child(2) { display: grid; }
.portal-sms-package-card small { color: var(--portal-muted); }
.portal-sms-package-card > .bi-check-circle-fill { color: #cdd8d4; }
.portal-sms-package-card.is-active {
    border-color: var(--portal-green);
    background: var(--portal-green-soft);
    box-shadow: 0 0 0 2px rgba(0, 135, 103, 0.08);
}
.portal-sms-package-card.is-active > .bi-check-circle-fill { color: var(--portal-green); }
.portal-sms-package-icon,
.portal-sms-credit-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
}
.portal-sms-payment-summary {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
}
.portal-sms-payment-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.portal-sms-bkash-pill {
    width: max-content;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    color: #c2175b;
    background: #fce7f1;
    font-size: 0.72rem;
    font-weight: 700;
}
.portal-sms-how-to-pay {
    padding: 1rem;
    border-radius: 15px;
    background: var(--portal-green-soft);
}
.portal-sms-how-to-pay > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.portal-sms-how-to-pay span {
    display: grid;
    gap: 0.25rem;
    color: var(--portal-forest);
    font-size: 0.7rem;
    text-align: center;
}
.portal-sms-how-to-pay i { font-size: 1.1rem; }
.portal-sms-credit-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--portal-line);
}
.portal-sms-credit-row:last-child { border-bottom: 0; }
.portal-sms-credit-row > span:nth-child(2) { display: grid; }
.portal-sms-credit-row small { color: var(--portal-muted); font-size: 0.7rem; }
.portal-sms-credit-icon.is-negative { color: #be123c; background: #fff0f2; }

.portal-sms-send-page {
    display: grid;
    gap: 0.9rem;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 112px;
}
.portal-sms-send-footer {
    position: fixed;
    right: var(--portal-page-x);
    bottom: 0;
    left: calc(var(--portal-side) + var(--portal-page-x));
    z-index: 25;
    display: grid;
    gap: 0.3rem;
    padding: 0.7rem max(var(--portal-page-x), calc((100vw - var(--portal-side) - 720px) / 2));
    border-top: 1px solid var(--portal-line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}
.portal-sms-send-footer > div { color: var(--portal-muted); font-size: 0.72rem; }
.portal-sms-send-footer > p { margin: 0; color: #be123c; font-size: 0.72rem; }

.portal-sms-sheet {
    position: fixed;
    inset: 0;
    z-index: 1080;
}
.portal-sms-sheet[hidden] { display: none; }
.portal-sms-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 24, 0.48);
    backdrop-filter: blur(2px);
}
.portal-sms-sheet__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(88vh, 680px);
    overflow: auto;
    padding: 0.55rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -15px 45px rgba(11, 30, 24, 0.22);
    animation: portal-sms-sheet-up 0.22s ease;
}
@keyframes portal-sms-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.portal-sms-sheet__grabber {
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 0.65rem;
    border-radius: 99px;
    background: #d3dcda;
}
.portal-sms-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.portal-sms-sheet__head h2 { margin: 0; font-size: 1.05rem; }
.portal-sms-sheet__head p { margin: 0.15rem 0 0; color: var(--portal-muted); font-size: 0.74rem; }
.portal-sms-sheet__body { padding: 1rem 0; }
.portal-sms-sheet-message {
    padding: 1rem;
    border-radius: 14px;
    background: var(--portal-bg);
    white-space: pre-wrap;
}
.portal-sms-sheet-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0.8rem 0;
}
.portal-sms-sheet-details > div {
    padding: 0.65rem;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
}
.portal-sms-sheet-details dt { color: var(--portal-muted); font-size: 0.68rem; }
.portal-sms-sheet-details dd { margin: 0.1rem 0 0; font-weight: 700; }
.portal-sms-receipt-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    border-radius: 12px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
    text-decoration: none;
}
.portal-sms-receipt-link span { flex: 1; }

@media (max-width: 991.98px) {
    .portal-sms-send-footer { left: var(--portal-page-x); bottom: 78px; }
}

@media (max-width: 767.98px) {
    .portal-sms-shell { padding-bottom: 72px; }
    .portal-sms-top-tabs { display: none; }
    .portal-sms-subnav {
        position: fixed;
        right: 0;
        bottom: 78px;
        left: 0;
        z-index: 1028;
        display: grid;
        border-top: 1px solid var(--portal-line);
        box-shadow: 0 -4px 15px rgba(31, 70, 58, 0.07);
    }
    .portal-sms-subnav button {
        min-height: 58px;
        flex-direction: column;
        gap: 0.05rem;
        font-size: 0.66rem;
    }
    .portal-sms-subnav button i { font-size: 1.05rem; }
    .portal-sms-package-list { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
    .portal-sms-sheet__panel {
        right: 1rem;
        bottom: 1rem;
        left: auto;
        width: min(440px, calc(100vw - 2rem));
        border-radius: 24px;
    }
}

/* Flutter-aligned garage workspace */
.portal-garage-workspace {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
}
.portal-garage-tabs {
    position: sticky;
    top: var(--portal-header);
    z-index: 22;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -0.4rem -0.25rem 1rem;
    border-bottom: 1px solid var(--portal-line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}
.portal-garage-tabs a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 50px;
    color: var(--portal-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.portal-garage-tabs a::after {
    position: absolute;
    right: 22%;
    bottom: -1px;
    left: 22%;
    height: 3px;
    border-radius: 4px 4px 0 0;
    background: var(--portal-green);
    content: "";
    opacity: 0;
}
.portal-garage-tabs a.is-active { color: var(--portal-green); }
.portal-garage-tabs a.is-active::after { opacity: 1; }
.portal-garage-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.portal-garage-actionbar h2 {
    margin: 0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}
.portal-garage-actionbar p {
    margin: 0.15rem 0 0;
    color: var(--portal-muted);
    font-size: 0.74rem;
}
.portal-garage-add,
.portal-garage-pdf {
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    border-radius: 13px;
    white-space: nowrap;
}
.portal-garage-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}
.portal-garage-summary-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(0, 135, 103, 0.09);
    border-radius: 14px;
    background: #fff;
}
.portal-garage-summary-item > i {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
}
.portal-garage-summary-item span { display: grid; min-width: 0; }
.portal-garage-summary-item strong { overflow: hidden; font-size: 0.86rem; text-overflow: ellipsis; }
.portal-garage-summary-item small { color: var(--portal-muted); font-size: 0.65rem; }
.portal-garage-toolbar {
    position: sticky;
    top: calc(var(--portal-header) + 50px);
    z-index: 19;
    margin-bottom: 0.8rem;
    padding: 0.65rem;
    border: 1px solid var(--portal-line);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 16px rgba(31, 70, 58, 0.06);
    backdrop-filter: blur(12px);
}
.portal-garage-toolbar .sys-label { font-size: 0.68rem; }
.portal-garage-toolbar .sys-input,
.portal-garage-toolbar .form-select,
.portal-garage-toolbar .form-control { min-height: 38px; }
.portal-garage-type-tabs {
    display: flex;
    align-items: flex-end;
    height: 100%;
    gap: 0.8rem;
}
.portal-garage-type-tabs button {
    position: relative;
    min-height: 38px;
    padding: 0.35rem 0.15rem;
    border: 0;
    color: var(--portal-muted);
    background: transparent;
    font-size: 0.76rem;
    font-weight: 600;
}
.portal-garage-type-tabs button::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: var(--portal-green);
    content: "";
    opacity: 0;
}
.portal-garage-type-tabs button.is-active { color: var(--portal-green); }
.portal-garage-type-tabs button.is-active::after { opacity: 1; }
#garage-spaces-list,
#garage-collections-list { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.portal-garage-space-card,
.portal-garage-collection-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    margin-bottom: 0.65rem;
    padding: 0.9rem;
    border: 1px solid rgba(45, 79, 65, 0.09);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(31, 70, 58, 0.05);
}
.portal-garage-card-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
    font-size: 1.15rem;
}
.portal-garage-card-icon.is-shop { color: #925e0b; background: #fff4dc; }
.portal-garage-card-icon.is-payment { color: #146aa3; background: #e9f5fc; }
.portal-garage-card-main { display: grid; min-width: 0; align-content: start; gap: 0.3rem; }
.portal-garage-card-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.portal-garage-card-heading > strong { font-size: 0.96rem; }
.portal-garage-tag,
.portal-garage-status {
    display: inline-flex;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    color: var(--portal-muted);
    background: #edf2f0;
    font-size: 0.62rem;
    font-weight: 700;
}
.portal-garage-status.is-vacant { color: #047857; background: #e7f7f1; }
.portal-garage-status.is-occupied { color: #1d4ed8; background: #eaf0ff; }
.portal-garage-status.is-inactive { color: #64748b; background: #f1f5f9; }
.portal-garage-status.is-paid { color: #047857; background: #e7f7f1; }
.portal-garage-property,
.portal-garage-collection-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--portal-muted);
    font-size: 0.7rem;
}
.portal-garage-occupant {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.15rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: var(--portal-bg);
}
.portal-garage-occupant > i { color: var(--portal-green); }
.portal-garage-occupant > span { display: grid; min-width: 0; }
.portal-garage-occupant strong { font-size: 0.74rem; }
.portal-garage-occupant small { color: var(--portal-muted); font-size: 0.64rem; }
.portal-garage-occupant.is-empty { color: var(--portal-muted); font-size: 0.7rem; }
.portal-garage-card-side {
    display: flex;
    min-width: 72px;
    align-items: flex-end;
    flex-direction: column;
}
.portal-garage-card-side > strong { color: var(--portal-green); font-size: 0.92rem; white-space: nowrap; }
.portal-garage-card-side > small { color: var(--portal-muted); font-size: 0.62rem; }
.portal-garage-menu { position: relative; margin-top: auto; }
.portal-garage-menu summary {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    color: var(--portal-muted);
    cursor: pointer;
    list-style: none;
}
.portal-garage-menu summary::-webkit-details-marker { display: none; }
.portal-garage-menu[open] summary { background: var(--portal-bg); }
.portal-garage-menu > div {
    position: absolute;
    right: 0;
    z-index: 25;
    display: grid;
    width: 170px;
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 70, 58, 0.17);
}
.portal-garage-menu button,
.portal-garage-menu a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.58rem 0.7rem;
    border: 0;
    color: var(--portal-ink);
    background: #fff;
    font-size: 0.73rem;
    text-align: left;
    text-decoration: none;
}
.portal-garage-menu button:hover,
.portal-garage-menu a:hover { background: var(--portal-bg); }
.portal-garage-menu .is-danger { color: #be123c; }

.portal-garage-choice-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.portal-garage-choice-tiles button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    color: var(--portal-ink);
    background: #fff;
    text-align: left;
}
.portal-garage-choice-tiles button > span { display: grid; }
.portal-garage-choice-tiles button small { color: var(--portal-muted); font-size: 0.63rem; }
.portal-garage-choice-tiles button > .bi-check-circle-fill { color: #d5dedb; }
.portal-garage-choice-tiles button.is-active { border-color: var(--portal-green); background: var(--portal-green-soft); }
.portal-garage-choice-tiles button.is-active > .bi-check-circle-fill { color: var(--portal-green); }
.portal-garage-choice-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.portal-garage-choice-chips button {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    color: var(--portal-muted);
    background: #fff;
    font-size: 0.73rem;
}
.portal-garage-choice-chips button.is-active { border-color: var(--portal-green); color: var(--portal-green); background: var(--portal-green-soft); }
.portal-garage-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
}
.portal-garage-switch > span { display: grid; flex: 1; }
.portal-garage-switch small { color: var(--portal-muted); font-size: 0.65rem; }
.portal-garage-switch > input { position: absolute; opacity: 0; }
.portal-garage-switch > i {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5d1;
    transition: 0.18s ease;
}
.portal-garage-switch > i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    content: "";
    transition: 0.18s ease;
}
.portal-garage-switch > input:checked + i { background: var(--portal-green); }
.portal-garage-switch > input:checked + i::after { transform: translateX(18px); }

.portal-garage-report-summary {
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, #123d31, #24634f);
    box-shadow: 0 10px 26px -18px rgba(18, 61, 49, 0.8);
}
#garage-report-stats { padding: 1.1rem; }
.portal-garage-report-total { display: grid; }
.portal-garage-report-total small,
.portal-garage-report-total span { color: rgba(255,255,255,.68); font-size: 0.72rem; }
.portal-garage-report-total strong { margin: 0.15rem 0; font-size: 1.7rem; }
.portal-garage-report-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.portal-garage-report-kpis > div {
    display: grid;
    padding: 0.65rem;
    border-radius: 11px;
    background: rgba(255,255,255,.1);
}
.portal-garage-report-kpis small { color: rgba(255,255,255,.68); font-size: 0.67rem; }
#garage-report-methods { padding: 0.8rem 1.1rem; border-top: 1px solid rgba(255,255,255,.12); }
.portal-garage-method-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.portal-garage-method-chips span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    font-size: 0.68rem;
}
.portal-garage-method-chips b { color: #80e1c1; }
.portal-garage-section-title { margin: 0 0 0.55rem; font-family: inherit; font-size: 0.92rem; }
.portal-garage-report-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--portal-line);
}
.portal-garage-report-row:last-child { border-bottom: 0; }
.portal-garage-report-row > span:nth-child(2) { display: grid; }
.portal-garage-report-row small { color: var(--portal-muted); font-size: 0.68rem; }
.portal-garage-report-row > strong { color: var(--portal-green); }

.portal-garage-receipt {
    display: grid;
    gap: 0.8rem;
    width: min(680px, 100%);
    margin: 0 auto;
}
.portal-garage-receipt-head {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1.35rem;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #123d31, #24634f);
    text-align: center;
}
.portal-garage-receipt-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 0.55rem;
    place-items: center;
    border-radius: 50%;
    color: var(--portal-green);
    background: #fff;
    font-size: 1.4rem;
}
.portal-garage-receipt-head .portal-garage-status { margin-bottom: 0.5rem; }
.portal-garage-receipt-head h1 { margin: 0; font-size: 1.15rem; }
.portal-garage-receipt-head p { margin: 0.2rem 0 0.65rem; color: rgba(255,255,255,.7); font-size: 0.74rem; }
.portal-garage-receipt-head > strong { font-size: 1.8rem; }
.portal-garage-receipt-card { padding: 1rem; }
.portal-garage-receipt-card h2 { margin: 0 0 0.75rem; font-family: inherit; font-size: 0.86rem; }
.portal-garage-receipt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.portal-garage-receipt-grid > div {
    display: grid;
    padding: 0.65rem;
    border-radius: 11px;
    background: var(--portal-bg);
}
.portal-garage-receipt-grid span { color: var(--portal-muted); font-size: 0.66rem; }
.portal-garage-receipt-grid strong { font-size: 0.8rem; }
.portal-garage-receipt-note { display: flex; gap: 0.7rem; padding: 0.9rem; }
.portal-garage-receipt-note > i { color: var(--portal-green); }
.portal-garage-receipt-note span { color: var(--portal-muted); font-size: 0.68rem; }
.portal-garage-receipt-note p { margin: 0.1rem 0 0; }
.portal-garage-receipt-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.portal-garage-receipt-actions .btn { min-height: 44px; flex: 1; }

@media (max-width: 767.98px) {
    .portal-garage-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .portal-garage-summary-item { min-width: 125px; scroll-snap-align: start; }
    .portal-garage-toolbar { top: var(--portal-header); }
    .portal-garage-tabs { position: static; }
}
@media (max-width: 575.98px) {
    .portal-garage-actionbar p { display: none; }
    .portal-garage-add span { display: none; }
    .portal-garage-add { width: 42px; padding: 0; }
    .portal-garage-space-card,
    .portal-garage-collection-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.75rem; }
    .portal-garage-card-icon { width: 38px; height: 38px; }
    .portal-garage-card-side { min-width: 58px; }
    .portal-garage-choice-tiles { grid-template-columns: 1fr; }
}
@media print {
    .portal-garage-receipt { width: 100%; }
    .portal-garage-receipt-head { color: #000; background: #fff; border: 1px solid #ddd; }
    .portal-garage-receipt-head p { color: #555; }
}

/* Flutter-aligned core management workspaces */
.portal-directory-tabs {
    position: sticky;
    top: var(--portal-header);
    z-index: 22;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -0.4rem -0.25rem 1rem;
    border-bottom: 1px solid var(--portal-line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}
.portal-directory-tabs a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 50px;
    color: var(--portal-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.portal-directory-tabs a::after {
    position: absolute;
    right: 22%;
    bottom: -1px;
    left: 22%;
    height: 3px;
    border-radius: 4px 4px 0 0;
    background: var(--portal-green);
    content: "";
    opacity: 0;
}
.portal-directory-tabs a.is-active { color: var(--portal-green); }
.portal-directory-tabs a.is-active::after { opacity: 1; }

.portal-core-actionbar,
.portal-core-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.portal-core-actionbar { margin-bottom: 0.85rem; }
.portal-core-actionbar h2,
.portal-core-panel-head h2 {
    margin: 0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}
.portal-core-actionbar p,
.portal-core-panel-head p {
    margin: 0.12rem 0 0;
    color: var(--portal-muted);
    font-size: 0.72rem;
}
.portal-core-actionbar .btn { min-height: 42px; padding: 0.55rem 0.85rem; }

.portal-core-filterbar {
    position: sticky;
    top: calc(var(--portal-header) + 2px);
    z-index: 18;
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem;
    border: 1px solid var(--portal-line);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 15px rgba(31, 70, 58, 0.06);
    backdrop-filter: blur(12px);
}
.portal-core-payment-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.7fr);
    gap: 0.6rem;
}
.portal-core-month-filter {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0 0.65rem;
    border: 1px solid var(--portal-line);
    border-radius: 11px;
    background: #fff;
}
.portal-core-month-filter > i { color: var(--portal-green); }
.portal-core-month-filter input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: var(--portal-ink);
    background: transparent;
}
.portal-core-month-filter button {
    padding: 0.25rem;
    border: 0;
    color: var(--portal-muted);
    background: transparent;
}
.portal-core-filter-pills {
    display: flex;
    overflow-x: auto;
    gap: 0.42rem;
    scrollbar-width: none;
}
.portal-core-filter-pills::-webkit-scrollbar { display: none; }
.portal-core-filter-pills button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    color: var(--portal-muted);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.portal-core-filter-pills button span {
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    background: var(--portal-bg);
    font-size: 0.62rem;
}
.portal-core-filter-pills button.is-active {
    border-color: var(--portal-green);
    color: #fff;
    background: var(--portal-green);
}
.portal-core-filter-pills button.is-active span {
    color: var(--portal-green);
    background: #fff;
}

.portal-core-form-section,
.portal-core-form-page {
    padding: 0.9rem;
    border: 1px solid rgba(45, 79, 65, 0.09);
    border-radius: 16px;
    background: #fff;
}
.portal-core-form-section { display: grid; gap: 0.85rem; }
.portal-core-form-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: inherit;
    color: var(--portal-forest);
    font-size: 0.88rem;
}
.portal-core-form-section h3 i { color: var(--portal-green); }
.portal-core-choice-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.portal-core-choice-tiles button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    color: var(--portal-ink);
    background: #fff;
    text-align: left;
}
.portal-core-choice-tiles button > span { display: grid; }
.portal-core-choice-tiles button small { color: var(--portal-muted); font-size: 0.64rem; }
.portal-core-choice-tiles button > .bi-check-circle-fill { color: #d3ddda; }
.portal-core-choice-tiles button.is-active { border-color: var(--portal-green); background: var(--portal-green-soft); }
.portal-core-choice-tiles button.is-active > .bi-check-circle-fill { color: var(--portal-green); }
.portal-core-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
}
.portal-core-switch > span { display: grid; flex: 1; }
.portal-core-switch small { color: var(--portal-muted); font-size: 0.65rem; }
.portal-core-switch > input { position: absolute; opacity: 0; }
.portal-core-switch > i {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5d1;
}
.portal-core-switch > i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    content: "";
    transition: transform 0.18s ease;
}
.portal-core-switch > input:checked + i { background: var(--portal-green); }
.portal-core-switch > input:checked + i::after { transform: translateX(18px); }
.portal-core-choice-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.portal-core-choice-chips button {
    padding: 0.45rem 0.72rem;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    color: var(--portal-muted);
    background: #fff;
    font-size: 0.72rem;
}
.portal-core-choice-chips button.is-active { border-color: var(--portal-green); color: var(--portal-green); background: var(--portal-green-soft); }

.portal-core-card-list { display: grid; gap: 0.7rem; }
.portal-core-invoice-card,
.portal-core-payment-card,
.portal-core-contract-card {
    overflow: hidden;
    border: 1px solid rgba(45, 79, 65, 0.09);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 13px rgba(31, 70, 58, 0.05);
}
.portal-core-invoice-main,
.portal-core-payment-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.7rem;
    padding: 0.85rem;
    color: inherit;
    text-decoration: none;
}
.portal-core-invoice-copy,
.portal-core-payment-main > span:nth-child(2) { display: grid; min-width: 0; gap: 0.18rem; }
.portal-core-invoice-copy > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.portal-core-invoice-copy small,
.portal-core-payment-main small {
    overflow: hidden;
    color: var(--portal-muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-core-invoice-copy em,
.portal-core-payment-main em {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    color: var(--portal-muted);
    font-size: 0.66rem;
    font-style: normal;
}
.portal-core-invoice-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--portal-line);
    background: var(--portal-bg);
}
.portal-core-invoice-amounts > span { display: grid; }
.portal-core-invoice-amounts small { color: var(--portal-muted); font-size: 0.64rem; }
.portal-core-invoice-amounts strong { font-size: 0.78rem; }
.portal-core-card-actions {
    display: flex;
    overflow-x: auto;
    border-top: 1px solid var(--portal-line);
}
.portal-core-card-actions a,
.portal-core-card-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-right: 1px solid var(--portal-line);
    color: var(--portal-muted);
    background: #fff;
    font-size: 0.68rem;
    text-decoration: none;
    white-space: nowrap;
}
.portal-core-card-actions a.is-primary,
.portal-core-card-actions button.is-primary { color: var(--portal-green); font-weight: 700; }
.portal-core-card-actions .is-danger { color: #be123c; }
.portal-core-status {
    display: inline-flex;
    width: max-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: #8a5b0d;
    background: #fff3d6;
    font-size: 0.62rem;
    font-weight: 700;
}
.portal-core-status.is-active,
.portal-core-status.is-paid { color: #047857; background: #e7f7f1; }
.portal-core-status.is-expired { color: #64748b; background: #f1f5f9; }
.portal-core-status.is-partially_paid,
.portal-core-status.is-overdue { color: #be123c; background: #fff0f2; }
.is-paid { color: #047857 !important; }
.is-due { color: #be123c !important; }
.portal-core-payment-amount { color: var(--portal-green); font-size: 0.95rem; white-space: nowrap; }
.portal-core-payment-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--portal-line);
    background: var(--portal-bg);
    color: var(--portal-muted);
    font-size: 0.68rem;
}
.portal-core-payment-method > span:first-child { display: flex; align-items: center; gap: 0.35rem; }
.portal-core-contract-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.7rem;
    padding: 0.85rem;
}
.portal-core-contract-card p { margin: 0.22rem 0 0; color: var(--portal-muted); font-size: 0.7rem; }
.portal-core-contract-card small { color: var(--portal-muted); font-size: 0.65rem; }
.portal-core-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.portal-core-contract-side { display: flex; align-items: flex-end; flex-direction: column; }
.portal-core-contract-side > strong { color: var(--portal-green); font-size: 0.85rem; }
.portal-core-contract-side > small { font-size: 0.62rem; }

.portal-tenant-detail,
.portal-core-receipt { width: min(760px, 100%); margin: 0 auto; }

#tenant-detail-root.portal-tenant-detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: .9rem;
    color: inherit;
    line-height: 1.4;
}

.portal-td-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin: -.35rem 0 .55rem;
}
.portal-td-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 135, 103, .18);
    border-radius: 10px;
    background: #fff;
    color: var(--portal-green-dark);
    text-decoration: none;
}
.portal-td-hero,
.portal-td-tabs,
.portal-td-card {
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.portal-td-hero { overflow: hidden; margin-bottom: .7rem; }
.portal-td-hero-main {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .75rem .8rem .65rem;
}
.portal-td-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
    font-weight: 800;
    flex-shrink: 0;
}
.portal-td-hero-copy { min-width: 0; }
.portal-td-title-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.portal-td-title-row h1 {
    margin: 0;
    font-size: .98rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-td-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .12rem .4rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    white-space: nowrap;
}
.portal-td-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.portal-td-badge.is-active { color: #059669; background: #d1fae5; }
.portal-td-badge.is-previous { color: #ea580c; background: #ffedd5; }
.portal-td-badge.is-inactive { color: #6b7280; background: #f3f4f6; }
.portal-td-section-label {
    margin: 0 0 .35rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--portal-muted);
}
.portal-td-rent-card { margin-bottom: .5rem; }
.portal-td-rent-card .portal-td-action { margin-top: .55rem; }
.portal-td-rent-meta {
    margin: .25rem 0 0;
    font-size: .72rem;
    color: var(--portal-muted);
}
.portal-td-previous-rent {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .4rem 0;
    border-top: 1px solid var(--portal-line);
    font-size: .74rem;
    color: var(--portal-muted);
    font-weight: 600;
}
.portal-td-previous-rent:first-child { border-top: 0; padding-top: 0; }
.portal-td-previous-rent i { margin-top: .1rem; }
#tenant-financial-summary,
#tenant-active-rents,
#tenant-previous-rents { margin-bottom: .55rem; }
#tenant-financial-summary:empty,
#tenant-active-rents:empty,
#tenant-previous-rents:empty { display: none; }
.portal-tenant-panel > .portal-td-action + .portal-td-action { margin-top: .5rem; }
.portal-td-hero-copy p {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: .2rem 0 0;
    color: var(--portal-muted);
    font-size: .72rem;
    font-weight: 600;
}
.portal-td-phone {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
    font-weight: 800;
    font-size: .78rem;
}
.portal-td-phone span { flex: 1; min-width: 0; }
.portal-td-phone a,
.portal-td-phone button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-green);
    display: grid;
    place-items: center;
    text-decoration: none;
}
.portal-td-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: .7rem;
    overflow: hidden;
}
.portal-tenant-detail .portal-td-tabs button {
    border: 0;
    background: transparent;
    padding: .7rem .3rem;
    font-size: .72rem;
    font-weight: 800;
    color: var(--portal-muted);
    border-bottom: 2.5px solid transparent;
}
.portal-tenant-detail .portal-td-tabs button.is-active {
    color: var(--portal-green);
    border-bottom-color: var(--portal-green);
}
.portal-tenant-panel { display: grid; gap: .55rem; }
.portal-td-card { padding: .7rem .75rem; }
.portal-td-kicker {
    margin: 0;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--portal-muted);
}
.portal-td-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    margin-top: .45rem;
}
.portal-td-chip {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .4rem .45rem;
    border-radius: 10px;
    border: 1px solid transparent;
}
.portal-td-chip i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.portal-td-chip span { min-width: 0; }
.portal-td-chip small { display: block; font-size: .6rem; color: var(--portal-muted); }
.portal-td-chip strong { display: block; font-size: .78rem; }
.portal-td-chip.is-due { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.portal-td-chip.is-due i { background: #fee2e2; }
.portal-td-chip.is-ok { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.portal-td-chip.is-ok i { background: #d1fae5; }
.portal-td-chip.is-advance { background: #e5f4f1; border-color: rgba(0, 135, 103, .16); color: var(--portal-green-dark); }
.portal-td-chip.is-advance i { background: #fff; }
.portal-td-chip.is-deposit { background: #f5f3ff; border-color: #ddd6fe; color: #7c3aed; }
.portal-td-chip.is-deposit i { background: #ede9fe; }
.portal-td-summary-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.portal-td-summary-head strong { color: var(--portal-green); font-size: .9rem; }
.portal-td-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.portal-td-pills span {
    padding: .25rem .45rem;
    border-radius: 6px;
    background: rgba(45, 79, 65, .06);
    border: 1px solid rgba(45, 79, 65, .12);
    font-size: .68rem;
    font-weight: 700;
}
.portal-td-row {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .45rem 0;
    border-bottom: 1px solid var(--portal-line);
}
.portal-td-row:last-child { border-bottom: 0; padding-bottom: 0; }
.portal-td-row i { color: var(--portal-green); margin-top: .15rem; }
.portal-td-row small { display: block; color: var(--portal-muted); font-size: .64rem; }
.portal-td-row strong { display: block; font-size: .8rem; font-weight: 700; }
.portal-td-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--portal-green);
    background: #fff;
    color: var(--portal-green-dark);
    font-weight: 800;
    font-size: .78rem;
    text-decoration: none;
}
.portal-td-action.is-filled { background: var(--portal-green); color: #fff; border-color: var(--portal-green); }
.portal-td-action-row { display: flex; gap: .45rem; }
.portal-td-action-row .portal-td-action { flex: 1; }
.portal-td-list-kicker { margin: .2rem .1rem 0; }
.portal-td-doc-head,
.portal-td-doc { display: flex; align-items: center; gap: .55rem; }
.portal-td-doc-head { justify-content: space-between; margin-bottom: .35rem; }
.portal-td-doc-head span {
    min-width: 1.4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: #f3f6f5;
    font-size: .68rem;
    font-weight: 800;
    color: var(--portal-muted);
    text-align: center;
}
.portal-td-doc { padding: .45rem 0; border-top: 1px solid var(--portal-line); }
.portal-td-doc span:nth-child(2) { flex: 1; min-width: 0; }
.portal-td-doc strong, .portal-td-doc small { display: block; }
.portal-td-doc small { color: var(--portal-muted); font-size: .66rem; }
.portal-td-doc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
}
.portal-td-doc button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-muted);
}
.portal-td-doc button.is-danger { color: #be123c; }
.portal-td-doc { cursor: pointer; }
.portal-td-doc .bi-chevron-right { color: var(--portal-muted); font-size: .95rem; }
.portal-td-doc-icon { overflow: hidden; position: relative; }
.portal-td-doc-icon.is-pdf { background: #fee2e2; color: #e11d48; }
.portal-td-doc-icon img { width: 100%; height: 100%; object-fit: cover; }
.portal-doc-empty {
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--portal-muted);
}
.portal-doc-empty > i { font-size: 1.6rem; color: var(--portal-green); }
.portal-doc-empty strong { color: var(--portal-forest); font-size: .92rem; }
.portal-doc-empty p { margin: 0; font-size: .78rem; }
.portal-doc-empty button {
    margin-top: .35rem;
    border: 0;
    border-radius: 8px;
    background: var(--portal-green);
    color: #fff;
    font-weight: 800;
    padding: .4rem .8rem;
}
.portal-doc-label {
    margin: 0 0 .35rem;
    font-size: .68rem;
    font-weight: 800;
    color: var(--portal-muted);
}
.portal-doc-types { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.portal-doc-types button {
    border: 1px solid var(--portal-line);
    background: #fff;
    color: var(--portal-muted);
    border-radius: 999px;
    padding: .28rem .65rem;
    font-size: .75rem;
    font-weight: 800;
}
.portal-doc-types button.is-active {
    background: var(--portal-green-soft);
    border-color: rgba(0, 135, 103, .35);
    color: var(--portal-green-dark);
}
.portal-doc-zone {
    display: grid;
    gap: .55rem;
    margin-bottom: .75rem;
    padding: .65rem;
    border-radius: 10px;
    border: 1.2px solid rgba(0, 135, 103, .35);
    background: var(--portal-green-soft);
}
.portal-doc-zone.has-files {
    border-width: 1px;
    border-color: var(--portal-line);
    background: #fff;
}
.portal-doc-zone-empty { display: flex; gap: .6rem; align-items: flex-start; }
.portal-doc-zone-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(0, 135, 103, .12);
    color: var(--portal-green-dark);
    font-size: 1.15rem;
}
.portal-doc-zone-empty strong, .portal-doc-zone-empty small { display: block; }
.portal-doc-zone-empty strong { font-size: .8rem; }
.portal-doc-zone-empty small { margin-top: .15rem; color: var(--portal-muted); font-size: .68rem; }
.portal-doc-files-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.portal-doc-files-head span { font-size: .68rem; font-weight: 800; color: var(--portal-muted); }
.portal-doc-files-head button {
    border: 0;
    background: transparent;
    color: #e11d48;
    font-size: .72rem;
    font-weight: 800;
    padding: 0;
}
.portal-doc-file-list { display: grid; gap: .35rem; max-height: 220px; overflow: auto; }
.portal-doc-file {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .45rem;
    border: 1px solid var(--portal-line);
    border-radius: 8px;
    background: #f7faf9;
}
.portal-doc-file > span:nth-child(2) { flex: 1; min-width: 0; }
.portal-doc-file strong, .portal-doc-file small { display: block; }
.portal-doc-file strong { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-doc-file small { color: var(--portal-muted); font-size: .66rem; }
.portal-doc-file > button {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #e11d48;
}
.portal-doc-file-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--portal-line);
    background: var(--portal-green-soft);
    color: var(--portal-green);
}
.portal-doc-file-thumb.is-pdf { background: #fee2e2; color: #e11d48; }
.portal-doc-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.portal-doc-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.portal-doc-sources button {
    min-height: 44px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .15rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 135, 103, .35);
    background: #fff;
    color: var(--portal-green);
    font-size: .66rem;
    font-weight: 800;
}
.portal-doc-sources button:nth-child(2) { border-color: rgba(90, 107, 102, .35); color: var(--portal-muted); }
.portal-doc-sources button.is-files { border-color: rgba(225, 29, 72, .35); color: #e11d48; }
.portal-doc-sources button i { font-size: .95rem; }
.portal-doc-hint { margin: 0; text-align: center; color: var(--portal-muted); font-size: .66rem; }
.portal-doc-footer { padding: 0 .9rem 1rem; }
.portal-doc-footer p { margin: .35rem 0 0; text-align: center; color: var(--portal-muted); font-size: .66rem; }
.portal-doc-view-head {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .85rem .65rem;
}
.portal-doc-view-head > div { flex: 1; min-width: 0; }
.portal-doc-view-head h2 {
    margin: 0;
    font-size: .9rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.portal-doc-view-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.portal-doc-view-meta span {
    padding: .08rem .4rem;
    border-radius: 999px;
    background: #f3f6f5;
    color: var(--portal-muted);
    font-size: .66rem;
    font-weight: 800;
}
.portal-doc-view-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
    flex-shrink: 0;
}
.portal-doc-view-icon.is-pdf { background: #fee2e2; color: #e11d48; }
.portal-doc-preview {
    min-height: 220px;
    max-height: 420px;
    margin: 0 .85rem .75rem;
    padding: .65rem;
    display: grid;
    place-items: center;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--portal-line);
    background: #f4f6f8;
}
.portal-doc-preview img { max-width: 100%; max-height: 390px; object-fit: contain; }
.portal-doc-preview-fallback { display: grid; justify-items: center; gap: .45rem; text-align: center; color: var(--portal-muted); font-size: .78rem; }
.portal-doc-preview-fallback > span {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--portal-line);
    color: var(--portal-green);
    font-size: 1.4rem;
}
.portal-doc-preview-fallback > span.is-pdf { color: #e11d48; }
.portal-doc-preview-fallback button {
    border: 0;
    background: transparent;
    color: var(--portal-green-dark);
    font-weight: 800;
}
.portal-doc-preview-fallback p { margin: 0; }
.portal-tenant-document-form { display: grid; gap: .5rem; }
.portal-tenant-document-form[hidden] { display: none; }
.portal-core-payment-main { text-decoration: none; color: inherit; }
.portal-tenant-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, #123d31, #24634f);
}
.portal-tenant-hero-avatar {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    color: var(--portal-green);
    background: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}
.portal-tenant-hero h1 { margin: 0.28rem 0 0; font-size: 1.1rem; }
.portal-tenant-hero p { margin: 0.1rem 0 0; color: rgba(255,255,255,.7); font-size: 0.7rem; }
.portal-tenant-hero-actions { display: flex; gap: 0.35rem; }
.portal-tenant-hero-actions a,
.portal-tenant-hero-actions button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.1);
    text-decoration: none;
}
.portal-core-detail-tabs {
    display: flex;
    overflow-x: auto;
    margin: 0.8rem 0;
    border-bottom: 1px solid var(--portal-line);
}
.portal-core-detail-tabs button {
    position: relative;
    flex: 1 0 auto;
    min-height: 42px;
    padding: 0.45rem 0.65rem;
    border: 0;
    color: var(--portal-muted);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
}
.portal-core-detail-tabs button::after {
    position: absolute;
    right: 15%;
    bottom: -1px;
    left: 15%;
    height: 3px;
    border-radius: 99px;
    background: var(--portal-green);
    content: "";
    opacity: 0;
}
.portal-core-detail-tabs button.is-active { color: var(--portal-green); }
.portal-core-detail-tabs button.is-active::after { opacity: 1; }
.portal-tenant-panel { display: grid; gap: .55rem; animation: portal-sms-fade .18s ease; }
.portal-tenant-panel[hidden] { display: none; }
.portal-tenant-financial {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
.portal-tenant-financial > div {
    display: grid;
    padding: 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
}
.portal-tenant-financial span { color: var(--portal-muted); font-size: 0.64rem; }
.portal-tenant-financial strong { margin-top: 0.1rem; font-size: 0.85rem; }
.portal-tenant-info-card,
.portal-core-receipt-card { padding: 1rem; }
.portal-tenant-info-card h2,
.portal-core-receipt-card h2 {
    margin: 0 0 0.75rem;
    font-family: inherit;
    font-size: 0.88rem;
}
.portal-core-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}
.portal-core-info-grid > div {
    display: grid;
    padding: 0.65rem;
    border-radius: 11px;
    background: var(--portal-bg);
}
.portal-core-info-grid dt { color: var(--portal-muted); font-size: 0.63rem; font-weight: 500; }
.portal-core-info-grid dd { margin: 0.1rem 0 0; font-size: 0.78rem; font-weight: 700; }
.portal-core-info-grid a { color: var(--portal-green); text-decoration: none; }
.portal-core-note {
    display: flex;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 11px;
    color: var(--portal-muted);
    background: var(--portal-green-soft);
    font-size: 0.72rem;
}
.portal-core-note i { color: var(--portal-green); }
.portal-core-actions,
.portal-core-receipt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.portal-core-actions .btn,
.portal-core-receipt-actions .btn { min-height: 43px; flex: 1; white-space: nowrap; }
.portal-tenant-danger { display: flex; justify-content: center; margin-top: 0.6rem; }
.portal-tenant-document-form {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(110px, .6fr) minmax(160px, 1fr) auto;
    align-items: end;
    gap: 0.6rem;
    padding: 0.85rem;
}
.portal-tenant-document-form > div { display: grid; }
.portal-tenant-document-form small { color: var(--portal-muted); font-size: 0.65rem; }
.portal-core-record {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid var(--portal-line);
    color: inherit;
    text-decoration: none;
}
.portal-core-record:last-child { border-bottom: 0; }
.portal-core-record > span:nth-child(2) { display: grid; min-width: 0; }
.portal-core-record small { color: var(--portal-muted); font-size: 0.66rem; }
.portal-core-record-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
}
.portal-core-record-icon.is-payment { color: #146aa3; background: #e9f5fc; }
.portal-core-record-amount { font-size: 0.78rem; white-space: nowrap; }
.portal-core-icon-btn {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
    text-decoration: none;
}
.portal-core-icon-btn.is-danger { color: #be123c; background: #fff0f2; }

.portal-core-receipt { display: grid; gap: 0.8rem; }
.portal-core-receipt-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #123d31, #24634f);
}
.portal-core-receipt-head h1 { margin: 0.45rem 0 0; font-size: 1.15rem; }
.portal-core-receipt-head p { margin: 0.15rem 0 0; color: rgba(255,255,255,.7); font-size: 0.72rem; }
.portal-core-receipt-head > strong { font-size: 1.65rem; white-space: nowrap; }
.portal-core-lines { display: grid; }
.portal-core-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--portal-line);
}
.portal-core-lines > div:last-child { border-bottom: 0; }
.portal-core-lines span { display: grid; font-size: 0.75rem; }
.portal-core-lines small { color: var(--portal-muted); font-size: 0.64rem; }
.portal-core-receipt-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 15px;
    background: var(--portal-forest);
    color: #fff;
}
.portal-core-receipt-totals > div { display: grid; padding: 0.8rem; border-right: 1px solid rgba(255,255,255,.12); }
.portal-core-receipt-totals > div:last-child { border-right: 0; }
.portal-core-receipt-totals span { color: rgba(255,255,255,.65); font-size: 0.65rem; }

.portal-inv { gap: .65rem; color: var(--portal-ink, #123); }
.portal-inv-toolbar { display: flex; justify-content: flex-end; gap: .4rem; }
.portal-inv-toolbar button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 135, 103, .18);
    border-radius: 10px;
    background: #fff;
    color: var(--portal-green-dark);
}
.portal-inv-card {
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.portal-inv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem;
}
.portal-inv-head strong {
    display: block;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .02em;
}
.portal-inv-head p {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    margin: .25rem 0 0;
    color: var(--portal-muted);
    font-size: .72rem;
}
.portal-inv-meta { text-align: right; min-width: 0; }
.portal-inv-meta b { display: block; font-size: .82rem; font-weight: 900; }
.portal-inv-meta span { display: block; margin-top: .15rem; color: var(--portal-muted); font-size: .66rem; }
.portal-inv-grid { display: grid; grid-template-columns: 1fr 1fr; }
.portal-inv-grid > div { padding: .75rem; }
.portal-inv-grid > div + div { border-left: 1px solid var(--portal-line); }
.portal-inv-grid h2, .portal-inv-section header h2 {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .45rem;
    font-size: .74rem;
    font-weight: 800;
}
.portal-inv-grid span { display: block; color: var(--portal-muted); font-size: .64rem; }
.portal-inv-grid strong { display: block; margin: 0 0 .35rem; font-size: .74rem; font-weight: 800; }
.portal-inv-section header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--portal-line);
}
.portal-inv-section header h2 { margin: 0; }
.portal-inv-status {
    padding: .1rem .4rem;
    border: 1px solid var(--portal-line);
    border-radius: 4px;
    color: var(--portal-muted);
    font-size: .64rem;
    font-weight: 800;
    white-space: nowrap;
}
.portal-inv-body { display: grid; gap: .45rem; padding: .6rem; }
.portal-inv-table { overflow-x: auto; }
.portal-inv-cols {
    display: grid;
    align-items: start;
    gap: .35rem;
    min-width: 280px;
    padding: .28rem .15rem;
    border-bottom: 1px solid var(--portal-line);
    color: inherit;
    text-decoration: none;
    font-size: .7rem;
}
.portal-inv-cols.is-lines { grid-template-columns: 2rem minmax(0, 1fr) 5.5rem; }
.portal-inv-cols.is-payments { grid-template-columns: 2rem minmax(4.5rem, .8fr) minmax(4rem, .7fr) minmax(0, 1.2fr) 5.2rem; min-width: 460px; }
.portal-inv-cols.is-receipt { grid-template-columns: 2rem minmax(0, 1.3fr) minmax(7rem, 1fr) 5.5rem; min-width: 420px; }
.portal-rcpt-page { display: grid; gap: .65rem; }
body.portal-body > .portal-rcpt-page { width: min(760px, 100%); margin: 0 auto; padding: 1rem 1rem 2rem; }
.portal-rcpt-banner {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .75rem;
    background: #f4f7f6;
    border-bottom: 1px solid var(--portal-line);
}
.portal-rcpt-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--portal-green-soft);
    color: var(--portal-green);
    border: 1px solid rgba(0, 135, 103, .2);
}
.portal-rcpt-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.portal-rcpt-banner strong, .portal-rcpt-banner small, .portal-rcpt-banner em { display: block; }
.portal-rcpt-banner strong { font-size: .95rem; font-weight: 900; font-style: normal; }
.portal-rcpt-banner small, .portal-rcpt-banner em { color: var(--portal-muted); font-size: .7rem; font-weight: 600; font-style: normal; }
.portal-rcpt-paid {
    margin-left: auto;
    padding: .12rem .45rem;
    border-radius: 99px;
    background: var(--portal-green-soft);
    border: 1px solid rgba(0, 135, 103, .25);
    color: var(--portal-green-dark);
    font-size: .62rem;
    font-weight: 800;
    white-space: nowrap;
}
.portal-rcpt-paid.is-reversed { background: #fef2f2; color: #be123c; border-color: #fecaca; }
.portal-rcpt-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .75rem;
    padding: .65rem .75rem .75rem;
    color: var(--portal-muted);
    font-size: .66rem;
}
.portal-rcpt-meta span:nth-child(even) { text-align: right; }
.portal-rcpt-alert {
    margin: 0;
    padding: .55rem .7rem;
    border-radius: 10px;
    background: #fef2f2;
    color: #be123c;
    font-size: .78rem;
    font-weight: 700;
}
@media print {
    .portal-inv-toolbar, .portal-pay-actions, .portal-pay-links { display: none !important; }
    body.portal-body > .portal-rcpt-page { width: 100%; padding: 0; }
}

.portal-end-rent[hidden] { display: none !important; }
.portal-end-rent { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1.25rem; }
.portal-end-rent-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.portal-end-rent-card {
    position: relative;
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    overflow: hidden;
}
.portal-end-rent-card header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .4rem .75rem .9rem;
    border-bottom: 1px solid var(--portal-line);
}
.portal-end-rent-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff0f2;
    color: #be123c;
    border: 1px solid rgba(190, 18, 60, .18);
}
.portal-end-rent-card h2 { flex: 1; margin: 0; font-size: 1rem; font-weight: 800; }
.portal-end-rent-card header button {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--portal-muted);
}
.portal-end-rent-body { padding: .85rem .95rem 1rem; }
.portal-end-rent-body > p { margin: 0; color: var(--portal-muted); font-size: .82rem; line-height: 1.4; }
.portal-end-rent-highlight {
    margin-top: .7rem;
    padding: .55rem .7rem;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    background: var(--portal-bg);
    font-size: .84rem;
    font-weight: 800;
}
.portal-end-rent-body label { display: block; margin: .75rem 0 .3rem; font-size: .78rem; font-weight: 800; }
.portal-end-rent-body label b { color: #be123c; }
.portal-end-rent-body input[type="month"] {
    width: 100%;
    min-height: 42px;
    padding: 0 .7rem;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
}
.portal-end-rent-body small { display: block; margin-top: .3rem; color: var(--portal-muted); font-size: .7rem; }
.portal-end-rent-note {
    display: flex;
    gap: .45rem;
    margin-top: .7rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    background: #fff0f2;
    border: 1px solid rgba(190, 18, 60, .2);
    color: #be123c;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
}
.portal-end-rent-actions { display: flex; gap: .55rem; margin-top: 1rem; }
.portal-end-rent-actions button {
    flex: 1;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid var(--portal-line);
    background: #fff;
    font-weight: 800;
    font-size: .82rem;
}
.portal-end-rent-actions button:last-child { background: #be123c; border-color: #be123c; color: #fff; }
.portal-end-rent-actions button:disabled { opacity: .6; }
body.portal-end-rent-open { overflow: hidden; }
.portal-inv-cols:first-child {
    border: 1px solid var(--portal-line);
    background: #f4f7f6;
    font-size: .62rem;
    font-weight: 800;
}
.portal-inv-cols span:last-child { text-align: right; font-weight: 800; }
.portal-inv-cols:first-child span:last-child { font-weight: 800; }
.portal-inv-sub {
    display: flex;
    justify-content: flex-end;
    gap: .7rem;
    font-size: .74rem;
    font-weight: 800;
}
.portal-inv-sub.is-due { font-size: .82rem; font-weight: 900; }
.portal-inv-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border: 1.2px solid var(--portal-forest, #123d31);
    font-weight: 800;
}
.portal-inv-total strong { font-size: 1rem; font-weight: 900; }
.portal-inv-empty { margin: .2rem 0; color: var(--portal-muted); font-size: .78rem; }
.portal-inv-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.portal-inv-actions .btn { min-height: 40px; flex: 1; }
.portal-pay { align-content: start; }
.portal-pay h1 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.portal-pay-lines { display: grid; gap: .2rem; }
.portal-pay-lines p { margin: 0; font-size: .95rem; }
.portal-pay-actions { display: grid; gap: .55rem; margin-top: .35rem; }
.portal-td-action.is-danger { background: #be123c; color: #fff; border-color: #be123c; }
.portal-pay-links { display: flex; gap: .7rem; }
.portal-pay-links a, .portal-pay-links button {
    border: 0;
    background: transparent;
    color: var(--portal-green-dark);
    font-size: .78rem;
    font-weight: 800;
    padding: 0;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .portal-directory-tabs { position: static; }
    .portal-core-filterbar { top: var(--portal-header); }
    .portal-tenant-document-form { grid-template-columns: 1fr 1fr; }
    .portal-tenant-document-form > div { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .portal-core-actionbar p { display: none; }
    .portal-core-actionbar .btn span { display: none; }
    .portal-core-payment-filters,
    .portal-core-info-grid { grid-template-columns: 1fr; }
    .portal-core-choice-tiles { grid-template-columns: 1fr; }
    .portal-td-chips { grid-template-columns: 1fr; }
    .portal-tenant-document-form { grid-template-columns: 1fr; }
    .portal-tenant-document-form > div { grid-column: auto; }
    .portal-core-receipt-head { align-items: flex-start; flex-direction: column; }
}
@media print {
    .portal-core-receipt { width: 100%; }
    .portal-core-receipt-head { border: 1px solid #ddd; color: #000; background: #fff; }
    .portal-core-receipt-head p { color: #555; }
    .portal-core-detail-tabs,
    .portal-bottom,
    .portal-sidebar,
    .portal-content-head { display: none !important; }
}

.portal-support-page,
.portal-support-thread-page { width: min(760px, 100%); margin: 0 auto; }
.portal-support-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--portal-green), var(--portal-green-dark));
}
.portal-support-hero span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.16);
    font-size: 1.1rem;
}
.portal-support-hero strong { display: block; font-size: 0.95rem; }
.portal-support-hero p { margin: 0.05rem 0 0; color: rgba(255,255,255,.82); font-size: 0.72rem; }
.portal-support-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.75rem 0; }
.portal-support-contact {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    text-decoration: none;
}
.portal-support-contact i { font-size: 1.05rem; }
.portal-support-contact strong { font-size: 0.78rem; }
.portal-support-contact small { overflow: hidden; color: var(--portal-muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-support-contact.is-call { color: var(--portal-green); }
.portal-support-contact.is-chat { color: #128c7e; }
.portal-support-contact.is-disabled { color: var(--portal-hint); pointer-events: none; }
.portal-support-legal { display: grid; gap: 0.5rem; padding: 0.95rem; }
.portal-support-legal h2 { margin: 0; font-family: inherit; font-size: 0.9rem; }
.portal-support-legal p { margin: 0; color: var(--portal-muted); font-size: 0.72rem; }
.portal-support-legal a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    color: var(--portal-ink);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}
.portal-support-legal a > i:first-child { color: var(--portal-green); }
.portal-support-legal a span { flex: 1; }
.portal-support-legal a > i:last-child { color: var(--portal-muted); }
.portal-support-tickets-head { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 0.55rem; }
.portal-support-tickets-head h2 { margin: 0; font-family: inherit; font-size: 0.92rem; }
.portal-support-tickets-head .btn { color: var(--portal-green); font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.portal-support-ticket-list { display: grid; gap: 0.55rem; }
.portal-support-ticket {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.portal-support-ticket span { display: grid; min-width: 0; flex: 1; }
.portal-support-ticket strong { font-size: 0.8rem; }
.portal-support-ticket small { color: var(--portal-muted); font-size: 0.66rem; }
.portal-support-ticket > i { color: var(--portal-muted); }
.portal-support-empty { display: grid; justify-items: center; gap: 0.45rem; padding: 1.2rem; text-align: center; }
.portal-support-empty i { color: var(--portal-muted); font-size: 1.4rem; }
.portal-support-empty p { margin: 0; color: var(--portal-muted); font-size: 0.75rem; }
.portal-support-priority { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.portal-support-priority button {
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    color: var(--portal-muted);
    background: #fff;
    font-size: 0.72rem;
}
.portal-support-priority button.is-active { border-color: var(--portal-green); color: var(--portal-green); background: var(--portal-green-soft); }
.portal-support-meta { display: flex; align-items: center; gap: 0.45rem; padding: 0.75rem; }
.portal-support-meta time { margin-left: auto; color: var(--portal-muted); font-size: 0.66rem; }
.portal-support-chip { padding: 0.22rem 0.55rem; border-radius: 999px; background: #fff3d6; color: #9a6412; font-size: 0.66rem; font-weight: 700; }
.portal-support-chip.is-urgent,
.portal-support-chip.is-pending { color: #b45309; background: #fff3d6; }
.portal-support-chip.is-replied,
.portal-support-chip.is-medium { color: #047857; background: #e7f7f1; }
.portal-support-chip.is-closed,
.portal-support-chip.is-low { color: #64748b; background: #f1f5f9; }
.portal-support-thread { display: flex; min-height: 280px; max-height: 58vh; flex-direction: column; gap: 0.55rem; margin: 0.75rem 0; overflow: auto; }
.portal-support-bubble { display: grid; width: min(82%, 460px); gap: 0.18rem; padding: 0.7rem 0.8rem; border-radius: 14px; }
.portal-support-bubble strong { font-size: 0.66rem; }
.portal-support-bubble p { margin: 0; font-size: 0.8rem; white-space: pre-wrap; }
.portal-support-bubble time { font-size: 0.62rem; }
.portal-support-bubble.is-mine { align-self: flex-end; border-bottom-right-radius: 4px; color: #fff; background: var(--portal-green); box-shadow: 0 6px 16px rgba(0,135,103,.18); }
.portal-support-bubble.is-mine strong,
.portal-support-bubble.is-mine time { color: rgba(255,255,255,.75); }
.portal-support-bubble.is-admin { align-self: flex-start; border: 1px solid var(--portal-line); border-bottom-left-radius: 4px; background: #fff; }
.portal-support-bubble.is-admin strong,
.portal-support-bubble.is-admin time { color: var(--portal-muted); }
.portal-support-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.55rem; }
.portal-support-reply .btn { min-height: 46px; }
.portal-support-closed { padding: 0.75rem; border-radius: 12px; color: var(--portal-muted); background: var(--portal-surface-muted); text-align: center; font-size: 0.75rem; }
@media (max-width: 575.98px) {
    .portal-support-contacts { grid-template-columns: 1fr; }
    .portal-support-reply { grid-template-columns: 1fr; }
}

.portal-team-page { width: min(860px, 100%); margin: 0 auto; }
.portal-team-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.portal-team-stat {
    display: grid;
    justify-items: start;
    gap: 0.15rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--portal-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.45);
    text-align: left;
}
.portal-team-stat i { color: var(--portal-green); font-size: 1rem; }
.portal-team-stat.is-active-tone i { color: #059669; }
.portal-team-stat.is-inactive-tone i { color: #d97706; }
.portal-team-stat strong { font-size: 1.35rem; line-height: 1.1; }
.portal-team-stat span { color: var(--portal-muted); font-size: 0.72rem; font-weight: 600; }
.portal-team-stat.is-active { border-color: var(--portal-green); }
.portal-team-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0.9rem 0; }
.portal-team-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.portal-team-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.8rem; }
.portal-team-toolbar .btn { gap: 0.4rem; }
.portal-team-list { display: grid; gap: 0.65rem; }
.portal-team-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem;
    border: 1px solid var(--portal-line);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
}
.portal-team-card:not([data-team-edit]) { cursor: default; }
.portal-team-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}
.portal-team-card-body { display: grid; min-width: 0; gap: 0.2rem; }
.portal-team-card-top { display: flex; align-items: center; gap: 0.5rem; }
.portal-team-card-top strong { min-width: 0; overflow: hidden; font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-team-card-body small { color: var(--portal-muted); font-size: 0.8rem; }
.portal-team-role {
    justify-self: start;
    margin-top: 0.25rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
    font-size: 0.68rem;
    font-weight: 700;
}
.portal-team-status { margin-left: auto; padding: 0.18rem 0.5rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.portal-team-status.is-active { color: #047857; background: #ecfdf5; }
.portal-team-status.is-suspended { color: #b45309; background: #fff7ed; }
.portal-team-actions { display: grid; gap: 0.35rem; }
.portal-team-action {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
}
.portal-team-action.is-pause { color: #d97706; background: #fff7ed; }
.portal-team-empty { display: grid; justify-items: center; gap: 0.4rem; padding: 2rem 1rem; text-align: center; }
.portal-team-empty i { color: var(--portal-muted); font-size: 1.6rem; }
.portal-team-empty p { max-width: 28rem; margin: 0; color: var(--portal-muted); font-size: 0.8rem; }
.portal-team-form-sub { margin: 0.15rem 0 0; color: var(--portal-muted); font-size: 0.75rem; }
.portal-team-phone-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.6rem; }
.portal-team-phone-row .btn { min-height: 46px; gap: 0.35rem; white-space: nowrap; }
.portal-team-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
}
.portal-team-banner.is-existing { color: var(--portal-green); background: var(--portal-green-soft); border: 1px solid rgba(0, 135, 103, 0.18); }
.portal-team-banner.is-new { color: #1d4ed8; background: #eff6ff; border: 1px solid rgba(37, 99, 235, 0.16); }
.portal-team-pin { display: flex; align-items: center; gap: 0.5rem; }
.portal-team-pin-boxes { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.portal-team-pin-boxes .sys-input { height: 48px; text-align: center; font-size: 1.1rem; font-weight: 700; }
.portal-team-pin-toggle { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 10px; color: var(--portal-muted); background: var(--portal-surface-muted); }
.portal-team-permission {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: var(--portal-surface-muted);
    font-size: 0.86rem;
    font-weight: 600;
}
.portal-team-permission-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: var(--portal-green); background: var(--portal-green-soft); }
@media (max-width: 575.98px) {
    .portal-team-summary { gap: 0.4rem; }
    .portal-team-stat { padding: 0.65rem; }
    .portal-team-phone-row { grid-template-columns: 1fr; }
    .portal-team-card { grid-template-columns: auto minmax(0, 1fr); }
    .portal-team-actions { grid-column: 2; grid-auto-flow: column; justify-content: start; }
}

.portal-trash-page { width: min(760px, 100%); margin: 0 auto; }
.portal-trash-back { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.8rem; color: var(--portal-muted); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.portal-trash-list { display: grid; gap: 0.65rem; }
.portal-trash-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.8rem;
    border: 1px solid var(--portal-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.5);
    color: inherit;
    text-decoration: none;
}
.portal-trash-card.is-item { grid-template-columns: auto minmax(0, 1fr) auto; }
.portal-trash-card > span:nth-child(2) { display: grid; min-width: 0; }
.portal-trash-card strong { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-trash-card small { color: var(--portal-muted); font-size: 0.72rem; }
.portal-trash-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: var(--portal-green); background: var(--portal-green-soft); font-size: 1.15rem; }
.portal-trash-card.is-item .portal-trash-icon { width: 40px; height: 40px; border-radius: 11px; }
.portal-trash-card > b { padding: 0.25rem 0.6rem; border-radius: 999px; color: var(--portal-green); background: rgba(0, 135, 103, 0.1); font-size: 0.8rem; }
.portal-trash-card > .bi-chevron-right { color: var(--portal-muted); }
.portal-trash-actions { display: flex; }
.portal-trash-actions button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 10px; color: var(--portal-green); background: transparent; }
.portal-trash-actions button.is-danger { color: #dc2626; }
.portal-trash-items.is-busy,
#trash-items.is-busy { opacity: 0.65; pointer-events: none; }
.portal-trash-empty { display: grid; justify-items: center; gap: 0.4rem; padding: 2.5rem 1rem; text-align: center; }
.portal-trash-empty i { color: var(--portal-muted); font-size: 1.7rem; }
.portal-trash-empty p { max-width: 24rem; margin: 0; color: var(--portal-muted); font-size: 0.8rem; }
@media (max-width: 575.98px) {
    .portal-trash-card { gap: 0.55rem; padding: 0.75rem; }
}

.portal-profile-page { width: min(560px, 100%); margin: 0 auto; display: grid; gap: 0.75rem; }
.portal-account-card,
.portal-account-pin {
    border: 1px solid var(--portal-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px -18px rgba(0, 135, 103, 0.45);
}
.portal-account-card { display: block; padding: 1.25rem 1.15rem 1.1rem; }
.portal-account-avatar {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    margin: 0 auto;
    place-items: center;
    border: 3px solid var(--portal-green-soft);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 135, 103, 0.35), var(--portal-green-soft));
    color: var(--portal-green-dark);
    font-size: 1.7rem;
    font-weight: 800;
}
.portal-account-avatar span,
.portal-account-avatar img { width: 80px; height: 80px; border-radius: 50%; }
.portal-account-avatar span { display: grid; place-items: center; overflow: hidden; background: var(--portal-green-soft); }
.portal-account-avatar img { display: block; object-fit: cover; }
.portal-account-avatar > i {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--portal-green);
    font-size: 0.75rem;
}
.portal-account-avatar.is-uploading { opacity: 0.6; }
.portal-account-hint { margin: 0.5rem 0 1.15rem; color: var(--portal-muted); font-size: 0.75rem; text-align: center; }
.portal-account-label { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.75rem; color: var(--portal-muted); font-size: 0.78rem; font-weight: 700; }
.portal-account-label i { color: var(--portal-green); }
.portal-account-card hr { margin: 1.1rem 0; border: 0; border-top: 1px solid var(--portal-line); opacity: 1; }
#profile-api-form { display: grid; width: 100%; gap: 0.85rem; }
#profile-api-form .sys-field,
#profile-api-form .btn { width: 100%; }
.portal-account-verify {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: var(--portal-surface-muted);
}
.portal-account-verify.is-verified { border-color: rgba(0, 135, 103, 0.22); background: var(--portal-green-soft); }
.portal-account-verify-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--portal-line); border-radius: 10px; background: #fff; color: var(--portal-muted); }
.portal-account-verify.is-verified .portal-account-verify-icon { color: var(--portal-green); border-color: rgba(0, 135, 103, 0.2); }
.portal-account-verify strong { display: block; font-size: 0.86rem; }
.portal-account-verify small { display: flex; align-items: center; gap: 0.25rem; color: var(--portal-muted); font-size: 0.72rem; }
.portal-account-verify.is-verified small { color: var(--portal-green); }
.portal-account-pin {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9rem 1rem;
    text-align: left;
}
.portal-account-pin > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: #1d4ed8; background: #eff6ff; }
.portal-account-pin strong { display: grid; font-size: 0.9rem; }
.portal-account-pin small { color: var(--portal-muted); font-size: 0.72rem; font-weight: 500; }
.portal-account-pin > .bi-chevron-right { color: var(--portal-muted); }
.portal-profile-dialog-root { position: fixed; inset: 0; z-index: 1080; display: grid; place-items: center; padding: 1rem; }
.portal-profile-dialog-root[hidden] { display: none; }
.portal-profile-dialog-root .portal-unit-modal-backdrop { z-index: 0; }
.portal-profile-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    padding: 1rem;
    border: 1px solid var(--portal-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
#profile-otp-form { display: grid; gap: 0.75rem; margin-top: 0.85rem; }
#profile-otp-form .sys-pin__boxes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#profile-otp-resend { justify-self: end; padding-right: 0; font-size: 0.78rem; font-weight: 700; }
.portal-profile-dialog header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
.portal-profile-dialog header > span,
.portal-profile-pin-head > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--portal-green); background: var(--portal-green-soft); }
.portal-profile-dialog h2 { margin: 0; font-size: 1rem; }
.portal-profile-dialog header button { border: 0; background: transparent; color: var(--portal-muted); }
.portal-profile-otp-phone { display: flex; align-items: center; gap: 0.4rem; margin: 0.75rem 0 0.4rem; padding: 0.5rem 0.65rem; border: 1px solid var(--portal-line); border-radius: 10px; background: var(--portal-surface-muted); font-weight: 700; }
.portal-profile-dialog > p { margin: 0; color: var(--portal-muted); font-size: 0.78rem; }
#profile-otp-status { display: block; margin-top: 0.45rem; color: var(--portal-green); font-size: 0.72rem; font-weight: 700; }
.portal-profile-digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
#profile-otp-boxes { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0.35rem; }
.portal-profile-digits .sys-input { height: 48px; text-align: center; font-size: 1.05rem; font-weight: 700; }
.portal-profile-pin-toggle { justify-self: end; padding-right: 0; font-size: 0.78rem; font-weight: 700; }
.portal-profile-pin-head { display: flex; align-items: center; gap: 0.65rem; }
.portal-profile-pin-head p { margin: 0.1rem 0 0; color: var(--portal-muted); font-size: 0.75rem; }
.shell-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.portal-garage-tabs a { gap: .25rem; padding: 0 .35rem; font-size: .72rem; }
.portal-garage-tabs a span { line-height: 1.15; text-align: center; }
.portal-garage-filterbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .35rem;
    padding: .55rem .15rem .65rem;
    border-bottom: 1px solid var(--portal-line);
    background: #fff;
}
.portal-garage-chip {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: .35rem;
    height: 36px;
    padding: 0 .55rem;
    border: 1px solid var(--portal-line);
    border-radius: 9px;
    background: var(--portal-bg);
    color: var(--portal-ink);
    font-size: .78rem;
    font-weight: 700;
}
.portal-garage-chip select {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}
.portal-garage-chip.is-locked { cursor: default; }
.portal-garage-chip > i:last-child,
.portal-garage-chip > i:first-child { color: var(--portal-muted); }
.portal-garage-month { position: relative; min-width: 0; flex: 1; }
.portal-garage-month .portal-garage-chip { width: 100%; }
.portal-garage-month-pop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    display: grid;
    gap: .45rem;
    width: min(240px, 70vw);
    padding: .55rem;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(31, 70, 58, .16);
}
.portal-garage-month-pop button,
.portal-garage-month-pop label { font-size: .78rem; font-weight: 700; }
.portal-garage-month-pop button {
    border: 0;
    border-radius: 8px;
    background: var(--portal-bg);
    text-align: left;
    padding: .45rem .55rem;
}
.portal-garage-month-pop input { width: 100%; margin-top: .25rem; }
.portal-garage-icon-btn {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--portal-green);
}
.portal-garage-icon-btn.is-soft { color: var(--portal-green); background: var(--portal-green-soft); }
.portal-garage-icon-btn.is-soft.is-active { color: #fff; background: var(--portal-green); }
.portal-garage-icon-btn.is-pdf { background: var(--portal-forest, #2D4F41); }
.portal-garage-type-tabs { margin-bottom: .45rem; }
.portal-g-list { display: grid; gap: .4rem; }
.portal-gcard,
.portal-gpay,
.portal-grow,
.portal-greport {
    border: 1px solid rgba(45, 79, 65, .14);
    border-radius: 10px;
    background: #fff;
}
.portal-gcard { display: flex; align-items: center; padding: .35rem .15rem .35rem .45rem; }
.portal-gcard-open {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: .55rem;
    border: 0;
    background: transparent;
    text-align: left;
}
.portal-gcard-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 10px;
    font-size: .95rem;
}
.portal-gcard-icon.is-booked { color: var(--portal-green); background: var(--portal-green-soft); }
.portal-gcard-icon.is-vacant { color: var(--portal-forest, #2D4F41); background: #e7f0ec; }
.portal-gcard-copy { display: grid; min-width: 0; flex: 1; }
.portal-gcard-title { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.portal-gcard-title strong { overflow: hidden; font-size: .86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.portal-gcard-title em,
.portal-gpay-amount em {
    padding: .1rem .35rem;
    border-radius: 99px;
    background: #edf2f0;
    color: #52615b;
    font-size: .58rem;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
.portal-gcard-title em.is-booked { color: var(--portal-green); background: var(--portal-green-soft); }
.portal-gcard-title em.is-vacant { color: var(--portal-forest, #2D4F41); background: #e7f0ec; }
.portal-gcard-copy small,
.portal-grow small { overflow: hidden; color: var(--portal-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-gcard-open > b { color: var(--portal-forest, #2D4F41); font-size: .8rem; white-space: nowrap; }
.portal-garage-menu > div { width: 220px; }
.portal-gpay { padding: .5rem .55rem; }
.portal-gpay-top { display: flex; align-items: flex-start; gap: .5rem; }
.portal-gpay-amount { display: grid; justify-items: end; }
.portal-gpay-amount b { color: #047857; font-size: .8rem; }
.portal-gpay-amount em { background: transparent; color: var(--portal-green); }
.portal-gcard-copy small.is-period { font-weight: 700; }
.portal-gpay-actions { display: flex; align-items: center; gap: .3rem; margin-top: .45rem; }
.portal-gpay-actions > span { flex: 1; }
.portal-gpay-receipt {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 30px;
    padding: 0 .55rem;
    border: 1px solid var(--portal-green);
    border-radius: 8px;
    color: var(--portal-green);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
}
.portal-gpay-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--portal-green);
    background: var(--portal-green-soft);
}
.portal-gpay-icon.is-danger { color: #be123c; background: #fde8ee; }
.portal-grow { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; }
.portal-grow > span { display: grid; min-width: 0; flex: 1; }
.portal-grow strong { font-size: .8rem; }
.portal-grow > b { color: #047857; font-size: .8rem; white-space: nowrap; }
.portal-greport { overflow: hidden; }
.portal-greport header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .75rem;
    background: rgba(0, 135, 103, .08);
    border-bottom: 1px solid rgba(0, 135, 103, .12);
}
.portal-greport header > span:first-child {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    color: var(--portal-green);
    background: rgba(0, 135, 103, .12);
}
.portal-greport header small { color: var(--portal-green-dark, #006b52); font-size: .68rem; font-weight: 700; }
.portal-greport header strong,
.portal-greport header em { display: block; }
.portal-greport header strong { font-size: .84rem; }
.portal-greport header em { color: var(--portal-muted); font-size: .68rem; font-style: normal; font-weight: 600; }
.portal-greport-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .7rem .4rem; }
.portal-greport-stats div { display: grid; justify-items: center; gap: .15rem; border-right: 1px solid var(--portal-line); }
.portal-greport-stats div:last-child { border-right: 0; }
.portal-greport-stats small { color: var(--portal-muted); font-size: .64rem; font-weight: 700; }
.portal-greport-stats b { font-size: .82rem; }
.portal-greport-stats div:first-child b { color: var(--portal-forest, #2D4F41); font-size: 1rem; }
.portal-greport footer { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .5rem .75rem .65rem; border-top: 1px solid var(--portal-line); }
.portal-greport footer span { color: var(--portal-muted); font-size: .68rem; font-weight: 700; }
.portal-greport footer em {
    padding: .12rem .45rem;
    border: 1px solid var(--portal-line);
    border-radius: 99px;
    background: #f4f7f6;
    font-size: .64rem;
    font-style: normal;
    font-weight: 700;
}
.portal-g-empty { display: grid; justify-items: center; gap: .35rem; padding: 2.5rem 1rem; text-align: center; }
.portal-g-empty i { color: var(--portal-muted); font-size: 1.6rem; }
.portal-g-empty p { max-width: 280px; margin: 0; color: var(--portal-muted); font-size: .78rem; }
.portal-g-more { display: grid; gap: .4rem; margin-top: .35rem; }
.portal-g-more p { margin: 0; color: var(--portal-muted); font-size: .72rem; text-align: center; }
.portal-g-highlight { margin: .65rem 0 0; }
.portal-g-warning { margin: .45rem 0 0; color: #be123c; font-size: .82rem; }
.building-detail-panel .portal-garage-filterbar { margin-top: .2rem; }

.portal-tutorials { width: min(1100px, 100%); margin: 0 auto; }
.portal-tutorials-note {
    padding: .85rem 1rem;
    border-radius: 12px;
    background: #fff8e8;
    color: #92400e;
    font-size: .88rem;
}
.portal-tutorials-note.is-error { background: #fef2f2; color: #be123c; }
.portal-tutorials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}
.portal-tutorial-card {
    display: grid;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-align: left;
    cursor: pointer;
}
.portal-tutorial-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.portal-tutorial-thumb { position: relative; display: block; padding-top: 56.25%; background: #dee2e6; }
.portal-tutorial-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portal-tutorial-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 2rem;
    opacity: 0;
}
.portal-tutorial-card:hover .portal-tutorial-play { opacity: 1; }
.portal-tutorial-copy { display: grid; gap: .2rem; padding: .55rem .7rem .7rem; }
.portal-tutorial-copy strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .9rem;
    line-height: 1.35;
}
.portal-tutorial-copy small { color: var(--portal-muted); }
.portal-tutorials-pages { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.portal-tutorials-pages a,
.portal-tutorials-pages span {
    padding: .35rem .7rem;
    border: 1px solid var(--portal-line);
    border-radius: 8px;
    background: #fff;
    color: var(--portal-ink);
    font-size: .82rem;
    text-decoration: none;
}
.portal-tutorials-pages span { color: var(--portal-muted); }
.portal-tutorial-modal { width: min(860px, calc(100% - 1.5rem)); }
.portal-tutorial-frame { position: relative; padding-top: 56.25%; background: #000; }
.portal-tutorial-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }