/* /Components/Account/Pages/AccessDenied.razor.rz.scp.css */
.access-denied-icon[b-knfkd0wrk0] {
    font-size: 3rem;
    color: var(--color-danger);
}
/* /Components/Account/Pages/CompleteExternalRegistration.razor.rz.scp.css */
.external-complete-outer[b-lhzkq5nvto] {
    min-height: calc(100vh - 66px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.external-complete-card[b-lhzkq5nvto] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.external-complete-card .card-title[b-lhzkq5nvto] {
    font-weight: 700;
    color: var(--text-primary);
}
/* /Components/Account/Pages/PendingApproval.razor.rz.scp.css */
.pending-icon[b-amugnp2h0l] {
    font-size: 4rem;
    color: var(--primary-color);
    display: inline-block;
}
/* /Components/Account/Pages/Rejected.razor.rz.scp.css */
.rejected-icon[b-3rbgj9cit3] {
    font-size: 4rem;
    color: var(--color-danger);
    display: inline-block;
}
/* /Components/Layout/AppTopBar.razor.rz.scp.css */
/* =====================================================================
   AppTopBar — unified authenticated top bar
   Height: 64px desktop / 56px mobile
   Position: sticky top-0, z-index 30
   ===================================================================== */

.app-topbar[b-7qki5xm6yt] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Logo pane — fixed 64px for operational roles (aligns with the 64px icon rail).
   Brand overrides this to auto-width below. */
.topbar-logo-pane[b-7qki5xm6yt] {
    width: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
}

.topbar-logo-link[b-7qki5xm6yt] {
    display: flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    opacity: 1;
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.topbar-logo-link:hover[b-7qki5xm6yt] {
    opacity: 0.85;
    text-decoration: none;
}

/* Operational: desktop shows icon-only; full wordmark hidden until mobile */
.logo-full[b-7qki5xm6yt] {
    display: none;
}

.logo-icon[b-7qki5xm6yt] {
    display: block;
}

/* Content pane — takes the remaining horizontal space */
.topbar-content-pane[b-7qki5xm6yt] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 100%;
    /* Matches the brand-nav and utility-cluster inner gaps so every action icon
       in the right cluster is spaced identically (no wider seam at the seams). */
    gap: 0.25rem;
}

/* Search area — flex-grows to fill center space. Hosts either the default
   omni-search trigger (capped at 600px on the trigger itself) or a
   page-supplied SearchSlot (e.g. NavSearchBar on /search). */
.topbar-search-area[b-7qki5xm6yt] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.topbar-search-trigger[b-7qki5xm6yt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 600px;
    padding: 0.44rem 0.875rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
    text-align: left;
}

.topbar-search-trigger:hover[b-7qki5xm6yt] {
    background: var(--surface-raised);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.topbar-search-trigger:focus-visible[b-7qki5xm6yt] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.topbar-search-icon[b-7qki5xm6yt] {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.topbar-search-placeholder[b-7qki5xm6yt] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-search-kbd[b-7qki5xm6yt] {
    flex-shrink: 0;
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-family: var(--font-sans);
    padding: 0.2rem 0.35rem;
    border-radius: var(--border-radius-pill);
    line-height: 1.3;
    border: 1px solid var(--border-color);
    user-select: none;
}

/* Hoastie AI indicator — sits to the right of the placeholder so users see
   the omni-search is ALSO an entry point to the hoastie assistant. */
.topbar-search-hoastie-icon[b-7qki5xm6yt] {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--primary-color);
    line-height: 1;
}

/* On /search the page owns the search surface, so this global trigger collapses
   to a single sparkle icon (still opens the hoastie command palette). */
.topbar-search-area.is-search-page[b-7qki5xm6yt] {
    flex: 0 0 auto;
}

/* Tablet/desktop: the collapsed sparkle would otherwise be stranded hard-left by
   the content-pane's space-between. Grow the search area into a left spacer and
   right-align the sparkle so it joins the brand-nav + utility cluster — sparkle,
   the saved/bookings/messages icons, the bell, and the account all sit right. */
@media (min-width: 768px) {
    .topbar-search-area.is-search-page[b-7qki5xm6yt] {
        flex: 1 1 auto;
        justify-content: flex-end;
    }
}

/* Sparkle collapses to the same 40×40 borderless icon-button as the bell/nav
   icons — it stays distinct by its primary-coloured glyph, not by a chrome ring. */
.topbar-search-trigger--icon[b-7qki5xm6yt] {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    flex-shrink: 0;
}

.topbar-search-trigger--icon:hover[b-7qki5xm6yt] {
    background: var(--surface-subtle);
    border-color: transparent;
    box-shadow: none;
}

.topbar-search-trigger--icon .topbar-search-icon[b-7qki5xm6yt],
.topbar-search-trigger--icon .topbar-search-placeholder[b-7qki5xm6yt],
.topbar-search-trigger--icon .topbar-search-kbd[b-7qki5xm6yt] {
    display: none;
}

.topbar-search-trigger--icon .topbar-search-hoastie-icon[b-7qki5xm6yt] {
    font-size: 1.1rem;
}


/* Utility cluster — notifications bell + language switcher + account dropdown.
   The bell + sparkles button were unified into a single NotificationsBell
   component (.razor / .razor.css colocated). The legacy topbar-icon-btn /
   topbar-hoastie-btn styles were removed when the sparkles trigger went away. */
.topbar-utility-cluster[b-7qki5xm6yt] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* =====================================================================
   Brand mode — no sidebar rail, so the logo pane sizes to content.
   Overrides the fixed 64px width on .topbar-logo-pane.
   ===================================================================== */
.topbar-brand .topbar-logo-pane[b-7qki5xm6yt] {
    width: auto;
    border-right: none;
    padding: 0 1rem;
    justify-content: flex-start;
}

.topbar-brand-nav[b-7qki5xm6yt] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    /* No margin-inline: spacing to the neighbouring sparkle / utility icons is
       owned entirely by the content-pane gap so every icon is evenly spaced. */
    /* Never let the nav links compress the search bar — they are a fixed-width
       cluster. Overflow is prevented by the text-collapse rule below. */
    flex-shrink: 0;
}

.topbar-brand-nav-link[b-7qki5xm6yt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}

.topbar-brand-nav-link:hover[b-7qki5xm6yt] {
    background: var(--background-light);
    color: var(--text-primary);
}

.topbar-brand-nav-link:focus-visible[b-7qki5xm6yt] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Icons-only brand nav: labels collapse to tooltips so the cluster stays compact.
   The <span> remains in the DOM as the accessible name. */
.topbar-brand-nav--icons .topbar-brand-nav-link span[b-7qki5xm6yt] {
    display: none;
}

/* Icon-only links match the NotificationsBell button spec exactly: 40×40
   borderless square, 8px radius, 1.1rem glyph — so saved/bookings/messages,
   the bell, and the sparkle all read as one uniform row of action icons. */
.topbar-brand-nav--icons .topbar-brand-nav-link[b-7qki5xm6yt] {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.1rem;
}

.topbar-brand-nav--icons .topbar-brand-nav-link:hover[b-7qki5xm6yt] {
    background: var(--surface-subtle);
}

/* =====================================================================
   Narrow desktop (992px – 1139px): show brand-nav as icon-only links so
   the search bar has room to breathe without any element overlapping.
   Text labels return at 1140px where there is sufficient runway.
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1139px) {
    .topbar-brand-nav-link span[b-7qki5xm6yt] {
        display: none;
    }

    .topbar-brand-nav-link[b-7qki5xm6yt] {
        padding: 0.5rem;
    }
}

@media (max-width: 991px) {
    .topbar-brand-nav[b-7qki5xm6yt] {
        display: none;
    }
}

/* =====================================================================
   Tablet (768px – 991px): logo pane already fixed 64px for operational;
   Brand pane stays auto-width — nothing to override.
   ===================================================================== */

/* =====================================================================
   Mobile (< 768px): 56px height, wordmark logo, compact search + cluster
   ===================================================================== */
@media (max-width: 767px) {
    .app-topbar[b-7qki5xm6yt] {
        height: 56px;
    }

    /* On mobile the bottom nav replaces the rail — show the full wordmark
       for all roles so the header reads as the hoastnow brand. */
    .topbar-logo-pane[b-7qki5xm6yt] {
        width: auto;
        border-right: none;
        padding: 0 0.5rem;
        justify-content: flex-start;
    }

    .logo-full[b-7qki5xm6yt] {
        display: block;
    }

    .logo-icon[b-7qki5xm6yt] {
        display: none;
    }

    .topbar-content-pane[b-7qki5xm6yt] {
        padding: 0 0.5rem;
        gap: 0.25rem;
    }

    /* Collapse the search trigger to icon-only on small phones */
    .topbar-search-placeholder[b-7qki5xm6yt],
    .topbar-search-hoastie-icon[b-7qki5xm6yt],
    .topbar-search-kbd[b-7qki5xm6yt] {
        display: none;
    }

    .topbar-search-trigger[b-7qki5xm6yt] {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 8px;
        flex-shrink: 0;
    }

    /* Default trigger uses its own fixed 40px width; NavSearchBar (on /search)
       relies on this min-width:0 so its children can shrink within the viewport. */
    .topbar-search-area[b-7qki5xm6yt] {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }
}

/* =====================================================================
   Narrow phones (≤ 479px): scale the wordmark SVG down to fit
   ===================================================================== */
@media (max-width: 479px) {
    .topbar-logo-link .logo-full svg[b-7qki5xm6yt],
    .topbar-brand .topbar-logo-link svg[b-7qki5xm6yt] {
        width: 150px;
        height: 45px;
    }
}
/* /Components/Layout/DeveloperLayout.razor.rz.scp.css */
/* ============================================================
   Developer Layout — DeveloperLayout.razor.css
   ============================================================ */

/* ----- Header ----- */
.dev-header[b-98y0iigoij] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.dev-header-inner[b-98y0iigoij] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 64px;
    max-width: 1400px;
    margin: 0 auto;
}

.dev-logo[b-98y0iigoij] {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 0;
}

.dev-logo:hover[b-98y0iigoij] {
    opacity: 0.85;
}

.dev-badge[b-98y0iigoij] {
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    white-space: nowrap;
}

.dev-header-nav[b-98y0iigoij] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    margin-left: 1rem;
}

.dev-header-link[b-98y0iigoij] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}

.dev-header-link:hover[b-98y0iigoij] {
    color: var(--text-primary);
    background: var(--background-light);
}

.dev-header-link.active[b-98y0iigoij] {
    color: var(--primary-color);
    font-weight: 600;
}

.dev-header-actions[b-98y0iigoij] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-get-keys[b-98y0iigoij] {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-inverse);
    background: var(--action-color);
    border: 1.5px solid var(--action-color);
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border-radius: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.btn-get-keys:hover[b-98y0iigoij] {
    color: var(--text-inverse);
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    filter: brightness(0.93);
}

.dev-back-link[b-98y0iigoij] {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.dev-back-link:hover[b-98y0iigoij] {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: var(--background-light);
}

.dev-mobile-menu-btn[b-98y0iigoij] {
    display: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.dev-mobile-menu-btn:hover[b-98y0iigoij] {
    background: var(--background-light);
}

/* ----- Mobile Nav Dropdown ----- */
.dev-mobile-nav[b-98y0iigoij] {
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dev-mobile-link[b-98y0iigoij] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.dev-mobile-link:hover[b-98y0iigoij],
.dev-mobile-link.active[b-98y0iigoij] {
    color: var(--primary-color);
    background: rgba(255, 56, 92, 0.06);
}

.dev-mobile-cta[b-98y0iigoij] {
    color: var(--primary-color);
    font-weight: 600;
}

/* ----- Two-column layout ----- */
.dev-layout[b-98y0iigoij] {
    display: flex;
    min-height: calc(100vh - 64px - 56px);
    max-width: 1400px;
    margin: 0 auto;
}

/* ----- Sidebar ----- */
.dev-sidebar[b-98y0iigoij] {
    width: 256px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    background: var(--surface-subtle);
}

.dev-sidebar-nav[b-98y0iigoij] {
    position: sticky;
    top: 80px;
    padding: 1.5rem 0 2rem;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
}

.dev-sidebar-section[b-98y0iigoij] {
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.dev-sidebar-label[b-98y0iigoij] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    padding: 0 0.5rem;
    margin-bottom: 0.4rem;
}

.dev-sidebar-link[b-98y0iigoij] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: all 0.15s ease;
    margin-bottom: 0.1rem;
}

.dev-sidebar-link:hover[b-98y0iigoij] {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
}

.dev-sidebar-link.active[b-98y0iigoij] {
    color: var(--primary-color);
    background: rgba(255, 56, 92, 0.08);
    font-weight: 600;
}

.dev-sidebar-sublink[b-98y0iigoij] {
    margin-left: 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* ----- Content area ----- */
.dev-content[b-98y0iigoij] {
    flex: 1;
    min-width: 0;
    padding: 2.5rem 3rem 4rem;
}

/* ----- Footer ----- */
.dev-footer[b-98y0iigoij] {
    border-top: 1px solid var(--border-color);
    background: var(--surface-subtle);
}

.dev-footer-inner[b-98y0iigoij] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.dev-footer-copy[b-98y0iigoij] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dev-footer-links[b-98y0iigoij] {
    display: flex;
    gap: 1.25rem;
}

.dev-footer-link[b-98y0iigoij] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.dev-footer-link:hover[b-98y0iigoij] {
    color: var(--text-primary);
}

.dev-footer-language[b-98y0iigoij] {
    display: inline-flex;
    align-items: center;
}

.dev-footer-language[b-98y0iigoij]  .language-switcher-toggle {
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem !important;
}

.dev-footer-language[b-98y0iigoij]  .language-switcher-toggle:hover,
.dev-footer-language[b-98y0iigoij]  .language-switcher-toggle:focus-visible {
    color: var(--text-primary);
    background-color: transparent;
}

.dev-footer-language[b-98y0iigoij]  .language-switcher-label {
    font-size: 0.8rem;
    font-weight: 400;
}

.dev-footer-language[b-98y0iigoij]  .language-switcher-toggle .bi-translate {
    font-size: 0.95rem;
}

@media (max-width: 575.98px) {
    .dev-footer-language[b-98y0iigoij]  .language-switcher-label {
        display: inline;
    }
    .dev-footer-language[b-98y0iigoij]  .language-switcher-caret {
        display: inline;
    }
}

/* ----- Responsive ----- */
@media (max-width: 991px) {
    .dev-header-nav[b-98y0iigoij],
    .dev-header-actions[b-98y0iigoij] {
        display: none;
    }

    .dev-mobile-menu-btn[b-98y0iigoij] {
        display: flex;
        margin-left: auto;
    }

    .dev-sidebar[b-98y0iigoij] {
        display: none;
    }

    .dev-content[b-98y0iigoij] {
        padding: 1.5rem 1.25rem 3rem;
    }
}

@media (max-width: 575px) {
    .dev-header-inner[b-98y0iigoij] {
        padding: 0 1rem;
    }

    .dev-badge[b-98y0iigoij] {
        display: none;
    }
}
/* /Components/Layout/Footer.razor.rz.scp.css */
footer[b-8llogmoqm9] {
    background-color: var(--background-light);
}

footer h6[b-8llogmoqm9] {
    color: var(--text-primary);
    font-size: 0.875rem;
}

footer a:hover[b-8llogmoqm9] {
    color: var(--primary-color) !important;
}

footer svg[b-8llogmoqm9] {
    transition: transform 0.2s ease;
}

footer a:hover svg[b-8llogmoqm9] {
    transform: scale(1.1);
}

.footer-meta-divider[b-8llogmoqm9] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1;
}

.footer-meta[b-8llogmoqm9]  .language-switcher-toggle {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    padding: 0.15rem 0.4rem !important;
}

.footer-meta[b-8llogmoqm9]  .language-switcher-toggle:hover,
.footer-meta[b-8llogmoqm9]  .language-switcher-toggle:focus-visible {
    color: var(--primary-color);
    background-color: transparent;
}

.footer-meta[b-8llogmoqm9]  .language-switcher-label {
    font-size: 0.8125rem;
    font-weight: 400;
}

.footer-meta[b-8llogmoqm9]  .language-switcher-toggle .bi-translate {
    font-size: 0.95rem;
}

@media (max-width: 575.98px) {
    .footer-meta[b-8llogmoqm9]  .language-switcher-label {
        display: inline;
    }
    .footer-meta[b-8llogmoqm9]  .language-switcher-caret {
        display: inline;
    }
}
/* /Components/Layout/GlobalPageHeader.razor.rz.scp.css */
.page-header-container[b-s2hp5k2knd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    /* Band sits at the top of .content-area, in flow above <main>. Top padding
       gives it breathing room under the topbar; pages bring their own mt-4,
       so no bottom padding here. Left padding on .page-header-info (1.5rem)
       aligns the title with the pages' px-4 containers. */
    padding-top: var(--space-5);
    padding-right: var(--space-4);
    flex-wrap: wrap;
}

.page-header-info[b-s2hp5k2knd] {
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1.5rem;
    flex: 1 1 auto;
}

.page-header-icon[b-s2hp5k2knd] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--background-light);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 1px solid var(--border-color);
}

.page-header-text[b-s2hp5k2knd] {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.page-header-title[b-s2hp5k2knd] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-header-subtitle[b-s2hp5k2knd] {
    margin: 0.1rem 0 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-header-action[b-s2hp5k2knd] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: opacity var(--motion-fast) var(--ease-standard);
}

@media (max-width: 991px) {
    .page-header-info[b-s2hp5k2knd] {
        padding-left: 1rem;
    }
}

@media (max-width: 575px) {
    /* Action wraps below the title on narrow phones */
    .page-header-container[b-s2hp5k2knd] {
        align-items: flex-start;
    }

    .page-header-action[b-s2hp5k2knd] {
        padding-left: 1rem;
    }
}

@media (max-width: 768px) {
    .page-header-subtitle[b-s2hp5k2knd] {
        display: none;
    }
    .page-header-icon[b-s2hp5k2knd] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}
/* /Components/Layout/LoginDisplay.razor.rz.scp.css */
.profile-toggle[b-spm5oc9mlz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.profile-toggle:hover[b-spm5oc9mlz],
.profile-toggle:focus-visible[b-spm5oc9mlz] {
    background-color: var(--background-light);
    color: var(--primary-color);
    text-decoration: none;
    outline: none;
}

.profile-toggle .bi-person-circle[b-spm5oc9mlz] {
    font-size: 1.05rem;
}

.profile-toggle-label[b-spm5oc9mlz] {
    font-size: 0.875rem;
    font-weight: 500;
}

.profile-toggle-caret[b-spm5oc9mlz] {
    font-size: 0.75rem;
    margin-left: 0.15rem;
}

.dropdown-item:hover[b-spm5oc9mlz] {
    background-color: var(--background-light);
    cursor: pointer;
}

/* Hide the name on tight mobile widths to keep header compact, matching the language switcher. */
@media (max-width: 575.98px) {
    .profile-toggle-label[b-spm5oc9mlz] {
        display: none;
    }
    .profile-toggle-caret[b-spm5oc9mlz] {
        display: none;
    }
}

/* Ensure the dropdown doesn't overflow off screen on small devices */
@media (max-width: 767px) {
    .position-absolute.end-0[b-spm5oc9mlz] {
        right: 0 !important;
        min-width: 180px;
        max-width: calc(100vw - 1rem);
    }
}

@media (max-width: 479px) {
    .public-auth-links[b-spm5oc9mlz] {
        gap: 0.5rem !important;
    }

    .public-auth-link[b-spm5oc9mlz] {
        min-height: 44px;
        padding: 0.65rem 1rem !important;
        font-size: 0.9rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-body[b-7k6u16yt46] {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 64px); /* 64px = AppTopBar height */
}

/* ============================================================
   Desktop constrained layout (≥768px)
   - .body-app is a viewport-filling column so the document body
     never grows taller than the viewport.
   - .app-body (row) and .content-area are sized to remaining space
     with overflow hidden.
   - <main> (or its descendants) is the only scroller.
   This keeps the left icon rail (AppSidebar) and top chrome fixed
   while only the page content area scrolls.
   Mobile keeps natural document scroll + fixed bottom nav.
   ============================================================ */
@media (min-width: 768px) {
    .body-app[b-7k6u16yt46] {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .app-body[b-7k6u16yt46] {
        flex: 1;
        min-height: 0;
        align-items: stretch;
        overflow: hidden;
    }

    .content-area[b-7k6u16yt46] {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    main[b-7k6u16yt46] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        background-color: var(--background-light);
    }
}


.gated-header[b-7k6u16yt46] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background-color: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
}

.gated-main[b-7k6u16yt46] {
    min-height: calc(100vh - 90px);
    background-color: var(--background-light);
    padding: 2rem 1rem;
}

/* ---------- Focused immersive flow (booking wizard + confirmation) ----------
   Slim sticky header with only the logo and a single exit (X) action.
   No global search, no sidebar, no role switcher — full attention on the form. */
.focused-header[b-7k6u16yt46] {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.focused-brand[b-7k6u16yt46] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.focused-brand:hover[b-7k6u16yt46] {
    opacity: 0.85;
}

.focused-exit-button[b-7k6u16yt46] {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    padding: 0;
    text-decoration: none;
}

.focused-exit-button:hover[b-7k6u16yt46],
.focused-exit-button:focus-visible[b-7k6u16yt46] {
    background-color: var(--background-light);
    border-color: var(--text-primary);
    color: var(--text-primary);
    outline: none;
}

.focused-exit-button:focus-visible[b-7k6u16yt46] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 18%, transparent);
}

.focused-main[b-7k6u16yt46] {
    min-height: calc(100vh - 65px);
    background-color: var(--background-light);
    padding: 0;
}

.focused-container[b-7k6u16yt46] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}

@media (max-width: 767px) {
    .focused-header[b-7k6u16yt46] {
        padding: 0.5rem 0.85rem;
    }

    .focused-brand svg[b-7k6u16yt46] {
        width: 120px;
        height: 36px;
    }

    .focused-exit-button[b-7k6u16yt46] {
        width: 36px;
        height: 36px;
    }

    .focused-container[b-7k6u16yt46] {
        padding: 1rem 1rem 2.5rem;
    }
}

.content-area[b-7k6u16yt46] {
    flex: 1;
    min-width: 0;
    overflow-x: clip;
}

/* Brand role: no desktop sidebar, content expands to fill the full row */
.content-area.brand-fullwidth[b-7k6u16yt46] {
    width: 100%;
}

main[b-7k6u16yt46] {
    background-color: var(--background-light);
}

/* Mobile only: keep a tall main so page bg fills short-content screens (document scroll is active on <768px). */
@media (max-width: 767px) {
    main[b-7k6u16yt46] {
        min-height: calc(100vh - 64px);
    }
}

.navbar-brand[b-7k6u16yt46] {
    line-height: 0;
}

.navbar-brand:hover[b-7k6u16yt46] {
    opacity: 0.85;
}

/* ── Public header: transparent (hero pages, above fold) ─────────── */
.public-header-wrap[b-7k6u16yt46] {
    --public-chrome-height: 4.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

@media (max-width: 991px) {
    .public-header-wrap[b-7k6u16yt46] {
        /* Logo row + mobile nav strip — hero pages pad below this. */
        --public-chrome-height: 7.75rem;
    }
}

/* Desktop hero pages: immersive fixed header over the photo. */
@media (min-width: 992px) {
    .public-header-wrap:not(.header-scrolled)[b-7k6u16yt46] {
        position: fixed;
        inset: 0 0 auto 0;
    }
}

.public-header-wrap:not(.header-scrolled) .logo-word-secondary[b-7k6u16yt46] {
    fill: white;
    transition: fill 0.3s ease;
}

.public-header-wrap:not(.header-scrolled) .nav-link[b-7k6u16yt46] {
    color: white;
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-color: transparent;
}

.public-header-wrap:not(.header-scrolled) .nav-link:hover[b-7k6u16yt46],
.public-header-wrap:not(.header-scrolled) .nav-link:focus-visible[b-7k6u16yt46] {
    opacity: 1;
    color: white;
    background: transparent;
    border-color: transparent;
}

.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-outline-primary {
    background: transparent;
    border-color: transparent;
    color: white;
    box-shadow: none;
}

.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-outline-primary:hover,
.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-outline-primary:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: white;
}

.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-primary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: white;
    box-shadow: none;
}

.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-primary:hover,
.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-primary:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: white;
    color: white;
}

.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .profile-toggle {
    color: white;
}

.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .profile-toggle:hover,
.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .profile-toggle:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
}

.public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .btn-link {
    color: white;
}

/* ── Public header: frosted-glass (scrolled past hero, or non-hero pages) ── */
.public-header-wrap.header-scrolled[b-7k6u16yt46] {
    background: color-mix(in srgb, white 90%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--border-color);
}

.public-header-wrap.header-scrolled .logo-word-secondary[b-7k6u16yt46] {
    fill: #222222;
    transition: fill 0.3s ease;
}


.public-nav-links[b-7k6u16yt46] {
    gap: 1.5rem;
}

.nav-link[b-7k6u16yt46] {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 0.35rem 0;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Public header nav link hover/focus: keep text-primary and suppress underline. */
.nav-link:hover[b-7k6u16yt46],
.nav-link:focus-visible[b-7k6u16yt46] {
    color: var(--text-primary);
    text-decoration: none;
}

.public-header-row[b-7k6u16yt46] {
    gap: 1rem;
}

.public-header-brand-group[b-7k6u16yt46] {
    min-width: 0;
}

/* Public (unauthenticated) mobile nav strip */
.public-mobile-nav[b-7k6u16yt46] {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-top: 0.25rem;
    position: relative;
}

/* Right-edge fade gives users a visual cue that the strip is scrollable */
.public-mobile-nav[b-7k6u16yt46]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to left, var(--surface-raised) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.public-mobile-nav-scroll[b-7k6u16yt46] {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 0.25rem;
}

.public-mobile-nav-scroll[b-7k6u16yt46]::-webkit-scrollbar {
    display: none;
}

.public-mobile-nav-link[b-7k6u16yt46] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.public-mobile-nav-link:hover[b-7k6u16yt46] {
    color: var(--text-primary);
    text-decoration: none;
}

.public-mobile-nav-link.active[b-7k6u16yt46] {
    color: var(--text-primary);
    font-weight: 700;
    border-bottom-color: var(--text-primary);
}

/* Mobile/tablet: header + nav sit above the hero in normal document flow. */
@media (max-width: 991px) {
    .public-header-wrap:not(.header-scrolled)[b-7k6u16yt46] {
        position: sticky;
        top: 0;
        background: var(--surface-white);
        border-bottom: 1px solid var(--border-color);
    }

    .public-header-wrap:not(.header-scrolled) .logo-word-secondary[b-7k6u16yt46] {
        fill: #222222;
    }

    .public-header-wrap:not(.header-scrolled) .nav-link[b-7k6u16yt46] {
        color: var(--text-secondary);
        opacity: 1;
        text-shadow: none;
    }

    .public-header-wrap:not(.header-scrolled) .nav-link:hover[b-7k6u16yt46],
    .public-header-wrap:not(.header-scrolled) .nav-link:focus-visible[b-7k6u16yt46] {
        color: var(--text-primary);
    }

    .public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-outline-primary {
        background: transparent;
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .public-auth-link.btn-primary {
        background: var(--action-color);
        border: 1.5px solid var(--action-color);
        color: var(--text-inverse);
    }

    .public-header-wrap:not(.header-scrolled)[b-7k6u16yt46]  .btn-link {
        color: var(--text-primary);
    }

    .public-header-wrap:not(.header-scrolled) .public-mobile-nav-link.active[b-7k6u16yt46] {
        color: var(--text-primary);
        border-bottom-color: var(--primary-color);
    }
}

#blazor-error-ui[b-7k6u16yt46] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-7k6u16yt46] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Phone (< 768px): sidebar is gone, content fills full width */
@media (max-width: 767px) {
    .app-body[b-7k6u16yt46] {
        flex-direction: column;
    }

    .content-area[b-7k6u16yt46] {
        width: 100%;
    }

    /* Pad content so nothing hides behind the fixed bottom tab bar */
    .content-area.has-mobile-nav[b-7k6u16yt46] {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* Narrow phones (≤479px): keep header on one row and restore Airbnb-style
   tab/underline nav links — no pill borders or background fills. */
@media (max-width: 479px) {
    .public-header[b-7k6u16yt46] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Single row: logo left, buttons right — no wrapping */
    .public-header-row[b-7k6u16yt46] {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }

    .public-header-brand-group[b-7k6u16yt46] {
        width: auto;
        flex-shrink: 0;
    }

    .public-header-actions[b-7k6u16yt46] {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Scale down the hardcoded 180×54 SVG to fit on a 360px screen */
    .public-header .navbar-brand svg[b-7k6u16yt46] {
        width: 150px;
        height: 45px;
    }

    /* Keep the right-edge fade hint — good UX on scrollable strips */
    /* (no override; base CSS ::after stays active) */

    /* Restore horizontal scrollable row — no wrap, no pills */
    .public-mobile-nav-scroll[b-7k6u16yt46] {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 0.25rem;
        gap: 0;
    }

    /* Tab/underline style — strip pill borders added by older override */
    .public-mobile-nav-link[b-7k6u16yt46] {
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent;
        padding: 0.55rem 0.65rem;
        margin-bottom: -1px;
        min-height: 44px;
    }

    .public-mobile-nav-link.active[b-7k6u16yt46] {
        border-color: transparent;
        border-bottom-color: var(--primary-color);
        background: transparent;
        color: var(--text-primary);
    }

    .public-mobile-nav-link i[b-7k6u16yt46] {
        font-size: 0.9rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-pea3s1db7r] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--text-inverse);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-pea3s1db7r] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-pea3s1db7r] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-pea3s1db7r] {
    font-size: 1.1rem;
}

.bi[b-pea3s1db7r] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill[b-pea3s1db7r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill[b-pea3s1db7r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested[b-pea3s1db7r] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-pea3s1db7r] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-pea3s1db7r] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-pea3s1db7r] {
        padding-bottom: 1rem;
    }

    .nav-item[b-pea3s1db7r]  a {
        color: var(--text-on-dark);
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-pea3s1db7r]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: var(--text-inverse);
}

.nav-item[b-pea3s1db7r]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--text-inverse);
}

.nav-scrollable[b-pea3s1db7r] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-pea3s1db7r] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-pea3s1db7r] {
        display: none;
    }

    .nav-scrollable[b-pea3s1db7r] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

.nav-menu[b-pea3s1db7r] {
    display: none;
}

.brand-link[b-pea3s1db7r] {
    text-decoration: none;
}

.brand-text[b-pea3s1db7r] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
/* /Components/Pages/About.razor.rz.scp.css */
.founder-avatar[b-hx0jcn2jjf] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: var(--text-inverse);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
/* /Components/Pages/AccountMenu.razor.rz.scp.css */
.account-menu-page[b-c90vsr563d] {
    padding: 24px 16px 96px;
    max-width: 640px;
    margin: 0 auto;
}

.account-header[b-c90vsr563d] {
    text-align: center;
    padding: 16px 0 32px;
}

.account-avatar[b-c90vsr563d] {
    font-size: 64px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 8px;
}

.account-name[b-c90vsr563d] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.account-role[b-c90vsr563d] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-menu[b-c90vsr563d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-menu-form[b-c90vsr563d] {
    margin: 0;
}

.account-menu-item[b-c90vsr563d] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.account-menu-item:hover[b-c90vsr563d],
.account-menu-item:focus[b-c90vsr563d] {
    background-color: var(--background-light);
    color: var(--text-primary);
    text-decoration: none;
}

.account-menu-button[b-c90vsr563d] {
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.account-menu-item > i:first-of-type[b-c90vsr563d] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.account-menu-item > span[b-c90vsr563d] {
    flex: 1;
}

.account-chevron[b-c90vsr563d] {
    font-size: 1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
/* /Components/Pages/AccountPostLogout.razor.rz.scp.css */
.post-logout-splash[b-i8y2tgl26q] {
    position: fixed;
    inset: 0;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.post-logout-spinner .spinner-border[b-i8y2tgl26q] {
    width: 3rem;
    height: 3rem;
}
/* /Components/Pages/AddCampaign.razor.rz.scp.css */
/* ── Content Header ──────────────────────────────────────── */
.content-header[b-oetk4cbw9p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.content-title[b-oetk4cbw9p] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.content-subtitle[b-oetk4cbw9p] {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ── Form Card ───────────────────────────────────────────── */
.form-card[b-oetk4cbw9p] {
    border-radius: var(--border-radius-lg);
}

.form-card .card-body[b-oetk4cbw9p] {
    padding: 2rem;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .content-header[b-oetk4cbw9p] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .form-card .card-body[b-oetk4cbw9p] {
        padding: 1.25rem;
    }

    .d-flex.justify-content-end[b-oetk4cbw9p] {
        flex-direction: column;
    }

    .d-flex.justify-content-end .btn[b-oetk4cbw9p] {
        width: 100%;
        min-height: 44px;
    }
}
/* /Components/Pages/AddProperty.razor.rz.scp.css */
.wizard-body[b-3cf4b9u2uh] {
    min-height: calc(100vh - 130px);
    padding: 1.25rem 1rem 4rem;
}

.wizard-content[b-3cf4b9u2uh] {
    max-width: 640px;
    margin: 0 auto;
}

.step-heading[b-3cf4b9u2uh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.step-subtext[b-3cf4b9u2uh] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.review-card[b-3cf4b9u2uh] {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.review-card-header[b-3cf4b9u2uh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.review-row[b-3cf4b9u2uh] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.75rem;
}

.review-row:last-child[b-3cf4b9u2uh] {
    margin-bottom: 0;
}

.review-label[b-3cf4b9u2uh] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.review-value[b-3cf4b9u2uh] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

[b-3cf4b9u2uh] .cover-photo-upload {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
}

.review-cover-photo[b-3cf4b9u2uh] {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .wizard-body[b-3cf4b9u2uh] {
        padding: 1.25rem 1rem 5rem;
    }

    .step-heading[b-3cf4b9u2uh] {
        font-size: 1.25rem;
    }
}

.community-type-options[b-3cf4b9u2uh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.community-type-option[b-3cf4b9u2uh] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.community-type-option:hover[b-3cf4b9u2uh] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.community-type-option.is-selected[b-3cf4b9u2uh] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
}

.community-type-option input[type="radio"][b-3cf4b9u2uh] {
    margin-top: var(--space-1);
    flex-shrink: 0;
}

.community-type-option .option-text[b-3cf4b9u2uh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.community-type-option .option-title[b-3cf4b9u2uh] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.community-type-option .option-body[b-3cf4b9u2uh] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: var(--lh-snug);
}

@media (max-width: 768px) {
    .community-type-options[b-3cf4b9u2uh] {
        grid-template-columns: 1fr;
    }
}

.add-community-hoa-primer[b-3cf4b9u2uh] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    line-height: var(--lh-relaxed);
    margin: var(--space-4) var(--space-4) 0;
}

.add-community-hoa-primer .primer-icon[b-3cf4b9u2uh] {
    flex-shrink: 0;
    color: var(--color-info);
    font-size: var(--fs-lg);
}

.add-community-hoa-primer .primer-text[b-3cf4b9u2uh] {
    flex: 1;
}

.add-community-hoa-primer .primer-link[b-3cf4b9u2uh] {
    color: var(--color-info);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    margin-left: var(--space-2);
}

.add-community-hoa-primer .primer-link:hover[b-3cf4b9u2uh] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .add-community-hoa-primer[b-3cf4b9u2uh] {
        margin: var(--space-3) var(--space-3) 0;
    }
}
/* /Components/Pages/AddSpace.razor.rz.scp.css */
.wizard-body[b-wjmcpezkjm] {
    min-height: calc(100vh - 130px);
    padding: 1.25rem 1rem 4rem;
}

.wizard-content[b-wjmcpezkjm] {
    max-width: 640px;
    margin: 0 auto;
}

.step-heading[b-wjmcpezkjm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.step-subtext[b-wjmcpezkjm] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.review-card[b-wjmcpezkjm] {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.review-card-header[b-wjmcpezkjm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.review-row[b-wjmcpezkjm] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.75rem;
}

.review-row:last-child[b-wjmcpezkjm] {
    margin-bottom: 0;
}

.review-label[b-wjmcpezkjm] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.review-value[b-wjmcpezkjm] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

/* ── Event-type chip picker ── */
.event-type-chips[b-wjmcpezkjm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.event-type-chip[b-wjmcpezkjm] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    border: 1.5px solid var(--border-color);
    border-radius: 2rem;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 44px;
}

.event-type-chip:hover[b-wjmcpezkjm],
.event-type-chip:focus-visible[b-wjmcpezkjm] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.15);
}

.event-type-chip--selected[b-wjmcpezkjm] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.event-type-chip--selected:hover[b-wjmcpezkjm],
.event-type-chip--selected:focus-visible[b-wjmcpezkjm] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

/* Review step chip badges */
.review-chips[b-wjmcpezkjm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

.review-chip[b-wjmcpezkjm] {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: 2rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .wizard-body[b-wjmcpezkjm] {
        padding: 1.25rem 1rem 5rem;
    }

    .step-heading[b-wjmcpezkjm] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/AdminUserDetail.razor.rz.scp.css */
/* Skeleton */
.adminuserdetail-skeleton[b-qjbzqea22h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.adminuserdetail-skeleton-rows[b-qjbzqea22h] {
    padding: var(--space-4) var(--space-5);
}

.page-title[b-qjbzqea22h] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.75rem;
}

/* Profile card */
.profile-card[b-qjbzqea22h] {
    overflow: hidden;
}

.profile-card-body[b-qjbzqea22h] {
    padding: 1.25rem 1.5rem;
}

.avatar-circle[b-qjbzqea22h] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--action-color);
    color: var(--text-inverse);
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

.profile-info-list[b-qjbzqea22h] {
    text-align: left;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.profile-info-item[b-qjbzqea22h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.profile-info-item:last-child[b-qjbzqea22h] {
    border-bottom: none;
}

.profile-info-label[b-qjbzqea22h] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.profile-info-value[b-qjbzqea22h] {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* Action cards */
.action-card[b-qjbzqea22h] {
    overflow: hidden;
}

.action-card-header[b-qjbzqea22h] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-light);
}

.action-card-title[b-qjbzqea22h] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.action-card-body[b-qjbzqea22h] {
    padding: 1.5rem;
}

/* Role badges — reuse from AdminUsers */
.role-badge[b-qjbzqea22h] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.role-brand[b-qjbzqea22h] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.role-property[b-qjbzqea22h] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.role-platform[b-qjbzqea22h] {
    background: var(--role-platform-bg);
    color: var(--role-platform);
}

.role-administrator[b-qjbzqea22h] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.role-none[b-qjbzqea22h] {
    background: var(--background-light);
    color: var(--text-secondary);
}

/* Status badges */
.status-badge[b-qjbzqea22h] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-pending[b-qjbzqea22h] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-approved[b-qjbzqea22h] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-rejected[b-qjbzqea22h] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.status-inactive[b-qjbzqea22h] {
    background: var(--background-light);
    color: var(--text-secondary);
}

.status-locked[b-qjbzqea22h] {
    background: var(--role-platform-bg);
    color: var(--role-platform);
}

/* Reject panel */
.reject-panel[b-qjbzqea22h] {
    background: var(--color-warning-bg);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-warning-border);
}

/* Primary button — inherits charcoal styling from app.css. Keep override file lean. */

/* Tab nav */
.action-tabs[b-qjbzqea22h] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-light);
    border-radius: var(--border-radius, 12px) var(--border-radius, 12px) 0 0;
    overflow: hidden;
}

.action-tab[b-qjbzqea22h] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.action-tab:hover:not(.active)[b-qjbzqea22h] {
    background: rgba(0,0,0,0.03);
    color: var(--text-primary);
}

.action-tab.active[b-qjbzqea22h] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: var(--surface-color);
}

/* ── Payabli sync section ───────────────────────────────────────────── */
.payabli-section[b-qjbzqea22h] {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.payabli-section-header[b-qjbzqea22h] {
    margin-bottom: 1rem;
}

.payabli-section-title[b-qjbzqea22h] {
    margin: 0 0 0.25rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.payabli-section-subtitle[b-qjbzqea22h] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.payabli-card[b-qjbzqea22h] {
    overflow: hidden;
    margin-bottom: 1rem;
}

.payabli-card-body[b-qjbzqea22h] {
    padding: 1.25rem 1.5rem;
}

.payabli-card-title[b-qjbzqea22h] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.payabli-card-subtitle[b-qjbzqea22h] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.payabli-row[b-qjbzqea22h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.payabli-row-info[b-qjbzqea22h] {
    flex: 1 1 240px;
    min-width: 0;
}

.payabli-row-title[b-qjbzqea22h] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.payabli-row-subtitle[b-qjbzqea22h] {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.payabli-row-status[b-qjbzqea22h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.payabli-row-actions[b-qjbzqea22h] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.payabli-row-actions-stack[b-qjbzqea22h] {
    flex-direction: column;
    align-items: stretch;
    min-width: 220px;
}

.payabli-id-input[b-qjbzqea22h] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
}

.payabli-warning[b-qjbzqea22h] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: 0.8rem;
    line-height: 1.4;
}

.payabli-warning code[b-qjbzqea22h] {
    font-size: 0.75rem;
    padding: 0.05rem 0.25rem;
    border-radius: 4px;
    background: rgba(0,0,0,0.06);
    color: inherit;
}

.payabli-pill[b-qjbzqea22h] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.payabli-pill-provisioned[b-qjbzqea22h] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.payabli-pill-pending[b-qjbzqea22h] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.payabli-id[b-qjbzqea22h] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    word-break: break-all;
}

.payabli-loading[b-qjbzqea22h] {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.payabli-empty[b-qjbzqea22h] {
    padding: 1rem;
    text-align: center;
    background: var(--background-light);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.payabli-property-list[b-qjbzqea22h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.payabli-property-row[b-qjbzqea22h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-light);
}

.payabli-property-name[b-qjbzqea22h] {
    margin: 0 0 0.15rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.payabli-property-address[b-qjbzqea22h] {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Responsive */
/* PMC Profile section */
.mc-profile-section[b-qjbzqea22h] {
    margin-top: 1.5rem;
}

.mc-profile-header[b-qjbzqea22h] {
    margin-bottom: 1rem;
}

.mc-profile-title[b-qjbzqea22h] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.mc-profile-subtitle[b-qjbzqea22h] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.mc-profile-card[b-qjbzqea22h] {
    overflow: hidden;
}

.mc-profile-card-body[b-qjbzqea22h] {
    padding: 1.25rem 1.5rem;
}

.mc-detail-grid[b-qjbzqea22h] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.mc-detail-grid dt[b-qjbzqea22h] {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.2rem 0;
}

.mc-detail-grid dd[b-qjbzqea22h] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: 0.2rem 0;
    word-break: break-word;
}

@media (max-width: 991px) {
    .profile-card[b-qjbzqea22h] {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .mc-detail-grid[b-qjbzqea22h] {
        grid-template-columns: 1fr;
        gap: 0.125rem 0;
    }

    .mc-detail-grid dt[b-qjbzqea22h] {
        margin-top: 0.75rem;
    }

    .mc-profile-card-body[b-qjbzqea22h] {
        padding: 1rem;
    }

    .page-title[b-qjbzqea22h] {
        font-size: 1.25rem;
    }

    .avatar-circle[b-qjbzqea22h] {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }

    .action-card-body[b-qjbzqea22h] {
        padding: 1rem;
    }

    .action-tab[b-qjbzqea22h] {
        font-size: 0.8rem;
        padding: 0.6rem 0.5rem;
    }

    .payabli-card-body[b-qjbzqea22h] {
        padding: 1rem;
    }

    .payabli-row[b-qjbzqea22h],
    .payabli-property-row[b-qjbzqea22h] {
        flex-direction: column;
        align-items: stretch;
    }

    .payabli-row-actions[b-qjbzqea22h] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/AdminUsers.razor.rz.scp.css */
.admin-users-page[b-vu7ggk9yd9] {
    background-color: var(--background-light);
    min-height: calc(100vh - 71px);
}

.page-title[b-vu7ggk9yd9] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.75rem;
    margin: 0;
}

/* Filter tabs */
.filter-tabs[b-vu7ggk9yd9] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-tab[b-vu7ggk9yd9] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.filter-tab:hover[b-vu7ggk9yd9] {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.filter-tab.active[b-vu7ggk9yd9] {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-inverse);
}

.filter-count[b-vu7ggk9yd9] {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.filter-tab.active .filter-count[b-vu7ggk9yd9] {
    background: rgba(255, 255, 255, 0.2);
}

.pending-count[b-vu7ggk9yd9] {
    background: rgba(255, 193, 7, 0.2);
    color: var(--color-warning);
}

.filter-tab.active .pending-count[b-vu7ggk9yd9] {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-inverse);
}

/* Skeleton */
.adminusers-skeleton[b-vu7ggk9yd9] {
    padding: var(--space-4) var(--space-5);
}

/* Table */
.users-table-wrapper[b-vu7ggk9yd9] {
    overflow: hidden;
}

.users-table[b-vu7ggk9yd9] {
    margin: 0;
}

.users-table tbody td[b-vu7ggk9yd9] {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.user-name-cell[b-vu7ggk9yd9] {
    color: var(--text-primary);
}

/* Role badges */
.role-badge[b-vu7ggk9yd9] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* PMC supplementary pill — shown inline next to user name */
.role-pill[b-vu7ggk9yd9] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.role-pill-mc[b-vu7ggk9yd9] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.role-brand[b-vu7ggk9yd9] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.role-property[b-vu7ggk9yd9] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.role-platform[b-vu7ggk9yd9] {
    background: var(--role-platform-bg);
    color: var(--role-platform);
}

.role-administrator[b-vu7ggk9yd9] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.role-none[b-vu7ggk9yd9] {
    background: var(--background-light);
    color: var(--text-secondary);
}

/* Status badges */
.status-badge[b-vu7ggk9yd9] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-pending[b-vu7ggk9yd9] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-approved[b-vu7ggk9yd9] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-rejected[b-vu7ggk9yd9] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Reject inline form */
.reject-form-inline[b-vu7ggk9yd9] {
    background: var(--color-warning-bg);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-warning-border);
}

/* Responsive */
@media (max-width: 767px) {
    .filter-tabs[b-vu7ggk9yd9] {
        gap: 0.375rem;
    }

    .filter-tab[b-vu7ggk9yd9] {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .users-table thead[b-vu7ggk9yd9] {
        display: none;
    }

    .users-table tbody tr[b-vu7ggk9yd9] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .users-table-wrapper[b-vu7ggk9yd9] {
        overflow: visible;
    }

    .users-table tbody td[b-vu7ggk9yd9] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.875rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .users-table tbody td:last-child[b-vu7ggk9yd9] {
        border-bottom: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .users-table tbody td[b-vu7ggk9yd9]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .users-table tbody td[data-label=""][b-vu7ggk9yd9]::before {
        display: none;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .reject-form-inline .d-flex[b-vu7ggk9yd9] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Ai.razor.rz.scp.css */
/* ============================================================
   /ai — Consumer-friendly hoastnow + AI landing page
   ============================================================ */

.ai-page[b-qpqsvf9860] {
    --ai-container: 980px;
}

.ai-container[b-qpqsvf9860] {
    max-width: var(--ai-container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ----- Hero ----- */
.ai-hero[b-qpqsvf9860] {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    padding: 4rem 0 3rem;
    border-bottom: 1px solid var(--border-color);
}

.ai-hero-content[b-qpqsvf9860] {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.25rem;
    text-align: center;
}

.ai-badge[b-qpqsvf9860] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--primary-color);
    color: #fff;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.ai-hero-title[b-qpqsvf9860] {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.ai-hero-subtitle[b-qpqsvf9860] {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 620px;
    margin: 0 auto 1.5rem;
}

.ai-hero-actions[b-qpqsvf9860] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ai-hero-link[b-qpqsvf9860] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    text-decoration: none;
}

.ai-hero-link:hover[b-qpqsvf9860] {
    color: var(--primary-color);
}

.ai-endpoint-pill[b-qpqsvf9860] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
}

.ai-endpoint-label[b-qpqsvf9860] {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ai-endpoint-url[b-qpqsvf9860] {
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    background: rgba(15, 23, 42, 0.06);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    color: var(--text-primary);
}

/* ----- Value section ----- */
.ai-value[b-qpqsvf9860] {
    padding: 3rem 0;
}

.ai-section-title[b-qpqsvf9860] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1.5rem;
}

.ai-value-grid[b-qpqsvf9860] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.ai-value-card[b-qpqsvf9860] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.35rem;
}

.ai-value-card h3[b-qpqsvf9860] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.4rem 0 0.5rem;
    color: var(--text-primary);
}

.ai-value-card p[b-qpqsvf9860] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
}

.ai-value-icon[b-qpqsvf9860] {
    font-size: 1.35rem;
    color: var(--primary-color);
}

.ai-value-note[b-qpqsvf9860] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto;
}

/* ----- Connect section (main instructions) ----- */
.ai-connect[b-qpqsvf9860] {
    padding: 2.5rem 0 3.5rem;
    background: #f8fafc;
    scroll-margin-top: 90px; /* account for fixed public header when jumping from #connect */
}

.ai-connect-header[b-qpqsvf9860] {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.ai-connect-subtitle[b-qpqsvf9860] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0.5rem 0 0;
}

.ai-instr-list[b-qpqsvf9860] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: #fff;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.ai-instr[b-qpqsvf9860] {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
}

.ai-instr:last-child[b-qpqsvf9860] {
    border-bottom: none;
}

.ai-instr-icon[b-qpqsvf9860] {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #475569;
}

.ai-instr-icon.claude[b-qpqsvf9860] {
    background: #fef3e8;
    color: #f97316;
}

.ai-instr-icon.chatgpt[b-qpqsvf9860] {
    background: #e0f2fe;
    color: #0ea5e9;
}

.ai-instr-icon.grok[b-qpqsvf9860] {
    background: #fefce8;
    color: #ca8a04;
}

.ai-instr-icon.gemini[b-qpqsvf9860] {
    background: #f3e8ff;
    color: #7c3aed;
}

.ai-instr-body[b-qpqsvf9860] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #475569;
}

.ai-instr-name[b-qpqsvf9860] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.ai-instr-text[b-qpqsvf9860] {
    color: #475569;
}

.ai-instr-text code[b-qpqsvf9860],
.ai-cmd[b-qpqsvf9860] {
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.07);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    color: var(--text-primary);
}

.ai-instr-note[b-qpqsvf9860] {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.ai-success[b-qpqsvf9860] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    color: #166534;
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 1.5rem;
}

.ai-success i[b-qpqsvf9860] {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.ai-power-users[b-qpqsvf9860] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.ai-power-users h3[b-qpqsvf9860] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.ai-power-users p[b-qpqsvf9860] {
    margin: 0;
}

.ai-link[b-qpqsvf9860] {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.ai-link:hover[b-qpqsvf9860] {
    text-decoration: underline;
}

/* ----- How it works ----- */
.ai-how[b-qpqsvf9860] {
    padding: 2.5rem 0;
}

.ai-steps[b-qpqsvf9860] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.ai-steps li[b-qpqsvf9860] {
    display: flex;
    gap: 0.9rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ai-step-num[b-qpqsvf9860] {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Security / trust ----- */
.ai-security[b-qpqsvf9860] {
    padding: 2rem 0 3.5rem;
    background: #f8fafc;
}

.ai-security-card[b-qpqsvf9860] {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 1.75rem;
    max-width: 820px;
    margin: 0 auto;
}

.ai-security-card h3[b-qpqsvf9860] {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.ai-security-card ul[b-qpqsvf9860] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.ai-security-card li + li[b-qpqsvf9860] {
    margin-top: 0.35rem;
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
    .ai-hero-title[b-qpqsvf9860] {
        font-size: 1.9rem;
    }

    .ai-hero-subtitle[b-qpqsvf9860] {
        font-size: 1rem;
    }

    .ai-value-grid[b-qpqsvf9860] {
        grid-template-columns: 1fr;
    }

    .ai-instr[b-qpqsvf9860] {
        padding: 0.85rem 0.95rem;
    }

    .ai-instr-icon[b-qpqsvf9860] {
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
    }
}
/* /Components/Pages/ApiKeyList.razor.rz.scp.css */
.api-keys-container[b-qdlhrr3kk5] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-qdlhrr3kk5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-qdlhrr3kk5] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.page-subtitle[b-qdlhrr3kk5] {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.issue-key-btn[b-qdlhrr3kk5] {
    background: var(--action-color);
    border: 1.5px solid var(--action-color);
    border-radius: 10px;
    padding: 0.55rem 1.25rem;
    font-weight: 600;
    color: var(--text-inverse);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.issue-key-btn:hover[b-qdlhrr3kk5] {
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    color: var(--text-inverse);
}

/* hn-table provides base styles */
.api-keys-table[b-qdlhrr3kk5] {
    border-collapse: separate;
    border-spacing: 0;
}

.permissions-cell[b-qdlhrr3kk5] {
    max-width: 180px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.usage-cell[b-qdlhrr3kk5] {
    white-space: nowrap;
}

.actions-cell[b-qdlhrr3kk5] {
    white-space: nowrap;
}

code[b-qdlhrr3kk5] {
    font-size: 0.85rem;
    background: var(--background-light);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .page-header[b-qdlhrr3kk5] {
        flex-direction: column;
    }

    .api-keys-table[b-qdlhrr3kk5] {
        font-size: 0.85rem;
    }

    .permissions-cell[b-qdlhrr3kk5] {
        max-width: 120px;
    }
}

@media (max-width: 767px) {
    .api-keys-table thead tr[b-qdlhrr3kk5] {
        display: none;
    }

    .api-keys-table tbody tr[b-qdlhrr3kk5] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-raised);
        box-shadow: var(--shadow-sm);
    }

    .api-keys-table tbody td[b-qdlhrr3kk5] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .api-keys-table tbody td:last-child[b-qdlhrr3kk5] {
        border-bottom: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .api-keys-table tbody td[b-qdlhrr3kk5]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .api-keys-table tbody td[data-label=""][b-qdlhrr3kk5]::before {
        display: none;
        min-width: 0;
    }

    .permissions-cell[b-qdlhrr3kk5] {
        max-width: none;
    }

    .actions-cell[b-qdlhrr3kk5] {
        white-space: normal;
    }
}
/* /Components/Pages/Authorize.razor.rz.scp.css */
.consent-page-bg[b-pxwu44o18f] {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--background-light);
}

.consent-card[b-pxwu44o18f] {
    width: 100%;
    max-width: 480px;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.5rem 2rem;
}

.consent-header[b-pxwu44o18f] {
    text-align: center;
    margin-bottom: 2rem;
}

.consent-logo[b-pxwu44o18f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.consent-logo-text[b-pxwu44o18f] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.02em;
}

.consent-title[b-pxwu44o18f] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.consent-subtitle[b-pxwu44o18f] {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.consent-account[b-pxwu44o18f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--background-light);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}

.account-avatar[b-pxwu44o18f] {
    font-size: 2rem;
    color: var(--text-secondary);
    line-height: 1;
}

.account-info[b-pxwu44o18f] {
    flex: 1;
}

.account-label[b-pxwu44o18f] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.account-name[b-pxwu44o18f] {
    font-weight: 600;
    color: var(--text-primary);
}

.consent-section[b-pxwu44o18f] {
    margin-bottom: 1.75rem;
}

.consent-section-label[b-pxwu44o18f] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.consent-scope-list[b-pxwu44o18f] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.consent-scope-item[b-pxwu44o18f] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease;
}

.consent-scope-item:last-child[b-pxwu44o18f] {
    margin-bottom: 0;
}

.consent-scope-item i[b-pxwu44o18f] {
    font-size: 1.25rem;
    color: var(--primary-color);
    line-height: 1.25;
    flex-shrink: 0;
    width: 24px;
}

.scope-title[b-pxwu44o18f] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
    font-size: 0.95rem;
}

.scope-description[b-pxwu44o18f] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.consent-actions[b-pxwu44o18f] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.consent-actions form[b-pxwu44o18f] {
    flex: 1;
}

.consent-btn-deny[b-pxwu44o18f],
.consent-btn-allow[b-pxwu44o18f] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.consent-disclaimer[b-pxwu44o18f] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.consent-disclaimer a[b-pxwu44o18f] {
    color: var(--primary-color);
    text-decoration: none;
}

.consent-disclaimer a:hover[b-pxwu44o18f] {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .consent-card[b-pxwu44o18f] {
        padding: 1.75rem 1.25rem;
        border-radius: var(--border-radius);
    }

    .consent-title[b-pxwu44o18f] {
        font-size: 1.25rem;
    }

    .consent-actions[b-pxwu44o18f] {
        flex-direction: column-reverse;
    }
}
/* /Components/Pages/Backoffice/AiModelsPanel.razor.rz.scp.css */
.ai-models-panel[b-hywiwm3qbj] {
    padding: 0;
}

.ai-models-status-banner[b-hywiwm3qbj] {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.ai-models-status-icon[b-hywiwm3qbj] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.ai-models-status-body[b-hywiwm3qbj] {
    flex: 1;
}

.ai-models-status-title[b-hywiwm3qbj] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.ai-models-status-text[b-hywiwm3qbj] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-models-status-ready[b-hywiwm3qbj] {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.ai-models-status-ready .ai-models-status-icon[b-hywiwm3qbj] {
    background: var(--color-success);
}

.ai-models-status-disabled[b-hywiwm3qbj] {
    background: var(--background-light);
    border-color: var(--border-color);
}

.ai-models-status-disabled .ai-models-status-icon[b-hywiwm3qbj] {
    background: var(--text-secondary);
}

.settings-grid[b-hywiwm3qbj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.settings-card[b-hywiwm3qbj] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.settings-card-wide[b-hywiwm3qbj] {
    grid-column: 1 / -1;
}

.settings-card-header[b-hywiwm3qbj] {
    margin-bottom: 0.85rem;
}

.settings-card-title[b-hywiwm3qbj] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-card-subtitle[b-hywiwm3qbj] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.settings-card-body[b-hywiwm3qbj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-actions[b-hywiwm3qbj] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.settings-meta[b-hywiwm3qbj] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 991px) {
    .settings-grid[b-hywiwm3qbj] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Backoffice/ApiKeysPanel.razor.rz.scp.css */
.api-keys-panel[b-8j6nexe1eo] {
    /* No outer max-width — sits inside the integrations panel content area. */
}

.panel-toolbar[b-8j6nexe1eo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.panel-subtitle[b-8j6nexe1eo] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.key-reveal-alert[b-8j6nexe1eo] {
    border-left: 4px solid var(--color-warning);
}

.key-display[b-8j6nexe1eo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--background-light);
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.key-text[b-8j6nexe1eo] {
    font-size: 0.875rem;
    word-break: break-all;
    flex: 1;
    background: transparent;
    padding: 0;
}

.api-keys-table[b-8j6nexe1eo] {
    /* table-level styles handled by .app-table */
}

.api-keys-table thead th[b-8j6nexe1eo] {
    white-space: nowrap;
}

.permissions-cell[b-8j6nexe1eo] {
    max-width: 200px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.actions-cell[b-8j6nexe1eo] {
    white-space: nowrap;
}

.api-keys-table code[b-8j6nexe1eo] {
    font-size: 0.85rem;
    background: var(--background-light);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .panel-toolbar[b-8j6nexe1eo] {
        flex-direction: column;
        align-items: flex-start;
    }

    .api-keys-table[b-8j6nexe1eo] {
        font-size: 0.85rem;
    }

    .permissions-cell[b-8j6nexe1eo] {
        max-width: 120px;
    }
}

@media (max-width: 767px) {
    .api-keys-table thead tr[b-8j6nexe1eo] {
        display: none;
    }

    .api-keys-table tbody tr[b-8j6nexe1eo] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .api-keys-table tbody td[b-8j6nexe1eo] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .api-keys-table tbody td:last-child[b-8j6nexe1eo] {
        border-bottom: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .api-keys-table tbody td[b-8j6nexe1eo]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .api-keys-table tbody td[data-label=""][b-8j6nexe1eo]::before {
        display: none;
        min-width: 0;
    }

    .permissions-cell[b-8j6nexe1eo] {
        max-width: none;
    }

    .actions-cell[b-8j6nexe1eo] {
        white-space: normal;
    }
}
/* /Components/Pages/Backoffice/BlogManagementPanel.razor.rz.scp.css */
.blog-panel-toolbar[b-4mn7f3f5zx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.blog-editor[b-4mn7f3f5zx] {
    padding: 1.25rem;
}

.blog-content-editor[b-4mn7f3f5zx] {
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 320px;
}

.blog-locale-tabs[b-4mn7f3f5zx] {
    margin-top: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.blog-locale-tabs .nav-link[b-4mn7f3f5zx] {
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-locale-tabs .nav-link:hover[b-4mn7f3f5zx] {
    color: var(--text-primary);
    background-color: var(--background-light);
}

.blog-locale-tabs .nav-link.active[b-4mn7f3f5zx] {
    color: var(--text-primary);
    border-color: var(--border-color);
    background-color: var(--surface-color);
    font-weight: 600;
}

.locale-status[b-4mn7f3f5zx] {
    display: inline-flex;
    font-size: 0.75rem;
    line-height: 1;
}

.locale-status-filled[b-4mn7f3f5zx] {
    color: var(--color-success);
}

.locale-status-empty[b-4mn7f3f5zx] {
    color: var(--border-color);
}

.blog-locale-tab-content[b-4mn7f3f5zx] {
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: 1.25rem;
    background: var(--surface-color);
}

.blog-locale-pane[b-4mn7f3f5zx] {
    /* Wrapper around an active tab pane — preserves vertical rhythm */
}

/* ── Mobile card layout for blog posts table ──────────────── */
@media (max-width: 767px) {
    .backoffice-table thead[b-4mn7f3f5zx] {
        display: none;
    }

    .backoffice-table tbody tr[b-4mn7f3f5zx] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .backoffice-table tbody td:not([colspan])[b-4mn7f3f5zx] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
        font-size: 0.875rem;
    }

    .backoffice-table tbody td:not([colspan]):last-child[b-4mn7f3f5zx] {
        border-bottom: none;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .backoffice-table tbody td[colspan][b-4mn7f3f5zx] {
        display: block;
        padding: 1.25rem;
        text-align: center;
        white-space: normal;
    }

    .backoffice-table tbody td[b-4mn7f3f5zx]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 90px;
    }

    .backoffice-table tbody td[data-label=""][b-4mn7f3f5zx]::before,
    .backoffice-table tbody td[colspan][b-4mn7f3f5zx]::before {
        display: none;
        min-width: 0;
    }
}
/* /Components/Pages/Backoffice/BlogTranslationPanel.razor.rz.scp.css */
.blog-translation-panel[b-sl8ywz0j7s] {
    padding: 0;
}

.blog-translation-status-banner[b-sl8ywz0j7s] {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.blog-translation-status-icon[b-sl8ywz0j7s] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.blog-translation-status-body[b-sl8ywz0j7s] {
    flex: 1;
}

.blog-translation-status-title[b-sl8ywz0j7s] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.blog-translation-status-text[b-sl8ywz0j7s] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.blog-translation-status-ready[b-sl8ywz0j7s] {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.blog-translation-status-ready .blog-translation-status-icon[b-sl8ywz0j7s] {
    background: var(--color-success);
}

.blog-translation-status-disabled[b-sl8ywz0j7s] {
    background: var(--background-light);
    border-color: var(--border-color);
}

.blog-translation-status-disabled .blog-translation-status-icon[b-sl8ywz0j7s] {
    background: var(--text-secondary);
}

.settings-grid[b-sl8ywz0j7s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.settings-card[b-sl8ywz0j7s] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.settings-card-wide[b-sl8ywz0j7s] {
    grid-column: 1 / -1;
}

.settings-card-header[b-sl8ywz0j7s] {
    margin-bottom: 0.85rem;
}

.settings-card-title[b-sl8ywz0j7s] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-card-badge[b-sl8ywz0j7s] {
    display: inline-block;
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-card-subtitle[b-sl8ywz0j7s] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.settings-card-body[b-sl8ywz0j7s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-actions[b-sl8ywz0j7s] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.settings-meta[b-sl8ywz0j7s] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 991px) {
    .settings-grid[b-sl8ywz0j7s] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Backoffice/ConnectionsPanel.razor.rz.scp.css */
.connections-panel[b-tqrxytw8h2] {
    padding: 0;
}

.connections-intro[b-tqrxytw8h2] {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin: 0 0 1.25rem 0;
    max-width: 760px;
}

.connections-grid[b-tqrxytw8h2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}

@media (max-width: 575px) {
    .connections-grid[b-tqrxytw8h2] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.connection-card[b-tqrxytw8h2] {
    /* surface provided by .app-card */
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.connection-card-header[b-tqrxytw8h2] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.connection-card-icon[b-tqrxytw8h2] {
    font-size: 1.85rem;
    color: var(--text-primary);
    width: 2.4rem;
    text-align: center;
}

.connection-card-title[b-tqrxytw8h2] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}

.connection-card-subtitle[b-tqrxytw8h2] {
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.connection-card-status[b-tqrxytw8h2] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.9rem;
    background: var(--background-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.connection-status-badge[b-tqrxytw8h2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: max-content;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.connection-status-connected[b-tqrxytw8h2] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.connection-status-disconnected[b-tqrxytw8h2] {
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.connection-status-unconfigured[b-tqrxytw8h2] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.connection-status-handle[b-tqrxytw8h2] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.92rem;
}

.connection-status-meta[b-tqrxytw8h2] {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
}

.connection-card-actions[b-tqrxytw8h2] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: auto;
}
/* /Components/Pages/Backoffice/FeatureFlagsPanel.razor.rz.scp.css */
.feature-flags-table .flag-key[b-iektjcxykx] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--background-light);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    word-break: break-all;
}

.feature-flags-table .flag-description[b-iektjcxykx] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    max-width: 32rem;
}

.feature-flags-table .flag-editor[b-iektjcxykx] {
    min-width: 14rem;
}

@media (max-width: 767px) {
    .feature-flags-table .flag-description[b-iektjcxykx] {
        max-width: none;
    }

    .feature-flags-table .flag-editor[b-iektjcxykx] {
        min-width: 0;
        width: 100%;
    }

    .feature-flags-table thead[b-iektjcxykx] {
        display: none;
    }

    .feature-flags-table tbody tr[b-iektjcxykx] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .feature-flags-table tbody td[b-iektjcxykx] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .feature-flags-table tbody td:last-child[b-iektjcxykx] {
        border-bottom: none;
    }

    .feature-flags-table tbody td[b-iektjcxykx]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .feature-flags-table tbody td[data-label=""][b-iektjcxykx]::before {
        display: none;
        min-width: 0;
    }
}
/* /Components/Pages/Backoffice/FinancialDashboardPanel.razor.rz.scp.css */
.financial-dashboard[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.financial-section-group[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.financial-group-header[b-hektsd7e0j] {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
}

.financial-kpi-grid[b-hektsd7e0j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.financial-panel[b-hektsd7e0j] {
    /* card surface provided by .app-card */
}

.financial-layout-grid[b-hektsd7e0j] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1rem;
}

.financial-panel[b-hektsd7e0j] {
    padding: 1.25rem;
}

.panel-inner-split[b-hektsd7e0j] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.panel-inner-chart[b-hektsd7e0j] {
    border-left: 1px solid var(--border-color);
    padding-left: 1.5rem;
}

.mini-chart-title[b-hektsd7e0j] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.mini-hbar-list[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mini-hbar-row[b-hektsd7e0j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 0.6rem;
}

.mini-hbar-row.with-count[b-hektsd7e0j] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
}

.mini-hbar-label[b-hektsd7e0j] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-hbar-track[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    height: auto;
    position: relative;
}

.mini-hbar[b-hektsd7e0j] {
    height: 0.35rem;
    border-radius: 999px;
    min-width: 2px;
    transition: width 0.3s ease;
    background: var(--border-color);
}

.mini-hbar.gross[b-hektsd7e0j] {
    background: var(--text-primary);
    opacity: 0.85;
}

.mini-hbar.net[b-hektsd7e0j] {
    background: var(--secondary-color);
    opacity: 0.85;
    margin-top: 0;
}

.mini-hbar.status[b-hektsd7e0j] {
    background: var(--text-primary);
}

.mini-hbar-count[b-hektsd7e0j] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.mini-chart-legend[b-hektsd7e0j] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.financial-panel-header[b-hektsd7e0j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.financial-panel-title[b-hektsd7e0j] {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.financial-panel-subtitle[b-hektsd7e0j] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.chart-legend[b-hektsd7e0j] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.chart-legend-item[b-hektsd7e0j] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.chart-legend-item[b-hektsd7e0j]::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: var(--border-color);
}

.chart-legend-item.gross[b-hektsd7e0j]::before {
    background: var(--text-primary);
}

.chart-legend-item.net[b-hektsd7e0j]::before {
    background: var(--secondary-color);
}

.chart-legend-item.cancelled[b-hektsd7e0j]::before {
    background: var(--chart-4);
}

.trend-chart[b-hektsd7e0j] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.875rem;
    align-items: end;
    min-height: 14rem;
    padding-top: 0.5rem;
}

.trend-column[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.trend-bars[b-hektsd7e0j] {
    align-items: end;
    background: linear-gradient(180deg, rgba(247, 247, 247, 0.3) 0%, rgba(247, 247, 247, 0.9) 100%);
    border-radius: var(--border-radius);
    display: flex;
    gap: 0.35rem;
    height: 12rem;
    justify-content: center;
    padding: 0.5rem 0.5rem;
    width: 100%;
}

.trend-bar[b-hektsd7e0j] {
    border-radius: 999px 999px 0 0;
    min-height: 0;
    transition: transform 0.2s ease;
    width: 0.85rem;
}

.trend-bar:hover[b-hektsd7e0j] {
    transform: translateY(-2px);
}

.trend-bar.gross[b-hektsd7e0j] {
    background: var(--text-primary);
}

.trend-bar.net[b-hektsd7e0j] {
    background: linear-gradient(180deg, #6ad4cb 0%, var(--secondary-color) 100%);
}

.trend-bar.cancelled[b-hektsd7e0j] {
    background: linear-gradient(180deg, #cbd5e1 0%, #64748b 100%);
}

.trend-label[b-hektsd7e0j] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: center;
}

.insight-list[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
}

.compact-insight-list[b-hektsd7e0j] {
    margin-top: 1.25rem;
}

.revenue-breakdown-list[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.revenue-breakdown-row[b-hektsd7e0j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.revenue-breakdown-copy[b-hektsd7e0j] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.revenue-breakdown-label[b-hektsd7e0j] {
    color: var(--text-primary);
    font-weight: 700;
}

.revenue-breakdown-meta[b-hektsd7e0j] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.revenue-breakdown-bar-track[b-hektsd7e0j] {
    background: var(--background-light);
    border-radius: 999px;
    height: 0.65rem;
    overflow: hidden;
}

.revenue-breakdown-bar[b-hektsd7e0j] {
    border-radius: 999px;
    height: 100%;
    min-width: 0;
}

.revenue-breakdown-bar.fees[b-hektsd7e0j] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--chart-1) 70%, white) 0%, var(--chart-1) 100%);
}

.revenue-breakdown-bar.platform[b-hektsd7e0j] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--chart-2) 70%, white) 0%, var(--chart-2) 100%);
}

.insight-row[b-hektsd7e0j] {
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
}

.insight-row:last-child[b-hektsd7e0j] {
    border-bottom: 0;
    padding-bottom: 0;
}

.insight-row dt[b-hektsd7e0j] {
    color: var(--text-secondary);
    font-weight: 500;
}

.insight-row dd[b-hektsd7e0j] {
    color: var(--text-primary);
    font-weight: 700;
    margin: 0;
}

@media (max-width: 991px) {
    .financial-kpi-grid[b-hektsd7e0j],
    .financial-layout-grid[b-hektsd7e0j],
    .panel-inner-split[b-hektsd7e0j] {
        grid-template-columns: 1fr;
    }

    .panel-inner-chart[b-hektsd7e0j] {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-left: 0;
        padding-top: 1rem;
    }
}

@media (max-width: 768px) {
    .revenue-breakdown-copy[b-hektsd7e0j] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .trend-chart[b-hektsd7e0j] {
        gap: 0.5rem;
    }

    .trend-bars[b-hektsd7e0j] {
        height: 14rem;
        padding-inline: 0.35rem;
    }

    .trend-bar[b-hektsd7e0j] {
        width: 0.65rem;
    }
}

@media (max-width: 767px) {
    .financial-panel table thead[b-hektsd7e0j] {
        display: none;
    }

    .financial-panel table tbody tr[b-hektsd7e0j] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .financial-panel table tbody td[b-hektsd7e0j] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
    }

    .financial-panel table tbody td:last-child[b-hektsd7e0j] {
        border-bottom: none;
    }

    .financial-panel table tbody td[b-hektsd7e0j]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 90px;
    }
}
/* /Components/Pages/Backoffice/HoastiePanel.razor.rz.scp.css */
.hoastie-panel[b-05x0npmz48] {
    padding: 0;
}

.hoastie-status-banner[b-05x0npmz48] {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.hoastie-status-icon[b-05x0npmz48] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.hoastie-status-body[b-05x0npmz48] {
    flex: 1;
}

.hoastie-status-title[b-05x0npmz48] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.hoastie-status-text[b-05x0npmz48] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.hoastie-status-foundry[b-05x0npmz48] {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.hoastie-status-foundry .hoastie-status-icon[b-05x0npmz48] {
    background: var(--color-success);
}

.hoastie-status-legacy[b-05x0npmz48] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.hoastie-status-legacy .hoastie-status-icon[b-05x0npmz48] {
    background: var(--color-warning);
}

.hoastie-status-disabled[b-05x0npmz48] {
    background: var(--background-light);
    border-color: var(--border-color);
}

.hoastie-status-disabled .hoastie-status-icon[b-05x0npmz48] {
    background: var(--text-secondary);
}

.hoastie-slider-row[b-05x0npmz48] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hoastie-slider-row .form-range[b-05x0npmz48] {
    flex: 1;
}

.hoastie-slider-value[b-05x0npmz48] {
    min-width: 3rem;
    text-align: right;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Re-using settings-grid / settings-card styles from IntelEnginePanel via
   global rules — the classes are scoped per-component so we redeclare what's
   needed to keep this panel self-contained. */
.settings-grid[b-05x0npmz48] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.settings-card[b-05x0npmz48] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.settings-card-wide[b-05x0npmz48] {
    grid-column: 1 / -1;
}

.settings-card-header[b-05x0npmz48] {
    margin-bottom: 0.85rem;
}

.settings-card-title[b-05x0npmz48] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-card-badge[b-05x0npmz48] {
    display: inline-block;
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-card-subtitle[b-05x0npmz48] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.settings-card-subtitle code[b-05x0npmz48] {
    background: var(--background-light);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.settings-card-body[b-05x0npmz48] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-actions[b-05x0npmz48] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.settings-meta[b-05x0npmz48] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 991px) {
    .settings-grid[b-05x0npmz48] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Backoffice/IntegrationsPanel.razor.rz.scp.css */
.integrations-panel[b-js0zkbfdmq] {
    display: flex;
    flex-direction: column;
}

.integrations-content[b-js0zkbfdmq] {
    /* Reserve flex space; child panels handle their own layout. */
    min-width: 0;
}
/* /Components/Pages/Backoffice/IntelEnginePanel.razor.rz.scp.css */
.intel-engine-panel[b-88zedo6ymb] {
    padding: 0;
}

.intel-engine-subheader[b-88zedo6ymb] {
    margin-bottom: 1rem;
}

.intel-engine-subheader-text[b-88zedo6ymb] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.92rem;
}

/* ── Stage banner (Dashboard sub-tab) ────────────────────── */
.intel-stage-banner[b-88zedo6ymb] {
    display: flex;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--border-radius);
    margin-bottom: 0.85rem;
    align-items: center;
}

.intel-stage-banner-icon[b-88zedo6ymb] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-info);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.intel-stage-banner-body[b-88zedo6ymb] {
    flex: 1;
}

.intel-stage-banner-title[b-88zedo6ymb] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
    font-size: 0.95rem;
}

.intel-stage-banner-text[b-88zedo6ymb] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.intel-stage-banner-text code[b-88zedo6ymb] {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* .intel-roadmap uses .app-card in markup — keep padding override here */
.intel-roadmap[b-88zedo6ymb] {
    padding: 1.5rem;
}

.intel-roadmap-title[b-88zedo6ymb] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.intel-roadmap-list[b-88zedo6ymb] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.intel-roadmap-list li[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.intel-roadmap-status[b-88zedo6ymb] {
    flex-shrink: 0;
    display: inline-block;
    min-width: 70px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.intel-roadmap-status.done[b-88zedo6ymb] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.intel-roadmap-status.next[b-88zedo6ymb] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.intel-roadmap-status.pending[b-88zedo6ymb] {
    background: var(--background-light);
    color: var(--text-secondary);
}

/* ── Settings grid ───────────────────────────────────────── */
.settings-grid[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* .settings-card surface provided by .app-card */
.settings-card[b-88zedo6ymb] {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.settings-card-wide[b-88zedo6ymb] {
    grid-column: 1 / -1;
}

.settings-card-header[b-88zedo6ymb] {
    margin-bottom: 0.85rem;
}

.settings-card-title[b-88zedo6ymb] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-card-badge[b-88zedo6ymb] {
    display: inline-block;
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-card-subtitle[b-88zedo6ymb] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.settings-card-subtitle code[b-88zedo6ymb] {
    background: var(--background-light);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.settings-card-body[b-88zedo6ymb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (max-width: 991px) {
    .settings-grid[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
}

/* ── Chip list ───────────────────────────────────────────── */
.chip-list[b-88zedo6ymb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 2rem;
}

.chip[b-88zedo6ymb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--background-light);
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
}

.chip-text[b-88zedo6ymb] {
    line-height: 1;
}

.chip-remove[b-88zedo6ymb] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0;
    line-height: 0;
    cursor: pointer;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.chip-remove:hover[b-88zedo6ymb] {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.chip-empty[b-88zedo6ymb] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

.chip-input-row[b-88zedo6ymb] {
    display: flex;
    gap: 0.5rem;
}

.chip-input[b-88zedo6ymb] {
    flex: 1;
}

.chip-add-btn[b-88zedo6ymb] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Save bar ────────────────────────────────────────────── */
.settings-actions[b-88zedo6ymb] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.settings-meta[b-88zedo6ymb] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ── Intel sub-tab ───────────────────────────────────────── */
.intel-banner-warning[b-88zedo6ymb] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.intel-banner-warning-icon[b-88zedo6ymb] {
    background: var(--color-warning);
}

.intel-actions-row[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.intel-actions-buttons[b-88zedo6ymb] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.intel-filter-chips[b-88zedo6ymb] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.intel-filter-chip[b-88zedo6ymb] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.intel-filter-chip:hover[b-88zedo6ymb] {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.intel-filter-chip.active[b-88zedo6ymb] {
    background: var(--text-primary);
    color: var(--text-inverse);
    border-color: var(--text-primary);
}

.intel-list[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1rem;
}

@media (max-width: 575px) {
    .intel-list[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
}

.intel-card[b-88zedo6ymb] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: box-shadow 0.15s ease;
}

.intel-card:hover[b-88zedo6ymb] {
    box-shadow: var(--shadow-md);
}

.intel-card-archived[b-88zedo6ymb] {
    opacity: 0.6;
    background: var(--background-light);
}

.intel-card-header[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.intel-vector-badge[b-88zedo6ymb] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.intel-vector-community[b-88zedo6ymb] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.intel-vector-brand[b-88zedo6ymb] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.intel-card-fetched[b-88zedo6ymb],
.intel-card-published[b-88zedo6ymb] {
    color: var(--text-secondary);
}

.intel-card-title[b-88zedo6ymb] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.35;
}

.intel-card-summary[b-88zedo6ymb] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.intel-card-footer[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border-color);
}

.intel-card-source[b-88zedo6ymb] {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.intel-card-source a[b-88zedo6ymb] {
    color: var(--color-info);
    text-decoration: none;
    font-weight: 600;
}

.intel-card-source a:hover[b-88zedo6ymb] {
    text-decoration: underline;
}

.intel-card-actions[b-88zedo6ymb] {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* ── Package card (Content sub-tab) ──────────────────────── */
.package-card[b-88zedo6ymb] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    transition: box-shadow 0.15s ease;
}

.package-card:hover[b-88zedo6ymb] {
    box-shadow: var(--shadow-md);
}

.package-card-header[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.package-pillar-badge[b-88zedo6ymb] {
    display: inline-block;
    background: var(--text-primary);
    color: var(--text-inverse);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.package-channel-badge[b-88zedo6ymb] {
    display: inline-block;
    background: var(--background-light);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-color);
}

.package-status-badge[b-88zedo6ymb] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.package-status-draft[b-88zedo6ymb] {
    background: var(--background-light);
    color: var(--text-secondary);
}

.package-status-approved[b-88zedo6ymb] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.package-status-rejected[b-88zedo6ymb] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.package-status-readytopost[b-88zedo6ymb] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.package-status-posted[b-88zedo6ymb] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.package-compliance-badge[b-88zedo6ymb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.package-compliance-clean[b-88zedo6ymb] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.package-compliance-warning[b-88zedo6ymb] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.package-compliance-block[b-88zedo6ymb] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.package-card-meta[b-88zedo6ymb] {
    margin-left: auto;
    color: var(--text-secondary);
}

.package-caption-grid[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 991px) {
    .package-caption-grid[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
}

.package-caption[b-88zedo6ymb] {
    background: var(--background-light);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
}

.package-caption-label[b-88zedo6ymb] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.package-caption-text[b-88zedo6ymb] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.package-meta-grid[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 991px) {
    .package-meta-grid[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
}

.package-meta-label[b-88zedo6ymb] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.package-meta-text[b-88zedo6ymb] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.package-warning-details[b-88zedo6ymb] {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
}

.package-warning-details summary[b-88zedo6ymb] {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-warning);
    font-size: 0.85rem;
}

.package-warning-list[b-88zedo6ymb] {
    margin: 0.65rem 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.package-warning-list li[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    flex-wrap: wrap;
}

.package-warning-severity[b-88zedo6ymb] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.package-warning-severity-block[b-88zedo6ymb] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.package-warning-severity-warning[b-88zedo6ymb] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.package-warning-severity-info[b-88zedo6ymb] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.package-warning-field[b-88zedo6ymb] {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
}

/* Rejection callout */
.package-rejection-callout[b-88zedo6ymb] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
}

/* Edit mode */
.package-edit-grid[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.package-edit-grid .package-edit-field:nth-child(3)[b-88zedo6ymb] {
    grid-column: 1 / -1;
}

.package-edit-field label[b-88zedo6ymb] {
    display: block;
    margin-bottom: 0.3rem;
}

@media (max-width: 991px) {
    .package-edit-grid[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
    .package-edit-grid .package-edit-field:nth-child(3)[b-88zedo6ymb] {
        grid-column: auto;
    }
}

/* Reject reason row */
.package-reject-row[b-88zedo6ymb] {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.package-edit-actions[b-88zedo6ymb] {
    display: flex;
    gap: 0.4rem;
}

/* Generated image */
.package-image-row[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.package-image-link[b-88zedo6ymb] {
    display: block;
    line-height: 0;
}

.package-image[b-88zedo6ymb] {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.package-image-link:hover .package-image[b-88zedo6ymb] {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.package-image-meta[b-88zedo6ymb] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.package-image-prompt[b-88zedo6ymb] {
    margin: 0.3rem 0 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
    font-style: italic;
}

.package-image-empty[b-88zedo6ymb] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    padding: 0.65rem 0.85rem;
    background: var(--background-light);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.package-image-empty i[b-88zedo6ymb] {
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .package-image-row[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
    .package-image[b-88zedo6ymb] {
        width: 100%;
        height: auto;
        max-height: 320px;
    }
}

/* Action bar */
.package-action-bar[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.package-audit-meta[b-88zedo6ymb] {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.package-action-buttons[b-88zedo6ymb] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ── Dashboard sub-tab ───────────────────────────────────── */

.dash-status-strip[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.dash-status-pill[b-88zedo6ymb] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--text-secondary);
    border-radius: var(--border-radius);
    padding: 0.55rem 0.8rem;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.dash-status-pill i[b-88zedo6ymb] {
    font-size: 1.2rem;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.dash-status-pill-title[b-88zedo6ymb] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.dash-status-pill-sub[b-88zedo6ymb] {
    color: var(--text-secondary);
    font-size: 0.74rem;
    margin-top: 0.05rem;
}

.dash-status-on[b-88zedo6ymb] {
    border-left-color: var(--color-success);
}

.dash-status-on i[b-88zedo6ymb] {
    color: var(--color-success);
}

.dash-status-off[b-88zedo6ymb] {
    border-left-color: var(--text-secondary);
}

.dash-status-info[b-88zedo6ymb] {
    border-left-color: var(--color-info);
}

.dash-status-info i[b-88zedo6ymb] {
    color: var(--color-info);
}

.dash-gaps[b-88zedo6ymb] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.dash-gap[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    border: 1px solid;
}

.dash-gap i[b-88zedo6ymb] {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.dash-gap-message[b-88zedo6ymb] {
    flex: 1;
    color: var(--text-primary);
}

.dash-gap-action[b-88zedo6ymb] {
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.dash-gap-block[b-88zedo6ymb] {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}
.dash-gap-block .dash-gap-action[b-88zedo6ymb] { color: var(--color-danger); }

.dash-gap-warning[b-88zedo6ymb] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
}
.dash-gap-warning .dash-gap-action[b-88zedo6ymb] { color: var(--color-warning); }

.dash-gap-info[b-88zedo6ymb] {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}
.dash-gap-info i[b-88zedo6ymb] { color: var(--color-info); }
.dash-gap-info .dash-gap-action[b-88zedo6ymb] { color: var(--color-info); }

.dash-kpi-grid[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 991px) {
    .dash-kpi-grid[b-88zedo6ymb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* .dash-kpi-tile surface provided by .app-card */
.dash-kpi-tile[b-88zedo6ymb] {
    padding: 0.75rem 1rem;
    text-align: left;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dash-kpi-clickable[b-88zedo6ymb] {
    cursor: pointer;
}

.dash-kpi-clickable:hover[b-88zedo6ymb] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.dash-kpi-label[b-88zedo6ymb] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.dash-kpi-value[b-88zedo6ymb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dash-kpi-needs-attention[b-88zedo6ymb] {
    color: var(--color-warning);
}

.dash-kpi-ready[b-88zedo6ymb] {
    color: var(--color-success);
}

.dash-kpi-sub[b-88zedo6ymb] {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.dash-actions[b-88zedo6ymb] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
    padding: 0.55rem 0.85rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.dash-actions-label[b-88zedo6ymb] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
}

.dash-section-title[b-88zedo6ymb] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.85rem 0;
}

/* .dash-activity surface provided by .app-card */
.dash-activity[b-88zedo6ymb] {
    padding: 1.1rem 1.25rem;
}

.dash-activity-list[b-88zedo6ymb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dash-activity-list li[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    font-size: 0.88rem;
}

/* dash-activity-list hover moved to end of file — uses --surface-subtle */

.dash-activity-icon[b-88zedo6ymb] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.dash-activity-icon-info[b-88zedo6ymb]     { background: var(--color-info-bg);    color: var(--color-info); }
.dash-activity-icon-neutral[b-88zedo6ymb]  { background: var(--background-light); color: var(--text-secondary); }
.dash-activity-icon-success[b-88zedo6ymb]  { background: var(--color-success-bg); color: var(--color-success); }
.dash-activity-icon-danger[b-88zedo6ymb]   { background: var(--color-danger-bg);  color: var(--color-danger); }
.dash-activity-icon-primary[b-88zedo6ymb]  { background: var(--color-info-bg);    color: var(--color-info); }

.dash-activity-body[b-88zedo6ymb] {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dash-activity-type[b-88zedo6ymb] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-activity-title[b-88zedo6ymb] {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.dash-activity-detail[b-88zedo6ymb] {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.dash-activity-time[b-88zedo6ymb] {
    color: var(--text-secondary);
    font-size: 0.78rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Performance sub-tab ─────────────────────────────────── */
.perf-channel-filter[b-88zedo6ymb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.perf-channel-filter .intel-filter-chip[b-88zedo6ymb] {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border-radius: 10px;
}

.perf-channel-filter .intel-filter-chip i[b-88zedo6ymb] {
    font-size: 1.15rem;
    line-height: 1;
}

.perf-kpi-grid[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 991px) {
    .perf-kpi-grid[b-88zedo6ymb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.perf-kpi-tile[b-88zedo6ymb] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-sm);
}

.perf-kpi-label[b-88zedo6ymb] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.perf-kpi-value[b-88zedo6ymb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.perf-kpi-sub[b-88zedo6ymb] {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.perf-grid[b-88zedo6ymb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 991px) {
    .perf-grid[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
}

.perf-table[b-88zedo6ymb] {
    font-size: 0.9rem;
}

.perf-table th[b-88zedo6ymb] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 700;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.perf-table td[b-88zedo6ymb] {
    padding: 0.55rem 0.55rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.perf-table tr:last-child td[b-88zedo6ymb] {
    border-bottom: none;
}

.perf-table .text-end[b-88zedo6ymb] {
    text-align: right;
}

.perf-table-posts .perf-table-caption[b-88zedo6ymb] {
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perf-leads-input[b-88zedo6ymb] {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.perf-engagement[b-88zedo6ymb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.perf-engagement i[b-88zedo6ymb] {
    margin-right: 0.25rem;
    color: var(--text-primary);
}

.perf-trend[b-88zedo6ymb] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 140px;
    padding-bottom: 1.25rem;
    overflow-x: auto;
}

.perf-trend-day[b-88zedo6ymb] {
    flex: 1 1 0;
    min-width: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.perf-trend-bars[b-88zedo6ymb] {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 100%;
}

.perf-trend-bar[b-88zedo6ymb] {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 1px;
}

.perf-trend-bar-posts[b-88zedo6ymb] {
    background: var(--color-info);
}

.perf-trend-bar-leads[b-88zedo6ymb] {
    background: var(--color-success);
}

.perf-trend-tick[b-88zedo6ymb] {
    position: absolute;
    bottom: -1.25rem;
    left: 0;
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.perf-trend-legend[b-88zedo6ymb] {
    display: flex;
    gap: 1rem;
    margin-top: 0.85rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.perf-trend-swatch[b-88zedo6ymb] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.perf-trend-swatch-posts[b-88zedo6ymb] { background: var(--color-info); }
.perf-trend-swatch-leads[b-88zedo6ymb] { background: var(--color-success); }

/* ── Posts sub-tab ───────────────────────────────────────── */
.post-caption-block[b-88zedo6ymb] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.post-caption-label-row[b-88zedo6ymb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}

.post-caption-pre[b-88zedo6ymb] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}

.post-mark-row[b-88zedo6ymb] {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.post-mark-row > .package-meta-label[b-88zedo6ymb] {
    grid-column: 1 / -1;
    margin: 0;
}

.post-mark-row > .package-edit-actions[b-88zedo6ymb] {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .post-mark-row[b-88zedo6ymb] {
        grid-template-columns: 1fr;
    }
}

/* .intel-coming-soon replaced by EmptyState shared component — Stage 4 */

/* ── Utility classes to replace inline style= attributes ──────────────── */
.intel-hint-text[b-88zedo6ymb] {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.intel-small-text[b-88zedo6ymb] {
    font-size: 0.85rem;
}

.intel-table-col-leads[b-88zedo6ymb] {
    width: 9rem;
}

.intel-table-nowrap[b-88zedo6ymb] {
    white-space: nowrap;
}

/* dash-activity-list hover — uses surface-subtle (consistent with app-table row hover) */
.dash-activity-list li:hover[b-88zedo6ymb] {
    background: var(--surface-subtle);
}

/* ── Mobile card transform for perf tables ─────────────────── */
@media (max-width: 767px) {
    .perf-table thead tr[b-88zedo6ymb] {
        display: none;
    }

    .perf-table tbody tr[b-88zedo6ymb] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .perf-table tbody td[b-88zedo6ymb] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
        font-variant-numeric: tabular-nums;
    }

    .perf-table tbody td:last-child[b-88zedo6ymb] {
        border-bottom: none;
    }

    .perf-table tbody td[b-88zedo6ymb]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .perf-table tbody td[data-label=""][b-88zedo6ymb]::before {
        display: none;
        min-width: 0;
    }

    /* Leads input: full width on card layout */
    .perf-leads-input[b-88zedo6ymb] {
        width: 100%;
        max-width: 120px;
    }

    /* Caption cell: allow wrapping, remove fixed max-width */
    .perf-table-posts .perf-table-caption[b-88zedo6ymb] {
        max-width: none;
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        word-break: break-word;
    }

    /* Engagement cell: left-align content in card layout */
    .perf-engagement[b-88zedo6ymb] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .intel-table-nowrap[b-88zedo6ymb] {
        white-space: normal;
    }
}
/* /Components/Pages/Backoffice/IntelligencePanel.razor.rz.scp.css */
.intelligence-panel[b-45o3db4lo7] {
    padding: 0;
}

/* Coming-soon stub used by the placeholder Hoastie tab — styles imported from
   IntelEnginePanel scope by being identical class name only at the component
   level. We re-declare locally so this panel is self-contained. */
.intel-coming-soon[b-45o3db4lo7] {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

.intel-coming-soon i[b-45o3db4lo7] {
    font-size: 2.75rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.85rem;
}

.intel-coming-soon-title[b-45o3db4lo7] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.intel-coming-soon-text[b-45o3db4lo7] {
    max-width: 540px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}
/* /Components/Pages/Backoffice/IssueApiKeyDialog.razor.rz.scp.css */
.issue-key-modal-overlay[b-kette1sbf2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1055;
    padding: 1rem;
}

.issue-key-modal-card[b-kette1sbf2] {
    background: var(--surface-raised);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.issue-key-modal-header[b-kette1sbf2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.issue-key-modal-title[b-kette1sbf2] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-key-modal-header .step-indicators[b-kette1sbf2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.step-indicator[b-kette1sbf2] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.step-indicator.active[b-kette1sbf2] {
    color: var(--primary-color);
    font-weight: 600;
}

.step-indicator.completed[b-kette1sbf2] {
    color: var(--text-primary);
}

.step-number[b-kette1sbf2] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid currentColor;
}

.step-indicator.active .step-number[b-kette1sbf2] {
    background: var(--primary-color);
    color: var(--text-inverse);
    border-color: var(--primary-color);
}

.step-indicator.completed .step-number[b-kette1sbf2] {
    background: var(--text-primary);
    color: var(--text-inverse);
    border-color: var(--text-primary);
}

.step-divider[b-kette1sbf2] {
    width: 24px;
    height: 2px;
    background: var(--border-color);
}

.issue-key-modal-body[b-kette1sbf2] {
    padding: 0.875rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.issue-key-modal-footer[b-kette1sbf2] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-subtle);
    flex-shrink: 0;
}

.form-grid[b-kette1sbf2] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.form-row[b-kette1sbf2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-field[b-kette1sbf2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.form-label-compact[b-kette1sbf2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
}

.scope-toggle[b-kette1sbf2] {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--background-light);
    align-self: flex-start;
}

.scope-toggle-btn[b-kette1sbf2] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0.375rem 0.875rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.scope-toggle-btn:hover[b-kette1sbf2] {
    color: var(--text-primary);
}

.scope-toggle-btn.active[b-kette1sbf2] {
    background: var(--primary-color);
    color: var(--text-inverse);
}

.entity-list[b-kette1sbf2] {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-raised);
}

.entity-option[b-kette1sbf2] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.45rem 0.625rem;
    border: none;
    background: var(--surface-raised);
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
    font-size: 0.875rem;
}

.entity-option:last-child[b-kette1sbf2] {
    border-bottom: none;
}

.entity-option:hover[b-kette1sbf2] {
    background: var(--background-light);
}

.entity-option.selected[b-kette1sbf2] {
    background: rgba(255, 56, 92, 0.08);
    color: var(--primary-color);
    font-weight: 600;
}

.entity-option .entity-name[b-kette1sbf2] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permissions-grid[b-kette1sbf2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.permission-option[b-kette1sbf2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    margin: 0;
}

.permission-option:hover[b-kette1sbf2] {
    border-color: var(--primary-color);
    background: rgba(255, 56, 92, 0.03);
}

.permission-option.selected[b-kette1sbf2] {
    border-color: var(--primary-color);
    background: rgba(255, 56, 92, 0.05);
}

.permission-option .form-check-input[b-kette1sbf2] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.permission-details[b-kette1sbf2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.permission-name[b-kette1sbf2] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.permission-desc[b-kette1sbf2] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .issue-key-modal-header[b-kette1sbf2] {
        flex-wrap: wrap;
    }

    .issue-key-modal-header .step-indicators[b-kette1sbf2] {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: center;
        margin-top: 0.375rem;
    }

    .step-label[b-kette1sbf2] {
        display: none;
    }

    .form-row[b-kette1sbf2] {
        grid-template-columns: 1fr;
    }

    .permissions-grid[b-kette1sbf2] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Backoffice/ManagementCompaniesPanel.razor.rz.scp.css */
.mc-panel[b-z6tsv4r2ky] {
    padding: 1.5rem 0;
}

.mc-panel-search[b-z6tsv4r2ky] {
    max-width: 320px;
}

/* Filter chip tabs */
.filter-tab[b-z6tsv4r2ky] {
    border: 1px solid var(--border-color);
    background: white;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.filter-tab:hover[b-z6tsv4r2ky] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.filter-tab.active[b-z6tsv4r2ky] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Status pills */
.status-pill[b-z6tsv4r2ky] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.status-active[b-z6tsv4r2ky] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-pending[b-z6tsv4r2ky] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-inactive[b-z6tsv4r2ky] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Mobile: collapse to stacked card layout */
@media (max-width: 767px) {
    .mc-panel-search[b-z6tsv4r2ky] {
        max-width: 100%;
    }

    .mc-table thead tr[b-z6tsv4r2ky] {
        display: none;
    }

    .mc-table tbody tr[b-z6tsv4r2ky] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .mc-table tbody td[b-z6tsv4r2ky] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .mc-table tbody td:last-child[b-z6tsv4r2ky] {
        border-bottom: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .mc-table tbody td[b-z6tsv4r2ky]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .mc-table tbody td[data-label=""][b-z6tsv4r2ky]::before {
        display: none;
        min-width: 0;
    }
}
/* /Components/Pages/Backoffice/McDetailPanel.razor.rz.scp.css */
/* =========================================================
   PmcDetailPanel — scoped component styles
   All color/shadow/radius values use design tokens from app.css
   ========================================================= */

/* ── Back navigation ── */
.back-btn[b-soforabk2x] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    padding-left: 0;
    transition: color 0.2s ease;
}

.back-btn:hover[b-soforabk2x],
.back-btn:focus-visible[b-soforabk2x] {
    color: var(--primary-color);
}

/* ── Detail header ── */
.detail-header[b-soforabk2x] {
    margin-bottom: 1.5rem;
}

.detail-header-main[b-soforabk2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.detail-header-identity[b-soforabk2x] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mc-avatar[b-soforabk2x] {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius);
    background: var(--background-light);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.detail-title[b-soforabk2x] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0;
}

.detail-legal-name[b-soforabk2x] {
    font-size: 0.875rem;
    margin-top: 0.125rem;
}

.detail-header-actions[b-soforabk2x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Status pills ── */
.status-pill[b-soforabk2x] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.pill-active[b-soforabk2x] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid #bbf7d0;
}

.pill-inactive[b-soforabk2x] {
    background: var(--background-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.pill-pending[b-soforabk2x] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid #fde68a;
}

.pill-rejected[b-soforabk2x] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid #fecaca;
}

.pill-locked[b-soforabk2x] {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}

/* ── Payout warning ── */
.payout-warning[b-soforabk2x] {
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}

/* ── Profile grid ── */
.profile-grid[b-soforabk2x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    padding: 0.25rem 0;
}

.profile-field[b-soforabk2x] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-field-wide[b-soforabk2x] {
    grid-column: 1 / -1;
}

.profile-label[b-soforabk2x] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.profile-value[b-soforabk2x] {
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-word;
}

.profile-value a[b-soforabk2x] {
    color: var(--color-info);
    text-decoration: none;
}

.profile-value a:hover[b-soforabk2x] {
    text-decoration: underline;
}

/* ── Detail body ── */
.detail-body[b-soforabk2x] {
    /* stacked layout, cards are full-width */
}

/* ── Tables ── */
.managed-communities-table th[b-soforabk2x],
.commission-history-table th[b-soforabk2x] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-top: none;
    background: var(--background-light);
}

.managed-communities-table td[b-soforabk2x],
.commission-history-table td[b-soforabk2x] {
    vertical-align: middle;
    font-size: 0.875rem;
    border-color: var(--border-color);
}

.managed-communities-table tbody tr:hover[b-soforabk2x],
.commission-history-table tbody tr:hover[b-soforabk2x] {
    background: var(--background-light);
}

/* ── Attach Modal ── */
.attach-modal .modal-content[b-soforabk2x] {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
}

.attach-modal .modal-header[b-soforabk2x] {
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
}

.attach-modal .modal-footer[b-soforabk2x] {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

/* Community picker list */
.community-picker-list[b-soforabk2x] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.community-picker-row[b-soforabk2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.community-picker-row:hover[b-soforabk2x] {
    border-color: var(--primary-color);
    background: var(--color-info-bg);
}

.community-picker-row.selected[b-soforabk2x] {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.community-picker-info[b-soforabk2x] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.community-picker-name[b-soforabk2x] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-picker-address[b-soforabk2x] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-picker-pmc[b-soforabk2x] {
    align-self: flex-start;
    font-size: 0.75rem;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .detail-header-main[b-soforabk2x] {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-header-actions[b-soforabk2x] {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-grid[b-soforabk2x] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    /* Managed Communities table — card transform */
    .managed-communities-table thead[b-soforabk2x],
    .commission-history-table thead[b-soforabk2x] {
        display: none;
    }

    .managed-communities-table tbody tr[b-soforabk2x],
    .commission-history-table tbody tr[b-soforabk2x] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .managed-communities-table tbody td[b-soforabk2x],
    .commission-history-table tbody td[b-soforabk2x] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
        font-size: 0.875rem;
    }

    .managed-communities-table tbody td:last-child[b-soforabk2x],
    .commission-history-table tbody td:last-child[b-soforabk2x] {
        border-bottom: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .managed-communities-table tbody td[b-soforabk2x]::before,
    .commission-history-table tbody td[b-soforabk2x]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .managed-communities-table tbody td[data-label=""][b-soforabk2x]::before,
    .commission-history-table tbody td[data-label=""][b-soforabk2x]::before {
        display: none;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .detail-header-identity[b-soforabk2x] {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-grid[b-soforabk2x] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Backoffice/OAuthClientsPanel.razor.rz.scp.css */
.oauth-clients-toolbar[b-6butkwxkdm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.panel-subtitle[b-6butkwxkdm] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.oauth-clients-table td[b-6butkwxkdm] {
    vertical-align: middle;
}

.oauth-clients-table .actions-cell[b-6butkwxkdm] {
    white-space: nowrap;
}

.oauth-clients-table code[b-6butkwxkdm] {
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--background-light);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* Row click affordance — opens the detail drawer */
.oauth-clients-table .row-clickable[b-6butkwxkdm] {
    cursor: pointer;
}

.oauth-clients-table .row-selected td[b-6butkwxkdm] {
    background: var(--color-info-bg) !important;
}

/* ── Drawer detail layout (mirrors PlatformBackoffice booking drawer) ── */
.drawer-detail-section[b-6butkwxkdm] {
    margin-bottom: 0.875rem;
}

.drawer-detail-row[b-6butkwxkdm] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.drawer-detail-row .drawer-detail-section[b-6butkwxkdm] {
    margin-bottom: 0;
    flex: 1;
}

.drawer-detail-label[b-6butkwxkdm] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.drawer-detail-value[b-6butkwxkdm] {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.drawer-detail-value code[b-6butkwxkdm] {
    font-size: 0.85rem;
    background: var(--background-light);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    word-break: break-all;
}

.flex-1[b-6butkwxkdm] {
    flex: 1;
}

.oauth-chip-list[b-6butkwxkdm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.oauth-chip-list code[b-6butkwxkdm] {
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--background-light);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}

.oauth-uri-list[b-6butkwxkdm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.oauth-uri-list code[b-6butkwxkdm] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--background-light);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    word-break: break-all;
}

.drawer-detail-actions[b-6butkwxkdm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-color);
}

.secret-reveal[b-6butkwxkdm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.secret-reveal code[b-6butkwxkdm] {
    flex: 1;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-all;
    margin: 0;
}

/* ── Densified create / edit modal ── */
.oauth-form-overlay[b-6butkwxkdm] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1055;
    padding: 1rem;
}

.oauth-form-card[b-6butkwxkdm] {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.oauth-form[b-6butkwxkdm] {
    display: contents;
}

.oauth-form-header[b-6butkwxkdm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.oauth-form-title[b-6butkwxkdm] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oauth-form-body[b-6butkwxkdm] {
    padding: 0.875rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.oauth-form-footer[b-6butkwxkdm] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--background-light);
    flex-shrink: 0;
}

.form-row[b-6butkwxkdm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-field[b-6butkwxkdm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.form-label-compact[b-6butkwxkdm] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
}

.checkbox-grid[b-6butkwxkdm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    max-height: 160px;
    overflow-y: auto;
}

.checkbox-grid--inline[b-6butkwxkdm] {
    /* Single column — used for grants list (only 3 items) */
}

.checkbox-grid--two-col[b-6butkwxkdm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.625rem;
}

.checkbox-grid .form-check[b-6butkwxkdm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    min-height: 0;
    font-size: 0.85rem;
    cursor: pointer;
}

.checkbox-grid .form-check-input[b-6butkwxkdm] {
    margin: 0;
    flex-shrink: 0;
}

.checkbox-grid .form-check-label[b-6butkwxkdm] {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.tenant-binding[b-6butkwxkdm] {
    border: 1px solid var(--border-color);
    background: var(--background-light);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tenant-binding-header[b-6butkwxkdm] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-primary);
}

/* ── Mobile card transform for the OAuth clients table ── */
@media (max-width: 767px) {
    .oauth-clients-table thead tr[b-6butkwxkdm] {
        display: none;
    }

    .oauth-clients-table tbody tr[b-6butkwxkdm] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .oauth-clients-table tbody td[b-6butkwxkdm] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .oauth-clients-table tbody td:last-child[b-6butkwxkdm] {
        border-bottom: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .oauth-clients-table tbody td[b-6butkwxkdm]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .oauth-clients-table tbody td[data-label=""][b-6butkwxkdm]::before {
        display: none;
        min-width: 0;
    }

    .oauth-clients-table .actions-cell[b-6butkwxkdm] {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .oauth-form-card[b-6butkwxkdm] {
        max-width: none;
    }

    .form-row[b-6butkwxkdm] {
        grid-template-columns: 1fr;
    }

    .checkbox-grid--two-col[b-6butkwxkdm] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Backoffice/PaymentSettingsPanel.razor.rz.scp.css */
.payment-settings-wrap[b-yz7k6hgwv3] {
    max-width: 860px;
}

.settings-card[b-yz7k6hgwv3] {
    padding: 1.25rem;
}

.settings-section[b-yz7k6hgwv3] {
    padding: 0.5rem 0;
}

.section-title[b-yz7k6hgwv3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i[b-yz7k6hgwv3] {
    color: var(--primary-color);
}

.section-description[b-yz7k6hgwv3] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.settings-divider[b-yz7k6hgwv3] {
    height: 1px;
    background: var(--border-color);
    margin: 1rem 0;
}

.last-updated[b-yz7k6hgwv3] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

.settings-actions[b-yz7k6hgwv3] {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.settings-actions .btn-primary[b-yz7k6hgwv3] {
    padding: 0.625rem 1.5rem;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .settings-card[b-yz7k6hgwv3] {
        padding: 1.25rem;
    }

    .settings-actions[b-yz7k6hgwv3] {
        justify-content: stretch;
    }

    .settings-actions .btn[b-yz7k6hgwv3] {
        width: 100%;
    }
}
/* /Components/Pages/Backoffice/TransactionsPanel.razor.rz.scp.css */
.transactions-table[b-uzs4ox7l2q] {
    table-layout: auto;
    width: 100%;
}

.transactions-table td[b-uzs4ox7l2q] {
    font-size: 0.92rem;
}

.transactions-table tr.row-deleted td[b-uzs4ox7l2q] {
    opacity: 0.7;
    background: var(--background-light);
}

.cell-truncate[b-uzs4ox7l2q] {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-id-snippet[b-uzs4ox7l2q] {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* Stacked status badges — booking status above payment status. Keeps the
   Status column to one badge wide instead of two side-by-side, which was
   the main source of horizontal overflow on the Deleted/All views. */
.status-stack[b-uzs4ox7l2q] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
}

.badge-stack[b-uzs4ox7l2q] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25em 0.5em;
}

.actions-cell[b-uzs4ox7l2q] {
    width: 1%;
    white-space: nowrap;
}

.span-row td.hard-delete-confirm[b-uzs4ox7l2q] {
    background: var(--color-danger-bg);
    border-top: 1px solid var(--color-danger);
    border-bottom: 1px solid var(--color-danger);
    padding: 0.75rem 1rem;
}

.span-row td.hard-delete-confirm strong[b-uzs4ox7l2q] {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .transactions-table thead tr[b-uzs4ox7l2q] {
        display: none;
    }
    .transactions-table tbody tr[b-uzs4ox7l2q] {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
    }
    .transactions-table tbody td[b-uzs4ox7l2q] {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0;
        border: none;
    }
    .transactions-table tbody td[b-uzs4ox7l2q]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }
    .cell-truncate[b-uzs4ox7l2q] {
        max-width: none;
        white-space: normal;
        text-align: right;
    }
}
/* /Components/Pages/BillingPanel.razor.rz.scp.css */
.billing-page[b-vyzoacxu4g] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1rem 1.5rem;
}

.page-header[b-vyzoacxu4g] {
    margin-bottom: 1.25rem;
}

.page-title[b-vyzoacxu4g] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle[b-vyzoacxu4g] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Tabs */
.billing-tabs[b-vyzoacxu4g] {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.billing-tab[b-vyzoacxu4g] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.65rem 1.1rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.billing-tab:hover[b-vyzoacxu4g] {
    color: var(--text-primary);
}

.billing-tab.active[b-vyzoacxu4g] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* ── Overview tab ─────────────────────────────────────────────────────────── */
.billing-overview-grid[b-vyzoacxu4g] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 991px) {
    .billing-overview-grid[b-vyzoacxu4g] {
        grid-template-columns: 1fr;
    }
}

.overview-tile[b-vyzoacxu4g] {
    /* surface provided by .app-card */
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.overview-tile-title[b-vyzoacxu4g] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
    line-height: 1.2;
}

.overview-tile-empty[b-vyzoacxu4g] {
    flex-grow: 1;
}

.overview-tile-action[b-vyzoacxu4g] {
    margin-top: auto;
    padding-top: 0.75rem;
}

.overview-tile-link[b-vyzoacxu4g] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-info);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.overview-tile-link:hover[b-vyzoacxu4g],
.overview-tile-link:focus-visible[b-vyzoacxu4g] {
    color: var(--primary-color);
    text-decoration: underline;
    outline: none;
}

.overview-tile-divider[b-vyzoacxu4g] {
    border-top: 1px solid var(--border-color);
    margin: 0.85rem 0 0.65rem;
}

.overview-tile-subtitle[b-vyzoacxu4g] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

/* Activity mini-list */
.overview-mini-list[b-vyzoacxu4g] {
    list-style: none;
    padding: 0;
    margin: 0 -0.25rem;
    flex-grow: 1;
}

.overview-mini-list li[b-vyzoacxu4g] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.4rem 0.25rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.overview-mini-list li:last-child[b-vyzoacxu4g] {
    border-bottom: none;
}

.overview-mini-date[b-vyzoacxu4g] {
    color: var(--text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.overview-mini-label[b-vyzoacxu4g] {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-mini-amount[b-vyzoacxu4g] {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Method summary row (compact card-on-file rendering for the middle tile) */
.overview-method-row[b-vyzoacxu4g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.overview-method-brand-tag[b-vyzoacxu4g] {
    flex-shrink: 0;
    width: 56px;
    height: 38px;
    border-radius: 6px;
    background: linear-gradient(135deg, #1a237e 0%, #1565c0 100%);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.overview-method-brand-tag.stored-card-mastercard[b-vyzoacxu4g] {
    background: linear-gradient(135deg, #1a1a1a 0%, #444 100%);
    position: relative;
}

.overview-method-brand-tag.stored-card-mastercard span[b-vyzoacxu4g] {
    display: none;
}

.overview-method-brand-tag.stored-card-mastercard[b-vyzoacxu4g]::before,
.overview-method-brand-tag.stored-card-mastercard[b-vyzoacxu4g]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.overview-method-brand-tag.stored-card-mastercard[b-vyzoacxu4g]::before {
    background: #eb001b; /* Mastercard brand identity — do not tokenize */
    left: 12px;
}

.overview-method-brand-tag.stored-card-mastercard[b-vyzoacxu4g]::after {
    background: #f79e1b; /* Mastercard brand identity — do not tokenize */
    right: 12px;
    opacity: 0.85;
}

.overview-method-brand-tag.stored-card-amex[b-vyzoacxu4g] {
    background: linear-gradient(135deg, #006FCF 0%, #003087 100%);
}

.overview-method-brand-tag.stored-card-discover[b-vyzoacxu4g] {
    background: linear-gradient(135deg, #1a1a1a 0%, #ff6b00 140%);
}

.overview-method-brand-tag.stored-card-visa[b-vyzoacxu4g] {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    font-style: italic;
    font-size: 0.95rem;
    font-family: 'Arial Black', sans-serif;
    letter-spacing: -0.02em;
}

.overview-method-row.is-ach .overview-method-brand-tag[b-vyzoacxu4g] {
    background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
    font-size: 0.95rem;
}

.overview-method-mask[b-vyzoacxu4g] {
    flex-grow: 1;
    min-width: 0;
}

.overview-method-digits[b-vyzoacxu4g] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--text-primary);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.overview-method-dots[b-vyzoacxu4g] {
    font-size: 0.7rem;
    opacity: 0.55;
    letter-spacing: 0.25em;
}

.overview-method-last4[b-vyzoacxu4g] {
    font-size: 1.05rem;
}

.overview-method-exp[b-vyzoacxu4g] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.overview-method-empty[b-vyzoacxu4g] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 0.75rem 0;
    flex-grow: 1;
}

.overview-method-meta[b-vyzoacxu4g] {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.overview-method-name[b-vyzoacxu4g] {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.overview-method-line[b-vyzoacxu4g] {
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Quick links */
.overview-link-list[b-vyzoacxu4g] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.overview-link-list li[b-vyzoacxu4g] {
    margin-bottom: 0.45rem;
}

.overview-link-list a[b-vyzoacxu4g] {
    color: var(--color-info);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.overview-link-list a:hover[b-vyzoacxu4g] {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Bottom history card sits inside an overview wrapper for spacing parity */
.overview-history-card[b-vyzoacxu4g] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0;
    overflow: hidden;
}

/* When the history table lives inside the overview card (flush), suppress
   double borders. The app-card-flush wrapper removes padding so the
   app-table header/rows sit edge-to-edge. */
.overview-history-card .app-table[b-vyzoacxu4g] {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Stats row */
.stats-row[b-vyzoacxu4g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-box[b-vyzoacxu4g] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1rem;
    text-align: center;
}

.stat-box-icon[b-vyzoacxu4g] {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-box-value[b-vyzoacxu4g] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-box-label[b-vyzoacxu4g] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Overview cards */
.overview-grid[b-vyzoacxu4g] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .overview-grid[b-vyzoacxu4g] {
        grid-template-columns: 1fr 1fr;
    }
}

.overview-card[b-vyzoacxu4g] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.25rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}

.overview-card:hover[b-vyzoacxu4g] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.overview-card-icon[b-vyzoacxu4g] {
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.overview-card-title[b-vyzoacxu4g] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    font-weight: 600;
}

.overview-card-desc[b-vyzoacxu4g] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    min-height: 2.5rem;
}

.overview-card-cta[b-vyzoacxu4g] {
    font-size: 0.875rem;
    color: var(--primary-color);
    font-weight: 500;
}

@media (max-width: 767px) {
    .stats-row[b-vyzoacxu4g] {
        grid-template-columns: 1fr;
    }

    .stat-box-value[b-vyzoacxu4g] {
        font-size: 1.15rem;
    }
}

/* Stored method card (reused) */
.method-card[b-vyzoacxu4g] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.method-card-header[b-vyzoacxu4g] {
    padding: 1rem 1.25rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.method-card-body[b-vyzoacxu4g] {
    padding: 1rem 1.25rem;
}

.method-icon[b-vyzoacxu4g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    background: var(--background-light);
    font-size: 1.25rem;
    color: var(--text-primary);
}

.method-last4[b-vyzoacxu4g] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.method-card-footer[b-vyzoacxu4g] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Stripe card element */
.stripe-card-element[b-vyzoacxu4g] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--surface-subtle);
    min-height: 44px;
    transition: border-color 0.2s ease;
}

.stripe-card-element:focus-within[b-vyzoacxu4g] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 56, 92, 0.15);
}

/* Embed card */
.embed-card[b-vyzoacxu4g] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.embed-card-header[b-vyzoacxu4g] {
    padding: 1rem 1.25rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.embed-card-body[b-vyzoacxu4g] {
    padding: 1rem 1.25rem;
}

.embed-card-footer[b-vyzoacxu4g] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.payabli-embed-container[b-vyzoacxu4g] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-subtle);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.payabli-embed-container:focus-within[b-vyzoacxu4g] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 56, 92, 0.15);
}

.payabli-ach-container[b-vyzoacxu4g] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-subtle);
    overflow: hidden;
    min-height: 360px;
    transition: border-color 0.2s ease;
}

.payabli-ach-container:focus-within[b-vyzoacxu4g] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 56, 92, 0.15);
}

/* Info card */
.info-card[b-vyzoacxu4g] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.info-card li[b-vyzoacxu4g] {
    margin-bottom: 0.375rem;
}

.info-card li:last-child[b-vyzoacxu4g] {
    margin-bottom: 0;
}

/* Payabli stored methods list */
.methods-list[b-vyzoacxu4g] {
    border-top: 1px solid var(--border-color);
}

.method-item[b-vyzoacxu4g] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.method-item:last-child[b-vyzoacxu4g] {
    border-bottom: none;
}

/* Credit card visual */
.stored-card-visual[b-vyzoacxu4g] {
    background: linear-gradient(135deg, #1c1c2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 16px;
    padding: 1.25rem 1.375rem;
    color: var(--text-inverse);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    max-width: 340px;
    width: 100%;
    aspect-ratio: 1.586;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stored-card-shine[b-vyzoacxu4g] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.05) 35%,
        transparent 55%
    );
    border-radius: 16px;
    pointer-events: none;
    z-index: 1;
}

/* ── Visa ─────────────────────────────────────────────────────────────────── */
.stored-card-visa[b-vyzoacxu4g] {
    background: linear-gradient(160deg, #1a237e 0%, #1565c0 60%, #0d47a1 100%);
}

.stored-card-visa[b-vyzoacxu4g]::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

/* Visa logo: large italic VISA text */
.stored-card-visa .stored-card-net-logo[b-vyzoacxu4g] {
    font-size: 1.5rem;
    font-weight: 900;
    font-style: italic;
    font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    line-height: 1;
    opacity: 1;
    color: var(--text-inverse);
}

/* ── Mastercard ───────────────────────────────────────────────────────────── */
.stored-card-mastercard[b-vyzoacxu4g] {
    background: linear-gradient(160deg, #1a1a1a 0%, #252525 100%);
}

/* Two overlapping circles – CSS-only Mastercard logo */
.stored-card-mastercard .stored-card-net-logo[b-vyzoacxu4g] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    font-size: 0;
    color: transparent;
    flex-shrink: 0;
    align-self: center;
}

.stored-card-mastercard .stored-card-net-logo[b-vyzoacxu4g]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eb001b; /* Mastercard brand identity — do not tokenize */
}

.stored-card-mastercard .stored-card-net-logo[b-vyzoacxu4g]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f79e1b; /* Mastercard brand identity — do not tokenize */
    opacity: 0.85;
}

/* ── American Express ─────────────────────────────────────────────────────── */
.stored-card-amex[b-vyzoacxu4g] {
    background: linear-gradient(160deg, #006FCF 0%, #003087 100%);
}

.stored-card-amex[b-vyzoacxu4g]::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* AMEX logo: boxed uppercase text */
.stored-card-amex .stored-card-net-logo[b-vyzoacxu4g] {
    font-size: 0.55rem;
    font-weight: 800;
    font-family: Arial, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    padding: 3px 6px;
    border-radius: 2px;
    line-height: 1.4;
    opacity: 0.92;
}

/* ── Discover ─────────────────────────────────────────────────────────────── */
.stored-card-discover[b-vyzoacxu4g] {
    background: linear-gradient(160deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Discover: DISCOVER text + orange burst circle */
.stored-card-discover .stored-card-net-logo[b-vyzoacxu4g] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 800;
    font-family: Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-inverse);
    opacity: 0.95;
}

.stored-card-discover .stored-card-net-logo[b-vyzoacxu4g]::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffb347, #ff6b00 55%, #e65c00 100%);
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.6);
    flex-shrink: 0;
}

/* ── ACH / Bank ───────────────────────────────────────────────────────────── */
.stored-card-ach[b-vyzoacxu4g] {
    background: linear-gradient(160deg, #0f2027 0%, #203a43 60%, #2c5364 100%);
}

.stored-card-ach .stored-card-net-logo[b-vyzoacxu4g] {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 3px 7px;
    border-radius: 3px;
}

/* ── Shared card structure ────────────────────────────────────────────────── */
.stored-card-top[b-vyzoacxu4g] {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

/* EMV Chip — contact pad style */
.stored-card-chip[b-vyzoacxu4g] {
    width: 42px;
    height: 32px;
    border-radius: 5px;
    background: linear-gradient(160deg, #c8900a 0%, #f5d07a 30%, #e0b84a 50%, #f5d07a 70%, #c8900a 100%);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 0;
}

/* Chip inner contact area */
.stored-card-chip[b-vyzoacxu4g]::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 7px;
    right: 7px;
    bottom: 5px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: linear-gradient(160deg, #e8c46b 0%, #faeaa0 50%, #c8900a 100%);
}

/* Chip center divider */
.stored-card-chip[b-vyzoacxu4g]::after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 0, 0.18);
    transform: translateX(-50%);
}

.stored-card-bank-icon[b-vyzoacxu4g] {
    font-size: 1.5rem;
    opacity: 0.85;
}

.stored-card-number[b-vyzoacxu4g] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    position: relative;
    z-index: 2;
}

.card-dots[b-vyzoacxu4g] {
    font-size: 0.65rem;
    opacity: 0.6;
    letter-spacing: 0.3em;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1;
}

.card-last4[b-vyzoacxu4g] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    font-family: 'Courier New', Courier, monospace;
    opacity: 0.95;
}

.stored-card-bottom[b-vyzoacxu4g] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.stored-card-right[b-vyzoacxu4g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stored-card-label[b-vyzoacxu4g] {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 0.15rem;
    line-height: 1;
}

.stored-card-value[b-vyzoacxu4g] {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-family: 'Courier New', Courier, monospace;
    opacity: 0.9;
}

/* Default network logo (fallback) */
.stored-card-net-logo[b-vyzoacxu4g] {
    font-size: 0.7rem;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    flex-shrink: 0;
}

.btn-remove-card[b-vyzoacxu4g] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
    flex-shrink: 0;
}

.btn-remove-card:hover:not(:disabled)[b-vyzoacxu4g] {
    background: rgba(239, 68, 68, 0.45);
    border-color: rgba(239, 68, 68, 0.6);
    color: var(--text-inverse);
}

.btn-remove-card:disabled[b-vyzoacxu4g] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* History tables — .app-table provides the base styles;
   these rules only carry the mobile card-stacking pattern forward. */

@media (max-width: 768px) {
    .billing-page[b-vyzoacxu4g] {
        padding: 1rem 0.75rem;
    }

    .method-card-body[b-vyzoacxu4g],
    .embed-card-body[b-vyzoacxu4g] {
        padding: 1rem;
    }

    .method-item[b-vyzoacxu4g] {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 767px) {
    .history-table thead[b-vyzoacxu4g] {
        display: none;
    }

    .history-table tbody tr[b-vyzoacxu4g] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-raised);
        box-shadow: var(--shadow-sm);
    }

    .history-table tbody td[b-vyzoacxu4g] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
        font-size: 0.9rem;
    }

    .history-table tbody td:last-child[b-vyzoacxu4g] {
        border-bottom: none;
    }

    .history-table tbody td[b-vyzoacxu4g]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }
}

/* ── Payout Account: multi-community layout (Property role) ───────────────── */

.payout-multi-layout[b-vyzoacxu4g] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.payout-community-list[b-vyzoacxu4g] {
    flex: 0 0 280px;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.payout-community-list-header[b-vyzoacxu4g] {
    padding: 0.65rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
}

.payout-community-list-body[b-vyzoacxu4g] {
    overflow-y: auto;
    flex: 1 1 auto;
}

.payout-community-row[b-vyzoacxu4g] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem 0.85rem calc(1rem - 3px);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.payout-community-row:last-child[b-vyzoacxu4g] {
    border-bottom: none;
}

.payout-community-row:hover[b-vyzoacxu4g] {
    background: var(--background-light);
}

.payout-community-row.active[b-vyzoacxu4g] {
    border-left-color: var(--primary-color);
    background: var(--color-danger-bg);
}

.payout-community-row-name[b-vyzoacxu4g] {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.payout-community-row-meta[b-vyzoacxu4g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.payout-status-badge[b-vyzoacxu4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.payout-status-badge.status-configured[b-vyzoacxu4g] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.payout-status-badge.status-setup[b-vyzoacxu4g] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.payout-status-badge i[b-vyzoacxu4g] {
    font-size: 0.7rem;
}

.payout-method-hint[b-vyzoacxu4g] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.payout-community-form[b-vyzoacxu4g] {
    flex: 1 1 auto;
    min-width: 0;
}

.payout-community-form-header[b-vyzoacxu4g] {
    margin-bottom: 1rem;
}

.payout-community-form-header h5[b-vyzoacxu4g] {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.05rem;
}

/* Vendor-missing retry card */
.vendor-missing-card[b-vyzoacxu4g] {
    border: 1px solid var(--color-warning);
    background: var(--color-warning-bg);
    border-radius: var(--border-radius);
    padding: 1rem 1.1rem;
}

.vendor-missing-card-header[b-vyzoacxu4g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-warning);
    margin-bottom: 0.6rem;
}

.vendor-missing-card-body p[b-vyzoacxu4g] {
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

/* Overview tile — Property multi-community summary */
.overview-payout-summary[b-vyzoacxu4g] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.overview-community-list[b-vyzoacxu4g] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.overview-community-item[b-vyzoacxu4g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.85rem;
}

.overview-community-item:last-child[b-vyzoacxu4g] {
    border-bottom: none;
}

.overview-community-name[b-vyzoacxu4g] {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.overview-community-status[b-vyzoacxu4g] {
    font-size: 0.75rem;
    font-weight: 600;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.overview-community-status.status-configured[b-vyzoacxu4g] {
    color: var(--color-success);
}

.overview-community-status.status-setup[b-vyzoacxu4g] {
    color: var(--color-warning);
}

/* Responsive: stack on tablet/mobile */
@media (max-width: 991px) {
    .payout-multi-layout[b-vyzoacxu4g] {
        flex-direction: column;
    }

    .payout-community-list[b-vyzoacxu4g] {
        flex: 1 1 auto;
        width: 100%;
        max-height: 280px;
    }
}

/* ── PMC Commission KPI tiles ───────────────────────────────────────────── */

.mc-kpi-row[b-vyzoacxu4g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kpi-mini[b-vyzoacxu4g] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    min-width: 140px;
    flex: 1 1 140px;
}

.kpi-mini-label[b-vyzoacxu4g] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.kpi-mini-value[b-vyzoacxu4g] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── PMC Status pills ────────────────────────────────────────────────────── */

.status-pill[b-vyzoacxu4g] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.status-pill.status-pending[b-vyzoacxu4g] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-pill.status-paid[b-vyzoacxu4g] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-pill.status-voided[b-vyzoacxu4g] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.status-pill.status-reversed[b-vyzoacxu4g] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* overview "view all" link row */
.overview-view-all[b-vyzoacxu4g] {
    text-align: right;
}

/* ── Loading skeleton ────────────────────────────────────── */
.billing-skeleton[b-vyzoacxu4g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Tab content entrance ────────────────────────────────── */
.billing-tab-content[b-vyzoacxu4g] {
    animation: tab-enter-b-vyzoacxu4g var(--motion-base) var(--ease-standard) both;
}

@keyframes tab-enter-b-vyzoacxu4g {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
/* /Components/Pages/Blog.razor.rz.scp.css */
.blog-page[b-dwu86pcz5k] {
    min-height: 60vh;
}

.blog-content[b-dwu86pcz5k] {
    padding-top: var(--space-8);
    padding-bottom: 4rem;
}

/* ── Card link wrapper ───────────────────────────────────── */
.blog-card-link[b-dwu86pcz5k] {
    text-decoration: none;
    display: block;
    height: 100%;
}

/* ── Blog card (grid items) ──────────────────────────────── */
.blog-card[b-dwu86pcz5k] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--motion-base) var(--ease-standard),
                box-shadow var(--motion-base) var(--ease-standard);
    background: var(--surface-raised);
}

.blog-card-meta[b-dwu86pcz5k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.blog-category[b-dwu86pcz5k] {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    background: rgba(255, 56, 92, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
}

.blog-read-time[b-dwu86pcz5k] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.blog-card-title[b-dwu86pcz5k] {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-card-summary[b-dwu86pcz5k] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.65;
    flex: 1;
    margin-bottom: 1.25rem;
}

.blog-card-footer[b-dwu86pcz5k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: auto;
}

.blog-author[b-dwu86pcz5k] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.blog-date[b-dwu86pcz5k] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* ── Featured card ───────────────────────────────────────── */
.blog-featured-link[b-dwu86pcz5k] {
    display: block;
    text-decoration: none;
    margin-bottom: var(--space-5);
}

.blog-featured-card[b-dwu86pcz5k] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--surface-raised);
    padding: var(--space-8);
}

.blog-featured-badge[b-dwu86pcz5k] {
    background: var(--primary-color);
    color: var(--text-inverse, #fff);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-featured-title[b-dwu86pcz5k] {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-primary);
    margin: var(--space-3) 0;
}

.blog-featured-summary[b-dwu86pcz5k] {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 720px;
}

/* ── Skeleton ────────────────────────────────────────────── */
.blog-skeleton[b-dwu86pcz5k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.blog-skeleton-grid > div[b-dwu86pcz5k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* ── Stagger animations ──────────────────────────────────── */
.blog-grid > *[b-dwu86pcz5k],
.blog-featured-link[b-dwu86pcz5k] {
    animation: card-enter-b-dwu86pcz5k var(--motion-slow) var(--ease-standard) both;
}

.blog-grid > *:nth-child(1)[b-dwu86pcz5k] { animation-delay: 60ms; }
.blog-grid > *:nth-child(2)[b-dwu86pcz5k] { animation-delay: 120ms; }
.blog-grid > *:nth-child(3)[b-dwu86pcz5k] { animation-delay: 180ms; }
.blog-grid > *:nth-child(4)[b-dwu86pcz5k] { animation-delay: 240ms; }
.blog-grid > *:nth-child(n+5)[b-dwu86pcz5k] { animation-delay: 300ms; }

@keyframes card-enter-b-dwu86pcz5k {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
/* /Components/Pages/BlogPost.razor.rz.scp.css */
.post-page[b-o758hln7ru] {
    padding: 2rem 0 5rem;
}

.post-back-nav[b-o758hln7ru] {
    margin-bottom: 2rem;
}

.post-back-link[b-o758hln7ru] {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 500;
    transition: color 0.2s ease;
}

.post-back-link:hover[b-o758hln7ru] {
    color: var(--primary-color);
}

.post-header[b-o758hln7ru] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.post-meta[b-o758hln7ru] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.post-category[b-o758hln7ru] {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    background: rgba(255, 56, 92, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
}

.post-read-time[b-o758hln7ru] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.post-title[b-o758hln7ru] {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.post-byline[b-o758hln7ru] {
    display: flex;
    gap: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.post-body[b-o758hln7ru] {
    color: var(--text-primary);
    font-size: var(--fs-lg);
    line-height: 1.75;
}

.post-lead[b-o758hln7ru] {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.post-body h2[b-o758hln7ru] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}

.post-body p[b-o758hln7ru] {
    margin-bottom: 1.25rem;
}

.post-body ul[b-o758hln7ru] {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.post-body ul li[b-o758hln7ru] {
    margin-bottom: 0.6rem;
}

.post-body a[b-o758hln7ru] {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-body a:hover[b-o758hln7ru] {
    color: var(--primary-hover);
}

.post-body code[b-o758hln7ru] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    font-size: 0.9em;
    color: var(--text-primary);
}

.post-footer[b-o758hln7ru] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* ---------- Loading skeleton ---------- */

.post-skeleton[b-o758hln7ru] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 760px;
    padding: var(--space-8) var(--space-4);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .post-title[b-o758hln7ru] {
        font-size: var(--fs-2xl);
    }

    .post-body[b-o758hln7ru] {
        font-size: var(--fs-md);
    }

    .post-lead[b-o758hln7ru] {
        font-size: var(--fs-lg);
    }
}
/* /Components/Pages/BookingSuccess.razor.rz.scp.css */
/* Booking-submitted confirmation. Renders inside the focused-flow layout
   (no sidebar, no top bar) — the page provides its own vertical rhythm
   and the focused-container in MainLayout handles outer max-width/padding. */

.success-page[b-le52dicm3u] {
    width: 100%;
}

.success-shell[b-le52dicm3u] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------- Hero ---------- */
.success-hero[b-le52dicm3u] {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
}

.success-icon[b-le52dicm3u] {
    display: inline-block;
    margin-bottom: 1rem;
    animation: success-scale-in-b-le52dicm3u var(--motion-slow) var(--ease-spring) both;
}

@keyframes success-scale-in-b-le52dicm3u {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-title[b-le52dicm3u] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.success-subtitle[b-le52dicm3u] {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    margin: 0 auto 1rem;
    max-width: 520px;
    line-height: 1.5;
}

.pending-pill[b-le52dicm3u] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 28%, transparent);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.pending-pill i[b-le52dicm3u] {
    font-size: var(--fs-md);
}

/* ---------- Summary card ---------- */
.summary-card[b-le52dicm3u] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.summary-grid[b-le52dicm3u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1.5rem;
    align-items: start;
}

.summary-media[b-le52dicm3u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-thumb[b-le52dicm3u] {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius);
    object-fit: cover;
    background-color: var(--background-light);
    display: block;
}

.summary-thumb-placeholder[b-le52dicm3u] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-3xl);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.summary-identity[b-le52dicm3u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.summary-space-name[b-le52dicm3u] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.summary-community[b-le52dicm3u] {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin: 0;
}

.summary-location[b-le52dicm3u] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: 0.1rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.summary-rows[b-le52dicm3u] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.summary-row[b-le52dicm3u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.65rem;
}

.summary-row:last-child[b-le52dicm3u] {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-row dt[b-le52dicm3u] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.summary-row dd[b-le52dicm3u] {
    font-size: var(--fs-md);
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
}

/* ---------- Fee block ---------- */
.summary-fee[b-le52dicm3u] {
    border-top: 1px solid var(--border-color);
    padding-top: 1.25rem;
}

.summary-fee-row[b-le52dicm3u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.summary-fee-label[b-le52dicm3u] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.summary-fee-value[b-le52dicm3u] {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.summary-fee-note[b-le52dicm3u] {
    margin: 0.5rem 0 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ---------- What happens next ---------- */
.whats-next-card[b-le52dicm3u] {
    padding: 1.5rem;
}

.whats-next-title[b-le52dicm3u] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.steps-list[b-le52dicm3u] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.step-item[b-le52dicm3u] {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.step-number[b-le52dicm3u] {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: var(--text-inverse, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-md);
    flex-shrink: 0;
    line-height: 1;
}

.step-body[b-le52dicm3u] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.15rem;
}

.step-heading[b-le52dicm3u] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.step-text[b-le52dicm3u] {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ---------- Actions ---------- */
.success-actions[b-le52dicm3u] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.success-actions .btn[b-le52dicm3u] {
    width: 100%;
    font-weight: 600;
}

@media (min-width: 576px) {
    .success-actions[b-le52dicm3u] {
        flex-direction: row;
        justify-content: center;
    }

    .success-actions .btn[b-le52dicm3u] {
        width: auto;
        min-width: 200px;
    }
}

/* ---------- Mobile (<768px): summary collapses to a single column ---------- */
@media (max-width: 767px) {
    .summary-grid[b-le52dicm3u] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .summary-card[b-le52dicm3u],
    .whats-next-card[b-le52dicm3u] {
        padding: 1.25rem;
    }

    .success-title[b-le52dicm3u] {
        font-size: var(--fs-2xl);
    }

    .summary-thumb[b-le52dicm3u] {
        aspect-ratio: 16 / 9;
    }
}

/* ---------- Loading skeleton ---------- */
.success-skeleton[b-le52dicm3u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-4);
}

.success-skeleton > *[b-le52dicm3u] {
    width: 100%;
    max-width: 720px; /* matches .success-shell — no width jump when content loads */
}
/* /Components/Pages/BookSpace.razor.rz.scp.css */
/* ── Outer shell ─────────────────────────────────────────────────────────── */

.book-outer[b-i2uz19klnu] {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* BookSpace uses the global .app-card; extend it to match detail system radius */
.book-card[b-i2uz19klnu] {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.book-card-body[b-i2uz19klnu] {
    padding: 1.5rem 1.75rem;
}

@media (max-width: 575.98px) {
    .book-card-body[b-i2uz19klnu] {
        padding: 1.25rem 1rem;
    }
}

/* ── Wizard progress — token overrides for the global .wizard-progress ───── */
/*
 * The global .wizard-progress in app.css uses hardcoded Bootstrap-era hex values.
 * We override them here under .book-wizard scope so all colors come from tokens.
 */

.book-wizard .wizard-progress[b-i2uz19klnu] {
    margin: 1rem 0 1.25rem;
    padding: 0.75rem 0;
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Inactive step number bubble */
.book-wizard .wizard-progress .step-number[b-i2uz19klnu] {
    width: 32px;
    height: 32px;
    font-size: var(--fs-sm);
    background: var(--surface-raised);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    box-shadow: none;
}

/* Active step: brand action color, no blue shadow */
.book-wizard .wizard-progress .step.active .step-number[b-i2uz19klnu] {
    background: var(--action-color);
    border-color: var(--action-color);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

/* Completed step: success green via token */
.book-wizard .wizard-progress .step.completed .step-number[b-i2uz19klnu] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--text-inverse);
    font-size: var(--fs-sm); /* restore digit visibility */
}

/* Override the app.css ::after pseudo that tries to add a checkmark */
.book-wizard .wizard-progress .step.completed .step-number[b-i2uz19klnu]::after {
    content: none;
}

/* Step labels */
.book-wizard .wizard-progress .step-label[b-i2uz19klnu] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

.book-wizard .wizard-progress .step.active .step-label[b-i2uz19klnu] {
    color: var(--action-color);
    font-weight: 700;
}

.book-wizard .wizard-progress .step.completed .step-label[b-i2uz19klnu] {
    color: var(--color-success);
    font-weight: 600;
}

/* Connector line */
.book-wizard .wizard-progress .step-line[b-i2uz19klnu] {
    height: 2px;
    background: var(--border-color);
    top: -14px;
}

.book-wizard .wizard-progress .step-line.completed[b-i2uz19klnu] {
    background: var(--color-success);
}

/* ── Step headings ───────────────────────────────────────────────────────── */

.step-heading[b-i2uz19klnu] {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ── Space summary panel (Step 1 + Step 4 image thumbnail) ───────────────── */

.space-summary-panel[b-i2uz19klnu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.space-summary-thumb[b-i2uz19klnu] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.space-summary-name[b-i2uz19klnu] {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.space-summary-location[b-i2uz19klnu] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0.15rem 0 0;
}

.space-summary-fee[b-i2uz19klnu] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0.1rem 0 0;
}

/* ── Review step: 2-column layout on desktop ─────────────────────────────── */

.review-layout[b-i2uz19klnu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .review-layout[b-i2uz19klnu] {
        grid-template-columns: 1fr 340px;
        align-items: start;
    }

    .review-sidebar[b-i2uz19klnu] {
        position: sticky;
        top: 80px;
    }
}

/* ── Compact review cards ────────────────────────────────────────────────── */

.review-card[b-i2uz19klnu] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.review-card-header[b-i2uz19klnu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.875rem;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.review-card-body[b-i2uz19klnu] {
    padding: 0.75rem 0.875rem;
    font-size: var(--fs-base);
}

/* ── Pricing card ────────────────────────────────────────────────────────── */

.pricing-card[b-i2uz19klnu] {
    border: 1px solid var(--action-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.pricing-card-header[b-i2uz19klnu] {
    padding: 0.45rem 0.875rem;
    background: var(--action-color);
    color: var(--text-inverse);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pricing-card-body[b-i2uz19klnu] {
    padding: 0.75rem 0.875rem;
    font-size: var(--fs-base);
}

.pricing-total[b-i2uz19klnu] {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--action-color);
}

/* ── Payment card ────────────────────────────────────────────────────────── */

.payment-card[b-i2uz19klnu] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.payment-card-header[b-i2uz19klnu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.875rem;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.payment-card-body[b-i2uz19klnu] {
    padding: 0.875rem;
    font-size: var(--fs-base);
}

/* ── Campaign picker (Step 2 shortcut) ───────────────────────────────────── */

.campaign-picker[b-i2uz19klnu] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    background: var(--background-light);
}

.campaign-picker-label[b-i2uz19klnu] {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.campaign-picker-list[b-i2uz19klnu] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding-top: 3px;
    padding-bottom: 0.15rem;
}

.campaign-picker-item[b-i2uz19klnu] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: var(--surface-raised);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.campaign-picker-item:hover[b-i2uz19klnu] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.campaign-picker-name[b-i2uz19klnu] {
    font-weight: 600;
}

.campaign-picker-type[b-i2uz19klnu] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    background: var(--background-light);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* ── Approval note ───────────────────────────────────────────────────────── */

.approval-note[b-i2uz19klnu] {
    font-size: var(--fs-xs);
}

/* ── Step 2 compact checkboxes ───────────────────────────────────────────── */

.offering-row[b-i2uz19klnu] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
}

.offering-row textarea[b-i2uz19klnu] {
    font-size: var(--fs-sm);
}

/* ── Form controls ───────────────────────────────────────────────────────── */

.book-form .form-label[b-i2uz19klnu] {
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.book-form .form-control[b-i2uz19klnu],
.book-form .form-select[b-i2uz19klnu] {
    font-size: var(--fs-base);
    padding: 0.35rem 0.65rem;
}

.book-form .form-text[b-i2uz19klnu],
.book-form small[b-i2uz19klnu] {
    font-size: var(--fs-xs);
}

.book-form textarea.form-control[b-i2uz19klnu] {
    min-height: unset;
}

.stripe-card-element-container[b-i2uz19klnu] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    background: var(--surface-raised);
}

.payabli-embed-container[b-i2uz19klnu] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-height: 160px;
    background: var(--surface-raised);
}

.payment-provider-note[b-i2uz19klnu] {
    font-size: var(--fs-sm);
}

.payment-method-summary[b-i2uz19klnu],
.payment-method-option[b-i2uz19klnu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bs-body-bg);
}

.payment-method-summary[b-i2uz19klnu] {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.payment-method-summary-icon[b-i2uz19klnu],
.payment-method-option-icon[b-i2uz19klnu],
.payment-empty-state-icon[b-i2uz19klnu] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--primary-color);
    flex-shrink: 0;
}

.payment-method-summary-title[b-i2uz19klnu],
.payment-method-option-title[b-i2uz19klnu],
.payment-empty-state-title[b-i2uz19klnu] {
    font-weight: 700;
    color: var(--text-primary);
}

.payment-method-summary-label[b-i2uz19klnu],
.payment-method-summary-detail[b-i2uz19klnu],
.payment-method-option-detail[b-i2uz19klnu],
.payment-empty-state-text[b-i2uz19klnu] {
    font-size: var(--fs-sm);
}

.payment-method-summary-label[b-i2uz19klnu],
.payment-method-summary-detail[b-i2uz19klnu],
.payment-method-option-detail[b-i2uz19klnu],
.payment-empty-state-text[b-i2uz19klnu],
.payment-method-option-action[b-i2uz19klnu] {
    color: var(--text-secondary);
}

.payment-method-list[b-i2uz19klnu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.payment-method-option[b-i2uz19klnu] {
    width: 100%;
    padding: 0.7rem 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.payment-method-option:hover:not(:disabled)[b-i2uz19klnu] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.payment-method-option.active[b-i2uz19klnu] {
    border-color: rgba(var(--bs-success-rgb), 0.4);
    background: rgba(var(--bs-success-rgb), 0.04);
}

.payment-method-option:disabled[b-i2uz19klnu] {
    cursor: default;
    opacity: 1;
}

.payment-method-option-copy[b-i2uz19klnu],
.payment-method-summary-copy[b-i2uz19klnu] {
    min-width: 0;
}

.payment-method-option-badge[b-i2uz19klnu],
.payment-method-option-action[b-i2uz19klnu] {
    margin-left: auto;
    white-space: nowrap;
}

.payment-method-option-action .spinner-border[b-i2uz19klnu] {
    width: 1rem;
    height: 1rem;
}

.payment-empty-state[b-i2uz19klnu] {
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
    background: var(--background-light);
}

.checkout-payment-modal-shell[b-i2uz19klnu] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.checkout-payment-modal-backdrop[b-i2uz19klnu] {
    position: absolute;
    inset: 0;
    background: rgba(var(--bs-dark-rgb), 0.55);
}

.checkout-payment-modal[b-i2uz19klnu] {
    position: relative;
    width: min(100%, 36rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--bs-body-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
}

.checkout-payment-modal-header[b-i2uz19klnu],
.checkout-payment-modal-footer[b-i2uz19klnu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.checkout-payment-modal-header[b-i2uz19klnu] {
    border-bottom: 1px solid var(--border-color);
}

.checkout-payment-modal-footer[b-i2uz19klnu] {
    border-top: 1px solid var(--border-color);
}

.checkout-payment-modal-body[b-i2uz19klnu] {
    padding: 1.25rem;
}

.checkout-payment-modal-eyebrow[b-i2uz19klnu] {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.checkout-payment-modal-title[b-i2uz19klnu] {
    margin: 0.15rem 0 0;
    font-size: var(--fs-lg);
}

@media (max-width: 575.98px) {
    .checkout-payment-modal[b-i2uz19klnu] {
        width: 100%;
    }

    .checkout-payment-modal-header[b-i2uz19klnu],
    .checkout-payment-modal-footer[b-i2uz19klnu] {
        padding: 0.9rem 1rem;
    }

    .checkout-payment-modal-body[b-i2uz19klnu] {
        padding: 1rem;
    }

    .payment-method-summary[b-i2uz19klnu],
    .payment-method-option[b-i2uz19klnu] {
        align-items: flex-start;
    }
}

/* ── Step entrance animation ─────────────────────────────────────────────── */

/* Each wizard step mounts fresh on navigation — the entrance replays per step. */
.step-content[b-i2uz19klnu] {
    animation: step-enter-b-i2uz19klnu var(--motion-base) var(--ease-standard) both;
}

@keyframes step-enter-b-i2uz19klnu {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Page-load skeleton ──────────────────────────────────────────────────── */

.booking-skeleton[b-i2uz19klnu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
}

.review-description-preview[b-i2uz19klnu] {
    font-size: var(--fs-sm);
}
/* /Components/Pages/BrandProfile.razor.rz.scp.css */
/* ── Banner ──────────────────────────────────────────────── */
.brand-banner-section[b-23f5k0t68q] {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: var(--background-light);
}

.brand-banner-image[b-23f5k0t68q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
}

.brand-banner-placeholder[b-23f5k0t68q] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: var(--text-inverse);
    font-size: 4rem;
    opacity: 0.85;
}

/* ── Container overlap ───────────────────────────────────── */
.brand-detail-container[b-23f5k0t68q] {
    margin-top: -2rem;
    position: relative;
    z-index: 1;
    padding-bottom: 3rem;
}

/* ── Header Card ─────────────────────────────────────────── */
.brand-header[b-23f5k0t68q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--surface-raised);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
}

.brand-header-left[b-23f5k0t68q] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.brand-header-info[b-23f5k0t68q] {
    flex: 1;
    min-width: 0;
}

.brand-header-actions[b-23f5k0t68q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Logo ────────────────────────────────────────────────── */
.brand-logo-public[b-23f5k0t68q] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--surface-raised);
    box-shadow: var(--shadow-md);
    background: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.brand-logo-public-img[b-23f5k0t68q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-logo-icon[b-23f5k0t68q] {
    font-size: 2.5rem;
    color: var(--text-secondary);
}

/* ── Name / Tagline ──────────────────────────────────────── */
.brand-public-name[b-23f5k0t68q] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.brand-public-tagline[b-23f5k0t68q] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

/* ── Stats Row ───────────────────────────────────────────── */
.brand-stats-row[b-23f5k0t68q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
}

.stat-card[b-23f5k0t68q] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-align: center;
    transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

.stat-card:hover[b-23f5k0t68q] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-value[b-23f5k0t68q] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-na[b-23f5k0t68q] {
    color: var(--text-secondary);
}

.stat-label[b-23f5k0t68q] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* ── Brand Sections ──────────────────────────────────────── */
.brand-section[b-23f5k0t68q] {
    /* surface provided by .app-card */
    padding: 1.5rem;
}

.brand-section-title[b-23f5k0t68q] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
}

.brand-section-title i[b-23f5k0t68q] {
    color: var(--primary-color);
}

.brand-about-text[b-23f5k0t68q] {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Campaign Cards ──────────────────────────────────────── */
.brand-campaign-card[b-23f5k0t68q] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--surface-subtle);
    transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}

.campaign-photo-sm[b-23f5k0t68q] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.campaign-photo-sm-placeholder[b-23f5k0t68q] {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 2.5rem;
}

.campaign-description-clamp[b-23f5k0t68q] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* ── Contact ─────────────────────────────────────────────── */
.contact-grid[b-23f5k0t68q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-item[b-23f5k0t68q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-md);
}

.contact-item i[b-23f5k0t68q] {
    color: var(--primary-color);
    font-size: var(--fs-lg);
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.contact-item a[b-23f5k0t68q] {
    color: var(--text-primary);
    text-decoration: none;
}

.contact-item a:hover[b-23f5k0t68q] {
    color: var(--primary-color);
}

/* ── Reviews ─────────────────────────────────────────────── */
.review-item[b-23f5k0t68q] {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.review-item:last-child[b-23f5k0t68q] {
    border-bottom: none;
    padding-bottom: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .brand-header[b-23f5k0t68q] {
        flex-direction: column;
    }

    .brand-header-actions[b-23f5k0t68q] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .brand-banner-section[b-23f5k0t68q] {
        height: 180px;
    }

    .brand-header-left[b-23f5k0t68q] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .brand-stats-row[b-23f5k0t68q] {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-public-name[b-23f5k0t68q] {
        font-size: 1.4rem;
    }
}

/* ── Loading skeleton ────────────────────────────────────── */
.brand-profile-skeleton[b-23f5k0t68q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-4) var(--space-12);
}

.brand-profile-skeleton-stats[b-23f5k0t68q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-4);
}
/* /Components/Pages/BrandsHome.razor.rz.scp.css */
.brands-page[b-y620nfwfrs] {
    background: var(--background-light);
}

/* Hero photo for this page — layout/typography live in wwwroot/css/hero.css */
.hero-section[b-y620nfwfrs] {
    --hero-image: url('/images/hero/brand-landing-hero-image.jpg');
}

/* Section alternation: warm → white → dark */
.content-section[b-y620nfwfrs] {
    padding: var(--section-pad-y-sm) 0;
    background: var(--surface-warm);
}

.content-section:nth-of-type(2)[b-y620nfwfrs] {
    background: var(--surface-white);
}

.showcase-section[b-y620nfwfrs] {
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    max-width: 1200px;
    margin: 0 auto;
}

.showcase-content[b-y620nfwfrs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.showcase-heading[b-y620nfwfrs] {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

.showcase-list[b-y620nfwfrs] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.showcase-list li[b-y620nfwfrs] {
    font-size: var(--fs-lg);
    color: var(--text-primary);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.showcase-list li:last-child[b-y620nfwfrs] {
    border-bottom: none;
}

.showcase-list li i[b-y620nfwfrs] {
    color: var(--text-primary);
}

.showcase-visual[b-y620nfwfrs] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.visual-box[b-y620nfwfrs] {
    background: linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-charcoal) 100%);
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-lg);
    text-align: center;
    color: var(--text-inverse);
    transition: transform 0.2s ease;
}

.visual-box:hover[b-y620nfwfrs] {
    transform: scale(1.05);
}

.visual-box.box-1[b-y620nfwfrs] {
    grid-column: 1 / -1;
}

.box-icon[b-y620nfwfrs] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.box-label[b-y620nfwfrs] {
    font-size: var(--fs-md);
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 991px) {
    .hero-section[b-y620nfwfrs] {
        justify-content: flex-start;
    }

    .hero-card[b-y620nfwfrs] {
        padding: 0;
    }

    .content-section[b-y620nfwfrs] {
        padding: 2.5rem 0;
    }

    .showcase-section[b-y620nfwfrs] {
        padding: 2rem;
    }

    .showcase-content[b-y620nfwfrs] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 576px) {
    .hero-section[b-y620nfwfrs] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-title[b-y620nfwfrs] {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .hero-card[b-y620nfwfrs] {
        padding: 0;
    }

    .hero-benefits[b-y620nfwfrs] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-actions[b-y620nfwfrs] {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary[b-y620nfwfrs], .btn-secondary[b-y620nfwfrs] {
        width: 100%;
        min-width: auto;
    }

    .showcase-section[b-y620nfwfrs] {
        padding: 1.5rem;
    }
}

/* How It Works */
.info-section[b-y620nfwfrs] {
    max-width: 1200px;
    margin: 0 auto;
}

.info-content[b-y620nfwfrs] {
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
}

.info-heading[b-y620nfwfrs] {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

.steps-grid[b-y620nfwfrs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.step-card[b-y620nfwfrs] {
    text-align: center;
    padding: 1.75rem 1.5rem;
    border-radius: var(--border-radius);
    background: var(--surface-warm);
}

.step-number[b-y620nfwfrs] {
    width: 56px;
    height: 56px;
    background: var(--action-color);
    color: var(--text-inverse);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin: 0 auto 1.5rem;
    font-optical-sizing: auto;
}

.step-title[b-y620nfwfrs] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.step-description[b-y620nfwfrs] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin: 0;
}

/* Flat fee note */
.brand-fee-note[b-y620nfwfrs] {
    background: var(--surface-warm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}

.fee-heading[b-y620nfwfrs] {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-optical-sizing: auto;
}

.fee-text[b-y620nfwfrs] {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.fee-table thead th[b-y620nfwfrs] {
    background: var(--surface-dark);
    color: var(--text-inverse);
    border-color: var(--surface-dark);
    font-weight: 700;
}

.fee-table tbody td[b-y620nfwfrs] {
    color: var(--text-primary);
}

@media (max-width: 991px) {
    .info-content[b-y620nfwfrs] {
        padding: 2rem;
    }

    .steps-grid[b-y620nfwfrs] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .info-content[b-y620nfwfrs] {
        padding: 1.25rem;
    }
}

.steps-grid[b-y620nfwfrs]  .step-card {
    height: 100%;
}

.trust-strip-section[b-y620nfwfrs] {
    padding: var(--space-8) var(--space-4) 0;
    background: var(--surface-white);
}

.testimonials-section[b-y620nfwfrs] {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}
/* /Components/Pages/BrandTerms.razor.rz.scp.css */
h1[b-0ighkqmzc9] {
    color: var(--text-primary);
    font-weight: 700;
}

h2[b-0ighkqmzc9] {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 2rem;
}

section p[b-0ighkqmzc9], section li[b-0ighkqmzc9] {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.alert[b-0ighkqmzc9] {
    border-radius: 8px;
}

.card[b-0ighkqmzc9] {
    border: none;
    border-radius: 12px;
}

@media print {
    .btn[b-0ighkqmzc9] {
        display: none;
    }
}
/* /Components/Pages/Chat.razor.rz.scp.css */
.chat-messages[b-qg2cf6fe7j] {
    scroll-behavior: smooth;
}

.message-wrapper[b-qg2cf6fe7j] {
    margin-bottom: 1rem;
    display: flex;
}

.message-wrapper.user-message[b-qg2cf6fe7j] {
    justify-content: flex-end;
}

.message-wrapper.assistant-message[b-qg2cf6fe7j] {
    justify-content: flex-start;
}

.message-bubble[b-qg2cf6fe7j] {
    max-width: 70%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.user-message .message-bubble[b-qg2cf6fe7j] {
    border-bottom-right-radius: 0.25rem;
}

.assistant-message .message-bubble[b-qg2cf6fe7j] {
    border-bottom-left-radius: 0.25rem;
}

.message-content[b-qg2cf6fe7j] {
    line-height: 1.5;
}

.typing-cursor[b-qg2cf6fe7j] {
    animation: blink-b-qg2cf6fe7j 1s infinite;
    font-weight: bold;
}

@keyframes blink-b-qg2cf6fe7j {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
/* /Components/Pages/CommunityDashboard.razor.rz.scp.css */
/* Dashboard loading skeleton */
.cd-dashboard-skeleton[b-9iifni77sb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.cd-skeleton-kpi-grid[b-9iifni77sb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1199px) {
    .cd-skeleton-kpi-grid[b-9iifni77sb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .cd-skeleton-kpi-grid[b-9iifni77sb] {
        grid-template-columns: 1fr;
    }
}

/* Snapshot tab */
.cd-snapshot[b-9iifni77sb] {
    display: grid;
    gap: 1rem;
}

.cd-kpi-grid[b-9iifni77sb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1199px) {
    .cd-kpi-grid[b-9iifni77sb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .cd-kpi-grid[b-9iifni77sb] {
        grid-template-columns: 1fr;
    }
}

/* Quick action cards under the NBA */
.cd-quick-actions[b-9iifni77sb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}

@media (max-width: 991px) {
    .cd-quick-actions[b-9iifni77sb] {
        grid-template-columns: 1fr;
    }
}

/* .cd-quick-card surface provided by .app-card */
.cd-quick-card[b-9iifni77sb] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cd-quick-card:hover[b-9iifni77sb] {
    background: var(--surface-subtle);
    color: var(--text-primary);
    text-decoration: none;
}

.cd-quick-icon[b-9iifni77sb] {
    font-size: 1.4rem;
    color: var(--text-primary);
    background: var(--background-light);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cd-quick-title[b-9iifni77sb] {
    font-weight: 700;
    font-size: 0.95rem;
}

.cd-quick-desc[b-9iifni77sb] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Trends */
.cd-trends-head[b-9iifni77sb] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.cd-trends-toggle[b-9iifni77sb] {
    display: inline-flex;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem;
    box-shadow: var(--shadow-sm);
}

.cd-trend-btn[b-9iifni77sb] {
    border: none;
    background: transparent;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cd-trend-btn:hover[b-9iifni77sb] {
    color: var(--text-primary);
}

.cd-trend-btn.active[b-9iifni77sb] {
    background: var(--text-primary);
    color: var(--text-inverse);
}

.cd-trends-grid[b-9iifni77sb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 991px) {
    .cd-trends-grid[b-9iifni77sb] {
        grid-template-columns: 1fr;
    }
}

/* Actions tab — styles live in wwwroot/app.css (.app-action-row) */

/* Community filter — shown in the DashboardShell HeaderRight slot */
.cd-filter[b-9iifni77sb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cd-filter-label[b-9iifni77sb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-bottom: 0;
    cursor: default;
}

.cd-filter-select[b-9iifni77sb] {
    min-width: 180px;
    max-width: 260px;
    font-size: 0.85rem;
    border-color: var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    background-color: var(--surface-raised, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.cd-filter-select:focus[b-9iifni77sb] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
    outline: none;
}

@media (max-width: 575px) {
    .cd-filter[b-9iifni77sb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        width: 100%;
    }

    .cd-filter-select[b-9iifni77sb] {
        width: 100%;
        max-width: none;
    }
}

/* /Components/Pages/CommunityDetail.razor.rz.scp.css */
/* Banner */
.community-banner-section[b-k96u5xa10t] {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: var(--background-light);
}

.community-banner-image[b-k96u5xa10t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-banner-placeholder[b-k96u5xa10t] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--background-light) 0%, #e9ecef 100%);
    color: var(--text-secondary);
    font-size: 4rem;
}

/* Container */
.community-detail-container[b-k96u5xa10t] {
    margin-top: -2rem;
    position: relative;
    z-index: 1;
    padding-bottom: 3rem;
}

/* Header */
.community-header[b-k96u5xa10t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--surface-raised);
    padding: 1.5rem;
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.12));
    margin-bottom: 1.5rem;
}

.community-header-left[b-k96u5xa10t] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.community-logo[b-k96u5xa10t] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
    flex-shrink: 0;
}

.community-header-info[b-k96u5xa10t] {
    flex: 1;
    min-width: 0;
}

.community-name[b-k96u5xa10t] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.community-tagline[b-k96u5xa10t] {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.community-address[b-k96u5xa10t] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.community-address i[b-k96u5xa10t] {
    color: var(--primary-color);
}

.community-badges-row[b-k96u5xa10t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.status-badge[b-k96u5xa10t] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.status-verified[b-k96u5xa10t] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-featured[b-k96u5xa10t] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-approved[b-k96u5xa10t] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.status-pending[b-k96u5xa10t] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.community-actions[b-k96u5xa10t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Stats Row */
.community-stats-row[b-k96u5xa10t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-k96u5xa10t] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-card:hover[b-k96u5xa10t] {
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.12));
    transform: translateY(-2px);
}

.stat-value[b-k96u5xa10t] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-na[b-k96u5xa10t] {
    color: var(--text-secondary);
}

.stat-label[b-k96u5xa10t] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.stat-label i[b-k96u5xa10t] {
    margin-right: 0.125rem;
}

/* Sections */
.community-section[b-k96u5xa10t] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-header[b-k96u5xa10t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title[b-k96u5xa10t] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i[b-k96u5xa10t] {
    color: var(--primary-color);
}

.section-header .section-title[b-k96u5xa10t] {
    margin-bottom: 0;
}

.about-text[b-k96u5xa10t] {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
}

/* Highlights */
.highlights-grid[b-k96u5xa10t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}

.highlight-item[b-k96u5xa10t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.highlight-item:hover[b-k96u5xa10t] {
    background: var(--background-light);
}

.highlight-item i[b-k96u5xa10t] {
    color: var(--secondary-color);
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Spaces Grid */
.spaces-grid[b-k96u5xa10t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.space-card[b-k96u5xa10t] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
    transition: all 0.2s ease;
    background: var(--surface-raised);
}

.space-card:hover[b-k96u5xa10t] {
    box-shadow: var(--shadow-xl, 0 10px 40px rgba(0,0,0,0.15));
    transform: translateY(-4px);
}

.space-card-image[b-k96u5xa10t] {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.space-card-placeholder[b-k96u5xa10t] {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 2.5rem;
}

.space-card-body[b-k96u5xa10t] {
    padding: 1rem;
}

.space-card-name[b-k96u5xa10t] {
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.space-card-location[b-k96u5xa10t] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}

.space-card-location i[b-k96u5xa10t] {
    color: var(--primary-color);
}

.space-card-description[b-k96u5xa10t] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.space-amenities[b-k96u5xa10t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.amenity-tag[b-k96u5xa10t] {
    background: var(--background-light);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.amenity-more[b-k96u5xa10t] {
    color: var(--primary-color);
    font-style: italic;
}

.space-card-footer[b-k96u5xa10t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.space-price[b-k96u5xa10t] {
    display: flex;
    flex-direction: column;
}

.price-amount[b-k96u5xa10t] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.price-unit[b-k96u5xa10t] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.space-availability[b-k96u5xa10t] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.space-availability i[b-k96u5xa10t] {
    margin-right: 0.25rem;
}

.space-rating[b-k96u5xa10t] {
    margin-top: 0.5rem;
}

/* Reviews */
.reviews-list[b-k96u5xa10t] {
    margin-top: 1.5rem;
}

.review-item[b-k96u5xa10t] {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.review-item:last-child[b-k96u5xa10t] {
    border-bottom: none;
}

.review-header[b-k96u5xa10t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.review-author[b-k96u5xa10t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-author-avatar[b-k96u5xa10t] {
    font-size: 2rem;
    color: var(--text-secondary);
}

.review-author-name[b-k96u5xa10t] {
    font-weight: 600;
    color: var(--text-primary);
}

.review-date[b-k96u5xa10t] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.review-rating[b-k96u5xa10t] {
    margin-bottom: 0.5rem;
}

.review-title[b-k96u5xa10t] {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.5rem 0;
}

.review-content[b-k96u5xa10t] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.review-photos[b-k96u5xa10t] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.review-photo[b-k96u5xa10t] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.review-response[b-k96u5xa10t] {
    background: var(--background-light);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.review-response p[b-k96u5xa10t] {
    margin: 0.5rem 0 0;
}

.review-actions[b-k96u5xa10t] {
    margin-top: 0.5rem;
}

/* Contact */
.contact-grid[b-k96u5xa10t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-item[b-k96u5xa10t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.contact-item i[b-k96u5xa10t] {
    color: var(--primary-color);
    font-size: 1.125rem;
    width: 1.5rem;
    text-align: center;
}

.contact-item a[b-k96u5xa10t] {
    color: var(--text-primary);
    text-decoration: none;
}

.contact-item a:hover[b-k96u5xa10t] {
    color: var(--primary-color);
}

.social-links[b-k96u5xa10t] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.social-link-btn[b-k96u5xa10t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-link-btn:hover[b-k96u5xa10t] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

/* Empty State */
.empty-state[b-k96u5xa10t] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-state i[b-k96u5xa10t] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state p[b-k96u5xa10t] {
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .community-header[b-k96u5xa10t] {
        flex-direction: column;
    }

    .community-actions[b-k96u5xa10t] {
        width: 100%;
    }

    .community-actions .btn[b-k96u5xa10t] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .community-banner-section[b-k96u5xa10t] {
        height: 200px;
    }

    .community-header-left[b-k96u5xa10t] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .community-badges-row[b-k96u5xa10t] {
        justify-content: center;
    }

    .community-stats-row[b-k96u5xa10t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .spaces-grid[b-k96u5xa10t] {
        grid-template-columns: 1fr;
    }

    .community-name[b-k96u5xa10t] {
        font-size: 1.4rem;
    }

    .highlights-grid[b-k96u5xa10t] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Detail.razor.rz.scp.css */
/* =====================================================================
   Detail.razor.css — scoped styles for the space detail page.
   Uses design tokens from wwwroot/app.css exclusively — no hardcoded
   color, shadow, or radius values.
   ===================================================================== */

.detail-page[b-hygxibgois] {
    background-color: var(--surface-canvas);
    min-height: calc(100vh - 65px);
    padding-bottom: 80px;
}

/* ── TOP BAR ─────────────────────────────────────────────────────────── */
.top-bar[b-hygxibgois] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* ── BREADCRUMB ──────────────────────────────────────────────────────── */
.breadcrumb-custom[b-hygxibgois] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-base);
    gap: var(--space-2);
}

.breadcrumb-item-custom[b-hygxibgois] {
    display: inline;
}

.breadcrumb-item-custom a[b-hygxibgois] {
    color: var(--text-primary);
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.breadcrumb-item-custom a:hover[b-hygxibgois] {
    text-decoration: underline;
}

.breadcrumb-item-custom.active[b-hygxibgois] {
    color: var(--text-secondary);
}

.breadcrumb-separator[b-hygxibgois] {
    color: var(--border-color);
    user-select: none;
}

/* ── TOP ACTIONS ─────────────────────────────────────────────────────── */
.top-actions[b-hygxibgois] {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

.action-button[b-hygxibgois] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: underline;
    min-height: 44px;
}

.action-button:hover[b-hygxibgois] {
    background-color: var(--background-light);
}

.action-button:focus-visible[b-hygxibgois] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.action-button.saved[b-hygxibgois] {
    color: var(--primary-color);
}

.action-button i[b-hygxibgois] {
    font-size: 1rem;
}

.action-text[b-hygxibgois] {
    display: none;
}

/* ── DESKTOP MOSAIC GALLERY ─────────────────────────────────────────── */

/*
 * Multi-photo layout: large hero on the left + a 2-col × 2-row grid on the right.
 * Single-photo layout: .gallery-single renders the hero full-width, no empty cells.
 * Both are only shown on ≥992 px via d-none / d-lg-grid|d-lg-block.
 */
.gallery-mosaic[b-hygxibgois] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    height: 440px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

/* Single-photo: full-width hero, same height as the mosaic */
.gallery-single[b-hygxibgois] {
    height: 440px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.mosaic-hero-single[b-hygxibgois] {
    width: 100%;
    height: 100%;
}

/* Hero — left half */
.mosaic-hero[b-hygxibgois] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: var(--surface-canvas);
    overflow: hidden;
    cursor: pointer;
}

.mosaic-hero:focus-visible[b-hygxibgois] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    z-index: 2;
}

/* Right 2×2 grid */
.mosaic-grid[b-hygxibgois] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-2);
    height: 100%;
}

/* Each grid cell */
.mosaic-cell[b-hygxibgois] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: var(--surface-canvas);
    overflow: hidden;
    cursor: pointer;
}

.mosaic-cell:focus-visible[b-hygxibgois] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    z-index: 2;
}

/* Shared image styles across mosaic */
.mosaic-img[b-hygxibgois] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.mosaic-hero:hover .mosaic-img[b-hygxibgois],
.mosaic-cell:hover .mosaic-img[b-hygxibgois] {
    transform: scale(1.04);
}

/* Placeholder when no photo */
.mosaic-placeholder[b-hygxibgois] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 4rem;
}

/* "Show all photos" overlay on the last cell */
.mosaic-cell-last[b-hygxibgois]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease;
}

.mosaic-cell-last:hover[b-hygxibgois]::after {
    background: rgba(0, 0, 0, 0.50);
}

.mosaic-show-all[b-hygxibgois] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* ── MOBILE GALLERY ──────────────────────────────────────────────────── */

.mobile-gallery[b-hygxibgois] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-canvas);
}

.mobile-gallery-slide[b-hygxibgois] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-gallery-slide.active[b-hygxibgois] {
    opacity: 1;
    pointer-events: auto;
}

.mobile-gallery-placeholder[b-hygxibgois] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 3rem;
}

/* Prev/next buttons on mobile gallery */
.mobile-gallery-btn[b-hygxibgois] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-pill);
    border: none;
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.mobile-gallery-btn:focus-visible[b-hygxibgois] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.mobile-gallery-prev[b-hygxibgois] { left: var(--space-2); }
.mobile-gallery-next[b-hygxibgois] { right: var(--space-2); }

/* Dot indicators */
.mobile-gallery-dots[b-hygxibgois] {
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-1);
    z-index: 10;
    pointer-events: none;
}

.mobile-gallery-dot[b-hygxibgois] {
    width: 6px;
    height: 6px;
    border-radius: var(--border-radius-pill);
    background: var(--text-inverse);
    opacity: 0.55;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.mobile-gallery-dot.active[b-hygxibgois] {
    opacity: 1;
    width: 14px;
}

/* "Show all photos" button on mobile */
.mobile-gallery-open-lb[b-hygxibgois] {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease;
}

.mobile-gallery-open-lb:hover[b-hygxibgois] {
    background: var(--background-light);
}

.mobile-gallery-open-lb:focus-visible[b-hygxibgois] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ── QUALITY / TRUST BADGES (inline, near title in the booking card) ─── */

.space-detail-badges[b-hygxibgois] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.detail-badge[b-hygxibgois] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px var(--space-2);
    border-radius: var(--border-radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.detail-badge.badge-top-rated[b-hygxibgois] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.detail-badge.badge-new[b-hygxibgois] {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info-border);
}

.detail-badge.badge-verified[b-hygxibgois] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

/* ── HOST SECTION ────────────────────────────────────────────────────── */
.host-section[b-hygxibgois] {
    padding: 1.5rem 0;
}

.host-avatar[b-hygxibgois] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.host-avatar img[b-hygxibgois] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.host-avatar i[b-hygxibgois] {
    font-size: 2rem;
    color: var(--text-secondary);
}

.host-info[b-hygxibgois] {
    flex: 1;
}

.host-name[b-hygxibgois] {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.host-meta[b-hygxibgois] {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin: 0;
}

.host-badge[b-hygxibgois] {
    font-weight: 600;
    color: var(--color-success);
}

.host-separator[b-hygxibgois] {
    margin: 0 var(--space-1);
}

/* ── CONTENT DIVIDER ─────────────────────────────────────────────────── */
.content-divider[b-hygxibgois] {
    height: 1px;
    background: var(--border-subtle);
    margin: 2rem 0;
}

/* ── FEATURES SECTION ────────────────────────────────────────────────── */
.features-section[b-hygxibgois] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-item[b-hygxibgois] {
    display: flex;
    gap: 1rem;
}

.feature-icon[b-hygxibgois] {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-top: 0.25rem;
}

.feature-content[b-hygxibgois] {
    flex: 1;
}

.feature-title[b-hygxibgois] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.feature-description[b-hygxibgois] {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ── SECTION HEADINGS ────────────────────────────────────────────────── */
.section-heading[b-hygxibgois] {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
}

/* ── ABOUT SECTION ───────────────────────────────────────────────────── */
.about-text[b-hygxibgois] {
    font-size: var(--fs-md);
    color: var(--text-primary);
    line-height: 1.65;
    margin: 0;
}

/* ── AMENITIES SECTION ───────────────────────────────────────────────── */
.amenities-grid[b-hygxibgois] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.amenity-item[b-hygxibgois] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.amenity-icon-lg[b-hygxibgois] {
    font-size: 1.5rem;
    color: var(--text-primary);
}

.amenity-text[b-hygxibgois] {
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.show-all-btn[b-hygxibgois] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: 1px solid var(--text-primary);
    transition: background-color 0.2s;
}

.show-all-btn:hover[b-hygxibgois] {
    background-color: var(--background-light);
}

/* ── REVIEWS SECTION ─────────────────────────────────────────────────── */
.reviews-section[b-hygxibgois] {
    padding: 1rem 0;
}

/* ── BOOKING CARD ────────────────────────────────────────────────────── */
.booking-card-wrapper[b-hygxibgois] {
    position: relative;
    /* On desktop the card itself is sticky; no min-height so the column
       does not force extra height below the card when left content is taller. */
}

.booking-card[b-hygxibgois] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-xl);
}

/* ── SPACE HEADER IN BOOKING CARD ────────────────────────────────────── */
.space-header[b-hygxibgois] {
    padding-bottom: 0.5rem;
}

.space-title[b-hygxibgois] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.25;
}

.space-meta[b-hygxibgois] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: var(--fs-base);
    color: var(--text-secondary);
}

.meta-item[b-hygxibgois] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.meta-item i[b-hygxibgois] {
    font-size: var(--fs-xs);
}

.meta-dot[b-hygxibgois] {
    margin: 0 0.25rem;
    color: var(--border-color);
}

.meta-link[b-hygxibgois] {
    color: var(--text-primary);
    text-decoration: underline;
}

.meta-link:hover[b-hygxibgois] {
    color: var(--text-primary);
}

/* ── PRICE ───────────────────────────────────────────────────────────── */
.price-header[b-hygxibgois] {
    margin-bottom: 1.25rem;
}

.price-display[b-hygxibgois] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.price-amount[b-hygxibgois] {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.price-unit[b-hygxibgois] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.booking-divider[b-hygxibgois] {
    height: 1px;
    background: var(--border-subtle);
    margin: 1.25rem 0;
}

/* ── RESERVE BUTTON ──────────────────────────────────────────────────── */
.reserve-button[b-hygxibgois] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--action-color);
    color: var(--text-inverse);
    border: 1.5px solid var(--action-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    min-height: 52px;
    letter-spacing: 0.01em;
}

.reserve-button:hover:not(:disabled)[b-hygxibgois] {
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.reserve-button:focus-visible[b-hygxibgois] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.reserve-button:disabled[b-hygxibgois] {
    opacity: 0.6;
    cursor: not-allowed;
}

.charge-notice[b-hygxibgois] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: var(--space-3) 0 0 0;
    line-height: var(--lh-normal);
}

.charge-notice i[b-hygxibgois] {
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.9rem;
    color: var(--color-success);
}

.booking-info[b-hygxibgois] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.info-item[b-hygxibgois] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--lh-snug);
}

.info-item-icon[b-hygxibgois] {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.info-item-text[b-hygxibgois] {
    flex: 1;
    padding-top: 0.25rem;
}

/* ── STICKY BOOKING CARD (Desktop only) ──────────────────────────────── */
@media (min-width: 992px) {
    .booking-card[b-hygxibgois] {
        position: sticky;
        top: 90px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .detail-page[b-hygxibgois] {
        padding-bottom: 2rem;
    }

    .action-text[b-hygxibgois] {
        display: inline;
    }
}

/* ── MOBILE STICKY BOTTOM BAR ────────────────────────────────────────── */
.mobile-booking-bar[b-hygxibgois] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-raised);
    border-top: 1px solid var(--border-color);
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    .mobile-booking-bar[b-hygxibgois] {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: var(--space-3);
    }
}

.mobile-booking-content[b-hygxibgois] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
}

.mobile-price-info[b-hygxibgois] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-price[b-hygxibgois] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.mobile-price-amount[b-hygxibgois] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.mobile-price-unit[b-hygxibgois] {
    font-size: var(--fs-base);
    color: var(--text-secondary);
}

.mobile-rating[b-hygxibgois] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-xs);
    color: var(--text-primary);
}

.mobile-rating i[b-hygxibgois] {
    color: var(--text-primary);
}

.mobile-reserve-btn[b-hygxibgois] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--action-color);
    color: var(--text-inverse);
    border: 1.5px solid var(--action-color);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.75rem;
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    min-height: 48px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.01em;
}

.mobile-reserve-btn:hover:not(:disabled)[b-hygxibgois] {
    background: var(--action-hover);
    border-color: var(--action-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.mobile-reserve-btn:focus-visible[b-hygxibgois] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.mobile-reserve-btn:disabled[b-hygxibgois] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (min-width: 992px) {
    .mobile-booking-bar[b-hygxibgois] {
        display: none;
    }
}

/* ── RESPONSIVE ADJUSTMENTS ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .gallery-mosaic[b-hygxibgois] {
        height: 320px;
    }

    .amenities-grid[b-hygxibgois] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .space-title[b-hygxibgois] {
        font-size: var(--fs-xl);
    }

    .mobile-gallery[b-hygxibgois] {
        border-radius: 0;
        margin: 0 -0.75rem; /* bleed to page edge on phone */
        width: calc(100% + 1.5rem);
    }

    .section-heading[b-hygxibgois] {
        font-size: var(--fs-xl);
    }

    .host-name[b-hygxibgois] {
        font-size: var(--fs-xl);
    }

    .breadcrumb-custom[b-hygxibgois] {
        font-size: var(--fs-xs);
    }

    .top-bar[b-hygxibgois] {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-actions[b-hygxibgois] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── LOADING SKELETON ────────────────────────────────────────────────── */
.detail-skeleton[b-hygxibgois] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-6);
}

/* ── LIGHTBOX (injected into document.body via JS — not scoped) ─────────
   These rules must live in wwwroot/app.css to affect the dynamically-
   created overlay. See the companion comment in Detail.razor.js.
   Styles are defined in app.css under /* detail-lightbox * /
   ── No scoped lightbox rules here ─────────────────────────────────── */
/* /Components/Pages/Developers/ApiReference.razor.rz.scp.css */
/* ============================================================
   API Reference — ApiReference.razor.css
   ============================================================ */

/* ----- Content — full width ----- */
.api-ref-content[b-v25ciakpqs] {
    padding-bottom: 4rem;
}

/* ----- Page header ----- */
.api-ref-header[b-v25ciakpqs] {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.api-ref-title[b-v25ciakpqs] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin-bottom: 0.75rem;
}

.api-ref-intro[b-v25ciakpqs] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 640px;
    margin: 0;
}

/* ----- Sticky language bar ----- */
.api-lang-bar[b-v25ciakpqs] {
    position: sticky;
    top: 64px;
    z-index: 50;
    background: var(--code-bg-elevated);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 -3rem;
    padding: 0.6rem 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0;
}

.api-lang-bar-label[b-v25ciakpqs] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* ----- Language picker — dark version on sticky bar ----- */
.api-lang-picker[b-v25ciakpqs] {
    display: inline-flex;
    gap: 0.125rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.2rem;
}

.api-lang-tab[b-v25ciakpqs] {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.api-lang-tab:hover[b-v25ciakpqs] {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

.api-lang-tab.active[b-v25ciakpqs] {
    color: var(--text-inverse);
    background: rgba(255, 255, 255, 0.14);
}

/* ----- Sections ----- */
.api-section[b-v25ciakpqs] {
    margin: 0;
    scroll-margin-top: 108px;
}

.api-section > h2.api-section-title[b-v25ciakpqs] {
    padding: 2rem 0 0;
    border-bottom: none;
    margin-bottom: 0;
}

.api-section-title[b-v25ciakpqs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0;
    padding: 2rem 0 0;
    border-bottom: none;
}

.api-subsection-title[b-v25ciakpqs] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.75rem 0 0.75rem;
}

.api-section-body[b-v25ciakpqs] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.api-section-intro[b-v25ciakpqs] {
    max-width: 640px;
    padding-top: 0.5rem;
}

/* ----- Full-width sections (no code) ----- */
.api-section-full[b-v25ciakpqs] {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-color);
    max-width: 760px;
}

/* ----- Two-column split ----- */
.api-split[b-v25ciakpqs] {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 2.5rem;
    align-items: start;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.api-split-left[b-v25ciakpqs] {
    min-width: 0;
}

.api-split-right[b-v25ciakpqs] {
    min-width: 0;
    align-self: start;
    background: var(--code-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Code blocks inside right panel merge into the dark panel */
.api-split-right .api-code-block[b-v25ciakpqs] {
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.api-split-right .api-code-block:last-child[b-v25ciakpqs] {
    border-bottom: none;
}

/* Warning callout inside right panel */
.api-split-right .api-warning-callout[b-v25ciakpqs] {
    border-radius: 0;
    margin: 0;
    border-top: 1px solid rgba(251, 191, 36, 0.2);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

/* ----- Meta block (base url, etc.) ----- */
.api-meta-block[b-v25ciakpqs] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.api-meta-row[b-v25ciakpqs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.875rem;
}

.api-meta-row + .api-meta-row[b-v25ciakpqs] {
    border-top: 1px solid var(--border-color);
}

.api-meta-label[b-v25ciakpqs] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 120px;
    flex-shrink: 0;
}

.api-meta-value[b-v25ciakpqs] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    color: var(--text-primary);
}

/* ----- Tables ----- */
.api-table[b-v25ciakpqs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.865rem;
    margin-bottom: 1.5rem;
}

.api-table thead tr[b-v25ciakpqs] {
    background: var(--background-light);
    border-bottom: 2px solid var(--border-color);
}

.api-table th[b-v25ciakpqs] {
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    padding: 0.6rem 0.875rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.api-table td[b-v25ciakpqs] {
    padding: 0.65rem 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.5;
}

.api-table td:nth-child(2)[b-v25ciakpqs] {
    white-space: nowrap;
}

.api-table tbody tr:last-child td[b-v25ciakpqs] {
    border-bottom: none;
}

.api-table tbody tr:hover td[b-v25ciakpqs] {
    background: rgba(0, 0, 0, 0.02);
}

.api-table code[b-v25ciakpqs] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--text-primary);
}

/* ----- Required/optional badges ----- */
.badge-required[b-v25ciakpqs] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.badge-optional[b-v25ciakpqs] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

/* ----- Scope badges ----- */
.badge-scope[b-v25ciakpqs] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-community[b-v25ciakpqs] {
    background: rgba(0, 166, 153, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(0, 166, 153, 0.25);
}

.badge-brand[b-v25ciakpqs] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-info);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ----- Endpoint header (used in split-left) ----- */
.api-endpoint-header[b-v25ciakpqs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}

.api-endpoint-path[b-v25ciakpqs] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
    background: none;
    padding: 0;
}

.api-endpoint-desc[b-v25ciakpqs] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.api-param-heading[b-v25ciakpqs] {
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 1.25rem;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

/* ----- Method badges ----- */
.method-badge[b-v25ciakpqs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    min-width: 52px;
    flex-shrink: 0;
}

.method-get[b-v25ciakpqs] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--code-method-get);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.method-post[b-v25ciakpqs] {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-info);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.method-delete[b-v25ciakpqs] {
    background: rgba(255, 56, 92, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(255, 56, 92, 0.25);
}

/* ----- Permission badge ----- */
.permission-badge[b-v25ciakpqs] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--code-method-warn);
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    margin-left: auto;
}

/* ----- Dark code blocks ----- */
.api-code-block[b-v25ciakpqs] {
    background: var(--code-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    min-width: 0;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.api-code-header[b-v25ciakpqs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1rem;
    background: var(--code-bg-elevated);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.api-code-lang[b-v25ciakpqs] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', monospace;
}

.api-code-body[b-v25ciakpqs] {
    margin: 0;
    padding: 1rem 1.25rem;
    font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Code', 'Fira Mono', 'Consolas', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--code-text-muted);
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
    -moz-tab-size: 2;
}

.api-code-body[b-v25ciakpqs]::-webkit-scrollbar {
    height: 4px;
}

.api-code-body[b-v25ciakpqs]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.api-code-body[b-v25ciakpqs]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.api-code-body code[b-v25ciakpqs] {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

/* ----- Feature list (used in OAuth subsection) ----- */
.api-feature-list[b-v25ciakpqs] {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.25rem 0 1.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.api-feature-list li[b-v25ciakpqs] {
    margin-bottom: 0.25rem;
}

.api-feature-list strong[b-v25ciakpqs] {
    color: var(--text-primary);
}

.api-feature-list code[b-v25ciakpqs] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--text-primary);
}

/* ----- Callout link inside callouts ----- */
.api-callout-link[b-v25ciakpqs] {
    color: var(--color-info);
    text-decoration: underline;
    font-weight: 600;
}

.api-callout-link:hover[b-v25ciakpqs] {
    color: #1e3a8a;
}

/* ----- Callout boxes ----- */
.api-info-callout[b-v25ciakpqs] {
    display: block;
    font-size: 0.875rem;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin: 1rem 0 1.25rem;
    color: var(--code-method-post);
    line-height: 1.6;
}

.api-warning-callout[b-v25ciakpqs] {
    display: block;
    font-size: 0.875rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin: 1rem 0 0;
    color: var(--code-method-warn);
    line-height: 1.6;
}

.api-info-callout > i[b-v25ciakpqs],
.api-warning-callout > i[b-v25ciakpqs] {
    margin-right: 0.4rem;
}

.api-info-callout code[b-v25ciakpqs],
.api-warning-callout code[b-v25ciakpqs] {
    font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Code', 'Fira Mono', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.08);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

/* ----- Model cards ----- */
.api-model-card[b-v25ciakpqs] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 108px;
}

.api-model-title[b-v25ciakpqs] {
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0.875rem 1.25rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.api-model-card .api-table[b-v25ciakpqs] {
    margin: 0;
}

.api-model-card .api-section-body[b-v25ciakpqs] {
    padding: 0.75rem 1.25rem 0;
    margin-bottom: 0;
}

.api-model-desc[b-v25ciakpqs] {
    font-size: 0.85rem;
}

/* ----- Responsive ----- */
@media (max-width: 1299px) {
    .api-split[b-v25ciakpqs] {
        grid-template-columns: 1fr 420px;
        gap: 2rem;
    }
}

@media (max-width: 1099px) {
    .api-split[b-v25ciakpqs] {
        grid-template-columns: 1fr 360px;
        gap: 1.5rem;
    }
}

@media (max-width: 991px) {
    .api-lang-bar[b-v25ciakpqs] {
        margin: 0 -1.25rem;
        padding: 0.5rem 1.25rem;
    }

    .api-split[b-v25ciakpqs] {
        grid-template-columns: 1fr;
    }

    .api-split-right[b-v25ciakpqs] {
        position: static;
    }
}

@media (max-width: 767px) {
    .api-ref-title[b-v25ciakpqs] {
        font-size: 1.5rem;
    }

    .api-endpoint-header[b-v25ciakpqs] {
        gap: 0.5rem;
    }

    .permission-badge[b-v25ciakpqs] {
        margin-left: 0;
    }

    .api-code-body[b-v25ciakpqs] {
        font-size: 0.75rem;
        padding: 1rem;
    }

    .api-table th[b-v25ciakpqs],
    .api-table td[b-v25ciakpqs] {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }

    .api-lang-bar[b-v25ciakpqs] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Developers/GetApiKeys.razor.rz.scp.css */
/* ============================================================
   Get API Keys — GetApiKeys.razor.css
   ============================================================ */

.getkeys-content[b-r1gf9g4uya] {
    max-width: 800px;
}

/* ----- Header ----- */
.getkeys-header[b-r1gf9g4uya] {
    margin-bottom: 2rem;
}

.getkeys-title[b-r1gf9g4uya] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.getkeys-intro[b-r1gf9g4uya] {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin: 0;
}

/* ----- Auth card ----- */
.getkeys-auth-card[b-r1gf9g4uya] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.75rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-sm);
}

.getkeys-loading[b-r1gf9g4uya] {
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.getkeys-card-signin[b-r1gf9g4uya] {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}

.getkeys-card-ready[b-r1gf9g4uya] {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.getkeys-card-contact[b-r1gf9g4uya] {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}

.getkeys-auth-icon[b-r1gf9g4uya] {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--text-secondary);
    padding-top: 0.15rem;
}

.getkeys-icon-success[b-r1gf9g4uya] {
    color: var(--color-success);
}

.getkeys-icon-info[b-r1gf9g4uya] {
    color: var(--color-info);
}

.getkeys-auth-body[b-r1gf9g4uya] {
    flex: 1;
    min-width: 0;
}

.getkeys-auth-title[b-r1gf9g4uya] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.getkeys-auth-desc[b-r1gf9g4uya] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.getkeys-auth-actions[b-r1gf9g4uya] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ----- Buttons ----- */
.btn-getkeys-primary[b-r1gf9g4uya] {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-inverse);
    background: var(--action-color);
    border: 1.5px solid var(--action-color);
    text-decoration: none;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.btn-getkeys-primary:hover[b-r1gf9g4uya] {
    color: var(--text-inverse);
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.btn-getkeys-secondary[b-r1gf9g4uya] {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface-raised);
    border: 1.5px solid var(--border-color);
    text-decoration: none;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-getkeys-secondary:hover[b-r1gf9g4uya] {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ----- Section ----- */
.getkeys-section[b-r1gf9g4uya] {
    margin-bottom: 3rem;
}

.getkeys-section-title[b-r1gf9g4uya] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* ----- Steps ----- */
.getkeys-steps[b-r1gf9g4uya] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.getkeys-step[b-r1gf9g4uya] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.getkeys-step-num[b-r1gf9g4uya] {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-inverse);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.getkeys-step-title[b-r1gf9g4uya] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.getkeys-step-desc[b-r1gf9g4uya] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.getkeys-code-block[b-r1gf9g4uya] {
    margin-top: 0.75rem;
    background: var(--code-bg-elevated);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}

.getkeys-code-block code[b-r1gf9g4uya] {
    font-size: 0.82rem;
    color: var(--code-text);
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
    white-space: nowrap;
}

/* ----- Permission table ----- */
.getkeys-table-wrap[b-r1gf9g4uya] {
    overflow-x: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.getkeys-table[b-r1gf9g4uya] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.getkeys-table thead[b-r1gf9g4uya] {
    background: var(--background-light);
}

.getkeys-table th[b-r1gf9g4uya] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.getkeys-table td[b-r1gf9g4uya] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}

.getkeys-table tbody tr:last-child td[b-r1gf9g4uya] {
    border-bottom: none;
}

.getkeys-table tbody tr:hover td[b-r1gf9g4uya] {
    background: var(--background-light);
}

.getkeys-check[b-r1gf9g4uya] {
    text-align: center;
    color: var(--color-success);
    font-size: 1rem;
}

.getkeys-dash[b-r1gf9g4uya] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ----- Next steps ----- */
.getkeys-next-links[b-r1gf9g4uya] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.getkeys-next-link[b-r1gf9g4uya] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.getkeys-next-link:hover[b-r1gf9g4uya] {
    color: var(--text-primary);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
}

.getkeys-next-link > i:first-child[b-r1gf9g4uya] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.getkeys-next-link span[b-r1gf9g4uya] {
    flex: 1;
    min-width: 0;
}

.getkeys-next-link strong[b-r1gf9g4uya] {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

.getkeys-next-link small[b-r1gf9g4uya] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: 0.1rem;
}

/* ----- Responsive ----- */
@media (max-width: 576px) {
    .getkeys-auth-card[b-r1gf9g4uya] {
        flex-direction: column;
        gap: 1rem;
    }

    .getkeys-auth-icon[b-r1gf9g4uya] {
        font-size: 1.5rem;
    }

    .getkeys-auth-actions[b-r1gf9g4uya] {
        flex-direction: column;
    }

    .btn-getkeys-primary[b-r1gf9g4uya],
    .btn-getkeys-secondary[b-r1gf9g4uya] {
        justify-content: center;
    }

    .getkeys-title[b-r1gf9g4uya] {
        font-size: 1.6rem;
    }
}
/* /Components/Pages/Developers/Index.razor.rz.scp.css */
/* ============================================================
   Developer Portal Index — Index.razor.css
   ============================================================ */

/* ----- Shared section styles ----- */
.dev-section[b-b17s5wq7tq] {
    margin-bottom: 3.5rem;
}

.dev-section-title[b-b17s5wq7tq] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.dev-section-subtitle[b-b17s5wq7tq] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
    max-width: 640px;
    line-height: 1.6;
}

/* ----- Shared button styles ----- */
.btn-dev-primary[b-b17s5wq7tq] {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-inverse);
    background: var(--action-color);
    border: 1.5px solid var(--action-color);
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.btn-dev-primary:hover[b-b17s5wq7tq] {
    color: var(--text-inverse);
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.btn-dev-secondary[b-b17s5wq7tq] {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface-raised);
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-dev-secondary:hover[b-b17s5wq7tq] {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ----- Hero ----- */
.dev-hero[b-b17s5wq7tq] {
    padding: 0.5rem 0 3rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 3rem;
}

.dev-hero-eyebrow[b-b17s5wq7tq] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    background: rgba(255, 56, 92, 0.08);
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    margin-bottom: 1.25rem;
}

.dev-hero-title[b-b17s5wq7tq] {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.dev-hero-subtitle[b-b17s5wq7tq] {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 580px;
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.dev-hero-actions[b-b17s5wq7tq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

/* ----- Hero Code Snippet ----- */
.dev-hero-snippet[b-b17s5wq7tq] {
    background: var(--code-bg);
    border-radius: var(--border-radius);
    max-width: 680px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.dev-snippet-header[b-b17s5wq7tq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-snippet-dot[b-b17s5wq7tq] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.dev-snippet-title[b-b17s5wq7tq] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dev-snippet-code[b-b17s5wq7tq] {
    margin: 0;
    padding: 1.25rem 1.5rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--code-text);
    white-space: pre-wrap;
    word-break: break-all;
}

.dev-snippet-code code[b-b17s5wq7tq] {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

/* ----- Capability Cards ----- */
.dev-capability-grid[b-b17s5wq7tq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.dev-capability-card[b-b17s5wq7tq] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.dev-capability-card:hover[b-b17s5wq7tq] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.dev-cap-icon[b-b17s5wq7tq] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 56, 92, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.dev-cap-title[b-b17s5wq7tq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.dev-cap-body[b-b17s5wq7tq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
}

.dev-cap-link[b-b17s5wq7tq] {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: gap 0.15s ease;
}

.dev-cap-link:hover[b-b17s5wq7tq] {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ----- Quick Links ----- */
.dev-quicklinks[b-b17s5wq7tq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dev-quicklink-card[b-b17s5wq7tq] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.dev-quicklink-card:hover[b-b17s5wq7tq] {
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 56, 92, 0.3);
    transform: translateX(3px);
}

.dev-ql-icon[b-b17s5wq7tq] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dev-quicklink-card:hover .dev-ql-icon[b-b17s5wq7tq] {
    background: rgba(255, 56, 92, 0.08);
    color: var(--primary-color);
    border-color: rgba(255, 56, 92, 0.2);
}

.dev-ql-body[b-b17s5wq7tq] {
    flex: 1;
    min-width: 0;
}

.dev-ql-title[b-b17s5wq7tq] {
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.dev-ql-desc[b-b17s5wq7tq] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.dev-ql-arrow[b-b17s5wq7tq] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.dev-quicklink-card:hover .dev-ql-arrow[b-b17s5wq7tq] {
    color: var(--primary-color);
    transform: translateX(3px);
}

/* ----- CTA Section ----- */
.dev-cta-section[b-b17s5wq7tq] {
    background: linear-gradient(135deg, #fff5f7 0%, #fff0f3 100%);
    border: 1px solid rgba(255, 56, 92, 0.15);
    border-radius: var(--border-radius-lg);
    padding: 2rem 2rem;
    margin-top: 1rem;
}

.dev-cta-inner[b-b17s5wq7tq] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.dev-cta-icon[b-b17s5wq7tq] {
    font-size: 2rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.dev-cta-body[b-b17s5wq7tq] {
    flex: 1;
    min-width: 240px;
}

.dev-cta-title[b-b17s5wq7tq] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.dev-cta-subtitle[b-b17s5wq7tq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

.dev-cta-subtitle + .dev-cta-subtitle[b-b17s5wq7tq] {
    margin-top: 0.5rem;
}

.dev-cta-subtitle-muted[b-b17s5wq7tq] {
    font-size: 0.82rem;
    color: var(--text-secondary);
    opacity: 0.85;
}

.dev-cta-link[b-b17s5wq7tq] {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.dev-cta-link:hover[b-b17s5wq7tq] {
    text-decoration: underline;
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
    .dev-hero-title[b-b17s5wq7tq] {
        font-size: 2rem;
    }

    .dev-capability-grid[b-b17s5wq7tq] {
        grid-template-columns: 1fr;
    }

    .dev-cta-inner[b-b17s5wq7tq] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dev-cta-icon[b-b17s5wq7tq] {
        font-size: 1.5rem;
    }
}

@media (max-width: 575px) {
    .dev-hero-actions[b-b17s5wq7tq] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/Developers/Mcp.razor.rz.scp.css */
/* ============================================================
   MCP Page — Mcp.razor.css
   ============================================================ */

.mcp-content[b-f8o78c21fa] {
    max-width: 820px;
}

/* ----- Header ----- */
.mcp-header[b-f8o78c21fa] {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.mcp-eyebrow[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.mcp-badge-new[b-f8o78c21fa] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    background: var(--primary-color);
    color: var(--text-inverse);
    letter-spacing: 0.06em;
}

.mcp-title[b-f8o78c21fa] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin-bottom: 0.75rem;
}

.mcp-intro[b-f8o78c21fa] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.mcp-link[b-f8o78c21fa] {
    color: var(--primary-color);
    text-decoration: none;
}

.mcp-link:hover[b-f8o78c21fa] {
    text-decoration: underline;
}

/* ----- Sections ----- */
.mcp-section[b-f8o78c21fa] {
    margin-bottom: 3.5rem;
    scroll-margin-top: 90px;
}

.mcp-section-title[b-f8o78c21fa] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.mcp-subsection-title[b-f8o78c21fa] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.75rem 0 0.5rem;
}

.mcp-client-title[b-f8o78c21fa] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.25rem 0 0.5rem;
}

/* ----- Quick connect hero ----- */
.mcp-quick-connect[b-f8o78c21fa] {
    background: linear-gradient(135deg, rgba(255, 56, 92, 0.06) 0%, rgba(59, 130, 246, 0.06) 100%);
    border: 1px solid rgba(255, 56, 92, 0.2);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}

.mcp-quick-connect-header[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.mcp-recommended-badge[b-f8o78c21fa] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    background: var(--primary-color);
    color: var(--text-inverse);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mcp-quick-connect-title[b-f8o78c21fa] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mcp-quick-connect-body[b-f8o78c21fa] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

.mcp-steps[b-f8o78c21fa] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mcp-step[b-f8o78c21fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.mcp-step-number[b-f8o78c21fa] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-inverse);
    font-size: 0.8rem;
    font-weight: 700;
}

.mcp-step-content[b-f8o78c21fa] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mcp-step-content strong[b-f8o78c21fa] {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.mcp-step-content p[b-f8o78c21fa] {
    margin: 0;
}

.mcp-endpoint-copy[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
}

.mcp-endpoint-label[b-f8o78c21fa] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mcp-endpoint-value[b-f8o78c21fa] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
}

/* ----- Platform cards ----- */
.mcp-platform-grid[b-f8o78c21fa] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.mcp-platform-card[b-f8o78c21fa] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mcp-platform-header[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mcp-platform-icon[b-f8o78c21fa] {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.mcp-platform-name[b-f8o78c21fa] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mcp-platform-desc[b-f8o78c21fa] {
    font-size: 0.845rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1 1 auto;
}

.mcp-platform-note[b-f8o78c21fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-warning);
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    line-height: 1.55;
}

.mcp-platform-note-icon[b-f8o78c21fa] {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.mcp-platform-link[b-f8o78c21fa] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    margin-top: auto;
}

.mcp-platform-link:hover[b-f8o78c21fa] {
    text-decoration: underline;
}

.mcp-success-callout[b-f8o78c21fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    color: var(--color-success);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.mcp-success-callout .mcp-callout-icon[b-f8o78c21fa] {
    color: var(--color-success);
}

/* ----- Advanced local clients ----- */
.mcp-advanced-section[b-f8o78c21fa] {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-color);
}

.mcp-section-body[b-f8o78c21fa] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* ----- Meta block ----- */
.mcp-meta-block[b-f8o78c21fa] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.mcp-meta-row[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.875rem;
}

.mcp-meta-row + .mcp-meta-row[b-f8o78c21fa] {
    border-top: 1px solid var(--border-color);
}

.mcp-meta-label[b-f8o78c21fa] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 120px;
    flex-shrink: 0;
}

.mcp-meta-value[b-f8o78c21fa] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    color: var(--text-primary);
}

/* ----- Callout ----- */
.mcp-info-callout[b-f8o78c21fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    color: var(--color-info);
    line-height: 1.6;
}

.mcp-callout-icon[b-f8o78c21fa] {
    flex: 0 0 auto;
    line-height: 1.6;
}

.mcp-callout-body[b-f8o78c21fa] {
    flex: 1 1 auto;
    min-width: 0;
}

.mcp-callout-link[b-f8o78c21fa] {
    color: var(--color-info);
    text-decoration: underline;
}

/* ----- Tool cards ----- */
.mcp-tool-card[b-f8o78c21fa] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.mcp-tool-header[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.mcp-tool-name[b-f8o78c21fa] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    background: none;
    padding: 0;
}

.mcp-tool-desc[b-f8o78c21fa] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1rem;
}

/* ----- Permission / scope badges ----- */
.mcp-perm-badge[b-f8o78c21fa] {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-warning);
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
}

.mcp-scope-badge[b-f8o78c21fa] {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
}

.mcp-scope-public[b-f8o78c21fa] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.mcp-scope-brand[b-f8o78c21fa] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-info);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ----- Parameter tables ----- */
.mcp-param-table[b-f8o78c21fa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.845rem;
}

.mcp-param-table thead tr[b-f8o78c21fa] {
    background: var(--background-light);
    border-bottom: 2px solid var(--border-color);
}

.mcp-param-table th[b-f8o78c21fa] {
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mcp-param-table td[b-f8o78c21fa] {
    padding: 0.55rem 0.75rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.5;
}

.mcp-param-table tbody tr:last-child td[b-f8o78c21fa] {
    border-bottom: none;
}

.mcp-param-table code[b-f8o78c21fa] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

/* ----- Code blocks ----- */
.mcp-code-block[b-f8o78c21fa] {
    background: var(--code-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.mcp-code-header[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mcp-code-lang[b-f8o78c21fa] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.mcp-code-body[b-f8o78c21fa] {
    margin: 0;
    padding: 1.25rem 1.5rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--code-text);
    overflow-x: auto;
    white-space: pre;
}

.mcp-code-body code[b-f8o78c21fa] {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

/* ----- Comparison table ----- */
.mcp-compare-table[b-f8o78c21fa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.mcp-compare-table thead tr[b-f8o78c21fa] {
    background: var(--background-light);
    border-bottom: 2px solid var(--border-color);
}

.mcp-compare-table th[b-f8o78c21fa] {
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    padding: 0.65rem 1rem;
}

.mcp-compare-table td[b-f8o78c21fa] {
    padding: 0.65rem 1rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.55;
}

.mcp-compare-table td:first-child[b-f8o78c21fa] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.mcp-compare-table tbody tr:last-child td[b-f8o78c21fa] {
    border-bottom: none;
}

/* ----- "What's next" links ----- */
.mcp-next-links[b-f8o78c21fa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ============================================================
   AI platform instructions list (Robinhood-style clean reference)
   ============================================================ */
.ai-instr-list[b-f8o78c21fa] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-raised);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.ai-instr[b-f8o78c21fa] {
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
}

.ai-instr:last-child[b-f8o78c21fa] {
    border-bottom: none;
}

.ai-instr-icon[b-f8o78c21fa] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #475569;
}

.ai-instr-icon.claude[b-f8o78c21fa] {
    background: #fef3e8;
    color: #f97316;
}

.ai-instr-icon.chatgpt[b-f8o78c21fa] {
    background: #e0f2fe;
    color: #0ea5e9;
}

.ai-instr-icon.codex[b-f8o78c21fa] {
    background: #f3e8ff;
    color: #8b5cf6;
}

.ai-instr-icon.cursor[b-f8o78c21fa] {
    background: #ecfdf5;
    color: #10b981;
}

.ai-instr-icon.grok[b-f8o78c21fa] {
    background: #fefce8;
    color: #eab308;
}

.ai-instr-body[b-f8o78c21fa] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.45;
}

.ai-instr-name[b-f8o78c21fa] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 0.1rem;
}

.ai-instr-text[b-f8o78c21fa] {
    color: #475569;
}

.ai-instr-text code[b-f8o78c21fa],
.ai-cmd[b-f8o78c21fa] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.78rem;
    background: rgba(15, 23, 42, 0.06);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    color: var(--text-primary);
}

.ai-instr-note[b-f8o78c21fa] {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: #64748b;
    background: rgba(241, 245, 249, 0.7);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    display: inline-block;
}

/* Developer page promo banner pointing to the friendly /ai page */
.mcp-user-promo[b-f8o78c21fa] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--color-success);
    line-height: 1.5;
}

.mcp-promo-icon[b-f8o78c21fa] {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.mcp-next-link[b-f8o78c21fa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-primary);
    background: var(--surface-raised);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.mcp-next-link:hover[b-f8o78c21fa] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.mcp-next-link span[b-f8o78c21fa] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mcp-next-link strong[b-f8o78c21fa] {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.mcp-next-link small[b-f8o78c21fa] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.mcp-next-link > i:first-child[b-f8o78c21fa] {
    font-size: 1.1rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.mcp-next-link > i:last-child[b-f8o78c21fa] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
    .mcp-title[b-f8o78c21fa] {
        font-size: 1.5rem;
    }

    .mcp-platform-grid[b-f8o78c21fa] {
        grid-template-columns: 1fr;
    }

    .mcp-quick-connect[b-f8o78c21fa] {
        padding: 1.25rem;
    }

    .mcp-tool-card[b-f8o78c21fa] {
        padding: 1rem;
    }

    .mcp-param-table th[b-f8o78c21fa],
    .mcp-param-table td[b-f8o78c21fa] {
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
    }

    .mcp-code-body[b-f8o78c21fa] {
        font-size: 0.75rem;
        padding: 1rem;
    }

    .mcp-compare-table th[b-f8o78c21fa],
    .mcp-compare-table td[b-f8o78c21fa] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/Developers/Recipes.razor.rz.scp.css */
/* ============================================================
   Recipes — Recipes.razor.css
   ============================================================ */

.recipes-content[b-d3dmmk0kfk] {
    max-width: 820px;
}

/* ----- Page header ----- */
.recipes-header[b-d3dmmk0kfk] {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.recipes-title[b-d3dmmk0kfk] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin-bottom: 0.75rem;
}

.recipes-intro[b-d3dmmk0kfk] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 0 1.25rem;
}

/* ----- Language picker ----- */
.recipe-lang-picker[b-d3dmmk0kfk] {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.25rem;
}

.recipe-lang-tab[b-d3dmmk0kfk] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.recipe-lang-tab:hover[b-d3dmmk0kfk] {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

.recipe-lang-tab.active[b-d3dmmk0kfk] {
    color: var(--primary-color);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

/* ----- Recipe sections ----- */
.recipe-section[b-d3dmmk0kfk] {
    margin-bottom: 3rem;
    scroll-margin-top: 90px;
}

/* ----- Recipe card ----- */
.recipe-card[b-d3dmmk0kfk] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.recipe-card-header[b-d3dmmk0kfk] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem 2rem 1.5rem;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
}

.recipe-number[b-d3dmmk0kfk] {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255, 56, 92, 0.12);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-top: 0.1rem;
    letter-spacing: -0.03em;
}

.recipe-title[b-d3dmmk0kfk] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.recipe-subtitle[b-d3dmmk0kfk] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ----- Info / warning callouts inside cards ----- */
.recipe-info[b-d3dmmk0kfk] {
    display: flex;
    align-items: flex-start;
    font-size: 0.875rem;
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid var(--color-info);
    padding: 0.75rem 1.25rem;
    color: var(--color-info);
    line-height: 1.6;
    margin: 0;
}

.recipe-warning[b-d3dmmk0kfk] {
    display: flex;
    align-items: flex-start;
    font-size: 0.875rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    color: var(--color-warning);
    line-height: 1.6;
    margin: 1rem 0 0;
}

.recipe-info code[b-d3dmmk0kfk],
.recipe-warning code[b-d3dmmk0kfk] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.08);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

/* ----- Steps ----- */
.recipe-step[b-d3dmmk0kfk] {
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

.recipe-step:last-of-type[b-d3dmmk0kfk] {
    border-bottom: none;
}

.recipe-step-header[b-d3dmmk0kfk] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}

.recipe-step-num[b-d3dmmk0kfk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-inverse);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.recipe-step-title[b-d3dmmk0kfk] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.recipe-step-body[b-d3dmmk0kfk] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.recipe-step-body code[b-d3dmmk0kfk] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--text-primary);
}

/* ----- Tip box inside steps ----- */
.recipe-tip[b-d3dmmk0kfk] {
    display: flex;
    align-items: flex-start;
    font-size: 0.85rem;
    background: rgba(0, 166, 153, 0.06);
    border: 1px solid rgba(0, 166, 153, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--color-success);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.recipe-tip code[b-d3dmmk0kfk] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.07);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

/* ----- Link inside steps ----- */
.recipe-link[b-d3dmmk0kfk] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.recipe-link:hover[b-d3dmmk0kfk] {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ----- Dark code blocks ----- */
.recipe-code-block[b-d3dmmk0kfk] {
    background: var(--code-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.recipe-code-header[b-d3dmmk0kfk] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.recipe-code-lang[b-d3dmmk0kfk] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.recipe-code-body[b-d3dmmk0kfk] {
    margin: 0;
    padding: 1.25rem 1.5rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--code-text);
    overflow-x: auto;
    white-space: pre;
}

.recipe-code-body code[b-d3dmmk0kfk] {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

/* ----- Tables inside steps ----- */
.recipe-table[b-d3dmmk0kfk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.865rem;
    margin: 1rem 0;
}

.recipe-table thead tr[b-d3dmmk0kfk] {
    background: var(--background-light);
    border-bottom: 2px solid var(--border-color);
}

.recipe-table th[b-d3dmmk0kfk] {
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    padding: 0.55rem 0.875rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recipe-table td[b-d3dmmk0kfk] {
    padding: 0.6rem 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.5;
}

.recipe-table tbody tr:last-child td[b-d3dmmk0kfk] {
    border-bottom: none;
}

.recipe-table code[b-d3dmmk0kfk] {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

/* ----- Best practices list ----- */
.recipe-best-practices[b-d3dmmk0kfk] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recipe-best-practices li[b-d3dmmk0kfk] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.recipe-best-practices li strong[b-d3dmmk0kfk] {
    color: var(--text-primary);
}

.recipe-best-practices a[b-d3dmmk0kfk] {
    color: var(--primary-color);
    text-decoration: none;
}

.recipe-best-practices a:hover[b-d3dmmk0kfk] {
    text-decoration: underline;
}

.recipe-bp-icon[b-d3dmmk0kfk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    font-size: 1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ----- What's next ----- */
.recipe-whats-next[b-d3dmmk0kfk] {
    padding: 1.25rem 2rem;
    background: var(--background-light);
    border-top: 1px solid var(--border-color);
}

.recipe-whats-next-title[b-d3dmmk0kfk] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.recipe-whats-next-links[b-d3dmmk0kfk] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.recipe-whats-next-links li a[b-d3dmmk0kfk] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.recipe-whats-next-links li a:hover[b-d3dmmk0kfk] {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ----- Responsive ----- */

@media (max-width: 767px) {
    .recipes-title[b-d3dmmk0kfk] {
        font-size: 1.5rem;
    }

    .recipe-card-header[b-d3dmmk0kfk] {
        padding: 1.25rem;
        flex-direction: column;
        gap: 0.75rem;
    }

    .recipe-number[b-d3dmmk0kfk] {
        font-size: 1.5rem;
    }

    .recipe-step[b-d3dmmk0kfk] {
        padding: 1.25rem;
    }

    .recipe-whats-next[b-d3dmmk0kfk] {
        padding: 1rem 1.25rem;
    }

    .recipe-code-body[b-d3dmmk0kfk] {
        font-size: 0.75rem;
        padding: 1rem;
    }
}
/* /Components/Pages/Developers/UiGallery.razor.rz.scp.css */
.ui-gallery[b-stdiyp5azt] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    color: var(--text-primary);
    font-family: var(--font-sans);
}

.ui-gallery-header[b-stdiyp5azt] {
    margin-bottom: var(--space-10);
}

.ui-gallery-header h1[b-stdiyp5azt] {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-3) 0;
}

.ui-gallery-lede[b-stdiyp5azt] {
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
    margin: 0;
}

.ui-gallery-lede code[b-stdiyp5azt] {
    background: var(--surface-subtle);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.ui-section[b-stdiyp5azt] {
    margin-bottom: var(--space-16);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.ui-section h2[b-stdiyp5azt] {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-6) 0;
}

.ui-section h3[b-stdiyp5azt] {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    margin: var(--space-6) 0 var(--space-3) 0;
}

.ui-token-row[b-stdiyp5azt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}

.ui-token-stack[b-stdiyp5azt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ui-token-spacing[b-stdiyp5azt],
.ui-token-radius[b-stdiyp5azt],
.ui-token-shadow[b-stdiyp5azt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 96px;
}

.ui-token-spacing-swatch[b-stdiyp5azt] {
    background: var(--primary-color);
    border-radius: var(--radius-sm);
    min-width: 4px;
    min-height: 4px;
}

.ui-token-radius-swatch[b-stdiyp5azt] {
    width: 72px;
    height: 72px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
}

.ui-token-shadow-swatch[b-stdiyp5azt] {
    width: 96px;
    height: 72px;
    background: var(--surface-raised);
    border-radius: var(--radius-md);
}

.ui-token-type[b-stdiyp5azt] {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
}

.ui-token-type-sample[b-stdiyp5azt] {
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}

.ui-token-label[b-stdiyp5azt] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-xs);
    color: var(--text-primary);
}

.ui-token-meta[b-stdiyp5azt] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.ui-row[b-stdiyp5azt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.ui-section-existing[b-stdiyp5azt] {
    display: inline-block;
    margin-left: var(--space-3);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.ui-stack[b-stdiyp5azt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ui-kpi-grid[b-stdiyp5azt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
/* /Components/Pages/EditBrandProfile.razor.rz.scp.css */
.wizard-body[b-xj2dr2gkek] {
    min-height: calc(100vh - 130px);
    padding: 1.25rem 1rem 4rem;
}

.wizard-content[b-xj2dr2gkek] {
    max-width: 640px;
    margin: 0 auto;
}

.step-heading[b-xj2dr2gkek] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.step-subtext[b-xj2dr2gkek] {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.step-section-heading[b-xj2dr2gkek] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

/* Review cards */
.review-card[b-xj2dr2gkek] {
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.review-card-header[b-xj2dr2gkek] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-primary);
}

.review-row[b-xj2dr2gkek] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.75rem;
}

.review-row:last-child[b-xj2dr2gkek] {
    margin-bottom: 0;
}

.review-label[b-xj2dr2gkek] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.review-value[b-xj2dr2gkek] {
    font-size: var(--fs-md);
    color: var(--text-primary);
}

/* Completion progress bar inside review card */
.completion-card .completion-progress[b-xj2dr2gkek] {
    height: 10px;
    border-radius: 5px;
    background: var(--border-color);
    overflow: hidden;
}

.completion-card .completion-progress .progress-bar[b-xj2dr2gkek] {
    width: var(--bar-width, 0%);
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 5px;
}

/* Form control polish */
.form-label[b-xj2dr2gkek] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-control[b-xj2dr2gkek],
.form-select[b-xj2dr2gkek] {
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
}

.form-control:focus[b-xj2dr2gkek],
.form-select:focus[b-xj2dr2gkek] {
    border-color: var(--color-info);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Brand logo upload slot — square, smaller height */
[b-xj2dr2gkek] .brand-logo-slot {
    min-height: 140px;
    aspect-ratio: 1 / 1;
}

/* Brand banner upload slot — wide, shorter height */
[b-xj2dr2gkek] .brand-banner-slot {
    min-height: 140px;
    aspect-ratio: 3 / 1;
}

/* Visuals preview in review card */
.brand-visuals-preview[b-xj2dr2gkek] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.brand-logo-preview[b-xj2dr2gkek] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.brand-logo-preview img[b-xj2dr2gkek] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brand-banner-preview[b-xj2dr2gkek] {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.brand-banner-preview img[b-xj2dr2gkek] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .wizard-body[b-xj2dr2gkek] {
        padding: 1.25rem 1rem 5rem;
    }

    .step-heading[b-xj2dr2gkek] {
        font-size: var(--fs-xl);
    }
}

/* ── Loading skeleton ────────────────────────────────────── */
.wizard-skeleton[b-xj2dr2gkek] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* "Optional" badge inside step-section-heading */
.badge-optional[b-xj2dr2gkek] {
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* ── Step entrance (steps remount per currentStep change) ── */
.wizard-step[b-xj2dr2gkek] {
    animation: step-enter-b-xj2dr2gkek var(--motion-base) var(--ease-standard) both;
}

@keyframes step-enter-b-xj2dr2gkek {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
/* /Components/Pages/EditCampaign.razor.rz.scp.css */
/* ── Content Header ──────────────────────────────────────── */
.content-header[b-11zy7k5wnt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.content-title[b-11zy7k5wnt] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.content-subtitle[b-11zy7k5wnt] {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ── Form Card ───────────────────────────────────────────── */
.form-card[b-11zy7k5wnt] {
    border-radius: var(--border-radius-lg);
}

.form-card .card-body[b-11zy7k5wnt] {
    padding: 2rem;
}

/* ── Loading skeleton ────────────────────────────────────── */
.campaign-form-skeleton[b-11zy7k5wnt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .content-header[b-11zy7k5wnt] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .form-card .card-body[b-11zy7k5wnt] {
        padding: 1.25rem;
    }

    .btn[b-11zy7k5wnt] {
        min-height: 44px;
    }
}
/* /Components/Pages/EditProperty.razor.rz.scp.css */
/* Loading skeleton */
.edit-community-skeleton[b-20qc5whxf5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.community-managed-by[b-20qc5whxf5] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.managed-by-label[b-20qc5whxf5] {
    flex: 1;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.managed-by-label strong[b-20qc5whxf5] {
    color: var(--text-primary);
}

/* PMC picker modal list */
.mc-picker-list[b-20qc5whxf5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.mc-picker-row[b-20qc5whxf5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: white;
    transition: background-color 0.15s ease;
}

.mc-picker-row:hover[b-20qc5whxf5] {
    background: var(--background-light);
}

.mc-picker-info[b-20qc5whxf5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.mc-picker-name[b-20qc5whxf5] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .community-managed-by[b-20qc5whxf5] {
        flex-direction: column;
        align-items: flex-start;
    }
}

[b-20qc5whxf5] .cover-photo-upload {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
}

.community-type-options-edit[b-20qc5whxf5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.community-type-option-edit[b-20qc5whxf5] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.community-type-option-edit:hover[b-20qc5whxf5] {
    border-color: var(--primary-color);
}

.community-type-option-edit.is-selected[b-20qc5whxf5] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
}

.community-type-option-edit input[type="radio"][b-20qc5whxf5] {
    margin-top: var(--space-1);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .community-type-options-edit[b-20qc5whxf5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/EditPropertyProfile.razor.rz.scp.css */
/* EditPropertyProfile page — scoped styles */

/* Loading skeleton */
.edit-profile-skeleton[b-976544okwd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Banner upload area: wide 16:9-ish rectangle */
.banner-upload-area[b-976544okwd] {
    width: 100%;
    height: 160px;
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
}

.banner-upload-inner[b-976544okwd] {
    height: 160px;
    border-radius: var(--border-radius, 12px);
}

/* Logo upload area: circular, compact */
.logo-upload-area[b-976544okwd] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
}

.logo-upload-inner[b-976544okwd] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    min-height: 120px;
}

/* On mobile, make the banner a bit shorter */
@media (max-width: 576px) {
    .banner-upload-area[b-976544okwd],
    .banner-upload-inner[b-976544okwd] {
        height: 140px;
    }
}
/* /Components/Pages/EditSpace.razor.rz.scp.css */
/* EditSpace page — scoped styles */

/* Loading skeleton */
.edit-space-skeleton[b-6i5k6k5qrv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Event-type chip picker ── */
.event-type-chips[b-6i5k6k5qrv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.event-type-chip[b-6i5k6k5qrv] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    border: 1.5px solid var(--border-color);
    border-radius: 2rem;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 44px;
}

.event-type-chip:hover[b-6i5k6k5qrv],
.event-type-chip:focus-visible[b-6i5k6k5qrv] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.15);
}

.event-type-chip--selected[b-6i5k6k5qrv] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
}

.event-type-chip--selected:hover[b-6i5k6k5qrv],
.event-type-chip--selected:focus-visible[b-6i5k6k5qrv] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-inverse);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.landing-page[b-72nw30wk8a] {
    min-height: 100vh;
}

/* Hero photo for the home page — layout/typography live in wwwroot/css/hero.css */
.hero-section[b-72nw30wk8a] {
    --hero-image: url('/images/hero/hero-landing-image.png');
}

/* Carousel slide alignment follows the active hero variant. The shared
   hero.css aligns .hero-card; the slide content inside it needs to match. */
.hero--editorial .hero-slide[b-72nw30wk8a],
.hero--left .hero-slide[b-72nw30wk8a] {
    align-items: flex-start;
    text-align: left;
}

.hero--editorial .hero-slide .hero-actions[b-72nw30wk8a],
.hero--left .hero-slide .hero-actions[b-72nw30wk8a] {
    justify-content: flex-start;
}

/* Properties Section */
.properties-section[b-72nw30wk8a] {
    background: var(--surface-warm);
    padding: var(--section-pad-y-sm) 0;
}

.section-header[b-72nw30wk8a] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-title[b-72nw30wk8a] {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

.section-subtitle[b-72nw30wk8a] {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    margin: 0;
}

/* Carousel Wrapper */
.carousel-wrapper[b-72nw30wk8a] {
    position: relative;
    padding: 0 60px;
}

.carousel-nav[b-72nw30wk8a] {
    position: absolute;
    top: calc(50% - 80px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: var(--shadow-sm);
}

.carousel-nav:hover[b-72nw30wk8a] {
    background: var(--background-light);
    border-color: var(--text-primary);
    transform: scale(1.1);
}

.carousel-nav-prev[b-72nw30wk8a] {
    left: 10px;
}

.carousel-nav-next[b-72nw30wk8a] {
    right: 10px;
}

/* Properties Carousel */
.properties-carousel[b-72nw30wk8a] {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 10px 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.properties-carousel[b-72nw30wk8a]::-webkit-scrollbar {
    display: none;
}

/* Property Card */
.property-card[b-72nw30wk8a] {
    flex: 0 0 calc(25% - 15px);
    min-width: 280px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

.property-image-wrapper[b-72nw30wk8a] {
    position: relative;
    width: 100%;
    padding-top: 66.67%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--border-color);
}

.property-image[b-72nw30wk8a] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.property-card:hover .property-image[b-72nw30wk8a] {
    transform: scale(1.05);
}

.property-badge[b-72nw30wk8a] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge-featured[b-72nw30wk8a] {
    background: rgba(230, 30, 77, 0.95);
    color: var(--text-inverse);
}

.badge-verified[b-72nw30wk8a] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
}

.property-info[b-72nw30wk8a] {
    padding: 14px 0;
}

.property-name[b-72nw30wk8a] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-location[b-72nw30wk8a] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-rating[b-72nw30wk8a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.price-info[b-72nw30wk8a] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-amount[b-72nw30wk8a] {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.price-unit[b-72nw30wk8a] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Skeleton Loading */
.skeleton[b-72nw30wk8a] {
    pointer-events: none;
}

.skeleton-image[b-72nw30wk8a] {
    background: linear-gradient(90deg, var(--background-light) 25%, var(--border-color) 50%, var(--background-light) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-72nw30wk8a 1.5s infinite;
}

.skeleton-text[b-72nw30wk8a] {
    height: 14px;
    background: linear-gradient(90deg, var(--background-light) 25%, var(--border-color) 50%, var(--background-light) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-72nw30wk8a 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-title[b-72nw30wk8a] {
    width: 80%;
    height: 16px;
}

.skeleton-subtitle[b-72nw30wk8a] {
    width: 60%;
}

.skeleton-rating[b-72nw30wk8a] {
    width: 40%;
}

@keyframes shimmer-b-72nw30wk8a {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty State */
.empty-state[b-72nw30wk8a] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon[b-72nw30wk8a] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h3[b-72nw30wk8a] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p[b-72nw30wk8a] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Unauthenticated carousel gate */
.blurred-carousel-wrapper[b-72nw30wk8a] {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.placeholder-carousel[b-72nw30wk8a] {
    display: flex;
    gap: 20px;
    overflow-x: hidden;
    padding: 10px 5px 20px;
    pointer-events: none;
    user-select: none;
    filter: blur(5px);
}

.placeholder-card[b-72nw30wk8a] {
    flex: 0 0 calc(25% - 15px);
    min-width: 280px;
}

.placeholder-card-image[b-72nw30wk8a] {
    width: 100%;
    padding-top: 66.67%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.gradient-1[b-72nw30wk8a] { background: linear-gradient(135deg, #d4d4d4 0%, #b8b8b8 100%); }
.gradient-2[b-72nw30wk8a] { background: linear-gradient(135deg, #c8c8c8 0%, #a8a8a8 100%); }
.gradient-3[b-72nw30wk8a] { background: linear-gradient(135deg, #d8d8d8 0%, #bcbcbc 100%); }
.gradient-4[b-72nw30wk8a] { background: linear-gradient(135deg, #cecece 0%, #b0b0b0 100%); }
.gradient-5[b-72nw30wk8a] { background: linear-gradient(135deg, #d0d0d0 0%, #b4b4b4 100%); }
.gradient-6[b-72nw30wk8a] { background: linear-gradient(135deg, #c4c4c4 0%, #aaaaaa 100%); }

.placeholder-card-info[b-72nw30wk8a] {
    padding: 12px 0;
}

.placeholder-text[b-72nw30wk8a] {
    height: 14px;
    background: var(--border-color);
    border-radius: 4px;
    margin-bottom: 8px;
}

.placeholder-text-title[b-72nw30wk8a] {
    width: 75%;
    height: 16px;
}

.placeholder-text-subtitle[b-72nw30wk8a] {
    width: 55%;
}

.placeholder-text-price[b-72nw30wk8a] {
    width: 40%;
}

.carousel-blur-overlay[b-72nw30wk8a] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(247,247,247,0) 0%, rgba(247,247,247,0.2) 100%);
}

.carousel-gate-card[b-72nw30wk8a] {
    background: var(--surface-raised);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 420px;
    width: 90%;
}

.gate-icon[b-72nw30wk8a] {
    font-size: 2.5rem;
    color: var(--primary-color);
    display: block;
    margin-bottom: 1rem;
}

.gate-heading[b-72nw30wk8a] {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-optical-sizing: auto;
}

.gate-subtext[b-72nw30wk8a] {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.gate-actions[b-72nw30wk8a] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.gate-btn-primary[b-72nw30wk8a] {
    background: var(--action-color);
    border: 1.5px solid var(--action-color);
    color: var(--text-inverse);
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.gate-btn-primary:hover[b-72nw30wk8a] {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: var(--text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.gate-btn-outline[b-72nw30wk8a] {
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.gate-btn-outline:hover[b-72nw30wk8a] {
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .property-card[b-72nw30wk8a] {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (max-width: 991px) {
    .hero-slide[b-72nw30wk8a] {
        padding: 2rem 1.5rem 1.25rem;
        align-items: center;
        text-align: center;
        min-height: 0;
    }

    .hero-subtitle[b-72nw30wk8a] {
        margin-bottom: 2rem;
    }

    .properties-section[b-72nw30wk8a] {
        padding: var(--section-pad-y-sm) 0;
    }

    .property-card[b-72nw30wk8a] {
        flex: 0 0 calc(50% - 10px);
        min-width: 240px;
    }

    .carousel-wrapper[b-72nw30wk8a] {
        padding: 0 55px;
    }

    .carousel-nav[b-72nw30wk8a] {
        width: 36px;
        height: 36px;
        top: calc(50% - 70px);
    }

    .carousel-nav-prev[b-72nw30wk8a] {
        left: 8px;
    }

    .carousel-nav-next[b-72nw30wk8a] {
        right: 8px;
    }
}

@media (max-width: 576px) {
    .properties-section[b-72nw30wk8a] {
        padding: 2.5rem 0;
    }

    .section-header[b-72nw30wk8a] {
        margin-bottom: 1.5rem;
    }

    .section-subtitle[b-72nw30wk8a] {
        font-size: 0.875rem;
    }

    .property-card[b-72nw30wk8a] {
        flex: 0 0 calc(100% - 40px);
        min-width: calc(100% - 40px);
    }

    .carousel-wrapper[b-72nw30wk8a] {
        padding: 0 30px;
    }

    .carousel-nav[b-72nw30wk8a] {
        width: 32px;
        height: 32px;
        top: calc(50% - 60px);
    }

    .carousel-nav-prev[b-72nw30wk8a] {
        left: 5px;
    }

    .carousel-nav-next[b-72nw30wk8a] {
        right: 5px;
    }
}

/* ─── Hero Slide Carousel ──────────────────────────────────── */

/* Thin progress bar at top of card */
.hero-progress-track[b-72nw30wk8a] {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    width: 100%;
}

.hero-progress-fill[b-72nw30wk8a] {
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    animation: heroProgress-b-72nw30wk8a 5s linear forwards;
}

@keyframes heroProgress-b-72nw30wk8a {
    from { width: 0%; }
    to { width: 100%; }
}

/* Slides viewport + track */
.hero-slides-viewport[b-72nw30wk8a] {
    overflow: hidden;
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
}

.hero-slides-track[b-72nw30wk8a] {
    display: flex;
    align-items: stretch;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-slide[b-72nw30wk8a] {
    flex: 0 0 100%;
    width: 100%;
    padding: 2.5rem 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 360px;
    box-sizing: border-box;
}

.btn-hero-community[b-72nw30wk8a] {
    background: var(--surface-raised) !important;
    color: var(--text-primary) !important;
    border-color: var(--surface-raised) !important;
}

.btn-hero-community:hover[b-72nw30wk8a] {
    background: var(--surface-subtle) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Dot indicators */
.hero-dots[b-72nw30wk8a] {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 0.875rem 2.5rem 1.25rem;
    flex-shrink: 0;
}

.hero-dot[b-72nw30wk8a] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

.hero-dot:hover[b-72nw30wk8a] {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

.hero-dot-active[b-72nw30wk8a] {
    width: 22px;
    border-radius: var(--border-radius-pill);
    background: var(--primary-color);
}

/* ─────────────────────────────────────────────────────────────
   "How hoastnow works" section — variants A and B
   ───────────────────────────────────────────────────────────── */
.how-it-works-section[b-72nw30wk8a] {
    position: relative;
    z-index: 2;
    padding: var(--section-pad-y-sm) 0;
    background: var(--surface-white);
}

.how-it-works-header[b-72nw30wk8a] {
    text-align: center;
    margin-bottom: 2.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.how-it-works-heading[b-72nw30wk8a] {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

.how-it-works-subheading[b-72nw30wk8a] {
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    margin: 0;
}

.how-it-works-steps[b-72nw30wk8a] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: nowrap;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem;
}

.how-it-works-step[b-72nw30wk8a] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.25rem;
    text-align: left;
    position: relative;
}

.how-step-number[b-72nw30wk8a] {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    letter-spacing: 0.02em;
}

.how-step-icon-circle[b-72nw30wk8a] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--background-light);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
}

.how-step-title[b-72nw30wk8a] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}

.how-step-subtitle[b-72nw30wk8a] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.how-it-works-connector[b-72nw30wk8a] {
    flex: 0 0 auto;
    align-self: center;
    color: var(--text-secondary);
    font-size: 1.25rem;
    pointer-events: none;
}

.how-it-works-toggle[b-72nw30wk8a] {
    display: inline-flex;
    padding: 0.25rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    margin: 0 auto 2rem;
    gap: 0.25rem;
    max-width: 100%;
    position: relative;
    z-index: 2;
}

.how-it-works-header[b-72nw30wk8a] {
    margin-bottom: 1.5rem;
}

.how-it-works-section .container[b-72nw30wk8a] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.how-it-works-cta[b-72nw30wk8a] {
    margin-top: 2rem;
    text-align: center;
}

.btn-how-cta[b-72nw30wk8a] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    background: var(--action-color);
    color: var(--text-inverse);
    border: 1.5px solid var(--action-color);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-how-cta:hover[b-72nw30wk8a] {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: var(--text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.how-toggle-btn[b-72nw30wk8a] {
    background: transparent;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.how-toggle-btn:hover[b-72nw30wk8a] {
    color: var(--text-primary);
}

.how-toggle-btn.is-active[b-72nw30wk8a] {
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.how-it-works-panel[b-72nw30wk8a] {
    animation: how-panel-fade-b-72nw30wk8a 0.25s ease-out;
}

@keyframes how-panel-fade-b-72nw30wk8a {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive: stack steps and hide connectors on tablet/mobile */
@media (max-width: 991px) {
    .how-it-works-section[b-72nw30wk8a] {
        padding: 2.5rem 0 calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    .how-it-works-steps[b-72nw30wk8a] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .how-it-works-connector[b-72nw30wk8a] {
        display: none;
    }

    .how-it-works-step[b-72nw30wk8a] {
        padding: 1.25rem 1.1rem;
    }
}

@media (max-width: 768px) {
    .how-it-works-section .container[b-72nw30wk8a] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .how-it-works-toggle[b-72nw30wk8a] {
        display: grid;
        grid-template-columns: 1fr;
        width: min(calc(100% - 4rem), 22rem);
        border-radius: var(--border-radius-lg);
        padding: 0.35rem;
        gap: 0.35rem;
        margin: 0 auto 1.75rem;
    }

    .how-toggle-btn[b-72nw30wk8a] {
        flex: none;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        justify-content: center;
        text-align: center;
        white-space: normal;
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
        line-height: 1.25;
    }
}

@media (max-width: 480px) {
    .how-it-works-heading[b-72nw30wk8a] {
        font-size: 1.6rem;
    }

    .how-it-works-subheading[b-72nw30wk8a] {
        font-size: var(--fs-md);
    }
}


/* Mobile landing refinements */
@media (max-width: 576px) {
    .hero-section[b-72nw30wk8a] {
        min-height: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1.75rem;
        align-items: stretch;
    }

    .hero-content[b-72nw30wk8a] {
        justify-content: stretch;
    }

    .hero-card[b-72nw30wk8a] {
        max-width: 100%;
    }

    .hero-title[b-72nw30wk8a] {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .hero-subtitle[b-72nw30wk8a] {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
        max-width: 100%;
    }

    .hero-slide[b-72nw30wk8a] {
        min-height: 0;
        padding: 1.5rem 1rem 0.875rem;
        align-items: center;
        text-align: center;
    }

    .hero-actions[b-72nw30wk8a] {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .btn-hero-primary[b-72nw30wk8a],
    .btn-hero-secondary[b-72nw30wk8a],
    .btn-how-cta[b-72nw30wk8a] {
        width: 100%;
        min-width: auto;
        min-height: 48px;
        white-space: normal;
    }

    .hero-dots[b-72nw30wk8a] {
        padding: 0.75rem 1rem 0.5rem;
    }

    .how-it-works-section[b-72nw30wk8a] {
        padding-top: 2rem;
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    .how-it-works-header[b-72nw30wk8a] {
        margin-bottom: 1.25rem;
        padding: 0 0.25rem;
    }
}

@media (max-width: 430px) {
    .hero-section[b-72nw30wk8a] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: 1.5rem;
    }

    .hero-title[b-72nw30wk8a] {
        font-size: clamp(1.55rem, 8vw, 2rem);
        margin-bottom: 0.875rem;
    }

    .hero-subtitle[b-72nw30wk8a] {
        font-size: var(--fs-md);
        margin-bottom: 1rem;
    }

    .hero-slide[b-72nw30wk8a] {
        padding: 1.25rem 0.875rem 0.75rem;
    }

    .carousel-wrapper[b-72nw30wk8a] {
        padding: 0 24px;
    }

    .property-card[b-72nw30wk8a] {
        flex: 0 0 calc(100% - 24px);
        min-width: calc(100% - 24px);
    }
}

.how-it-works-step .explainer-link[b-72nw30wk8a] {
    display: inline-block;
    margin-left: var(--space-2);
    color: var(--color-info);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.how-it-works-step .explainer-link:hover[b-72nw30wk8a] {
    text-decoration: underline;
}

.trust-strip-section[b-72nw30wk8a] {
    padding: var(--space-8) var(--space-4) 0;
    background: var(--surface-white);
}

/* The Reveal wrappers are now the flex items in the steps row — they carry
   the equal-width sizing the step cards had before being wrapped. */
.how-it-works-steps[b-72nw30wk8a]  .reveal,
.how-it-works-steps[b-72nw30wk8a]  .reveal-static {
    flex: 1 1 0;
    min-width: 0;
}

.how-it-works-steps[b-72nw30wk8a]  .how-it-works-step {
    height: 100%;
}

/* ============================================================
   REDESIGN (landing_redesign_enabled) — modern, deeper scroll
   ============================================================ */

.redesign-differentiators[b-72nw30wk8a] {
    background: var(--surface-white);
    padding: var(--section-pad-y-sm) 0;
}

.diff-grid[b-72nw30wk8a] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    align-items: stretch;
}

.diff-card[b-72nw30wk8a] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.25rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.diff-icon[b-72nw30wk8a] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--background-light);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.9rem;
    flex-shrink: 0;
}

.diff-title[b-72nw30wk8a] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
    line-height: 1.25;
}

.diff-body[b-72nw30wk8a] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
    flex: 1 1 auto;
}

/* Testimonials integration (re-uses .content-section + TestimonialCarousel primitives) */
.testimonials-section[b-72nw30wk8a] {
    background: var(--surface-warm);
}

/* Responsive for differentiators */
@media (max-width: 1100px) {
    .diff-grid[b-72nw30wk8a] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .diff-grid[b-72nw30wk8a] {
        grid-template-columns: 1fr;
    }

    .redesign-differentiators[b-72nw30wk8a] {
        padding: 2rem 0;
    }
}

/* Make sure bottom-cta picks up the primary button styles from hero when used here */
.bottom-cta-section .btn-hero-primary[b-72nw30wk8a],
.bottom-cta-section .btn-hero-secondary[b-72nw30wk8a] {
    min-width: 180px;
}

/* /Components/Pages/HowThisWorksForHoas.razor.rz.scp.css */
.hoa-explainer[b-iv9oda3chm] {
    background: white;
    color: var(--text-primary);
    line-height: var(--lh-normal);
}

.hoa-container[b-iv9oda3chm] {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.hoa-hero[b-iv9oda3chm] {
    background: linear-gradient(180deg, var(--color-info-bg) 0%, white 100%);
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
}

.hoa-eyebrow[b-iv9oda3chm] {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-info);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-3);
}

.hoa-hero-heading[b-iv9oda3chm] {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-4);
}

.hoa-hero-subhead[b-iv9oda3chm] {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto var(--space-4);
}

.hoa-last-updated[b-iv9oda3chm] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.hoa-chooser[b-iv9oda3chm],
.hoa-short-version[b-iv9oda3chm],
.hoa-states[b-iv9oda3chm],
.hoa-questions[b-iv9oda3chm],
.hoa-cta[b-iv9oda3chm] {
    padding: var(--space-12) 0;
}

.hoa-chooser h2[b-iv9oda3chm],
.hoa-short-version h2[b-iv9oda3chm],
.hoa-states h2[b-iv9oda3chm],
.hoa-questions h2[b-iv9oda3chm],
.hoa-cta h2[b-iv9oda3chm] {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-6);
}

.chooser-grid[b-iv9oda3chm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.chooser-card[b-iv9oda3chm] {
    display: block;
    padding: var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    background: white;
}

.chooser-card:hover[b-iv9oda3chm] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.chooser-card h3[b-iv9oda3chm] {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
}

.chooser-card p[b-iv9oda3chm] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: 0;
}

.short-grid[b-iv9oda3chm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.short-col[b-iv9oda3chm] {
    padding: var(--space-4);
    border-left: 3px solid var(--color-info);
    background: var(--background-light);
    border-radius: var(--radius-md);
}

.short-col strong[b-iv9oda3chm] {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-info);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.short-col p[b-iv9oda3chm] {
    margin: 0;
    font-size: var(--fs-sm);
}

.hoa-chapter[b-iv9oda3chm] {
    padding: var(--space-12) 0;
    border-top: 1px solid var(--border-color);
    /* Reserve space above the section heading when scrolled to via #anchor,
       so the heading clears the 71px fixed top nav. */
    scroll-margin-top: 90px;
}

.hoa-chapter h2[b-iv9oda3chm] {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-6);
}

.hoa-chapter h3[b-iv9oda3chm] {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.hoa-chapter p[b-iv9oda3chm] {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-4);
}

.chapter-disclaimer[b-iv9oda3chm] {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.chapter-disclaimer strong[b-iv9oda3chm] {
    color: var(--color-info);
    margin-right: var(--space-1);
}

.hoa-states details[b-iv9oda3chm] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: white;
}

.hoa-states summary[b-iv9oda3chm] {
    font-weight: var(--fw-semibold);
    cursor: pointer;
    font-size: var(--fs-md);
}

.hoa-states details p[b-iv9oda3chm] {
    margin-top: var(--space-3);
    margin-bottom: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

.questions-list[b-iv9oda3chm] {
    padding-left: var(--space-6);
}

.questions-list li[b-iv9oda3chm] {
    margin-bottom: var(--space-3);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
}

.cta-row[b-iv9oda3chm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hoa-footer[b-iv9oda3chm] {
    background: var(--background-light);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border-color);
}

.master-disclaimer[b-iv9oda3chm] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.last-updated-footer[b-iv9oda3chm] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .chooser-grid[b-iv9oda3chm],
    .short-grid[b-iv9oda3chm] {
        grid-template-columns: 1fr;
    }

    .hoa-hero[b-iv9oda3chm] {
        padding: var(--space-10) 0 var(--space-8);
    }

    .hoa-hero-heading[b-iv9oda3chm] {
        font-size: var(--fs-2xl);
    }

    .cta-row .btn[b-iv9oda3chm] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-card[b-do5nt4o9dc] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
}

.external-auth-divider[b-do5nt4o9dc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.external-auth-divider[b-do5nt4o9dc]::before,
.external-auth-divider[b-do5nt4o9dc]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.external-auth-buttons[b-do5nt4o9dc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.external-auth-form[b-do5nt4o9dc] {
    margin: 0;
}

.btn-external-auth[b-do5nt4o9dc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.625rem 0.9rem;
    background-color: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-external-auth:hover[b-do5nt4o9dc],
.btn-external-auth:focus[b-do5nt4o9dc] {
    background-color: var(--background-light);
    border-color: var(--text-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-external-auth i[b-do5nt4o9dc] {
    font-size: 1.15rem;
    line-height: 1;
}
/* /Components/Pages/ManageBookings.razor.rz.scp.css */
.modal-content[b-ahr0il0dj8] {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
}

.page-title[b-ahr0il0dj8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* ── Skeleton ─────────────────────────────────────────────── */
.managebookings-skeleton[b-ahr0il0dj8] {
    padding: var(--space-4) var(--space-5);
}

/* ── Status filter ────────────────────────────────────────── */
.status-filter-btn[b-ahr0il0dj8] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.status-filter-btn:hover[b-ahr0il0dj8] {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.status-filter-btn.active[b-ahr0il0dj8] {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-inverse);
}

.status-count[b-ahr0il0dj8] {
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0,0,0,0.12);
    border-radius: 6px;
    padding: 0.05rem 0.4rem;
}

.status-filter-btn.active .status-count[b-ahr0il0dj8] {
    background: rgba(255,255,255,0.25);
}

/* ── Compact overrides for bookings table (app-table handles base styles) ── */
.manage-bookings-table thead th[b-ahr0il0dj8] {
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
}

.manage-bookings-table tbody td[b-ahr0il0dj8] {
    padding: 0.4rem 0.625rem;
    font-size: 0.875rem;
}

.row-clickable[b-ahr0il0dj8] {
    cursor: pointer;
    transition: background 0.1s ease;
}

.row-selected td[b-ahr0il0dj8] {
    background: var(--color-info-bg) !important;
}

/* ── Drawer detail layout ─────────────────────────────────── */
.bk-detail-section[b-ahr0il0dj8] {
    margin-bottom: 0.875rem;
}

.bk-detail-row[b-ahr0il0dj8] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.bk-detail-row .bk-detail-section[b-ahr0il0dj8] {
    margin-bottom: 0;
    flex: 1;
}

.bk-detail-label[b-ahr0il0dj8] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.bk-detail-value[b-ahr0il0dj8] {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.bk-detail-sub[b-ahr0il0dj8] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

/* ── Payment Processing Modal ────────────────────────────────────────── */

.payment-modal-overlay[b-ahr0il0dj8] {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
}

.payment-modal-content[b-ahr0il0dj8] {
    border: none;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
}

/* Orbital spinner */
.payment-orbital[b-ahr0il0dj8] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.orbital-ring[b-ahr0il0dj8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}

.ring-1[b-ahr0il0dj8] {
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-color);
    animation: orbitCw-b-ahr0il0dj8 1.1s linear infinite;
}

.ring-2[b-ahr0il0dj8] {
    inset: 12px;
    border-bottom-color: var(--text-secondary);
    border-left-color: var(--text-secondary);
    animation: orbitCcw-b-ahr0il0dj8 0.75s linear infinite;
}

.orbital-core[b-ahr0il0dj8] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-secondary);
}

@keyframes orbitCw-b-ahr0il0dj8 {
    to { transform: rotate(360deg); }
}

@keyframes orbitCcw-b-ahr0il0dj8 {
    to { transform: rotate(-360deg); }
}

/* SVG animated checkmark */
.payment-checkmark[b-ahr0il0dj8] {
    width: 72px;
    height: 72px;
}

.checkmark-circle[b-ahr0il0dj8] {
    stroke: var(--color-success);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: drawStroke-b-ahr0il0dj8 0.55s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-path[b-ahr0il0dj8] {
    stroke: var(--color-success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: drawStroke-b-ahr0il0dj8 0.38s 0.45s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes drawStroke-b-ahr0il0dj8 {
    to { stroke-dashoffset: 0; }
}

/* Result icon circles (declined / error) */
.payment-result-circle[b-ahr0il0dj8] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.75rem;
    animation: popIn-b-ahr0il0dj8 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.declined-circle[b-ahr0il0dj8] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.error-circle[b-ahr0il0dj8] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

@keyframes popIn-b-ahr0il0dj8 {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@media (max-width: 767px) {
    /* Status filter buttons should wrap and fill on mobile */
    .status-filter-btn[b-ahr0il0dj8] {
        font-size: 0.8rem;
        padding: 0.3rem 0.625rem;
        flex: 1 1 auto;
        justify-content: center;
    }

    .manage-bookings-table thead[b-ahr0il0dj8] {
        display: none;
    }

    .manage-bookings-table tbody tr[b-ahr0il0dj8] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-raised);
        box-shadow: var(--shadow-sm);
    }

    .manage-bookings-table tbody td[b-ahr0il0dj8] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .manage-bookings-table tbody td:last-child[b-ahr0il0dj8] {
        border-bottom: none;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .manage-bookings-table tbody td[b-ahr0il0dj8]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .manage-bookings-table tbody td[data-label=""][b-ahr0il0dj8]::before {
        display: none;
        min-width: 0;
    }
}
/* /Components/Pages/ManagementCompaniesHome.razor.rz.scp.css */
.mc-page[b-8o7y2x7of3] {
    background: var(--background-light);
}

/* Hero photo for this page — layout/typography live in wwwroot/css/hero.css */
.hero-section[b-8o7y2x7of3] {
    --hero-image: url('/images/hero/pmc-landing-hero-image.jpg');
}

/* ── Section scaffolding ─────────────────────────────────── */
.content-section[b-8o7y2x7of3] {
    padding: var(--section-pad-y-sm) 0;
    background: var(--surface-warm);
}

.content-section:nth-of-type(even)[b-8o7y2x7of3] {
    background: var(--surface-white);
}

.section-header .section-heading[b-8o7y2x7of3] {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
    margin-bottom: 1rem;
}

.section-header .section-lead[b-8o7y2x7of3] {
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Value props ─────────────────────────────────────────── */
.value-props-section[b-8o7y2x7of3] {
    max-width: 1200px;
    margin: 0 auto;
}

.value-props-grid[b-8o7y2x7of3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.value-prop-card[b-8o7y2x7of3] {
    background: var(--surface-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.value-prop-icon[b-8o7y2x7of3] {
    width: 64px;
    height: 64px;
    /* Solid fill to match .step-number and the rest of the app (no gradient circles). */
    background: var(--action-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    color: var(--text-inverse);
}

.value-prop-title[b-8o7y2x7of3] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.value-prop-body[b-8o7y2x7of3] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.65;
    margin: 0;
}

/* ── How It Works ─────────────────────────────────────────── */
.info-section[b-8o7y2x7of3] {
    max-width: 1200px;
    margin: 0 auto;
}

.info-content[b-8o7y2x7of3] {
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
}

.info-heading[b-8o7y2x7of3] {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

.steps-grid[b-8o7y2x7of3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.step-card[b-8o7y2x7of3] {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-radius: var(--border-radius);
    background: var(--surface-warm);
}

.step-number[b-8o7y2x7of3] {
    width: 56px;
    height: 56px;
    background: var(--action-color);
    color: var(--text-inverse);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin: 0 auto 1.25rem;
    font-optical-sizing: auto;
}

.step-title[b-8o7y2x7of3] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.step-description[b-8o7y2x7of3] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin: 0;
}

/* ── What You Get ─────────────────────────────────────────── */
.showcase-section[b-8o7y2x7of3] {
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    max-width: 1200px;
    margin: 0 auto;
}

.showcase-content[b-8o7y2x7of3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.showcase-heading[b-8o7y2x7of3] {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

.showcase-list[b-8o7y2x7of3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.showcase-list li[b-8o7y2x7of3] {
    font-size: var(--fs-lg);
    color: var(--text-primary);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.showcase-list li:last-child[b-8o7y2x7of3] {
    border-bottom: none;
}

.showcase-list li i[b-8o7y2x7of3] {
    color: var(--text-primary);
}

.showcase-visual[b-8o7y2x7of3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.visual-box[b-8o7y2x7of3] {
    background: linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-charcoal) 100%);
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-lg);
    text-align: center;
    color: var(--text-inverse);
    transition: transform 0.2s ease;
}

.visual-box:hover[b-8o7y2x7of3] {
    transform: scale(1.05);
}

.visual-box.box-1[b-8o7y2x7of3] {
    grid-column: 1 / -1;
}

.box-icon[b-8o7y2x7of3] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.box-label[b-8o7y2x7of3] {
    font-size: var(--fs-md);
    font-weight: 600;
}

/* ── Who This Is For ─────────────────────────────────────── */
.who-section[b-8o7y2x7of3] {
    max-width: 1200px;
    margin: 0 auto;
}

.who-grid[b-8o7y2x7of3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.who-card[b-8o7y2x7of3] {
    background: var(--surface-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.who-icon[b-8o7y2x7of3] {
    font-size: 2.5rem;
    color: var(--action-color);
    margin-bottom: 1rem;
}

.who-title[b-8o7y2x7of3] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.who-body[b-8o7y2x7of3] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.65;
    margin: 0;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-section[b-8o7y2x7of3] {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-grid[b-8o7y2x7of3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.faq-item[b-8o7y2x7of3] {
    background: var(--surface-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
}

.faq-question[b-8o7y2x7of3] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.faq-answer[b-8o7y2x7of3] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1199px) {
    .who-grid[b-8o7y2x7of3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .hero-section[b-8o7y2x7of3] {
        justify-content: flex-start;
    }

    .hero-card[b-8o7y2x7of3] {
        padding: 0;
    }

    .content-section[b-8o7y2x7of3] {
        padding: 2.5rem 0;
    }

    .value-props-grid[b-8o7y2x7of3] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .steps-grid[b-8o7y2x7of3] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .showcase-section[b-8o7y2x7of3] {
        padding: 2rem;
    }

    .showcase-content[b-8o7y2x7of3] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .info-content[b-8o7y2x7of3] {
        padding: 2rem;
    }

    .who-grid[b-8o7y2x7of3] {
        grid-template-columns: repeat(2, 1fr);
    }

    .faq-grid[b-8o7y2x7of3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .hero-section[b-8o7y2x7of3] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-title[b-8o7y2x7of3] {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .hero-benefits[b-8o7y2x7of3] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-actions[b-8o7y2x7of3] {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary[b-8o7y2x7of3], .btn-secondary[b-8o7y2x7of3] {
        width: 100%;
        min-width: auto;
    }

    .steps-grid[b-8o7y2x7of3] {
        grid-template-columns: 1fr;
    }

    .who-grid[b-8o7y2x7of3] {
        grid-template-columns: 1fr;
    }

    .showcase-section[b-8o7y2x7of3] {
        padding: 1.5rem;
    }

    .info-content[b-8o7y2x7of3] {
        padding: 1.25rem;
    }

    .value-prop-card[b-8o7y2x7of3] {
        padding: 1.5rem;
    }
}

.steps-grid[b-8o7y2x7of3]  .step-card {
    height: 100%;
}

.trust-strip-section[b-8o7y2x7of3] {
    padding: var(--space-8) var(--space-4) 0;
    background: var(--surface-white);
}

.testimonials-section[b-8o7y2x7of3] {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}
/* /Components/Pages/ManagementCompanyTerms.razor.rz.scp.css */
h1[b-xndkczm2te] {
    color: var(--text-primary);
    font-weight: 700;
}

h2[b-xndkczm2te] {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 2rem;
}

section p[b-xndkczm2te], section li[b-xndkczm2te] {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.alert[b-xndkczm2te] {
    border-radius: 8px;
}

.card[b-xndkczm2te] {
    border: none;
    border-radius: 12px;
}

.bg-light[b-xndkczm2te] {
    background-color: var(--background-light) !important;
}

/* Draft banner — amber tone to signal pre-production status */
.terms-draft-banner[b-xndkczm2te] {
    background-color: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    color: var(--text-primary);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

@media print {
    .btn[b-xndkczm2te] {
        display: none;
    }
    .terms-draft-banner[b-xndkczm2te] {
        display: none;
    }
}
/* /Components/Pages/McAcceptInvite.razor.rz.scp.css */
.mc-accept[b-7x0lvf3is6] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
}

.mc-accept-skeleton[b-7x0lvf3is6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.accept-list[b-7x0lvf3is6] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.accept-row[b-7x0lvf3is6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    margin: 0;
}

.accept-row:last-child[b-7x0lvf3is6] {
    border-bottom: none;
}

.accept-row-name[b-7x0lvf3is6] {
    font-weight: 600;
    color: var(--text-primary);
}

.accept-row-badge[b-7x0lvf3is6] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-success);
    background: var(--color-success-bg);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

.accept-actions[b-7x0lvf3is6] {
    display: flex;
    gap: 0.75rem;
}
/* /Components/Pages/McInvite.razor.rz.scp.css */
.mc-invite[b-i6clyuiubo] {
    max-width: 880px;
    margin: 0 auto;
    padding: 1.5rem;
}

.mc-invite-skeleton[b-i6clyuiubo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.invite-card[b-i6clyuiubo] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
    background: white;
}

.invite-label[b-i6clyuiubo] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
}

.invite-link-row[b-i6clyuiubo] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.invite-qr[b-i6clyuiubo] {
    display: block;
    width: 180px;
    height: 180px;
    margin: 1.5rem auto 0.5rem;
}

.invite-qr-caption[b-i6clyuiubo] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.invite-owners h2[b-i6clyuiubo] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
/* /Components/Pages/McPortfolio.razor.rz.scp.css */
.mc-portfolio[b-ws0cdwyj4h] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Summary tiles (KpiTile grid) ──────────────────────────────────────── */

.portfolio-tiles[b-ws0cdwyj4h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

/* ── Loading skeleton ───────────────────────────────────────────────────── */

.mc-portfolio-skeleton[b-ws0cdwyj4h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.mc-portfolio-tile-grid[b-ws0cdwyj4h] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.mc-portfolio-list-skeleton[b-ws0cdwyj4h] {
    padding: var(--space-4) var(--space-5);
}

/* ── Section header (shared by communities + declined) ─────────────────── */

.section-header[b-ws0cdwyj4h] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.section-header h2[b-ws0cdwyj4h] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-count[b-ws0cdwyj4h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: var(--border-radius-pill);
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.section-count--warning[b-ws0cdwyj4h] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* ── Community list container ──────────────────────────────────────────── */

.community-list[b-ws0cdwyj4h] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Community row ─────────────────────────────────────────────────────── */

.community-row[b-ws0cdwyj4h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.community-row:hover[b-ws0cdwyj4h] {
    box-shadow: var(--shadow-md);
    border-color: var(--text-secondary);
}

.community-row--declined[b-ws0cdwyj4h] {
    border-left: 3px solid var(--color-warning);
}

/* Identity (avatar + name) */

.community-row-identity[b-ws0cdwyj4h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 0;
    min-width: 0;
}

.community-avatar[b-ws0cdwyj4h] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--border-radius);
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 1rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.community-row:hover .community-avatar[b-ws0cdwyj4h] {
    background: var(--background-light);
    color: var(--primary-color);
}

.community-avatar--declined[b-ws0cdwyj4h] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.community-row:hover .community-avatar--declined[b-ws0cdwyj4h] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.community-name[b-ws0cdwyj4h] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Declined meta (name + owner stacked) */

.community-declined-meta[b-ws0cdwyj4h] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.community-declined-meta .community-name[b-ws0cdwyj4h] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-owner-name[b-ws0cdwyj4h] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stat chips */

.community-row-stats[b-ws0cdwyj4h] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.stat-chip[b-ws0cdwyj4h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.3125rem 0.625rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 5.5rem;
    gap: 0.125rem;
}

.stat-label[b-ws0cdwyj4h] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.stat-value[b-ws0cdwyj4h] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Action button column */

.community-row-action[b-ws0cdwyj4h] {
    flex-shrink: 0;
    margin-left: auto;
}

.community-open-btn[b-ws0cdwyj4h] {
    white-space: nowrap;
    border-radius: 8px;
    padding: 0.375rem 0.875rem;
    font-weight: 600;
    font-size: 0.8125rem;
    border-color: var(--border-color);
    color: var(--text-secondary);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.community-open-btn:hover[b-ws0cdwyj4h],
.community-open-btn:focus-visible[b-ws0cdwyj4h] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--background-light);
    box-shadow: none;
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.empty-state[b-ws0cdwyj4h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--surface-subtle);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
}

.empty-state-icon[b-ws0cdwyj4h] {
    font-size: 2.5rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.empty-state-msg[b-ws0cdwyj4h] {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

/* ── Declined section ───────────────────────────────────────────────────── */

.portfolio-declined[b-ws0cdwyj4h] {
    margin-top: 2rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .portfolio-tiles[b-ws0cdwyj4h],
    .mc-portfolio-tile-grid[b-ws0cdwyj4h] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mc-portfolio[b-ws0cdwyj4h] {
        padding: 1rem;
    }

    .community-row[b-ws0cdwyj4h] {
        flex-wrap: wrap;
        padding: 0.75rem 0.875rem;
    }

    .community-row-stats[b-ws0cdwyj4h] {
        flex: 1 1 100%;
        order: 3;
        justify-content: flex-start;
    }

    .community-row-action[b-ws0cdwyj4h] {
        margin-left: 0;
        order: 2;
    }

    .stat-chip[b-ws0cdwyj4h] {
        flex: 1 1 0;
        align-items: flex-start;
        min-width: 0;
    }
}

@media (max-width: 575px) {
    .portfolio-tiles[b-ws0cdwyj4h],
    .mc-portfolio-tile-grid[b-ws0cdwyj4h] {
        grid-template-columns: 1fr;
    }

    .community-row-stats[b-ws0cdwyj4h] {
        gap: 0.5rem;
    }
}
/* /Components/Pages/Messaging/AdminConversation.razor.rz.scp.css */
/* Skeleton in the admin thread main pane */
.admin-thread-skeleton[b-4f4oe8f5dv] {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.admin-thread-layout[b-4f4oe8f5dv] {
    display: flex;
    height: calc(100vh - 64px);
    background: var(--surface-raised);
}

.admin-thread-sidebar[b-4f4oe8f5dv] {
    width: 360px;
    min-width: 260px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.inbox-header[b-4f4oe8f5dv] {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-raised);
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
}

.admin-filter-tabs[b-4f4oe8f5dv] {
    display: flex;
    gap: 0.4rem;
}

.filter-tab[b-4f4oe8f5dv] {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--surface-raised);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.filter-tab:hover[b-4f4oe8f5dv] {
    background: var(--surface-subtle);
}

.filter-tab-active[b-4f4oe8f5dv] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
    font-weight: 600;
}

.admin-thread-main[b-4f4oe8f5dv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-thread-header[b-4f4oe8f5dv] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-raised);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-thread-header-left[b-4f4oe8f5dv] {
    min-width: 0;
}

.admin-thread-header-right[b-4f4oe8f5dv] {
    flex-shrink: 0;
}

.admin-thread-messages[b-4f4oe8f5dv] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--surface-subtle);
}

.admin-msg-row[b-4f4oe8f5dv] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.msg-actions[b-4f4oe8f5dv] {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    padding-top: 0.5rem;
}

.admin-msg-row:hover .msg-actions[b-4f4oe8f5dv] {
    opacity: 1;
}

.admin-thread-compose[b-4f4oe8f5dv] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-raised);
    flex-shrink: 0;
}

.compose-row[b-4f4oe8f5dv] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.compose-input[b-4f4oe8f5dv] {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    max-height: 120px;
    overflow-y: auto;
}

.compose-input:focus[b-4f4oe8f5dv] {
    border-color: var(--primary-color);
}

.compose-send[b-4f4oe8f5dv] {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-color: var(--primary-color);
    flex-shrink: 0;
}

.compose-send:hover:not(:disabled)[b-4f4oe8f5dv] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

@media (max-width: 768px) {
    .admin-thread-layout[b-4f4oe8f5dv] {
        height: calc(100vh - 64px - 60px - env(safe-area-inset-bottom, 0px));
    }

    .admin-thread-sidebar[b-4f4oe8f5dv] {
        display: none;
    }
}
/* /Components/Pages/Messaging/AdminInbox.razor.rz.scp.css */
/* Skeleton inside conversation list pane */
.admin-inbox-skeleton[b-mop4x0ohtv] {
    padding: var(--space-4) var(--space-5);
}

.admin-inbox-layout[b-mop4x0ohtv] {
    display: flex;
    height: calc(100vh - 64px);
    background: var(--surface-raised);
}

.admin-inbox-sidebar[b-mop4x0ohtv] {
    width: 360px;
    min-width: 280px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbox-header[b-mop4x0ohtv] {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-raised);
    flex-shrink: 0;
}

.admin-filter-tabs[b-mop4x0ohtv] {
    display: flex;
    gap: 0.4rem;
}

.filter-tab[b-mop4x0ohtv] {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--surface-raised);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.filter-tab:hover[b-mop4x0ohtv] {
    background: var(--surface-subtle);
}

.filter-tab-active[b-mop4x0ohtv] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
    font-weight: 600;
}

.empty-inbox[b-mop4x0ohtv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--border-color);
    font-size: 2.5rem;
    padding: 2rem;
    text-align: center;
}

.empty-inbox p[b-mop4x0ohtv] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.75rem;
}

.inbox-welcome[b-mop4x0ohtv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
    text-align: center;
}

.admin-welcome-icon[b-mop4x0ohtv] {
    font-size: 3rem;
    color: var(--border-color);
}

@media (max-width: 768px) {
    .admin-inbox-layout[b-mop4x0ohtv] {
        height: calc(100vh - 64px - 60px - env(safe-area-inset-bottom, 0px));
    }

    .admin-inbox-sidebar[b-mop4x0ohtv] {
        width: 100%;
        border-right: none;
    }

    .inbox-welcome[b-mop4x0ohtv] {
        display: none;
    }
}
/* /Components/Pages/Messaging/ConversationThread.razor.rz.scp.css */
/* Skeleton in the thread main pane */
.thread-skeleton[b-2tlyhizly9] {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.thread-layout[b-2tlyhizly9] {
    display: flex;
    height: calc(100vh - 64px);
    background: var(--surface-raised);
}

.thread-sidebar[b-2tlyhizly9] {
    width: 360px;
    min-width: 260px;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-shrink: 0;
}

.inbox-header[b-2tlyhizly9] {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-raised);
    position: sticky;
    top: 0;
    z-index: 1;
}

.thread-main[b-2tlyhizly9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.thread-header[b-2tlyhizly9] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-raised);
    flex-shrink: 0;
}

.thread-messages[b-2tlyhizly9] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--surface-subtle);
}

.thread-compose[b-2tlyhizly9] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-raised);
    flex-shrink: 0;
}

.compose-row[b-2tlyhizly9] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.compose-input[b-2tlyhizly9] {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    max-height: 120px;
    overflow-y: auto;
}

.compose-input:focus[b-2tlyhizly9] {
    border-color: var(--primary-color);
}

.compose-send[b-2tlyhizly9] {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-color: var(--primary-color);
    flex-shrink: 0;
}

.compose-send:hover:not(:disabled)[b-2tlyhizly9] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

@media (max-width: 768px) {
    .thread-layout[b-2tlyhizly9] {
        height: calc(100vh - 64px - 60px - env(safe-area-inset-bottom, 0px));
    }

    .thread-sidebar[b-2tlyhizly9] {
        display: none;
    }
}
/* /Components/Pages/Messaging/Inbox.razor.rz.scp.css */
/* Skeleton inside conversation list pane */
.inbox-skeleton[b-q4g4ahxmyh] {
    padding: var(--space-4) var(--space-5);
}

.inbox-layout[b-q4g4ahxmyh] {
    display: flex;
    height: calc(100vh - 64px);
    background: var(--surface-raised);
}

.inbox-sidebar[b-q4g4ahxmyh] {
    width: 360px;
    min-width: 280px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbox-header[b-q4g4ahxmyh] {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-raised);
    flex-shrink: 0;
}

.inbox-welcome-icon[b-q4g4ahxmyh] {
    font-size: 3rem;
    color: #ddd;
}

.inbox-welcome[b-q4g4ahxmyh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
    text-align: center;
}

@media (max-width: 768px) {
    .inbox-layout[b-q4g4ahxmyh] {
        height: calc(100vh - 64px - 60px - env(safe-area-inset-bottom, 0px));
    }

    .inbox-sidebar[b-q4g4ahxmyh] {
        width: 100%;
        border-right: none;
    }

    .inbox-welcome[b-q4g4ahxmyh] {
        display: none;
    }
}
/* /Components/Pages/MyBookings.razor.rz.scp.css */
.modal-content[b-f1yhhoa5qy] {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
}

/* Cancel dialog backdrop — tokenized so dark mode picks up the right overlay */
.cancel-modal-backdrop[b-f1yhhoa5qy] {
    background-color: var(--overlay-strong);
}

/* ── MyBookings table density overrides (tighter than default app-table) ─── */
/* app-table provides base styles; these scoped rules only apply within this
   component to keep the booking table compact. */
.mybookings-table thead th[b-f1yhhoa5qy] {
    padding: 0.5rem 0.9rem;
    white-space: nowrap;
}

.mybookings-table tbody td[b-f1yhhoa5qy] {
    padding: 0.55rem 0.9rem;
    font-size: var(--fs-base);
}

.row-clickable[b-f1yhhoa5qy] {
    cursor: pointer;
    transition: background 0.1s ease;
}

.row-clickable:hover td[b-f1yhhoa5qy] {
    background: var(--background-light);
}

.row-selected td[b-f1yhhoa5qy] {
    background: rgba(255, 56, 92, 0.06) !important;
}

/* ── Drawer detail layout ─────────────────────────────────── */
.bkd-section[b-f1yhhoa5qy] {
    margin-bottom: 0.875rem;
}

.bkd-row[b-f1yhhoa5qy] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.bkd-row .bkd-section[b-f1yhhoa5qy] {
    margin-bottom: 0;
    flex: 1;
}

.bkd-label[b-f1yhhoa5qy] {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.bkd-value[b-f1yhhoa5qy] {
    font-size: var(--fs-md);
    color: var(--text-primary);
    font-weight: 500;
}

.bkd-sub[b-f1yhhoa5qy] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

/* ── Price breakdown ──────────────────────────────────────── */
.bkd-price-row[b-f1yhhoa5qy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--border-subtle);
}

.bkd-price-total[b-f1yhhoa5qy] {
    border-bottom: none;
    padding-top: 0.5rem;
    font-size: var(--fs-md);
}

/* ── Status timeline ─────────────────────────────────────── */
.bkd-timeline[b-f1yhhoa5qy] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bkd-timeline-item[b-f1yhhoa5qy] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border-subtle);
}

.bkd-timeline-item:last-child[b-f1yhhoa5qy] {
    border-bottom: none;
}

.bkd-timeline-icon[b-f1yhhoa5qy] {
    font-size: var(--fs-md);
    line-height: 1.4;
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}

.bkd-timeline-body[b-f1yhhoa5qy] {
    flex: 1;
    min-width: 0;
}

.bkd-timeline-title[b-f1yhhoa5qy] {
    font-size: var(--fs-base);
    color: var(--text-primary);
    font-weight: 600;
}

.bkd-timeline-meta[b-f1yhhoa5qy] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.bkd-timeline-reason[b-f1yhhoa5qy] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: var(--color-danger-bg);
    border-left: 3px solid var(--color-danger);
    border-radius: 4px;
}

.bkd-timeline-hint[b-f1yhhoa5qy] {
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.35rem 0 0;
    margin: 0;
}

/* ── Payment section ─────────────────────────────────────── */
.bkd-payment-status[b-f1yhhoa5qy] {
    font-size: var(--fs-base);
    font-weight: 500;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.bkd-payment-success[b-f1yhhoa5qy] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.bkd-payment-info[b-f1yhhoa5qy] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.bkd-payment-warning[b-f1yhhoa5qy] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.bkd-payment-danger[b-f1yhhoa5qy] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.bkd-payment-muted[b-f1yhhoa5qy] {
    background: var(--background-light);
    color: var(--text-secondary);
}

.bkd-payment-reference[b-f1yhhoa5qy] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

@media (max-width: 767px) {
    .mybookings-table thead[b-f1yhhoa5qy] {
        display: none;
    }

    .mybookings-table tbody tr[b-f1yhhoa5qy] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-raised);
        box-shadow: var(--shadow-sm);
    }

    .mybookings-table tbody td[b-f1yhhoa5qy] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .mybookings-table tbody td:last-child[b-f1yhhoa5qy] {
        border-bottom: none;
    }

    .mybookings-table tbody td[b-f1yhhoa5qy]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .mybookings-table tbody td[data-label=""][b-f1yhhoa5qy]::before {
        display: none;
    }
}

/* ── Loading skeleton ─────────────────────────────────────── */
/* SkeletonBlock renders a single .skeleton-group wrapper; flex/gap on this
   container would be inert (one child). Keep only the padding. */
.mybookings-skeleton[b-f1yhhoa5qy] {
    padding: var(--space-4) var(--space-5);
}

/* ── Row entrance ─────────────────────────────────────────── */
/* 40ms step is deliberately tighter than the 60ms card-grid stagger because
   table rows are denser. Animation is opacity-only (no transform) to avoid
   a WebKit defect where border-collapse tables drop/flicker cell borders
   when a transform is animated on <tr> elements. */
.mybookings-table tbody tr[b-f1yhhoa5qy] {
    animation: row-enter-b-f1yhhoa5qy var(--motion-base) var(--ease-standard) both;
}

.mybookings-table tbody tr:nth-child(2)[b-f1yhhoa5qy] { animation-delay: 40ms; }
.mybookings-table tbody tr:nth-child(3)[b-f1yhhoa5qy] { animation-delay: 80ms; }
.mybookings-table tbody tr:nth-child(4)[b-f1yhhoa5qy] { animation-delay: 120ms; }
.mybookings-table tbody tr:nth-child(5)[b-f1yhhoa5qy] { animation-delay: 160ms; }
.mybookings-table tbody tr:nth-child(n+6)[b-f1yhhoa5qy] { animation-delay: 200ms; }

@keyframes row-enter-b-f1yhhoa5qy {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Pages/MyProperties.razor.rz.scp.css */
/* ── Skeleton grid ────────────────────────────────────────── */
.myproperties-skeleton-grid .col-md-6[b-8mcskxwlcu],
.myproperties-skeleton-grid .col-lg-4[b-8mcskxwlcu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.record-count-badge[b-8mcskxwlcu] {
    flex-shrink: 0;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* ── Section labels ──────────────────────────────────────── */
.settings-label[b-8mcskxwlcu] {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
}

/* ── Community cards ────────────────────────────────���────── */
.property-cover-photo[b-8mcskxwlcu] {
    height: 130px;
    object-fit: cover;
}

.property-cover-placeholder[b-8mcskxwlcu] {
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background-light);
    color: var(--text-secondary);
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.property-cover-placeholder i[b-8mcskxwlcu] {
    font-size: 1.75rem;
}

.property-cover-placeholder span[b-8mcskxwlcu] {
    font-size: 0.8125rem;
}

.description-clamped[b-8mcskxwlcu] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.community-actions[b-8mcskxwlcu] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.space-location[b-8mcskxwlcu] {
    font-size: 0.75rem;
}

/* ── Desktop compact overrides ────────────────────────────── */
@media (min-width: 992px) {
    .card-header[b-8mcskxwlcu] {
        padding: 0.6rem 0.875rem;
    }

    .card-body[b-8mcskxwlcu] {
        padding: 0.875rem;
    }

    .card-body .mb-3[b-8mcskxwlcu] {
        margin-bottom: 0.625rem !important;
    }

    .card-body .border-top.pt-3[b-8mcskxwlcu] {
        padding-top: 0.625rem !important;
    }

    .card-body .border-top.pt-3.mb-3[b-8mcskxwlcu] {
        margin-bottom: 0.625rem !important;
    }
}

/* ── PMC quick-filter pills ──────────────────────────────── */
.mc-filter[b-8mcskxwlcu] {
    display: inline-flex;
    gap: .25rem;
    background: var(--background-light);
    padding: .25rem;
    border-radius: var(--border-radius);
}

.mc-filter-pill[b-8mcskxwlcu] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: .8125rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: calc(var(--border-radius) - 4px);
    cursor: pointer;
    transition: all .2s ease;
}

.mc-filter-pill:hover[b-8mcskxwlcu] {
    color: var(--text-primary);
}

.mc-filter-pill.active[b-8mcskxwlcu] {
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* ── PMC group headings ───────────────────────────────────── */
.mc-group-heading[b-8mcskxwlcu] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
    font-weight: 700;
    margin: .5rem 0 .75rem;
}

/* ── Management badges ───────────────────────────────────── */
.mc-badge-managed[b-8mcskxwlcu] {
    background: var(--color-info-bg);
    color: var(--color-info);
    font-weight: 600;
}

.mc-badge-self[b-8mcskxwlcu] {
    background: var(--background-light);
    color: var(--text-secondary);
    font-weight: 600;
}

/* ── Pending-offer inline alert ──────────────────────────── */
.mc-offer[b-8mcskxwlcu] {
    border: 1px solid var(--color-info);
    background: var(--color-info-bg);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .property-cover-photo[b-8mcskxwlcu],
    .property-cover-placeholder[b-8mcskxwlcu] {
        height: 200px;
    }

    .card-header .d-flex[b-8mcskxwlcu] {
        gap: 0.5rem;
    }

    .card-header .badge[b-8mcskxwlcu] {
        flex-shrink: 0;
        align-self: flex-start;
        margin-top: 2px;
    }

    /* Bigger touch targets for action buttons on mobile */
    .card-body .btn-sm[b-8mcskxwlcu] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Spaces list — give space items a bit more room */
    .list-group-item[b-8mcskxwlcu] {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Space price + manage button stack nicely */
    .list-group-item .d-flex[b-8mcskxwlcu] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Components/Pages/PlatformBackoffice.razor.rz.scp.css */
/* ── Desktop in-page tab strip (≥768px) ───────────────────────────────── */
.desktop-section-tabs[b-1gof589baw] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--surface-warm);
    border-bottom: 1px solid var(--border-color);
    padding: 0 0.25rem;
}

/* ── Mobile scrollable section tabs (phones < 768px) ──────────────────── */
.mobile-section-tabs[b-1gof589baw] {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--surface-warm);
    border-bottom: 1px solid var(--border-color);
}

/* Edge fades signal hidden tabs; toggled by PlatformBackoffice.razor.js */
.mobile-section-tabs[b-1gof589baw]::before,
.mobile-section-tabs[b-1gof589baw]::after {
    content: '';
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.mobile-section-tabs[b-1gof589baw]::before {
    left: 0;
    background: linear-gradient(to right, var(--surface-warm) 0%, transparent 100%);
}

.mobile-section-tabs[b-1gof589baw]::after {
    right: 0;
    background: linear-gradient(to left, var(--surface-warm) 0%, transparent 100%);
}

.mobile-section-tabs--overflow-left[b-1gof589baw]::before,
.mobile-section-tabs--overflow-right[b-1gof589baw]::after {
    opacity: 1;
}

/* Desktop TabStrip sits on --surface-warm, not --surface-canvas */
.desktop-section-tabs[b-1gof589baw]  .tab-strip-wrap::before {
    background: linear-gradient(to right, var(--surface-warm) 20%, transparent 100%);
}

.desktop-section-tabs[b-1gof589baw]  .tab-strip-wrap::after {
    background: linear-gradient(to left, var(--surface-warm) 20%, transparent 100%);
}

.desktop-section-tabs[b-1gof589baw]  .tab-strip-nav {
    background: var(--surface-warm);
}

/* Pin section tabs inside the scrolling content area (they live at the
   start of <main> which is the scroller on desktop). They stay visible
   while the panel body (cards/table) scrolls underneath. */
@media (min-width: 768px) {
    .desktop-section-tabs[b-1gof589baw] {
        position: sticky;
        top: 0;
        z-index: 10;
    }
}

.section-tabs-scroll[b-1gof589baw] {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.375rem 0.5rem;
    gap: 0.25rem;
}

.section-tabs-scroll[b-1gof589baw]::-webkit-scrollbar {
    display: none;
}

.mobile-tab-btn[b-1gof589baw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.875rem;
    border: none;
    border-radius: var(--border-radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.mobile-tab-btn i[b-1gof589baw] {
    font-size: 0.875rem;
}

.mobile-tab-btn.active[b-1gof589baw] {
    background: var(--surface-white);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.mobile-tab-btn:hover:not(.active)[b-1gof589baw] {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

/* ── Drawer nav list (inside DrawerPanel) ─────────────────────────────── */
.drawer-nav[b-1gof589baw] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.drawer-nav-label[b-1gof589baw] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 0.5rem 0.5rem 0.2rem;
    display: block;
}

.drawer-nav-divider[b-1gof589baw] {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0.25rem;
}

.drawer-nav-item[b-1gof589baw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.drawer-nav-item i[b-1gof589baw] {
    font-size: 1rem;
    flex-shrink: 0;
}

.drawer-nav-item:hover[b-1gof589baw] {
    background: var(--background-light);
    color: var(--text-primary);
}

.drawer-nav-item.active[b-1gof589baw] {
    background: rgba(30, 41, 59, 0.07);
    color: var(--text-primary);
    font-weight: 600;
    border-left: 3px solid var(--text-primary);
}

/* ── Filter toolbar elements (inside Toolbar Search slot) ─── */
.filter-input[b-1gof589baw] {
    flex: 1;
    min-width: 200px;
    min-height: 40px;
}

.sort-select[b-1gof589baw] {
    width: auto;
    min-width: 130px;
    min-height: 40px;
}

.sort-dir-btn[b-1gof589baw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 40px;
    white-space: nowrap;
    padding: 0 0.75rem;
}

/* ── Table ────────────────────────────────────────────────── */
.bookings-table thead th[b-1gof589baw] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
}

.bookings-table tbody td[b-1gof589baw] {
    padding: 0.4rem 0.625rem;
    font-size: 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.bookings-table tbody tr:hover td[b-1gof589baw] {
    background: var(--background-light);
}

.cell-truncate[b-1gof589baw] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-tx-btn[b-1gof589baw] {
    opacity: 0.4;
    font-size: 0.9rem;
    vertical-align: middle;
    line-height: 1;
}

.link-tx-btn:hover[b-1gof589baw] {
    opacity: 1;
}

.link-tx-row[b-1gof589baw] {
    background: var(--background-light);
    border-top: none;
    padding: 0.625rem 0.75rem !important;
}

.link-tx-input[b-1gof589baw] {
    flex: 1;
    min-width: 220px;
    max-width: 400px;
    font-size: 0.8rem;
}

.release-payment-btn[b-1gof589baw] {
    opacity: 0.5;
    font-size: 0.95rem;
    vertical-align: middle;
    line-height: 1;
    color: var(--primary-color);
    transition: opacity 0.2s ease;
}

.release-payment-btn:hover[b-1gof589baw] {
    opacity: 1;
    color: var(--primary-hover);
}

/* keep the old generic table styles for other tabs */
.table thead th[b-1gof589baw] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.table tbody td[b-1gof589baw] {
    padding: 0.625rem 1rem;
    vertical-align: middle;
}

.table tbody tr:hover td[b-1gof589baw] {
    background: var(--background-light);
}

.summary-card-button[b-1gof589baw] {
    border: 1px solid var(--border-color);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.summary-card-button:hover[b-1gof589baw],
.summary-card-button:focus-visible[b-1gof589baw] {
    border-color: var(--border-color);
    background: var(--surface-subtle);
}

.summary-card-link[b-1gof589baw] {
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* ── Reject panel ─────────────────────────────────────────── */
.reject-panel[b-1gof589baw] {
    background: var(--color-danger-bg);
    border-top: 1px solid var(--color-danger-border);
    border-bottom: 1px solid var(--color-danger-border);
    padding: 1rem 1.25rem;
}

/* ── Email form ───────────────────────────────────────────── */
.email-form-wrap[b-1gof589baw] {
    max-width: 720px;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Tab bar scrolls horizontally — prevent text overflow in labels */
    .tab-label[b-1gof589baw] {
        font-size: 0.75rem;
    }
}

.job-queue-launch[b-1gof589baw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 480px;
    margin: 1.25rem auto;
}

.job-queue-icon[b-1gof589baw] {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.job-queue-title[b-1gof589baw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.job-queue-desc[b-1gof589baw] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* ── Compact backoffice table ─────────────────────────────── */
.backoffice-table thead th[b-1gof589baw] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
}

.backoffice-table tbody td[b-1gof589baw] {
    padding: 0.4rem 0.625rem;
    font-size: 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

/* ── Clickable rows ───────────────────────────────────────── */
.row-clickable[b-1gof589baw] {
    cursor: pointer;
    transition: background 0.1s ease;
}

.row-clickable:hover td[b-1gof589baw] {
    background: var(--background-light);
}

.row-selected td[b-1gof589baw] {
    background: var(--color-info-bg) !important;
}

/* ── Drawer detail layout ─────────────────────────────────── */
.drawer-detail-section[b-1gof589baw] {
    margin-bottom: 0.875rem;
}

.drawer-detail-row[b-1gof589baw] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.drawer-detail-row .drawer-detail-section[b-1gof589baw] {
    margin-bottom: 0;
    flex: 1;
}

.drawer-detail-label[b-1gof589baw] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.drawer-detail-value[b-1gof589baw] {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.drawer-detail-sub[b-1gof589baw] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.flex-1[b-1gof589baw] {
    flex: 1;
}

.payabli-integration-section[b-1gof589baw] {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.payabli-id-sync[b-1gof589baw] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.payabli-id-sync .payabli-id-input[b-1gof589baw] {
    flex: 1 1 200px;
    min-width: 160px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
}

.payabli-warning[b-1gof589baw] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ── Mobile card layout for backoffice/bookings tables ────── */
@media (max-width: 767px) {
    .backoffice-table thead[b-1gof589baw],
    .bookings-table thead[b-1gof589baw] {
        display: none;
    }

    .backoffice-table tbody tr:not(.span-row)[b-1gof589baw],
    .bookings-table tbody tr:not(.span-row)[b-1gof589baw] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .backoffice-table tbody td:not([colspan])[b-1gof589baw],
    .bookings-table tbody td:not([colspan])[b-1gof589baw] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
        font-size: 0.875rem;
    }

    .backoffice-table tbody td:not([colspan]):last-child[b-1gof589baw],
    .bookings-table tbody td:not([colspan]):last-child[b-1gof589baw] {
        border-bottom: none;
    }

    .backoffice-table tbody td[b-1gof589baw]::before,
    .bookings-table tbody td[b-1gof589baw]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 90px;
    }

    .bookings-table tbody td.cell-truncate[b-1gof589baw] {
        max-width: none;
        overflow: visible;
        white-space: normal;
        word-break: break-word;
    }

    .backoffice-table tbody td[data-label=""][b-1gof589baw]::before,
    .bookings-table tbody td[data-label=""][b-1gof589baw]::before {
        display: none;
        min-width: 0;
    }

    .backoffice-table tbody td[data-label=""][b-1gof589baw],
    .bookings-table tbody td[data-label=""][b-1gof589baw] {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* colspan cells (empty states) */
    .backoffice-table tbody td[colspan][b-1gof589baw],
    .bookings-table tbody td[colspan][b-1gof589baw] {
        display: block;
        padding: 1.25rem;
        text-align: center;
        white-space: normal;
    }

    .backoffice-table tbody td[colspan][b-1gof589baw]::before,
    .bookings-table tbody td[colspan][b-1gof589baw]::before {
        display: none;
    }

    /* expansion rows and inline-form rows stay as table rows */
    .span-row[b-1gof589baw] {
        display: table-row !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .span-row > td[b-1gof589baw] {
        display: table-cell !important;
        text-align: left !important;
        padding: 0 !important;
    }

    /* attribution nested table inside expansion rows */
    .attribution-table thead[b-1gof589baw] {
        display: none;
    }

    .attribution-table tbody tr[b-1gof589baw] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin-bottom: 0.5rem;
        background: var(--surface-color);
        box-shadow: var(--shadow-sm);
    }

    .attribution-table tbody td[b-1gof589baw] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.625rem;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.85rem;
        white-space: normal;
        gap: 0.5rem;
        text-align: right;
    }

    .attribution-table tbody td:last-child[b-1gof589baw] {
        border-bottom: none;
    }

    .attribution-table tbody td[b-1gof589baw]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }
}

/* ── Community admin cards ──────────────────────────────── */
.community-admin-card[b-1gof589baw] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.community-admin-card:hover[b-1gof589baw] {
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.community-admin-card--selected[b-1gof589baw] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
}

.community-admin-photo[b-1gof589baw] {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.community-admin-placeholder[b-1gof589baw] {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--background-light);
    color: var(--text-secondary);
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.community-admin-placeholder i[b-1gof589baw] {
    font-size: 2rem;
}

.community-admin-card .card-header[b-1gof589baw] {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.community-admin-card .card-body[b-1gof589baw] {
    padding: 0.75rem 1rem 1rem;
}

/* ── Brand admin banner + logo overlay ─────────────────── */
.brand-admin-banner-wrap[b-1gof589baw] {
    position: relative;
    height: 110px;
    overflow: visible;
}

.brand-admin-banner[b-1gof589baw] {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.brand-admin-banner-placeholder[b-1gof589baw] {
    width: 100%;
    height: 110px;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    border-bottom: 1px solid var(--border-color);
}

.brand-admin-logo-circle[b-1gof589baw] {
    position: absolute;
    bottom: -20px;
    left: 14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid white;
    background: var(--surface-raised);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.brand-admin-logo-img[b-1gof589baw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-admin-logo-circle i[b-1gof589baw] {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

.community-admin-card .card-header.brand-card-header[b-1gof589baw] {
    padding-top: 1.75rem;
}

/* ── Void / Refund Payment Modal ─────────────────────────────────────── */
.release-modal-overlay[b-1gof589baw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    z-index: 1055;
}

.release-modal-content[b-1gof589baw] {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    border: none;
}

.release-confirm-icon[b-1gof589baw] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto;
}

.drawer-release-section .btn[b-1gof589baw] {
    transition: all 0.2s ease;
}

/* Orbital processing spinner */
.payment-orbital[b-1gof589baw] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.orbital-ring[b-1gof589baw] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}

.ring-1[b-1gof589baw] {
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-color);
    animation: orbitCw-b-1gof589baw 1.1s linear infinite;
}

.ring-2[b-1gof589baw] {
    inset: 10px;
    border-bottom-color: var(--text-secondary);
    border-left-color: var(--text-secondary);
    animation: orbitCcw-b-1gof589baw 0.75s linear infinite;
}

.orbital-core[b-1gof589baw] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--text-secondary);
}

/* Animated SVG checkmark */
.payment-checkmark[b-1gof589baw] {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0 auto;
}

.checkmark-circle[b-1gof589baw] {
    stroke: var(--color-success);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: drawStroke-b-1gof589baw 0.55s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-path[b-1gof589baw] {
    stroke: var(--color-success);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: drawStroke-b-1gof589baw 0.38s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
}

/* Result icon circles */
.payment-result-circle[b-1gof589baw] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto;
    animation: popIn-b-1gof589baw 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.declined-circle[b-1gof589baw] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.error-circle[b-1gof589baw] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* Invite drawer — role explainer card. Updates as the user changes the
   Role select so admins know what the invitee is being granted. */
.invite-role-info[b-1gof589baw] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 0.875rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.invite-role-info-title[b-1gof589baw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.invite-role-info-title .bi[b-1gof589baw] {
    color: var(--color-info);
    font-size: 0.95rem;
}

.invite-role-info-body[b-1gof589baw] {
    margin: 0;
    color: var(--text-secondary);
}

/* Keyframe animations */
@keyframes orbitCw-b-1gof589baw {
    to { transform: rotate(360deg); }
}

@keyframes orbitCcw-b-1gof589baw {
    to { transform: rotate(-360deg); }
}

@keyframes drawStroke-b-1gof589baw {
    to { stroke-dashoffset: 0; }
}

@keyframes popIn-b-1gof589baw {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── User detail drawer card ──────────────────────────────────────────── */
.user-drawer-card[b-1gof589baw] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--surface-color);
    padding: 1.5rem 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.user-drawer-avatar[b-1gof589baw] {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 auto 0.75rem;
}

.user-drawer-name[b-1gof589baw] {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.user-drawer-email[b-1gof589baw] {
    margin: 0 0 0.85rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    word-break: break-all;
}

.user-drawer-role-badge[b-1gof589baw] {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.user-drawer-role-administrator[b-1gof589baw] { background: var(--color-danger-bg); color: var(--color-danger); }
.user-drawer-role-platform[b-1gof589baw]      { background: var(--color-info-bg); color: var(--color-info); }
.user-drawer-role-property[b-1gof589baw]      { background: var(--color-success-bg); color: var(--color-success); }
.user-drawer-role-brand[b-1gof589baw]         { background: var(--color-warning-bg); color: var(--color-warning); }
.user-drawer-role-referral[b-1gof589baw]      { background: var(--role-referral-bg); color: var(--role-referral); }
.user-drawer-role-none[b-1gof589baw]          { background: var(--background-light); color: var(--text-secondary); }

.user-drawer-info-list[b-1gof589baw] {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 0.5rem;
    text-align: left;
}

.user-drawer-info-item[b-1gof589baw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.user-drawer-info-item:last-child[b-1gof589baw] {
    border-bottom: none;
}

.user-drawer-info-label[b-1gof589baw] {
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.user-drawer-info-value[b-1gof589baw] {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.user-drawer-status[b-1gof589baw] {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.user-drawer-status.status-active[b-1gof589baw]   { background: var(--color-success-bg); color: var(--color-success); }
.user-drawer-status.status-pending[b-1gof589baw]  { background: var(--color-warning-bg); color: var(--color-warning); }
.user-drawer-status.status-rejected[b-1gof589baw] { background: var(--color-danger-bg);  color: var(--color-danger); }
.user-drawer-status.status-inactive[b-1gof589baw] { background: var(--background-light); color: var(--text-secondary); }
.user-drawer-status.status-locked[b-1gof589baw]   { background: var(--surface-charcoal);                 color: var(--text-inverse); }
/* /Components/Pages/PlatformDashboard.razor.rz.scp.css */
/* Dashboard loading skeleton */
.pd-dashboard-skeleton[b-izmp2e3uez] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.pd-skeleton-kpi-grid[b-izmp2e3uez] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1199px) {
    .pd-skeleton-kpi-grid[b-izmp2e3uez] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .pd-skeleton-kpi-grid[b-izmp2e3uez] {
        grid-template-columns: 1fr;
    }
}

.pd-snapshot[b-izmp2e3uez] {
    display: grid;
    gap: 1rem;
}

.pd-kpi-grid[b-izmp2e3uez] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1199px) {
    .pd-kpi-grid[b-izmp2e3uez] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .pd-kpi-grid[b-izmp2e3uez] {
        grid-template-columns: 1fr;
    }
}

.pd-snapshot-grid[b-izmp2e3uez] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 991px) {
    .pd-snapshot-grid[b-izmp2e3uez] {
        grid-template-columns: 1fr;
    }
}


.pd-top-list[b-izmp2e3uez] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pd-top-list li[b-izmp2e3uez] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-color);
}

.pd-top-list li:last-child[b-izmp2e3uez] {
    border-bottom: none;
}

.pd-top-name[b-izmp2e3uez] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-top-meta[b-izmp2e3uez] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Status chips grid */
.pd-status-grid[b-izmp2e3uez] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.pd-status-chip[b-izmp2e3uez] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pd-status-chip:hover[b-izmp2e3uez] {
    border-color: var(--border-color);
    background: var(--surface-subtle);
    color: var(--text-primary);
    text-decoration: none;
}

.pd-status-chip i[b-izmp2e3uez] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--background-light);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.pd-status-value[b-izmp2e3uez] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.pd-status-label[b-izmp2e3uez] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 0.15rem;
}

/* Trends */
.pd-trends-head[b-izmp2e3uez] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.pd-trends-toggle[b-izmp2e3uez] {
    display: inline-flex;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem;
    box-shadow: var(--shadow-sm);
}

.pd-trend-btn[b-izmp2e3uez] {
    border: none;
    background: transparent;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pd-trend-btn:hover[b-izmp2e3uez] {
    color: var(--text-primary);
}

.pd-trend-btn.active[b-izmp2e3uez] {
    background: var(--text-primary);
    color: var(--text-inverse);
}

.pd-trends-grid[b-izmp2e3uez] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 1199px) {
    .pd-trends-grid[b-izmp2e3uez] {
        grid-template-columns: 1fr;
    }
}

/* Action items — styles live in wwwroot/app.css (.app-action-row) */

/* /Components/Pages/PlatformFinancials.razor.rz.scp.css */
.platform-financials-page[b-mysex8wd7g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.financials-hero[b-mysex8wd7g] {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: 1rem;
}

.financials-title[b-mysex8wd7g] {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.financials-subtitle[b-mysex8wd7g] {
    color: var(--text-secondary);
    margin: 0;
}

.financials-hero-actions[b-mysex8wd7g] {
    display: flex;
    gap: 0.6rem;
}

@media (max-width: 768px) {
    .financials-hero[b-mysex8wd7g] {
        flex-direction: column;
    }
}
/* /Components/Pages/PressKit.razor.rz.scp.css */
/* Brand & press kit page
   ------------------------------------------------------------
   Layout idiom: full-bleed sections alternating bg, container
   inside. Large, generous specimens. Restrained accents.       */

.brand-page[b-cazkymd2gv] {
    color: var(--text-primary);
}

.brand-page section[b-cazkymd2gv] {
    padding-block: var(--space-16);
}

@media (max-width: 768px) {
    .brand-page section[b-cazkymd2gv] {
        padding-block: var(--space-10);
    }
}

/* ---------- Hero ---------- */

.brand-hero[b-cazkymd2gv] {
    background: linear-gradient(180deg, var(--surface-color) 0%, var(--surface-canvas) 100%);
    border-bottom: 1px solid var(--border-color);
}

.brand-eyebrow[b-cazkymd2gv] {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: var(--space-3);
}

.brand-title[b-cazkymd2gv] {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: var(--space-5);
    color: var(--text-primary);
}

.brand-lead[b-cazkymd2gv] {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 56ch;
    margin-bottom: var(--space-8);
}

.brand-hero-actions[b-cazkymd2gv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.brand-cta[b-cazkymd2gv] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-md);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
    background: var(--primary-color);
    color: #FFFFFF;
    border: 1px solid var(--primary-color);
}

.brand-cta:hover:not(:disabled)[b-cazkymd2gv] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.brand-cta:disabled[b-cazkymd2gv],
.brand-cta.is-busy[b-cazkymd2gv] {
    cursor: progress;
    opacity: 0.75;
}

.brand-cta-ghost[b-cazkymd2gv] {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.brand-cta-ghost:hover[b-cazkymd2gv] {
    background: var(--surface-raised);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* ---------- Section scaffolding ---------- */

.brand-section-alt[b-cazkymd2gv] {
    background: var(--surface-canvas);
    border-block: 1px solid var(--border-color);
}

.brand-section-head[b-cazkymd2gv] {
    max-width: 64ch;
    margin-bottom: var(--space-10);
}

.brand-section-head h2[b-cazkymd2gv],
.brand-press h2[b-cazkymd2gv] {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.brand-section-head p[b-cazkymd2gv],
.brand-press p[b-cazkymd2gv] {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* ---------- Logo gallery ---------- */

.logo-grid[b-cazkymd2gv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .logo-grid[b-cazkymd2gv] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

.logo-tile[b-cazkymd2gv] {
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.logo-tile:hover[b-cazkymd2gv] {
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-md);
}

.logo-tile-canvas[b-cazkymd2gv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-8);
    min-height: 220px;
}

.logo-tile-canvas-light[b-cazkymd2gv] {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-color);
}

.logo-tile-canvas-dark[b-cazkymd2gv] {
    background: #0F172A;
    border-bottom: 1px solid #0F172A;
}

.logo-tile-canvas-square[b-cazkymd2gv] {
    /* For the icon — square specimen, tighter padding to let the mark breathe */
    padding: var(--space-10);
}

.logo-tile-canvas img[b-cazkymd2gv] {
    display: block;
    max-width: 65%;
    height: auto;
}

.logo-tile-canvas-square img[b-cazkymd2gv] {
    max-width: 140px;
    max-height: 140px;
}

.logo-tile-meta[b-cazkymd2gv] {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.logo-tile-meta h3[b-cazkymd2gv] {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.logo-tile-meta p[b-cazkymd2gv] {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.logo-tile-actions[b-cazkymd2gv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.brand-download[b-cazkymd2gv] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.875rem;
    font-size: var(--fs-base);
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background: var(--surface-raised);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.brand-download:hover[b-cazkymd2gv] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--surface-raised);
}

.brand-download i[b-cazkymd2gv] {
    font-size: 0.95em;
    opacity: 0.7;
}

/* ---------- Usage do / don't ---------- */

.usage-grid[b-cazkymd2gv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .usage-grid[b-cazkymd2gv] {
        grid-template-columns: 1fr;
    }
}

.usage-col[b-cazkymd2gv] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.usage-label[b-cazkymd2gv] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
}

.usage-col-do .usage-label[b-cazkymd2gv] {
    color: var(--color-success);
}

.usage-col-dont .usage-label[b-cazkymd2gv] {
    color: var(--color-danger);
}

.usage-col ul[b-cazkymd2gv] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.usage-col li[b-cazkymd2gv] {
    position: relative;
    padding-left: var(--space-6);
    color: var(--text-primary);
    line-height: 1.55;
}

.usage-col li[b-cazkymd2gv]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.usage-col-do li[b-cazkymd2gv]::before {
    background: var(--color-success);
}

.usage-col-dont li[b-cazkymd2gv]::before {
    background: var(--color-danger);
}

/* ---------- Color palette ---------- */

.color-group-title[b-cazkymd2gv] {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}

.color-group-title:first-of-type[b-cazkymd2gv] {
    margin-top: 0;
}

.color-grid[b-cazkymd2gv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.color-swatch[b-cazkymd2gv] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.color-swatch:hover[b-cazkymd2gv] {
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.color-swatch:focus-visible[b-cazkymd2gv] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
}

.color-swatch-chip[b-cazkymd2gv] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
}

.color-swatch-chip-bordered[b-cazkymd2gv] {
    border: 1px solid var(--border-color);
}

.color-swatch-info[b-cazkymd2gv] {
    flex: 1;
    min-width: 0;
}

.color-name[b-cazkymd2gv] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-md);
    line-height: 1.3;
}

.color-hex[b-cazkymd2gv] {
    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

.color-token[b-cazkymd2gv] {
    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    opacity: 0.75;
    margin-top: 2px;
}

.color-swatch-feedback[b-cazkymd2gv] {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    transform: translateY(-50%) translateX(4px);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-success);
    background: var(--color-success-bg);
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.color-swatch.is-copied .color-swatch-feedback[b-cazkymd2gv] {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---------- Typography specimens ---------- */

.type-grid[b-cazkymd2gv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .type-grid[b-cazkymd2gv] {
        grid-template-columns: 1fr;
    }
}

.type-spec[b-cazkymd2gv] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.type-label[b-cazkymd2gv] {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.type-family[b-cazkymd2gv] {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    color: var(--text-primary);
}

.type-family-sans[b-cazkymd2gv] {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.type-family-display[b-cazkymd2gv] {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.type-sample[b-cazkymd2gv] {
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.type-sample-sans[b-cazkymd2gv] {
    font-family: var(--font-sans);
}

.type-sample-display[b-cazkymd2gv] {
    font-family: var(--font-display);
}

.type-sample-mini[b-cazkymd2gv] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.type-link[b-cazkymd2gv] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    margin-top: var(--space-2);
}

.type-link:hover[b-cazkymd2gv] {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ---------- Voice & terminology ---------- */

.voice-list[b-cazkymd2gv] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 70ch;
}

.voice-list li[b-cazkymd2gv] {
    font-size: var(--fs-lg);
    line-height: 1.65;
    color: var(--text-primary);
    padding-left: var(--space-5);
    border-left: 3px solid var(--border-color);
}

.voice-yes[b-cazkymd2gv] {
    font-weight: 600;
    color: var(--primary-color);
    background: var(--color-danger-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.voice-no[b-cazkymd2gv] {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: var(--text-secondary);
    text-decoration-thickness: 1.5px;
}

/* ---------- Press inquiries ---------- */

.brand-press p a[b-cazkymd2gv] {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.brand-press p a:hover[b-cazkymd2gv] {
    color: var(--primary-hover);
    text-decoration: underline;
}

.brand-footnote[b-cazkymd2gv] {
    margin-top: var(--space-5);
    font-size: var(--fs-base);
    color: var(--text-secondary);
    opacity: 0.75;
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
h1[b-nyjrxqrix0] {
    color: var(--text-primary);
    font-weight: 700;
}

h2[b-nyjrxqrix0] {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 2rem;
}

section p[b-nyjrxqrix0], section li[b-nyjrxqrix0] {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.alert[b-nyjrxqrix0] {
    border-radius: 8px;
}

.card[b-nyjrxqrix0] {
    border: none;
    border-radius: 12px;
}

@media print {
    .btn[b-nyjrxqrix0] {
        display: none;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.settings-panel[b-ihkd5b1u26] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    max-width: 640px;
}

.settings-panel-title[b-ihkd5b1u26] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.settings-panel-subtitle[b-ihkd5b1u26] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.authorized-apps-list[b-ihkd5b1u26] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.authorized-app-item[b-ihkd5b1u26] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    margin-bottom: 0.625rem;
    background: var(--surface-raised);
    transition: box-shadow 0.2s ease;
}

.authorized-app-item:hover[b-ihkd5b1u26] {
    box-shadow: var(--shadow-sm);
}

.authorized-app-item:last-child[b-ihkd5b1u26] {
    margin-bottom: 0;
}

.authorized-app-icon[b-ihkd5b1u26] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    flex-shrink: 0;
}

.authorized-app-icon i[b-ihkd5b1u26] {
    font-size: 1.25rem;
}

.authorized-app-body[b-ihkd5b1u26] {
    flex: 1;
    min-width: 0;
}

.authorized-app-name[b-ihkd5b1u26] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.authorized-app-meta[b-ihkd5b1u26] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    word-break: break-word;
}

.language-preference-form[b-ihkd5b1u26] {
    display: block;
}

.language-preference-fieldset[b-ihkd5b1u26] {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.language-preference-option[b-ihkd5b1u26] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    margin: 0;
}

.language-preference-option:hover[b-ihkd5b1u26] {
    border-color: var(--text-secondary);
    background: var(--background-light);
}

.language-preference-option input[type="radio"][b-ihkd5b1u26] {
    margin-top: 0.25rem;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.language-preference-option:has(input[type="radio"]:checked)[b-ihkd5b1u26] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    background: var(--color-info-bg);
}

.language-preference-option-body[b-ihkd5b1u26] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.language-preference-option-label[b-ihkd5b1u26] {
    font-weight: 600;
    color: var(--text-primary);
}

.language-preference-option-hint[b-ihkd5b1u26] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .settings-panel[b-ihkd5b1u26] {
        padding: 1.25rem;
    }

    .authorized-app-item[b-ihkd5b1u26] {
        flex-wrap: wrap;
    }

    .authorized-app-body[b-ihkd5b1u26] {
        flex-basis: calc(100% - 56px);
    }
}
/* /Components/Pages/PropertiesHome.razor.rz.scp.css */
.properties-page[b-fnddl4u79x] {
    background-color: var(--background-light);
}

/* Hero photo for this page — layout/typography live in wwwroot/css/hero.css */
.hero-section[b-fnddl4u79x] {
    --hero-image: url('/images/hero/community-landing-hero-image.png');
}

.content-section[b-fnddl4u79x] {
    padding: var(--section-pad-y-sm) 0;
    background: var(--surface-white);
}

.content-section:nth-of-type(2)[b-fnddl4u79x] {
    background: var(--surface-warm);
}

.info-section[b-fnddl4u79x] {
    max-width: 1200px;
    margin: 0 auto;
}

.info-content[b-fnddl4u79x] {
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
}

.info-heading[b-fnddl4u79x] {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

.steps-grid[b-fnddl4u79x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.step-card[b-fnddl4u79x] {
    text-align: center;
    padding: 1.75rem 1.5rem;
    border-radius: var(--border-radius);
    background: var(--surface-warm);
}

.step-number[b-fnddl4u79x] {
    width: 56px;
    height: 56px;
    background: var(--action-color);
    color: var(--text-inverse);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin: 0 auto 1.5rem;
    font-optical-sizing: auto;
}

.step-title[b-fnddl4u79x] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.step-description[b-fnddl4u79x] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 991px) {
    .hero-section[b-fnddl4u79x] {
        justify-content: flex-start;
    }

    .hero-card[b-fnddl4u79x] {
        padding: 0;
    }

    .content-section[b-fnddl4u79x] {
        padding: 2.5rem 0;
    }

    .info-content[b-fnddl4u79x] {
        padding: 2rem;
    }

    .steps-grid[b-fnddl4u79x] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-section[b-fnddl4u79x] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-title[b-fnddl4u79x] {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .hero-card[b-fnddl4u79x] {
        padding: 0;
    }

    .hero-benefits[b-fnddl4u79x] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-actions[b-fnddl4u79x] {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary[b-fnddl4u79x], .btn-secondary[b-fnddl4u79x] {
        width: 100%;
        min-width: auto;
    }

    .info-content[b-fnddl4u79x] {
        padding: 1.25rem;
    }
}

.steps-grid[b-fnddl4u79x]  .step-card {
    height: 100%;
}

.trust-strip-section[b-fnddl4u79x] {
    padding: var(--space-8) var(--space-4) 0;
    background: var(--surface-white);
}

.testimonials-section[b-fnddl4u79x] {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.hoa-explainer-card[b-fnddl4u79x] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.hoa-explainer-card .explainer-icon[b-fnddl4u79x] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-pill);
    color: var(--color-info);
    font-size: var(--fs-xl);
}

.hoa-explainer-card .explainer-text[b-fnddl4u79x] {
    flex: 1;
}

.hoa-explainer-card h3[b-fnddl4u79x] {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-1);
    color: var(--text-primary);
}

.hoa-explainer-card p[b-fnddl4u79x] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: 0;
}

.hoa-explainer-card .btn[b-fnddl4u79x] {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .hoa-explainer-card[b-fnddl4u79x] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hoa-explainer-card .btn[b-fnddl4u79x] {
        align-self: stretch;
        text-align: center;
    }
}
/* /Components/Pages/PropertyOnboarding.razor.rz.scp.css */
.property-wizard-container[b-izhpkzzdd7] {
    min-height: 100vh;
    background: var(--surface-raised);
}

.wizard-content[b-izhpkzzdd7] {
    min-height: calc(100vh - 140px);
    padding-bottom: 1.5rem;
}

.error-toast[b-izhpkzzdd7] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    animation: slideIn-b-izhpkzzdd7 0.3s ease;
}

@media (max-width: 767px) {
    .error-toast[b-izhpkzzdd7] {
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 1rem);
        right: 1rem;
        left: 1rem;
    }
}

.error-content[b-izhpkzzdd7] {
    background: var(--color-danger);
    color: var(--text-inverse);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-lg);
    max-width: 400px;
}

.error-icon[b-izhpkzzdd7] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.close-btn[b-izhpkzzdd7] {
    background: none;
    border: none;
    color: var(--text-inverse);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.close-btn:hover[b-izhpkzzdd7] {
    opacity: 1;
}

@keyframes slideIn-b-izhpkzzdd7 {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .error-toast[b-izhpkzzdd7] {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .error-content[b-izhpkzzdd7] {
        max-width: 100%;
    }
}
/* /Components/Pages/PropertyProfile.razor.rz.scp.css */
/* Modern badge grid */
.modern-badges-grid[b-h5omko4e57] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.5rem;
    padding: 0.5rem;
}

.modern-badge-item[b-h5omko4e57] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.modern-badge-item:hover[b-h5omko4e57] {
    transform: translateY(-4px);
}

/* Circular badge container */
.modern-badge-circle[b-h5omko4e57] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.modern-badge-item:hover .modern-badge-circle[b-h5omko4e57] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Badge tier colors */
.badge-circle-verified[b-h5omko4e57] {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: var(--text-inverse);
}

.badge-circle-superhost[b-h5omko4e57] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: var(--text-inverse);
}

.badge-circle-premium[b-h5omko4e57] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    color: var(--text-inverse);
}

.badge-circle-platinum[b-h5omko4e57] {
    background: linear-gradient(135deg, #E5E7EB 0%, #F9FAFB 100%);
    color: var(--text-primary);
    border: 3px solid var(--border-color);
}

.badge-circle-gold[b-h5omko4e57] {
    background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
    color: var(--color-warning);
}

.badge-circle-silver[b-h5omko4e57] {
    background: linear-gradient(135deg, #94A3B8 0%, #CBD5E1 100%);
    color: var(--text-secondary);
}

.badge-circle-bronze[b-h5omko4e57] {
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    color: var(--text-inverse);
}

.badge-circle-default[b-h5omko4e57] {
    background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
    color: var(--text-inverse);
}

/* Badge icon/image */
.modern-badge-icon[b-h5omko4e57] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.modern-badge-svg[b-h5omko4e57] {
    width: 40px;
    height: 40px;
    stroke-width: 2.5px;
}

.modern-badge-bootstrap-icon[b-h5omko4e57] {
    font-size: 36px;
    line-height: 1;
}

/* Badge label */
.modern-badge-label[b-h5omko4e57] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modern-badge-name[b-h5omko4e57] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.modern-badge-tier[b-h5omko4e57] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-badges-grid[b-h5omko4e57] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 1rem;
    }

    .modern-badge-circle[b-h5omko4e57] {
        width: 60px;
        height: 60px;
    }

    .modern-badge-icon[b-h5omko4e57],
    .modern-badge-svg[b-h5omko4e57] {
        width: 32px;
        height: 32px;
    }

    .modern-badge-name[b-h5omko4e57] {
        font-size: 0.75rem;
    }
}
/* /Components/Pages/PropertyRestrictions.razor.rz.scp.css */
/* PropertyRestrictions page — scoped styles */

/* Loading skeleton */
.property-restrictions-skeleton[b-pl1k5u60hk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* /Components/Pages/PropertySpaces.razor.rz.scp.css */
/* PropertySpaces page — scoped styles */

/* ── Skeleton ─────────────────────────────────────────────── */
.propertyspaces-skeleton[b-wli4bhkoxl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.space-card-img[b-wli4bhkoxl] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    display: block;
}

.space-card-img-placeholder[b-wli4bhkoxl] {
    width: 100%;
    height: 200px;
    background: var(--surface-subtle);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 3rem;
}

.space-card-footer[b-wli4bhkoxl] {
    padding: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}
/* /Components/Pages/PropertyTerms.razor.rz.scp.css */
h1[b-n0t6phb8ar] {
    color: var(--text-primary);
    font-weight: 700;
}

h2[b-n0t6phb8ar] {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 2rem;
}

section p[b-n0t6phb8ar], section li[b-n0t6phb8ar] {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.alert[b-n0t6phb8ar] {
    border-radius: 8px;
}

.card[b-n0t6phb8ar] {
    border: none;
    border-radius: 12px;
}

.bg-light[b-n0t6phb8ar] {
    background-color: var(--background-light) !important;
}

@media print {
    .btn[b-n0t6phb8ar] {
        display: none;
    }
}
/* /Components/Pages/PropertyWizard/FirstSpaceStep.razor.rz.scp.css */
.space-type-grid[b-bnc1ydcpjt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.space-type-btn[b-bnc1ydcpjt] {
    background: var(--surface-raised);
    border: 2px solid var(--text-secondary);
    border-radius: 10px;
    padding: 1rem 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.space-type-btn:hover[b-bnc1ydcpjt] {
    border-color: var(--text-primary);
    background: var(--background-light);
}

.space-type-btn.active[b-bnc1ydcpjt] {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--text-inverse);
}

.type-icon[b-bnc1ydcpjt] {
    font-size: 1.75rem;
    color: inherit;
}

.type-label[b-bnc1ydcpjt] {
    font-size: 0.8125rem;
}

.amenities-grid[b-bnc1ydcpjt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    padding: 0.875rem;
    background: var(--background-light);
    border-radius: 8px;
}

.amenity-checkbox[b-bnc1ydcpjt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-primary);
    padding: 0.4rem;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.amenity-checkbox:hover[b-bnc1ydcpjt] {
    background: var(--surface-raised);
}

.amenity-checkbox input[type="checkbox"][b-bnc1ydcpjt] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.amenity-checkbox span[b-bnc1ydcpjt] {
    flex: 1;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .space-type-grid[b-bnc1ydcpjt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .amenities-grid[b-bnc1ydcpjt] {
        grid-template-columns: 1fr;
    }

    .space-type-btn[b-bnc1ydcpjt] {
        padding: 0.875rem 0.5rem;
    }
}
/* /Components/Pages/PropertyWizard/PropertyInfoStep.razor.rz.scp.css */
.wizard-step[b-m4mu1pfsfj] {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.step-header[b-m4mu1pfsfj] {
    margin-bottom: 2rem;
    text-align: center;
}

.step-heading[b-m4mu1pfsfj] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.step-subheading[b-m4mu1pfsfj] {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.step-form[b-m4mu1pfsfj] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.form-grid[b-m4mu1pfsfj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group[b-m4mu1pfsfj] {
    display: flex;
    flex-direction: column;
}

.form-group.full-width[b-m4mu1pfsfj] {
    grid-column: 1 / -1;
}

.form-label[b-m4mu1pfsfj] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.form-input[b-m4mu1pfsfj],
.form-textarea[b-m4mu1pfsfj] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--text-secondary);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:focus[b-m4mu1pfsfj],
.form-textarea:focus[b-m4mu1pfsfj] {
    outline: none;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(34, 34, 34, 0.1);
}

.form-input.error[b-m4mu1pfsfj],
.form-textarea.error[b-m4mu1pfsfj] {
    border-color: var(--color-danger);
}

.form-input.error:focus[b-m4mu1pfsfj],
.form-textarea.error:focus[b-m4mu1pfsfj] {
    box-shadow: 0 0 0 2px rgba(193, 53, 21, 0.1);
}

.form-textarea[b-m4mu1pfsfj] {
    resize: vertical;
    min-height: 80px;
}

.field-error[b-m4mu1pfsfj] {
    color: var(--color-danger);
    font-size: 0.75rem;
    margin-top: 0.3rem;
}

.field-hint[b-m4mu1pfsfj] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.3rem;
    display: block;
}

[b-m4mu1pfsfj] .cover-photo-upload {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
}

.required-mark[b-m4mu1pfsfj] {
    color: var(--color-danger);
}

@media (max-width: 768px) {
    .wizard-step[b-m4mu1pfsfj] {
        padding: 1.25rem 0.75rem;
    }

    .step-form[b-m4mu1pfsfj] {
        padding: 1.5rem;
    }

    .form-grid[b-m4mu1pfsfj] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .step-heading[b-m4mu1pfsfj] {
        font-size: 1.5rem;
    }

    .step-subheading[b-m4mu1pfsfj] {
        font-size: 0.875rem;
    }
}

.community-type-group[b-m4mu1pfsfj] {
    margin-bottom: var(--space-4);
}

.community-type-helper[b-m4mu1pfsfj] {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-3);
}

.community-type-options[b-m4mu1pfsfj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.community-type-option[b-m4mu1pfsfj] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.community-type-option:hover[b-m4mu1pfsfj] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.community-type-option.is-selected[b-m4mu1pfsfj] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
}

.community-type-option input[type="radio"][b-m4mu1pfsfj] {
    margin-top: var(--space-1);
    flex-shrink: 0;
}

.community-type-option .option-text[b-m4mu1pfsfj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.community-type-option .option-title[b-m4mu1pfsfj] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.community-type-option .option-body[b-m4mu1pfsfj] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: var(--lh-snug);
}

@media (max-width: 768px) {
    .community-type-options[b-m4mu1pfsfj] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PropertyWizard/WizardLanding.razor.rz.scp.css */
.wizard-landing[b-2uhbsh33gg] {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
}

.landing-content[b-2uhbsh33gg] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.landing-left[b-2uhbsh33gg] {
    padding: 1rem 0;
}

.landing-title[b-2uhbsh33gg] {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.landing-subtitle[b-2uhbsh33gg] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.steps-overview[b-2uhbsh33gg] {
    margin-bottom: 2rem;
}

.step-item[b-2uhbsh33gg] {
    display: grid;
    grid-template-columns: 36px 1fr 50px;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
}

.step-number[b-2uhbsh33gg] {
    width: 36px;
    height: 36px;
    background: var(--primary-color);
    color: var(--text-inverse);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.step-content[b-2uhbsh33gg] {
    flex: 1;
}

.step-title[b-2uhbsh33gg] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.step-description[b-2uhbsh33gg] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.step-icon[b-2uhbsh33gg] {
    font-size: 2rem;
    text-align: center;
    opacity: 0.8;
    color: var(--primary-color);
}

.step-divider[b-2uhbsh33gg] {
    width: 2px;
    height: 24px;
    background: var(--border-color);
    margin-left: 17px;
}

.landing-actions[b-2uhbsh33gg] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.landing-actions .btn-primary[b-2uhbsh33gg] {
    background: var(--primary-color);
    border: none;
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(255, 56, 92, 0.2);
    transition: all 0.2s ease;
}

.landing-actions .btn-primary:hover[b-2uhbsh33gg] {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.3);
}

.landing-actions .btn-link[b-2uhbsh33gg] {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 0.75rem;
}

.landing-actions .btn-link:hover[b-2uhbsh33gg] {
    color: var(--primary-color);
    text-decoration: underline;
}

.landing-right[b-2uhbsh33gg] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 100px;
}

.visual-card[b-2uhbsh33gg] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.visual-card:hover[b-2uhbsh33gg] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.visual-icon[b-2uhbsh33gg] {
    font-size: 2rem;
    flex-shrink: 0;
    color: var(--primary-color);
}

.visual-content h4[b-2uhbsh33gg] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.visual-content p[b-2uhbsh33gg] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .landing-content[b-2uhbsh33gg] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .landing-right[b-2uhbsh33gg] {
        position: static;
    }

    .wizard-landing[b-2uhbsh33gg] {
        padding: 1.5rem 1rem;
    }

    .landing-actions[b-2uhbsh33gg] {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-actions .btn-primary[b-2uhbsh33gg],
    .landing-actions .btn-link[b-2uhbsh33gg] {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .step-item[b-2uhbsh33gg] {
        grid-template-columns: 32px 1fr;
        gap: 0.875rem;
    }

    .step-icon[b-2uhbsh33gg] {
        display: none;
    }

    .step-number[b-2uhbsh33gg] {
        width: 32px;
        height: 32px;
        font-size: 0.9375rem;
    }

    .step-divider[b-2uhbsh33gg] {
        margin-left: 15px;
        height: 20px;
    }
}
/* /Components/Pages/Referral.razor.rz.scp.css */
/* ── Loading skeleton ───────────────────────────────────────────────────── */

.rf-dashboard-skeleton[b-yllddnlett] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.rf-skeleton-tile-grid[b-yllddnlett] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1199px) {
    .rf-skeleton-tile-grid[b-yllddnlett] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .rf-skeleton-tile-grid[b-yllddnlett] {
        grid-template-columns: 1fr;
    }
}

/* Snapshot tab — KPI grid, NBA + recent on left, link/QR side panel on right */
.rf-snapshot[b-yllddnlett] {
    display: grid;
    gap: 1rem;
}

.rf-kpi-grid[b-yllddnlett] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1199px) {
    .rf-kpi-grid[b-yllddnlett] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .rf-kpi-grid[b-yllddnlett] {
        grid-template-columns: 1fr;
    }
}

.rf-snapshot-grid[b-yllddnlett] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1rem;
}

@media (max-width: 991px) {
    .rf-snapshot-grid[b-yllddnlett] {
        grid-template-columns: 1fr;
    }
}

.rf-nba-column[b-yllddnlett] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Card primitives — surface provided by .app-card */
.rf-recent-card[b-yllddnlett],
.rf-link-card[b-yllddnlett],
.rf-ledger-card[b-yllddnlett] {
    padding: 1.1rem 1.25rem;
}

.rf-card-title[b-yllddnlett] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

/* Recent referrals snippet */
.rf-recent-list[b-yllddnlett] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rf-recent-list li[b-yllddnlett] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.rf-recent-list li:last-child[b-yllddnlett] {
    border-bottom: none;
    padding-bottom: 0;
}

.rf-recent-list i[b-yllddnlett] {
    color: var(--primary-color);
    background: rgba(255, 56, 92, 0.10);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rf-recent-name[b-yllddnlett] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-recent-meta[b-yllddnlett] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Link / QR panel */
.rf-link-card[b-yllddnlett] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.rf-link-row[b-yllddnlett] {
    display: flex;
    gap: 0.5rem;
}

.rf-link-input[b-yllddnlett] {
    background-color: var(--background-light);
    font-family: monospace;
    font-size: 0.78rem;
}

.rf-copy-btn[b-yllddnlett] {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.5rem 0.95rem;
}

.rf-qr[b-yllddnlett] {
    text-align: center;
}

.rf-qr img[b-yllddnlett] {
    width: 130px;
    height: 130px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--surface-raised);
}

.rf-qr-hint[b-yllddnlett] {
    display: block;
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.rf-sharekit[b-yllddnlett] {
    align-self: stretch;
    text-align: center;
    font-weight: 600;
    border-radius: 999px;
}

/* Trends tab */
.rf-trends-head[b-yllddnlett] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.rf-trends-toggle[b-yllddnlett] {
    display: inline-flex;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem;
    box-shadow: var(--shadow-sm);
}

.rf-trend-btn[b-yllddnlett] {
    border: none;
    background: transparent;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rf-trend-btn:hover[b-yllddnlett] {
    color: var(--text-primary);
}

.rf-trend-btn.active[b-yllddnlett] {
    background: var(--text-primary);
    color: var(--text-inverse);
}

.rf-trends-grid[b-yllddnlett] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 991px) {
    .rf-trends-grid[b-yllddnlett] {
        grid-template-columns: 1fr;
    }
}

.rf-ledger[b-yllddnlett] {
    font-size: 0.85rem;
}

.rf-ledger thead th[b-yllddnlett] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

@media (max-width: 767px) {
    .rf-ledger thead[b-yllddnlett] {
        display: none;
    }

    .rf-ledger tbody tr[b-yllddnlett] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-raised);
        box-shadow: var(--shadow-sm);
    }

    .rf-ledger tbody td[b-yllddnlett] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .rf-ledger tbody td:last-child[b-yllddnlett] {
        border-bottom: none;
    }

    .rf-ledger tbody td[b-yllddnlett]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .rf-ledger tbody td[data-label=""][b-yllddnlett]::before {
        display: none;
    }
}

/* Action items */
.rf-action-list[b-yllddnlett] {
    display: grid;
    gap: 0.75rem;
}

.rf-action-row[b-yllddnlett] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    border-left-width: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rf-action-row:hover[b-yllddnlett] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    text-decoration: none;
}

.rf-action-row.severity-warning[b-yllddnlett] {
    border-left-color: var(--color-warning);
}

.rf-action-row.severity-danger[b-yllddnlett] {
    border-left-color: var(--color-danger);
}

.rf-action-row.severity-info[b-yllddnlett] {
    border-left-color: var(--color-info);
}

.rf-action-icon[b-yllddnlett] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--background-light);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.rf-action-row.severity-warning .rf-action-icon[b-yllddnlett] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.rf-action-row.severity-danger .rf-action-icon[b-yllddnlett] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.rf-action-row.severity-info .rf-action-icon[b-yllddnlett] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.rf-action-body[b-yllddnlett] {
    flex: 1;
    min-width: 0;
}

.rf-action-title[b-yllddnlett] {
    font-weight: 700;
    font-size: 1rem;
}

.rf-action-subtitle[b-yllddnlett] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rf-action-arrow[b-yllddnlett] {
    color: var(--text-secondary);
}

.rf-action-empty[b-yllddnlett] {
    text-align: center;
    padding: 3rem 1rem;
}

.rf-action-empty i[b-yllddnlett] {
    font-size: 3rem;
    color: var(--color-success);
    display: block;
    margin-bottom: 0.75rem;
}

.rf-action-empty h2[b-yllddnlett] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}
/* /Components/Pages/ReferralPartnersHome.razor.rz.scp.css */
.referral-partners-page[b-pyouk7fj6p] {
    background: var(--background-light);
}

/* ---------- Hero ---------- */
.hero-section[b-pyouk7fj6p] {
    position: relative;
    min-height: 100vh;
    background: url('/images/hero/hero-landing-image.png') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
}

.hero-overlay[b-pyouk7fj6p] {
    position: absolute;
    inset: 0;
    /* Dark veil at the top to anchor the white logo + nav, fading out so the photo
       reads bright and crisp through the bottom half of the hero. */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.65) 140px,
        rgba(0, 0, 0, 0) 55%
    );
}

.hero-content[b-pyouk7fj6p] {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-card[b-pyouk7fj6p] {
    background: transparent;
    border-radius: 0;
    padding: 0;
    max-width: 800px;
    width: 100%;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-title[b-pyouk7fj6p] {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6.5vw, 4.5rem);
    font-weight: 600;
    color: var(--text-inverse);
    margin-bottom: 1.25rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
    /* Soft shadow keeps white copy legible where the overlay has faded out. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-subtitle[b-pyouk7fj6p] {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-on-dark);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 620px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hero-benefits[b-pyouk7fj6p] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
}

.benefit-item[b-pyouk7fj6p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-md);
    color: var(--text-inverse);
    font-weight: 600;
}

.benefit-item i[b-pyouk7fj6p] {
    font-size: 1.25rem;
    color: var(--text-inverse);
    flex-shrink: 0;
    opacity: 0.9;
}

.hero-actions[b-pyouk7fj6p] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- Hero buttons (mirror BrandsHome) ---------- */
.btn-primary[b-pyouk7fj6p], .btn-secondary[b-pyouk7fj6p], .btn-secondary-light[b-pyouk7fj6p] {
    padding: 0.9rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary[b-pyouk7fj6p] {
    background: var(--surface-raised);
    color: var(--text-primary);
    min-width: 200px;
    border: 1.5px solid var(--surface-raised);
}

.btn-primary:hover[b-pyouk7fj6p] {
    background: var(--background-light);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.btn-secondary[b-pyouk7fj6p] {
    background: transparent;
    color: var(--text-inverse);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    min-width: 180px;
}

.btn-secondary:hover[b-pyouk7fj6p] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-inverse);
    transform: translateY(-1px);
    border-color: var(--text-inverse);
}

/* ---------- Invite / referral banner above the hero copy ---------- */
.invite-banner[b-pyouk7fj6p] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    text-align: left;
}

.invite-banner i[b-pyouk7fj6p] {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.invite-banner-text[b-pyouk7fj6p] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.invite-banner-text strong[b-pyouk7fj6p] {
    font-size: 1rem;
    line-height: 1.3;
}

.invite-banner-text span[b-pyouk7fj6p] {
    font-size: 0.875rem;
    line-height: 1.45;
    margin-top: 0.15rem;
}

.invite-banner-strong[b-pyouk7fj6p] {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info);
}

.invite-banner-soft[b-pyouk7fj6p] {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-banner-primary[b-pyouk7fj6p] {
    background: var(--color-info);
    color: var(--text-inverse);
    border: 1px solid var(--color-info);
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-banner-primary:hover[b-pyouk7fj6p] {
    background: var(--color-info);
    color: var(--text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 576px) {
    .invite-banner[b-pyouk7fj6p] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .btn-banner-primary[b-pyouk7fj6p] {
        width: 100%;
        text-align: center;
    }
}

/* ---------- Section frame ---------- */
.content-section[b-pyouk7fj6p] {
    padding: var(--section-pad-y-sm) 0;
    background: var(--surface-warm);
}

.content-section:nth-of-type(2)[b-pyouk7fj6p] {
    background: var(--surface-white);
}

.content-section:nth-of-type(4)[b-pyouk7fj6p] {
    background: var(--surface-white);
}

.info-section[b-pyouk7fj6p] {
    max-width: 1200px;
    margin: 0 auto;
}

.info-content[b-pyouk7fj6p] {
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
}

.info-heading[b-pyouk7fj6p] {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}

/* ---------- Steps grid ---------- */
.steps-grid[b-pyouk7fj6p] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.step-card[b-pyouk7fj6p] {
    text-align: center;
    padding: 1.75rem 1.5rem;
    border-radius: var(--border-radius);
    background: var(--surface-warm);
}

.step-number[b-pyouk7fj6p] {
    width: 56px;
    height: 56px;
    background: var(--action-color);
    color: var(--text-inverse);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin: 0 auto 1.5rem;
    font-optical-sizing: auto;
}

.step-title[b-pyouk7fj6p] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.step-description[b-pyouk7fj6p] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin: 0;
}

/* ---------- Earnings clarity callout ---------- */
.earnings-section[b-pyouk7fj6p] {
    background: var(--surface-warm);
}

.earnings-card[b-pyouk7fj6p] {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--surface-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--primary-color);
}

.earnings-heading[b-pyouk7fj6p] {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-optical-sizing: auto;
}

.earnings-body[b-pyouk7fj6p] {
    font-size: var(--fs-lg);
    line-height: 1.65;
    color: var(--text-primary);
    margin-bottom: 2rem;
    max-width: 820px;
}

.rolling-window[b-pyouk7fj6p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    background: var(--surface-warm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 1.25rem;
}

.rolling-step[b-pyouk7fj6p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--surface-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    min-width: 130px;
    box-shadow: var(--shadow-sm);
}

.rolling-step i[b-pyouk7fj6p] {
    font-size: 1.65rem;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}

.rolling-step-label[b-pyouk7fj6p] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rolling-step-window[b-pyouk7fj6p] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.rolling-step-ghost[b-pyouk7fj6p] {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.rolling-step-ghost i[b-pyouk7fj6p] {
    color: var(--text-secondary);
}

.rolling-arrow[b-pyouk7fj6p] {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .rolling-window[b-pyouk7fj6p] {
        flex-direction: column;
        gap: 0.6rem;
    }

    .rolling-arrow[b-pyouk7fj6p] {
        transform: rotate(90deg);
    }
}

/* ---------- Value tiles ---------- */
.value-grid[b-pyouk7fj6p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.value-tile[b-pyouk7fj6p] {
    background: var(--surface-warm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.75rem;
}

.value-icon[b-pyouk7fj6p] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-bg);
    color: var(--color-info);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.value-title[b-pyouk7fj6p] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.value-text[b-pyouk7fj6p] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin: 0;
}

.value-text a[b-pyouk7fj6p] {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.value-text a:hover[b-pyouk7fj6p] {
    text-decoration: underline;
}

/* Bottom CTA strip layout lives in wwwroot/app.css (shared across landing pages).
   Page-scoped styles below cover the lone secondary-light button variant. */
.btn-secondary-light[b-pyouk7fj6p] {
    background: transparent;
    color: var(--text-inverse);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    min-width: 200px;
}

.btn-secondary-light:hover[b-pyouk7fj6p] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-inverse);
    border-color: var(--text-inverse);
    transform: translateY(-1px);
}

/* ---------- Apply modal ---------- */
.modal-backdrop-custom[b-pyouk7fj6p] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

[b-pyouk7fj6p] .modal {
    z-index: 1050;
}

.apply-modal-content[b-pyouk7fj6p] {
    border-radius: var(--border-radius-lg);
    border: none;
    box-shadow: var(--shadow-xl);
}

.apply-intro[b-pyouk7fj6p] {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.form-optional[b-pyouk7fj6p] {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
}

/* Modal "primary" button — solid red gradient (different from hero white CTA) */
.apply-modal-content .btn-primary[b-pyouk7fj6p],
.apply-success-body .btn-primary[b-pyouk7fj6p] {
    background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
    color: var(--text-inverse);
    border: 1px solid transparent;
    min-width: 180px;
}

.apply-modal-content .btn-primary:hover[b-pyouk7fj6p],
.apply-success-body .btn-primary:hover[b-pyouk7fj6p] {
    background: linear-gradient(to right, #C91E40 0%, #BD1957 50%, #B7034C 100%);
    color: var(--text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.apply-modal-content .btn-primary:disabled[b-pyouk7fj6p],
.apply-success-body .btn-primary:disabled[b-pyouk7fj6p] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.apply-success-body[b-pyouk7fj6p] {
    text-align: center;
    padding: 2.5rem 2rem;
}

.apply-success-icon[b-pyouk7fj6p] {
    font-size: 3rem;
    color: var(--color-success);
    margin-bottom: 1rem;
    line-height: 1;
}

.apply-success-heading[b-pyouk7fj6p] {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.apply-success-text[b-pyouk7fj6p] {
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .hero-section[b-pyouk7fj6p] {
        justify-content: flex-start;
    }

    .content-section[b-pyouk7fj6p] {
        padding: 2.5rem 0;
    }

    .info-content[b-pyouk7fj6p],
    .earnings-card[b-pyouk7fj6p] {
        padding: 2rem;
    }

    .steps-grid[b-pyouk7fj6p] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .value-grid[b-pyouk7fj6p] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .hero-section[b-pyouk7fj6p] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-title[b-pyouk7fj6p] {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .hero-benefits[b-pyouk7fj6p] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-actions[b-pyouk7fj6p] {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary[b-pyouk7fj6p],
    .btn-secondary[b-pyouk7fj6p],
    .btn-secondary-light[b-pyouk7fj6p] {
        width: 100%;
        min-width: auto;
    }

    .info-content[b-pyouk7fj6p],
    .earnings-card[b-pyouk7fj6p] {
        padding: 1.5rem;
    }
}

.steps-grid[b-pyouk7fj6p]  .step-card {
    height: 100%;
}

.trust-strip-section[b-pyouk7fj6p] {
    padding: var(--space-8) var(--space-4) 0;
    background: var(--surface-white);
}

.testimonials-section[b-pyouk7fj6p] {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}
/* /Components/Pages/ReferralTerms.razor.rz.scp.css */
h1[b-lnskw2x5dr] {
    color: var(--text-primary);
    font-weight: 700;
}

h2[b-lnskw2x5dr] {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 2rem;
}

section p[b-lnskw2x5dr], section li[b-lnskw2x5dr] {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.alert[b-lnskw2x5dr] {
    border-radius: 8px;
}

.card[b-lnskw2x5dr] {
    border: none;
    border-radius: 12px;
}

@media print {
    .btn[b-lnskw2x5dr] {
        display: none;
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
.role-preselected[b-iffytkyemo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-light);
}

.role-preselected-label[b-iffytkyemo] {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.role-preselected-change[b-iffytkyemo] {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.role-preselected-change:hover[b-iffytkyemo],
.role-preselected-change:focus[b-iffytkyemo] {
    text-decoration: underline;
}

.referral-applied-banner[b-iffytkyemo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-info);
    border-radius: var(--border-radius);
    background: var(--color-info-bg);
    color: var(--text-primary);
}

.referral-applied-banner i[b-iffytkyemo] {
    color: var(--color-info);
    font-size: 1.25rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.referral-applied-banner strong[b-iffytkyemo] {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.125rem;
}

.referral-applied-banner span[b-iffytkyemo] {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.external-auth-divider[b-iffytkyemo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 1rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.external-auth-divider[b-iffytkyemo]::before,
.external-auth-divider[b-iffytkyemo]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.external-auth-buttons[b-iffytkyemo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.external-auth-form[b-iffytkyemo] {
    margin: 0;
}

.btn-external-auth[b-iffytkyemo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.625rem 0.9rem;
    background-color: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-external-auth:hover[b-iffytkyemo],
.btn-external-auth:focus[b-iffytkyemo] {
    background-color: var(--background-light);
    border-color: var(--text-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-external-auth i[b-iffytkyemo] {
    font-size: 1.15rem;
    line-height: 1;
}

.mc-fields[b-iffytkyemo] {
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-light);
}

/* /Components/Pages/Saved.razor.rz.scp.css */
/* =====================================================================
   Saved (/saved) — wishlist page
   Card visuals are fully handled by SpaceCard.razor.css.
   This file contains the page-level skeleton-grid and entrance-stagger styles.
   ===================================================================== */

/* ── Skeleton grid (mirrors the results grid — no layout jump) ── */
.saved-skeleton-grid .col[b-8p6v3orb4e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Card entrance ─────────────────────────────────────────── */

.saved-results-grid > *[b-8p6v3orb4e] {
    animation: result-enter-b-8p6v3orb4e var(--motion-slow) var(--ease-standard) both;
}

.saved-results-grid > *:nth-child(2)[b-8p6v3orb4e] { animation-delay: 60ms; }
.saved-results-grid > *:nth-child(3)[b-8p6v3orb4e] { animation-delay: 120ms; }
.saved-results-grid > *:nth-child(4)[b-8p6v3orb4e] { animation-delay: 180ms; }
.saved-results-grid > *:nth-child(5)[b-8p6v3orb4e] { animation-delay: 240ms; }
.saved-results-grid > *:nth-child(n+6)[b-8p6v3orb4e] { animation-delay: 300ms; }

@keyframes result-enter-b-8p6v3orb4e {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Search.razor.rz.scp.css */
.search-page[b-lx8oj90jzp] {
    background-color: var(--background-light);
    min-height: calc(100vh - 65px);
}

/* Amenity Filters */
.amenity-filters-panel[b-lx8oj90jzp] {
    padding: 0.75rem;
    background: var(--surface-subtle);
    border-radius: 12px;
    animation: slideDown-b-lx8oj90jzp 0.2s ease;
}

.amenity-chip[b-lx8oj90jzp] {
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: var(--fs-base);
    border-width: 1px;
    transition: all 0.2s ease;
}

.amenity-chip:hover[b-lx8oj90jzp] {
    box-shadow: var(--shadow-sm);
}

.amenity-chip.btn-primary[b-lx8oj90jzp] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
}

.amenity-chip.btn-outline-secondary[b-lx8oj90jzp] {
    background: var(--surface-raised);
    color: var(--text-primary);
}

/* Filter sections within the unified panel (Price + Amenities) */
.filter-section[b-lx8oj90jzp] {
    margin-bottom: 0.75rem;
}

.filter-section:last-child[b-lx8oj90jzp] {
    margin-bottom: 0;
}

.filter-section-heading[b-lx8oj90jzp] {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Active filters */
.active-filters[b-lx8oj90jzp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    animation: slideDown-b-lx8oj90jzp 0.3s ease;
}

.active-filters .badge[b-lx8oj90jzp] {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    background: var(--background-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: var(--fs-sm);
    animation: fadeIn-b-lx8oj90jzp 0.2s ease;
}

.active-filters .btn-link[b-lx8oj90jzp] {
    color: var(--primary-color);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
}

.active-filters .btn-link:hover[b-lx8oj90jzp] {
    color: var(--primary-hover);
    background: rgba(255, 56, 92, 0.1);
    border-radius: 4px;
}

/* Referral Card */
.referral-card[b-lx8oj90jzp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    padding: 1.75rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-inverse);
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.referral-card:hover[b-lx8oj90jzp] {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.referral-icon[b-lx8oj90jzp] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.referral-title[b-lx8oj90jzp] {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--text-inverse);
}

.referral-text[b-lx8oj90jzp] {
    font-size: var(--fs-base);
    line-height: 1.4;
    opacity: 0.95;
    margin-bottom: 1rem;
}

.referral-cta[b-lx8oj90jzp] {
    background: var(--surface-raised);
    color: #667eea;
    padding: 0.65rem 1.25rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
}

.referral-badge[b-lx8oj90jzp] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 0.3rem 0.65rem;
    border-radius: 10px;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Map view */
.map-view-section[b-lx8oj90jzp] {
    background: var(--surface-raised);
    border-radius: 12px;
    padding: 1.5rem;
}

/* Split View */
.split-view-container[b-lx8oj90jzp] {
    display: flex;
    height: calc(100vh - 280px);
    min-height: 600px;
    background: var(--surface-raised);
}

.split-view-list[b-lx8oj90jzp] {
    width: 50%;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
}

/* Two-column grid of denser cards beside the map. Drops to one column when the
   list pane gets too narrow to fit two cards comfortably. */
.split-view-list-content[b-lx8oj90jzp] {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-content: start;
}

@media (max-width: 1300px) {
    .split-view-list-content[b-lx8oj90jzp] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.split-view-map[b-lx8oj90jzp] {
    width: 50%;
    position: sticky;
    top: 0;
    height: 100%;
}

/* Make the embedded map component fill the split-view column instead of its
   default fixed 600px height. ::deep crosses the CSS-isolation boundary. */
.split-view-map[b-lx8oj90jzp]  .spaces-map-view-container {
    height: 100%;
}

/* Wrapper for each SpaceCard in the split-view list grid cell */
.split-card-wrapper[b-lx8oj90jzp] {
    min-width: 0;
}

/* Denser card styling inside the split-view list — two cards share the ~50% pane,
   so trim image height, padding, and type to keep them tidy. ::deep crosses the
   CSS-isolation boundary into the SpaceCard component. */
.split-view-list-content[b-lx8oj90jzp]  .space-image-wrapper {
    aspect-ratio: 3 / 2;
}

.split-view-list-content[b-lx8oj90jzp]  .space-details {
    padding: 0.75rem;
}

.split-view-list-content[b-lx8oj90jzp]  .space-name {
    font-size: var(--fs-md);
}

.split-view-list-content[b-lx8oj90jzp]  .amenity-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
}

/* Scrollbar */
.split-view-list[b-lx8oj90jzp]::-webkit-scrollbar {
    width: 8px;
}

.split-view-list[b-lx8oj90jzp]::-webkit-scrollbar-track {
    background: var(--background-light);
}

.split-view-list[b-lx8oj90jzp]::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 4px;
}

.split-view-list[b-lx8oj90jzp]::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary);
}

/* Animations */
@keyframes slideDown-b-lx8oj90jzp {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn-b-lx8oj90jzp {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== Compact persistent search header ===== */

.search-compact-header[b-lx8oj90jzp] {
    position: relative;
    background: url('/images/hero/brand-landing-hero-image.jpg') center / cover no-repeat;
    /* overflow: visible so pill dropdowns (What/Where) render above the grid */
    overflow: visible;
}

.search-compact-header[b-lx8oj90jzp]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.50) 0%,
        rgba(0, 0, 0, 0.60) 100%
    );
    pointer-events: none;
}

.search-compact-inner[b-lx8oj90jzp] {
    position: relative;
    /* This stacking context holds the What/Where dropdown popovers, which open
       down over the results grid. It must out-rank the cards' heart/badge
       z-indexes (10/5) so the popovers render above them, not behind. */
    z-index: 20;
    /* overflow: visible so autocomplete popovers escape the container */
    overflow: visible;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.search-compact-text[b-lx8oj90jzp] {
    text-align: center;
}

.search-compact-title[b-lx8oj90jzp] {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--text-inverse);
    margin: 0 0 0.2rem 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.search-compact-subtitle[b-lx8oj90jzp] {
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Search toolbar row (count + action buttons) */
.search-toolbar[b-lx8oj90jzp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 760px;
    padding: 0.5rem 0 0.75rem;
    gap: 0.5rem;
}

.search-count-label[b-lx8oj90jzp] {
    flex: 1;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.search-toolbar-actions[b-lx8oj90jzp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Override Bootstrap outline-secondary to look good on the dark banner */
.search-compact-inner .btn-outline-secondary[b-lx8oj90jzp] {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--text-inverse);
    background: rgba(0, 0, 0, 0.25);
}

.search-compact-inner .btn-outline-secondary:hover[b-lx8oj90jzp] {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-inverse);
}

.search-compact-inner .btn-link[b-lx8oj90jzp] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
}

.search-compact-inner .btn-link:hover[b-lx8oj90jzp] {
    color: var(--text-inverse);
}

@media (max-width: 768px) {
    .search-compact-inner[b-lx8oj90jzp] {
        padding: 1rem 1rem 0;
        gap: 0.6rem;
    }
}

@media (max-width: 480px) {
    .search-compact-inner[b-lx8oj90jzp] {
        padding: 0.75rem 0.75rem 0;
    }

    .search-count-label[b-lx8oj90jzp] {
        display: none;
    }

    .search-toolbar[b-lx8oj90jzp] {
        justify-content: flex-end;
    }
}

/* ===== End compact persistent search header ===== */

/* ===== Active-search bar (sticky summary chip; replaces hero once searching) ===== */

.search-active-bar[b-lx8oj90jzp] {
    position: sticky;
    /* Sits just below the 64px-tall sticky global top bar (which stays at top: 0). */
    top: 64px;
    z-index: 20;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 767px) {
    .search-active-bar[b-lx8oj90jzp] {
        top: 56px;
    }
}

.search-active-inner[b-lx8oj90jzp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
}

/* Summary chip — the single, compact search surface. Click reopens the full pill. */
.search-summary-chip[b-lx8oj90jzp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 460px;
    flex: 0 1 auto;
    padding: 0.5rem 0.875rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-summary-chip:hover[b-lx8oj90jzp],
.search-summary-chip.is-open[b-lx8oj90jzp] {
    background: var(--surface-raised);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.search-summary-chip:focus-visible[b-lx8oj90jzp] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.search-summary-icon[b-lx8oj90jzp] {
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.search-summary-text[b-lx8oj90jzp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-summary-caret[b-lx8oj90jzp] {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.search-summary-chip.is-open .search-summary-caret[b-lx8oj90jzp] {
    transform: rotate(180deg);
}

/* In the active bar the toolbar sits to the right of the chip; push it to the end. */
.search-active-inner .search-toolbar[b-lx8oj90jzp] {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

/* Full-screen click-catcher that closes the editor when clicking outside it. */
.search-editor-overlay[b-lx8oj90jzp] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* The reopened What/Where/When pill, anchored under the chip. */
.search-editor-popover[b-lx8oj90jzp] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 1.5rem;
    z-index: 50;
    padding: 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    animation: slideDown-b-lx8oj90jzp 0.15s ease;
}

@media (max-width: 575px) {
    .search-active-inner[b-lx8oj90jzp] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.875rem;
    }

    .search-summary-chip[b-lx8oj90jzp] {
        max-width: none;
        flex: 1 1 100%;
    }

    .search-editor-popover[b-lx8oj90jzp] {
        left: 0.875rem;
        right: 0.875rem;
        padding: 0.75rem;
    }
}

/* ── Hero What/Where/When pill ──────────────────────────────────────────── */

.hero-search-pill[b-lx8oj90jzp] {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 760px;
    height: 64px;
    background: var(--surface-raised);
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
    /* overflow: visible so EventTypeCombobox and LocationAutocomplete popovers
       are not clipped by the pill or banner — they must render above the grid. */
    overflow: visible;
    /* Ensure the pill establishes a stacking context above the results below */
    position: relative;
    z-index: 100;
    margin-top: 0;
    transition: box-shadow 0.2s ease;
}

.hero-search-pill:focus-within[b-lx8oj90jzp] {
    box-shadow: var(--shadow-xl), 0 0 0 3px rgba(255, 56, 92, 0.25);
}

.hero-segment[b-lx8oj90jzp] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
}

/* Stacked micro-label + control layout within each hero segment */
.hero-segment-stack[b-lx8oj90jzp] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 1.125rem;
    min-width: 0;
}

/* Tiny uppercase label ("WHAT" / "WHERE" / "WHEN") */
.hero-segment-micro-label[b-lx8oj90jzp] {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 2px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* What: wide enough for a selected event type like "Product Launch" */
.hero-segment-what[b-lx8oj90jzp] {
    flex: 0 1 190px;
    min-width: 150px;
}

/* Where: flexible — absorbs remaining space; long addresses ellipsize */
.hero-segment-where[b-lx8oj90jzp] {
    flex: 1 1 0;
    min-width: 120px;
}

/* When: wide enough for mm/dd/yyyy + calendar icon */
.hero-segment-when[b-lx8oj90jzp] {
    flex: 0 1 185px;
    min-width: 170px;
}

/* Inline row for the calendar icon + date input */
.hero-segment-date-row[b-lx8oj90jzp] {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Calendar icon inline within the date row */
.hero-segment-icon[b-lx8oj90jzp] {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
    margin-right: 5px;
}

/* Date input — fills remaining width in the date row */
.hero-segment-control[b-lx8oj90jzp] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-md);
    padding: 0;
    outline: none;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.2;
}

.hero-segment-control[b-lx8oj90jzp]::placeholder {
    color: var(--text-secondary);
}

.hero-segment-date[b-lx8oj90jzp]::-webkit-calendar-picker-indicator {
    opacity: 0.4;
    cursor: pointer;
    flex-shrink: 0;
}

.hero-segment-divider[b-lx8oj90jzp] {
    width: 1px;
    background: var(--border-color);
    margin: 14px 0;
    flex-shrink: 0;
}

/* Hero Search button — right end of hero pill */
.hero-search-btn[b-lx8oj90jzp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    height: 100%;
    padding: 0 1.375rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 0 32px 32px 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.hero-search-btn:hover[b-lx8oj90jzp] {
    background: var(--primary-hover);
    box-shadow: var(--shadow-md);
}

.hero-search-btn:focus-visible[b-lx8oj90jzp] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hero-search-btn .bi[b-lx8oj90jzp] {
    font-size: 1rem;
}

/* ── Hero pill responsive ─────────────────────────────────────────────────── */

@media (max-width: 680px) {
    .hero-search-pill[b-lx8oj90jzp] {
        flex-direction: column;
        height: auto;
        border-radius: var(--border-radius);
    }

    .hero-segment[b-lx8oj90jzp] {
        height: 56px;
        flex: none;
        width: 100%;
    }

    .hero-segment-stack[b-lx8oj90jzp] {
        padding: 0 1rem;
    }

    .hero-segment-divider[b-lx8oj90jzp] {
        width: 100%;
        height: 1px;
        margin: 0 12px;
    }

    /* When pill stacks vertically, Search button spans full width */
    .hero-search-btn[b-lx8oj90jzp] {
        width: 100%;
        justify-content: center;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        height: 52px;
    }
}

@media (max-width: 480px) {
    /* On phones also hide the When segment in the pill (space is very tight) */
    .hero-segment-when[b-lx8oj90jzp],
    .hero-segment-when + .hero-segment-divider[b-lx8oj90jzp],
    .hero-segment-divider:has(+ .hero-segment-when)[b-lx8oj90jzp] {
        display: none;
    }
}

@media (max-width: 768px) {
    .search-hero-inner[b-lx8oj90jzp] {
        padding: 3rem 1rem 2.5rem;
    }
}

@media (max-width: 480px) {
    .search-hero-inner[b-lx8oj90jzp] {
        padding: 2.5rem 0.75rem 2rem;
    }
}

/* ===== Space rails ===== */

.space-rail[b-lx8oj90jzp] {
    margin-bottom: 2.5rem;
}

.space-rail-heading[b-lx8oj90jzp] {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

.space-rail-track[b-lx8oj90jzp] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.space-rail-track[b-lx8oj90jzp]::-webkit-scrollbar {
    height: 4px;
}

.space-rail-track[b-lx8oj90jzp]::-webkit-scrollbar-track {
    background: var(--background-light);
    border-radius: 2px;
}

.space-rail-track[b-lx8oj90jzp]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.space-rail-track[b-lx8oj90jzp]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Fixed-width scroll-snap wrapper around each SpaceCard in the rail */
.space-rail-card-link[b-lx8oj90jzp] {
    flex: 0 0 280px;
    scroll-snap-align: start;
    display: block;
}

@media (max-width: 768px) {
    .space-rail-card-link[b-lx8oj90jzp] {
        flex: 0 0 240px;
    }
}

@media (max-width: 480px) {
    .space-rail-card-link[b-lx8oj90jzp] {
        flex: 0 0 210px;
    }
}

/* ===== End hero home ===== */

/* ===== Gated (unauthenticated) experience ===== */

/* Disabled search bar */
.gated-search-bar[b-lx8oj90jzp] {
    position: relative;
}

.gated-search-icon[b-lx8oj90jzp] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
    z-index: 1;
}

.gated-search-input[b-lx8oj90jzp] {
    padding-left: 2.5rem;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: var(--background-light);
    cursor: not-allowed;
    opacity: 0.65;
}

.gated-btn-disabled[b-lx8oj90jzp] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* CTA overlay positioned over the blurred grid */
.gated-cta-overlay[b-lx8oj90jzp] {
    position: relative;
    z-index: 10;
    margin-bottom: -200px;
    padding: 2rem;
    display: flex;
    justify-content: center;
}

.gated-cta-content[b-lx8oj90jzp] {
    background: var(--surface-raised);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem 3rem;
    text-align: center;
    box-shadow: var(--shadow-xl);
    max-width: 540px;
    width: 100%;
    position: relative;
    z-index: 10;
}

.gated-cta-icon[b-lx8oj90jzp] {
    font-size: 2.5rem;
    color: var(--primary-color);
    display: block;
    margin-bottom: 1rem;
}

.gated-cta-title[b-lx8oj90jzp] {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.gated-cta-subtitle[b-lx8oj90jzp] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.gated-cta-button[b-lx8oj90jzp] {
    background: var(--action-color);
    border: 1.5px solid var(--action-color);
    border-radius: 10px;
    padding: 0.8rem 2.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-inverse);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.gated-cta-button:hover[b-lx8oj90jzp] {
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    color: var(--text-inverse);
}

.gated-cta-login[b-lx8oj90jzp] {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.gated-cta-login a[b-lx8oj90jzp] {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.gated-cta-login a:hover[b-lx8oj90jzp] {
    text-decoration: underline;
}

/* Blurred card grid */
.gated-grid-wrapper[b-lx8oj90jzp] {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    position: relative;
    z-index: 1;
}

.gated-card[b-lx8oj90jzp] {
    cursor: pointer;
}

.gated-image-placeholder[b-lx8oj90jzp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Gated placeholder card — replicates card shell without using SpaceCard component */
.gated-grid-wrapper .space-card[b-lx8oj90jzp] {
    background: var(--surface-raised);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gated-grid-wrapper .space-image-wrapper[b-lx8oj90jzp] {
    position: relative;
    width: 100%;
    padding-top: 66.67%;
    overflow: hidden;
    background-color: var(--background-light);
}

.gated-grid-wrapper .space-details[b-lx8oj90jzp] {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.gated-grid-wrapper .space-name[b-lx8oj90jzp] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.gated-grid-wrapper .space-location[b-lx8oj90jzp] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: 0;
}

.gated-grid-wrapper .space-amenities[b-lx8oj90jzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gated-grid-wrapper .amenity-badge[b-lx8oj90jzp] {
    background-color: var(--background-light);
    color: var(--text-primary);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

.gated-grid-wrapper .space-price[b-lx8oj90jzp] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-subtle);
}

.gated-grid-wrapper .price-amount[b-lx8oj90jzp] {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.gated-grid-wrapper .price-unit[b-lx8oj90jzp] {
    font-size: var(--fs-base);
    color: var(--text-secondary);
}

/* Pagination */
.gated-pagination .page-link[b-lx8oj90jzp] {
    color: var(--text-primary);
    border-color: var(--border-color);
    font-weight: 500;
}

.gated-pagination .page-item.active .page-link[b-lx8oj90jzp] {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-inverse);
}

.gated-pagination[b-lx8oj90jzp] {
    filter: blur(2px);
    pointer-events: none;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
    .gated-cta-content[b-lx8oj90jzp] {
        padding: 1.5rem 1.25rem;
        margin: 0 0.5rem;
    }

    .gated-cta-title[b-lx8oj90jzp] {
        font-size: var(--fs-xl);
    }

    .gated-cta-overlay[b-lx8oj90jzp] {
        margin-bottom: -150px;
    }
}

/* ===== End gated experience ===== */

/* Responsive */
@media (max-width: 768px) {
    .search-page[b-lx8oj90jzp] { padding-top: 0.5rem; }
}

/* Split view: stack vertically on phones */
@media (max-width: 767px) {
    .split-view-container[b-lx8oj90jzp] {
        flex-direction: column;
        height: auto;
        min-height: unset;
    }

    .split-view-list[b-lx8oj90jzp] {
        width: 100%;
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .split-view-map[b-lx8oj90jzp] {
        width: 100%;
        height: 45vh;
        min-height: 280px;
        position: static;
    }
}

@media (max-width: 1200px) {
    .split-view-list[b-lx8oj90jzp] { width: 45%; }
    .split-view-map[b-lx8oj90jzp] { width: 55%; }
}

/* ===== Loading skeleton grid (mirrors the results grid — no layout jump) ===== */

.search-skeleton-grid .col[b-lx8oj90jzp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Entrance for freshly-rendered result batches. Pure CSS: result columns are
   re-created on every filter change, so the keyframe replays per batch —
   deliberate "new results" feedback without per-card observers. The direct-child
   selector covers both views: grid (.col) and split list (.split-card-wrapper). */
.search-results-grid > *[b-lx8oj90jzp] {
    animation: result-enter-b-lx8oj90jzp var(--motion-slow) var(--ease-standard) both;
}

.search-results-grid > *:nth-child(2)[b-lx8oj90jzp] { animation-delay: 60ms; }
.search-results-grid > *:nth-child(3)[b-lx8oj90jzp] { animation-delay: 120ms; }
.search-results-grid > *:nth-child(4)[b-lx8oj90jzp] { animation-delay: 180ms; }
.search-results-grid > *:nth-child(5)[b-lx8oj90jzp] { animation-delay: 240ms; }
.search-results-grid > *:nth-child(n+6)[b-lx8oj90jzp] { animation-delay: 300ms; }

@keyframes result-enter-b-lx8oj90jzp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-hub[b-p86w4rfq3p] {
    display: flex;
    flex-direction: column;
}

/* Tab strip — wraps on small screens and scrolls horizontally on narrow viewports */
.settings-tabs[b-p86w4rfq3p] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-tabs[b-p86w4rfq3p]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Ensure link-tabs (anchors) are visually identical to button-tabs */
.settings-tabs .nav-link[b-p86w4rfq3p] {
    white-space: nowrap;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.settings-tab-content[b-p86w4rfq3p] {
    padding-top: 1.5rem;
}

/* Allow inner panels to breathe on large screens */
@media (min-width: 992px) {
    .settings-tab-content[b-p86w4rfq3p] {
        padding-top: 1.75rem;
    }
}

/* On narrow mobile allow tabs to wrap instead of just scroll */
@media (max-width: 480px) {
    .settings-tabs[b-p86w4rfq3p] {
        flex-wrap: wrap;
    }

    .settings-tabs .nav-link[b-p86w4rfq3p] {
        flex: 1 0 auto;
        justify-content: center;
    }
}
/* /Components/Pages/ShareKit.razor.rz.scp.css */
/* ── Loading skeleton ───────────────────────────────────────────────────── */

.sharekit-skeleton[b-ix293yaz3p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.sharekit-skeleton-grid[b-ix293yaz3p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 991px) {
    .sharekit-skeleton-grid[b-ix293yaz3p] {
        grid-template-columns: 1fr;
    }
}

/* Card wrapper — surface provided by .app-card */
.ref-card[b-ix293yaz3p] {
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* Share Kit */
.sharekit-intro[b-ix293yaz3p] {
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.sharekit-grid[b-ix293yaz3p] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.sharekit-card[b-ix293yaz3p] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    background: var(--surface-subtle);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sharekit-card:hover[b-ix293yaz3p] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.sharekit-header[b-ix293yaz3p] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sharekit-icon[b-ix293yaz3p] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sharekit-icon-x[b-ix293yaz3p] {
    background: #000000; /* X (Twitter) brand identity — do not tokenize */
}

.sharekit-icon-linkedin[b-ix293yaz3p] {
    background: #0A66C2; /* LinkedIn brand identity — do not tokenize */
}

.sharekit-icon-instagramstory[b-ix293yaz3p] {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.sharekit-title[b-ix293yaz3p] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.sharekit-caption[b-ix293yaz3p] {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
    margin: 0;
}

.sharekit-note[b-ix293yaz3p] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
}

.sharekit-actions[b-ix293yaz3p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.sharekit-copy-btn[b-ix293yaz3p],
.sharekit-open-btn[b-ix293yaz3p] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .sharekit-grid[b-ix293yaz3p] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
h1[b-lbv6cnqsrr] {
    color: var(--text-primary);
    font-weight: 700;
}

h2[b-lbv6cnqsrr] {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 2rem;
}

section p[b-lbv6cnqsrr], section li[b-lbv6cnqsrr] {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.card[b-lbv6cnqsrr] {
    border: none;
    border-radius: 12px;
}

@media print {
    .btn[b-lbv6cnqsrr] {
        display: none;
    }
}
/* /Components/Pages/WebhookList.razor.rz.scp.css */
/* Skeleton */
.webhooks-skeleton[b-6iipczn4jw] {
    padding: var(--space-4) var(--space-5);
}

.webhooks-container[b-6iipczn4jw] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.page-header[b-6iipczn4jw] {
    margin-bottom: 2rem;
}

.back-link[b-6iipczn4jw] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

.back-link:hover[b-6iipczn4jw] {
    color: var(--primary-color);
}

.page-title[b-6iipczn4jw] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.page-subtitle[b-6iipczn4jw] {
    color: var(--text-secondary);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.add-webhook-card[b-6iipczn4jw] {
    padding: 1.5rem;
}

.card-title[b-6iipczn4jw] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.events-grid[b-6iipczn4jw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.event-option[b-6iipczn4jw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.event-option:hover[b-6iipczn4jw] {
    border-color: var(--primary-color);
    background: rgba(255, 56, 92, 0.03);
}

.event-label[b-6iipczn4jw] {
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.add-webhook-btn[b-6iipczn4jw] {
    background: var(--action-color);
    border: 1.5px solid var(--action-color);
    border-radius: 10px;
    padding: 0.55rem 1.25rem;
    font-weight: 600;
    color: var(--text-inverse);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.add-webhook-btn:hover[b-6iipczn4jw] {
    background: var(--action-hover);
    border-color: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    color: var(--text-inverse);
}

.webhooks-table thead th[b-6iipczn4jw] {
    white-space: nowrap;
}


.url-cell[b-6iipczn4jw] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url-cell code[b-6iipczn4jw] {
    font-size: 0.85rem;
    background: var(--background-light);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    word-break: break-all;
}

.events-cell[b-6iipczn4jw] {
    max-width: 200px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.actions-cell[b-6iipczn4jw] {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .webhooks-container[b-6iipczn4jw] {
        padding: 1rem 0.5rem;
    }

    .add-webhook-card[b-6iipczn4jw] {
        padding: 1rem;
    }

    .events-grid[b-6iipczn4jw] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .webhooks-table[b-6iipczn4jw] {
        font-size: 0.85rem;
    }
}

@media (max-width: 767px) {
    .webhooks-table thead[b-6iipczn4jw] {
        display: none;
    }

    .webhooks-table tbody tr[b-6iipczn4jw] {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 0.75rem;
        background: var(--surface-raised);
        box-shadow: var(--shadow-sm);
    }

    .webhooks-table tbody td[b-6iipczn4jw] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-subtle);
        border-top: none;
        text-align: right;
        gap: 0.5rem;
        white-space: normal;
    }

    .webhooks-table tbody td:last-child[b-6iipczn4jw] {
        border-bottom: none;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .webhooks-table tbody td[b-6iipczn4jw]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        text-align: left;
        flex-shrink: 0;
        min-width: 80px;
    }

    .webhooks-table tbody td[data-label=""][b-6iipczn4jw]::before {
        display: none;
    }

    .url-cell[b-6iipczn4jw] {
        max-width: none;
        overflow: visible;
        text-overflow: unset;
    }

    .url-cell code[b-6iipczn4jw] {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .events-cell[b-6iipczn4jw] {
        max-width: none;
    }

    .actions-cell[b-6iipczn4jw] {
        white-space: normal;
    }
}
/* /Components/Shared/ActionDialog.razor.rz.scp.css */
/* ── Backdrop + shell ────────────────────────────────────────────── */
.action-dialog-root[b-bbnrdj8b2p] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.action-dialog-backdrop[b-bbnrdj8b2p] {
    position: absolute;
    inset: 0;
    background: var(--overlay-strong);
    animation: action-dialog-fade-in-b-bbnrdj8b2p 160ms ease-out;
}

.action-dialog-shell[b-bbnrdj8b2p] {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 1rem;
    animation: action-dialog-pop-in-b-bbnrdj8b2p 200ms ease-out;
}

/* ── Card ────────────────────────────────────────────────────────── */
.action-dialog-card[b-bbnrdj8b2p] {
    background: var(--surface-raised);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid var(--border-color);
}

/* ── Variant accent (icon color) ────────────────────────────────── */
.action-dialog-icon[b-bbnrdj8b2p] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.variant-primary .action-dialog-icon[b-bbnrdj8b2p] {
    color: var(--primary-color);
    background: rgba(255, 56, 92, 0.10);
}

.variant-destructive .action-dialog-icon[b-bbnrdj8b2p] {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.variant-approve .action-dialog-icon[b-bbnrdj8b2p] {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.variant-caution .action-dialog-icon[b-bbnrdj8b2p] {
    color: var(--color-warning);
    background: var(--color-warning-bg);
}

.variant-info .action-dialog-icon[b-bbnrdj8b2p] {
    color: var(--color-info);
    background: var(--color-info-bg);
}

/* ── Header ──────────────────────────────────────────────────────── */
.action-dialog-header[b-bbnrdj8b2p] {
    margin-bottom: 0.5rem;
}

.action-dialog-title[b-bbnrdj8b2p] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

/* ── Body ────────────────────────────────────────────────────────── */
.action-dialog-body[b-bbnrdj8b2p] {
    margin-bottom: 1.25rem;
}

.action-dialog-description[b-bbnrdj8b2p] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.action-dialog-description:last-child[b-bbnrdj8b2p] {
    margin-bottom: 0;
}

/* Reason textarea block */
.action-dialog-reason .form-control[b-bbnrdj8b2p] {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    resize: vertical;
}

.action-dialog-reason .form-control:focus[b-bbnrdj8b2p] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 56, 92, 0.15);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.action-dialog-footer[b-bbnrdj8b2p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

.action-dialog-footer .btn[b-bbnrdj8b2p] {
    min-height: 44px;
    padding-inline: 1.25rem;
    font-weight: 600;
    border-radius: var(--border-radius);
}

/* ── Run panel ───────────────────────────────────────────────────── */
.run-panel[b-bbnrdj8b2p] {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
}

.run-panel-working .run-spinner[b-bbnrdj8b2p] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.run-panel-working .run-spinner .spinner-border[b-bbnrdj8b2p] {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.25rem;
}

.run-panel-working .progress[b-bbnrdj8b2p] {
    height: 0.5rem;
    border-radius: var(--border-radius-pill);
    margin-bottom: 0.75rem;
    background-color: var(--background-light);
}

.run-panel-working .progress-bar[b-bbnrdj8b2p] {
    background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
    transition: width 200ms ease;
}

.run-panel .run-step[b-bbnrdj8b2p] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

.run-panel .run-icon[b-bbnrdj8b2p] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.run-panel-success .run-icon[b-bbnrdj8b2p] {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.run-panel-failed .run-icon[b-bbnrdj8b2p] {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.run-panel-declined .run-icon[b-bbnrdj8b2p] {
    color: var(--color-warning);
    background: var(--color-warning-bg);
}

.run-panel .run-title[b-bbnrdj8b2p] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.run-panel .run-message[b-bbnrdj8b2p] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9375rem;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes action-dialog-fade-in-b-bbnrdj8b2p {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes action-dialog-pop-in-b-bbnrdj8b2p {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Reduced motion: avoid the pop-in transform. */
@media (prefers-reduced-motion: reduce) {
    .action-dialog-backdrop[b-bbnrdj8b2p],
    .action-dialog-shell[b-bbnrdj8b2p] {
        animation: none;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .action-dialog-shell[b-bbnrdj8b2p] {
        padding: 0.75rem;
        max-width: 100%;
    }

    .action-dialog-card[b-bbnrdj8b2p] {
        padding: 1.25rem 1rem 1rem;
    }

    .action-dialog-footer[b-bbnrdj8b2p] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .action-dialog-footer .btn[b-bbnrdj8b2p] {
        width: 100%;
    }
}
/* /Components/Shared/ActionDialogHost.razor.rz.scp.css */
/* ActionDialogHost is a logical mount point — all visible styling lives in
   ActionDialog.razor.css. Empty companion file maintains the project's CSS
   isolation convention. */
/* /Components/Shared/ActivityFeed.razor.rz.scp.css */
.activity-feed[b-njuhsoi906] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.activity-list[b-njuhsoi906] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}

.activity-item[b-njuhsoi906] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}

.activity-item:last-child[b-njuhsoi906] {
    border-bottom: none;
}

.activity-item:hover[b-njuhsoi906] {
    background: var(--background-light);
}

.activity-avatar[b-njuhsoi906] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--background-light);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.activity-body[b-njuhsoi906] {
    flex: 1;
    min-width: 0;
}

.activity-title-row[b-njuhsoi906] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.activity-title[b-njuhsoi906] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.92rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.activity-title:hover[b-njuhsoi906] {
    color: var(--color-info);
}

.activity-chip[b-njuhsoi906] {
    background: var(--background-light);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.activity-subtitle[b-njuhsoi906] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-time[b-njuhsoi906] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.2rem;
}

.activity-empty[b-njuhsoi906] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.activity-empty-icon[b-njuhsoi906] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

@media (max-width: 768px) {
    .activity-list[b-njuhsoi906] {
        max-height: none;
    }

    .activity-time[b-njuhsoi906] {
        font-size: 0.7rem;
    }
}
/* /Components/Shared/AppSidebar.razor.rz.scp.css */
/* ── Icon rail (desktop ≥768px) ───────────────────────────── */
.rail-shell[b-gbf9c15m9s] {
    position: relative;
    flex-shrink: 0;
}

.app-rail[b-gbf9c15m9s] {
    /* Desktop: fills the full height of the constrained .app-body row (no document scroll).
       Mobile rail is hidden; the overlay uses its own fixed positioning. */
    width: 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-raised);
    border-right: 1px solid var(--border-color);
    padding: var(--space-3) 0;
    z-index: 20;
}

.rail-nav[b-gbf9c15m9s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    width: 100%;
}

.rail-item[b-gbf9c15m9s],
.rail-expand-toggle[b-gbf9c15m9s] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    border: none;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}

.rail-item i[b-gbf9c15m9s],
.rail-expand-toggle i[b-gbf9c15m9s] {
    font-size: var(--fs-xl);
    line-height: 1;
}

.rail-item:hover[b-gbf9c15m9s],
.rail-item:focus-visible[b-gbf9c15m9s],
.rail-expand-toggle:hover[b-gbf9c15m9s],
.rail-expand-toggle:focus-visible[b-gbf9c15m9s] {
    background: var(--background-light);
    color: var(--text-primary);
}

/* Active: coral accent — tinted icon + left accent bar */
.rail-item.active[b-gbf9c15m9s] {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.rail-item.active[b-gbf9c15m9s]::before {
    content: "";
    position: absolute;
    left: -10px; /* sits on the rail edge: (64-44)/2 = 10px gutter */
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-color);
}

/* ── Hover flyout label (CSS-only) ───────────────────────── */
.rail-flyout[b-gbf9c15m9s] {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    translate: 0 -50%;
    white-space: nowrap;
    background: var(--text-primary);
    color: var(--surface-raised);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-standard);
    z-index: 40;
}

.rail-item:hover .rail-flyout[b-gbf9c15m9s],
.rail-item:focus-visible .rail-flyout[b-gbf9c15m9s],
.rail-expand-toggle:hover .rail-flyout[b-gbf9c15m9s],
.rail-expand-toggle:focus-visible .rail-flyout[b-gbf9c15m9s] {
    opacity: 1;
}

.rail-footer[b-gbf9c15m9s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* Cap the collapsed ThemeToggle to match the 44px rail button width. */
.rail-footer[b-gbf9c15m9s]  .theme-toggle.collapsed {
    width: 44px;
}

/* ── Expanded overlay (temporary labeled panel) ──────────── */
.rail-overlay-backdrop[b-gbf9c15m9s] {
    position: fixed;
    inset: 0;
    background: var(--overlay-strong, rgba(15, 23, 42, 0.45));
    z-index: 1030;
    animation: overlay-fade-b-gbf9c15m9s var(--motion-fast) var(--ease-standard) both;
}

.rail-overlay[b-gbf9c15m9s] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--surface-raised);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 1031;
    display: flex;
    flex-direction: column;
    animation: overlay-slide-b-gbf9c15m9s var(--motion-base) var(--ease-standard) both;
}

@keyframes overlay-fade-b-gbf9c15m9s {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes overlay-slide-b-gbf9c15m9s {
    from { transform: translateX(-24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.rail-overlay-head[b-gbf9c15m9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.rail-overlay-title[b-gbf9c15m9s] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--text-primary);
}

/* Unconditionally 44×44px — the overlay header has enough room on all screen sizes. */
.rail-overlay-close[b-gbf9c15m9s] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.rail-overlay-close:hover[b-gbf9c15m9s],
.rail-overlay-close:focus-visible[b-gbf9c15m9s] {
    background: var(--background-light);
    color: var(--text-primary);
}

.rail-overlay-nav[b-gbf9c15m9s] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-3) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rail-overlay-section[b-gbf9c15m9s] {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-2) var(--space-1, 0.25rem);
}

.rail-overlay-item[b-gbf9c15m9s] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.5rem var(--space-2);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.rail-overlay-item i[b-gbf9c15m9s] {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    width: 1.4rem;
    text-align: center;
}

.rail-overlay-item:hover[b-gbf9c15m9s],
.rail-overlay-item:focus-visible[b-gbf9c15m9s] {
    background: var(--background-light);
}

.rail-overlay-item.active[b-gbf9c15m9s] {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.rail-overlay-item.active i[b-gbf9c15m9s] {
    color: var(--primary-color);
}

/* ── Mobile (<768px): rail hidden, bottom nav takes over ── */
@media (max-width: 767px) {
    .rail-shell[b-gbf9c15m9s] {
        display: none;
    }
}

/* Mobile bottom tab bar */
.mobile-bottom-nav[b-gbf9c15m9s] {
    display: none;
}

@media (max-width: 767px) {
    .mobile-bottom-nav[b-gbf9c15m9s] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: var(--surface-color);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: stretch;
    }

    .mobile-nav-item[b-gbf9c15m9s] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 3px;
        padding: 6px 4px;
        color: var(--text-secondary);
        font-size: 0.625rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.15s ease;
        min-height: 44px;
        letter-spacing: 0.01em;
    }

    .mobile-nav-item i[b-gbf9c15m9s] {
        font-size: 1.3rem;
        line-height: 1;
    }

    .mobile-nav-item.active[b-gbf9c15m9s] {
        color: var(--primary-color);
    }

    .mobile-nav-item.active i[b-gbf9c15m9s] {
        font-weight: 700;
    }

    .mobile-nav-item:hover[b-gbf9c15m9s] {
        color: var(--text-primary);
        text-decoration: none;
    }
}
/* /Components/Shared/AuthShell.razor.rz.scp.css */
.auth-shell[b-ubytd6iixd] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: calc(100vh - 71px); /* below the public header */
}

/* ── Brand panel ─────────────────────────────────────────── */
.auth-shell-panel[b-ubytd6iixd] {
    position: relative;
    background-image:
        linear-gradient(165deg,
            color-mix(in srgb, var(--surface-dark) 88%, transparent) 0%,
            color-mix(in srgb, var(--surface-dark) 62%, transparent) 100%),
        url('/images/hero/community-landing-hero-image.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: var(--space-12) var(--space-8);
}

.auth-shell-panel-content[b-ubytd6iixd] {
    max-width: 420px;
}

.auth-shell-eyebrow[b-ubytd6iixd] {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, #ffffff 75%, transparent);
    margin: 0 0 var(--space-3);
}

.auth-shell-headline[b-ubytd6iixd] {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: #ffffff;
    margin: 0 0 var(--space-5);
    font-optical-sizing: auto;
}

.auth-shell-points[b-ubytd6iixd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.auth-shell-points li[b-ubytd6iixd] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: color-mix(in srgb, #ffffff 88%, transparent);
    font-size: var(--fs-md);
    line-height: 1.5;
}

.auth-shell-points i[b-ubytd6iixd] {
    font-size: var(--fs-lg);
    line-height: 1.4;
    color: color-mix(in srgb, #ffffff 70%, transparent);
    flex-shrink: 0;
}

/* ── Form column ─────────────────────────────────────────── */
/* Vertical padding stays slim on purpose: the whole card must fit a
   short laptop viewport (e.g. 1440×900 or 1280×832 logical minus
   browser chrome ≈ 680–720px below the 71px header) without scrolling. */
.auth-shell-form[b-ubytd6iixd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-4);
    background: var(--background-light);
}

.auth-shell-form-inner[b-ubytd6iixd] {
    width: 100%;
    max-width: 480px;
    animation: form-enter-b-ubytd6iixd var(--motion-slow) var(--ease-standard) both;
}

.auth-shell-wide .auth-shell-form-inner[b-ubytd6iixd] {
    max-width: 640px;
}

/* Bootstrap's default h2 (~2rem) is oversized for a dense auth card —
   cap every auth card's title so the card fits short laptop viewports
   (the child card renders with the page's CSS scope, hence ::deep). */
.auth-shell-form-inner[b-ubytd6iixd]  .card-title {
    font-size: var(--fs-2xl);
}

@keyframes form-enter-b-ubytd6iixd {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Mobile/tablet: panel hidden, form full width ────────── */
@media (max-width: 991px) {
    .auth-shell[b-ubytd6iixd] {
        grid-template-columns: 1fr;
    }

    .auth-shell-panel[b-ubytd6iixd] {
        display: none;
    }

    .auth-shell-form[b-ubytd6iixd] {
        padding: var(--space-5) var(--space-4);
    }
}
/* /Components/Shared/BadgeDisplay.razor.rz.scp.css */
.badge-display[b-syjh9ssii1] {
    align-items: center;
}

.badge-item[b-syjh9ssii1] {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.badge-item:hover[b-syjh9ssii1] {
    transform: translateY(-2px);
}

/* Circular badge container */
.badge-icon-circle[b-syjh9ssii1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.badge-item:hover .badge-icon-circle[b-syjh9ssii1] {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Badge tier color schemes */
.badge-verified .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: var(--text-inverse);
}

.badge-superhost .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: var(--text-inverse);
}

.badge-premium .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    color: var(--text-inverse);
}

.badge-platinum .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #E5E7EB 0%, #F9FAFB 100%);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.badge-gold .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
    color: var(--color-warning);
}

.badge-silver .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #94A3B8 0%, #CBD5E1 100%);
    color: var(--text-secondary);
}

.badge-bronze .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    color: var(--text-inverse);
}

.badge-default .badge-icon-circle[b-syjh9ssii1] {
    background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
    color: var(--text-inverse);
}

/* Icon styling - Images */
.badge-icon-img[b-syjh9ssii1] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Icon styling - Bootstrap Icons */
.badge-bootstrap-icon[b-syjh9ssii1] {
    font-size: 20px;
    line-height: 1;
}

.badge-name[b-syjh9ssii1] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* More badges indicator */
.badge-more-wrapper[b-syjh9ssii1] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.badge-more-circle[b-syjh9ssii1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--background-light);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.badge-more-wrapper:hover .badge-more-circle[b-syjh9ssii1] {
    background: var(--background-light);
    border-color: var(--text-secondary);
}

.badge-more-text[b-syjh9ssii1] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Empty state */
.no-badges-placeholder[b-syjh9ssii1] {
    padding: 2rem;
    background: var(--surface-subtle);
    border-radius: 12px;
    border: 2px dashed var(--border-color);
    width: 100%;
}

.empty-badge-icon[b-syjh9ssii1] {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    color: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-badge-icon i[b-syjh9ssii1] {
    font-size: 48px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .badge-icon-circle[b-syjh9ssii1],
    .badge-more-circle[b-syjh9ssii1] {
        width: 36px;
        height: 36px;
    }

    .badge-icon-img[b-syjh9ssii1] {
        width: 20px;
        height: 20px;
    }

    .badge-bootstrap-icon[b-syjh9ssii1] {
        font-size: 18px;
    }
}
/* /Components/Shared/BadgeIcon.razor.rz.scp.css */
.badge-icon-svg[b-3dvgi67pbo] {
    font-size: 24px;
    display: inline-block;
    line-height: 1;
}
/* /Components/Shared/BadgeShowcase.razor.rz.scp.css */
.badge-showcase[b-0dy9fxiw4i] {
    width: 100%;
}

.badges-grid[b-0dy9fxiw4i] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.badge-showcase-item[b-0dy9fxiw4i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.badge-showcase-item:hover[b-0dy9fxiw4i] {
    transform: translateY(-2px);
}

/* Circular badge icon container */
.badge-icon-circle[b-0dy9fxiw4i] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.badge-showcase-item:hover .badge-icon-circle[b-0dy9fxiw4i] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: scale(1.05);
}

/* Badge category/type color schemes */
.badge-verified .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: var(--text-inverse);
}

.badge-quality .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
    color: var(--color-warning);
}

.badge-efficiency .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: var(--text-inverse);
}

.badge-milestone .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    color: var(--text-inverse);
}

.badge-platinum .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #E5E7EB 0%, #F9FAFB 100%);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.badge-gold .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
    color: var(--color-warning);
}

.badge-silver .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #94A3B8 0%, #CBD5E1 100%);
    color: var(--text-secondary);
}

.badge-bronze .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%);
    color: var(--text-inverse);
}

.badge-default .badge-icon-circle[b-0dy9fxiw4i] {
    background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
    color: var(--text-inverse);
}

/* Icon sizing - Image icons */
.badge-icon[b-0dy9fxiw4i] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(1.1);
}

/* Icon sizing - Bootstrap Icons */
.badge-icon-bootstrap[b-0dy9fxiw4i] {
    font-size: 22px;
    line-height: 1;
}

/* Badge label (when ShowNames is true) */
.badge-label[b-0dy9fxiw4i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.badge-name[b-0dy9fxiw4i] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.badge-tier[b-0dy9fxiw4i] {
    font-size: 0.625rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .badges-grid[b-0dy9fxiw4i] {
        gap: 8px;
    }

    .badge-icon-circle[b-0dy9fxiw4i] {
        width: 40px;
        height: 40px;
    }

    .badge-icon[b-0dy9fxiw4i] {
        width: 22px;
        height: 22px;
    }

    .badge-icon-bootstrap[b-0dy9fxiw4i] {
        font-size: 20px;
    }

    .badge-name[b-0dy9fxiw4i] {
        font-size: 0.8125rem;
    }
}
/* /Components/Shared/Brand/BrandProfilePanel.razor.rz.scp.css */
/* ── Hero Card ───────────────────────────────────────────── */
.brand-hero-card[b-xoblksv8v8] {
    overflow: hidden;
}

.brand-banner-image[b-xoblksv8v8] {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.brand-banner-placeholder[b-xoblksv8v8] {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-warm);
    color: var(--text-secondary);
    font-size: 2.25rem;
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .brand-banner-image[b-xoblksv8v8],
    .brand-banner-placeholder[b-xoblksv8v8] {
        height: 180px;
    }
}

.brand-hero-body[b-xoblksv8v8] {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* ── Logo Circle ─────────────────────────────────────────── */
.brand-logo-circle[b-xoblksv8v8] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: var(--shadow-sm);
    background: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -2.5rem;
    position: relative;
    z-index: 2;
}

.brand-logo-img[b-xoblksv8v8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-logo-initials[b-xoblksv8v8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* ── Hero Text ───────────────────────────────────────────── */
.brand-hero-name[b-xoblksv8v8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.brand-hero-tagline[b-xoblksv8v8] {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.fs-small[b-xoblksv8v8] {
    font-size: 0.7rem;
}

/* ── Stats Row ───────────────────────────────────────────── */
.stats-row[b-xoblksv8v8] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.stat-item[b-xoblksv8v8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.stat-value[b-xoblksv8v8] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-label[b-xoblksv8v8] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
    text-align: center;
    white-space: nowrap;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .brand-hero-name[b-xoblksv8v8] {
        font-size: 1.25rem;
    }

    .stats-row[b-xoblksv8v8] {
        gap: 1rem;
        justify-content: space-around;
    }

    .brand-logo-circle[b-xoblksv8v8] {
        margin-top: -2rem;
    }

    .brand-hero-body[b-xoblksv8v8] {
        padding: 1rem;
    }
}

/* ── Loading skeleton ────────────────────────────────────── */
.brand-panel-skeleton[b-xoblksv8v8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Prevents vertical reflow when the hero card (banner ~140px + body ~160px) replaces
       the skeleton. 300px covers the common case without a completion bar. */
    min-height: 300px;
}
/* /Components/Shared/Brand/CampaignsPanel.razor.rz.scp.css */
/* ── Campaign Card ───────────────────────────────────────── */
.campaign-card[b-uvvcvdb2uy] {
    border-radius: var(--border-radius);
    transition: transform var(--motion-base) var(--ease-standard),
                box-shadow var(--motion-base) var(--ease-standard);
}

.campaign-card-img[b-uvvcvdb2uy] {
    height: 150px;
    object-fit: cover;
    width: 100%;
}

.campaign-img-placeholder[b-uvvcvdb2uy] {
    height: 150px;
    background: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.description-clamp[b-uvvcvdb2uy] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .card-footer .btn[b-uvvcvdb2uy] {
        min-height: 44px;
    }
}

/* ── Skeleton grid (mirrors the campaigns grid — no layout jump) ── */
.campaigns-skeleton-grid > div[b-uvvcvdb2uy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Card entrance ───────────────────────────────────────── */
.campaigns-grid > *[b-uvvcvdb2uy] {
    animation: card-enter-b-uvvcvdb2uy var(--motion-slow) var(--ease-standard) both;
}

.campaigns-grid > *:nth-child(2)[b-uvvcvdb2uy] { animation-delay: 60ms; }
.campaigns-grid > *:nth-child(3)[b-uvvcvdb2uy] { animation-delay: 120ms; }
.campaigns-grid > *:nth-child(4)[b-uvvcvdb2uy] { animation-delay: 180ms; }
.campaigns-grid > *:nth-child(5)[b-uvvcvdb2uy] { animation-delay: 240ms; }
.campaigns-grid > *:nth-child(n+6)[b-uvvcvdb2uy] { animation-delay: 300ms; }

@keyframes card-enter-b-uvvcvdb2uy {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
/* =====================================================================
   CommandPalette — unified search + hoastie chat modal
   Replaces OmniSearchPalette and the authenticated FloatingChat surface.
   All tokens come from app.css; no hardcoded hex.
   ===================================================================== */

.cp-overlay[b-w5dgnxl1af] {
    position: fixed;
    inset: 0;
    background: var(--overlay-strong);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12vh;
    animation: cp-fade-in-b-w5dgnxl1af 0.12s ease-out;
}

@keyframes cp-fade-in-b-w5dgnxl1af {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Card chrome shared by both modes */
.cp-card[b-w5dgnxl1af] {
    width: 100%;
    max-width: 640px;
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: cp-card-in-b-w5dgnxl1af 0.16s ease-out;
}

.cp-card-search[b-w5dgnxl1af] {
    max-height: 80vh;
}

.cp-card-chat[b-w5dgnxl1af] {
    max-width: 720px;
    height: min(640px, 80vh);
}

@keyframes cp-card-in-b-w5dgnxl1af {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   Search mode
   ===================================================================== */

.cp-input-row[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cp-input-icon[b-w5dgnxl1af] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cp-input[b-w5dgnxl1af] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-family: inherit;
    padding: 0;
}

.cp-input[b-w5dgnxl1af]::placeholder {
    color: var(--text-secondary);
}

.cp-spinner[b-w5dgnxl1af] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cp-results[b-w5dgnxl1af] {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0 0.5rem;
    min-height: 0;
}

.cp-empty[b-w5dgnxl1af] {
    padding: 2.25rem 1.25rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cp-group-header[b-w5dgnxl1af] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 0.75rem 1.25rem 0.25rem;
    margin-top: 0.25rem;
}

.cp-row[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    height: 56px;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.cp-row:hover[b-w5dgnxl1af] {
    background: var(--surface-subtle);
}

.cp-row.selected[b-w5dgnxl1af] {
    background: var(--surface-subtle);
    border-left-color: var(--focus-ring);
}

.cp-row:focus-visible[b-w5dgnxl1af] {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

.cp-row-icon[b-w5dgnxl1af] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.cp-row.selected .cp-row-icon[b-w5dgnxl1af] {
    color: var(--primary-color);
}

.cp-row-text[b-w5dgnxl1af] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cp-row-title[b-w5dgnxl1af] {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-row-subtitle[b-w5dgnxl1af] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-row-enter[b-w5dgnxl1af] {
    opacity: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: opacity 0.12s ease;
}

.cp-row.selected .cp-row-enter[b-w5dgnxl1af] {
    opacity: 1;
}

/* The Ask Hoastie row pinned at the top of the results list */
.cp-ask-row[b-w5dgnxl1af] {
    border-bottom: 1px solid var(--border-subtle);
    background: var(--accent-muted);
}

.cp-ask-row .cp-row-icon[b-w5dgnxl1af] {
    color: var(--primary-color);
}

.cp-ask-row .cp-row-title[b-w5dgnxl1af] {
    font-weight: 600;
    color: var(--primary-color);
}

.cp-ask-row:hover[b-w5dgnxl1af] {
    background: var(--accent-muted);
    filter: brightness(0.96);
}

.cp-ask-row.selected[b-w5dgnxl1af] {
    background: var(--accent-muted);
    border-left-color: var(--primary-color);
    filter: brightness(0.96);
}

.cp-footer[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.6rem 1.25rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-canvas);
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.cp-footer kbd[b-w5dgnxl1af] {
    background: var(--background-light);
    color: var(--text-secondary);
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-right: 0.3rem;
}

/* =====================================================================
   Chat mode
   ===================================================================== */

.cp-chat-header[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
}

.cp-back-btn[b-w5dgnxl1af] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.3rem 0.55rem;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cp-back-btn:hover[b-w5dgnxl1af] {
    background: var(--surface-raised);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.cp-chat-title[b-w5dgnxl1af] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    justify-content: center;
}

.cp-chat-actions[b-w5dgnxl1af] {
    display: flex;
    gap: 0.25rem;
}

.cp-icon-btn[b-w5dgnxl1af] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-size: 0.85rem;
}

.cp-icon-btn:hover[b-w5dgnxl1af] {
    background: var(--surface-raised);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.cp-icon-btn.active[b-w5dgnxl1af] {
    background: var(--accent-muted);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.cp-chat-messages[b-w5dgnxl1af] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-subtle) 100%);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.cp-chat-welcome[b-w5dgnxl1af] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cp-chat-welcome-title[b-w5dgnxl1af] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-secondary);
}

.cp-chat-quicks[b-w5dgnxl1af] {
    display: grid;
    gap: 0.4rem;
}

.cp-chat-quick[b-w5dgnxl1af] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cp-chat-quick:hover[b-w5dgnxl1af] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.cp-chat-quick-icon[b-w5dgnxl1af] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--border-radius);
    background: var(--accent-muted);
    color: var(--primary-color);
    font-size: 0.85rem;
}

.cp-msg[b-w5dgnxl1af] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cp-msg-user[b-w5dgnxl1af] {
    justify-content: flex-end;
}

.cp-msg-assistant[b-w5dgnxl1af] {
    justify-content: flex-start;
}

.cp-msg-avatar[b-w5dgnxl1af] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius);
    background: var(--accent-muted);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.cp-msg-bubble[b-w5dgnxl1af] {
    max-width: min(84%, 22rem);
    padding: 0.85rem 1rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.cp-msg-bubble-user[b-w5dgnxl1af] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: var(--text-inverse);
    border-color: transparent;
}

.cp-msg-bubble-assistant[b-w5dgnxl1af] {
    background: var(--surface-raised);
    color: var(--text-primary);
}

.cp-msg-content[b-w5dgnxl1af] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.55;
    font-size: 0.92rem;
}

.cp-msg-time[b-w5dgnxl1af] {
    margin-top: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.cp-msg-bubble-user .cp-msg-time[b-w5dgnxl1af] {
    color: var(--text-inverse);
    opacity: 0.85;
}

.cp-typing-cursor[b-w5dgnxl1af] {
    animation: cp-blink-b-w5dgnxl1af 1s infinite;
    font-weight: 700;
}

@keyframes cp-blink-b-w5dgnxl1af {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.cp-chat-input-area[b-w5dgnxl1af] {
    padding: 0.75rem 1rem 0.875rem;
    background: var(--surface-raised);
    border-top: 1px solid var(--border-color);
}

.cp-chat-error[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
}

.cp-chat-composer[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--surface-subtle);
    box-shadow: var(--shadow-sm);
}

.cp-chat-input[b-w5dgnxl1af] {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    padding: 0.4rem 0.55rem;
    font-size: 0.9rem;
    outline: none;
}

.cp-chat-send[b-w5dgnxl1af] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cp-chat-send:hover:not(:disabled)[b-w5dgnxl1af] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.cp-chat-send:disabled[b-w5dgnxl1af] {
    opacity: 0.55;
    cursor: not-allowed;
}

.cp-chat-meta[b-w5dgnxl1af] {
    margin-top: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-align: center;
}

/* Chat history panel (inline within messages area) */
.cp-chat-history[b-w5dgnxl1af] {
    padding: 0.5rem 0.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cp-history-head[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.75rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cp-history-new-btn[b-w5dgnxl1af] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.cp-history-new-btn:hover[b-w5dgnxl1af] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.cp-history-loading[b-w5dgnxl1af],
.cp-history-empty[b-w5dgnxl1af] {
    padding: 0.75rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.cp-history-row[b-w5dgnxl1af] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    padding: 0.45rem 0.6rem;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
}

.cp-history-row:hover[b-w5dgnxl1af] {
    background: var(--surface-subtle);
}

.cp-history-row.active[b-w5dgnxl1af] {
    background: var(--accent-muted);
    border-color: var(--primary-color);
}

.cp-history-meta[b-w5dgnxl1af] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.cp-history-preview[b-w5dgnxl1af] {
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-history-time[b-w5dgnxl1af] {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.cp-history-badge[b-w5dgnxl1af] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--primary-color);
    color: var(--text-inverse);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Conversational suggestion chips (welcome state) */
.cp-chat-welcome-lead[b-w5dgnxl1af] {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.cp-chat-suggestions[b-w5dgnxl1af] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cp-suggestion-chip[b-w5dgnxl1af] {
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.cp-suggestion-chip:hover[b-w5dgnxl1af] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--accent-muted);
}

/* =====================================================================
   Phones
   ===================================================================== */

@media (max-width: 575px) {
    .cp-overlay[b-w5dgnxl1af] { padding-top: 6vh; }
    .cp-card[b-w5dgnxl1af] { margin: 0 0.5rem; max-height: 88vh; }
    .cp-card-chat[b-w5dgnxl1af] { height: 88vh; }
    .cp-input[b-w5dgnxl1af] { font-size: 1rem; }
    .cp-row[b-w5dgnxl1af] { height: 52px; padding: 0.65rem 1rem; }
    .cp-footer[b-w5dgnxl1af] { gap: 0.6rem; font-size: 0.7rem; }
    .cp-msg-bubble[b-w5dgnxl1af] { max-width: 88%; }
}

/* Touch devices: expand icon buttons and send button to ≥44px hit areas
   without changing their visual sizes (which are sized for desktop density). */
@media (hover: none) {
    .cp-icon-btn[b-w5dgnxl1af] {
        min-width: 44px;
        min-height: 44px;
    }

    .cp-chat-send[b-w5dgnxl1af] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Rich result cards rendered inside Hoastie chat bubbles (internal concierge).
   Designed to feel like a mini version of the main search result cards, but
   compact enough to live inside the chat modal. Matches the rich widgets that
   external MCP clients (Claude/ChatGPT) receive for the same search tool. */
.hoastie-result-cards[b-w5dgnxl1af] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.hoastie-mini-card[b-w5dgnxl1af] {
    flex: 0 0 158px;
    min-width: 158px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-raised);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    font-size: 0.72rem;
    line-height: 1.25;
}

.hoastie-mini-card:hover[b-w5dgnxl1af] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.hoastie-mini-card-img[b-w5dgnxl1af] {
    width: 100%;
    height: 68px;
    object-fit: cover;
    display: block;
    background: var(--surface-subtle);
}

.hoastie-mini-card-body[b-w5dgnxl1af] {
    padding: 0.35rem 0.45rem 0.4rem;
}

.hoastie-mini-card-title[b-w5dgnxl1af] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hoastie-mini-card-subtitle[b-w5dgnxl1af] {
    color: var(--text-secondary);
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.05rem;
}

.hoastie-mini-card-meta[b-w5dgnxl1af] {
    color: var(--text-secondary);
    font-size: 0.64rem;
    margin-top: 0.2rem;
}
/* /Components/Shared/DashboardShell.razor.rz.scp.css */
.dashboard-shell[b-ojidmuqpb5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.25rem 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.shell-hero-right-only[b-ojidmuqpb5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Hero — clean page header (no gradient, no shadow) */
.shell-hero[b-ojidmuqpb5] {
    background: transparent;
    color: var(--text-primary);
    border-radius: 0;
    padding: 0.5rem 0 1.25rem;
    box-shadow: none;
    margin-top: 0.5rem;
    position: relative;
    overflow: visible;
    border-bottom: 1px solid var(--border-color);
}

.shell-hero-inner[b-ojidmuqpb5] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.shell-hero-text[b-ojidmuqpb5] {
    min-width: 0;
}

.shell-eyebrow[b-ojidmuqpb5] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.shell-title[b-ojidmuqpb5] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.2rem 0;
    line-height: 1.2;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.shell-subtitle[b-ojidmuqpb5] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.shell-hero-right[b-ojidmuqpb5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Tabs */
.shell-tabs[b-ojidmuqpb5] {
    display: flex;
    gap: 0.25rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.3rem;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    scrollbar-width: none;
    align-self: center;
}

.shell-tabs[b-ojidmuqpb5]::-webkit-scrollbar {
    display: none;
}

.shell-tab[b-ojidmuqpb5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.shell-tab i[b-ojidmuqpb5] {
    font-size: 1rem;
}

.shell-tab:hover[b-ojidmuqpb5] {
    color: var(--text-primary);
    background: var(--background-light);
}

.shell-tab.active[b-ojidmuqpb5] {
    background: var(--text-primary);
    color: var(--text-inverse);
}

.shell-tab.active:hover[b-ojidmuqpb5] {
    background: var(--text-primary);
}

.shell-tab-count[b-ojidmuqpb5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--text-inverse);
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.1rem;
}

.shell-tab.active .shell-tab-count[b-ojidmuqpb5] {
    background: var(--surface-raised);
    color: var(--text-primary);
}

/* Content */
.shell-content[b-ojidmuqpb5] {
    /* Content participates in the layout-level scroller (<main> on desktop).
       No artificial cap needed; pages/tabs size naturally inside the scroll area. */
    min-height: 0;
}

@media (max-width: 991px) {
    .dashboard-shell[b-ojidmuqpb5] {
        padding: 1.25rem 0.875rem 1rem;
    }

    .shell-hero[b-ojidmuqpb5] {
        padding: 1.2rem 1.25rem;
    }

    .shell-title[b-ojidmuqpb5] {
        font-size: 1.45rem;
    }

    .shell-tabs[b-ojidmuqpb5] {
        align-self: stretch;
    }
}
/* /Components/Shared/DrawerPanel.razor.rz.scp.css */
.drawer-backdrop[b-1490bh1gvw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1040;
    animation: backdropFadeIn-b-1490bh1gvw 0.2s ease;
}

@keyframes backdropFadeIn-b-1490bh1gvw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drawer-panel[b-1490bh1gvw] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--surface-raised);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.14);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    /* Safe-area padding for notched/wide-screen devices on the desktop right side */
    padding-right: env(safe-area-inset-right, 0px);
}

.drawer-panel--open[b-1490bh1gvw] {
    transform: translateX(0);
}

.drawer-header[b-1490bh1gvw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 0.75rem;
}

.drawer-title-area[b-1490bh1gvw] {
    flex: 1;
    min-width: 0;
}

.drawer-title[b-1490bh1gvw] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ≥44×44px so the close target is comfortably tappable on all devices. */
.drawer-close-btn[b-1490bh1gvw] {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drawer-close-btn:hover[b-1490bh1gvw] {
    background: var(--background-light);
    color: var(--text-primary);
}

.drawer-body[b-1490bh1gvw] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.drawer-footer[b-1490bh1gvw] {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Phone bottom-sheet variant (≤575px) ────────────────────────────────
   Below 576px the panel becomes a bottom sheet sliding in from the bottom.
   The transition property covers `transform` on both axes, so the translateX
   (desktop) and translateY (phone) both animate via the same rule.
   Drag-to-close is out of scope — Esc key, backdrop tap, and the close
   button provide sufficient dismissal on touch. */
@media (max-width: 575px) {
    .drawer-panel[b-1490bh1gvw] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.14);
        /* Replace the desktop translateX with a vertical translateY */
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-right: 0; /* no side notch padding on phone sheet */
        /* Keep clipping: the ::before grab handle is a normal-flow flex
           item INSIDE the panel, so it never needed overflow:visible —
           hidden preserves the rounded-corner clipping safety net. */
        overflow: hidden;
    }

    .drawer-panel.drawer-panel--open[b-1490bh1gvw] {
        transform: translateY(0);
    }

    /* Grab handle — visual affordance for the sheet edge */
    .drawer-panel[b-1490bh1gvw]::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: var(--border-color);
        margin: var(--space-2) auto 0;
        flex-shrink: 0;
    }

}

/* Legacy narrow-phone rule removed — width:100% is already set by the ≤575px
   bottom-sheet block above; the dead override was harmless but needless. */
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* ── EmptyState component ───────────────────────────────────────────────── */
.empty-state[b-ahw2t729n8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-secondary);
}

.empty-state.compact[b-ahw2t729n8] {
    padding: 1.5rem 1rem;
}

/* Icon circle */
.empty-state-icon[b-ahw2t729n8] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.empty-state-icon i[b-ahw2t729n8] {
    font-size: 2rem;
    color: var(--primary-color);
}

.empty-state.compact .empty-state-icon[b-ahw2t729n8] {
    width: 48px;
    height: 48px;
}

.empty-state.compact .empty-state-icon i[b-ahw2t729n8] {
    font-size: 1.5rem;
}

/* Title */
.empty-state-title[b-ahw2t729n8] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.5rem 0 0;
    line-height: 1.3;
}

/* Description */
.empty-state-description[b-ahw2t729n8] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
    margin: 1rem 0 0;
}

/* CTA slot */
.empty-state-action[b-ahw2t729n8] {
    margin-top: 1.5rem;
}
/* /Components/Shared/EventTypeCombobox.razor.rz.scp.css */
/* EventTypeCombobox — positioned relative so the popover anchors to it.
   Uses flex-row so the icon sits beside the input (within the stacked segment). */
.et-combobox[b-josyftdr22] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Leading tag icon — sits inline at the left of the input row */
.et-icon[b-josyftdr22] {
    flex-shrink: 0;
    color: var(--primary-color);
    pointer-events: none;
    font-size: 0.75rem;
    margin-right: 3px;
    z-index: 2;
}

/* The text input — spans available width; height is natural (not 100%) so it
   sits inline within the stacked segment row below the micro-label. */
.et-input[b-josyftdr22] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    padding: 0 1.75rem 0 1.5rem;  /* right room for clear btn, left room for icon */
    outline: none;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: text;
    line-height: 1.2;
}

.et-input[b-josyftdr22]::placeholder {
    color: var(--text-secondary);
}

/* Clear (×) button — absolute within the relative combobox wrapper */
.et-clear[b-josyftdr22] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 2px 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: color 0.2s ease;
    z-index: 2;
    flex-shrink: 0;
    line-height: 1;
}

.et-clear:hover[b-josyftdr22] {
    color: var(--primary-color);
}

/* Suggestion popover */
.et-popover[b-josyftdr22] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    z-index: 1000;
    animation: et-dropdown-in-b-josyftdr22 0.12s ease;
}

/* Scrollbar */
.et-popover[b-josyftdr22]::-webkit-scrollbar {
    width: 4px;
}

.et-popover[b-josyftdr22]::-webkit-scrollbar-track {
    background: var(--background-light);
}

.et-popover[b-josyftdr22]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* Individual suggestion item */
.et-option[b-josyftdr22] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.et-option:hover[b-josyftdr22] {
    background: var(--background-light);
}

.et-option:focus-visible[b-josyftdr22] {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* "Any event type" clear item — slightly muted to differentiate */
.et-option-any[b-josyftdr22] {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.25rem;
    padding-bottom: 0.625rem;
}

.et-option-any:hover[b-josyftdr22] {
    color: var(--text-primary);
    background: var(--background-light);
}

/* Active/selected item accent */
.et-option-active[b-josyftdr22] {
    background: var(--background-light);
    font-weight: 600;
    color: var(--primary-color);
}

.et-option-active[b-josyftdr22]::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    margin-left: auto;
}

@keyframes et-dropdown-in-b-josyftdr22 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero-variant sizing adjustments: the combobox lives in a stacked hero segment */
.et-hero .et-icon[b-josyftdr22] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-right: 5px;
}

.et-hero .et-input[b-josyftdr22] {
    font-size: 0.95rem;
    padding: 0 2rem 0 0;
}

.et-hero .et-clear[b-josyftdr22] {
    right: 0;
    font-size: 0.8rem;
}
/* /Components/Shared/Images/ImageUpload.razor.rz.scp.css */
/* ============================================================
   ImageUpload — unified single + multi-photo upload component
   All class names use the iu- prefix to avoid collisions.
   ============================================================ */

/* ---- File input: always hidden (label wraps it) ---- */
[b-f1a7qmopf9] .iu-file-input {
    display: none;
}

/* ===========================================================
   SINGLE PHOTO MODE  (.iu-single)
   =========================================================== */
.iu-single[b-f1a7qmopf9] {
    position: relative;
    width: 100%;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius, 12px);
    background: var(--background-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    transition: border-color 0.2s ease;
}

.iu-single:hover[b-f1a7qmopf9] {
    border-color: var(--primary-color);
}

/* Uploaded image fills the container */
.iu-preview[b-f1a7qmopf9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay on top of uploaded image (edit/remove buttons) */
.iu-overlay[b-f1a7qmopf9] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.4rem;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.iu-single:hover .iu-overlay[b-f1a7qmopf9],
.iu-single:focus-within .iu-overlay[b-f1a7qmopf9] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.25);
}

/* Action buttons (single mode) */
.iu-btn-action[b-f1a7qmopf9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 44px;
    min-width: 44px;
    border: none;
    border-radius: 50%;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
    line-height: 1;
}

.iu-btn-action:focus-visible[b-f1a7qmopf9] {
    outline: 2px solid var(--surface-raised);
    outline-offset: 2px;
}

.iu-btn-remove[b-f1a7qmopf9] {
    background: rgba(220, 53, 69, 0.9);
    color: var(--text-inverse);
}

.iu-btn-remove:hover[b-f1a7qmopf9] {
    background: var(--color-danger);
    transform: scale(1.1);
}

.iu-btn-change[b-f1a7qmopf9] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
}

.iu-btn-change:hover[b-f1a7qmopf9] {
    background: var(--surface-raised);
    transform: scale(1.1);
}

/* Spinner overlay (single mode) */
.iu-spinner[b-f1a7qmopf9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 2rem;
}

/* Empty placeholder (single mode) */
.iu-placeholder[b-f1a7qmopf9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
    min-height: inherit;
    min-height: 44px;
    cursor: pointer;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.iu-single:hover .iu-placeholder[b-f1a7qmopf9] {
    color: var(--primary-color);
}

.iu-placeholder-icon[b-f1a7qmopf9] {
    font-size: 2rem;
}

.iu-placeholder-text[b-f1a7qmopf9] {
    font-weight: 600;
    font-size: 0.875rem;
}

.iu-placeholder-hint[b-f1a7qmopf9] {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Inline error (single mode — pinned to bottom of container) */
.iu-single .iu-error[b-f1a7qmopf9] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(220, 53, 69, 0.92);
    color: var(--text-inverse);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    text-align: center;
}

/* ===========================================================
   MULTI PHOTO MODE  (.iu-grid)
   =========================================================== */
.iu-grid[b-f1a7qmopf9] {
    width: 100%;
}

.iu-grid-slots[b-f1a7qmopf9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .iu-grid-slots[b-f1a7qmopf9] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 360px) {
    .iu-grid-slots[b-f1a7qmopf9] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Each slot is a square */
.iu-slot[b-f1a7qmopf9] {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius, 12px);
    background: var(--background-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.iu-slot:hover[b-f1a7qmopf9] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
}

/* Cover slot has a solid primary border */
.iu-slot-cover[b-f1a7qmopf9] {
    border-color: var(--primary-color);
    border-style: solid;
}

/* Uploading slot: muted + non-interactive */
.iu-slot-uploading[b-f1a7qmopf9] {
    pointer-events: none;
    opacity: 0.7;
}

/* Image fills slot */
.iu-slot-image[b-f1a7qmopf9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spinner inside a slot */
.iu-slot-spinner[b-f1a7qmopf9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Action buttons (multi mode) */
.iu-slot-actions[b-f1a7qmopf9] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem;
}

.iu-btn-slot[b-f1a7qmopf9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    line-height: 1;
}

.iu-btn-slot:focus-visible[b-f1a7qmopf9] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.iu-btn-remove-slot[b-f1a7qmopf9] {
    background: rgba(220, 53, 69, 0.85);
    color: var(--text-inverse);
}

.iu-btn-remove-slot:hover[b-f1a7qmopf9] {
    background: rgba(220, 53, 69, 1);
    transform: scale(1.1);
}

.iu-btn-set-cover[b-f1a7qmopf9] {
    background: rgba(255, 193, 7, 0.85);
    color: var(--text-primary);
}

.iu-btn-set-cover:hover[b-f1a7qmopf9] {
    background: rgba(255, 193, 7, 1);
    transform: scale(1.1);
}

/* Cover badge (non-interactive, index 0) */
.iu-cover-badge[b-f1a7qmopf9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.9);
    color: var(--text-primary);
    font-size: 0.75rem;
}

/* Add-photo slot */
.iu-slot-add[b-f1a7qmopf9] {
    cursor: pointer;
    border-style: dashed;
}

.iu-slot-add:hover[b-f1a7qmopf9] {
    border-color: var(--primary-color);
    background: rgba(255, 56, 92, 0.04);
}

.iu-slot-add-label[b-f1a7qmopf9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    height: 100%;
    min-height: 44px;
    cursor: pointer;
    padding: 0.5rem;
    text-align: center;
}

.iu-slot-add-icon[b-f1a7qmopf9] {
    font-size: 1.75rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.iu-slot-add:hover .iu-slot-add-icon[b-f1a7qmopf9] {
    color: var(--primary-color);
}

.iu-slot-add-text[b-f1a7qmopf9] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Hint text (multi mode) */
.iu-hint[b-f1a7qmopf9] {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Inline error (grid/multi mode — shown above the grid as an alert) */
.iu-grid .iu-error[b-f1a7qmopf9] {
    font-size: 0.75rem;
}
/* /Components/Shared/Images/ImageUploadGrid.razor.rz.scp.css */
/* ---- Photo Upload Grid ---- */
.photo-grid[b-pkosi1c9h3] {
    width: 100%;
}

.grid-slots[b-pkosi1c9h3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .grid-slots[b-pkosi1c9h3] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Each slot is a square */
.photo-slot[b-pkosi1c9h3] {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius, 12px);
    background: var(--background-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.photo-slot:hover[b-pkosi1c9h3] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
}

.slot-cover[b-pkosi1c9h3] {
    border-color: var(--primary-color);
    border-style: solid;
}

.slot-uploading[b-pkosi1c9h3] {
    pointer-events: none;
    opacity: 0.7;
}

/* Image fill */
.slot-image[b-pkosi1c9h3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spinner overlay */
.slot-spinner[b-pkosi1c9h3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Action buttons overlay */
.slot-actions[b-pkosi1c9h3] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem;
}

.btn-slot[b-pkosi1c9h3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    line-height: 1;
}

.btn-slot:focus-visible[b-pkosi1c9h3] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-remove[b-pkosi1c9h3] {
    background: rgba(220, 53, 69, 0.85);
    color: var(--text-inverse);
}

.btn-remove:hover[b-pkosi1c9h3] {
    background: rgba(220, 53, 69, 1);
    transform: scale(1.1);
}

.btn-set-cover[b-pkosi1c9h3] {
    background: rgba(255, 193, 7, 0.85);
    color: var(--text-primary);
}

.btn-set-cover:hover[b-pkosi1c9h3] {
    background: rgba(255, 193, 7, 1);
    transform: scale(1.1);
}

/* Cover badge (non-interactive) */
.slot-cover-badge[b-pkosi1c9h3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.9);
    color: var(--text-primary);
    font-size: 0.75rem;
}

/* Pending file placeholder */
.slot-pending[b-pkosi1c9h3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem;
    text-align: center;
    width: 100%;
    height: 100%;
}

.slot-pending-icon[b-pkosi1c9h3] {
    font-size: 1.75rem;
    color: var(--text-secondary);
}

.slot-pending-name[b-pkosi1c9h3] {
    font-size: 0.65rem;
    color: var(--text-secondary);
    word-break: break-all;
    line-height: 1.2;
}

/* Per-slot validation error */
.slot-error[b-pkosi1c9h3] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(220, 53, 69, 0.9);
    color: var(--text-inverse);
    font-size: 0.6rem;
    padding: 0.2rem 0.3rem;
    text-align: center;
    line-height: 1.2;
}

/* Add-photo slot */
.slot-add[b-pkosi1c9h3] {
    cursor: pointer;
    border-style: dashed;
}

.slot-add:hover[b-pkosi1c9h3] {
    border-color: var(--primary-color);
    background: rgba(255, 56, 92, 0.04);
}

.slot-add-label[b-pkosi1c9h3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0.5rem;
    text-align: center;
}

[b-pkosi1c9h3] .slot-file-input {
    display: none;
}

.slot-add-icon[b-pkosi1c9h3] {
    font-size: 1.75rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.slot-add:hover .slot-add-icon[b-pkosi1c9h3] {
    color: var(--primary-color);
}

.slot-add-text[b-pkosi1c9h3] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Hint text */
.photo-hint[b-pkosi1c9h3] {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Responsive: 2-column on mobile, keep grid tight */
@media (max-width: 360px) {
    .grid-slots[b-pkosi1c9h3] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}
/* /Components/Shared/Images/ImageUploadSingle.razor.rz.scp.css */
/* ---- Single Image Upload ---- */
.single-upload[b-opwmr9oux0] {
    position: relative;
    width: 100%;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius, 12px);
    background: var(--background-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    transition: border-color 0.2s ease;
}

.single-upload:hover[b-opwmr9oux0] {
    border-color: var(--primary-color);
}

/* Uploaded image fills the container */
.upload-preview[b-opwmr9oux0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay on top of uploaded image (edit/remove buttons) */
.upload-overlay[b-opwmr9oux0] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.4rem;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.single-upload:hover .upload-overlay[b-opwmr9oux0],
.single-upload:focus-within .upload-overlay[b-opwmr9oux0] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.25);
}

.btn-upload-action[b-opwmr9oux0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
    line-height: 1;
}

.btn-upload-action:focus-visible[b-opwmr9oux0] {
    outline: 2px solid var(--surface-raised);
    outline-offset: 2px;
}

.btn-upload-remove[b-opwmr9oux0] {
    background: rgba(220, 53, 69, 0.9);
    color: var(--text-inverse);
}

.btn-upload-remove:hover[b-opwmr9oux0] {
    background: var(--color-danger);
    transform: scale(1.1);
}

.btn-upload-change[b-opwmr9oux0] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
}

.btn-upload-change:hover[b-opwmr9oux0] {
    background: var(--surface-raised);
    transform: scale(1.1);
}

/* Spinner overlay */
.upload-spinner[b-opwmr9oux0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 2rem;
}

/* Empty placeholder */
.upload-placeholder[b-opwmr9oux0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
    min-height: inherit;
    cursor: pointer;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.single-upload:hover .upload-placeholder[b-opwmr9oux0] {
    color: var(--primary-color);
}

.upload-placeholder-icon[b-opwmr9oux0] {
    font-size: 2rem;
}

.upload-placeholder-text[b-opwmr9oux0] {
    font-weight: 600;
    font-size: 0.875rem;
}

.upload-placeholder-hint[b-opwmr9oux0] {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Hidden file input (accessibility: label wraps it) */
[b-opwmr9oux0] .hidden-file-input {
    display: none;
}

/* Inline error below the component */
.upload-error[b-opwmr9oux0] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(220, 53, 69, 0.92);
    color: var(--text-inverse);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    text-align: center;
}

/* Touch target enforcement — ensure label fills entire slot */
.upload-placeholder[b-opwmr9oux0],
.btn-upload-change[b-opwmr9oux0] {
    min-height: 44px;
    min-width: 44px;
}
/* /Components/Shared/InviteIntro.razor.rz.scp.css */
.invite-intro[b-h00zbefb9b] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid var(--color-info);
    background: var(--color-info-bg);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.invite-intro-icon[b-h00zbefb9b] {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-info);
}

.invite-intro-heading[b-h00zbefb9b] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.invite-intro-explainer[b-h00zbefb9b] {
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

.invite-intro-signup[b-h00zbefb9b] {
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.invite-intro-footer[b-h00zbefb9b] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}
/* /Components/Shared/KpiTile.razor.rz.scp.css */
.kpi-tile[b-4t2jf8pfw0] {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 132px;
    position: relative;
    overflow: hidden;
}

.kpi-tile:hover[b-4t2jf8pfw0] {
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.kpi-tile-highlight[b-4t2jf8pfw0] {
    background: var(--surface-color);
    border-color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.kpi-tile-highlight[b-4t2jf8pfw0]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--text-primary);
}

.kpi-tile-head[b-4t2jf8pfw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.kpi-tile-icon[b-4t2jf8pfw0] {
    font-size: 1.05rem;
    color: var(--text-secondary);
    background: var(--background-light);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kpi-tile-highlight .kpi-tile-icon[b-4t2jf8pfw0] {
    color: var(--text-primary);
    background: var(--background-light);
}

.kpi-tile-delta[b-4t2jf8pfw0] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    line-height: 1;
}

.kpi-tile-delta i[b-4t2jf8pfw0] {
    font-size: 0.7rem;
}

.delta-up[b-4t2jf8pfw0] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.delta-down[b-4t2jf8pfw0] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.delta-flat[b-4t2jf8pfw0] {
    background: var(--background-light);
    color: var(--text-secondary);
}

.kpi-tile-value[b-4t2jf8pfw0] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-tile-label[b-4t2jf8pfw0] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
}

.kpi-tile-spark[b-4t2jf8pfw0] {
    margin-top: 0.6rem;
    margin-left: -0.2rem;
    margin-right: -0.2rem;
}

@media (max-width: 768px) {
    .kpi-tile[b-4t2jf8pfw0] {
        min-height: 110px;
        padding: 0.85rem;
    }

    .kpi-tile-value[b-4t2jf8pfw0] {
        font-size: 1.3rem;
    }
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
.language-switcher[b-luajorj3op] {
    display: inline-flex;
}

.language-switcher-toggle[b-luajorj3op] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.35rem 0.6rem !important;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.language-switcher-toggle:hover[b-luajorj3op],
.language-switcher-toggle:focus-visible[b-luajorj3op] {
    background-color: var(--background-light);
    color: var(--primary-color);
    text-decoration: none;
}

.language-switcher-toggle .bi-translate[b-luajorj3op] {
    font-size: 1.05rem;
}

.language-switcher-label[b-luajorj3op] {
    font-size: 0.875rem;
    font-weight: 500;
}

.language-switcher-caret[b-luajorj3op] {
    font-size: 0.75rem;
    margin-left: 0.15rem;
}

.language-switcher .dropdown-menu[b-luajorj3op] {
    min-width: 12rem;
    padding: 0.35rem 0;
}

.language-switcher-item[b-luajorj3op] {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: start;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.language-switcher-item:hover[b-luajorj3op],
.language-switcher-item:focus-visible[b-luajorj3op] {
    background-color: var(--background-light);
    color: var(--text-primary);
}

.language-switcher-item.active[b-luajorj3op] {
    color: var(--primary-color);
    font-weight: 600;
}

.language-switcher-spacer[b-luajorj3op] {
    display: inline-block;
    width: 1em;
}

/* Inline variant — embedded inside another menu (e.g. the account dropdown). */
.language-switcher-inline-label[b-luajorj3op] {
    padding: 0.35rem 0.9rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* Hide the caret on tight mobile widths to keep header compact. */
@media (max-width: 575.98px) {
    .language-switcher-label[b-luajorj3op] {
        display: none;
    }
    .language-switcher-caret[b-luajorj3op] {
        display: none;
    }
}
/* /Components/Shared/LegalTranslatorsNote.razor.rz.scp.css */
.alert.border-0[b-x3nfedtbgg] {
    background-color: var(--color-info-bg);
    color: var(--text-primary);
    border-radius: var(--border-radius);
}

.alert.border-0 .bi-translate[b-x3nfedtbgg] {
    color: var(--color-info);
    flex-shrink: 0;
}
/* /Components/Shared/LocationAutocomplete.razor.rz.scp.css */
/* LocationAutocomplete — positioned relative so the popover anchors correctly.
   Uses flex-row so the icon sits beside the input within the stacked segment. */
.loc-autocomplete[b-5973vgp385] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Leading geo icon — sits inline at the left of the input row */
.loc-icon[b-5973vgp385] {
    flex-shrink: 0;
    color: var(--primary-color);
    pointer-events: none;
    font-size: 0.75rem;
    margin-right: 3px;
    z-index: 2;
}

/* The text input — spans available width; overflow ellipsis on long values */
.loc-input[b-5973vgp385] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    padding: 0 1.75rem 0 0;  /* right room for clear btn; icon is inline not absolute */
    outline: none;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: text;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loc-input[b-5973vgp385]::placeholder {
    color: var(--text-secondary);
}

/* Clear (×) button — absolute within the relative autocomplete wrapper */
.loc-clear[b-5973vgp385] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 2px 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: color 0.2s ease;
    z-index: 2;
    flex-shrink: 0;
    line-height: 1;
}

.loc-clear:hover[b-5973vgp385] {
    color: var(--primary-color);
}

/* Suggestion popover */
.loc-popover[b-5973vgp385] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    z-index: 1000;
    animation: loc-dropdown-in-b-5973vgp385 0.12s ease;
}

/* Scrollbar */
.loc-popover[b-5973vgp385]::-webkit-scrollbar {
    width: 4px;
}

.loc-popover[b-5973vgp385]::-webkit-scrollbar-track {
    background: var(--background-light);
}

.loc-popover[b-5973vgp385]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* Individual suggestion item */
.loc-option[b-5973vgp385] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.loc-option:hover[b-5973vgp385] {
    background: var(--background-light);
}

.loc-option:focus-visible[b-5973vgp385] {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.loc-option .bi-geo-alt-fill[b-5973vgp385] {
    color: var(--primary-color);
    font-size: 0.8rem;
    flex-shrink: 0;
}

@keyframes loc-dropdown-in-b-5973vgp385 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Hero variant: stacked layout with larger text ─────────────────────── */

.loc-hero .loc-icon[b-5973vgp385] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-right: 5px;
}

.loc-hero .loc-input[b-5973vgp385] {
    font-size: 0.95rem;
    padding: 0 2rem 0 0;
}

.loc-hero .loc-clear[b-5973vgp385] {
    right: 0;
    font-size: 0.8rem;
}
/* /Components/Shared/LocationMap.razor.rz.scp.css */
.location-map-wrapper[b-caubu44fk2] {
    margin: 1.5rem 0;
}

.location-address-header[b-caubu44fk2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}

.location-address-header i[b-caubu44fk2] {
    font-size: 1.25rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.location-map-container[b-caubu44fk2] {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.location-map[b-caubu44fk2] {
    width: 100%;
    height: 100%;
}

.location-fallback[b-caubu44fk2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 12px;
    color: var(--text-secondary);
    margin: 1.5rem 0;
}

.location-fallback i[b-caubu44fk2] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.location-fallback span[b-caubu44fk2] {
    font-size: 1rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .location-map-container[b-caubu44fk2] {
        height: 300px;
    }

    .location-map-wrapper[b-caubu44fk2] {
        margin: 1rem 0;
    }
}
/* /Components/Shared/Messaging/ConversationListItem.razor.rz.scp.css */
.conversation-item[b-eyi2gri4gx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    cursor: pointer;
}

.conversation-item:hover[b-eyi2gri4gx] {
    background: var(--background-light);
}

.conversation-item.active[b-eyi2gri4gx] {
    background: rgba(255, 56, 92, 0.04);
    border-left: 3px solid var(--primary-color);
}

.conversation-item.unread .conv-name[b-eyi2gri4gx],
.conversation-item.unread .conv-preview[b-eyi2gri4gx] {
    font-weight: 700;
    color: var(--text-primary);
}

.conv-avatar[b-eyi2gri4gx] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.conv-body[b-eyi2gri4gx] {
    flex: 1;
    min-width: 0;
}

.conv-header[b-eyi2gri4gx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.conv-name[b-eyi2gri4gx] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.conv-time[b-eyi2gri4gx] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.conv-subject[b-eyi2gri4gx] {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.conv-preview[b-eyi2gri4gx] {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.unread-badge[b-eyi2gri4gx] {
    background: var(--primary-color);
    color: var(--text-inverse);
    border-radius: 12px;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.conv-subject-row[b-eyi2gri4gx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.1rem;
}

.conv-type[b-eyi2gri4gx] {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.conv-type-direct[b-eyi2gri4gx] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.conv-type-community[b-eyi2gri4gx] {
    background: var(--background-light);
    color: var(--text-secondary);
}
/* /Components/Shared/Messaging/MessageBubble.razor.rz.scp.css */
.message-bubble-wrapper[b-rvoa2qpdk8] {
    display: flex;
    flex-direction: column;
    max-width: 72%;
    margin-bottom: 1rem;
}

.message-bubble-wrapper.own[b-rvoa2qpdk8] {
    align-self: flex-end;
    align-items: flex-end;
}

.message-bubble-wrapper.other[b-rvoa2qpdk8] {
    align-self: flex-start;
    align-items: flex-start;
}

.bubble-sender-name[b-rvoa2qpdk8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.message-bubble[b-rvoa2qpdk8] {
    padding: 0.65rem 1rem;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}

.bubble-own[b-rvoa2qpdk8] {
    background-color: var(--primary-color);
    color: var(--text-inverse);
    border-bottom-right-radius: 4px;
}

.bubble-other[b-rvoa2qpdk8] {
    background-color: var(--background-light);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.bubble-flagged[b-rvoa2qpdk8] {
    border: 2px solid var(--color-warning);
    opacity: 0.85;
}

.tos-warning-stripe[b-rvoa2qpdk8] {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    color: var(--color-warning);
    margin-bottom: 0.25rem;
    width: 100%;
}

.deleted-text[b-rvoa2qpdk8] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.bubble-meta[b-rvoa2qpdk8] {
    margin-top: 0.2rem;
}
/* /Components/Shared/MobileAppHeader.razor.rz.scp.css */
/* Default-hidden; the global rule in app.css flips this to flex when
   `html.in-mobile-app` is set by the inline UA detector in App.razor. */
.mobile-app-header[b-wf39x457ac] {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0) 8px 0;
    height: calc(56px + env(safe-area-inset-top, 0));
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 1100;
}

.mobile-app-header-btn[b-wf39x457ac] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.5rem;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.mobile-app-header-btn:hover[b-wf39x457ac],
.mobile-app-header-btn:focus[b-wf39x457ac] {
    background-color: var(--background-light);
    color: var(--text-primary);
    text-decoration: none;
}

.mobile-app-header-logo[b-wf39x457ac] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    text-decoration: none;
}

.mobile-app-header-logo svg[b-wf39x457ac] {
    display: block;
}
/* /Components/Shared/NavSearchBar.razor.rz.scp.css */
.nav-search-bar[b-gww5vuae2e] {
    /* Allow this container to grow into available space but also shrink when
       the top bar is crowded (e.g. 1080 px with brand-nav links present).
       Phase 1A: flex + min-width:0 prevents overflow at narrow desktops. */
    flex: 1 1 auto;
    max-width: 800px;
    min-width: 0;
    margin: 0 auto;
}

.nav-search-bar > .d-flex[b-gww5vuae2e] {
    min-width: 0;
}

/* ── Segmented pill (What · Where · When) ──────────────────────────────── */

.nav-search-pill[b-gww5vuae2e] {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 46px;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    /* overflow: visible so absolute-positioned dropdown popovers (EventTypeCombobox,
       LocationAutocomplete) are not clipped by the pill boundary. The Search
       button supplies its own border-radius for the right end; segments have
       transparent backgrounds so the pill's rounded corners still look correct. */
    overflow: visible;
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-search-pill:focus-within[b-gww5vuae2e] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.1);
}

/* Each segment shrinks with available space — min-width:0 is the key. */
.search-segment[b-gww5vuae2e] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
}

/* Stacked micro-label + control layout within each segment */
.segment-stack[b-gww5vuae2e] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 0.625rem;
    min-width: 0;
}

/* Tiny uppercase label ("WHAT" / "WHERE" / "WHEN") */
.segment-micro-label[b-gww5vuae2e] {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 1px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* What: wide enough for a selected event type like "Product Launch" + clear btn */
.search-segment-what[b-gww5vuae2e] {
    flex: 0 1 148px;
    min-width: 120px;
}

/* Where: takes the bulk of remaining space; long addresses ellipsize gracefully */
.search-segment-where[b-gww5vuae2e] {
    flex: 1 1 0;
    min-width: 100px;
}

/* When: wide enough for mm/dd/yyyy + the native calendar icon.
   170px = ~10ch date text + 24px icon + 16px padding. */
.search-segment-when[b-gww5vuae2e] {
    flex: 0 1 168px;
    min-width: 160px;
}

/* Row wrapper for the calendar icon + date input (keeps them inline) */
.segment-date-row[b-gww5vuae2e] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Search button — right end of the segmented pill */
.btn-pill-search[b-gww5vuae2e] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    height: 100%;
    padding: 0 0.875rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 0 24px 24px 0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.btn-pill-search:hover[b-gww5vuae2e] {
    background: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

.btn-pill-search:focus-visible[b-gww5vuae2e] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-pill-search .bi[b-gww5vuae2e] {
    font-size: 0.9rem;
}

/* Hide the label text at medium breakpoints — keep the icon only */
@media (max-width: 1100px) {
    .btn-pill-search-label[b-gww5vuae2e] {
        display: none;
    }
    .btn-pill-search[b-gww5vuae2e] {
        padding: 0 0.75rem;
    }
}

/* Calendar icon inside the date row — sits left of the date input */
.segment-icon[b-gww5vuae2e] {
    flex-shrink: 0;
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 0.75rem;
    margin-right: 4px;
}

/* Shared control styles — used only by the date input now;
   EventTypeCombobox and LocationAutocomplete own their own input styles. */
.segment-control[b-gww5vuae2e] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    padding: 0;
    outline: none;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.2;
}

.segment-control[b-gww5vuae2e]::placeholder {
    color: var(--text-secondary);
}

/* Date input: show the native calendar picker icon but keep it subtle */
.segment-date[b-gww5vuae2e]::-webkit-calendar-picker-indicator {
    opacity: 0.45;
    cursor: pointer;
    flex-shrink: 0;
}

/* Divider between segments */
.segment-divider[b-gww5vuae2e] {
    width: 1px;
    background: var(--border-color);
    margin: 6px 0;
    flex-shrink: 0;
}


/* Mobile-only overlay: intercepts taps on the pill so they open the scoped
   command palette modal instead of popping up the phone keyboard.
   Desktop keeps the inline editing experience. */
.nav-search-mobile-overlay[b-gww5vuae2e] {
    display: none;
    position: absolute;
    inset: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 5;
    border-radius: 24px;
}

.nav-search-mobile-overlay:focus-visible[b-gww5vuae2e] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ── Filters button ──────────────────────────────────────────────────────── */

.nav-filter-btn[b-gww5vuae2e] {
    border-radius: 20px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    background: var(--surface-raised);
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nav-filter-btn:hover[b-gww5vuae2e] {
    background: var(--background-light);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.nav-filter-btn .badge[b-gww5vuae2e] {
    font-size: 0.7rem;
    background: var(--primary-color) !important;
    color: var(--text-inverse) !important;
    font-weight: 600;
}

/* ── View toggle ─────────────────────────────────────────────────────────── */

.btn-group .btn[b-gww5vuae2e] {
    border: 1px solid var(--border-color);
    background: var(--surface-raised);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.btn-group .btn:hover:not(.btn-primary)[b-gww5vuae2e] {
    background: var(--background-light);
    border-color: var(--text-primary);
}

.btn-group .btn-primary[b-gww5vuae2e] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
    font-weight: 600;
}

.btn-group .btn i[b-gww5vuae2e] {
    font-size: 1rem;
}

/* ── Responsive: medium (≤ 900 px) — hide When, shrink What ─────────────── */

@media (max-width: 900px) {
    /* Hide the When segment to reclaim space; it becomes less important
       in the compact bar and can be surfaced in the full-screen palette. */
    .search-segment-when[b-gww5vuae2e],
    .search-segment-when + .segment-divider[b-gww5vuae2e],
    .segment-divider:has(+ .search-segment-when)[b-gww5vuae2e] {
        display: none;
    }

    /* With When hidden there is more horizontal room; keep 120px floor. */
    .search-segment-what[b-gww5vuae2e] {
        flex: 0 1 140px;
        min-width: 120px;
    }

    .nav-filter-btn .badge[b-gww5vuae2e] {
        display: none; /* spare width on tight bars */
    }
}

/* ── Responsive: tablet/mobile (≤ 768 px) ───────────────────────────────── */

@media (max-width: 768px) {
    /* On mobile the overlay catches the tap; inputs become visual affordances
       only — disabling pointer events prevents the phone keyboard from
       appearing before the modal opens. The overlay sits below the Search
       button (z-index 4 < button's natural stacking) so the button stays
       tappable and dismisses the overlay gesture before the palette opens. */
    .nav-search-mobile-overlay[b-gww5vuae2e] {
        display: block;
        /* Don't cover the pill-search button — leave right edge clear */
        right: 44px;
    }

    /* The date input needs pointer-events:none so the mobile overlay z-index
       covers it fully (the overlay already covers et-input/loc-input via z-index). */
    .segment-control[b-gww5vuae2e] {
        pointer-events: none;
    }

    .nav-filter-btn[b-gww5vuae2e] {
        padding: 0.375rem 0.5rem;
    }

    /* Also hide What on mobile — the pill shows only the Where micro-label + input */
    .search-segment-what[b-gww5vuae2e],
    .search-segment-what ~ .segment-divider[b-gww5vuae2e] {
        display: none;
    }

    /* Keep search button visible but compact on mobile */
    .btn-pill-search[b-gww5vuae2e] {
        padding: 0 0.625rem;
        border-radius: 0 24px 24px 0;
        z-index: 6;
        position: relative;
    }
}
/* /Components/Shared/NextBestActionCard.razor.rz.scp.css */
.nba-card[b-e51f47jjij] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.4rem;
    border-radius: var(--border-radius);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.nba-card[b-e51f47jjij]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--text-primary);
}

.nba-card:hover[b-e51f47jjij] {
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    color: var(--text-primary);
    text-decoration: none;
}

.nba-icon[b-e51f47jjij] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--background-light);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.nba-body[b-e51f47jjij] {
    min-width: 0;
}

.nba-pill[b-e51f47jjij] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-inverse);
    background: var(--text-primary);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.35rem;
}

.nba-title[b-e51f47jjij] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.nba-desc[b-e51f47jjij] {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.nba-cta[b-e51f47jjij] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--color-info);
    white-space: nowrap;
    font-size: 0.95rem;
}

.nba-cta i[b-e51f47jjij] {
    transition: transform 0.2s ease;
}

.nba-card:hover .nba-cta i[b-e51f47jjij] {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .nba-card[b-e51f47jjij] {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0.75rem 1rem;
    }

    .nba-cta[b-e51f47jjij] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}
/* /Components/Shared/NotificationsBell.razor.rz.scp.css */
/* =====================================================================
   NotificationsBell — topbar bell + insights dropdown
   Replaces the old sparkles topbar-hoastie-btn pulse. The bell now owns
   the attention surface; clicking an insight hands the conversation
   over to the unified CommandPalette in chat mode.
   All tokens come from app.css.
   ===================================================================== */

.bell-root[b-vyfb2dk9o1] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bell-button[b-vyfb2dk9o1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
}

.bell-button:hover[b-vyfb2dk9o1] {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.bell-button:focus-visible[b-vyfb2dk9o1] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.bell-root.is-open .bell-button[b-vyfb2dk9o1] {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.bell-badge[b-vyfb2dk9o1] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--text-inverse);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--surface-raised);
    box-sizing: content-box;
}

.bell-dot[b-vyfb2dk9o1] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--surface-raised);
    pointer-events: none;
}

/* The backdrop is intentionally transparent — it just intercepts the next
   click anywhere off the panel and closes it. */
.bell-backdrop[b-vyfb2dk9o1] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}

.bell-panel[b-vyfb2dk9o1] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(380px, calc(100vw - 1.5rem));
    max-height: min(540px, calc(100vh - 6rem));
    z-index: 1100;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bell-panel-in-b-vyfb2dk9o1 0.14s ease-out;
}

@keyframes bell-panel-in-b-vyfb2dk9o1 {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bell-panel-header[b-vyfb2dk9o1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
}

.bell-panel-title[b-vyfb2dk9o1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.bell-panel-title i[b-vyfb2dk9o1] {
    color: var(--primary-color);
}

.bell-mark-all[b-vyfb2dk9o1] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.25rem 0.4rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bell-mark-all:hover[b-vyfb2dk9o1] {
    background: var(--surface-raised);
    color: var(--text-primary);
}

.bell-list[b-vyfb2dk9o1] {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem 0.4rem 0.6rem;
    min-height: 0;
}

.bell-loading[b-vyfb2dk9o1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.bell-empty[b-vyfb2dk9o1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.25rem 1rem;
    color: var(--text-secondary);
    text-align: center;
}

.bell-empty i[b-vyfb2dk9o1] {
    font-size: 1.5rem;
    color: var(--color-success);
}

.bell-empty p[b-vyfb2dk9o1] {
    margin: 0;
    font-size: 0.85rem;
}

.bell-item[b-vyfb2dk9o1] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: flex-start;
    width: 100%;
    padding: 0.75rem 0.85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    margin-bottom: 0.25rem;
}

.bell-item:hover[b-vyfb2dk9o1] {
    background: var(--surface-subtle);
    border-color: var(--border-subtle);
}

.bell-item:focus-visible[b-vyfb2dk9o1] {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

.bell-item-icon[b-vyfb2dk9o1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius);
    background: var(--accent-muted);
    color: var(--primary-color);
    flex-shrink: 0;
    font-size: 0.95rem;
}

.bell-item-high .bell-item-icon[b-vyfb2dk9o1] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.bell-item-medium .bell-item-icon[b-vyfb2dk9o1] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.bell-item-low .bell-item-icon[b-vyfb2dk9o1] {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.bell-item-body[b-vyfb2dk9o1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.bell-item-title[b-vyfb2dk9o1] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.bell-item-detail[b-vyfb2dk9o1] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bell-item-cta[b-vyfb2dk9o1] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    color: var(--primary-color);
    font-size: 0.74rem;
    font-weight: 600;
}

@media (max-width: 575px) {
    .bell-panel[b-vyfb2dk9o1] {
        position: fixed;
        top: 64px;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: calc(100vh - 80px);
    }
}
/* /Components/Shared/PublicFloatingChat.razor.rz.scp.css */
.chat-float-button[b-l5mqv1qtz4] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 4rem;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, var(--surface-color) 0%, var(--surface-subtle) 100%);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-float-button:focus-visible[b-l5mqv1qtz4] {
    outline: none;
    box-shadow: var(--shadow-xl), 0 0 0 0.25rem var(--accent-muted);
}

.chat-float-button:hover[b-l5mqv1qtz4] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.chat-float-icon[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
    font-size: 1.125rem;
}

.chat-float-copy[b-l5mqv1qtz4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    white-space: nowrap;
    transition: max-width 0.24s ease, opacity 0.2s ease, transform 0.2s ease;
}

.chat-float-title[b-l5mqv1qtz4] {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.chat-float-subtitle[b-l5mqv1qtz4] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.2;
}

.chat-backdrop[b-l5mqv1qtz4] {
    position: fixed;
    inset: 0;
    background: var(--overlay-soft);
    backdrop-filter: blur(6px);
    z-index: 1001;
}

@media (min-width: 769px) {
    .chat-float-button[b-l5mqv1qtz4] {
        gap: 0;
        width: 4.25rem;
        min-width: 4.25rem;
        padding: 0.75rem;
        overflow: hidden;
    }

    .chat-float-copy[b-l5mqv1qtz4] {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateX(-0.25rem);
        pointer-events: none;
    }

    .chat-float-button:hover[b-l5mqv1qtz4],
    .chat-float-button:focus-visible[b-l5mqv1qtz4] {
        gap: 0.875rem;
        width: auto;
        min-width: 4.25rem;
        padding: 0.75rem 1rem 0.75rem 0.75rem;
    }

    .chat-float-button:hover .chat-float-copy[b-l5mqv1qtz4],
    .chat-float-button:focus-visible .chat-float-copy[b-l5mqv1qtz4] {
        max-width: 14rem;
        opacity: 1;
        transform: translateX(0);
    }
}

.chat-modal-container[b-l5mqv1qtz4] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1002;
    animation: chat-enter-b-l5mqv1qtz4 0.24s ease;
}

@keyframes chat-enter-b-l5mqv1qtz4 {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-modal[b-l5mqv1qtz4] {
    width: min(380px, calc(100vw - 2rem));
    height: min(560px, calc(100vh - 6rem));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: linear-gradient(180deg, var(--surface-color) 0%, var(--background-light) 100%);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header[b-l5mqv1qtz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(180deg, var(--surface-subtle) 0%, var(--surface-color) 100%);
    border-bottom: 1px solid var(--border-color);
}

.chat-header-badge[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.3rem 0.65rem;
    border-radius: var(--border-radius);
    background: var(--accent-muted);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chat-header-actions[b-l5mqv1qtz4] {
    display: flex;
    gap: 0.375rem;
}

.chat-icon-button[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.chat-icon-button:hover[b-l5mqv1qtz4] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--primary-color);
}

.chat-messages[b-l5mqv1qtz4] {
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem 1rem;
    background: linear-gradient(180deg, var(--surface-color) 0%, var(--background-light) 100%);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.chat-welcome-panel[b-l5mqv1qtz4] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.chat-welcome-title[b-l5mqv1qtz4] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-secondary);
}

.chat-quick-actions[b-l5mqv1qtz4] {
    display: grid;
    gap: 0.4rem;
}

.chat-quick-action[b-l5mqv1qtz4] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.chat-quick-action:hover[b-l5mqv1qtz4] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.chat-quick-icon[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--border-radius);
    background: var(--accent-muted);
    color: var(--primary-color);
    font-size: 0.85rem;
}

.chat-quick-copy[b-l5mqv1qtz4] {
    line-height: 1.3;
}

.chat-meta-link[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
    transition: color 0.2s ease;
}

.chat-meta-link:hover[b-l5mqv1qtz4] {
    color: var(--primary-hover);
}

.message-wrapper[b-l5mqv1qtz4] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.message-wrapper.user-message[b-l5mqv1qtz4] {
    justify-content: flex-end;
}

.message-wrapper.assistant-message[b-l5mqv1qtz4] {
    justify-content: flex-start;
}

.message-avatar[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius);
    background: var(--accent-muted);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.message-bubble[b-l5mqv1qtz4] {
    max-width: min(84%, 18.75rem);
    padding: 0.9rem 1rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.message-bubble-user[b-l5mqv1qtz4] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: var(--text-inverse);
}

.message-bubble-assistant[b-l5mqv1qtz4] {
    background: var(--surface-color);
    color: var(--text-primary);
}

.message-content[b-l5mqv1qtz4] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.55;
    font-size: 0.92rem;
}

.message-content-rich[b-l5mqv1qtz4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
}

.message-time[b-l5mqv1qtz4] {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.message-bubble-user .message-time[b-l5mqv1qtz4] {
    color: var(--surface-color);
}

.chat-input-area[b-l5mqv1qtz4] {
    padding: 0.75rem 1rem 0.875rem;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
}

.chat-composer[b-l5mqv1qtz4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chat-input-wrapper[b-l5mqv1qtz4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--surface-subtle);
    box-shadow: var(--shadow-sm);
}

.chat-input[b-l5mqv1qtz4] {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    padding: 0.375rem 0.5rem;
    font-size: 0.9rem;
}

.chat-input:focus[b-l5mqv1qtz4] {
    box-shadow: none;
}

.btn-send[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-send:hover:not(:disabled)[b-l5mqv1qtz4] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-send:disabled[b-l5mqv1qtz4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.chat-composer-meta[b-l5mqv1qtz4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.typing-cursor[b-l5mqv1qtz4] {
    animation: blink-b-l5mqv1qtz4 1s infinite;
    font-weight: 700;
}

@keyframes blink-b-l5mqv1qtz4 {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

.alert-sm[b-l5mqv1qtz4] {
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
}

.btn-close-sm[b-l5mqv1qtz4] {
    font-size: 0.72rem;
    padding: 0.25rem;
}

.chat-inline-link[b-l5mqv1qtz4] {
    display: inline-flex;
    align-items: center;
    margin: 0.15rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.chat-inline-link:hover[b-l5mqv1qtz4] {
    background: var(--accent-muted);
    color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 991px) {
    .chat-backdrop[b-l5mqv1qtz4] {
        background: var(--overlay-strong);
    }

    .chat-modal-container[b-l5mqv1qtz4] {
        right: 12px;
        left: 12px;
        bottom: 88px;
    }

    .chat-modal[b-l5mqv1qtz4] {
        width: 100%;
        height: min(720px, calc(100vh - 9rem));
    }
}

@media (max-width: 768px) {
    .chat-float-button[b-l5mqv1qtz4] {
        padding: 0.75rem;
        border-radius: 999px;
    }

    .chat-float-copy[b-l5mqv1qtz4] {
        display: none;
    }

    .chat-modal-container[b-l5mqv1qtz4] {
        top: 96px;
        bottom: 88px;
    }

    .chat-modal[b-l5mqv1qtz4] {
        height: 100%;
        border-radius: calc(var(--border-radius-lg) + 4px);
    }

    .chat-header[b-l5mqv1qtz4],
    .chat-messages[b-l5mqv1qtz4],
    .chat-input-area[b-l5mqv1qtz4] {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    .message-bubble[b-l5mqv1qtz4] {
        max-width: 88%;
    }

    .chat-composer-meta[b-l5mqv1qtz4] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-float-button[b-l5mqv1qtz4],
    .chat-float-copy[b-l5mqv1qtz4] {
        transition: none;
    }
}

@media (max-width: 375px) {
    .chat-modal-container[b-l5mqv1qtz4] {
        right: 8px;
        left: 8px;
        top: 84px;
        bottom: 82px;
    }
}
/* /Components/Shared/ReviewCard.razor.rz.scp.css */
.review-card[b-lxyix9nc3j] {
    transition: box-shadow 0.2s;
}

.review-card:hover[b-lxyix9nc3j] {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

.reviewer-avatar[b-lxyix9nc3j] {
    font-size: 0.875rem;
}

.review-content[b-lxyix9nc3j] {
    line-height: 1.6;
    color: var(--text-primary);
}

.owner-response[b-lxyix9nc3j] {
    border-left: 3px solid var(--primary-color);
}

.category-ratings-compact[b-lxyix9nc3j] {
    font-size: 0.875rem;
}
/* /Components/Shared/ReviewStatistics.razor.rz.scp.css */
.overall-rating[b-j2sve2jlw3] {
    padding: 1rem;
    background: var(--background-light);
    border-radius: 0.5rem;
}

.rating-number[b-j2sve2jlw3] {
    color: var(--primary-color);
    line-height: 1;
}

.rating-bar[b-j2sve2jlw3] {
    font-size: 0.875rem;
}

.star-label[b-j2sve2jlw3] {
    font-weight: 500;
}

.no-reviews-placeholder[b-j2sve2jlw3] {
    padding: 3rem 2rem;
    background: var(--surface-subtle);
    border-radius: 8px;
    border: 2px dashed var(--border-color);
}

.category-name[b-j2sve2jlw3] {
    font-weight: 500;
    color: var(--text-primary);
}
/* /Components/Shared/SpaceCard.razor.rz.scp.css */
/* =====================================================================
   SpaceCard.razor.css — scoped styles for the shared SpaceCard component
   Uses design tokens from wwwroot/app.css exclusively.
   ===================================================================== */

/* ── Card shell ─────────────────────────────────────────────────────── */
.space-card[b-lz763kxfx3] {
    position: relative;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition:
        border-color var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Highlighted state — map pin hover */
.space-card.highlighted[b-lz763kxfx3] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-xl);
    transform: translateY(-4px);
}

/* The entire card is wrapped in <a> — reset anchor styling */
.space-card-link[b-lz763kxfx3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.space-card-link:hover[b-lz763kxfx3],
.space-card-link:focus-visible[b-lz763kxfx3] {
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* ── Image wrapper ──────────────────────────────────────────────────── */
.space-image-wrapper[b-lz763kxfx3] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-canvas);
}

/* ── Single/fallback image ──────────────────────────────────────────── */
.space-image[b-lz763kxfx3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.space-card:hover .space-image[b-lz763kxfx3] {
    transform: scale(1.03);
}

/* ── Carousel slides ────────────────────────────────────────────────── */
.carousel-slide[b-lz763kxfx3] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.carousel-slide.active[b-lz763kxfx3] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Carousel prev/next buttons ─────────────────────────────────────── */
.carousel-btn[b-lz763kxfx3] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-pill);
    border: none;
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    pointer-events: auto;
}

/* Touch devices: always show */
@media (hover: none) {
    .carousel-btn[b-lz763kxfx3] {
        opacity: 1;
    }
}

/* Touch devices: expand carousel prev/next hit area to ≥44px without
   growing the visual mark. The button is already absolutely positioned
   (hence a containing block for its own ::after — no position change
   needed; adding position:relative here would knock it out of its
   overlay placement). The ::after IS hit-testable as part of the button,
   which is exactly what extends the tap surface — do NOT add
   pointer-events:none to it. */
@media (hover: none) {
    .carousel-btn[b-lz763kxfx3]::after {
        content: "";
        position: absolute;
        inset: -6px;
        /* Non-overlap with the heart: heart hit box spans top 4→48px
           (top:8px, ::after inset -4). The next button's expanded top is
           ~50%×imageHeight − 16 − 6; with real card widths (≥~270px →
           image ≥150px) that is ≥53px — the areas meet, never overlap. */
    }
}

.space-image-wrapper:hover .carousel-btn[b-lz763kxfx3] {
    opacity: 1;
}

.carousel-btn:hover[b-lz763kxfx3] {
    background: var(--surface-raised);
    transform: translateY(-50%) scale(1.08);
}

.carousel-btn:focus-visible[b-lz763kxfx3] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    opacity: 1;
}

.carousel-btn-prev[b-lz763kxfx3] {
    left: var(--space-2);
}

.carousel-btn-next[b-lz763kxfx3] {
    right: var(--space-2);
}

/* ── Carousel dot indicators ────────────────────────────────────────── */
.carousel-dots[b-lz763kxfx3] {
    position: absolute;
    bottom: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-1);
    z-index: 10;
    pointer-events: none;
}

.carousel-dot[b-lz763kxfx3] {
    width: 6px;
    height: 6px;
    border-radius: var(--border-radius-pill);
    background: var(--text-inverse);
    opacity: 0.5;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.carousel-dot.active[b-lz763kxfx3] {
    opacity: 1;
    width: 14px;
}

/* ── Quality / trust badges ─────────────────────────────────────────── */
.space-badges[b-lz763kxfx3] {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    z-index: 5;
    pointer-events: none;
}

.space-badge[b-lz763kxfx3] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px var(--space-2);
    border-radius: var(--border-radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.badge-top-rated[b-lz763kxfx3] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.badge-new[b-lz763kxfx3] {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info-border);
}

.badge-verified[b-lz763kxfx3] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

/* ── Heart / save button ────────────────────────────────────────────── */
.space-card-heart[b-lz763kxfx3] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-pill);
    border: none;
    background: var(--surface-raised);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto;
}

/* Expand touch hit area to ≥44px via ::after overlay — visual stays 36×36px.
   Inset −4px gives 36+4+4=44px on each axis.
   Right edge: right:8px − 4px expansion = 4px from card edge — safe.
   Bottom edge: top:8px + 36px + 4px = 48px max. The carousel-next button's
   hit area top starts at ~50%×height − 16px − 6px; at 150px tall image
   that is ~53px — expansions meet at ~48–53px without overlap. */
.space-card-heart[b-lz763kxfx3]::after {
    content: "";
    position: absolute;
    inset: -4px;
}

.space-card-heart:hover[b-lz763kxfx3] {
    background: var(--surface-raised);
    color: var(--primary-color);
    transform: scale(1.12);
    box-shadow: var(--shadow-md);
}

.space-card-heart:focus-visible[b-lz763kxfx3] {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.space-card-heart.is-saved[b-lz763kxfx3] {
    color: var(--primary-color);
}

.space-card-heart.is-saved:hover[b-lz763kxfx3] {
    color: var(--primary-hover);
}

/* ── Card body / details ────────────────────────────────────────────── */
.space-details[b-lz763kxfx3] {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

/* ── Header cluster ────────────────────────────────────────────────── */
.space-header[b-lz763kxfx3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.space-name[b-lz763kxfx3] {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Community link */
.property-link[b-lz763kxfx3] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
    width: fit-content;
}

.property-link:hover[b-lz763kxfx3],
.property-link:focus-visible[b-lz763kxfx3] {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Location line */
.space-location[b-lz763kxfx3] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    line-height: 1.4;
}

/* ── "No reviews" label ─────────────────────────────────────────────── */
.no-reviews-badge[b-lz763kxfx3] {
    /* no extra margin needed; .space-header gap handles it */
}

.no-reviews-text[b-lz763kxfx3] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* ── Amenity chips ──────────────────────────────────────────────────── */
.space-amenities[b-lz763kxfx3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.amenity-badge[b-lz763kxfx3] {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--border-radius-pill);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface-canvas);
    border: 1px solid var(--border-subtle);
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Price row ──────────────────────────────────────────────────────── */
.space-price[b-lz763kxfx3] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-top: auto;
}

.price-amount[b-lz763kxfx3] {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.price-unit[b-lz763kxfx3] {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: 400;
}

/* ── Responsive tweaks ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .space-details[b-lz763kxfx3] {
        padding: var(--space-3);
    }

    .carousel-btn[b-lz763kxfx3] {
        /* Always visible on mobile — overrides the hover-only desktop rule */
        opacity: 0.85;
    }

    /* Visual size grows to 40px on mobile; ::after inset −2px still yields 44px hit area */
    .space-card-heart[b-lz763kxfx3] {
        width: 40px;
        height: 40px;
    }

    .space-card-heart[b-lz763kxfx3]::after {
        inset: -2px;
    }
}
/* /Components/Shared/SpaceFeatures.razor.rz.scp.css */
/* Base space features container */
.space-features[b-76owoz55m2] {
    width: 100%;
}

/* Compact badge view for search cards */
.space-features-compact[b-76owoz55m2] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.feature-badge[b-76owoz55m2] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: var(--text-inverse);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.feature-badge:hover[b-76owoz55m2] {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.feature-badge i[b-76owoz55m2] {
    font-size: 16px;
}

/* Full feature view for detail page */
.space-features:not(.space-features-compact)[b-76owoz55m2] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-item-full[b-76owoz55m2] {
    display: flex;
    gap: 1rem;
}

.feature-icon[b-76owoz55m2] {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.feature-content[b-76owoz55m2] {
    flex: 1;
}

.feature-title[b-76owoz55m2] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.feature-description[b-76owoz55m2] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-badge[b-76owoz55m2] {
        width: 30px;
        height: 30px;
    }

    .feature-badge i[b-76owoz55m2] {
        font-size: 15px;
    }
}
/* /Components/Shared/SpacesMapView.razor.rz.scp.css */
.spaces-map-view-container[b-y9cgyo6are] {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.spaces-map[b-y9cgyo6are] {
    width: 100%;
    height: 100%;
}

.geocoding-overlay[b-y9cgyo6are] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.geocoding-overlay p[b-y9cgyo6are] {
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0;
}

@media (max-width: 768px) {
    .spaces-map-view-container[b-y9cgyo6are] {
        height: 500px;
    }
}
/* /Components/Shared/Sparkline.razor.rz.scp.css */
.sparkline[b-0fn9k60y7s] {
    display: block;
    width: 100%;
    height: 28px;
    overflow: visible;
}
/* /Components/Shared/StarRating.razor.rz.scp.css */
.star-rating[b-x8adwjmfi0] {
    display: inline-flex;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1;
}

.star-rating.interactive[b-x8adwjmfi0] {
    cursor: pointer;
}

.star[b-x8adwjmfi0] {
    color: var(--border-color);
    transition: color 0.2s;
}

.star.filled[b-x8adwjmfi0] {
    color: var(--color-warning);
}

.star-rating.interactive .star:hover[b-x8adwjmfi0] {
    color: var(--color-warning);
}

.rating-count[b-x8adwjmfi0] {
    font-size: 0.875rem;
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-xa3vwp18v9] {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    overflow: hidden;
    width: 100%;
}

.theme-toggle-btn[b-xa3vwp18v9] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border: none;
    border-radius: var(--border-radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.1;
    min-width: 0;
}

.theme-toggle-btn:hover:not(.active)[b-xa3vwp18v9] {
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.05);
}

.theme-toggle-btn.active[b-xa3vwp18v9] {
    background: var(--surface-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.theme-toggle-btn i[b-xa3vwp18v9] {
    font-size: 0.95rem;
    line-height: 1;
}

.theme-toggle-btn:focus-visible[b-xa3vwp18v9] {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* Icon-only mode: stack the buttons vertically inside the collapsed
   sidebar so they remain reachable. Hide the labels. */
.theme-toggle.collapsed[b-xa3vwp18v9] {
    flex-direction: column;
    width: auto;
    border-radius: var(--border-radius);
    padding: 2px;
}

.theme-toggle.collapsed .theme-toggle-btn[b-xa3vwp18v9] {
    width: 100%;
    padding: 0.35rem;
    border-radius: 6px;
}

.theme-toggle.collapsed .theme-toggle-label[b-xa3vwp18v9] {
    display: none;
}

/* Dark-mode appearance — track + active pill flip to lighter surfaces. */
[data-theme="dark"] .body-app .theme-toggle[b-xa3vwp18v9] {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
}

[data-theme="dark"] .body-app .theme-toggle-btn:hover:not(.active)[b-xa3vwp18v9] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

[data-theme="dark"] .body-app .theme-toggle-btn.active[b-xa3vwp18v9] {
    background: var(--surface-color);
    color: var(--text-primary);
}
/* /Components/Shared/TrendChart.razor.rz.scp.css */
.trend-chart[b-bmdrre25xs] {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.1rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
}

.trend-chart-head[b-bmdrre25xs] {
    margin-bottom: 0.75rem;
}

.trend-chart-label[b-bmdrre25xs] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 700;
}

.trend-chart-total[b-bmdrre25xs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-top: 0.15rem;
}

.trend-chart-svg[b-bmdrre25xs] {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    min-height: 140px;
}

.trend-chart-empty[b-bmdrre25xs] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.trend-chart-empty i[b-bmdrre25xs] {
    font-size: 1.25rem;
}
/* /Components/Shared/UI/AppCard.razor.rz.scp.css */
.ui-app-card[b-5e2n6xl4gj] {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.ui-app-card-header[b-5e2n6xl4gj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-color);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.ui-app-card-body[b-5e2n6xl4gj] {
    padding: var(--space-5);
    color: var(--text-primary);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    flex: 1 1 auto;
}

.ui-app-card-footer[b-5e2n6xl4gj] {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.ui-app-card.app-card-tone-subtle[b-5e2n6xl4gj] {
    background: var(--surface-subtle);
    box-shadow: none;
}

.ui-app-card.app-card-tone-accent[b-5e2n6xl4gj] {
    background: var(--accent-muted);
    border-color: var(--primary-color);
}

@media (max-width: 768px) {
    .ui-app-card-header[b-5e2n6xl4gj],
    .ui-app-card-body[b-5e2n6xl4gj] {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .ui-app-card-footer[b-5e2n6xl4gj] {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}
/* /Components/Shared/UI/AppTable.razor.rz.scp.css */
.ui-app-table-wrap[b-ra3ge08gob] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

.ui-app-table[b-ra3ge08gob] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    background: var(--surface-raised);
}

.ui-app-table[b-ra3ge08gob]  thead th {
    text-align: left;
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-xs);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-color);
}

.ui-app-table[b-ra3ge08gob]  tbody td {
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.ui-app-table[b-ra3ge08gob]  tbody tr:last-child td {
    border-bottom: none;
}

.ui-app-table[b-ra3ge08gob]  tbody tr:hover {
    background: var(--surface-subtle);
}

.ui-app-table-comfortable[b-ra3ge08gob]  th,
.ui-app-table-comfortable[b-ra3ge08gob]  td {
    padding: var(--space-3) var(--space-4);
}

.ui-app-table-compact[b-ra3ge08gob]  th,
.ui-app-table-compact[b-ra3ge08gob]  td {
    padding: var(--space-2) var(--space-3);
}

/* Type density: Comfortable reads at base size; Compact drops one step
   (matching the table-level default), giving a real density delta.
   Headers stay at --fs-xs via the base thead rule for both densities. */
.ui-app-table-comfortable[b-ra3ge08gob]  td {
    font-size: var(--fs-base);
}

.ui-app-table-compact[b-ra3ge08gob]  td {
    font-size: var(--fs-sm);
}

.ui-app-table-empty-row td[b-ra3ge08gob] {
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

@media (max-width: 768px) {
    .ui-app-table[b-ra3ge08gob] {
        font-size: var(--fs-xs);
    }

    /* Declared per-density td sizes above would beat the table-level
       inheritance — restate so both densities read --fs-xs on phones. */
    .ui-app-table-comfortable[b-ra3ge08gob]  td,
    .ui-app-table-compact[b-ra3ge08gob]  td {
        font-size: var(--fs-xs);
    }

    .ui-app-table-comfortable[b-ra3ge08gob]  th,
    .ui-app-table-comfortable[b-ra3ge08gob]  td,
    .ui-app-table-compact[b-ra3ge08gob]  th,
    .ui-app-table-compact[b-ra3ge08gob]  td {
        padding: var(--space-2) var(--space-3);
    }
}
/* /Components/Shared/UI/CountUp.razor.rz.scp.css */
.count-up[b-n6tqaqngl0] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
}

.count-up-value[b-n6tqaqngl0] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/UI/FormSection.razor.rz.scp.css */
.form-section[b-19otxq3309] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.form-section-compact[b-19otxq3309] {
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.form-section-label[b-19otxq3309] {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin: 0;
    line-height: var(--lh-snug);
}

.form-section-required[b-19otxq3309] {
    color: var(--color-danger);
    margin-left: var(--space-1);
}

.form-section-control[b-19otxq3309] {
    display: flex;
    flex-direction: column;
}

.form-section-meta[b-19otxq3309] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-section-help[b-19otxq3309] {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
}

.form-section-validation[b-19otxq3309] {
    color: var(--color-danger);
    font-size: var(--fs-xs);
}
/* /Components/Shared/UI/PageHeader.razor.rz.scp.css */
.page-header[b-oci2bb20tj] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-6) 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.page-header-icon[b-oci2bb20tj] {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent-muted);
    color: var(--primary-color);
    font-size: var(--fs-xl);
}

.page-header-text[b-oci2bb20tj] {
    flex: 1 1 auto;
    min-width: 0;
}

.page-header-title[b-oci2bb20tj] {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text-primary);
    margin: 0;
}

.page-header-subtitle[b-oci2bb20tj] {
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0 0;
}

.page-header-secondary[b-oci2bb20tj] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.page-header-primary[b-oci2bb20tj] {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .page-header[b-oci2bb20tj] {
        gap: var(--space-3);
    }

    .page-header-icon[b-oci2bb20tj] {
        width: 40px;
        height: 40px;
        font-size: var(--fs-lg);
    }

    .page-header-title[b-oci2bb20tj] {
        font-size: var(--fs-xl);
    }

    .page-header-primary[b-oci2bb20tj],
    .page-header-secondary[b-oci2bb20tj] {
        flex-basis: 100%;
    }
}
/* /Components/Shared/UI/PublicPageHero.razor.rz.scp.css */
.public-page-hero[b-tc8k700vgf] {
    background: var(--surface-warm);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-12) 0 var(--space-8);
}

.public-page-hero-centered[b-tc8k700vgf] {
    text-align: center;
}

.public-page-hero .container[b-tc8k700vgf] {
    animation: hero-enter-b-tc8k700vgf var(--motion-slow) var(--ease-standard) both;
}

@keyframes hero-enter-b-tc8k700vgf {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.public-page-hero-eyebrow[b-tc8k700vgf] {
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    margin: 0 0 var(--space-2);
}

.public-page-hero-title[b-tc8k700vgf] {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
    font-optical-sizing: auto;
}

.public-page-hero-lead[b-tc8k700vgf] {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 640px;
    margin: 0;
}

.public-page-hero-centered .public-page-hero-lead[b-tc8k700vgf] {
    margin-inline: auto;
}

.public-page-hero-actions[b-tc8k700vgf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.public-page-hero-centered .public-page-hero-actions[b-tc8k700vgf] {
    justify-content: center;
}
/* /Components/Shared/UI/Reveal.razor.rz.scp.css */
.reveal[b-jygg4c0hh1] {
    opacity: 0;
    transition:
        opacity var(--motion-slow) var(--ease-standard) var(--reveal-delay, 0ms),
        transform var(--motion-slow) var(--ease-spring) var(--reveal-delay, 0ms);
}

.reveal:not(.is-visible)[b-jygg4c0hh1] {
    will-change: opacity, transform;
}

.reveal-rise[b-jygg4c0hh1] {
    transform: translateY(16px);
}

.reveal-fade[b-jygg4c0hh1] {
    transform: none;
}

.reveal.is-visible[b-jygg4c0hh1] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal[b-jygg4c0hh1] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* /Components/Shared/UI/ReviewStrip.razor.rz.scp.css */
.review-strip[b-fpaufc3ij6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
}

.review-strip-star[b-fpaufc3ij6] {
    color: var(--color-warning);
}

.review-strip-rating[b-fpaufc3ij6] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.review-strip-count[b-fpaufc3ij6] {
    color: var(--text-secondary);
}
/* /Components/Shared/UI/SkeletonBlock.razor.rz.scp.css */
.skeleton-group[b-6q5cnztsvt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton[b-6q5cnztsvt] {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-sheen) 45%,
        var(--skeleton-base) 65%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-6q5cnztsvt 1.4s var(--ease-standard) infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer-b-6q5cnztsvt {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.skeleton-text[b-6q5cnztsvt] {
    height: var(--space-4);
}

.skeleton-title[b-6q5cnztsvt] {
    height: var(--space-8);
    max-width: 60%;
}

.skeleton-card[b-6q5cnztsvt] {
    height: var(--space-24);
    border-radius: var(--radius-lg);
}

.skeleton-table-row[b-6q5cnztsvt] {
    height: var(--space-10);
}

.skeleton-stat-tile[b-6q5cnztsvt] {
    height: var(--space-16);
    border-radius: var(--radius-md);
}

.skeleton-avatar[b-6q5cnztsvt] {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-6q5cnztsvt] {
        animation: none;
        background: var(--skeleton-base);
    }
}
/* /Components/Shared/UI/StatusBadge.razor.rz.scp.css */
.status-badge[b-j2uelv3vi7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.status-badge-sm[b-j2uelv3vi7] {
    padding: 2px var(--space-2);
    font-size: var(--fs-xs);
}

.status-badge-md[b-j2uelv3vi7] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
}

.status-badge-lg[b-j2uelv3vi7] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}

.status-badge-neutral[b-j2uelv3vi7] {
    background: var(--surface-subtle);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.status-badge-info[b-j2uelv3vi7] {
    background: var(--color-info-bg);
    color: var(--color-info);
    border-color: var(--color-info-border);
}

.status-badge-success[b-j2uelv3vi7] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success-border);
}

.status-badge-warning[b-j2uelv3vi7] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-border);
}

.status-badge-danger[b-j2uelv3vi7] {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}

.status-badge-accent[b-j2uelv3vi7] {
    background: var(--accent-muted);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
/* /Components/Shared/UI/TabStrip.razor.rz.scp.css */
.tab-strip-wrap[b-eorczqvfnh] {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Edge fades signal hidden tabs; toggled by TabStrip.razor.js */
.tab-strip-wrap[b-eorczqvfnh]::before,
.tab-strip-wrap[b-eorczqvfnh]::after {
    content: '';
    position: absolute;
    top: 0;
    width: 56px;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.tab-strip-wrap[b-eorczqvfnh]::before {
    left: 0;
    background: linear-gradient(to right, var(--surface-canvas) 20%, transparent 100%);
}

.tab-strip-wrap[b-eorczqvfnh]::after {
    right: 0;
    background: linear-gradient(to left, var(--surface-canvas) 20%, transparent 100%);
}

.tab-strip-wrap--overflow-left[b-eorczqvfnh]::before,
.tab-strip-wrap--overflow-right[b-eorczqvfnh]::after {
    opacity: 1;
}

.tab-strip-nav[b-eorczqvfnh] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--surface-white);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tab-strip-nav:hover:not(:disabled)[b-eorczqvfnh] {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-md);
}

.tab-strip-nav:focus-visible[b-eorczqvfnh] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.tab-strip-nav:disabled[b-eorczqvfnh] {
    opacity: 0.45;
    cursor: default;
}

.tab-strip-nav-visible[b-eorczqvfnh] {
    display: inline-flex;
}

.tab-strip-nav-prev[b-eorczqvfnh] {
    left: 0.25rem;
}

.tab-strip-nav-next[b-eorczqvfnh] {
    right: 0.25rem;
}

.tab-strip[b-eorczqvfnh] {
    display: flex;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-strip[b-eorczqvfnh]::-webkit-scrollbar {
    display: none;
}

.tab-strip-item[b-eorczqvfnh] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    min-height: 44px;
    flex-shrink: 0;
}

.tab-strip-item:hover:not(.tab-strip-item-disabled)[b-eorczqvfnh] {
    color: var(--text-primary);
}

.tab-strip-item:focus-visible[b-eorczqvfnh] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

.tab-strip-item-active[b-eorczqvfnh] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: var(--fw-semibold);
}

.tab-strip-item-disabled[b-eorczqvfnh] {
    color: var(--text-secondary);
    opacity: 0.5;
    cursor: not-allowed;
}

.tab-strip-badge[b-eorczqvfnh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: var(--text-inverse);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
}
/* /Components/Shared/UI/TestimonialCard.razor.rz.scp.css */
.testimonial-card[b-eltv3j2o92] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.testimonial-mark[b-eltv3j2o92] {
    color: var(--primary-color);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
}

.testimonial-quote[b-eltv3j2o92] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-primary);
}

.testimonial-attribution[b-eltv3j2o92] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-author[b-eltv3j2o92] {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
/* /Components/Shared/UI/TestimonialCarousel.razor.rz.scp.css */
.testimonial-carousel[b-d2jdbapd8q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.carousel-track[b-d2jdbapd8q] {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
}

.carousel-track[b-d2jdbapd8q]::-webkit-scrollbar {
    display: none;
}

.carousel-track[b-d2jdbapd8q] >  .testimonial-card {
    flex: 0 0 min(420px, 85%);
    scroll-snap-align: start;
}

.carousel-controls[b-d2jdbapd8q] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.carousel-btn[b-d2jdbapd8q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--text-primary);
    transition:
        transform var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}

.carousel-btn:hover[b-d2jdbapd8q] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.carousel-btn:focus-visible[b-d2jdbapd8q] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.carousel-track:focus-visible[b-d2jdbapd8q] {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-md);
}
/* /Components/Shared/UI/Toolbar.razor.rz.scp.css */
.toolbar[b-7ux8wsxzzy] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.toolbar-comfortable[b-7ux8wsxzzy] {
    padding: var(--space-3) 0;
}

.toolbar-compact[b-7ux8wsxzzy] {
    padding: var(--space-2) 0;
    gap: var(--space-3);
}

.toolbar-sticky[b-7ux8wsxzzy] {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--surface-canvas);
}

.toolbar-left[b-7ux8wsxzzy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* filter pills must wrap, not clip, on narrow phones */
    gap: var(--space-3);
    flex: 0 1 auto;
    color: var(--text-primary);
    font-size: var(--fs-md);
}

.toolbar-search[b-7ux8wsxzzy] {
    flex: 1 1 240px;
    min-width: 0;
}

.toolbar-right[b-7ux8wsxzzy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 768px) {
    .toolbar[b-7ux8wsxzzy] {
        gap: var(--space-2);
    }

    .toolbar-right[b-7ux8wsxzzy] {
        margin-left: 0;
        flex-basis: 100%;
        justify-content: flex-end;
    }

    .toolbar-search[b-7ux8wsxzzy] {
        flex-basis: 100%;
    }

    .toolbar-sticky[b-7ux8wsxzzy] {
        position: static;
    }
}
/* /Components/Shared/UI/TrustBar.razor.rz.scp.css */
.trust-bar[b-vviq2jzx4f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-6) var(--space-12);
    padding: var(--space-4) var(--space-6);
}

.trust-bar-item[b-vviq2jzx4f] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.trust-bar-icon[b-vviq2jzx4f] {
    color: var(--primary-color);
    align-self: center;
}

.trust-bar-value[b-vviq2jzx4f] {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: var(--lh-tight);
}

.trust-bar-label[b-vviq2jzx4f] {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .trust-bar[b-vviq2jzx4f] {
        gap: var(--space-4) var(--space-6);
    }

    .trust-bar-value[b-vviq2jzx4f] {
        font-size: var(--fs-xl);
    }
}
/* /Components/Shared/WizardNavigation.razor.rz.scp.css */
.wizard-navigation[b-njdzr7o7or] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-color);
}

.wizard-header[b-njdzr7o7or] {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exit-btn[b-njdzr7o7or] {
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.exit-btn:hover[b-njdzr7o7or] {
    background: var(--background-light);
}

.exit-icon[b-njdzr7o7or] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1;
}

.step-title[b-njdzr7o7or] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    white-space: nowrap;
}

.progress-container[b-njdzr7o7or] {
    flex: 1;
    height: 4px;
    background: var(--background-light);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar[b-njdzr7o7or] {
    height: 100%;
    width: var(--bar-width, 0%);
    background: var(--primary-color);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.wizard-footer[b-njdzr7o7or] {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-subtle);
}

.wizard-actions[b-njdzr7o7or] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.btn[b-njdzr7o7or] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-back[b-njdzr7o7or] {
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--text-secondary);
}

.btn-back:hover[b-njdzr7o7or] {
    background: var(--background-light);
    border-color: var(--text-primary);
}

.btn-primary[b-njdzr7o7or] {
    background: var(--action-color);
    color: var(--text-inverse);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover:not(:disabled)[b-njdzr7o7or] {
    background: var(--action-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary:disabled[b-njdzr7o7or] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-icon[b-njdzr7o7or] {
    font-size: 0.9375rem;
    line-height: 1;
}

.step-indicator[b-njdzr7o7or] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .wizard-header[b-njdzr7o7or],
    .wizard-footer[b-njdzr7o7or] {
        padding: 0.625rem 1rem;
    }

    .step-title[b-njdzr7o7or] {
        font-size: 0.8125rem;
    }

    .step-indicator[b-njdzr7o7or] {
        display: none;
    }

    .btn[b-njdzr7o7or] {
        padding: 0.5625rem 1.125rem;
        font-size: 0.8125rem;
    }
}