@import '_content/Xablu.Authentication.BlazorServer/Xablu.Authentication.BlazorServer.ust037vvma.bundle.scp.css';
@import '_content/Xablu.Blazor/Xablu.Blazor.1768e7kfgs.bundle.scp.css';

/* /Components/Layout/BottomNav.razor.rz.scp.css */
/* =============================================================================
   BottomNav — FigmaMake bottom-nav.tsx pixel-match
   Light card background, 64px height, stroke-width 2 icons, badge support.
   ============================================================================= */

.bottom-nav-bar[b-9t9i2ffi1a] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--mobile-bottom-nav-height, 56px);
    background-color: var(--x-color-bg-card);
    border-top: 1px solid var(--x-color-divider);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
    .bottom-nav-bar[b-9t9i2ffi1a] {
        display: none;
    }
}

/* ── Individual nav link ─────────────────────────────────────────────────── */
[b-9t9i2ffi1a] .bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
    padding: var(--x-spacing-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--x-color-muted-foreground);
    transition: color var(--x-duration-fast) var(--x-ease-out);
}

.bottom-nav-link--active[b-9t9i2ffi1a],
.bottom-nav-link:hover[b-9t9i2ffi1a] {
    color: var(--x-color-primary);
}

.bottom-nav-link:focus-visible[b-9t9i2ffi1a] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.bottom-nav-link:active[b-9t9i2ffi1a] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Icon container ──────────────────────────────────────────────────────── */
.bottom-nav-icon[b-9t9i2ffi1a] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--x-spacing-xs);
    flex-shrink: 0;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.bottom-nav-label[b-9t9i2ffi1a] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-xxs);
    font-weight: 500;
    line-height: 1;
}

/* ── Badge (gold pill) ───────────────────────────────────────────────────── */
.bottom-nav-badge[b-9t9i2ffi1a] {
    position: absolute;
    top: var(--x-spacing-xs);
    right: calc(50% - 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-primary);
    padding: 2px 4px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-3xs);
    font-weight: 600;
    color: var(--x-color-text-inverse);
    line-height: 1;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Skip-to-content (WCAG 2.2) ─────────────────────────────────── */
.skip-to-content[b-pmdaasst4j] {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 9999;
    padding: var(--x-spacing-sm) var(--x-spacing-md);
    background: var(--x-color-primary);
    color: var(--x-color-primary-foreground);
    border-radius: 0 0 var(--x-radius-sm) 0;
    text-decoration: none;
    font-weight: 600;
}

.skip-to-content:focus[b-pmdaasst4j] {
    top: 0;
}

/* ── App Shell (React-matching layout) ───────────────────────────── */
.app-shell[b-pmdaasst4j] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--x-color-background);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.app-sidebar[b-pmdaasst4j] {
    display: block;
    flex-shrink: 0;
}
/* Width controlled by NavMenu.razor.css (300px / 72px with transition) */

/* ── Main content area ────────────────────────────────────────────── */
.app-main[b-pmdaasst4j] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

/* ── Header cluster (page title left, actions right) ────────────── */
/* Oksana 2026-04-20: 'Page titles positioned below header. Titles scroll
   away instead of staying fixed.' The .app-main scroll container scrolled
   the entire column — header + content — together. Making the header
   sticky to the top of the scroll container keeps the notification/profile
   actions visible during scroll. Z-index + opaque background ensure the
   sticky header doesn't read-through incoming content. */
.app-header-cluster[b-pmdaasst4j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Figma BTopNavBar = 76px (per L4 in figma-parity-checklist + Discover sweep    */
    /* observation 2026-04-21 evening: 64px crowded the 60px Instrument Serif title. */
    height: var(--layout-header-height, 76px);
    flex-shrink: 0;
    padding: 0 var(--layout-gutter, 40px);
    gap: var(--x-spacing-sm);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--x-color-background);
}

/* Oksana 2026-04-20: page titles live INSIDE the header now. Empty slot
   when the page doesn't opt in (most pages) leaves the layout unchanged
   from pre-SectionOutlet — header-actions still right-aligns via the
   space-between justify + flex-grow on this slot. */
.header-title-slot[b-pmdaasst4j] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    /* Ensure 60px serif ascenders don't get clipped if the heading block's
       own padding/margin pushes the glyph baseline upward. */
    overflow: visible;
}

/* When a page opts into SectionOutlet page-title, its heading markup
   retains whatever margins/padding it used in-body — which may overflow
   the fixed-height header. Neutralise bottom margin / vertical padding
   inside the header slot so the glyph is centered on the header baseline.
   Does NOT affect pages that still render their heading in-body. */
.header-title-slot[b-pmdaasst4j]  .page-heading,
.header-title-slot[b-pmdaasst4j]  .dashboard-welcome-heading,
.header-title-slot[b-pmdaasst4j]  .settings-page-title-row {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.header-actions[b-pmdaasst4j] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    flex-shrink: 0;
}

/* ── Bell — XNotificationBell with gold badge (FigmaMake: primary bg) ── */
.header-actions[b-pmdaasst4j] {
    --x-notification-bell-badge-bg: var(--x-color-primary);
    --x-notification-bell-badge-color: var(--x-color-primary-foreground);
}

/* ── Page content (uses layout tokens from layout-desktop.css) ───── */
/* FigmaMake: px-[16px] mobile, md:px-[40px] desktop — header + content aligned. */
/* padding-top adds breathing room from sticky header to first body element       */
/* (Discover sweep 2026-04-21: banner sat flush against header bottom; 24px gives */
/* the rhythm Figma intends).                                                     */
.app-content[b-pmdaasst4j] {
    padding: var(--x-spacing-lg, 24px) var(--layout-gutter, 40px) var(--layout-gutter, 40px);
}

/* ── Bottom nav (mobile only) ─────────────────────────────────────── */
.bottom-nav[b-pmdaasst4j] { display: none; }

@media (max-width: 767px) {
    .app-sidebar[b-pmdaasst4j] { display: none; }
    .app-header-cluster[b-pmdaasst4j] {
        height: var(--mobile-header-height, 48px);
        padding: 0 var(--x-spacing-md, 16px);
    }
    .app-content[b-pmdaasst4j] {
        padding: var(--x-spacing-md, 16px) var(--x-spacing-md, 16px) calc(var(--mobile-bottom-nav-height, 56px) + var(--x-spacing-lg, 24px));
    }
    .bottom-nav[b-pmdaasst4j] {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 100;
        background: var(--x-color-card);
        border-top: 1px solid var(--x-color-border);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =============================================================================
   NavMenu — FigmaMake app-sidebar.tsx pixel-match (CC-061 Tier 3)
   300px expanded, 72px collapsed, dark gradient background with gold hexagon.
   ============================================================================= */

/* ── Sidebar container ────────────────────────────────────────────────────── */
.sidebar[b-h5bxvi85wr] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--x-sidebar-width);
    height: 100vh;
    height: 100dvh;
    background:
        linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(177, 177, 177, 0.2) 100%),
        linear-gradient(90deg, var(--x-color-bg-dark) 0%, var(--x-color-bg-dark) 100%);
    overflow: hidden;
    transition: width var(--x-duration-slow) var(--x-ease-out);
    z-index: 10;
}

.sidebar--collapsed[b-h5bxvi85wr] {
    width: var(--x-sidebar-width-collapsed);
}

/* ── Hexagon decoration (bottom-left, non-interactive) ──────────────────────
   300x357 per Figma source (R7uThiW3UQ35YnrsaWTEj9 frame `Frame 3`). MR !254
   scaled to 272x324 to match compromised sidebar width — that over-correction
   is reverted. */
.sidebar__hex-decoration[b-h5bxvi85wr] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    height: 357px;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.sidebar__hex-svg[b-h5bxvi85wr] {
    width: 300px;
    height: 357px;
}

/* ── Logo area (80px) ─────────────────────────────────────────────────────── */
.sidebar__logo[b-h5bxvi85wr] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-2_5);
    height: 80px;
    padding: 0 var(--x-spacing-5, 20px);
    flex-shrink: 0;
    z-index: 1;
}

.sidebar__logo-icon[b-h5bxvi85wr] {
    width: 36px;
    height: 30px;
    flex-shrink: 0;
}

.sidebar__logo-text[b-h5bxvi85wr] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
    white-space: nowrap;
}

/* ── Navigation list ──────────────────────────────────────────────────────── */
.sidebar__nav-list[b-h5bxvi85wr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--x-spacing-xs);
    flex: 1;
    z-index: 1;
}

/* ── Individual nav item (56px pill) ──────────────────────────────────────── */
[b-h5bxvi85wr] .sidebar__nav-item {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 var(--x-spacing-lg);
    border-radius: 45px;
    background-color: transparent;
    color: var(--x-color-text-inverse); /* FigmaMake: stroke="white" on dark sidebar */
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
    position: relative;
}

.sidebar__nav-item:hover[b-h5bxvi85wr] {
    background-color: var(--x-glass-6);
}

.sidebar__nav-item:focus-visible[b-h5bxvi85wr] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.sidebar__nav-item:active[b-h5bxvi85wr] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.sidebar__nav-item--active[b-h5bxvi85wr] {
    background-color: var(--x-glass-10);
}

.sidebar__nav-item--active:hover[b-h5bxvi85wr] {
    background-color: var(--x-glass-12);
}

/* ── Nav icon container (40x40px centered) ────────────────────────────────── */
.sidebar__nav-icon[b-h5bxvi85wr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--x-color-text-inverse);
}

/* ::deep targets SVG icons rendered by child RenderFragment */
.sidebar__nav-icon[b-h5bxvi85wr]  svg {
    width: 18px;
    height: 18px;
}

/* ── Nav label ────────────────────────────────────────────────────────────── */
.sidebar__nav-label[b-h5bxvi85wr] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
    white-space: nowrap;
    overflow: hidden;
}

/* ── Badge (gold circle) ──────────────────────────────────────────────────── */
.sidebar__nav-badge[b-h5bxvi85wr] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-primary);
    padding: var(--x-spacing-xs);
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-text-inverse);
    line-height: 1.4;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Spacer (pushes collapse to bottom) ───────────────────────────────────── */
.sidebar__spacer[b-h5bxvi85wr] {
    flex: 1;
}

/* ── Collapse button (56px pill, at bottom) ───────────────────────────────── */
.sidebar__collapse-btn[b-h5bxvi85wr] {
    display: flex;
    align-items: center;
    height: 56px;
    margin: 0 var(--x-spacing-xs) var(--x-spacing-md);
    padding: 0 var(--x-spacing-lg);
    border-radius: 45px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
    z-index: 1;
}

.sidebar__collapse-btn:hover[b-h5bxvi85wr] {
    opacity: 0.7;
}

.sidebar__collapse-btn:focus-visible[b-h5bxvi85wr] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.sidebar__collapse-btn:active[b-h5bxvi85wr] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Collapse icon (chevron with rotation) ────────────────────────────────── */
.sidebar__collapse-icon[b-h5bxvi85wr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--x-color-text-inverse);
    transition: transform var(--x-duration-slow) var(--x-ease-out);
}

.sidebar__collapse-icon--rotated[b-h5bxvi85wr] {
    transform: rotate(180deg);
}

/* ── Collapse label ───────────────────────────────────────────────────────── */
.sidebar__collapse-label[b-h5bxvi85wr] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
    white-space: nowrap;
}

/* ── Collapsed state adjustments ──────────────────────────────────────────── */
.sidebar--collapsed .sidebar__logo[b-h5bxvi85wr] {
    justify-content: center;
    padding: 0;
}

.sidebar--collapsed .sidebar__nav-item[b-h5bxvi85wr] {
    justify-content: center;
    padding: 0;
}

.sidebar--collapsed .sidebar__nav-badge[b-h5bxvi85wr] {
    position: absolute;
    top: var(--x-spacing-sm);
    right: var(--x-spacing-xs);
    min-width: 18px;
    height: 18px;
    font-size: var(--x-text-xxs);
    padding: 0 var(--x-spacing-xs);
    margin-left: 0;
}

.sidebar--collapsed .sidebar__collapse-btn[b-h5bxvi85wr] {
    justify-content: center;
    padding: 0;
}

.sidebar--collapsed .sidebar__hex-decoration[b-h5bxvi85wr] {
    width: 72px;
}
/* /Components/Layout/NotificationPanel.razor.rz.scp.css */
/* NotificationPanel — dropdown below bell icon */

/* ── Wrapper positions the XDropdown in the header flow ── */
.notif-dropdown-wrapper[b-om974ekw6t] {
    position: relative;
}

/* ── Dropdown panel — right-align so it doesn't overflow the viewport ─────── */
.notif-dropdown-wrapper[b-om974ekw6t]  .x-dropdown-menu {
    right: 0;
    left: auto;
}

/* ── Dropdown panel card — Figma source R7uThiW3UQ35YnrsaWTEj9
   node 2148-66394 "Notification - panel" = 456×549 ── */
.notif-panel[b-om974ekw6t] {
    width: 456px;
    max-height: 549px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.notif-panel__header[b-om974ekw6t] {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--x-color-border);
}

.notif-panel__title[b-om974ekw6t] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    font-weight: 600;
    color: var(--x-color-foreground);
}

/* ── Loading + empty states ── */
.notif-panel__loading[b-om974ekw6t] {
    display: flex;
    justify-content: center;
    padding: 32px;
}

.notif-panel__empty[b-om974ekw6t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--x-color-muted-foreground);
    font-size: var(--x-text-sm);
}

/* ── Date group ── */
.notif-group__label[b-om974ekw6t] {
    padding: 12px 20px 6px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
}

/* ── Notification item ── */
.notif-item[b-om974ekw6t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--x-color-border);
    transition: background-color 0.1s ease;
}

.notif-item:last-child[b-om974ekw6t] {
    border-bottom: none;
}

.notif-item:hover[b-om974ekw6t] {
    background-color: var(--x-color-muted-bg, rgba(0,0,0,0.03));
}

/* Phase 196-L Wave D.1 — clickable affordance for notifications with a deep-link URL.
   Cursor + slight elevation on focus match other clickable rows in the app; no visual
   change for the non-clickable default so existing notification types (which do not yet
   write deep-link content) continue to look correct. */
.notif-item--clickable[b-om974ekw6t] {
    cursor: pointer;
}

.notif-item--clickable:focus-visible[b-om974ekw6t] {
    outline: 2px solid var(--x-color-primary);
    outline-offset: -2px;
}

.notif-item__left[b-om974ekw6t] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Gold bullet dot */
.notif-item__dot[b-om974ekw6t] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--x-color-primary);
    margin-top: 6px;
}

.notif-item__body[b-om974ekw6t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* "New rating" / "Connection request" — gold label */
.notif-item__type[b-om974ekw6t] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-primary);
    line-height: 1.2;
}

/* Avatar + message row */
.notif-item__row[b-om974ekw6t] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.notif-item__message[b-om974ekw6t] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 400;
    color: var(--x-color-foreground);
    line-height: 1.4;
}

.notif-item__time[b-om974ekw6t] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-xs);
    color: var(--x-color-muted-foreground);
}

/* ⋮ menu button */
.notif-item__menu[b-om974ekw6t] {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.1s ease;
}

.notif-item:hover .notif-item__menu[b-om974ekw6t] {
    opacity: 1;
}

/* On touch devices, always show menu — hover is not available */
@media (hover: none) {
    .notif-item__menu[b-om974ekw6t] {
        opacity: 1;
    }
}

/* ── Responsive: constrain panel width on small phones ── */
@media (max-width: 480px) {
    .notif-panel[b-om974ekw6t] {
        width: min(456px, calc(100vw - 32px));
        max-height: 70vh;
        max-height: 70dvh;
    }
}
/* /Components/Layout/OnboardingLayout.razor.rz.scp.css */
/* OnboardingLayout — scoped CSS */

.onboarding-shell[b-nnx86xeuad] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--x-color-background);
    font-family: var(--x-font-body);
}

/* Figma parity: all onboarding inputs/dropdowns — pill shape + correct border.
   Specificity 0,3,0 (.onboarding-shell[b-scope] .x-textfield-input) beats the
   Xablu library default (0,2,0), so these values win regardless of bundle order. */
[b-nnx86xeuad] .onboarding-shell ::deep .x-textfield-input,
[b-nnx86xeuad] .onboarding-shell ::deep .x-dropdown-trigger,
[b-nnx86xeuad] .onboarding-shell ::deep .x-select-control {
    border-radius: var(--x-radius-full, 100px);
}

[b-nnx86xeuad] .onboarding-shell ::deep .x-textfield-input {
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--x-color-border);
}

@media (max-width: 767px) {
    [b-nnx86xeuad] .onboarding-shell ::deep .x-textfield-input {
        height: 40px;
        padding: 0 12px;
    }
}

/* Currency inputs: padding-left to clear the $ / EUR symbol that sits at left:14px with a
   ~10px glyph width (total reach ~24px). Without this the default 16px padding-left from the
   rule above leaves text-start under the currency symbol and the first placeholder character
   is hidden — "50,000" reads as "$0,000" and "500,000" reads as "$00,000".
   Three ::deep markers pierce fully into the Xablu component DOM and the explicit "input."
   tag raises specificity to (0,3,1) — one tag above Xablu's (0,3,0) internal rules so this
   wins the cascade cleanly via specificity alone. */
[b-nnx86xeuad] .onboarding-shell ::deep .currency-input-wrapper ::deep input.x-textfield-input {
    padding-left: 34px;
}

/* Focus ring: outline follows the input's border-radius:100px (pill shape).
   No overflow:hidden on onboarding shell — outline and library box-shadow both visible. */
[b-nnx86xeuad] .onboarding-shell ::deep .x-textfield-container:focus-within ::deep .x-textfield-input,
[b-nnx86xeuad] .onboarding-shell ::deep .x-textfield-input:focus-visible {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 2px;
}
/* /Components/Layout/UserProfileMenu.razor.rz.scp.css */
/* ── Avatar pill trigger ─────────────────────────────────────────────────── */
/* Figma 2555:33524 — 144×43, white fill, border-radius 45px (full pill),
   padding left=4 right=16, gap=8, stroke rgba(142,148,155) 1px            */

.header-profile-pill-wrapper[b-7rxdhkp2f2]  .x-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 43px;
    padding: 0 16px 0 4px;
    border-radius: 45px;
    border: 1px solid rgba(142, 148, 155, 1);
    background-color: var(--x-color-card, #ffffff);
    cursor: pointer;
    position: relative;
    transition: opacity 0.12s ease;
}

.header-profile-pill-wrapper[b-7rxdhkp2f2]  .x-dropdown-trigger:hover {
    opacity: 0.8;
}

.header-profile-pill-wrapper[b-7rxdhkp2f2]  .x-dropdown-trigger-content {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
}

/* ── BeeScore two-row text stack (nav trigger + dropdown) ────────────────── */
/* Figma: 80×37 vertical frame — "beescore" muted gray 14px/700
   above score number black 14px/600                                          */

.nav-beescore-stack[b-7rxdhkp2f2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-beescore-stack__label[b-7rxdhkp2f2] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgba(142, 148, 155, 1);
    white-space: nowrap;
}

.nav-beescore-stack__value[b-7rxdhkp2f2] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
}

/* ── Dropdown panel — right-align so it doesn't overflow the viewport ─────── */
.header-profile-pill-wrapper[b-7rxdhkp2f2]  .x-dropdown-menu {
    right: 0;
    left: auto;
}

/* ── Profile menu dropdown panel ────────────────────────────────────────── */
/* Figma 2606:76789 — 286px wide, border-radius 16px,
   padding 24px all sides, gap 24px between sections                        */

.profile-menu[b-7rxdhkp2f2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    width: 286px;
    box-sizing: border-box;
}

/* ── User info section ───────────────────────────────────────────────────── */
/* Figma: 238×85 horizontal, gap=8 between avatar and info column            */

.profile-menu__user-section[b-7rxdhkp2f2] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.profile-menu__user-info[b-7rxdhkp2f2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* ── Name — Figma: 16px/600, black ─────────────────────────────────────── */
.profile-menu__name[b-7rxdhkp2f2] {
    display: flex;
    align-items: center;
    height: 40px;
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Divider — Figma: stroke rgba(239,242,245) ──────────────────────────── */
.profile-menu__divider[b-7rxdhkp2f2] {
    height: 1px;
    background-color: rgba(239, 242, 245, 1);
    width: 100%;
}

/* ── Action buttons (settings, logout) ───────────────────────────────────── */
/* Figma BListItem — 238×40, border-radius 10px, padding left=8 right=8, gap=8
   ::deep XButton.Ghost renders a <button> so we target it via ::deep               */

[b-7rxdhkp2f2] .profile-menu__action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease;
    color: rgba(0, 0, 0, 1);
}

[b-7rxdhkp2f2] .profile-menu__action:hover {
    background-color: var(--x-color-secondary, #f5f5f5);
}

/* ── Action icon — Figma: 24×40 container, paddingTop=10 ─────────────────── */
.profile-menu__action-icon[b-7rxdhkp2f2] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px;
    height: 40px;
    padding-top: 10px;
    flex-shrink: 0;
    color: rgba(0, 0, 0, 1);
}

/* ── Action text — Figma: 16px/400, black ───────────────────────────────── */
.profile-menu__action-text[b-7rxdhkp2f2] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
    flex: 1;
    display: flex;
    align-items: center;
    height: 40px;
}

/* ── Responsive: constrain menu on small phones ────────────────────────── */
@media (max-width: 480px) {
    .profile-menu[b-7rxdhkp2f2] {
        width: calc(100vw - 32px);
    }
}
/* /Components/Pages/CompanyProfile.razor.rz.scp.css */
/* CompanyProfile — scoped CSS (CC-062).
   Intentionally reuses the .connprofile-back-* classes from ConnectionProfile.razor.css so
   the Back pill looks identical across the two profile surfaces; only the sections below
   the header are styled here. A larger Figma-parity pass (BeeScore breakdown bars,
   Partnership Focus card, Team tab) is a deferred follow-up MR. */

.companyprofile-skeleton[b-aflvxjn8hq] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg, 24px);
    padding-top: var(--x-spacing-md, 16px);
}

.companyprofile-header-card[b-aflvxjn8hq] {
    position: relative;
    background-color: var(--x-color-card);
    border-radius: var(--x-radius, 16px);
    overflow: hidden;
    box-shadow: 5px 5px 20px 0px var(--x-color-card-shadow);
    margin-top: var(--x-spacing-md, 16px);
}

.companyprofile-banner[b-aflvxjn8hq] {
    width: 100%;
    aspect-ratio: 4 / 1;
    background: linear-gradient(135deg, var(--x-color-brand-muted, #1f2937), var(--x-color-background));
    overflow: hidden;
}

.companyprofile-banner-img[b-aflvxjn8hq] {
    width: 100%;
    height: 100%;
    display: block;
}

.companyprofile-header-row[b-aflvxjn8hq] {
    display: flex;
    gap: var(--x-spacing-lg, 24px);
    padding: var(--x-spacing-lg, 24px);
    align-items: flex-start;
    position: relative;
}

.companyprofile-logo[b-aflvxjn8hq] {
    margin-top: -48px;
    border-radius: var(--x-radius, 16px);
    box-shadow: 0 4px 14px 0 var(--x-color-card-shadow);
    background-color: var(--x-color-card);
}

.companyprofile-header-info[b-aflvxjn8hq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs, 6px);
}

.companyprofile-name-row[b-aflvxjn8hq] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm, 10px);
    flex-wrap: wrap;
}

.companyprofile-name[b-aflvxjn8hq] {
    font-family: var(--x-font-display);
    font-size: var(--x-text-2xl, 28px);
    font-weight: 600;
    margin: 0;
    color: var(--x-color-foreground);
}

.companyprofile-subtitle[b-aflvxjn8hq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
    margin: 0;
}

.companyprofile-actions[b-aflvxjn8hq] {
    display: flex;
    gap: var(--x-spacing-sm, 12px);
    margin-top: var(--x-spacing-md, 16px);
    flex-wrap: wrap;
}

.companyprofile-btn-label[b-aflvxjn8hq] {
    margin-left: 6px;
}

.companyprofile-grid[b-aflvxjn8hq] {
    margin-top: var(--x-spacing-lg, 24px);
}

.companyprofile-section-heading[b-aflvxjn8hq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--x-spacing-sm, 12px);
}

.companyprofile-section-title[b-aflvxjn8hq] {
    font-family: var(--x-font-display);
    font-size: var(--x-text-xl, 20px);
    font-weight: 600;
    color: var(--x-color-foreground);
}

.companyprofile-body-text[b-aflvxjn8hq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    line-height: 1.6;
    color: var(--x-color-foreground);
    margin: 0;
}

.companyprofile-tags[b-aflvxjn8hq] {
    display: flex;
    gap: var(--x-spacing-xs, 6px);
    flex-wrap: wrap;
    margin-top: var(--x-spacing-md, 16px);
}

.companyprofile-meta-row[b-aflvxjn8hq] {
    display: flex;
    gap: var(--x-spacing-lg, 20px);
    flex-wrap: wrap;
    margin-top: var(--x-spacing-md, 16px);
    padding-top: var(--x-spacing-md, 16px);
    border-top: 1px solid var(--x-color-border);
}

/* Team-member picker — inline expandable surface under the header card. Scoped as a card-
   like block to match the profile visual language while staying clearly secondary to the
   header. Only rendered when _showTeamPicker is true. */
.companyprofile-team-picker[b-aflvxjn8hq] {
    margin-top: var(--x-spacing-lg, 24px);
    background-color: var(--x-color-card);
    border-radius: var(--x-radius, 16px);
    box-shadow: 5px 5px 20px 0px var(--x-color-card-shadow);
    padding: var(--x-spacing-lg, 24px);
}

.companyprofile-team-picker__header[b-aflvxjn8hq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--x-spacing-md, 16px);
}

.companyprofile-team-picker__title[b-aflvxjn8hq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
}

.companyprofile-team-picker__list[b-aflvxjn8hq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs, 8px);
}

.companyprofile-team-picker__row[b-aflvxjn8hq] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm, 12px);
    padding: var(--x-spacing-xs, 8px) 0;
    border-bottom: 1px solid var(--x-color-border);
}

.companyprofile-team-picker__row:last-child[b-aflvxjn8hq] {
    border-bottom: none;
}

.companyprofile-team-picker__name-block[b-aflvxjn8hq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.companyprofile-team-picker__name[b-aflvxjn8hq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
}

.companyprofile-team-picker__role[b-aflvxjn8hq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-xs, 12px);
    color: var(--x-color-muted-foreground);
    letter-spacing: 0.02em;
}

.companyprofile-team-picker__empty[b-aflvxjn8hq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
    margin: 0;
}

.companyprofile-meta-item[b-aflvxjn8hq] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-xs, 6px);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
}

.companyprofile-meta-item a[b-aflvxjn8hq] {
    color: var(--x-color-primary);
    text-decoration: none;
}

.companyprofile-meta-item a:hover[b-aflvxjn8hq] {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .companyprofile-header-row[b-aflvxjn8hq] {
        flex-direction: column;
        gap: var(--x-spacing-md, 16px);
        padding: var(--x-spacing-md, 16px);
    }
    .companyprofile-logo[b-aflvxjn8hq] {
        margin-top: -40px;
    }
    .companyprofile-name[b-aflvxjn8hq] {
        font-size: var(--x-text-xl, 22px);
    }
}
/* /Components/Pages/ConnectionProfile.razor.rz.scp.css */
/* =============================================================================
   ConnectionProfile — Scoped CSS (FigmaMake pixel-perfect parity)
   Source: FigmaMake/src/app/pages/connection-profile.tsx
   ============================================================================= */

/* ── Back button ── */
.connprofile-back-btn[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm, 8px);
    margin-bottom: var(--x-spacing-lg, 24px);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: opacity var(--x-transition-normal, 200ms ease-in-out);
}

.connprofile-back-btn:hover[b-bf6hy9bzw0] {
    opacity: 0.7;
}

.connprofile-back-btn:focus-visible[b-bf6hy9bzw0] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.connprofile-back-btn:active[b-bf6hy9bzw0] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.connprofile-back-icon[b-bf6hy9bzw0] {
    width: 20px;
    height: 20px;
}

.connprofile-back-text[b-bf6hy9bzw0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
}

/* ── Profile header card ── */
.connprofile-header-card[b-bf6hy9bzw0] {
    padding: var(--x-spacing-lg, 24px);
    margin-bottom: var(--x-spacing-lg, 24px);
    background-color: var(--x-color-card);
    border-radius: var(--x-radius, 20px);
}

.connprofile-header-row[b-bf6hy9bzw0] {
    display: flex;
    flex-direction: row;
    gap: var(--x-spacing-lg, 24px);
    align-items: flex-start;
}

/* ── Avatar — ::deep targets XAvatar component internals ── */
[b-bf6hy9bzw0] .connprofile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Header info ── */
.connprofile-header-info[b-bf6hy9bzw0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
    flex: 1;
    min-width: 0;
}

.connprofile-name-row[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
    flex-wrap: wrap;
}

.connprofile-name[b-bf6hy9bzw0] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    color: var(--x-color-foreground);
    margin: 0;
    font-weight: normal;
}

/* ── BeeScore pill (inline next to name) ── */
.connprofile-beescore-pill[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    padding-left: 6px;
    padding-right: 6px;
    height: 28px;
    border-radius: var(--x-radius-full, 9999px);
    background-color: var(--x-color-primary);
}

.connprofile-bee-icon[b-bf6hy9bzw0] {
    width: 14px;
    height: 14px;
}

.connprofile-beescore-value[b-bf6hy9bzw0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: var(--x-font-weight-semibold, 600);
    color: var(--x-color-text-inverse);
}

/* ── Subtitle (title + company) ── */
.connprofile-subtitle[b-bf6hy9bzw0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-md);
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    margin: 0;
}

/* ── Action buttons ── */
.connprofile-actions[b-bf6hy9bzw0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    margin-top: var(--x-spacing-sm, 8px);
}

.connprofile-btn-primary[b-bf6hy9bzw0] {
    height: 46px;
    padding-left: var(--x-spacing-lg, 24px);
    padding-right: var(--x-spacing-lg, 24px);
    border-radius: var(--x-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm, 8px);
    background-color: var(--x-color-primary);
    border: none;
    cursor: pointer;
    transition: opacity var(--x-transition-normal, 200ms ease-in-out);
}

.connprofile-btn-primary:hover[b-bf6hy9bzw0] {
    opacity: 0.9;
}

.connprofile-btn-primary:focus-visible[b-bf6hy9bzw0] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.connprofile-btn-primary:active[b-bf6hy9bzw0] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.connprofile-btn-outline[b-bf6hy9bzw0] {
    height: 46px;
    padding-left: var(--x-spacing-lg, 24px);
    padding-right: var(--x-spacing-lg, 24px);
    border-radius: var(--x-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    cursor: pointer;
    transition: opacity var(--x-transition-normal, 200ms ease-in-out);
}

.connprofile-btn-outline:hover[b-bf6hy9bzw0] {
    opacity: 0.85;
}

.connprofile-btn-outline:focus-visible[b-bf6hy9bzw0] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.connprofile-btn-outline:active[b-bf6hy9bzw0] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.connprofile-btn-label[b-bf6hy9bzw0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: var(--x-font-weight-bold, 700);
    letter-spacing: var(--x-letter-spacing-button, 0.7px);
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
}

.connprofile-btn-outline .connprofile-btn-label[b-bf6hy9bzw0] {
    color: var(--x-color-foreground);
}

.connprofile-msg-icon[b-bf6hy9bzw0] {
    width: 18px;
    height: 18px;
}

/* ── Section headings (FigmaMake dual-span pattern) ── */
.connprofile-section-heading[b-bf6hy9bzw0] {
    display: flex;
    gap: var(--x-spacing-3);
    align-items: center;
    margin-bottom: var(--x-spacing-md, 16px);
}

.connprofile-section-title[b-bf6hy9bzw0] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-xl, 24px);
    line-height: 1;
    color: var(--x-color-foreground);
}

.connprofile-section-title-accent[b-bf6hy9bzw0] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-xl, 24px);
    line-height: 1;
    font-style: italic;
    color: var(--x-color-primary);
}

/* ── Body text ── */
.connprofile-body-text[b-bf6hy9bzw0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    line-height: 1.6;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-body, -0.32px);
    margin: 0;
}

/* ── Mutual connections — FigmaMake: clickable rows with avatar + name ── */
.connprofile-mutual-list[b-bf6hy9bzw0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm, 12px);
}

.connprofile-mutual-item[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm, 12px);
    padding: var(--x-spacing-xs, 8px);
    border-radius: var(--x-radius-md, 8px);
    cursor: pointer;
    transition: background-color var(--x-duration-fast, 150ms) var(--x-ease-out, ease-out);
}

.connprofile-mutual-item:hover[b-bf6hy9bzw0] {
    background-color: var(--x-color-neutral-50, #f9fafb);
}

.connprofile-mutual-name[b-bf6hy9bzw0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-sm, -0.28px);
}

/* ── Two-column grid ── */
.connprofile-grid[b-bf6hy9bzw0] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--x-spacing-lg, 24px);
}

.connprofile-left-col[b-bf6hy9bzw0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md, 16px);
}

/* ── Location info ── */
.connprofile-location[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    margin-top: var(--x-spacing-md);
}

/* ── Chip/tag wrapper ── */
.connprofile-chip-wrap[b-bf6hy9bzw0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-sm);
}

/* ── Block user dropdown item (danger styling) ── */
.connprofile-block-item[b-bf6hy9bzw0] {
    color: var(--x-color-destructive);
}

/* ── Empty state text ── */
.connprofile-empty-text[b-bf6hy9bzw0] {
    color: var(--x-color-muted-foreground);
    margin: 0;
    font-size: var(--x-text-sm);
}

/* ── Detail list (vertical stack) ── */
.connprofile-detail-list[b-bf6hy9bzw0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

/* ── Detail row (horizontal key-value) ── */
.connprofile-detail-row[b-bf6hy9bzw0] {
    display: flex;
    gap: var(--x-spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.connprofile-detail-label[b-bf6hy9bzw0] {
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    width: 120px;
    flex-shrink: 0;
}

.connprofile-detail-label--wide[b-bf6hy9bzw0] {
    width: 140px;
}

.connprofile-detail-block-label[b-bf6hy9bzw0] {
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    display: block;
    margin-bottom: var(--x-spacing-sm);
}

.connprofile-detail-value[b-bf6hy9bzw0] {
    font-size: var(--x-text-base);
    font-weight: 600;
    color: var(--x-color-foreground);
}

/* ── Team member row ── */
.connprofile-team-row[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
}

.connprofile-team-info[b-bf6hy9bzw0] {
    flex: 1;
    min-width: 0;
}

.connprofile-team-name[b-bf6hy9bzw0] {
    font-size: var(--x-text-base);
    color: var(--x-color-foreground);
    display: block;
}

.connprofile-team-role[b-bf6hy9bzw0] {
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
}

/* ── Attachment list ── */
.connprofile-attach-list[b-bf6hy9bzw0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
}

.connprofile-attach-item[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    padding: var(--x-spacing-sm);
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-sm);
}

.connprofile-attach-name[b-bf6hy9bzw0] {
    font-size: var(--x-text-sm);
    color: var(--x-color-foreground);
    flex: 1;
}

/* ── BeeScore header ── */
.connprofile-beescore-header[b-bf6hy9bzw0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-md);
    margin-bottom: var(--x-spacing-lg, 24px);
}


/* ── BeeScore dimension rows (CC-031 hover/focus) ── */
.conn-score-dim[b-bf6hy9bzw0] {
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
    border-radius: 6px;
    padding: var(--x-spacing-xs);
}

.conn-score-dim:hover[b-bf6hy9bzw0] {
    background-color: var(--x-color-neutral-50);
}

.conn-score-dim:focus-visible[b-bf6hy9bzw0] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .connprofile-grid[b-bf6hy9bzw0] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    [b-bf6hy9bzw0] .connprofile-header-card {
        padding: var(--x-spacing-lg, 24px);
    }

    .connprofile-header-row[b-bf6hy9bzw0] {
        flex-direction: column;
    }

    [b-bf6hy9bzw0] .connprofile-avatar {
        width: 80px;
        height: 80px;
    }

    .connprofile-name[b-bf6hy9bzw0] {
        font-size: var(--x-text-1_5xl);
    }

    .connprofile-subtitle[b-bf6hy9bzw0] {
        font-size: var(--x-text-base);
    }

    .connprofile-grid[b-bf6hy9bzw0] {
        grid-template-columns: 1fr;
    }

    .connprofile-detail-label--wide[b-bf6hy9bzw0] {
        width: auto;
    }

    .connprofile-btn-primary[b-bf6hy9bzw0],
    .connprofile-btn-outline[b-bf6hy9bzw0] {
        width: 100%;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Dashboard — scoped styles matching FigmaMake design exactly               */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Welcome heading (Issue 1: compact, 8px margin-bottom) ───────────────── */

/* FigmaMake: ~16px gap between heading and banner */
.dashboard-welcome-heading[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-2_5);
    flex-wrap: wrap;
    padding: var(--x-spacing-sm) 0;
    min-height: 60px;
    margin-bottom: var(--x-spacing-md);
}

/* MR-FIGMA-TRUTH-AUDIT 2026-04-20: restored per direct Figma inspection
   (R7uThiW3UQ35YnrsaWTEj9 node 1921-38741). Figma specifies:
   - "Welcome, {name}" → 60px Instrument Serif   (.heading-serif base)
   - Cindy banner "Get the most out of..."→ 40px (.dashboard-banner-heading scope below)
   - Card headings "Up Next", "Verified Connections", "My Ratings", "Trending Now"
     → 32px                                      (.heading-serif--sm)
   The previous MR-FIGMA-TITLES (!237) 60→40 reduction against Oksana's
   "title fonts too large" comment was wrong: Figma source is 60px for the
   top greeting. Keeping 32px for card headings instead of the old 60px. */
.heading-serif[b-gcyh6rzxmx] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-6xl);
    font-style: normal;
    line-height: 1;
    color: var(--x-color-foreground);
}

.heading-serif--gold[b-gcyh6rzxmx] {
    font-style: italic;
    color: var(--x-color-primary);
}

.heading-serif--gold-italic[b-gcyh6rzxmx] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    font-style: italic;
    line-height: 1;
    color: var(--x-color-gold-accent);
}

.heading-serif--white[b-gcyh6rzxmx] {
    color: var(--x-color-text-inverse);
}

.heading-serif--sm[b-gcyh6rzxmx] {
    font-size: var(--x-text-card-heading);
}

/* ── Welcome banner (Issue 2: 164px, CEO photo, gradient) ────────────────── */

.dashboard-welcome-banner[b-gcyh6rzxmx] {
    position: relative;
    overflow: hidden;
    background-color: var(--x-color-bg-dark);
    border-radius: var(--x-radius-lg, 16px);
    height: 164px;
    width: 100%;
    margin-bottom: var(--x-spacing-md, 16px);
}

/* FigmaMake: image anchored right, covers right half of banner, faces centered */
.dashboard-banner-bg[b-gcyh6rzxmx] {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
}

/* Gradient: full-width overlay, solid dark on left fading to transparent on right */
.dashboard-banner-bg-gradient[b-gcyh6rzxmx] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, var(--x-color-bg-dark) 0%, var(--x-color-bg-dark) 35%, rgba(218, 241, 255, 0) 65%);
}

.dashboard-banner-text[b-gcyh6rzxmx] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    max-width: 562px;
}

/* Banner dismiss — Phase 193 button properties + ::deep for absolute positioning */
.dashboard-welcome-banner[b-gcyh6rzxmx] {
    --x-button-height: 46px;
    --x-button-padding: 0;
}

.dashboard-welcome-banner[b-gcyh6rzxmx]  button.x-button-icon-only {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 46px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    z-index: 2;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.dashboard-welcome-banner[b-gcyh6rzxmx]  button.x-button-icon-only:hover {
    opacity: 0.8;
}

.dashboard-banner-heading[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-3);
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-banner-heading .heading-serif[b-gcyh6rzxmx] {
    font-size: var(--x-text-3xl);
}

.dashboard-banner-quote[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-text-inverse);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    margin: 0;
}

/* ── Profile Completion Banner ──────────────────────────────────────────── */

.profile-completion-banner[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--x-spacing-3, 12px);
    padding: var(--x-spacing-3, 12px) var(--x-spacing-md, 16px);
    border-radius: var(--x-radius-md, 12px);
    background-color: var(--x-color-primary-tint-6);
    border: 1px solid var(--x-color-primary-tint-15);
    margin-bottom: var(--x-spacing-md, 16px);
    cursor: pointer;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.profile-completion-banner:hover[b-gcyh6rzxmx] {
    background-color: var(--x-color-primary-tint-10);
}

.profile-completion-banner:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.profile-completion-banner:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.profile-completion-banner-left[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-2_5);
    flex: 1;
    min-width: 0;
}

.profile-completion-banner-text[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-sm);
    line-height: 1.4;
}

.profile-completion-banner-text strong[b-gcyh6rzxmx] {
    font-weight: 600;
}

.profile-completion-banner-right[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    flex-shrink: 0;
}

.profile-completion-banner-link[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
    color: var(--x-color-primary);
    letter-spacing: var(--x-letter-spacing-sm);
    white-space: nowrap;
}

.profile-completion-banner-dismiss[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--x-radius-full, 100px);
    background-color: transparent;
    border: 1px solid var(--x-color-primary-tint-20);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: var(--x-spacing-xs, 4px);
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.profile-completion-banner-dismiss:hover[b-gcyh6rzxmx] {
    background-color: var(--x-color-primary-tint-10);
}

.profile-completion-banner-dismiss:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.profile-completion-banner-dismiss:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Main layout: left (2fr) 2×2 inner rows | right (1fr) Promo + Insights ── */
/*
 * align-items: stretch — right column grows to match the full height of the
 * left column so the promo card can fill that space with flex: 1 (Issue 1).
 * min-width: 0 on all grid/flex children prevents intrinsic-width forcing
 * which caused the inner cards to resist shrinking (Issue 2).
 * A min-width on the grid in 2-col mode triggers app-main horizontal scroll
 * (overflow-x: auto computed from overflow-y: auto) before cards overlap (Issue 3).
 */

.dashboard-main-grid[b-gcyh6rzxmx] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--x-spacing-xl, 32px);
    align-items: stretch;
}

/* Left column: subgrid across the two shared row tracks */
.dashboard-left-col[b-gcyh6rzxmx] {
    display: grid;
    grid-row: 1 / span 2;
    grid-column: 1;
    grid-template-rows: subgrid;  /* inherit row track sizes from parent */
    min-width: 0;
}

/* Inner 2-column grid per left row (VC+UpNext, Ratings+Trending) */
.dashboard-inner-grid[b-gcyh6rzxmx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--x-spacing-xl, 32px);
    align-items: stretch;
    min-width: 0; /* allows grid to shrink below its children's intrinsic widths */
}

/* Right column: subgrid across the two shared row tracks */
.dashboard-right-col[b-gcyh6rzxmx] {
    display: grid;
    grid-row: 1 / span 2;
    grid-column: 2;
    grid-template-rows: subgrid;  /* inherit row track sizes from parent */
    min-width: 0;
}

/* ── White card base (replaces XCard to remove borders/shadows) ──────────── */

.dashboard-card-white[b-gcyh6rzxmx] {
    background-color: var(--x-color-card);
    border-radius: var(--x-radius-lg);
    padding: var(--x-spacing-lg, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg, 24px);
    min-width: 0; /* critical: allows grid/flex item to shrink below content width */
    overflow: hidden; /* safety net: prevents any child from escaping card bounds */
}

/* ── Section heading (shared by all card headers) ─────────────────────────── */

.section-heading-row[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
}

.section-heading[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    flex: 1;
    min-width: 0;   /* allows the heading to shrink in the flex row */
    overflow: hidden; /* clips heading text rather than pushing nav buttons outside */
}

.section-heading-nav[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-sm);
    align-items: center;
    flex-shrink: 0;
}

.section-count-badge[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-primary);
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 600;
    color: var(--x-color-text-inverse);
    letter-spacing: var(--x-letter-spacing-body);
    text-align: center;
    line-height: 1.4;
    overflow: hidden;
    padding: var(--x-spacing-xs, 4px);
}

/* ── Navigation circle buttons (Phase 193: --x-button-height/padding for sizing) ── */

.section-heading-nav[b-gcyh6rzxmx] {
    --x-button-height: 46px;
    --x-button-padding: 0;
}

.section-heading-nav[b-gcyh6rzxmx]  button {
    width: 46px;
    border-radius: 50%;
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.section-heading-nav[b-gcyh6rzxmx]  button:hover {
    background-color: var(--x-color-neutral-50);
}

/* Ghost arrow (Up Next, row 2 headers) — no border, transparent bg */
.nav-circle-btn--ghost[b-gcyh6rzxmx] {
    --x-button-height: 46px;
    --x-button-padding: 0;
}

.nav-circle-btn--ghost[b-gcyh6rzxmx]  button {
    border: none;
    background-color: transparent;
}

.nav-circle-btn--ghost[b-gcyh6rzxmx]  button:hover {
    background-color: var(--x-color-neutral-50);
}

/* XIcon chevron inside nav-circle-btn: inherit the Xablu muted-foreground
   token. Replaces the inline SVG with hardcoded stroke="var(--x-color-brand-chevron-muted)" that lived
   here pre-MR-FIGMA-B1. */
.nav-circle-chevron[b-gcyh6rzxmx] {
    color: var(--x-color-muted-foreground);
}

/* ── Action circle buttons (reject, bookmark) ────────────────────────────── */

.action-circle-btn[b-gcyh6rzxmx] {
    width: 46px;
    height: 46px;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.action-circle-btn:hover[b-gcyh6rzxmx] {
    background-color: var(--x-color-neutral-50);
}

.action-circle-btn:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.action-circle-btn:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.action-circle-btn--bookmarked[b-gcyh6rzxmx] {
    border-color: var(--x-color-primary);
}

.action-circle-btn--reject[b-gcyh6rzxmx] {
    border-color: var(--x-color-reject);
}

.action-circle-btn--reject:hover[b-gcyh6rzxmx] {
    background-color: var(--x-color-destructive-light);
}

/* ── Verified Connection card body ────────────────────────────────────────── */

.vc-body[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg, 24px);
}

.vc-header[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-md, 16px);
    align-items: flex-start;
}

.vc-company-avatar[b-gcyh6rzxmx] {
    flex-shrink: 0;
}

/* Avatar square variant — CSS custom property replaces ::deep (Phase 194) */
.vc-company-avatar[b-gcyh6rzxmx] {
    --x-avatar-radius: 16px;
    --x-avatar-font-size: var(--x-text-md);
}

.vc-meta[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    flex: 1;
    min-width: 0;
}

.vc-name-row[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
}

.vc-name[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-lg, 20px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-badges[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
    flex-wrap: wrap;
}


/* .chip-blue, .vc-type-chip, .vc-introducer-pill, .vc-introducer-avatar-img,
   .vc-introducer-name, .vc-description, .vc-tags lifted to
   wwwroot/css/3beez-overrides.css so they apply on ProfilePage too (they
   were scoped to Dashboard-only before). */

.vc-actions[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-md, 16px);
    align-items: center;
    margin-top: auto;
}

/* Add to Hive gold pill button */
.btn-add-to-hive[b-gcyh6rzxmx] {
    flex: 1;
    height: 46px;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm, 8px);
    cursor: pointer;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.btn-add-to-hive:hover[b-gcyh6rzxmx] {
    opacity: 0.9;
}

.btn-add-to-hive:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.btn-add-to-hive:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.btn-add-to-hive span[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    color: var(--x-color-text-inverse);
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
}

/* ── Up Next (Issue 7: REVIEW right-aligned on same row) ─────────────────── */

.upnext-task-row[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
}

.upnext-empty[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--x-spacing-xl) var(--x-spacing-md);
}

.upnext-empty-text[b-gcyh6rzxmx] {
    font-size: var(--x-text-base);
    color: var(--x-color-muted-foreground);
}

.upnext-task-content[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
    flex: 1;
    min-width: 0;
}

.upnext-task-title[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-body);
    line-height: 1.4;
}

.upnext-task-description[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-muted-text);
    letter-spacing: var(--x-letter-spacing-sm);
    line-height: 1.4;
}

.upnext-task-description strong[b-gcyh6rzxmx] {
    font-weight: 600;
    color: var(--x-color-foreground);
}

/* REVIEW pill button (gold) */
.btn-review-pill[b-gcyh6rzxmx] {
    height: 46px;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-primary);
    border: none;
    padding: 0 var(--x-spacing-md, 16px);
    cursor: pointer;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    color: var(--x-color-text-inverse);
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    flex-shrink: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.btn-review-pill:hover[b-gcyh6rzxmx] {
    opacity: 0.9;
}

.btn-review-pill:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.btn-review-pill:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* RATE pill button (graphite dark) */
.btn-rate-pill[b-gcyh6rzxmx] {
    height: 46px;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-graphite);
    border: none;
    padding: 0 var(--x-spacing-md, 16px);
    cursor: pointer;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    color: var(--x-color-text-inverse);
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    flex-shrink: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.btn-rate-pill:hover[b-gcyh6rzxmx] {
    opacity: 0.8;
}

.btn-rate-pill:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.btn-rate-pill:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.upnext-rate-question[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-body);
    line-height: 1.4;
}

.upnext-emoji-row[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
}

/* ── Emoji circles (Issue 8: coloured circles, not rectangles) ───────────── */

.emoji-circle[b-gcyh6rzxmx] {
    height: 32px;
    padding: 2px 8px;
    width: auto;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-emoji-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--x-text-base, 16px);
    transition: background-color var(--x-duration-fast) var(--x-ease-out), border-color var(--x-duration-fast) var(--x-ease-out);
}

.emoji-circle:hover[b-gcyh6rzxmx] {
    background-color: var(--x-color-primary-light);
    border-color: var(--x-color-primary);
}

.emoji-circle:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.emoji-circle:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.emoji-circle--selected[b-gcyh6rzxmx] {
    background-color: var(--x-color-primary-light);
    border-color: var(--x-color-primary);
}

/* ── Promo Card (Issue 5: dark card, CEO photo right, all text visible) ──── */

.dashboard-promo-card[b-gcyh6rzxmx] {
    background-color: var(--x-color-bg-dark);
    border-radius: var(--x-radius-lg, 16px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 340px;
}

/* FigmaMake: rotated signature overlay (opacity 0.4, -11.37deg) */
.dashboard-promo-card[b-gcyh6rzxmx]::after {
    content: "3Beez";
    position: absolute;
    right: 40px;
    bottom: 80px;
    font-family: var(--x-font-heading);
    font-size: 48px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.06);
    transform: rotate(-11.37deg);
    pointer-events: none;
    z-index: 1;
}

/* CEO photo positioned on the right side of the promo card
   ::deep required: XImage wraps <img> in its own scoped DOM, absolute positioning
   must reach through to position the container correctly within the card */
.dashboard-promo-card[b-gcyh6rzxmx]  .promo-bg-photo {
    position: absolute;
    top: -49px;
    right: -60px;
    width: 365px;
    height: 379px;
    pointer-events: none;
}

/* XImage ObjectFit/ObjectPosition now handled via component parameters */

/* Gradient overlay — rendered via OverlayContent (Dashboard scope, no ::deep needed) */
.promo-bg-photo-gradient[b-gcyh6rzxmx] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(17,19,24,0) 74.934%, var(--x-color-bg-dark) 100%),
        linear-gradient(270deg, rgba(17,19,24,0) 60.274%, var(--x-color-bg-dark) 100%);
}

.promo-content[b-gcyh6rzxmx] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md, 16px);
    padding: 28px;
    justify-content: center;
    height: 100%;
    width: 100%;       /* fill available column width at narrow sizes */
    max-width: 278px;  /* cap at design width on wide cards */
}

.promo-label[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-glass-70);
}

.promo-heading[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
}

.promo-description[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-sm);
    color: var(--x-glass-75);
    margin: 0;
    max-width: 100%; /* inherit promo-content width; 278px cap lives on the parent */
}

.promo-ceo-label[b-gcyh6rzxmx] {
    position: absolute;
    right: 28px;
    bottom: 28px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-glass-70);
    z-index: 1;
}

/* Watch Video button */
.btn-watch-video[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm, 8px);
    height: 46px;
    width: 190px;
    max-width: 100%; /* never exceed available column width */
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    cursor: pointer;
    padding: var(--x-spacing-xs, 4px) var(--x-spacing-md, 16px);
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.btn-watch-video:hover[b-gcyh6rzxmx] {
    opacity: 0.8;
}

.btn-watch-video:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.btn-watch-video:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.btn-watch-video span[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-muted-foreground);
}

/* ── Ratings ──────────────────────────────────────────────────────────────── */

.ratings-list[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    overflow-y: auto;
    flex: 1;
}

.rating-item[b-gcyh6rzxmx] {
    border-radius: var(--x-radius-lg, 16px);
    padding: var(--x-spacing-3, 12px);
}

.rating-item--review[b-gcyh6rzxmx],
.rating-item--vouch[b-gcyh6rzxmx] {
    background-color: var(--x-color-bg-hover);
}

.rating-item--pitch[b-gcyh6rzxmx] {
    background-color: var(--x-color-pitch-bg);
}

.rating-item-header[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
    width: 100%;
}

.rating-avatar[b-gcyh6rzxmx] {
    width: 48px;
    height: 48px;
    border-radius: var(--x-radius-full, 100px);
    object-fit: cover;
    flex-shrink: 0;
}

.rating-item-content[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
    flex: 1;
    min-width: 0;
}

.rating-item-text[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-body);
    line-height: 1.4;
    margin: 0;
}

.rating-item-time[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    letter-spacing: var(--x-letter-spacing-sm);
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.rating-item-review-text[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    letter-spacing: var(--x-letter-spacing-body);
    line-height: 1.4;
    margin: var(--x-spacing-3, 12px) 0 0;
}

/* Vouch item: inline heart + center-aligned (FigmaMake: items-center, gap 5px) */
.rating-item-text--vouch[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.vouch-heart[b-gcyh6rzxmx] {
    flex-shrink: 0;
}

.emoji-label-chip[b-gcyh6rzxmx] {
    display: inline-flex;
    align-items: center;
    height: var(--x-spacing-xl, 32px);
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    padding: var(--x-spacing-xs, 4px) var(--x-spacing-sm, 8px);
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-body);
    width: fit-content;
}

/* ── Trending ─────────────────────────────────────────────────────────────── */

.trending-list[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trending-item[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    padding: var(--x-spacing-3, 12px) var(--x-spacing-xs);
    border-radius: var(--x-radius-md);
    cursor: pointer;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.trending-item:hover[b-gcyh6rzxmx] {
    background-color: var(--x-color-neutral-50);
}

.trending-item:focus-visible[b-gcyh6rzxmx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.trending-item:active[b-gcyh6rzxmx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* Trending avatar square — CSS custom property replaces ::deep (Phase 194) */
.trending-avatar[b-gcyh6rzxmx] {
    --x-avatar-radius: 16px;
    --x-avatar-font-size: var(--x-text-md);
}

.trending-avatar[b-gcyh6rzxmx] {
    flex-shrink: 0;
}

.trending-meta[b-gcyh6rzxmx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    flex: 1;
    min-width: 0;
}

.trending-name-row[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3);
}

.trending-name[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-lg, 20px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-heading);
    line-height: 1.2;
}

.trending-badges[b-gcyh6rzxmx] {
    display: flex;
    gap: var(--x-spacing-xs);
    align-items: center;
}

/* Empty states now use <XEmptyState> component — custom CSS removed */

/* ── Shared text utility ──────────────────────────────────────────────────── */

.text-muted[b-gcyh6rzxmx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    margin: 0;
    padding: var(--x-spacing-sm, 8px) 0;
}

/* ── Responsive adjustments ───────────────────────────────────────────────── */

/* Enforce a minimum grid width in 2-col mode so app-main (overflow-x: auto)
   triggers horizontal scroll before cells collapse and cards visually overlap. */
@media (min-width: 1025px) {
    .dashboard-main-grid[b-gcyh6rzxmx] {
        min-width: 700px;
    }
}

@media (max-width: 1024px) {
    .dashboard-main-grid[b-gcyh6rzxmx] {
        grid-template-columns: 1fr;
        grid-template-rows: none;  /* reset: no shared row tracks in single-column layout */
    }

    /* Reset subgrid — both columns stack vertically in the single-column layout */
    .dashboard-left-col[b-gcyh6rzxmx] {
        display: flex;
        flex-direction: column;
        gap: var(--x-spacing-xl, 32px);
        grid-row: auto;
        grid-column: auto;
        grid-template-rows: none;
    }

    .dashboard-right-col[b-gcyh6rzxmx] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;  /* reset subgrid */
        gap: var(--x-spacing-xl, 32px);
        grid-row: auto;
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .dashboard-main-grid[b-gcyh6rzxmx] {
        grid-template-columns: 1fr;
        gap: var(--x-spacing-md);
    }

    .dashboard-left-col[b-gcyh6rzxmx] {
        display: flex;
        flex-direction: column;
        gap: var(--x-spacing-md);
    }

    .dashboard-inner-grid[b-gcyh6rzxmx] {
        grid-template-columns: 1fr;
        gap: var(--x-spacing-md);
    }

    .dashboard-right-col[b-gcyh6rzxmx] {
        display: flex;
        flex-direction: column;
        gap: var(--x-spacing-md);
    }

    .heading-serif[b-gcyh6rzxmx] {
        font-size: var(--x-text-3xl);
    }

    .dashboard-welcome-heading[b-gcyh6rzxmx] {
        gap: var(--x-spacing-3);
    }

    .dashboard-welcome-banner[b-gcyh6rzxmx] {
        height: 100px;
    }

    .dashboard-banner-text[b-gcyh6rzxmx] {
        left: 16px;
        max-width: 70%;
        gap: var(--x-spacing-xs);
    }

    .dashboard-banner-heading .heading-serif[b-gcyh6rzxmx] {
        font-size: var(--x-text-xl, 20px);
    }

    .dashboard-banner-quote[b-gcyh6rzxmx] {
        display: none;
    }

    .dashboard-welcome-banner[b-gcyh6rzxmx]  button.x-button-icon-only {
        width: 32px;
        height: 32px;
        top: 6px;
        right: 6px;
    }
}

/* ── Container query support ── */
.dashboard-inner-grid[b-gcyh6rzxmx] {
    container-type: inline-size;
}

/*
 * Heading + nav button scaling for narrow inner grids (laptop / small desktop).
 *
 * At ≤900px inner-grid width (≈1300px viewport), each card content area is ≤~386px.
 * "Verified" + "Connections" at 30px = ~232px + 2×46px nav + gaps = ~344px > 386px... ← close.
 * Scale down early so the heading never needs to fight for space.
 *
 * Thresholds (inner-grid container width → approx card content width):
 *   900px → ~386px   |   600px → ~236px   |   500px → ~186px
 */
@container (max-width: 900px) {
    .heading-serif--sm[b-gcyh6rzxmx] {
        font-size: var(--x-text-2xl, 24px);
    }
    /* Section-heading-nav pair (Verified Connections left/right arrows) */
    .section-heading-nav[b-gcyh6rzxmx] {
        --x-button-height: 36px;
        gap: var(--x-spacing-xs, 4px);
    }
    .section-heading-nav[b-gcyh6rzxmx]  button {
        width: 36px;
    }
    /* Ghost chevron buttons (Up Next, My Ratings, Trending Now) */
    .nav-circle-btn--ghost[b-gcyh6rzxmx] {
        --x-button-height: 36px;
    }
    .nav-circle-btn--ghost[b-gcyh6rzxmx]  button {
        width: 36px;
        height: 36px;
    }
}

@container (max-width: 600px) {
    .heading-serif--sm[b-gcyh6rzxmx] {
        font-size: var(--x-text-xl, 20px);
    }
    .section-heading-nav[b-gcyh6rzxmx] {
        --x-button-height: 32px;
    }
    .section-heading-nav[b-gcyh6rzxmx]  button {
        width: 32px;
    }
    .nav-circle-btn--ghost[b-gcyh6rzxmx] {
        --x-button-height: 32px;
    }
    .nav-circle-btn--ghost[b-gcyh6rzxmx]  button {
        width: 32px;
        height: 32px;
    }
}

@container (max-width: 500px) {
    .dashboard-card-white[b-gcyh6rzxmx] {
        padding: var(--x-spacing-md, 16px);
        gap: var(--x-spacing-md, 16px);
    }
}

/* ── Skeleton loading ── */
.dashboard-skeleton__grid[b-gcyh6rzxmx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--x-spacing-md);
    margin-top: var(--x-spacing-md);
}

@media (max-width: 767px) {
    .dashboard-skeleton__grid[b-gcyh6rzxmx] {
        grid-template-columns: 1fr;
    }

    .dashboard-banner-bg[b-gcyh6rzxmx] {
        width: 50%;
        opacity: 0.6;
    }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Hero banner (Dashboard extensive — Figma 2556:48818 Frame 1171276801)    */
/* 1456x164 dark panel on top of the 2-col grid. Activated when             */
/* ShowHeroBanner=true (e.g. /app/dashboard/extensive route).               */
/* ───────────────────────────────────────────────────────────────────────── */
.dashboard-hero-banner[b-gcyh6rzxmx] {
    background-color: var(--x-color-sidebar-menu, #111318);
    color: var(--x-color-primary-foreground, #ffffff);
    border-radius: var(--x-radius-lg);
    padding: var(--x-spacing-xl) var(--x-spacing-2xl, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    margin-bottom: var(--x-spacing-xl);
    min-height: 164px;
    justify-content: center;
}

.dashboard-hero-banner__heading[b-gcyh6rzxmx] {
    margin: 0;
    font-family: var(--x-font-heading);
    font-size: var(--x-text-4xl, 40px);
    font-weight: 400;
    line-height: 1.1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--x-spacing-2, 8px);
}

.dashboard-hero-banner__subtitle[b-gcyh6rzxmx] {
    margin: 0;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
    max-width: 720px;
}

@media (max-width: 767px) {
    .dashboard-hero-banner[b-gcyh6rzxmx] {
        padding: var(--x-spacing-lg);
        min-height: auto;
    }

    .dashboard-hero-banner__heading[b-gcyh6rzxmx] {
        font-size: var(--x-text-2xl, 28px);
    }
}

/* Live Network Insights card — strip the outer padding since the child     */
/* <NetworkInsightsCard> component manages its own padding (header + body). */
.dashboard-card-white.dashboard-card-white--insights[b-gcyh6rzxmx] {
    padding: 0;
}
/* /Components/Pages/DiscoverPage.razor.rz.scp.css */
/* ── DiscoverPage scoped styles (Phase 185A-03: extracted from inline <style> block) ── */

/* Page heading migrated to shared .page-heading utility in 3beez-overrides.css. */

/* ── Loading spinner ── */
.discover-loading[b-luns99tzgx] {
    display: flex;
    justify-content: center;
    padding: var(--x-spacing-xl, 32px) 0;
    padding-top: var(--x-spacing-2xl);
    padding-bottom: var(--x-spacing-2xl);
}

/* ── Carousel arrow SVG sizing ── */
.discover-carousel-arrow[b-luns99tzgx] {
    width: 14px;
    height: 12px;
}

/* ── Hover / Focus states (CC-031) ── */

/* ── Filter tab strip — Figma: underline tabs, 60px h, gold 3px bottom border active ── */
/* Discover sweep 2026-04-21 evening: dropped the 1px container underline — Figma  */
/* shows clean tabs sitting on the page bg with only the active gold indicator,    */
/* no shared baseline rule.                                                        */
.hive-tabs[b-luns99tzgx] {
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hive-tabs[b-luns99tzgx]::-webkit-scrollbar {
    display: none;
}

.hive-tab[b-luns99tzgx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 20px;
    border-radius: 0;
    border: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--x-color-muted-foreground);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color var(--x-duration-fast) var(--x-ease-out),
                border-color var(--x-duration-fast) var(--x-ease-out);
}

.hive-tab--active[b-luns99tzgx] {
    background-color: transparent;
    color: var(--x-color-foreground);
    border-bottom-color: rgba(174, 148, 64, 1);
    font-weight: 600;
}

.hive-tab:hover:not(.hive-tab--active)[b-luns99tzgx] {
    color: var(--x-color-foreground);
    background-color: transparent;
    border-bottom-color: rgba(234, 237, 241, 1);
}

.hive-tab:focus-visible[b-luns99tzgx] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: -2px;
}

.hive-tab:active[b-luns99tzgx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* Attribute chip (Extend cards tags — FigmaMake: #d4e4f2 blue bg) */
/* ::deep targets XChip component internals */
[b-luns99tzgx] .chip-attribute {
    background-color: var(--x-color-chip-attribute);
    color: var(--x-color-foreground);
    border-radius: var(--x-radius-full);
    height: 24px;
    padding: 0 4px;
    font-size: var(--x-text-sm);
    font-weight: 600;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

[b-luns99tzgx] .chip-attribute:hover {
    opacity: 0.85;
}

/* ── Promotional Banner (FigmaMake parity) ── */
.discover-banner[b-luns99tzgx] {
    position: relative;
    height: 164px;
    border-radius: var(--x-radius-lg);
    overflow: hidden;
    /* Figma section rhythm: 40px between blocks (was 24 — too tight). */
    margin-bottom: var(--x-spacing-2xl, 40px);
    background-color: var(--x-color-discover-banner);
    transition: box-shadow var(--x-duration-fast) var(--x-ease-out);
}

.discover-banner__image-container[b-luns99tzgx] {
    position: absolute;
    right: 0;
    top: -114px;
    width: 55%;
    height: 521px;
}

.discover-banner__image[b-luns99tzgx] {
    position: absolute;
    max-width: none;
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
}

.discover-banner__gradient[b-luns99tzgx] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--x-color-discover-banner) 0%, transparent 38%);
}

.discover-banner__close[b-luns99tzgx] {
    position: absolute;
    right: 9px;
    top: 9px;
    width: 46px;
    height: 46px;
    border-radius: var(--x-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* Figma BButton (filled) — Grey/s80 #292A2C bg + white X (was white-bordered  */
    /* Ghost which read as a hairline ring on the light-blue banner background).  */
    background-color: var(--x-color-grey-s80, #292A2C);
    border: none;
    color: var(--x-color-on-primary, #ffffff);
    cursor: pointer;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.discover-banner__close[b-luns99tzgx]  .x-icon {
    color: var(--x-color-on-primary, #ffffff);
}

.discover-banner__close:hover[b-luns99tzgx] {
    background-color: var(--x-color-grey-s60, #515458);
}

.discover-banner__close:focus-visible[b-luns99tzgx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.discover-banner__close:active[b-luns99tzgx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.discover-banner__text[b-luns99tzgx] {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 562px;
}

.discover-banner__title[b-luns99tzgx] {
    display: flex;
    gap: var(--x-spacing-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--x-spacing-sm);
}

.discover-banner__title-plain[b-luns99tzgx] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    color: var(--x-color-foreground);
}

.discover-banner__title-italic[b-luns99tzgx] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    font-style: italic;
    color: var(--x-color-primary);
}

.discover-banner__description[b-luns99tzgx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    line-height: 1.4;
    color: var(--x-color-foreground);
    margin: 0;
}

/* Focus-visible for attribute chips */
.chip-attribute:focus-visible[b-luns99tzgx] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.chip-attribute:active[b-luns99tzgx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* Discover page heading removed — uses shared .page-heading utility. */

/* ── Section headings — Figma: Instrument Serif 32px w=400, accent italic gold.
   Uses v3.5.0 --x-sectionheader-* custom properties (XSectionHeader theming). ── */
.discover-section-heading[b-luns99tzgx] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    font-family: var(--x-font-heading);

    --x-sectionheader-title-size: 32px;
    --x-sectionheader-title-weight: 400;
    --x-sectionheader-title-line-height: 1;
    --x-sectionheader-title-letter-spacing: 0;
}

/* Force Instrument Serif Regular 400 on the H3 the library renders — UA default  */
/* font-weight: bold on <h3> bleeds through unless we explicitly override at the   */
/* selector level. Discover sweep 2026-04-21 evening flagged it as wrong-font.    */
.discover-section-heading[b-luns99tzgx]  .x-sectionheader-title {
    font-family: var(--x-font-heading);
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
}

/* Accent word ("Connections", "Now", "My Hive") = Instrument Serif Italic gold.   */
.discover-section-heading[b-luns99tzgx]  .x-sectionheader-accent {
    font-family: var(--x-font-heading);
    font-style: italic;
    font-weight: 400;
    color: var(--x-color-primary);
}

/* ── Count badge — Figma: BBadge gold fill, 24x24, white text w=600.
   v3.5.0 doesn't expose a custom property for count styling, so this stays as
   a scoped ::deep override. ── */
.discover-section-heading[b-luns99tzgx]  .x-sectionheader-count,
.discover-section-heading[b-luns99tzgx]  .x-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 100px;
    background-color: var(--x-color-primary);
    color: #ffffff;
    font-family: var(--x-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
}

/* ── Trending Now compact list (mirrors Dashboard pattern) ── */
.discover-trending-card[b-luns99tzgx] {
    background-color: var(--x-color-card);
    border-radius: var(--x-radius-lg);
    padding: var(--x-spacing-lg);
}

.trending-list[b-luns99tzgx] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trending-item[b-luns99tzgx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    padding: var(--x-spacing-3, 12px) var(--x-spacing-xs);
    border-radius: var(--x-radius-md);
    cursor: pointer;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.trending-item:hover[b-luns99tzgx] {
    background-color: var(--x-color-neutral-50);
}

.trending-item:focus-visible[b-luns99tzgx] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.trending-item:active[b-luns99tzgx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ::deep targets XAvatar component internals (square variant) */
[b-luns99tzgx] .trending-avatar-square {
    border-radius: var(--x-radius-md);
    font-size: var(--x-text-md);
}

.trending-avatar[b-luns99tzgx] {
    flex-shrink: 0;
}

.trending-meta[b-luns99tzgx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    flex: 1;
    min-width: 0;
}

.trending-name-row[b-luns99tzgx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3);
}

.trending-name[b-luns99tzgx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-lg, 20px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-heading);
    line-height: 1.2;
}

.trending-badges[b-luns99tzgx] {
    display: flex;
    gap: var(--x-spacing-xs);
    align-items: center;
}


.chip-blue[b-luns99tzgx] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-informative-light);
    padding: 2px 6px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-sm);
    white-space: nowrap;
}

.divider[b-luns99tzgx] {
    height: 1px;
    background-color: var(--x-color-border);
    width: 100%;
}

.text-muted[b-luns99tzgx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    margin: 0;
    padding: var(--x-spacing-sm) 0;
}

/* ── Trending Now full card (FigmaMake parity: description + tags + stats) ── */
.trending-card-full[b-luns99tzgx] {
    display: flex;
    flex-direction: column;
    padding: var(--x-spacing-lg);
    height: 100%;
    background-color: var(--x-color-card);
    border-radius: var(--x-radius, 16px);
    box-shadow: 5px 5px 20px 0px var(--x-color-card-shadow);
}

/* Whole-card click affordance. The --clickable modifier is added on Trending Now cards so
   users get cursor:pointer + a keyboard focus ring matching what XCard Hoverable=true gives
   the Verified Connections (MatchCard) and Extend My Hive (XCard) sections. Keep the
   transition cheap (transform only) so the interaction stays 60fps in long carousels. */
.trending-card-full--clickable[b-luns99tzgx] {
    cursor: pointer;
    transition: box-shadow 120ms var(--x-ease-out, ease-out),
                transform   120ms var(--x-ease-out, ease-out);
}

.trending-card-full--clickable:hover[b-luns99tzgx] {
    box-shadow: 7px 7px 24px 0px var(--x-color-card-shadow);
    transform: translateY(-2px);
}

.trending-card-full--clickable:focus-visible[b-luns99tzgx] {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 2px;
}

.trending-full__header[b-luns99tzgx] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
    margin-bottom: var(--x-spacing-3, 12px);
}

.trending-full__header-info[b-luns99tzgx] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    flex: 1;
    min-width: 0;
}

.trending-full__name-row[b-luns99tzgx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
}

.trending-full__name[b-luns99tzgx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    font-weight: 600;
    color: var(--x-color-foreground);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trending-full__badges[b-luns99tzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
}

.trending-full__description[b-luns99tzgx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    margin: 0 0 var(--x-spacing-3, 12px);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-full__tags[b-luns99tzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
}

.trending-full__tag[b-luns99tzgx] {
    display: flex;
    align-items: center;
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-chip-attribute);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-foreground);
    padding: 0 var(--x-spacing-xs);
    line-height: 1.4;
}

.trending-full__stats[b-luns99tzgx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-md);
    justify-content: flex-end;
    margin-top: auto;
    padding-top: var(--x-spacing-xxl, 48px);
}

.trending-full__stat[b-luns99tzgx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
}


/* ── Extend My Hive card classes (CC-062 compliant) ── */

.discover-section--xl[b-luns99tzgx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--x-spacing-2xl);
}

/* Extend grid card shadow override (FigmaMake: 5px 5px 20px 0px #d6dce4) */
/* Uses CSS custom property instead of ::deep */
.extend-grid[b-luns99tzgx] {
    --x-card-shadow: 5px 5px 20px 0px var(--x-color-card-shadow);
}

.extend-card__header[b-luns99tzgx] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
    margin-bottom: var(--x-spacing-3, 12px);
}

.extend-card__info[b-luns99tzgx] {
    flex: 1;
    min-width: 0;
}

.extend-card__name-row[b-luns99tzgx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    margin-bottom: var(--x-spacing-sm);
}

.extend-card__name[b-luns99tzgx] {
    font-size: var(--x-text-base, 16px);
    font-weight: 600;
    color: var(--x-color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.extend-card__badges[b-luns99tzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
}


.extend-card__type-chip[b-luns99tzgx] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-chip-light);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-foreground);
    padding: 0 var(--x-spacing-xs);
    line-height: 1.4;
}

.extend-card__type-icon[b-luns99tzgx] {
    width: 13px;
    height: 13px;
}

.extend-card__contact-pill[b-luns99tzgx] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-chip-light);
    padding: 0 var(--x-spacing-xs);
}

.extend-card__contact-avatar[b-luns99tzgx] {
    width: 18px;
    height: 18px;
    border-radius: var(--x-radius-full);
    overflow: hidden;
    background-color: var(--x-color-muted, #ddd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: var(--x-color-foreground);
}

.extend-card__contact-name[b-luns99tzgx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-foreground);
    line-height: 1.4;
}

.extend-card__description[b-luns99tzgx] {
    font-size: var(--x-text-sm, 14px);
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    margin: 0 0 var(--x-spacing-3, 12px);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.extend-card__tags[b-luns99tzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
    margin-bottom: var(--x-spacing-3, 12px);
}

.extend-card__footer[b-luns99tzgx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm, 8px);
    margin-top: auto;
    padding-top: var(--x-spacing-lg);
}

.extend-card__mutual[b-luns99tzgx] {
    flex: 1;
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
}

.extend-card__spacer[b-luns99tzgx] {
    flex: 1;
}

/* ── Extend card bookmark button (FigmaMake: circle with border) ── */
.extend-card__bookmark-btn[b-luns99tzgx] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: var(--x-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.extend-card__bookmark-btn:hover[b-luns99tzgx],
.extend-card__bookmark-btn:active[b-luns99tzgx] {
    opacity: 0.8;
}

.extend-card__bookmark-btn:focus-visible[b-luns99tzgx] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.extend-card__bookmark-btn:active[b-luns99tzgx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Extend card REQUEST INTRO button (graphite, pill shape — FigmaMake: #292a2c) ── */
[b-luns99tzgx] .extend-card__intro-btn {
    height: 46px;
    padding: 0 var(--x-spacing-3, 12px);
    border-radius: var(--x-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm);
    background-color: var(--x-color-graphite, #292a2c);
    border: none;
    cursor: pointer;
    min-width: 120px;
    flex-shrink: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.extend-card__intro-btn:hover[b-luns99tzgx],
.extend-card__intro-btn:active[b-luns99tzgx] {
    opacity: 0.9;
}

.extend-card__intro-btn:focus-visible[b-luns99tzgx] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.extend-card__intro-btn:active[b-luns99tzgx] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.extend-card__intro-label[b-luns99tzgx] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
}

/* ── Extend My Hive: title row (FigmaMake: separate from tabs/search) ── */
.hive-title-row[b-luns99tzgx] {
    margin-bottom: var(--x-spacing-lg, 24px);
}

/* ── Extend My Hive: tabs + search row (FigmaMake: justify-between) ── */
.hive-filter-row[b-luns99tzgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--x-spacing-md, 16px);
    margin-bottom: var(--x-spacing-lg, 24px);
}

/* hive-chips was replaced by .hive-tabs (see above) */

/* Search box — Figma: 300×46px pill, gold icon, muted placeholder ── */
[b-luns99tzgx] .hive-searchbox {
    width: 300px;
    flex-shrink: 0;
    border-radius: 999px;
    height: 46px;
}

/* Gold search icon inside searchbox */
[b-luns99tzgx] .hive-searchbox .x-icon,
[b-luns99tzgx] .hive-searchbox svg {
    color: rgba(174, 148, 64, 1);
}

/* Muted placeholder text */
[b-luns99tzgx] .hive-searchbox input::placeholder {
    color: rgba(122, 127, 133, 1);
    opacity: 1;
}

@media (max-width: 1024px) {
    .hive-filter-row[b-luns99tzgx] {
        flex-wrap: wrap;
        gap: var(--x-spacing-3, 12px);
    }

    [b-luns99tzgx] .hive-searchbox {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .hive-title-row[b-luns99tzgx] {
        margin-bottom: var(--x-spacing-md, 16px);
    }

    .hive-filter-row[b-luns99tzgx] {
        gap: var(--x-spacing-sm, 8px);
        margin-bottom: var(--x-spacing-md, 16px);
    }
}

/* ── Carousel Layout (FigmaMake horizontal scroll) ── */

.discover-section[b-luns99tzgx] {
    margin-bottom: 40px;
}

.discover-section-header-row[b-luns99tzgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.discover-carousel-nav[b-luns99tzgx] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    flex-shrink: 0;
}

.discover-carousel-btn[b-luns99tzgx] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    padding: 0;
}

/* Figma: carousel arrow icon color var(--x-color-brand-chevron-muted) */
[b-luns99tzgx] .discover-carousel-btn ::deep .x-icon,
[b-luns99tzgx] .discover-carousel-btn ::deep svg {
    color: rgba(81, 84, 88, 1);
}

.discover-carousel[b-luns99tzgx] {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.discover-carousel[b-luns99tzgx]::-webkit-scrollbar {
    display: none;
}

/* Show 3 cards + slight peek of 4th on desktop */
.discover-carousel-item[b-luns99tzgx] {
    flex: 0 0 calc(31% - 12px);
    scroll-snap-align: start;
    min-width: 300px;
    max-width: 450px;
}

/* ── Responsive adjustments ── */
@media (max-width: 767px) {
    [b-luns99tzgx] .discover-carousel-item {
        flex: 0 0 85vw;
        min-width: 260px;
    }

    .discover-carousel-nav[b-luns99tzgx] {
        display: none;
    }

    /* Banner responsive */
    .discover-banner[b-luns99tzgx] {
        height: 100px;
        border-radius: var(--x-radius-md);
        margin-bottom: var(--x-spacing-md);
    }

    .discover-banner__image-container[b-luns99tzgx] {
        top: -40px;
        width: 65%;
        height: 300px;
    }

    .discover-banner__close[b-luns99tzgx] {
        right: 6px;
        top: 6px;
        width: 32px;
        height: 32px;
    }

    .discover-banner__close svg[b-luns99tzgx] {
        width: 10px;
        height: 10px;
    }

    .discover-banner__text[b-luns99tzgx] {
        left: 12px;
        max-width: calc(100% - 80px);
    }

    .discover-banner__title-plain[b-luns99tzgx],
    .discover-banner__title-italic[b-luns99tzgx] {
        font-size: var(--x-text-base);
    }

    .discover-banner__title[b-luns99tzgx] {
        margin-bottom: var(--x-spacing-xs);
        gap: var(--x-spacing-xs);
    }

    .discover-banner__description[b-luns99tzgx] {
        display: none;
    }

    /* Trending card responsive */
    .trending-card-full[b-luns99tzgx] {
        padding: var(--x-spacing-md);
    }

    .trending-full__stats[b-luns99tzgx] {
        padding-top: var(--x-spacing-xl);
        gap: var(--x-spacing-3, 12px);
    }

    .trending-full__stat[b-luns99tzgx] {
        font-size: var(--x-text-xs-lg);
    }

    .trending-full__stat svg[b-luns99tzgx] {
        width: 18px;
        height: 18px;
    }

    .trending-full__name[b-luns99tzgx] {
        font-size: var(--x-text-sm);
    }

    .trending-full__description[b-luns99tzgx] {
        font-size: var(--x-text-xs-lg);
    }

    /* Filter tabs responsive */
    .hive-tab[b-luns99tzgx] {
        height: 48px;
        padding: 0 12px;
        font-size: var(--x-text-xs);
    }

    .hive-section-top[b-luns99tzgx] {
        flex-wrap: wrap;
        gap: 12px;
    }

    [b-luns99tzgx] .hive-searchbox {
        width: 100%;
    }

    /* Extend intro button responsive */
    .extend-card__intro-btn[b-luns99tzgx] {
        height: 36px;
        min-width: auto;
    }

    .extend-card__intro-label[b-luns99tzgx] {
        display: none;
    }

    /* Extend grid gap — 12px on mobile — uses XGrid.GapMobile CSS custom property */
    .discover-section--xl[b-luns99tzgx] {
        --x-grid-gap-mobile: var(--x-spacing-3, 12px);
    }

    /* Avatar border-radius — 8px on mobile — ::deep targets XAvatar internals */
    [b-luns99tzgx] .trending-avatar-square {
        border-radius: var(--x-radius-sm);
    }
}

/* ── Skeleton loading ── */
.discover-skeleton__chips[b-luns99tzgx] {
    display: flex;
    gap: var(--x-spacing-sm);
    margin-top: var(--x-spacing-md);
}

.discover-skeleton__grid[b-luns99tzgx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--x-spacing-md);
    margin-top: var(--x-spacing-md);
}

@media (max-width: 400px) {
    .discover-carousel-item[b-luns99tzgx] {
        flex: 0 0 92vw;
        min-width: 0;
    }

    .discover-skeleton__grid[b-luns99tzgx] {
        grid-template-columns: 1fr;
    }

    .hive-section-actions[b-luns99tzgx] {
        width: 100%;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ── Login page — scoped styles (CC-062 token compliance) ─────────────────── */
/* Aligned to FigmaMake/src/app/pages/login.tsx exact token values            */

/* ── Left Panel ──────────────────────────────────────────────────────────── */

/* Semantic heading wrapper — resets h2 so existing flex layout is preserved */
.login-hero-heading[b-1x0sczj5jt] {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.login-hero-row[b-1x0sczj5jt] {
    display: flex;
    gap: var(--x-spacing-2_5);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.login-hero-text[b-1x0sczj5jt] {
    font-family: var(--x-font-heading, 'Instrument Serif', serif);
    font-size: var(--x-text-6xl);
    line-height: 1;
    color: var(--x-color-foreground); /* inherits white from .onboarding-left-panel token override */
    white-space: nowrap;
}

.login-hero-text--gold[b-1x0sczj5jt] {
    color: var(--x-color-primary);
    font-style: italic;
}

.login-hero-text--block[b-1x0sczj5jt] {
    display: block;
}

.login-hero-subtitle[b-1x0sczj5jt] {
    color: var(--x-color-foreground); /* inherits white from .onboarding-left-panel token override */
    /* MR-FIGMA-TRUTH-LOGIN-FONTS 2026-04-20: Figma source R7uThiW3UQ35YnrsaWTEj9
       specifies Inter 20px (var(--x-text-lg)) for the "Building a new standard..."
       subtitle. FigmaMake's login.tsx:117 `var(--font-family-sf-pro)` diverges
       from Figma — revert to Inter via --x-font-body. */
    font-family: var(--x-font-body);
    font-size: var(--x-text-lg);
    font-weight: var(--x-font-weight-normal);
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-heading);
    max-width: 770px;
    margin-top: var(--x-spacing-md);
    margin-bottom: var(--x-spacing-xl);
}

.login-supporters[b-1x0sczj5jt] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-2_5);
    max-width: 770px;
}

.login-supporters-label[b-1x0sczj5jt] {
    color: var(--x-color-foreground); /* inherits white from .onboarding-left-panel token override */
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    font-weight: var(--x-font-weight-normal);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
}

.login-supporters-grid[b-1x0sczj5jt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-2_5);
    align-items: flex-start;
}

/* FigmaMake: h-60px, rounded-16px, white bg card per logo, object-cover */
.login-supporters-grid[b-1x0sczj5jt]  .login-supporter-logo {
    height: 60px;
    border-radius: var(--x-radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--x-color-card);
}

.login-supporters-grid[b-1x0sczj5jt]  .login-supporter-logo img,
.login-supporters-grid[b-1x0sczj5jt]  .login-supporter-logo .x-image-element {
    height: 60px;
    border-radius: var(--x-radius-lg);
    object-fit: cover;
}

/* ── Right Panel ─────────────────────────────────────────────────────────── */

.login-right-panel[b-1x0sczj5jt] {
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--x-color-card);
    padding: var(--x-spacing-xl) var(--x-spacing-xl);
}

.login-form-container[b-1x0sczj5jt] {
    width: 100%;
    max-width: 448px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--x-spacing-lg);
}

.login-bee-logo[b-1x0sczj5jt] {
    width: 93px;
    height: 77px;
    flex-shrink: 0;
}

.login-welcome-heading[b-1x0sczj5jt] {
    display: flex;
    gap: var(--x-spacing-2_5);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: inherit;
}

.login-welcome-text[b-1x0sczj5jt] {
    font-family: var(--x-font-heading, 'Instrument Serif', serif);
    font-size: var(--x-text-6xl);
    line-height: 1;
    white-space: nowrap;
    color: var(--x-color-foreground);
}

.login-welcome-text--gold[b-1x0sczj5jt] {
    font-style: italic;
    color: var(--x-color-primary);
}

/* Form fields container */
.login-form-fields[b-1x0sczj5jt] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    width: 100%;
}

/* CTA button wrapper — centered 320px pill per Figma 1622-50810.
   XButton Phase 193 custom properties drive height / bg / radius directly;
   a single ::deep targets the consumer-supplied .login-cta-btn class to
   stretch it to 100% of the 320px wrapper. The previous rule used a double-
   ::deep (`::deep .login-cta-wrapper ::deep button`) which compiled to a
   selector containing a literal ::deep token — invalid CSS, silently
   dropped by the browser. Result: button fell back to library defaults and
   took the full 448px form width. */
.login-cta-wrapper[b-1x0sczj5jt] {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    --x-button-height: 46px;
    /* Figma source BButton cornerRadius = 100px (pill). FigmaMake showed
       var(--radius) = 20px but diverges from Figma. Figma wins. */
    --x-button-radius: var(--x-radius-full);
    --x-button-bg: var(--x-color-primary);
    --x-button-color: var(--x-color-primary-foreground);
}

.login-cta-wrapper[b-1x0sczj5jt]  .login-cta-btn {
    width: 100%;
    /* MR-FIGMA-TRUTH-LOGIN-FONTS 2026-04-20: Figma source specifies Inter 14px
       bold uppercase for button labels (the "Continue" button texts are all
       Inter). FigmaMake's SF Pro override diverged from Figma. Revert to
       --x-font-body (Inter). */
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
}

.login-cta-wrapper[b-1x0sczj5jt]  .login-cta-btn:hover { opacity: 0.9; }
.login-cta-wrapper[b-1x0sczj5jt]  .login-cta-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Divider — wider gap per FigmaMake (gap: 40px on md) */
.login-divider[b-1x0sczj5jt] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-2xl-5, 40px);
    width: 100%;
}

.login-divider__line[b-1x0sczj5jt] {
    flex: 1;
    border-top: 1px solid var(--x-color-border);
}

.login-divider__text[b-1x0sczj5jt] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: var(--x-font-weight-normal);
    color: var(--x-color-muted-foreground);
}

/* Social login buttons — FigmaMake: 320px, left-aligned icons, 12px gap */
.login-social-buttons[b-1x0sczj5jt] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    width: 100%;
}

/* Social button wrapper — same custom-property pattern as CTA. All four
   buttons get the same 320px pill width because the library picks up
   --x-button-height / --x-button-radius from the wrapper. Width: 100%
   via single-::deep stretches the XButton across the wrapper. Previous
   double-::deep (`::deep .login-social-btn-wrapper ::deep a`) compiled
   to invalid CSS, so each button sized to its own text and the four
   social rows had visibly different widths. */
.login-social-btn-wrapper[b-1x0sczj5jt] {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    --x-button-height: 46px;
    /* Figma source BButton cornerRadius = 100px (pill, same as primary CTA).
       Prior !222 shipped 20px (var(--x-radius)) based on FigmaMake — diverges
       from authoritative Figma. All Login buttons are pill per Figma. */
    --x-button-radius: var(--x-radius-full);
}

.login-social-btn-wrapper[b-1x0sczj5jt]  .login-social-btn {
    width: 100%;
    gap: var(--x-spacing-sm);
    padding: 0 var(--x-spacing-3sm, 12px);
}

.login-social-btn-wrapper[b-1x0sczj5jt]  .login-social-btn:focus-visible {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.login-social-btn-wrapper[b-1x0sczj5jt]  .login-social-btn:active {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.login-social-icon[b-1x0sczj5jt] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--x-radius-sm);
}

.login-social-label[b-1x0sczj5jt] {
    /* MR-FIGMA-TRUTH-LOGIN-FONTS 2026-04-20: Inter per Figma source. */
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-muted-foreground);
}

/* Legal footer — FigmaMake: text-sm, links uppercase bold muted */
.login-legal[b-1x0sczj5jt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.login-legal__text[b-1x0sczj5jt] {
    /* Figma source R7uThiW3UQ35YnrsaWTEj9 legal body = 16px SF Pro normal
       (distinct from the 14px Inter bold UPPER used on the button-styled
       links inside the sentence). */
    font-family: var(--x-font-family-sf-pro);
    font-size: var(--x-text-base);
    font-weight: var(--x-font-weight-normal);
    color: var(--x-color-foreground);
}

.login-legal__link[b-1x0sczj5jt] {
    height: 25px;
    padding: 0 4px;
    border-radius: var(--x-radius-full);
    display: inline-flex;
    align-items: center;
    /* MR-FIGMA-TRUTH-LOGIN-FONTS 2026-04-20: Inter per Figma button/link style. */
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-muted-foreground);
    text-decoration: none;
}

/* ── Root shell ── */
.login-shell[b-1x0sczj5jt] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    /* Override onboarding-shell cream background — login uses edge-to-edge panels */
    background: var(--x-color-card);
}

/* ── Error message box ── */
.login-error-box[b-1x0sczj5jt] {
    padding: var(--x-spacing-3, 12px);
    border-radius: var(--x-radius);
    background: var(--x-color-error-light);
    border: 1px solid var(--x-color-error);
    margin-bottom: var(--x-spacing-md);
}

.login-error-text[b-1x0sczj5jt] {
    font-size: var(--x-text-sm);
    color: var(--x-color-error);
    font-family: var(--x-font-body);
}

/* ── Form full-width, flex-column so email + CTA have vertical spacing
   (they previously stacked as raw block elements and touched edge-to-edge). ── */
.login-form-full[b-1x0sczj5jt] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    align-items: center;
}

/* ── Magic link sent state ── */
.login-state-center[b-1x0sczj5jt] {
    width: 100%;
    text-align: center;
    padding: var(--x-spacing-lg) 0;
}

.login-magic-icon[b-1x0sczj5jt] {
    color: var(--x-color-brand-gold);
}

/* Typography now comes from the shared .card-heading-serif utility
   (3beez-overrides.css). This scoped rule only owns layout spacing. */
.login-magic-heading[b-1x0sczj5jt] {
    margin: var(--x-spacing-md) 0 var(--x-spacing-sm);
}

.login-magic-body[b-1x0sczj5jt] {
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    line-height: 1.6;
}

.login-magic-hint[b-1x0sczj5jt] {
    margin-top: var(--x-spacing-md);
    font-size: var(--x-text-xs);
    color: var(--x-color-muted-foreground);
}

.login-submitting-text[b-1x0sczj5jt] {
    margin-top: var(--x-spacing-3, 12px);
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .login-right-panel[b-1x0sczj5jt] {
        padding: var(--x-spacing-xl) var(--x-spacing-md);
    }

    .login-form-container[b-1x0sczj5jt] {
        gap: var(--x-spacing-5, 20px);
    }

    .login-bee-logo[b-1x0sczj5jt] {
        width: 60px;
        height: 50px;
    }

    .login-welcome-text[b-1x0sczj5jt] {
        font-size: var(--x-text-3xl);
    }

    .login-welcome-heading[b-1x0sczj5jt] {
        gap: var(--x-spacing-3);
    }

    .login-divider[b-1x0sczj5jt] {
        gap: var(--x-spacing-5, 20px);
    }

    .login-social-btn[b-1x0sczj5jt] {
        justify-content: center;
    }

    .login-form-container[b-1x0sczj5jt] {
        max-width: 100%;
    }
}
/* /Components/Pages/MessagesPage.razor.rz.scp.css */
/* Page heading migrated to shared .page-heading utility in 3beez-overrides.css
   (60px Instrument Serif with 36px/24px responsive steps, italic primary accent). */

.messages-split-view[b-3t56tblxbu] {
    height: calc(100vh - 240px);
    height: calc(100dvh - 240px);
    max-height: 800px;
}

.messages-chat-list-card[b-3t56tblxbu] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Card-body spacing moved to 3beez-overrides.css as an unlayered rule
   because the custom-property cascade (`--x-card-body-*` on this element)
   did not reach XCard's .x-card-body in the deployed build. Project-layer
   unscoped rule has zero scope-attribute dependency and is the bulletproof
   path until the library publishes the source fix. */

.messages-chat-list-header[b-3t56tblxbu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* FigmaMake: New chat button — h-46px, min-w-150px, pill shape, uppercase sm/700/0.7 tracking.
   Previous selector '.btn-pill' never matched because XButton with Pill="true"
   doesn't emit that class. Targeting the user-supplied .new-chat-btn class
   (applied directly on XButton) works regardless of library internals. */
[b-3t56tblxbu] .new-chat-btn {
    height: 46px;
    min-width: 150px;
    border-radius: var(--x-radius-full);
}

[b-3t56tblxbu] .new-chat-btn,
[b-3t56tblxbu] .new-chat-btn__text {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-foreground);
}

/* Messages search — Figma: pill 46px, magnifier inside on the left, muted
   ::deep placeholder. Without overrides the library ships an outer input shell
   ::deep that renders a second border outside the pill (same class-1 drift as
   ::deep NetworkPage and DiscoverPage, which already override). */
[b-3t56tblxbu] .messages-searchbox {
    border-radius: 999px;
    height: 46px;
    width: 100%;
}

[b-3t56tblxbu] .messages-searchbox .x-textfield,
[b-3t56tblxbu] .messages-searchbox .x-searchbox__input,
[b-3t56tblxbu] .messages-searchbox .x-searchbox-input {
    border-radius: 999px;
    height: 46px;
}

[b-3t56tblxbu] .messages-searchbox .x-icon,
[b-3t56tblxbu] .messages-searchbox svg {
    color: var(--x-color-muted-foreground);
}

[b-3t56tblxbu] .messages-searchbox input::placeholder {
    color: var(--x-color-muted-foreground);
    opacity: 1;
}

/* Figma 1585-57419 shows the card-level "Chats" heading at ~28-30px serif.
   --x-text-3xl (40px) is reserved for modal-level headings. */
.messages-chat-list-title[b-3t56tblxbu] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-2xl);
    line-height: 1;
    color: var(--x-color-foreground);
    margin: 0;
}

/* Chat list items */
.chat-list-item[b-3t56tblxbu] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
    padding: var(--x-spacing-md) var(--x-spacing-3, 12px);
    border-radius: var(--x-radius-lg);
    cursor: pointer;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.chat-list-item:hover[b-3t56tblxbu] {
    background-color: var(--x-color-bg-hover);
}

.chat-list-item.active[b-3t56tblxbu] {
    background-color: var(--x-color-bg-hover);
}

.chat-list-item__body[b-3t56tblxbu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
}

.chat-list-item__top-row[b-3t56tblxbu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--x-spacing-3, 12px);
}

.chat-list-item__name[b-3t56tblxbu] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--x-color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-item__time[b-3t56tblxbu] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-list-item__preview[b-3t56tblxbu] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.chat-list-divider[b-3t56tblxbu] {
    height: 1px;
    background-color: var(--x-color-border);
}

/* Chat window styling — CSS custom properties replace ::deep for XChatWindow/XChatMessage (Phase 194) */
.messages-chat-window[b-3t56tblxbu] {
    height: 100%;
    background-color: var(--x-color-card);
    border-radius: var(--x-radius, 16px);
    /* XChatWindow custom properties */
    --x-chat-window-messages-padding: var(--x-spacing-lg);
    --x-chat-window-messages-gap: var(--x-spacing-lg);
    --x-chat-input-radius: var(--x-radius-lg);
    --x-chat-input-border-color: var(--x-color-border);
    --x-chat-input-min-height: 80px;
    --x-chat-send-bg: var(--x-color-graphite);
    --x-chat-send-size: 46px;
    --x-chat-attach-size: 46px;
    /* XChatMessage custom properties */
    --x-chat-bubble-font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    --x-chat-bubble-font-size: var(--x-text-base, 16px);
    --x-chat-time-font-size: var(--x-text-sm, 14px);
    --x-chat-time-color: var(--x-color-muted-foreground);
}

/* Mobile back button — visible only on mobile (FigmaMake: md:hidden 40x40 rounded-full) */
.chat-header__back-btn[b-3t56tblxbu] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--x-color-foreground);
    flex-shrink: 0;
    transition: background-color var(--x-duration-fast, 150ms) var(--x-ease-out, ease-out);
}

.chat-header__back-btn:hover[b-3t56tblxbu] {
    background-color: var(--x-color-neutral-50, #f9fafb);
}

@media (max-width: 767px) {
    .chat-header__back-btn[b-3t56tblxbu] {
        display: flex;
    }
}

/* Chat header spacer pushes actions dropdown to right */
.chat-header__spacer[b-3t56tblxbu] {
    flex: 1;
}

/* Conversation actions dropdown — danger item in red */
.chat-action-danger[b-3t56tblxbu] {
    color: var(--x-color-destructive, #c53030);
}

/* Custom chat header with avatar */
.chat-header[b-3t56tblxbu] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
}

.chat-header__name[b-3t56tblxbu] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-lg, 18px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--x-color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Divider below chat header — FigmaMake: 1px solid var(--border) after gap */
.chat-header-divider[b-3t56tblxbu] {
    height: 1px;
    width: 100%;
    background-color: var(--x-color-border);
    margin-top: var(--x-spacing-md);
}

/* ── Message bubble brand overrides — font-family/size/time via CSS custom properties above ── */
/* Background, radius, padding, max-width set via --x-chat-bubble-* on .x-chat-message in 3beez-overrides.css */

/* ── Chat window input — v3.4.0 exposes font-family/size as tokens ── */
.messages-chat-window[b-3t56tblxbu] {
    --x-chat-input-font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    --x-chat-input-font-size: var(--x-text-base, 16px);
}
/* ::deep retained only for properties not exposed as CSS custom properties */
[b-3t56tblxbu] .x-chat-input textarea {
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    padding: var(--x-spacing-md);
}

[b-3t56tblxbu] .x-chat-send-btn {
    border-radius: var(--x-radius-full);
    padding: 0 var(--x-spacing-5, 20px);
}

[b-3t56tblxbu] .x-chat-send-btn span {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
}

[b-3t56tblxbu] .x-chat-attachment-btn {
    border-radius: var(--x-radius-full);
    border: 1px solid var(--x-color-border);
    background-color: var(--x-color-card, white);
}

.messages-date-chip[b-3t56tblxbu] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--x-spacing-md);
}

.messages-date-chip__pill[b-3t56tblxbu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: var(--x-spacing-xs) var(--x-spacing-3, 12px);
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-card, white);
    border: 1px solid var(--x-color-border);
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-foreground);
}

.messages-empty-thread[b-3t56tblxbu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-3, 12px);
    padding: var(--x-spacing-2xl) var(--x-spacing-lg);
    text-align: center;
    flex: 1;
}

/* FigmaMake: 64px avatar in empty thread — uses SizePixels="64" on XAvatar */

.messages-empty-thread__name[b-3t56tblxbu] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-lg, 18px);
    font-weight: 600;
    color: var(--x-color-foreground);
}

.messages-empty-thread__hint[b-3t56tblxbu] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-muted-foreground);
}

.messages-no-selection-card[b-3t56tblxbu] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.messages-no-selection-card[b-3t56tblxbu]  .x-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ── Focus-visible states (CC-031) ── */

.chat-list-item:focus-visible[b-3t56tblxbu] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.chat-list-item:active[b-3t56tblxbu] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── New Chat Modal — CSS custom properties replace ::deep for XModal (Phase 194) ── */
.new-chat-modal[b-3t56tblxbu] {
    --x-modal-max-width: 480px;
    --x-modal-max-height: 70vh;
    --x-modal-header-padding: var(--x-spacing-5, 20px) var(--x-spacing-lg);
    --x-modal-header-border-color: var(--x-color-border);
    --x-modal-close-size: 36px;
}

/* ::deep retained for close button border/radius not exposed as CSS custom properties */
[b-3t56tblxbu] .new-chat-modal .x-modal-close {
    border-radius: var(--x-radius-full);
    border: 1px solid var(--x-color-border);
    background-color: transparent;
}

.new-chat-modal__title[b-3t56tblxbu] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-1_5xl);
    line-height: 1;
    color: var(--x-color-foreground);
}

.new-chat-modal__search[b-3t56tblxbu] {
    padding: var(--x-spacing-md) var(--x-spacing-lg);
}

.new-chat-modal__list[b-3t56tblxbu] {
    padding: 0 var(--x-spacing-lg) var(--x-spacing-lg);
}

.new-chat-modal__section-label[b-3t56tblxbu] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-muted-foreground);
    margin: 0 0 var(--x-spacing-sm) 0;
    padding-top: 0;
}

.new-chat-modal__section-label + .new-chat-modal__section-label[b-3t56tblxbu],
.new-chat-modal__contact ~ .new-chat-modal__section-label[b-3t56tblxbu] {
    margin-top: var(--x-spacing-md);
}

.new-chat-modal__contact[b-3t56tblxbu] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
    padding: var(--x-spacing-3, 12px);
    border-radius: var(--x-spacing-3, 12px);
    cursor: pointer;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
    border: none;
    background: transparent;
}

.new-chat-modal__contact:hover[b-3t56tblxbu],
.new-chat-modal__contact:active[b-3t56tblxbu] {
    background-color: var(--x-color-bg-hover);
}

.new-chat-modal__contact-info[b-3t56tblxbu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.new-chat-modal__contact-name[b-3t56tblxbu] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--x-color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.new-chat-modal__contact-title[b-3t56tblxbu] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

/* FigmaMake: contact subtitle ("role at company") below name */
.new-chat-modal__contact-subtitle[b-3t56tblxbu] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* FigmaMake: BeeScore pill on contact row — push to right */
.new-chat-modal__beescore[b-3t56tblxbu] {
    margin-left: auto;
    flex-shrink: 0;
}

/* BeeScore badge (small, gold pill — FigmaMake: 24px h, primary bg, white text) */
.beescore-badge-sm[b-3t56tblxbu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 2px 6px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-primary);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
    color: var(--x-color-text-inverse);
    letter-spacing: var(--x-letter-spacing-sm);
    flex-shrink: 0;
}

.new-chat-modal__contact:focus-visible[b-3t56tblxbu] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.new-chat-modal__contact:active[b-3t56tblxbu] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Message context menu ── */
.message-row[b-3t56tblxbu] {
    display: flex;
    align-items: flex-start;
    gap: var(--x-spacing-xs);
    width: 100%;
}

.message-row > :first-child[b-3t56tblxbu] {
    flex: 1;
    min-width: 0;
}

/* Phase 196-L Wave D.2.1 — bubble + attachment chip grouped as a vertical column so the
   chip sits beneath its parent bubble and follows the same own-vs-theirs alignment. */
.message-row__bubble[b-3t56tblxbu] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-2xs, 4px);
    min-width: 0;
}

.message-row__attachment[b-3t56tblxbu] {
    display: flex;
    max-width: 100%;
}

.message-row__attachment--own[b-3t56tblxbu] {
    justify-content: flex-end;
}

.message-row__attachment--theirs[b-3t56tblxbu] {
    /* Mirror the indent the avatar gives the "theirs" bubble so the chip aligns with the
       bubble body, not the avatar column. Matches XChatMessage internal spacing. */
    justify-content: flex-start;
    padding-left: calc(var(--x-avatar-size-s, 32px) + var(--x-spacing-xs, 8px));
}

.message-context-menu[b-3t56tblxbu] {
    opacity: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
    flex-shrink: 0;
}

.message-row:hover .message-context-menu[b-3t56tblxbu],
.message-row:focus-within .message-context-menu[b-3t56tblxbu],
.message-context-menu:focus-within[b-3t56tblxbu] {
    opacity: 1;
}

.message-context-btn[b-3t56tblxbu] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    background: transparent;
    border: none;
}

/* ── Message context menu — CSS custom properties replace ::deep for XDropdown (Phase 194) ── */
.message-context-menu[b-3t56tblxbu] {
    --x-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --x-dropdown-min-width: 200px;
    --x-dropdown-radius: var(--x-radius, 16px);
    --x-dropdown-border-color: var(--x-color-border);
    --x-dropdown-item-padding: var(--x-spacing-3, 12px) var(--x-spacing-md);
    --x-dropdown-item-hover-bg: var(--x-color-received-bubble);
}

/* ── Responsive adjustments ── */
@media (max-width: 1024px) {
    .messages-chat-list-title[b-3t56tblxbu] {
        font-size: var(--x-text-xl);
    }
}

@media (max-width: 767px) {
    .messages-split-view[b-3t56tblxbu] {
        height: calc(100vh - 180px);
        height: calc(100dvh - 180px);
        max-height: none;
    }

    .messages-chat-list-title[b-3t56tblxbu] {
        font-size: var(--x-text-xl);
    }

    .chat-list-item[b-3t56tblxbu] {
        padding: var(--x-spacing-3, 12px);
    }

    .chat-list-item__name[b-3t56tblxbu] {
        font-size: var(--x-text-sm, 14px);
    }

    .chat-list-item__preview[b-3t56tblxbu] {
        font-size: var(--x-text-sm, 14px);
    }

    .messages-empty-thread[b-3t56tblxbu] {
        padding: var(--x-spacing-lg) var(--x-spacing-md);
    }

    .messages-chat-window[b-3t56tblxbu] {
        --x-chat-window-messages-gap: var(--x-spacing-md);
    }

    /* FigmaMake: New Chat button shows icon-only on mobile (hidden md:inline on text) */
    .new-chat-btn__text[b-3t56tblxbu] {
        display: none;
    }

    .messages-chat-window[b-3t56tblxbu] {
        --x-chat-input-min-height: 60px;
        --x-chat-send-size: 40px;
        --x-chat-attach-size: 40px;
        --x-chat-bubble-max-width: min(85vw, 300px);
    }

    .messages-empty-thread[b-3t56tblxbu] {
        gap: var(--x-spacing-md);
    }
}

/* ── Responsive: skeleton single column on mobile ── */
@media (max-width: 767px) {
    .messages-skeleton[b-3t56tblxbu] {
        grid-template-columns: 1fr;
        min-height: 200px;
    }
}

/* ── Skeleton loading ── */
.messages-skeleton[b-3t56tblxbu] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--x-spacing-md);
    min-height: 400px;
}

.messages-skeleton__list[b-3t56tblxbu] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
}

/* ── Phase 188: Typing indicator + presence dots — v3.4.0 native components ── */
/* XTypingIndicator (Xablu.Blazor) replaces 50 lines of custom HTML/CSS/keyframes */
/* XPresenceDot (Xablu.Blazor) replaces 17 lines of custom dot HTML/CSS */

.avatar-presence[b-3t56tblxbu] {
    position: relative;
    display: inline-block;
}

/* Position XPresenceDot as bottom-right overlay on the avatar */
[b-3t56tblxbu] .avatar-presence-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--x-color-card);
}

/* ── Phase 188: Connection banner ── */

.connection-banner[b-3t56tblxbu] {
    background: var(--x-color-warning-muted);
    color: var(--x-color-warning-foreground);
    text-align: center;
    padding: var(--x-spacing-sm);
    font-size: var(--x-text-sm);
    font-weight: 600;
}

/* ── Phase 188 B-10: Scroll pagination sentinel ── */

.scroll-sentinel[b-3t56tblxbu] {
    display: flex;
    justify-content: center;
    padding: var(--x-spacing-sm);
    min-height: 1px;
}
/* /Components/Pages/NetworkPage.razor.rz.scp.css */
/* ── Heading row: title only (FigmaMake: search is on tabs row, not heading row) ── */
.network-page-heading-row[b-ekmiobfrie] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-lg, 24px);
    margin-bottom: var(--x-spacing-lg, 24px);
}

/* ── Tabs wrapper: positions search alongside tab header bar (FigmaMake layout) ── */
.network-tabs-wrapper[b-ekmiobfrie] {
    position: relative;
}

/* Search — Figma: BSearchbar 300×46px pill, gold icon, muted placeholder */
[b-ekmiobfrie] .network-top-search {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 300px;
}

[b-ekmiobfrie] .network-top-search .x-searchbox,
[b-ekmiobfrie] .network-top-search .x-searchheader-input {
    height: 46px;
    border-radius: 100px;
}

/* Gold search icon */
[b-ekmiobfrie] .network-top-search .x-icon,
[b-ekmiobfrie] .network-top-search svg {
    color: rgba(174, 148, 64, 1);
}

/* Muted placeholder */
[b-ekmiobfrie] .network-top-search input::placeholder {
    color: rgba(122, 127, 133, 1);
    opacity: 1;
}

@media (max-width: 767px) {
    [b-ekmiobfrie] .network-top-search {
        position: static;
        width: 100%;
        margin-bottom: var(--x-spacing-md, 16px);
    }
}

/* Network page heading migrated to shared .page-heading utility. */

/* ── Loading spinner ── */
.network-loading[b-ekmiobfrie] {
    display: flex;
    justify-content: center;
    padding: var(--x-spacing-2xl);
}

/* ── Section layout ── */
.network-section[b-ekmiobfrie] {
    margin-bottom: 40px;
}

/* Section heading: XSectionHeader theming via v3.5.0 --x-sectionheader-* custom
   properties. Title font-family comes from inheritance on the wrapper (the
   library's .x-sectionheader-title has no explicit font-family). Accent default
   italic + primary color matches Figma — no extra override needed. */
.network-section-heading[b-ekmiobfrie] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    margin-bottom: var(--x-spacing-lg, 24px);
    font-family: var(--x-font-heading);

    --x-sectionheader-title-size: 32px;
    --x-sectionheader-title-weight: 400;
    --x-sectionheader-title-line-height: 1;
    --x-sectionheader-title-letter-spacing: 0;
}

/* Count badge — v3.5.0 exposes no dedicated property for count styling, so
   keep a scoped ::deep override. Figma BBadge spec: gold fill 24x24, white text 14/600. */
.network-section-heading[b-ekmiobfrie]  .x-sectionheader-count,
.network-section-heading[b-ekmiobfrie]  .x-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 100px;
    background-color: var(--x-color-primary);
    color: #ffffff;
    font-family: var(--x-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
}

/* ── Request list ── */
.network-request-list[b-ekmiobfrie] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

/* ── Notification card ── */
/* FigmaMake: rounded-[16px] p-[16px] with var(--card) bg — ::deep targets XCard internals */
[b-ekmiobfrie] .network-notification-card {
    border-radius: var(--x-radius-lg);
    margin-bottom: var(--x-spacing-3, 12px);
}

.network-notification-row[b-ekmiobfrie] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
    border-radius: var(--x-spacing-sm, 8px);
    padding: var(--x-spacing-xs, 4px);
}

.network-notification-row:hover[b-ekmiobfrie] {
    background-color: var(--x-color-neutral-50);
}

.network-notification-text[b-ekmiobfrie] {
    flex: 1;
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    line-height: 1.4;
    color: var(--x-color-foreground);
}

.network-notification-actions[b-ekmiobfrie] {
    display: flex;
    gap: var(--x-spacing-md, 16px);
    align-items: center;
    flex-shrink: 0;
}

/* ── Watchlist ── */
/* Override XEmptyState padding to match FigmaMake (96px desktop) */
.network-section[b-ekmiobfrie] {
    --x-emptystate-padding: 96px var(--x-spacing-6);
}

.network-watchlist-empty-icon[b-ekmiobfrie] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
}

.network-watchlist-card[b-ekmiobfrie]  .x-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-2xl);
}

.network-watchlist-content[b-ekmiobfrie] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

.network-watchlist-top[b-ekmiobfrie] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
}

.network-watchlist-info[b-ekmiobfrie] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm, 8px);
    flex: 1;
    min-width: 0;
}

.network-watchlist-name-row[b-ekmiobfrie] {
    display: flex;
    gap: var(--x-spacing-sm, 8px);
    align-items: center;
    flex-wrap: wrap;
}

.network-watchlist-name-row strong[b-ekmiobfrie] {
    font-family: var(--x-font-family-inter, var(--x-font-body));
    font-size: var(--x-text-lg, 20px);
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-heading, -0.4px);
    color: var(--x-color-foreground);
}

.network-watchlist-chips[b-ekmiobfrie] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    flex-wrap: wrap;
}

.network-watchlist-desc[b-ekmiobfrie] {
    font-family: var(--x-font-family-inter, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body, -0.32px);
    color: var(--x-color-foreground);
    margin: 0;
}

.network-watchlist-tags[b-ekmiobfrie] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
}

.network-watchlist-actions[b-ekmiobfrie] {
    display: flex;
    gap: var(--x-spacing-md, 16px);
    align-items: end;
    justify-content: center;
    width: 100%;
}

.network-watchlist-actions[b-ekmiobfrie]  .x-button {
    flex: 1;
    min-width: 150px;
}

/* ── FigmaMake: watchlist card shadow — ::deep targets XCard internals ── */
[b-ekmiobfrie] .network-watchlist-card {
    box-shadow: var(--x-shadow-card, 5px 5px 20px 0px #d6dce4);
    transition: box-shadow var(--x-duration-fast) var(--x-ease-out);
}

[b-ekmiobfrie] .network-watchlist-card:hover {
    box-shadow: 5px 5px 24px 0px var(--x-color-card-shadow);
}

/* FigmaMake: watchlist Remove button uses var(--x-color-reject) reject border + text */
.network-watchlist-remove-btn[b-ekmiobfrie] {
    border-color: var(--x-color-reject);
    color: var(--x-color-reject);
    width: 150px;
    min-width: 150px;
    flex: 0 0 auto;
}

.network-watchlist-remove-btn:hover[b-ekmiobfrie] {
    background-color: rgba(149, 69, 53, 0.08);
}

/* FigmaMake: notification avatar is exactly 30px — ::deep targets XAvatar internals */
[b-ekmiobfrie] .network-notification-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* ── Focus-visible for keyboard navigation ── */
.network-notification-row:focus-visible[b-ekmiobfrie],
.network-watchlist-card:focus-visible[b-ekmiobfrie] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.network-notification-row:active[b-ekmiobfrie],
.network-watchlist-card:active[b-ekmiobfrie] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Responsive adjustments ── */
@media (max-width: 767px) {
    .network-notification-row[b-ekmiobfrie] {
        flex-wrap: wrap;
    }

    .network-notification-actions[b-ekmiobfrie] {
        width: 100%;
        justify-content: flex-end;
    }

    .network-watchlist-top[b-ekmiobfrie] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .network-watchlist-info[b-ekmiobfrie] {
        align-items: center;
    }

    .network-watchlist-name-row[b-ekmiobfrie] {
        justify-content: center;
    }

    .network-watchlist-chips[b-ekmiobfrie] {
        justify-content: center;
    }

    .network-watchlist-actions[b-ekmiobfrie] {
        flex-direction: column;
    }

    .network-watchlist-actions[b-ekmiobfrie]  .x-button {
        min-width: unset;
        width: 100%;
    }

    /* FigmaMake: connection grid tightens to 12px on mobile — uses XGrid.GapMobile parameter */
    .network-section[b-ekmiobfrie] {
        --x-grid-gap-mobile: var(--x-spacing-3, 12px);
    }
}

/* ── Skeleton loading ── */
.network-skeleton__grid[b-ekmiobfrie] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--x-spacing-md);
    margin-top: var(--x-spacing-md);
}
/* /Components/Pages/OnboardingFounder.razor.rz.scp.css */
/* OnboardingFounder — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */
/* This file intentionally left with no page-specific overrides. */
/* /Components/Pages/OnboardingFounderFunding.razor.rz.scp.css */
/* OnboardingFounderFunding — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */
/* This file intentionally left with no page-specific overrides. */
/* /Components/Pages/OnboardingFounderPartnerships.razor.rz.scp.css */
/* OnboardingFounderPartnerships — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */

/* Page-specific overrides */

.chip-row[b-o94ij686xm] {
    margin-bottom: var(--x-spacing-xl);
}

.nav-row[b-o94ij686xm] {
    margin-top: 0;
}
/* /Components/Pages/OnboardingInvestor.razor.rz.scp.css */
/* OnboardingInvestor — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */
/* This file intentionally left with no page-specific overrides. */
/* /Components/Pages/OnboardingInvestorCompany.razor.rz.scp.css */
/* OnboardingInvestorCompany — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */
/* This file intentionally left with no page-specific overrides. */
/* /Components/Pages/OnboardingInvestorPreferences.razor.rz.scp.css */
/* OnboardingInvestorPreferences — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */

/* Page-specific: check size two-column layout */

.check-size-row[b-d8vrj1jokh] {
    display: flex;
    gap: var(--x-spacing-md);
}

.check-size-col[b-d8vrj1jokh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
}

/* FigmaMake: geography dropdown with checkboxes */
.geography-check-row[b-d8vrj1jokh] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm, 12px);
    pointer-events: none;
}

.geography-selected-chips[b-d8vrj1jokh] {
    margin-top: var(--x-spacing-sm, 12px);
}

/* ── Responsive: stack check-size inputs on mobile ── */
@media (max-width: 600px) {
    .check-size-row[b-d8vrj1jokh] {
        flex-direction: column;
    }
}
/* /Components/Pages/OnboardingInvestorSectors.razor.rz.scp.css */
/* OnboardingInvestorSectors — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */
/* /Components/Pages/OnboardingPartner.razor.rz.scp.css */
/* OnboardingPartner — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */

/* Page-specific: partner chip styling differs from shared defaults */

.chip-label[b-7tww8g4o4v] {
    font-size: var(--x-text-base);
    font-weight: 400;
    letter-spacing: var(--x-letter-spacing-body);
    margin-bottom: 0;
}

.chip-row[b-7tww8g4o4v] {
    gap: var(--x-spacing-3, 12px);
}
/* /Components/Pages/OnboardingRole.razor.rz.scp.css */
/* OnboardingRole — scoped styles (CC-062) */
/* Shared onboarding classes moved to 3beez-overrides.css (Phase 185E-01) */

/* Page-specific layout */

.onboarding-root[b-uli1ngyp74] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

.form-panel[b-uli1ngyp74] {
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--x-color-card);
    padding: var(--x-spacing-2xl) var(--x-spacing-xl);
}

.form-container[b-uli1ngyp74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--x-spacing-2xl-5, 40px);
    width: 100%;
    max-width: 644px;
    flex: 1;
}

.bee-logo[b-uli1ngyp74] {
    width: 93px;
    height: 77px;
    flex-shrink: 0;
}

/* Sub-headings migrated to shared .heading-row / .heading-plain / .heading-accent
   utility in 3beez-overrides.css (fluid 24-40px clamp, italic accent). */

.form-area[b-uli1ngyp74] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    align-items: flex-start;
    width: 100%;
}

/* Page-specific nav-row override (centered, auto margin) */

.nav-row[b-uli1ngyp74] {
    align-items: center;
    width: 100%;
    margin-top: auto;
}

.arrow-icon[b-uli1ngyp74] {
    width: 12px;
    height: 10px;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .form-container[b-uli1ngyp74] {
        gap: var(--x-spacing-5, 20px);
        max-width: 100%;
        padding: 0 var(--x-spacing-md, 16px);
    }

    .field-group[b-uli1ngyp74] {
        gap: var(--x-spacing-sm);
    }

    .field-label[b-uli1ngyp74] {
        font-size: var(--x-text-sm);
    }
}

/* ── Input overrides — CSS custom properties replace ::deep for XTextfield (Phase 194) ── */
.onboarding-input[b-uli1ngyp74] {
    --x-textfield-height: 46px;
    --x-textfield-padding: 0 16px;
    --x-textfield-font-size: var(--x-text-base);
}

@media (max-width: 767px) {
    .onboarding-input[b-uli1ngyp74] {
        --x-textfield-height: 40px;
        --x-textfield-padding: 0 12px;
        --x-textfield-font-size: var(--x-text-sm);
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.legal-page[b-1qysmnv80l] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--x-spacing-xl, 24px) var(--x-spacing-md, 12px);
    font-family: var(--x-font-body);
    color: var(--x-color-foreground);
}

.legal-page__title[b-1qysmnv80l] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-2xl, 23px);
    font-weight: 400;
    margin: 0 0 var(--x-spacing-xs, 3px);
}

.legal-page__updated[b-1qysmnv80l] {
    font-size: var(--x-text-sm, 11px);
    color: var(--x-color-muted-foreground);
    margin: 0 0 var(--x-spacing-lg, 18px);
}

.legal-page__section[b-1qysmnv80l] {
    margin-bottom: var(--x-spacing-lg, 18px);
}

.legal-page__section h2[b-1qysmnv80l] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-lg, 15px);
    font-weight: 400;
    margin: 0 0 var(--x-spacing-sm, 6px);
}

.legal-page__section p[b-1qysmnv80l] {
    font-size: var(--x-text-base, 12px);
    line-height: 1.6;
    margin: 0 0 var(--x-spacing-sm, 6px);
}

.legal-page__section h3[b-1qysmnv80l] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-base, 12px);
    font-weight: 400;
    margin: var(--x-spacing-sm, 6px) 0 var(--x-spacing-xs, 3px);
}

.legal-page__section ul[b-1qysmnv80l] {
    margin: 0 0 var(--x-spacing-sm, 6px);
    padding-left: var(--x-spacing-lg, 18px);
}

.legal-page__section li[b-1qysmnv80l] {
    font-size: var(--x-text-base, 12px);
    line-height: 1.6;
}

.legal-page__section a[b-1qysmnv80l] {
    color: var(--x-color-primary);
    text-decoration: underline;
}
/* /Components/Pages/ProfilePage.razor.rz.scp.css */
/* ── ProfilePage Scoped CSS ─────────────────────────────────────── */

/* ── Hero Section ──────────────────────────────────────────────── */
.profile-hero-section[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
}

/* Figma: Frame 1171276467 — white card, r=16, wraps banner + profile info */
/* overflow: visible so XDropdown popup can escape the card boundary */
.profile-hero-wrapper[b-2h6ilkupi0] {
    position: relative;
    background: var(--x-color-card);
    border-radius: 16px;
    overflow: visible;
}

/* ── Profile Info (overlapping banner) ─────────────────────────── */
.profile-info-main[b-2h6ilkupi0] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--x-spacing-lg);
    min-width: 0;
    padding-top: 84px;
}

.profile-info-details[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    flex: 1;
    min-width: 0;
}

.profile-name-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    flex-wrap: wrap;
}

.profile-name-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-xl, 20px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-heading);
    color: var(--x-color-foreground);
    margin: 0;
}

.profile-title-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-base);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-muted-foreground);
    margin: 0;
}

.profile-warning-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-xs);
    align-items: center;
    cursor: pointer;
}

.profile-warning-row:focus-visible[b-2h6ilkupi0] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.profile-warning-row:active[b-2h6ilkupi0] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.profile-warning-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-base);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-reject);
    margin: 0;
}

.profile-edit-btn-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-xs);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
    line-height: 1.2;
}

.profile-avatar-wrapper[b-2h6ilkupi0] {
    width: 184px;
    height: 184px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--x-color-brand-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Company profile hero uses rounded-square logo treatment (Figma 1718-22189) */
.profile-avatar-wrapper--company[b-2h6ilkupi0] {
    border-radius: 16px;
}

.profile-edit-icon[b-2h6ilkupi0] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Card Typography ───────────────────────────────────────────── */
.profile-card-heading[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-lg);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-heading);
    color: var(--x-color-foreground);
    margin: 0;
}

.profile-card-heading--mb[b-2h6ilkupi0] {
    margin-bottom: var(--x-spacing-lg);
}

.profile-body-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-base);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-foreground);
    margin: 0;
}

.profile-body-text--muted[b-2h6ilkupi0],
/* ::deep targets child component content rendered via RenderFragment */
[b-2h6ilkupi0] .profile-body-text--muted {
    color: var(--x-color-muted-foreground);
}

.profile-body-text--reject[b-2h6ilkupi0] {
    color: var(--x-color-reject);
}

.profile-body-text--bold[b-2h6ilkupi0] {
    font-weight: 600;
}

.profile-small-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-sm);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-sm);
    color: var(--x-color-muted-foreground);
    margin: 0;
}

/* ── About Card ────────────────────────────────────────────────── */
.profile-about-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-base);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-foreground);
    margin: var(--x-spacing-lg) 0;
}

.profile-about-footer[b-2h6ilkupi0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
}

.profile-icon-text-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-xs);
    align-items: center;
}

.profile-social-group[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
}

/* ── Company Pages Card ────────────────────────────────────────── */
.profile-company-header[b-2h6ilkupi0] {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: var(--x-spacing-lg);
}

.profile-company-header .profile-card-heading[b-2h6ilkupi0] {
    flex: 1;
}

.profile-company-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    padding: 22px var(--x-spacing-xs);
    cursor: pointer;
    /* FigmaMake: company avatars use 12px radius */
    --x-avatar-radius: 12px;
}

.profile-company-row:focus-visible[b-2h6ilkupi0] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.profile-company-row:active[b-2h6ilkupi0] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.profile-company-info[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: var(--x-spacing-sm);
}

.profile-company-meta[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.profile-company-tags[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    flex-wrap: wrap;
}

/* ── Ghost action button text (FigmaMake: 14px/700/0.7px/uppercase var(--x-color-brand-chevron-muted)) ── */
.profile-ghost-btn-text[b-2h6ilkupi0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-action-text);
    line-height: 1.2;
    white-space: nowrap;
}

/* ── Investment Focus Card (FigmaMake: company-profile-view.tsx) ── */
.invest-focus-body[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    margin-top: var(--x-spacing-lg);
}

.invest-focus-field[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
}

.invest-focus-label[b-2h6ilkupi0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-sm);
    color: var(--x-color-muted-foreground);
    margin: 0;
}

.invest-focus-chips[b-2h6ilkupi0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-sm);
}

.invest-focus-grid[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-xl);
    flex-wrap: wrap;
}

.invest-focus-grid .invest-focus-field[b-2h6ilkupi0] {
    flex: 1;
    min-width: 200px;
}

/* ── Attachments Card (FigmaMake: company-profile-view.tsx) ────── */
.profile-attachment-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    padding: var(--x-spacing-3, 12px) 0;
    border-top: 1px solid var(--x-color-divider);
}

.profile-attachment-row:first-of-type[b-2h6ilkupi0] {
    border-top: none;
}

.profile-attachment-icon[b-2h6ilkupi0] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--x-color-neutral-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--x-color-foreground);
}

.profile-attachment-info[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* ── Team Card: ADD TO HIVE pill (compact, 32px height) ────────── */
.btn-team-hive[b-2h6ilkupi0] {
    height: 32px;
    padding: 0 var(--x-spacing-3, 12px);
    gap: 6px;
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
}

/* ── Identity Verification Card ────────────────────────────────── */
.profile-identity-content[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    align-items: center;
    justify-content: center;
}

/* ── Network Card ──────────────────────────────────────────────── */
.profile-network-header[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    width: 100%;
    margin-bottom: var(--x-spacing-lg);
}

.profile-network-spacer[b-2h6ilkupi0] {
    flex: 1;
}

.profile-network-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    padding: 22px var(--x-spacing-xs);
    width: 100%;
}

.profile-network-info[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: var(--x-spacing-xs);
}

/* ── BeeScore Card ─────────────────────────────────────────────── */
.profile-beescore-header[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-md);
    align-items: center;
    width: 100%;
    margin-bottom: var(--x-spacing-lg);
}

.profile-beescore-header :last-child[b-2h6ilkupi0] {
    margin-left: auto;
}


.profile-beescore-section[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
    margin-top: var(--x-spacing-lg);
}

.profile-beescore-section-title[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-base);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-foreground);
    margin: 0;
}

.profile-beescore-box[b-2h6ilkupi0] {
    border-radius: var(--x-radius-xl, 16px);
    padding: var(--x-spacing-lg);
    border: 1px solid var(--x-color-neutral-300);
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

.profile-beescore-dim-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: center;
    width: 100%;
}

.profile-beescore-dim-label[b-2h6ilkupi0] {
    width: 135px;
    text-align: center;
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-base);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-foreground);
    margin: 0;
}

.profile-beescore-dim-bar[b-2h6ilkupi0] {
    flex: 1;
    display: flex;
    gap: var(--x-spacing-lg);
    align-items: center;
}

.profile-beescore-dim-score[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-base);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-foreground);
    margin: 0;
}

.profile-attributes-grid[b-2h6ilkupi0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
}

.profile-beescore-link[b-2h6ilkupi0] {
    display: flex;
    justify-content: center;
    margin-top: var(--x-spacing-lg);
}


/* ── Inline SVG sizing ─────────────────────────────────────────── */
.profile-check-icon[b-2h6ilkupi0] {
    width: 16px;
    height: 16px;
    margin-left: auto;
}

.profile-chevron-icon[b-2h6ilkupi0] {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
}

/* ── Hover / Focus states (CC-031) ── */
.profile-company-row[b-2h6ilkupi0] {
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
    border-radius: var(--x-radius-md);
}

.profile-company-row:hover[b-2h6ilkupi0] {
    background-color: var(--x-color-neutral-50);
}

.profile-company-row:focus-visible[b-2h6ilkupi0] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.profile-network-row[b-2h6ilkupi0] {
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
    border-radius: var(--x-radius-md);
}

.profile-network-row:hover[b-2h6ilkupi0] {
    background-color: var(--x-color-neutral-50);
}

.profile-network-row:focus-visible[b-2h6ilkupi0] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.profile-edit-btn[b-2h6ilkupi0] {
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.profile-edit-btn:hover[b-2h6ilkupi0],
.profile-edit-btn:active[b-2h6ilkupi0] {
    opacity: 0.9;
}

/* ── Profile switcher dropdown ── */
.profile-switcher-dropdown[b-2h6ilkupi0] {
    width: 184px;
}

/* Ensure dropdown popup floats above all page content */
[b-2h6ilkupi0] .profile-switcher-dropdown .x-dropdown-menu,
[b-2h6ilkupi0] .profile-switcher-dropdown [class*="dropdown-menu"],
[b-2h6ilkupi0] .profile-switcher-dropdown [class*="popup"],
[b-2h6ilkupi0] .profile-switcher-dropdown [class*="popover"] {
    z-index: 1000;
}

.profile-switcher-trigger[b-2h6ilkupi0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    width: 100%;
    padding: var(--x-spacing-sm) var(--x-spacing-3, 12px);
    border-radius: var(--x-radius-md, 10px);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    cursor: pointer;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.profile-switcher-trigger:hover[b-2h6ilkupi0],
.profile-switcher-trigger:active[b-2h6ilkupi0] {
    opacity: 0.9;
}

.profile-switcher-avatar[b-2h6ilkupi0] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--x-text-3xs);
    font-weight: 600;
    color: var(--x-color-text-inverse);
    flex-shrink: 0;
}

.profile-switcher-avatar--personal[b-2h6ilkupi0] {
    border-radius: 50%;
    background-color: var(--x-color-primary);
}

.profile-switcher-avatar--company[b-2h6ilkupi0] {
    border-radius: 4px;
    background-color: var(--x-color-primary);
}

.profile-switcher-label[b-2h6ilkupi0] {
    flex: 1;
    min-width: 0;
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-sm, 14px);
    font-weight: 500;
    color: var(--x-color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-switcher-option[b-2h6ilkupi0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    width: 100%;
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-foreground);
}

.profile-switcher-item--active[b-2h6ilkupi0] {
    background-color: var(--x-color-secondary);
    font-weight: 600;
}

.profile-switcher-divider[b-2h6ilkupi0] {
    height: 1px;
    background-color: var(--x-color-border);
    margin: var(--x-spacing-xs) 0;
}

.profile-switcher-section-label[b-2h6ilkupi0] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: var(--x-text-xxs);
    font-weight: 600;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-muted-foreground);
    padding: 6px var(--x-spacing-3, 12px);
}

/* Network count badge (CC-062) */
.profile-count-badge[b-2h6ilkupi0] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--x-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-count-badge__text[b-2h6ilkupi0] {
    font-size: var(--x-text-base);
    font-weight: 600;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-text-inverse);
}

/* Earned attribute chips */
.chip-attribute[b-2h6ilkupi0] {
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.chip-attribute:hover[b-2h6ilkupi0] {
    opacity: 0.85;
}

/* Page heading migrated to shared .page-heading utility in 3beez-overrides.css. */

/* ── Hero banner — Figma source R7uThiW3UQ35YnrsaWTEj9 `Frame 34737` ── */
/* Solid #111318 (bg-dark) fallback when no user banner uploaded. The hero
   hexagon SVG (gold alpha 20%→5%) sits on top. No overlay gradient — the
   previous stacked-gradient fallback was producing a visible asymmetric
   split (seen in 2026-04-20 screenshots) that Figma does NOT show. */
.profile-hero-banner[b-2h6ilkupi0] {
    height: 344px;
    margin-bottom: -84px;
    position: relative;
    z-index: 1;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    background: var(--x-color-bg-dark);
}

/* FigmaMake: golden hexagonal SVG decoration (hidden lg:block — desktop only) */
.profile-hero-hexagon[b-2h6ilkupi0] {
    display: none;
    position: absolute;
    right: -50px;
    top: -20px;
    width: 650px;
    height: 377px;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 1024px) {
    .profile-hero-hexagon[b-2h6ilkupi0] {
        display: block;
    }
}

/* Banner image — covers full area, face-centered, gradient fallback shows through for no-image users */
.profile-hero-banner__img[b-2h6ilkupi0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.profile-info-overlay[b-2h6ilkupi0] {
    position: relative;
    z-index: 2;
    padding: var(--x-spacing-lg) 40px;
}

.profile-info-row[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-lg);
    align-items: flex-start;
    width: 100%;
}

.profile-avatar-section[b-2h6ilkupi0] {
    flex-shrink: 0;
    margin-top: -84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--x-spacing-sm);
}

/* ── Two-column layout ── */
.profile-two-col[b-2h6ilkupi0] {
    display: flex;
    gap: var(--x-spacing-lg);
    align-items: flex-start;
}

.profile-left-col[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    flex: 1;
    width: 100%;
}

.profile-right-col[b-2h6ilkupi0] {
    width: 531px;
    flex-shrink: 0;
}

/* ── Responsive adjustments ── */
@media (max-width: 1024px) {
    .profile-right-col[b-2h6ilkupi0] {
        width: 380px;
    }

    .profile-hero-banner[b-2h6ilkupi0] {
        height: 260px;
    }
}

@media (max-width: 767px) {
    .profile-hero-banner[b-2h6ilkupi0] {
        height: 180px;
        margin-bottom: -60px;
    }

    .profile-info-overlay[b-2h6ilkupi0] {
        /* FigmaMake profile.tsx:518 `px-[24px] md:px-[40px]` — 24 horizontal on mobile. */
        padding: var(--x-spacing-md) var(--x-spacing-lg);
    }

    .profile-info-row[b-2h6ilkupi0] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-avatar-section[b-2h6ilkupi0] {
        margin-top: -60px;
    }

    .profile-two-col[b-2h6ilkupi0] {
        flex-direction: column;
    }

    .profile-right-col[b-2h6ilkupi0] {
        width: 100%;
    }

    .profile-edit-btn[b-2h6ilkupi0] {
        width: 100%;
    }

    .profile-avatar-wrapper[b-2h6ilkupi0] {
        width: 120px;
        height: 120px;
    }

    [b-2h6ilkupi0] .profile-beescore-progress {
        width: 100%;
        max-width: 235px;
    }
}

/* ── Profile card overrides (FigmaMake: 20px radius, 24px padding, no border) — CSS custom properties ── */
.profile-two-col[b-2h6ilkupi0] {
    --x-card-radius: var(--x-radius-lg);
    --x-card-padding: var(--x-spacing-lg);
    --x-card-border-color: transparent;
}

/* ── BeeScore progress bar — gold track + constrained width (FigmaMake parity) ── */
/* ::deep needed for width constraint on rendered XProgressBar wrapper */
[b-2h6ilkupi0] .profile-beescore-progress {
    width: 235px;
}

/* CSS custom property cascades into XProgressBar without ::deep */
.profile-beescore-dim-bar[b-2h6ilkupi0] {
    --x-progressbar-track-color: var(--x-color-progress-track);
    --x-progressbar-track-radius: 25px;
}

/* ── Skeleton loading ── */
.profile-skeleton[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}

.profile-skeleton__info[b-2h6ilkupi0] {
    display: flex;
    align-items: end;
    gap: var(--x-spacing-md);
    margin-top: -40px;
    padding-left: var(--x-spacing-lg);
}

.profile-skeleton__text[b-2h6ilkupi0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
}

/* XIcon plus inside the "ADD Company Pages" XButton. Replaces the prior
   inline <svg><path d="M6 1v10M1 6h10"/></svg>. currentColor picks up the
   muted brand chevron token; margin-right provides the 8px gap before
   the button label. */
.profile-add-icon[b-2h6ilkupi0] {
    margin-right: 8px;
    color: var(--x-color-brand-chevron-muted);
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Inline-style extractions (V3 finding from sweep 2026-04-21)              */
/* ───────────────────────────────────────────────────────────────────────── */
.btn-team-hive__icon[b-2h6ilkupi0] {
    width: 16px;
    height: 16px;
}

.profile-network-empty[b-2h6ilkupi0] {
    padding: var(--x-spacing-md) 0;
    text-align: center;
}
/* /Components/Pages/SettingsPage.razor.rz.scp.css */
/* ── Loading skeleton ── */
.settings-skeleton[b-4tjj4tjzz1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ── Page title (60px Instrument Serif) ── */
.settings-page-title-row[b-4tjj4tjzz1] {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

/* MR-FIGMA-TRUTH-AUDIT 2026-04-20: restored to 60px per Figma source
   (R7uThiW3UQ35YnrsaWTEj9 node 4371-8191 "Settings" text = 60px
   Instrument Serif). MR-FIGMA-TITLES (!237) reduced to 40px against
   Oksana's "title fonts too large" — wrong vs Figma authoritative source. */
.settings-page-title[b-4tjj4tjzz1] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-6xl);
    line-height: 1;
    color: var(--x-color-foreground);
}

/* ── Two-column grid — equal 50/50 with 24px gap ── */
.settings-grid[b-4tjj4tjzz1] {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 24px;
}

/* Left column — equal width with right (Timezone + Danger Zone) */
.settings-left-col[b-4tjj4tjzz1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Card headings (32px Instrument Serif, black) ── */
.settings-card-heading[b-4tjj4tjzz1] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    color: var(--x-color-foreground);
    margin: 0;
}

/* ── Field spacing within cards ── */
.settings-field-gap[b-4tjj4tjzz1] {
    margin-top: 24px;
}

/* Timezone/frequency dropdowns: half-card width per Figma (322px of 668px content) */
.settings-timezone-picker[b-4tjj4tjzz1],
.settings-frequency[b-4tjj4tjzz1] {
    max-width: 322px;
}

/* ── Action button row ── */
.settings-action-row[b-4tjj4tjzz1] {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
}

/* Buttons: 150px min-width, pill shape via component prop */
.settings-btn[b-4tjj4tjzz1] {
    min-width: 150px;
}

.settings-btn--danger-confirm[b-4tjj4tjzz1] {
    min-width: 180px;
}

/* ── Danger Zone card ── */
.settings-danger-card[b-4tjj4tjzz1] {
    border: 1px solid var(--x-color-destructive);
}

/* Danger Zone heading: black (not red) per user request */
.settings-card-heading--danger[b-4tjj4tjzz1] {
    color: var(--x-color-foreground);
}

.settings-danger-description[b-4tjj4tjzz1] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    line-height: 1.6;
    margin-top: 8px;
    margin-bottom: 24px;
}

/* ── Notifications card (fills remaining width in right column) ── */
.settings-notifications-card[b-4tjj4tjzz1] {
    flex: 1;
    min-width: 0;
}

/* ── Notification column headers ── */
.settings-pref-header[b-4tjj4tjzz1] {
    display: flex;
    align-items: center;
    margin-top: 24px;
}

.settings-pref-header__spacer[b-4tjj4tjzz1] {
    flex: 1;
    min-width: 0;
}

/* 137px per Figma (was 100px) */
.settings-pref-header__col[b-4tjj4tjzz1] {
    width: 137px;
    text-align: center;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.32px;
    color: var(--x-color-foreground);
}

/* ── Notification rows ── */
.settings-notif-rows[b-4tjj4tjzz1] {
    display: flex;
    flex-direction: column;
    gap: 28px; /* Figma: 28px (was 20px) */
    margin-top: 28px;
}

.settings-notif-row[b-4tjj4tjzz1] {
    display: flex;
    align-items: center;
    min-height: 27px;
}

.settings-notif-row__label[b-4tjj4tjzz1] {
    flex: 1;
    min-width: 0;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.32px;
    color: var(--x-color-foreground);
}

/* 137px per Figma (was 100px) */
.settings-pref-row__toggle[b-4tjj4tjzz1] {
    width: 137px;
    display: flex;
    justify-content: center;
}

/* ── Digest frequency selector ── */
.settings-frequency[b-4tjj4tjzz1] {
    margin-top: 32px;
}

.settings-frequency-label[b-4tjj4tjzz1] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 500;
    color: var(--x-color-foreground);
    margin: 0 0 4px 0;
}

/* Trigger button styling for select-like appearance */
.settings-frequency[b-4tjj4tjzz1]  .x-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-full, 9999px);
    background-color: var(--x-color-card);
    cursor: pointer;
    gap: 8px;
    transition: border-color var(--x-transition-fast);
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
}

.settings-frequency[b-4tjj4tjzz1]  .x-dropdown-trigger:hover {
    border-color: var(--x-color-primary);
}

.settings-frequency[b-4tjj4tjzz1]  .x-dropdown-trigger:focus-visible {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
    border-color: var(--x-color-primary);
}

/* Menu fills trigger width */
.settings-frequency[b-4tjj4tjzz1]  .x-dropdown-menu {
    width: 100%;
    min-width: 0;
}

/* Selected item: highlighted background + semi-bold */
.settings-frequency[b-4tjj4tjzz1]  .x-dropdown-item.freq-item--selected {
    background-color: var(--x-color-secondary);
    font-weight: 600;
    color: var(--x-color-foreground);
}

/* Row inside each item: label left, checkmark right */
.freq-item-content[b-4tjj4tjzz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

/* Check icon colour matches primary */
.freq-item-check[b-4tjj4tjzz1] {
    color: var(--x-color-primary);
    flex-shrink: 0;
}

/* ── Timezone dropdown trigger styling ── */
.settings-timezone-picker[b-4tjj4tjzz1]  .x-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-full, 9999px);
    background-color: var(--x-color-card);
    cursor: pointer;
    gap: 8px;
    transition: border-color var(--x-transition-fast);
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
}

/* ── Focus overrides for pill inputs/selects ── */
[b-4tjj4tjzz1] .input-pill:focus-visible,
[b-4tjj4tjzz1] .select-pill:focus-visible {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

/* ── Responsive: stack columns below 1024px ── */
@media (max-width: 1024px) {
    .settings-grid[b-4tjj4tjzz1] {
        flex-direction: column;
    }

    .settings-left-col[b-4tjj4tjzz1] {
        width: 100%;
    }

    .settings-timezone-picker[b-4tjj4tjzz1],
    .settings-frequency[b-4tjj4tjzz1] {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .settings-skeleton[b-4tjj4tjzz1] {
        grid-template-columns: 1fr;
    }

    .settings-page-title[b-4tjj4tjzz1] {
        font-size: var(--x-text-3xl);
    }

    .settings-page-title-row[b-4tjj4tjzz1] {
        margin-bottom: 24px;
    }

    .settings-grid[b-4tjj4tjzz1] {
        gap: 16px;
        padding-bottom: 16px;
    }

    .settings-action-row[b-4tjj4tjzz1] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .settings-btn[b-4tjj4tjzz1],
    .settings-btn--danger-confirm[b-4tjj4tjzz1] {
        flex: 1;
        min-width: 0;
    }

    .settings-pref-header__col[b-4tjj4tjzz1] {
        width: 72px;
        font-size: var(--x-text-sm, 14px);
    }

    .settings-pref-row__toggle[b-4tjj4tjzz1] {
        width: 72px;
    }

    .settings-frequency[b-4tjj4tjzz1] {
        margin-top: 24px;
    }
}
/* /Components/Pages/TermsAndConditions.razor.rz.scp.css */
.legal-page[b-wfjb5itzjh] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--x-spacing-xl, 24px) var(--x-spacing-md, 12px);
    font-family: var(--x-font-body);
    color: var(--x-color-foreground);
}

.legal-page__title[b-wfjb5itzjh] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-2xl, 23px);
    font-weight: 400;
    margin: 0 0 var(--x-spacing-xs, 3px);
}

.legal-page__updated[b-wfjb5itzjh] {
    font-size: var(--x-text-sm, 11px);
    color: var(--x-color-muted-foreground);
    margin: 0 0 var(--x-spacing-lg, 18px);
}

.legal-page__section[b-wfjb5itzjh] {
    margin-bottom: var(--x-spacing-lg, 18px);
}

.legal-page__section h2[b-wfjb5itzjh] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-lg, 15px);
    font-weight: 400;
    margin: 0 0 var(--x-spacing-sm, 6px);
}

.legal-page__section p[b-wfjb5itzjh] {
    font-size: var(--x-text-base, 12px);
    line-height: 1.6;
    margin: 0 0 var(--x-spacing-sm, 6px);
}

.legal-page__section h3[b-wfjb5itzjh] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-base, 12px);
    font-weight: 400;
    margin: var(--x-spacing-sm, 6px) 0 var(--x-spacing-xs, 3px);
}

.legal-page__section ul[b-wfjb5itzjh] {
    margin: 0 0 var(--x-spacing-sm, 6px);
    padding-left: var(--x-spacing-lg, 18px);
}

.legal-page__section li[b-wfjb5itzjh] {
    font-size: var(--x-text-base, 12px);
    line-height: 1.6;
}

.legal-page__section a[b-wfjb5itzjh] {
    color: var(--x-color-primary);
    text-decoration: underline;
}
/* /Components/Pages/TrustInsightsPage.razor.rz.scp.css */
/* TrustInsightsPage — scoped styles (Phase 185A-10) */

.trust-insights-page[b-vy06j4ahxr] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    padding: var(--x-spacing-lg);
    max-width: 720px;
    margin: 0 auto;
}

.page-title[b-vy06j4ahxr] {
    font-size: var(--x-font-size-h2, 1.5rem);
    font-weight: 600;
    color: var(--x-color-text-primary);
    margin: 0 0 var(--x-spacing-sm) 0;
}

/* Loading spinner wrapper */
.loading-container[b-vy06j4ahxr] {
    display: flex;
    justify-content: center;
    padding: var(--x-spacing-xxl);
}

/* Overall score card — ::deep targets XCard component internals */
[b-vy06j4ahxr] .score-card {
    text-align: center;
}

.score-total[b-vy06j4ahxr] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--x-color-primary-600);
    line-height: 1.2;
}

/* Dimension breakdown card — ::deep targets XCard component internals */
[b-vy06j4ahxr] .breakdown-card {
    margin-top: var(--x-spacing-xs);
}

.dimension-row[b-vy06j4ahxr] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
    padding: var(--x-spacing-sm) 0;
    border-bottom: 1px solid var(--x-color-border-subtle, rgba(0, 0, 0, 0.08));
}

.dimension-row:last-child[b-vy06j4ahxr] {
    border-bottom: none;
}

.dimension-name[b-vy06j4ahxr] {
    font-weight: 600;
    font-size: var(--x-font-size-body, 0.875rem);
    color: var(--x-color-text-primary);
}

.dimension-summary[b-vy06j4ahxr],
/* ::deep targets child component content rendered via RenderFragment */
[b-vy06j4ahxr] .dimension-summary {
    font-size: var(--x-font-size-caption, 0.75rem);
    color: var(--x-color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Explanation button wrapper */
.explanation-link[b-vy06j4ahxr] {
    padding: var(--x-spacing-xs) 0;
}

/* Improvement hints card — ::deep targets XCard component internals */
[b-vy06j4ahxr] .hints-card {
    margin-top: var(--x-spacing-xs);
}

.hint-list[b-vy06j4ahxr] {
    list-style: disc;
    padding-left: var(--x-spacing-lg);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
    color: var(--x-color-text-primary);
    font-size: var(--x-font-size-body, 0.875rem);
}

/* ── Skeleton loading ── */
.trust-skeleton[b-vy06j4ahxr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--x-spacing-lg);
}

.trust-skeleton__bars[b-vy06j4ahxr] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    width: 100%;
}

/* ── Responsive: reduce skeleton spacing on mobile ── */
@media (max-width: 767px) {
    .trust-skeleton[b-vy06j4ahxr] {
        gap: var(--x-spacing-md);
        padding: 0 var(--x-spacing-md);
    }
}
/* /Components/Pages/UpNext.razor.rz.scp.css */
/* ── Page header ── */
.page-header[b-77cfjeog4y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: var(--x-spacing-sm) 0;
    gap: var(--x-spacing-md);
    margin-bottom: var(--x-spacing-lg);
}

.page-header__left[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
}

/* ── Back button ── */
.back-button[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border, #d0d7e0);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.back-button:hover[b-77cfjeog4y] {
    background-color: var(--x-color-chip-light, #eff2f5);
}

.back-button:focus-visible[b-77cfjeog4y] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.back-button:active[b-77cfjeog4y] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Page heading ── */
.page-heading[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3);
    flex-wrap: wrap;
}

/* MR-FIGMA-TRUTH-AUDIT 2026-04-20: restored to 60px to match the page-
   level display-heading slot consistent with Profile/Settings/Dashboard
   greetings in Figma (60px Instrument Serif). Up Next has no dedicated
   Figma design frame (it's a Dashboard card that expands to a full page),
   so we follow the Figma page-greeting convention. Reverted from the
   40px MR-FIGMA-TITLES (!237) reduction. */
.page-heading__plain[b-77cfjeog4y] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-6xl);
    line-height: 1;
    color: var(--x-color-foreground);
}

.page-heading__italic[b-77cfjeog4y] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-6xl);
    font-style: italic;
    line-height: 1;
    color: var(--x-color-primary);
}

/* ── Task count badge ── */
.task-count[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
}

.task-count__badge[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-primary);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
    color: var(--x-color-text-inverse, white);
    letter-spacing: var(--x-letter-spacing-sm);
    overflow: hidden;
}

.task-count__label[b-77cfjeog4y] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-muted-text, #7a7f85);
    letter-spacing: var(--x-letter-spacing-body);
    line-height: 1.4;
}

/* ── Task groups ── */
.task-group[b-77cfjeog4y] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    margin-bottom: var(--x-spacing-xl);
}

.task-group:last-child[b-77cfjeog4y] {
    margin-bottom: 0;
    padding-bottom: var(--x-spacing-2xl);
}

.group-label[b-77cfjeog4y] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    color: var(--x-color-muted-text, #7a7f85);
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    line-height: 1.2;
}

.task-cards[b-77cfjeog4y] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
}

/* ── Task card ── */
.task-card[b-77cfjeog4y] {
    background-color: var(--x-color-card);
    border-radius: var(--x-radius-xl, 16px);
    padding: var(--x-spacing-5, 20px) var(--x-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    transition: box-shadow var(--x-duration-fast) var(--x-ease-out);
}

.task-card__row[b-77cfjeog4y] {
    display: flex;
    align-items: flex-start;
    gap: var(--x-spacing-md);
    width: 100%;
}

.task-card__icon-box[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--x-radius-lg, 12px);
    background-color: var(--x-color-primary-tint-6);
    flex-shrink: 0;
}

.task-card__content[b-77cfjeog4y] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    flex: 1;
    min-width: 0;
}

.task-card__title-row[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    flex-wrap: wrap;
}

.task-card__title[b-77cfjeog4y] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 600;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-body);
    line-height: 1.4;
}

.task-card__description[b-77cfjeog4y] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-muted-text, #7a7f85);
    letter-spacing: var(--x-letter-spacing-sm);
    line-height: 1.4;
}

/* FigmaMake: profile completion progress bar below description */
.task-card__progress[b-77cfjeog4y] {
    margin-top: var(--x-spacing-xs);
    --x-progressbar-track-color: var(--x-color-progress-track, #efead9);
    --x-progressbar-track-radius: 25px;
}

/* ── Dismiss button ── */
.dismiss-button[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border, #d0d7e0);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--x-duration-fast) var(--x-ease-out);
}

.dismiss-button:hover[b-77cfjeog4y] {
    background-color: var(--x-color-chip-light, #eff2f5);
}

.dismiss-button:focus-visible[b-77cfjeog4y] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.dismiss-button:active[b-77cfjeog4y] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

/* ── Action button (graphite pill) ── */
.action-button[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-graphite, #292a2c);
    border: none;
    padding: 0 var(--x-spacing-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.action-button:hover[b-77cfjeog4y] {
    opacity: 0.8;
}

.action-button:focus-visible[b-77cfjeog4y] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

.action-button:active[b-77cfjeog4y] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.action-button__label[b-77cfjeog4y] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 700;
    color: var(--x-color-text-inverse, white);
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
}

.task-card__actions[b-77cfjeog4y] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    flex-shrink: 0;
}

/* ── Inline SVG sizing ── */
.upnext-back-icon[b-77cfjeog4y] {
    width: 12px;
    height: 10px;
}

.upnext-users-icon[b-77cfjeog4y] {
    width: 20px;
    height: 18px;
}

.upnext-send-icon[b-77cfjeog4y] {
    width: 18px;
    height: 18px;
}

.upnext-dismiss-icon[b-77cfjeog4y] {
    width: 10px;
    height: 10px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .page-heading__plain[b-77cfjeog4y],
    .page-heading__italic[b-77cfjeog4y] {
        font-size: var(--x-text-3xl);
    }

    .page-header[b-77cfjeog4y] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--x-spacing-md);
    }

    .task-card[b-77cfjeog4y] {
        padding: var(--x-spacing-md);
    }

    .task-card__row[b-77cfjeog4y] {
        flex-wrap: wrap;
    }

    .task-card__actions[b-77cfjeog4y] {
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--x-spacing-sm);
    }

    .task-card__title[b-77cfjeog4y] {
        font-size: var(--x-text-sm, 14px);
    }

    .task-card__description[b-77cfjeog4y] {
        font-size: var(--x-text-sm, 14px);
    }
}

@media (max-width: 1024px) {
    .page-heading__plain[b-77cfjeog4y],
    .page-heading__italic[b-77cfjeog4y] {
        font-size: var(--x-text-5xl);
    }
}

/* ── Skeleton loading ── */
.upnext-skeleton[b-77cfjeog4y] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}
/* /Components/Pages/WelcomePage.razor.rz.scp.css */
/* Welcome splash — post-login landing. Re-uses Login.razor.css dark hero
   panel via the shared `.onboarding-left-panel` + `.login-hero-*` / `.login-supporters-*`
   utilities (in 3beez-overrides.css). Only this file owns the .welcome-card
   wrapper + .welcome-cta styling that distinguishes welcome from sign-in. */

/* XCardEmpty-style white card wrapping the right-side content (Figma
   2542-44431 inner frame 431x747 rounded-[5px]). Our card is responsive —
   matches the login-right-panel width on desktop, shrinks on mobile. */
.welcome-card[b-5s4d5w2g09] {
    width: 100%;
    max-width: 448px;
    background: var(--x-color-card);
    border-radius: var(--x-radius-sm, 5px);
    padding: var(--x-spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--x-spacing-lg);
    text-align: center;
}

.welcome-body[b-5s4d5w2g09] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-lg);
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    margin: 0;
    max-width: 380px;
}

.welcome-cta-wrapper[b-5s4d5w2g09] {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    --x-button-height: 46px;
    --x-button-radius: var(--x-radius-full);
    --x-button-bg: var(--x-color-primary);
    --x-button-color: var(--x-color-primary-foreground);
}

.welcome-cta-wrapper[b-5s4d5w2g09]  .welcome-cta-btn {
    width: 100%;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
}

.welcome-cta-wrapper[b-5s4d5w2g09]  .welcome-cta-btn:hover { opacity: 0.9; }
.welcome-cta-wrapper[b-5s4d5w2g09]  .welcome-cta-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Responsive — same breakpoints as Login */
@media (max-width: 767px) {
    .welcome-card[b-5s4d5w2g09] {
        padding: var(--x-spacing-lg);
        max-width: 100%;
    }
}
/* /Components/Shared/ActivityTimelinePanel.razor.rz.scp.css */
/* ActivityTimelinePanel — side panel 450px wide per Figma 2251-26826.
   Full-height scrollable feed; slides in from the right with a scrim overlay. */

.activity-panel-overlay[b-dv1riyi1y2] {
    position: fixed;
    inset: 0;
    z-index: var(--x-z-modal, 1000);
    background: var(--x-color-scrim, rgba(0, 0, 0, 0.4));
    display: flex;
    justify-content: flex-end;
    animation: activity-fade-in-b-dv1riyi1y2 var(--x-duration-fast) var(--x-ease-out);
}

@keyframes activity-fade-in-b-dv1riyi1y2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.activity-panel[b-dv1riyi1y2] {
    width: 450px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--x-color-card);
    box-shadow: var(--x-elevation-xl);
    display: flex;
    flex-direction: column;
    animation: activity-slide-in-b-dv1riyi1y2 var(--x-duration-slow) var(--x-ease-out);
}

@keyframes activity-slide-in-b-dv1riyi1y2 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.activity-panel__header[b-dv1riyi1y2] {
    padding: var(--x-spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--x-color-border);
    flex-shrink: 0;
}

.activity-panel__title[b-dv1riyi1y2] {
    margin: 0;
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: var(--x-spacing-2, 8px);
}

.activity-panel__title-plain[b-dv1riyi1y2] {
    color: var(--x-color-foreground);
}

.activity-panel__title-italic[b-dv1riyi1y2] {
    font-style: italic;
    color: var(--x-color-primary);
}

.activity-panel__body[b-dv1riyi1y2] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ── Individual activity item (matching Figma 450x~186) ─── */
.activity-item[b-dv1riyi1y2] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: var(--x-spacing-3, 12px);
    padding: var(--x-spacing-lg);
    align-items: start;
}

.activity-item__body[b-dv1riyi1y2] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    min-width: 0;
}

.activity-item__headline[b-dv1riyi1y2] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-1, 4px);
    flex-wrap: wrap;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    line-height: 1.4;
    color: var(--x-color-foreground);
}

.activity-item__actor[b-dv1riyi1y2] {
    font-weight: 600;
    color: var(--x-color-foreground);
}

.activity-item__verb[b-dv1riyi1y2] {
    color: var(--x-color-foreground);
}

.activity-item__target[b-dv1riyi1y2] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-1, 4px);
}

.activity-item__target-name[b-dv1riyi1y2] {
    font-weight: 600;
}

/* Context pill — e.g. "$200,000 pre-seed" on Figma 321x48 rounded rect */
.activity-item__context-pill[b-dv1riyi1y2] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-2, 8px);
    padding: var(--x-spacing-2, 8px) var(--x-spacing-3, 12px);
    background: var(--x-color-chip-light, #EFF2F5);
    border-radius: var(--x-radius);
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    font-weight: 600;
    color: var(--x-color-foreground);
    align-self: flex-start;
}

/* Reaction buttons row */
.activity-item__reactions[b-dv1riyi1y2] {
    display: flex;
    gap: var(--x-spacing-2, 8px);
}

[b-dv1riyi1y2] .activity-item__react-btn {
    --x-button-height: 46px;
    min-width: 70px;
}

[b-dv1riyi1y2] .activity-item__react-btn .x-label {
    gap: var(--x-spacing-1, 4px);
}

/* Timestamp: 14px Inter 400 muted, "2h ago" */
.activity-item__timestamp[b-dv1riyi1y2] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    white-space: nowrap;
    padding-top: var(--x-spacing-1, 4px);
}

.activity-panel__close[b-dv1riyi1y2] {
    /* Icon-only button — pill via global .x-button default */
    flex-shrink: 0;
}

/* Responsive — mobile full-screen */
@media (max-width: 640px) {
    .activity-panel[b-dv1riyi1y2] {
        width: 100vw;
    }
}
/* /Components/Shared/AddToHiveModal.razor.rz.scp.css */
/* Modal-width override lives in 3beez-overrides.css (un-layered) — XModal's
   `.x-modal` wrapper sits outside this scope. */

/* targets content rendered inside XModal child RenderFragment */
.modal-heading-serif[b-6c87lnfvog] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    color: var(--x-color-card-foreground);
}

.modal-heading-accent[b-6c87lnfvog] {
    color: var(--x-color-primary);
}

.modal-body[b-6c87lnfvog] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-sm) 0;
}

.modal-section[b-6c87lnfvog] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

.modal-section-md[b-6c87lnfvog] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}

.modal-text[b-6c87lnfvog] {
    font-size: var(--x-text-base);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-card-foreground);
    margin: 0;
}

.modal-char-counter[b-6c87lnfvog] {
    font-size: var(--x-text-sm);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-sm);
    color: var(--x-color-muted-foreground);
    text-align: right;
    margin: 0;
}

.modal-char-counter--warn[b-6c87lnfvog] {
    color: var(--x-color-destructive);
}

.modal-text-muted[b-6c87lnfvog] {
    color: var(--x-color-muted-foreground);
}

.avatar-row[b-6c87lnfvog] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-md);
}

.connection-icon[b-6c87lnfvog] {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--x-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6.5px;
}

.error-text[b-6c87lnfvog] {
    color: var(--x-color-destructive);
    font-size: var(--x-text-sm);
    margin: 0;
}

.modal-actions[b-6c87lnfvog] {
    display: flex;
    justify-content: flex-end;
    gap: var(--x-spacing-lg);
}

/* FigmaMake: fixed 150px width for action buttons */
.btn-fixed[b-6c87lnfvog] {
    width: 150px;
    min-width: 150px;
    height: 46px;
}

/* ── Responsive: stack modal buttons on mobile ── */
@media (max-width: 480px) {
    .modal-actions[b-6c87lnfvog] {
        flex-direction: column;
    }

    .btn-fixed[b-6c87lnfvog] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/AttachmentChip.razor.rz.scp.css */
/* Phase 196-L Wave D.2.1 — inline attachment chip used beneath chat bubbles that carry
   an [attachment:{id}] marker. The three variants map 1:1 to the component's state:
   loading while the signed URL is being fetched, error for unresolvable / revoked rows,
   ready for a resolved signed URL rendered as a real <a> so download + middle-click
   behave naturally. */

.attachment-chip[b-krl58tvwsj] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-xs, 8px);
    padding: var(--x-spacing-xs, 8px) var(--x-spacing-sm, 12px);
    border-radius: var(--x-radius, 12px);
    border: 1px solid var(--x-color-border, rgba(0, 0, 0, 0.12));
    background: var(--x-color-surface, #ffffff);
    text-decoration: none;
    color: inherit;
    max-width: 100%;
    min-width: 0;
    transition: background-color var(--x-duration-fast, 150ms) var(--x-ease-out, ease-out),
                border-color var(--x-duration-fast, 150ms) var(--x-ease-out, ease-out);
}

.attachment-chip--ready:hover[b-krl58tvwsj],
.attachment-chip--ready:focus-visible[b-krl58tvwsj] {
    border-color: var(--x-color-primary, #ffc32a);
    background: var(--x-color-received-bubble, rgba(255, 195, 42, 0.08));
    outline: none;
}

.attachment-chip--loading[b-krl58tvwsj] {
    opacity: 0.7;
    cursor: progress;
}

.attachment-chip--error[b-krl58tvwsj] {
    opacity: 0.8;
    cursor: not-allowed;
    border-style: dashed;
    border-color: var(--x-color-danger, #d14343);
}

.attachment-chip__icon[b-krl58tvwsj] {
    flex-shrink: 0;
    color: var(--x-color-primary, #ffc32a);
}

.attachment-chip--error .attachment-chip__icon[b-krl58tvwsj] {
    color: var(--x-color-danger, #d14343);
}

.attachment-chip__body[b-krl58tvwsj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.attachment-chip__filename[b-krl58tvwsj] {
    font-size: var(--x-text-sm, 14px);
    font-weight: 500;
    color: var(--x-color-text-primary, #111111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.attachment-chip__hint[b-krl58tvwsj] {
    font-size: var(--x-text-xs, 12px);
    color: var(--x-color-text-secondary, #666666);
}

.attachment-chip__hint--error[b-krl58tvwsj] {
    color: var(--x-color-danger, #d14343);
}
/* /Components/Shared/AvatarPill.razor.rz.scp.css */
/* ::deep targets child component content (avatar pill button rendered in parent) */
.avatar-pill-btn[b-xk2m0mdcx2] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    padding: var(--x-spacing-xs) var(--x-spacing-3, 12px) var(--x-spacing-xs) var(--x-spacing-xs);
    border-radius: 9999px;
    border: 1px solid var(--x-color-border);
    background: var(--x-color-card);
    cursor: pointer;
    font-family: var(--x-font-body);
    transition: border-color var(--x-duration-fast) var(--x-ease-out);
}

.avatar-pill-btn:hover[b-xk2m0mdcx2] {
    border-color: var(--x-color-primary);
}

.avatar-pill-btn:focus-visible[b-xk2m0mdcx2] {
    outline: none;
    box-shadow: var(--x-focus-ring-shadow);
}

.avatar-pill-btn:active[b-xk2m0mdcx2] {
    transform: scale(0.97);
    transition: transform var(--x-duration-instant, 0ms) ease-out;
}

.avatar-pill-name[b-xk2m0mdcx2] {
    font-size: var(--x-text-sm);
    font-weight: 500;
    color: var(--x-color-card-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
/* /Components/Shared/BeeScoreChip.razor.rz.scp.css */
/* ── BeeScore chip — the single canonical BeeScore pill used everywhere ── */

.beescore-chip[b-blkyexqyse] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    height: 26px;
    border-radius: var(--x-radius-full, 9999px);
    background-color: var(--x-color-primary);
    color: var(--x-color-primary-foreground, #ffffff);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}

/* Bug #22 — band-modifier classes from BeeScoreThresholds. The default chip
   is the brand-gold "Good" pill (Token: --x-color-primary). The other three
   bands provide the deterministic at-a-glance signal that the breakdown was
   missing pre-fix. Tokens default to safe sRGB hex so the chip still renders
   if a theme provider doesn't ship the variable. */

.beescore-chip--poor[b-blkyexqyse] {
    background-color: var(--x-color-destructive, #C82D2D);
    color: var(--x-color-destructive-foreground, #ffffff);
}

.beescore-chip--fair[b-blkyexqyse] {
    background-color: var(--x-color-warning, #ffc107);
    color: var(--x-color-warning-foreground, #000000);
}

.beescore-chip--good[b-blkyexqyse] {
    /* Same as the default — kept explicit so a class-list-only consumer can
       opt into the band style without falling back to brand-default by
       implicit cascade. */
    background-color: var(--x-color-primary);
    color: var(--x-color-primary-foreground, #ffffff);
}

.beescore-chip--excellent[b-blkyexqyse] {
    background-color: var(--x-color-success, #3C850E);
    color: var(--x-color-success-foreground, #ffffff);
}

/* Crown SVG — width/height already on the element via attributes;
   CSS here handles flex layout and color inheritance only. */
.beescore-chip__icon[b-blkyexqyse] {
    flex-shrink: 0;
    display: block;
    /* fill="currentColor" on the path inherits white from parent */
}

.beescore-chip__score[b-blkyexqyse] {
    line-height: 1;
    min-width: 2ch;
    text-align: center;
}
/* /Components/Shared/BeeScoreDetailsModal.razor.rz.scp.css */
/* BeeScoreDetailsModal — right slide-in panel via XSidePanel.
   Figma Make source: FigmaMake/src/app/components/beescore-details-modal.tsx
   (560px, rounded-tl/bl 16). */

/* ── Panel shell: rounded left corners, no top/bottom radius ── */
.bsd-panel[b-ayq7sub9r3] {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

/* ── Header: all gold, 40px fw=400, NO italic, no bottom border ── */
[b-ayq7sub9r3] .bsd-panel .x-sidepanel-header {
    padding: 32px 32px 16px;
    border-bottom: none;
}

[b-ayq7sub9r3] .bsd-panel .x-sidepanel-title {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
    color: var(--x-color-primary);
    font-style: normal;
}

/* ── Body padding: 0 32 32 (XSidePanel default is --x-spacing-5 all round) ── */
[b-ayq7sub9r3] .bsd-panel .x-sidepanel-body {
    padding: 0 32px 32px;
}

[b-ayq7sub9r3] .bsd-panel .x-sidepanel-footer {
    padding: 16px 32px 24px;
    border-top: 1px solid var(--x-color-grey-t20, #D6DCE4);
}

/* ── Scrollable content wrapper: gap=32 between sections ── */
.bsd-content[b-ayq7sub9r3] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0;
}

/* ── Entity row: horizontal, gap=12, NO border-bottom ── */
.bsd-entity[b-ayq7sub9r3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bsd-entity__info[b-ayq7sub9r3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bsd-entity__name-row[b-ayq7sub9r3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bsd-entity__name[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
    line-height: 22.4px;
    color: var(--x-color-text-primary, #000000);
}

.bsd-entity__verified-badge[b-ayq7sub9r3] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.bsd-entity__meta-row[b-ayq7sub9r3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.bsd-entity__contact[b-ayq7sub9r3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    letter-spacing: -0.28px;
    line-height: 19.6px;
    color: var(--x-color-muted-foreground);
}

/* ── Section: gap=12 within each section ── */
.bsd-section[b-ayq7sub9r3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bsd-section--gap16[b-ayq7sub9r3] {
    gap: 16px;
}

.bsd-section__title[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
    line-height: 22.4px;
    color: var(--x-color-text-primary, #000000);
}

.bsd-section__subtitle[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.32px;
    line-height: 22.4px;
    color: var(--x-color-text-primary, #000000);
    margin: 0;
}

/* ── Bordered card: bg=#fff stroke=var(--x-color-grey-t20, #D6DCE4) r=16 pad=24 gap=12 ── */
.bsd-card[b-ayq7sub9r3] {
    background: var(--x-color-surface-card, #ffffff);
    border: 1px solid var(--x-color-grey-t20, #D6DCE4);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bsd-card--r20[b-ayq7sub9r3] {
    border-radius: 20px;
}

.bsd-bars[b-ayq7sub9r3] {
    --x-progressbar-track-color: #efead9;
    --x-progressbar-track-radius: 100px;
}

.bsd-chips[b-ayq7sub9r3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bsd-empty[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.32px;
    line-height: 22.4px;
    color: var(--x-color-muted-foreground);
    margin: 0;
}

.bsd-credential[b-ayq7sub9r3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bsd-credential__text[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.32px;
    line-height: 22.4px;
    color: var(--x-color-text-primary, #000000);
}

/* ── Section count chip: "(16)" in gold italic next to title ── */
.bsd-section__count[b-ayq7sub9r3] {
    color: var(--x-color-primary);
    font-style: italic;
    font-weight: 400;
    margin-left: 4px;
}

/* ── Avatar cluster (Vouches): S avatars + optional +N chip ── */
.bsd-avatar-cluster[b-ayq7sub9r3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bsd-avatar-cluster__item[b-ayq7sub9r3] {
    display: inline-flex;
    flex-shrink: 0;
}

.bsd-avatar-cluster__more[b-ayq7sub9r3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9999px;
    background-color: var(--x-color-primary-tint-15, rgba(174, 148, 64, 0.15));
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--x-color-primary);
    letter-spacing: -0.28px;
}

/* ── Overall rating block: big number + /5 denom + 5 stars ── */
.bsd-overall-rating[b-ayq7sub9r3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.bsd-overall-rating__score[b-ayq7sub9r3] {
    font-family: var(--x-font-heading, 'Instrument Serif', Georgia, serif);
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-text-primary, #000000);
}

.bsd-overall-rating__denom[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--x-color-muted-foreground);
}

.bsd-overall-rating__stars[b-ayq7sub9r3] {
    display: flex;
    gap: 2px;
    align-items: center;
    margin-left: auto;
}

/* ── Review row: avatar + identity + stars/time header, text below ── */
.bsd-review[b-ayq7sub9r3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--x-color-border, #d6dce4);
}

.bsd-review:first-of-type[b-ayq7sub9r3] {
    border-top: none;
    padding-top: 0;
}

.bsd-review__header[b-ayq7sub9r3] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.bsd-review__identity[b-ayq7sub9r3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bsd-review__name[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
    line-height: 1.4;
    color: var(--x-color-text-primary, #000000);
}

.bsd-review__role[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
}

.bsd-review__meta[b-ayq7sub9r3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.bsd-review__stars[b-ayq7sub9r3] {
    display: flex;
    gap: 2px;
    align-items: center;
}

.bsd-review__time[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    white-space: nowrap;
}

.bsd-review__text[b-ayq7sub9r3] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    line-height: 1.5;
    color: var(--x-color-text-primary, #000000);
    margin: 0;
}

/* ── Footer: right-aligned action buttons ── */
.bsd-footer[b-ayq7sub9r3] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 767px) {
    .bsd-panel[b-ayq7sub9r3] {
        border-radius: 0;
    }

    [b-ayq7sub9r3] .bsd-panel .x-sidepanel-header {
        padding: 20px 20px 12px;
    }

    [b-ayq7sub9r3] .bsd-panel .x-sidepanel-title {
        font-size: 28px;
        line-height: 32px;
    }

    [b-ayq7sub9r3] .bsd-panel .x-sidepanel-body {
        padding: 0 20px 20px;
    }

    [b-ayq7sub9r3] .bsd-panel .x-sidepanel-footer {
        padding: 12px 20px 16px;
    }

    .bsd-footer[b-ayq7sub9r3] {
        flex-direction: column;
    }
}
/* /Components/Shared/BeeScoreExplanationModal.razor.rz.scp.css */
/* BeeScoreExplanationModal — right slide-in panel via XSidePanel.
   Figma Make source: FigmaMake/src/app/components/beescore-explanation-modal.tsx
   (640px, rounded-tl/bl 16). */

/* ── Panel shell: rounded left corners ── */
.bse-panel[b-s76hgsr0ro] {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

/* ── Header: 32/32/0 padding, no bottom border ── */
[b-s76hgsr0ro] .bse-panel .x-sidepanel-header {
    padding: 32px 32px 0;
    border-bottom: none;
    gap: 16px;
    align-items: flex-start;
}

/* Close button — circular outlined 36px matching the rest of the
   modal family. Library default rendered as a tiny plain glyph. */
[b-s76hgsr0ro] .bse-panel .x-sidepanel-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--x-radius-full);
    border: 1px solid var(--x-color-border);
    background-color: var(--x-color-card);
    color: var(--x-color-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--x-duration-fast, 150ms) var(--x-ease-out, ease-out);
}

[b-s76hgsr0ro] .bse-panel .x-sidepanel-close:hover {
    background-color: var(--x-color-bg-hover);
}

[b-s76hgsr0ro] .bse-panel .x-sidepanel-close svg {
    width: 16px;
    height: 16px;
}

/* ── Body: 24 top, 32 sides/bottom ── */
[b-s76hgsr0ro] .bse-panel .x-sidepanel-body {
    padding: 24px 32px 32px;
}

/* ── Title: "What is BeeScore" — 40px serif ── */
.bse-heading[b-s76hgsr0ro] {
    font-family: var(--x-font-heading, 'Instrument Serif', Georgia, serif);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-text-primary, #000000);
    font-style: normal;
    margin: 0;
}

.bse-accent[b-s76hgsr0ro] {
    font-family: var(--x-font-heading, 'Instrument Serif', Georgia, serif);
    font-style: italic;
    color: var(--x-color-primary, #AE9440);
    font-weight: 400;
    font-size: inherit;
    line-height: inherit;
}

/* ── Body: section stack, 40px gap ── */
.bse-body[b-s76hgsr0ro] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.bse-section[b-s76hgsr0ro] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ── Section heading: 32px serif, NOT italic ── */
.bse-section-heading[b-s76hgsr0ro] {
    font-family: var(--x-font-heading, 'Instrument Serif', Georgia, serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-text-primary, #000000);
    font-style: normal;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
}

/* ── Body paragraph: Inter 16px lh=1.4 ls=-0.32 ── */
.bse-para[b-s76hgsr0ro] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.32px;
    color: var(--x-color-text-primary, #000000);
    margin: 0;
}

/* ── List block: label + bullets (or grouped paragraphs) ── */
.bse-list-block[b-s76hgsr0ro] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Dimensions list: 5 tight rows ── */
.bse-dimensions[b-s76hgsr0ro] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Bullet list: disc, inherits body weight (fw=400) ── */
.bse-bullet-list[b-s76hgsr0ro] {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.32px;
    color: var(--x-color-text-primary, #000000);
    margin: 0;
    padding-left: 24px;
    list-style-type: disc;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bse-bullet-list li[b-s76hgsr0ro] {
    padding: 0;
}

@media (max-width: 767px) {
    .bse-panel[b-s76hgsr0ro] {
        border-radius: 0;
    }

    [b-s76hgsr0ro] .bse-panel .x-sidepanel-header {
        padding: 20px 20px 0;
    }

    [b-s76hgsr0ro] .bse-panel .x-sidepanel-body {
        padding: 16px 20px 20px;
    }

    .bse-heading[b-s76hgsr0ro] {
        font-size: 32px;
    }

    .bse-section-heading[b-s76hgsr0ro] {
        font-size: 24px;
    }

    .bse-body[b-s76hgsr0ro] {
        gap: 32px;
    }

    .bse-section[b-s76hgsr0ro] {
        gap: 12px;
    }
}
/* /Components/Shared/BeeScoreHistoryChart.razor.rz.scp.css */
.beescore-history[b-zivr51aop0] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

.beescore-history__legend[b-zivr51aop0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
}

.beescore-history__legend-item[b-zivr51aop0] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs);
}

.beescore-history__legend-dot[b-zivr51aop0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.beescore-history__legend-dot--excellent[b-zivr51aop0] {
    background: var(--x-score-excellent);
}

.beescore-history__legend-dot--good[b-zivr51aop0] {
    background: var(--x-score-good);
}

.beescore-history__legend-dot--fair[b-zivr51aop0] {
    background: var(--x-score-fair);
}

.beescore-history__legend-dot--low[b-zivr51aop0] {
    background: var(--x-score-low);
}

.beescore-history__legend-label[b-zivr51aop0] {
    font-size: var(--x-text-xs, 0.75rem);
    color: var(--x-color-muted-foreground);
}

.beescore-history__svg[b-zivr51aop0] {
    width: 100%;
    height: 160px;
    overflow: visible;
}

.beescore-history__current[b-zivr51aop0] {
    display: flex;
    align-items: baseline;
    gap: var(--x-spacing-sm);
}

.beescore-history__current-label[b-zivr51aop0] {
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
}

.beescore-history__current-value[b-zivr51aop0] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-xl);
    font-weight: 600;
    line-height: 1;
}

/* ── Responsive: improve SVG text readability on mobile ── */
@media (max-width: 767px) {
    .beescore-history__svg text[b-zivr51aop0] {
        font-size: 12px;
    }
}
/* /Components/Shared/BeeScoreRing.razor.rz.scp.css */
.beescore-ring[b-hhem8x8ex7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.beescore-ring--sm[b-hhem8x8ex7] { width: 48px; height: 48px; }
.beescore-ring--md[b-hhem8x8ex7] { width: 64px; height: 64px; }
.beescore-ring--lg[b-hhem8x8ex7] { width: 96px; height: 96px; }

.beescore-ring__svg[b-hhem8x8ex7] { width: 100%; height: 100%; }

.beescore-ring__value[b-hhem8x8ex7] {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.beescore-ring--lg .beescore-ring__value[b-hhem8x8ex7] { font-size: 1rem; }
/* /Components/Shared/CompanyLogo.razor.rz.scp.css */
.company-logo[b-iwdoz6uugf] {
    width: 32px;
    height: 32px;
    border-radius: var(--x-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}
/* /Components/Shared/CongratsModal.razor.rz.scp.css */
/* MR-FIGMA-TRUTH-INPUTS-CONGRATS 2026-04-20: restored to 60px per Figma source
   R7uThiW3UQ35YnrsaWTEj9 node 1578-48063 "Step 4 - finish". "Congrats!" text is
   60px Instrument Serif (same slot as page-greetings like Welcome/My Profile).
   The "broken" appearance Oksana reported was actually the modal being TOO
   NARROW (520px Medium default), not the title being too large. Width fixed
   in MR-FIGMA-TRUTH-PANEL-CONGRATS (!284) — now 600px per Figma — so the 60px
   title has breathing room. The mobile breakpoint still shrinks to 40px. */
.congrats__header-title[b-c43n6i5xp7] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-6xl);
    line-height: 1;
    color: var(--x-color-foreground);
}

.congrats__content[b-c43n6i5xp7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Oksana: the 40px flex-gap was too generous combined with the reduced
       header size. 24px keeps medal/message/CTA visually connected as one
       column rather than three floating blocks. */
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-lg) 0;
}

.congrats__medal[b-c43n6i5xp7] {
    width: 131px;
    height: 183px;
    position: relative;
    flex-shrink: 0;
}

.congrats__medal-svg[b-c43n6i5xp7] {
    width: 100%;
    height: 100%;
    display: block;
}

.congrats__message[b-c43n6i5xp7] {
    text-align: center;
    font-size: var(--x-text-lg);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: var(--x-letter-spacing-heading);
    color: var(--x-color-card-foreground);
    max-width: 440px;
    margin: 0;
}

.congrats__cta[b-c43n6i5xp7] {
    min-width: 220px;
}

/* ── Responsive: prevent overflow on small phones ── */
@media (max-width: 480px) {
    .congrats__medal[b-c43n6i5xp7] {
        width: 100px;
        height: 140px;
    }

    .congrats__message[b-c43n6i5xp7] {
        max-width: 100%;
        font-size: var(--x-text-base);
    }

    .congrats__cta[b-c43n6i5xp7] {
        min-width: 0;
        width: 100%;
    }

    .congrats__header-title[b-c43n6i5xp7] {
        font-size: var(--x-text-3xl);
    }
}
/* /Components/Shared/ConnectionCard.razor.rz.scp.css */
/* ── Container query support ── */
.connection-card[b-a6vo7tzu5y] { container-type: inline-size; }

/* Figma: card shadow 5px 5px 20px #d5dce4, no border */
[b-a6vo7tzu5y] .connection-card {
    box-shadow: 5px 5px 20px 0px #d5dce4;
    border: none;
    transition: box-shadow var(--x-duration-fast) var(--x-ease-out);
}

.connection-card:hover[b-a6vo7tzu5y] {
    box-shadow: 5px 5px 28px 0px #c8d2dd;
}

@container (max-width: 400px) {
    .connection-card__header[b-a6vo7tzu5y] { flex-direction: column; align-items: center; text-align: center; }
}

.connection-card__header[b-a6vo7tzu5y] {
    display: flex;
    gap: var(--x-spacing-lg);
    align-items: flex-start;
}

.connection-card__info[b-a6vo7tzu5y] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

.connection-card__name-row[b-a6vo7tzu5y] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
    flex-wrap: wrap;
}

.connection-card__name[b-a6vo7tzu5y] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-lg, 20px);
    font-weight: 400;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-heading, -0.4px);
    line-height: 1.2;
}

.connection-card__title[b-a6vo7tzu5y] {
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
    margin-top: 2px;
}

.connection-card__description[b-a6vo7tzu5y] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
    line-height: 1.4;
    margin-bottom: 0;
}

.connection-card__company[b-a6vo7tzu5y] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs);
}

.connection-card__company-name[b-a6vo7tzu5y] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: var(--x-color-foreground);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connection-card__body[b-a6vo7tzu5y] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    height: 100%;
}

.connection-card__actions[b-a6vo7tzu5y] {
    display: flex;
    gap: var(--x-spacing-md);
    align-items: center;
    margin-top: auto;
}

/* FigmaMake: heart/favorite toggle button */
.connection-card__fav-btn[b-a6vo7tzu5y] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.connection-card__fav-btn:hover[b-a6vo7tzu5y] {
    opacity: 0.7;
}

.connection-card__fav-btn:focus-visible[b-a6vo7tzu5y] {
    outline: 2px solid var(--x-color-ring);
    outline-offset: 2px;
}

/* FigmaMake: message button uses graphite dark bg #292a2c, pushed right with ml-auto */
[b-a6vo7tzu5y] .connection-card__msg-btn {
    background-color: var(--x-color-graphite, #292a2c);
    border-color: var(--x-color-graphite, #292a2c);
    height: 46px;
    min-width: 150px;
    margin-left: auto;
}

.connection-card__msg-btn:hover[b-a6vo7tzu5y] {
    opacity: 0.9;
}

/* FigmaMake: company logo is 24px with 6px radius.
   Xablu.Blazor 3.6.0 exposes --x-avatar-radius — cascades into .x-avatar
   without needing ::deep or a width override. */
.connection-card__company-logo[b-a6vo7tzu5y] {
    --x-avatar-radius: 6px;
}

/* FigmaMake: avatar 80px mobile, 100px desktop.
   Xablu.Blazor 3.6.1 exposes --x-avatar-size — one CSS var replaces the
   old width/height override pair and works regardless of Size variant. */
.connection-card__avatar[b-a6vo7tzu5y] {
    --x-avatar-size: 80px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .connection-card__avatar[b-a6vo7tzu5y] {
        --x-avatar-size: 100px;
    }
}
/* /Components/Shared/DealflowAnalyticsChart.razor.rz.scp.css */
.dealflow-analytics[b-3hs533x5zt] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}

.dealflow-analytics__cards[b-3hs533x5zt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--x-spacing-3, 12px);
}

.dealflow-analytics__chart[b-3hs533x5zt] {
    width: 100%;
    height: 160px;
}

.dealflow-analytics__chart-title[b-3hs533x5zt] {
    margin: 0 0 var(--x-spacing-md);
    font-family: var(--x-font-heading);
    font-size: var(--x-text-lg);
    color: var(--x-color-foreground);
}

@media (max-width: 767px) {
    .dealflow-analytics__cards[b-3hs533x5zt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dealflow-analytics__chart[b-3hs533x5zt] {
        height: 120px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Increase SVG text readability on mobile — CSS overrides SVG font-size attribute */
    .dealflow-analytics__chart text[b-3hs533x5zt] {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .dealflow-analytics__cards[b-3hs533x5zt] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/EditInvestorProfileModal.razor.rz.scp.css */
/* EditInvestorProfileModal — modal-specific scoped CSS only.
   Shared chrome (panel, body, header, heading, section, label, hint,
   chip-wrap, footer, btn-cancel/save, button-text) lives in
   wwwroot/css/edit-modal-shared.css. */

/* ── Textarea override ── */
[b-c63r4z3zx0] .inv-textarea textarea {
    min-height: 160px;
    resize: vertical;
}

/* ── Socials: 2-column grid ── */
.inv-socials-grid[b-c63r4z3zx0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.inv-socials-col[b-c63r4z3zx0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Single social row: icon + pill field ── */
.inv-social-row[b-c63r4z3zx0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Social icon ── */
.inv-social-icon[b-c63r4z3zx0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--x-color-muted-foreground);
}

.inv-social-icon--linkedin[b-c63r4z3zx0]  { color: #0A66C2; }
.inv-social-icon--twitter[b-c63r4z3zx0]   { color: #000000; }
.inv-social-icon--instagram[b-c63r4z3zx0] { color: #E1306C; }
.inv-social-icon--facebook[b-c63r4z3zx0]  { color: #1877F2; }
.inv-social-icon--tiktok[b-c63r4z3zx0]    { color: #000000; }

/* ── Social text field fills remaining width ── */
.inv-social-field[b-c63r4z3zx0] {
    flex: 1;
    min-width: 0;
}

/* ── Check size: two-column layout ── */
.inv-check-size-row[b-c63r4z3zx0] {
    display: flex;
    gap: 24px;
}

.inv-check-field[b-c63r4z3zx0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Geography add row ── */
.inv-geo-add-row[b-c63r4z3zx0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.inv-geo-input[b-c63r4z3zx0] {
    flex: 1;
    min-width: 0;
}

.inv-geo-add-btn[b-c63r4z3zx0] {
    flex-shrink: 0;
    min-width: 64px;
}

.inv-geo-cancel-btn[b-c63r4z3zx0] {
    flex-shrink: 0;
    min-width: 80px;
}

/* ── Team size / picker dropdown: pill trigger styling ── */
.inv-section--picker[b-c63r4z3zx0]  .x-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-full, 9999px);
    background-color: var(--x-color-card);
    cursor: pointer;
    gap: 8px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
    transition: border-color var(--x-transition-fast);
}

.inv-section--picker[b-c63r4z3zx0]  .x-dropdown-trigger:hover {
    border-color: var(--x-color-primary);
}

.inv-section--picker[b-c63r4z3zx0]  .x-dropdown-menu {
    width: 100%;
    min-width: 0;
}

/* ── Cancel button: brown reject border + text to match Figma modal pattern ── */
[b-c63r4z3zx0] .inv-btn-cancel .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
}

/* ── Save button: uppercase bold text ── */
[b-c63r4z3zx0] .inv-btn-save .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
    color: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .inv-socials-grid[b-c63r4z3zx0] {
        grid-template-columns: 1fr;
    }

    .inv-check-size-row[b-c63r4z3zx0] {
        flex-direction: column;
        gap: 12px;
    }
}
/* ── Focus indicators (CC-330 / WCAG 2.1 AA) ─────────────────────────────── */
/* Pill inputs: no border-radius override — outline follows the element's own
   border-radius:100px automatically. Container focus-within (mouse + keyboard)
   is in edit-modal-shared.css to survive the panel's overflow:hidden clipping. */
[b-c63r4z3zx0] .x-textfield-input:focus-visible,
[b-c63r4z3zx0] .inv-btn-save:focus-visible,
[b-c63r4z3zx0] .inv-btn-cancel:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
}

/* Custom pill dropdown trigger */
.inv-section--picker[b-c63r4z3zx0]  .x-dropdown-trigger:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
}

/* Non-pill elements: border-radius explicit so outline matches element shape */
[b-c63r4z3zx0] .x-textarea:focus-within,
[b-c63r4z3zx0] .x-textarea textarea:focus-visible,
[b-c63r4z3zx0] .x-select:focus-within,
[b-c63r4z3zx0] .x-checkbox:focus-visible,
[b-c63r4z3zx0] .x-radio:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
    border-radius: var(--x-radius-md, 10px);
}
/* /Components/Shared/EditPartnerProfileModal.razor.rz.scp.css */
/* EditPartnerProfileModal — modal-specific scoped CSS only.
   Shared chrome (panel, body, header, heading, section, label, hint,
   chip-wrap, footer, btn-cancel/save, button-text) lives in
   wwwroot/css/edit-modal-shared.css. */

/* ── Textarea override ── */
[b-c0i63sav7w] .pp-textarea textarea {
    min-height: 160px;
    resize: vertical;
}

/* ── Socials: 2-column grid ── */
.pp-socials-grid[b-c0i63sav7w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pp-socials-col[b-c0i63sav7w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-social-row[b-c0i63sav7w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-social-icon[b-c0i63sav7w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--x-color-muted-foreground);
}

.pp-social-icon--linkedin[b-c0i63sav7w]  { color: #0A66C2; }
.pp-social-icon--twitter[b-c0i63sav7w]   { color: #000000; }
.pp-social-icon--facebook[b-c0i63sav7w]  { color: #1877F2; }

.pp-social-field[b-c0i63sav7w] {
    flex: 1;
    min-width: 0;
}

/* ── Picker dropdown ── */
.pp-section--picker .pp-picker-dropdown[b-c0i63sav7w],
.pp-section--picker[b-c0i63sav7w]  .x-dropdown {
    width: 100%;
    display: block;
}

.pp-section--picker[b-c0i63sav7w]  .x-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-full, 9999px);
    background-color: var(--x-color-card);
    cursor: pointer;
    gap: 8px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
    transition: border-color var(--x-transition-fast);
}

.pp-section--picker[b-c0i63sav7w]  .x-dropdown-trigger:hover {
    border-color: var(--x-color-primary);
}

.pp-section--picker[b-c0i63sav7w]  .x-dropdown-menu {
    width: 100%;
    min-width: 0;
}

/* ── Geography add row ── */
.pp-geo-add-row[b-c0i63sav7w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.pp-geo-input[b-c0i63sav7w] {
    flex: 1;
    min-width: 0;
}

.pp-geo-add-btn[b-c0i63sav7w] {
    flex-shrink: 0;
    min-width: 64px;
}

.pp-geo-cancel-btn[b-c0i63sav7w] {
    flex-shrink: 0;
    min-width: 80px;
}

/* ── Footer button typography (shared chrome owns size/bg) ── */
[b-c0i63sav7w] .pp-btn-cancel .x-button-text,
[b-c0i63sav7w] .pp-btn-save .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
}

[b-c0i63sav7w] .pp-btn-save .x-button-text {
    color: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .pp-socials-grid[b-c0i63sav7w] {
        grid-template-columns: 1fr;
    }
}
/* ── Focus indicators (CC-330 / WCAG 2.1 AA) ─────────────────────────────── */
/* Pill inputs: no border-radius override — outline follows the element's own
   border-radius:100px automatically. Container focus-within (mouse + keyboard)
   is in edit-modal-shared.css to survive the panel's overflow:hidden clipping. */
[b-c0i63sav7w] .x-textfield-input:focus-visible,
[b-c0i63sav7w] .pp-btn-save:focus-visible,
[b-c0i63sav7w] .pp-btn-cancel:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
}

/* Custom pill dropdown trigger */
.pp-section--picker[b-c0i63sav7w]  .x-dropdown-trigger:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
}

/* Non-pill elements: border-radius explicit so outline matches element shape */
[b-c0i63sav7w] .x-textarea:focus-within,
[b-c0i63sav7w] .x-textarea textarea:focus-visible,
[b-c0i63sav7w] .x-select:focus-within,
[b-c0i63sav7w] .x-checkbox:focus-visible,
[b-c0i63sav7w] .x-radio:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
    border-radius: var(--x-radius-md, 10px);
}
/* /Components/Shared/EditProfileModal.razor.rz.scp.css */
/* EditProfileModal (personal) — modal-specific scoped CSS only.
   Shared chrome (panel, body, header, heading, section, label, hint,
   footer, btn-cancel/save, button-text) lives in wwwroot/css/edit-modal-shared.css. */

/* ── All text fields in this modal: pill r=100 per Figma ─────────────── */
/* Detokenised 2026-04-20: `rgba(208,215,224,1)` literal → var(--x-color-border)
   (same hex #D0D7E0) for CC-062 compliance. */
[b-8585fcte9m] .x-textfield-input,
[b-8585fcte9m] .x-textarea-input {
    border-radius: 100px;
    border: 1px solid var(--x-color-border);
    height: 46px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
}

/* Textarea overrides: non-pill, taller */
[b-8585fcte9m] .textarea-headline .x-textarea-input,
[b-8585fcte9m] .textarea-about .x-textarea-input,
[b-8585fcte9m] .textarea-headline textarea,
[b-8585fcte9m] .textarea-about textarea {
    border-radius: var(--x-radius-md);
    height: auto;
}

[b-8585fcte9m] .textarea-headline textarea { min-height: 118px; max-height: 240px; }
[b-8585fcte9m] .textarea-about textarea    { min-height: 230px; max-height: 360px; }

/* Used inside the UploadField Placeholder RenderFragment for the personal
   avatar's first-letter fallback (only non-shared upload-related rule). */
.avatar-initials[b-8585fcte9m] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-3xl, 40px);
    font-weight: 600;
    color: var(--x-color-primary);
}

/* ── Socials ─────────────────────────────────────────────────────────── */
/* Figma: 2-column grid (306+24+306=636px), row gap=12px, col gap=24px   */
.socials-grid[b-8585fcte9m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

/* Each row: icon (24x24) + pill input, gap=12px — no outer border box   */
.social-row[b-8585fcte9m] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* Icon: 24x24 brand color, no background panel */
.social-input-icon[b-8585fcte9m] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: none;
    border-right: none;
}

.social-input-icon--linkedin[b-8585fcte9m]  { color: #0A66C2; }
.social-input-icon--twitter[b-8585fcte9m]   { color: var(--x-color-foreground); }
.social-input-icon--instagram[b-8585fcte9m] { color: #E4405F; }
.social-input-icon--facebook[b-8585fcte9m]  { color: #1877F2; }
.social-input-icon--tiktok[b-8585fcte9m]    { color: var(--x-color-foreground); }

/* Social text field: flex fills remaining width, pill shape */
.social-row .social-field[b-8585fcte9m] {
    flex: 1;
    min-width: 0;
}

/* ── Footer overrides (shared chrome owns size/bg; we force pill radius here
   since some .btn-cancel / .btn-save usages elsewhere don't need pill). ── */
[b-8585fcte9m] .btn-cancel,
[b-8585fcte9m] .btn-save {
    border-radius: 100px;
}

[b-8585fcte9m] .btn-save {
    background-color: var(--x-color-primary);
    border-color: var(--x-color-primary);
    color: var(--x-color-primary-foreground, #ffffff);
}

[b-8585fcte9m] .btn-save:hover:not(:disabled) {
    background-color: var(--x-color-primary-hover);
    border-color: var(--x-color-primary-hover);
}

[b-8585fcte9m] .btn-cancel .x-button-text,
[b-8585fcte9m] .btn-save .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .socials-grid[b-8585fcte9m] {
        grid-template-columns: 1fr;
    }

    .heading-serif[b-8585fcte9m] {
        font-size: var(--x-text-2xl, 28px);
    }

    .completion-text[b-8585fcte9m] {
        white-space: normal;
        margin-left: 0;
        font-size: var(--x-text-sm);
    }

    .panel-body[b-8585fcte9m] {
        gap: 24px;
        padding-bottom: max(var(--x-spacing-lg), env(safe-area-inset-bottom));
    }

    .panel-footer[b-8585fcte9m] {
        flex-direction: column-reverse;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    [b-8585fcte9m] .btn-cancel,
    [b-8585fcte9m] .btn-save {
        width: 100%;
    }
}
/* ── Focus indicators (CC-330 / WCAG 2.1 AA) ─────────────────────────────── */
/* Pill inputs: no border-radius override — outline follows the element's own
   border-radius:100px automatically. Container focus-within (mouse + keyboard)
   is in edit-modal-shared.css to survive the panel's overflow:hidden clipping. */
[b-8585fcte9m] .x-textfield-input:focus-visible,
[b-8585fcte9m] .btn-save:focus-visible,
[b-8585fcte9m] .btn-cancel:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
}

/* Non-pill elements: border-radius explicit so outline matches element shape */
[b-8585fcte9m] .x-textarea:focus-within,
[b-8585fcte9m] .x-textarea textarea:focus-visible,
[b-8585fcte9m] .x-select:focus-within,
[b-8585fcte9m] .x-checkbox:focus-visible,
[b-8585fcte9m] .x-radio:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
    border-radius: var(--x-radius-md, 10px);
}
/* /Components/Shared/EditProjectProfileModal.razor.rz.scp.css */
/* EditProjectProfileModal (Founder) — modal-specific scoped CSS only.
   Shared chrome (panel, body, header, heading, section, label, hint,
   chip-wrap, footer, btn-cancel/save, button-text) lives in
   wwwroot/css/edit-modal-shared.css. */

.fp-hint--top[b-8gnynzrdvq] {
    margin-bottom: -4px;
}

/* ── Textarea override ── */
[b-8gnynzrdvq] .fp-textarea textarea {
    min-height: 160px;
    resize: vertical;
}

/* ── "Add your fundraising rounds:" heading-style label ── */
.fp-label--heading[b-8gnynzrdvq] {
    font-weight: 500;
}

/* ── Fundraising rounds column headers ── */
.fp-rounds-head[b-8gnynzrdvq] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 40px;
    gap: 12px;
    padding-bottom: 4px;
}

.fp-rounds-head__spacer[b-8gnynzrdvq] {
    width: 40px;
}

/* ── Fundraising rounds list ── */
.fp-rounds-list[b-8gnynzrdvq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-round-row[b-8gnynzrdvq] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 40px;
    gap: 12px;
    align-items: center;
}

.fp-round-input[b-8gnynzrdvq],
.fp-round-dropdown[b-8gnynzrdvq],
.fp-contract-input[b-8gnynzrdvq] {
    width: 100%;
    min-width: 0;
}

.fp-round-row[b-8gnynzrdvq]  .x-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--x-color-border);
    border-radius: var(--x-radius-full, 9999px);
    background-color: var(--x-color-card);
    cursor: pointer;
    gap: 8px;
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
    transition: border-color var(--x-transition-fast);
}

.fp-round-row[b-8gnynzrdvq]  .x-dropdown-trigger:hover {
    border-color: var(--x-color-primary);
}

/* ── Smart contracts list ── */
.fp-contracts-list[b-8gnynzrdvq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-contract-row[b-8gnynzrdvq] {
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: 12px;
    align-items: center;
}

/* ── ADD * button (outlined pill with + prefix) ── */
.fp-add-btn[b-8gnynzrdvq] {
    align-self: flex-start;
    gap: 8px;
    padding: 8px 20px;
    min-height: 38px;
}

[b-8gnynzrdvq] .fp-add-btn .x-button-text,
.fp-add-btn__text[b-8gnynzrdvq] {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
}

.fp-add-btn__plus[b-8gnynzrdvq] {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}

.fp-round-row[b-8gnynzrdvq]  .x-button-icon {
    color: var(--x-color-muted-foreground);
}

/* ── Product tab: narrow textarea for tech stack / security variant ── */
[b-8gnynzrdvq] .fp-textarea--small textarea {
    min-height: 96px;
}

/* ── Footer button typography (shared chrome owns size/bg) ── */
[b-8gnynzrdvq] .fp-btn-cancel .x-button-text,
[b-8gnynzrdvq] .fp-btn-save .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
}

[b-8gnynzrdvq] .fp-btn-save .x-button-text {
    color: #ffffff;
}
/* ── Focus indicators (CC-330 / WCAG 2.1 AA) ─────────────────────────────── */
/* Pill inputs: no border-radius override — outline follows the element's own
   border-radius:100px automatically. Container focus-within (mouse + keyboard)
   is in edit-modal-shared.css to survive the panel's overflow:hidden clipping. */
[b-8gnynzrdvq] .x-textfield-input:focus-visible,
[b-8gnynzrdvq] .fp-btn-save:focus-visible,
[b-8gnynzrdvq] .fp-btn-cancel:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
}

/* Custom pill dropdown trigger in rounds rows */
.fp-round-row[b-8gnynzrdvq]  .x-dropdown-trigger:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
}

/* Non-pill elements: border-radius explicit so outline matches element shape */
[b-8gnynzrdvq] .x-textarea:focus-within,
[b-8gnynzrdvq] .x-textarea textarea:focus-visible,
[b-8gnynzrdvq] .x-select:focus-within,
[b-8gnynzrdvq] .x-checkbox:focus-visible,
[b-8gnynzrdvq] .x-radio:focus-visible {
    outline: 2px solid var(--x-color-primary, #AE9440);
    outline-offset: 2px;
    border-radius: var(--x-radius-md, 10px);
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* Shared EmptyState layout — centred column with icon, title, message, CTA.
   Reserved spacing so small/large messages both read well without cramming. */
.empty-state[b-dpayjq2qbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--x-spacing-2xl) var(--x-spacing-lg);
    gap: var(--x-spacing-sm);
    color: var(--x-color-muted-foreground);
}

.empty-state--muted[b-dpayjq2qbx] {
    background: var(--x-color-card);
    border: 1px dashed var(--x-color-border-subtle);
    border-radius: var(--x-radius);
}

.empty-state__icon[b-dpayjq2qbx] {
    color: var(--x-color-muted-foreground);
    opacity: 0.6;
    margin-bottom: var(--x-spacing-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.empty-state__title[b-dpayjq2qbx] {
    font-size: var(--x-text-base);
    font-weight: 600;
    color: var(--x-color-foreground);
    margin: 0;
}

.empty-state__message[b-dpayjq2qbx] {
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    max-width: 320px;
    margin: 0;
}

.empty-state__cta[b-dpayjq2qbx] {
    margin-top: var(--x-spacing-sm);
}
/* /Components/Shared/ErrorSection.razor.rz.scp.css */
.error-section[b-0ug127ryzw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--x-spacing-md);
    padding: var(--x-spacing-xl);
    border-radius: var(--x-radius-md);
    background: var(--x-color-danger-background);
    color: var(--x-color-danger-foreground);
    text-align: center;
}
/* /Components/Shared/JourneyComplete.razor.rz.scp.css */
.journey-complete__header-title[b-z1dgvrtaz6] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
}

.journey-complete__header-gradient[b-z1dgvrtaz6] {
    background: linear-gradient(to right, var(--x-color-primary), var(--x-color-primary-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.journey-complete__content[b-z1dgvrtaz6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--x-spacing-xl);
    padding: var(--x-spacing-md) 0;
}

.journey-complete__trophy[b-z1dgvrtaz6] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--x-color-primary), var(--x-color-primary-400));
    display: flex;
    align-items: center;
    justify-content: center;
}

.journey-complete__trophy-icon[b-z1dgvrtaz6] {
    width: 48px;
    height: 48px;
    color: var(--x-color-neutral-900);
}

.journey-complete__subtitle[b-z1dgvrtaz6] {
    text-align: center;
    max-width: 480px;
}

.journey-complete__stats[b-z1dgvrtaz6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--x-spacing-md);
    width: 100%;
}

.journey-complete__activity-card[b-z1dgvrtaz6] {
    width: 100%;
}

.journey-complete__activity-list[b-z1dgvrtaz6] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
}

.journey-complete__activity-row[b-z1dgvrtaz6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--x-spacing-sm) var(--x-spacing-3, 12px);
    border-radius: var(--x-radius-sm);
    background: var(--x-color-bg-hover);
}

.journey-complete__achievement-card[b-z1dgvrtaz6] {
    width: 100%;
}

.journey-complete__achievement-content[b-z1dgvrtaz6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-3, 12px);
    padding: var(--x-spacing-sm);
}

.journey-complete__achievement-icon[b-z1dgvrtaz6] {
    width: 24px;
    height: 24px;
    color: var(--x-color-primary);
}

.journey-complete__achievement-title[b-z1dgvrtaz6] {
    font-weight: 600;
    color: var(--x-color-primary);
}

.journey-complete__actions[b-z1dgvrtaz6] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    width: 100%;
    flex-wrap: wrap;
}

.journey-complete__dashboard-btn[b-z1dgvrtaz6] {
    flex: 1;
    min-width: 200px;
}

.journey-complete__footnote[b-z1dgvrtaz6] {
    text-align: center;
    opacity: 0.6;
}

/* ── Responsive: stack stats grid and action buttons on mobile ── */
@media (max-width: 640px) {
    .journey-complete__stats[b-z1dgvrtaz6] {
        grid-template-columns: 1fr;
    }

    .journey-complete__trophy[b-z1dgvrtaz6] {
        width: 72px;
        height: 72px;
    }

    .journey-complete__trophy-icon[b-z1dgvrtaz6] {
        width: 36px;
        height: 36px;
    }

    .journey-complete__dashboard-btn[b-z1dgvrtaz6] {
        min-width: 0;
        width: 100%;
    }
}
/* /Components/Shared/JourneyProgress.razor.rz.scp.css */
/* JourneyProgress — scoped CSS (FigmaMake alignment) */

.journey-container[b-sv032z6vha] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}

.journey-progress-section[b-sv032z6vha] {
    margin-top: var(--x-spacing-sm);
}

.journey-step-text[b-sv032z6vha] {
    color: var(--x-color-muted-foreground);
    font-size: var(--x-text-sm);
    margin: var(--x-spacing-xs) 0 0;
}
/* /Components/Shared/LocationPicker.razor.rz.scp.css */
.location-picker[b-gvvywqw330] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Advisory hint shown when the user's typed value is not in the suggestion list.
   Deliberately non-blocking: the value still saves. The hint tells the user their
   location will not participate in Location-filtered discovery until it matches a
   canonical entry. Colour is muted-warn so it reads as "heads-up" rather than "error". */
.location-hint[b-gvvywqw330] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    line-height: 1.4;
    color: var(--x-color-warning-foreground, #a05a00);
    margin: 0;
    padding: 0 2px;
}

.location-hint-icon[b-gvvywqw330] {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    vertical-align: -2px;
}
/* /Components/Shared/MatchCard.razor.rz.scp.css */
/* ── Container query support ── */
.match-card[b-4eg77jgsny] { container-type: inline-size; }

@container (max-width: 400px) {
    .match-card__header[b-4eg77jgsny] { flex-direction: column; }
    .match-card__actions[b-4eg77jgsny] { flex-direction: column; }
}

/* ── Responsive: mobile (< 768px) per FigmaMake md: breakpoints ── */
@media (max-width: 767px) {
    /* Mobile avatar: 40px, rounded-sm, small text.
       Xablu.Blazor 3.6.1 --x-avatar-size + --x-avatar-radius + --x-avatar-font-size
       replace the old width/height/border-radius/font-size overrides —
       cascade cleanly into .x-avatar without specificity battles. */
    .match-card__avatar[b-4eg77jgsny] {
        --x-avatar-size: 40px;
        --x-avatar-radius: var(--x-radius-sm);
        --x-avatar-font-size: var(--x-text-sm);
        min-width: 40px;
    }

    .match-card__header[b-4eg77jgsny] {
        gap: var(--x-spacing-sm);
    }

    .match-card__header-info[b-4eg77jgsny] {
        gap: var(--x-spacing-3);
    }

    .match-card__name-row[b-4eg77jgsny] {
        gap: var(--x-spacing-3);
    }

    .match-card__name[b-4eg77jgsny] {
        font-size: var(--x-text-sm);
    }

    /* targets SVG icon inside child component name row */
    [b-4eg77jgsny] .match-card__name-row svg {
        width: 18px;
        height: 18px;
    }

    .match-card__badges[b-4eg77jgsny] {
        gap: var(--x-spacing-3);
    }

    .match-card__type-chip[b-4eg77jgsny],
    .match-card__contact-pill[b-4eg77jgsny] {
        height: 20px;
        padding: 0 3px;
    }

    .match-card__type-chip span[b-4eg77jgsny],
    .match-card__contact-name[b-4eg77jgsny] {
        font-size: var(--x-text-xxs);
    }

    .match-card__type-icon[b-4eg77jgsny] {
        width: 11px;
        height: 11px;
    }

    .match-card__contact-photo[b-4eg77jgsny],
    .match-card__contact-avatar[b-4eg77jgsny] {
        width: 14px;
        height: 14px;
    }

    .match-card__description[b-4eg77jgsny] {
        font-size: var(--x-text-xs-lg);
    }

    .match-card__tags[b-4eg77jgsny] {
        gap: var(--x-spacing-sm);
    }

    .match-card__tag[b-4eg77jgsny] {
        height: 20px;
        padding: 0 5px;
        font-size: var(--x-text-xs);
    }

    .match-card__actions[b-4eg77jgsny] {
        gap: var(--x-spacing-sm);
        padding-top: var(--x-spacing-md);
    }

    .match-card__action-btn[b-4eg77jgsny] {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .match-card__hive-btn[b-4eg77jgsny] {
        height: 44px;
    }

    .match-card__hive-label[b-4eg77jgsny] {
        display: none;
    }

    .match-card__hive-icon[b-4eg77jgsny] {
        width: 16px;
        height: 20px;
    }
}
/* ── Card shell — CSS custom properties replace for XCard body (Phase 194) ── */
.match-card[b-4eg77jgsny] {
    display: flex;
    flex-direction: column;
    height: 100%;
    --x-card-body-gap: var(--x-spacing-md);
    --x-card-body-height: 100%;
}

.match-card__content[b-4eg77jgsny] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    flex: 1;
}

/* ── Header: avatar left, info right (items-start per Figma) ── */
.match-card__header[b-4eg77jgsny] {
    display: flex;
    gap: var(--x-spacing-3sm);
    align-items: flex-start;
}

/* Avatar sizing via Shape="RoundedSquare" + CSS custom property for 10px radius */
.match-card__header[b-4eg77jgsny] {
    --x-avatar-radius: var(--x-radius-md);
}

.match-card__avatar[b-4eg77jgsny] {
    flex-shrink: 0;
}

.match-card__header-info[b-4eg77jgsny] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    flex: 1;
    min-width: 0;
}

.match-card__name-row[b-4eg77jgsny] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-sm);
}

.match-card__name[b-4eg77jgsny] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    font-weight: 600;
    color: var(--x-color-foreground);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Badges row (BeeScore + Type + Contact — all inline, flex-wrap) ── */
.match-card__badges[b-4eg77jgsny] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3sm);
    align-items: center;
}


.match-card__type-chip[b-4eg77jgsny] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-chip-light);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-foreground);
    padding: 0 4px;
    line-height: 1.4;
}

.match-card__type-icon[b-4eg77jgsny] {
    width: 13px;
    height: 13px;
}

/* ── Contact person pill (inline with badges) ── */
.match-card__contact-pill[b-4eg77jgsny] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-chip-light);
    padding: 0 4px;
    cursor: pointer;
}

.match-card__contact-photo[b-4eg77jgsny] {
    width: 18px;
    height: 18px;
    border-radius: var(--x-radius-full);
    object-fit: cover;
}

.match-card__contact-avatar[b-4eg77jgsny] {
    width: 18px;
    height: 18px;
    border-radius: var(--x-radius-full);
    overflow: hidden;
    background-color: var(--x-color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: var(--x-color-foreground);
}

.match-card__contact-name[b-4eg77jgsny] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-foreground);
    line-height: 1.4;
}

/* ── Compatibility bar (FigmaMake: gradient gold progress) ── */
.match-card__compat[b-4eg77jgsny] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
}

.match-card__compat-label[b-4eg77jgsny] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-primary);
}

.match-card__compat-track[b-4eg77jgsny] {
    height: 8px;
    background-color: var(--x-color-neutral-200);
    border-radius: var(--x-radius-full);
    overflow: hidden;
}

.match-card__compat-fill[b-4eg77jgsny] {
    height: 100%;
    background: linear-gradient(to right, var(--x-color-primary), var(--x-color-gold-accent));
    border-radius: var(--x-radius-full);
    transition: width 0.5s ease;
}

/* ── Description ── */
.match-card__description[b-4eg77jgsny] {
    color: var(--x-color-muted-foreground);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tags ── */
.match-card__tags[b-4eg77jgsny] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3sm);
}

.match-card__tag[b-4eg77jgsny] {
    display: flex;
    align-items: center;
    height: 24px;
    border-radius: var(--x-radius-full);
    background-color: var(--x-color-chip-attribute);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 600;
    color: var(--x-color-foreground);
    padding: 0 4px;
    line-height: 1.4;
}

/* ── Actions row ── */
.match-card__actions[b-4eg77jgsny] {
    display: flex;
    gap: var(--x-spacing-3sm);
    align-items: center;
    margin-top: auto;
    padding-top: var(--x-spacing-lg);
}

.match-card__action-btn[b-4eg77jgsny] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: var(--x-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
    background: none;
}

.match-card__action-btn:hover[b-4eg77jgsny] {
    opacity: 0.8;
}

.match-card__decline-btn[b-4eg77jgsny] {
    border: 1px solid var(--x-color-reject);
}

.match-card__bookmark-btn[b-4eg77jgsny] {
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
}

.match-card__hive-btn[b-4eg77jgsny] {
    flex: 1;
    height: 42px;
    border-radius: var(--x-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm);
    background-color: var(--x-color-primary);
    border: none;
    cursor: pointer;
    transition: opacity var(--x-duration-fast) var(--x-ease-out);
}

.match-card__hive-btn:hover[b-4eg77jgsny] {
    opacity: 0.9;
}

.match-card__hive-icon[b-4eg77jgsny] {
    flex-shrink: 0;
}

.match-card__hive-label[b-4eg77jgsny] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 700;
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    color: var(--x-color-text-inverse);
}


/* /Components/Shared/MyRatingsModal.razor.rz.scp.css */
/* MyRatingsModal — center XModal.
   Figma 2106-62980 shows a centered dialog with the "My Ratings" heading
   and avatar+action cards for reviews/vouches/pitch feedback. */

/* ── Title: 40px serif, "My" foreground + "Ratings" italic primary ── */
.modal-heading-serif[b-vn3taz1lfi] {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-card-foreground);
    font-style: normal;
}

.modal-heading-accent[b-vn3taz1lfi] {
    color: var(--x-color-primary);
    font-style: italic;
    font-weight: 400;
}

/* ── Body wrapper ── */
.modal-body[b-vn3taz1lfi] {
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

/* Empty state CSS removed — now renders via shared <EmptyState> component. */

/* ── Ratings list: 8px gap per FigmaMake line 329 ── */
.ratings-list[b-vn3taz1lfi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Rating card ── */
.rating-card[b-vn3taz1lfi] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
    padding: var(--x-spacing-3, 12px);
    border-radius: var(--x-radius-lg);
    background-color: var(--x-color-primary-tint-6);
}

/* ── Header row: avatar | info | time ── */
.rating-header[b-vn3taz1lfi] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
    width: 100%;
}

/* ── Info column ── */
.rating-info[b-vn3taz1lfi] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
    flex: 1;
    min-width: 0;
}

/* ── Action text ── */
.rating-action-text[b-vn3taz1lfi] {
    font-size: var(--x-text-sm);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-card-foreground);
    margin: 0;
}

.rating-action-text--vouch[b-vn3taz1lfi] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    flex-wrap: wrap;
}

/* ── Stars ── */
.rating-stars[b-vn3taz1lfi] {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* ── Vouch heart ── */
.vouch-heart[b-vn3taz1lfi] {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── Emoji chip (pitch type) ── */
.emoji-label-chip[b-vn3taz1lfi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-border);
    font-size: var(--x-text-xs);
    font-weight: 600;
    color: var(--x-color-card-foreground);
    letter-spacing: 0.03em;
    width: fit-content;
}

/* ── Relative time ── */
.rating-time[b-vn3taz1lfi] {
    font-size: var(--x-text-xs);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-sm);
    color: var(--x-color-muted-foreground);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* ── Comment (review type, below header) ── */
.rating-comment[b-vn3taz1lfi] {
    font-size: var(--x-text-sm);
    line-height: 1.5;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-muted-foreground);
    margin: 0;
    padding-top: var(--x-spacing-xs);
    border-top: 1px solid var(--x-color-border);
}

@media (max-width: 480px) {
    .modal-heading-serif[b-vn3taz1lfi] {
        font-size: 32px;
    }
}
/* /Components/Shared/NetworkInsightsCard.razor.rz.scp.css */
/* NetworkInsightsCard — Dashboard Extensive right-rail card (Figma 2556:48818
   Frame 1171276843, 464x395). Same visual grammar as other dashboard cards;
   feed items use the same grid shape as ActivityTimelinePanel. */

.network-insights-card[b-94k3vt595s] {
    background: var(--x-color-card);
    border-radius: var(--x-radius-md);
    box-shadow: var(--x-elevation-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.network-insights-card__header[b-94k3vt595s] {
    padding: var(--x-spacing-lg) var(--x-spacing-lg) var(--x-spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Count badge next to heading when items exist — pill with gold tint */
.network-insights-card__count-badge[b-94k3vt595s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 var(--x-spacing-2, 8px);
    border-radius: var(--x-radius-full, 9999px);
    background: var(--x-color-chip-light, #EFF2F5);
    color: var(--x-color-foreground);
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
}

.network-insights-card__body[b-94k3vt595s] {
    padding: var(--x-spacing-md) var(--x-spacing-lg) var(--x-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    overflow-y: auto;
    flex: 1;
}

/* ── Skeleton loading ─────────────────────────────────────────────────── */
.network-insights-card__skeleton-row[b-94k3vt595s] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3, 12px);
}

.network-insights-card__skeleton-text[b-94k3vt595s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-1, 4px);
}

/* ── Feed item ────────────────────────────────────────────────────────── */
.network-insights-item[b-94k3vt595s] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: var(--x-spacing-3, 12px);
    align-items: start;
}

.network-insights-item__body[b-94k3vt595s] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-1, 4px);
    min-width: 0;
}

.network-insights-item__headline[b-94k3vt595s] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    line-height: 1.4;
    color: var(--x-color-foreground);
}

.network-insights-item__actor[b-94k3vt595s] {
    font-weight: 600;
    color: var(--x-color-foreground);
}

.network-insights-item__verb[b-94k3vt595s] {
    margin-left: var(--x-spacing-1, 4px);
    color: var(--x-color-foreground);
}

.network-insights-item__detail[b-94k3vt595s] {
    margin: 0;
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.network-insights-item__timestamp[b-94k3vt595s] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    color: var(--x-color-muted-foreground);
    white-space: nowrap;
    padding-top: var(--x-spacing-1, 4px);
}
/* /Components/Shared/OnboardingHeader.razor.rz.scp.css */
/* Scoped CSS for OnboardingHeader.
   All visual styles are in 3beez-overrides.css (global, shared across 9 onboarding pages).
   This file exists to satisfy the .razor.css companion rule (Section 10.6). */
/* /Components/Shared/OnboardingValidationHint.razor.rz.scp.css */
.onboarding-validation-hint[b-6n78jkvtlj] {
    margin: 1rem 0 0.25rem;
    color: var(--x-color-muted-foreground);
    font-size: 0.875rem;
    line-height: 1.4;
    font-style: italic;
    text-align: right;
}
/* /Components/Shared/PendingRequestCard.razor.rz.scp.css */
/* ── Container query support ── */
.pending-request-card[b-wfkug1bwhv] { container-type: inline-size; }

/* Figma: flat white card, 16px radius, 16px padding, no shadow or border */
[b-wfkug1bwhv] .pending-request-card {
    border: none;
    box-shadow: none;
}

@container (max-width: 400px) {
    .pending-request-card__header[b-wfkug1bwhv] { flex-direction: column; align-items: center; text-align: center; }
    .pending-request-card__actions[b-wfkug1bwhv] { flex-direction: column; }
}

.pending-request-card__header[b-wfkug1bwhv] {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
}

.pending-request-card__info[b-wfkug1bwhv] {
    flex: 1;
    min-width: 0;
}

.pending-request-card__name[b-wfkug1bwhv] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    font-weight: 600;
    color: var(--x-color-foreground);
    letter-spacing: var(--x-letter-spacing-body, -0.32px);
    line-height: 1.4;
    margin-bottom: var(--x-spacing-xs);
}

.pending-request-card__title[b-wfkug1bwhv] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    margin-bottom: var(--x-spacing-xs);
}

.pending-request-card__message[b-wfkug1bwhv] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
    margin-top: var(--x-spacing-xs);
    line-height: 1.4;
}

.pending-request-card__time[b-wfkug1bwhv] {
    font-family: var(--x-font-family-sf-pro, var(--x-font-body));
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.pending-request-card__actions[b-wfkug1bwhv] {
    display: flex;
    gap: var(--x-spacing-md);
    margin-top: var(--x-spacing-md);
}

.pending-request-card__btn[b-wfkug1bwhv] {
    min-width: 150px;
    height: 46px;
    font-weight: 700;
    font-size: var(--x-text-sm, 14px);
    letter-spacing: var(--x-letter-spacing-button);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pending-request-card__btn-icon--decline[b-wfkug1bwhv] {
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

.pending-request-card__btn-icon--accept[b-wfkug1bwhv] {
    width: 14px;
    height: 10px;
    margin-right: 6px;
}

/* FigmaMake: decline button uses var(--x-color-reject) (rust/brown) border + text */
.pending-request-card__btn--decline[b-wfkug1bwhv] {
    border-color: var(--x-color-reject);
    color: var(--x-color-reject);
}

.pending-request-card__btn--decline:hover[b-wfkug1bwhv] {
    background-color: rgba(149, 69, 53, 0.08);
}
/* /Components/Shared/PitchRoomCard.razor.rz.scp.css */
.pitchroom-card__header[b-j32031jfzv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--x-spacing-3, 12px);
    margin-bottom: var(--x-spacing-3, 12px);
}

.pitchroom-card__title[b-j32031jfzv] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-lg, 20px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--x-color-foreground);
    margin: 0;
}

.pitchroom-card__countdown[b-j32031jfzv] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-3);
    margin-bottom: var(--x-spacing-md);
}

.pitchroom-card__countdown-text[b-j32031jfzv] {
    font-size: var(--x-text-sm, 14px);
    color: var(--x-color-muted-foreground);
}

.pitchroom-card__participants[b-j32031jfzv] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-sm);
    margin-bottom: var(--x-spacing-md);
}

.pitchroom-card__participants-label[b-j32031jfzv] {
    font-size: var(--x-text-sm, 14px);
    font-weight: 600;
    color: var(--x-color-foreground);
}

.pitchroom-card__avatar-group[b-j32031jfzv] {
    display: flex;
    align-items: center;
    padding-left: var(--x-spacing-sm);
}

.pitchroom-card__avatar-overflow[b-j32031jfzv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--x-color-secondary);
    color: var(--x-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--x-text-xs, 0.75rem);
    font-weight: 600;
    margin-left: -8px;
    border: 2px solid var(--x-color-card);
}

/* targets XAvatar component internals (overlapping avatars) */
.pitchroom-card__avatar-overlap[b-j32031jfzv] {
    margin-left: -8px;
    border: 2px solid var(--x-color-card);
}

.pitchroom-card__actions[b-j32031jfzv] {
    display: flex;
    justify-content: flex-end;
}

/* ── Responsive: tighten spacing on mobile ── */
@media (max-width: 767px) {
    .pitchroom-card__title[b-j32031jfzv] {
        font-size: var(--x-text-base, 16px);
    }

    .pitchroom-card__avatar-overflow[b-j32031jfzv] {
        width: 28px;
        height: 28px;
        font-size: var(--x-text-xxs, 10px);
    }
}
/* /Components/Shared/ProfileCompletionPopup.razor.rz.scp.css */
.profile-completion__title-icon[b-am1e7qbmmn] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
/* /Components/Shared/ProfileLink.razor.rz.scp.css */
/* ProfileLink — scoped CSS (FigmaMake alignment) */

.profile-link[b-9d8ftwvmgl] {
    color: var(--x-color-primary);
    text-decoration: none;
    font-weight: 500;
}

.profile-link:hover[b-9d8ftwvmgl] {
    text-decoration: underline;
}
/* /Components/Shared/RateBeezModal.razor.rz.scp.css */
/* RateBeezModal — center XModal (Figma 1862-58066). */

.modal-heading-serif[b-saae9wj3e9] {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-card-foreground);
    font-style: normal;
}

.modal-heading-accent[b-saae9wj3e9] {
    color: var(--x-color-primary);
    font-style: italic;
    font-weight: 400;
}

.modal-body[b-saae9wj3e9] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    padding: var(--x-spacing-xs) 0 0;
}

.rb-subtitle[b-saae9wj3e9] {
    font-size: var(--x-text-base);
    line-height: 1.5;
    color: var(--x-color-card-foreground);
    margin: 0;
}

.rb-target[b-saae9wj3e9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rb-target__name[b-saae9wj3e9] {
    font-size: var(--x-text-base);
    font-weight: 500;
    color: var(--x-color-card-foreground);
}

.rb-field[b-saae9wj3e9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rb-label[b-saae9wj3e9] {
    font-size: var(--x-text-base);
    font-weight: 400;
    color: var(--x-color-card-foreground);
}

.rb-stars[b-saae9wj3e9] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rb-star[b-saae9wj3e9] {
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--x-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.rb-star:focus-visible[b-saae9wj3e9] {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 2px;
}

/* ::deep required — <textarea> is emitted by XTextarea (library-owned),
   not carried by the parent's scope attribute. */
[b-saae9wj3e9] .rb-textarea textarea {
    min-height: 112px;
    resize: vertical;
}

.rb-error[b-saae9wj3e9] {
    margin-top: var(--x-spacing-xs);
}

.rb-actions[b-saae9wj3e9] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: var(--x-spacing-sm);
}

/* Cancel button uses the brown reject border from FigmaMake */
[b-saae9wj3e9] .rb-btn-cancel {
    min-width: 130px;
    height: 46px;
    border-color: var(--x-color-reject);
    color: var(--x-color-reject);
}

/* ::deep required — .x-button-text is library-internal (emitted by XButton). */
[b-saae9wj3e9] .rb-btn-cancel .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
}

[b-saae9wj3e9] .rb-btn-submit {
    min-width: 130px;
    height: 46px;
    background-color: var(--x-color-primary);
    border-color: var(--x-color-primary);
    color: #ffffff;
}

/* ::deep required — .x-button-text is library-internal (emitted by XButton). */
[b-saae9wj3e9] .rb-btn-submit .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    font-size: var(--x-text-sm);
}

@media (max-width: 480px) {
    .modal-heading-serif[b-saae9wj3e9] {
        font-size: 32px;
    }

    .rb-actions[b-saae9wj3e9] {
        flex-direction: column-reverse;
    }

    .rb-btn-cancel[b-saae9wj3e9],
    .rb-btn-submit[b-saae9wj3e9] {
        width: 100%;
    }
}
/* /Components/Shared/RateInteractionModal.razor.rz.scp.css */
/* targets content rendered inside XModal child RenderFragment */
.modal-heading-serif[b-vl3cwurl8i] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    color: var(--x-color-card-foreground);
}

.modal-heading-accent[b-vl3cwurl8i] {
    color: var(--x-color-primary);
}

.modal-body[b-vl3cwurl8i] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-xs) 0;
}

.modal-text[b-vl3cwurl8i] {
    font-size: var(--x-text-base);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-card-foreground);
    margin: 0;
}

.modal-text-bold[b-vl3cwurl8i] {
    font-size: var(--x-text-base);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-card-foreground);
    margin: 0;
}

.mood-selector[b-vl3cwurl8i] {
    display: flex;
    gap: var(--x-spacing-2_5);
    flex-wrap: wrap;
    align-items: center;
}

.tag-section[b-vl3cwurl8i] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-2_5);
}

.tag-chips[b-vl3cwurl8i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
}

.modal-section[b-vl3cwurl8i] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

.error-text[b-vl3cwurl8i] {
    color: var(--x-color-destructive);
    font-size: var(--x-text-sm);
    margin: 0;
}

.modal-actions[b-vl3cwurl8i] {
    display: flex;
    justify-content: flex-end;
    gap: var(--x-spacing-lg);
}

.btn-fixed[b-vl3cwurl8i] {
    width: 150px;
    min-width: 150px;
    height: 46px;
}

[b-vl3cwurl8i] .modal-cancel-btn {
    border-color: var(--x-color-reject);
    color: var(--x-color-reject);
}

[b-vl3cwurl8i] .modal-cancel-btn:hover {
    background-color: rgba(149, 69, 53, 0.08);
}

/* FigmaMake: mood chips 32px, emoji-border, 10px gap; tag chips 32px, 12px gap */
.mood-selector[b-vl3cwurl8i],
.tag-chips[b-vl3cwurl8i] {
    --x-chip-height: 32px;
    --x-chip-padding: 2px 8px;
    --x-chip-radius: var(--x-radius-full);
    --x-chip-border-color: var(--x-color-emoji-border);
}

/* ── Responsive: stack modal buttons on mobile ── */
@media (max-width: 480px) {
    .modal-actions[b-vl3cwurl8i] {
        flex-direction: column;
    }

    .btn-fixed[b-vl3cwurl8i] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/RequestIntroModal.razor.rz.scp.css */
/* targets content rendered inside XModal child RenderFragment */
.modal-heading-serif[b-jqvifq4ql9] {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-card-foreground);
}

.modal-heading-accent[b-jqvifq4ql9] {
    color: var(--x-color-primary);
    font-style: italic;
}

@media (max-width: 480px) {
    .modal-heading-serif[b-jqvifq4ql9] {
        font-size: 32px;
    }
}

.modal-body[b-jqvifq4ql9] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-xs) 0;
}

.modal-section-md[b-jqvifq4ql9] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}

.modal-section[b-jqvifq4ql9] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

.modal-text[b-jqvifq4ql9] {
    font-size: var(--x-text-base);
    line-height: 1.4;
    letter-spacing: var(--x-letter-spacing-body);
    color: var(--x-color-card-foreground);
    margin: 0;
}

.avatar-row[b-jqvifq4ql9] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-md);
}

.connection-icon[b-jqvifq4ql9] {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--x-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.connection-icon svg[b-jqvifq4ql9] {
    width: 20px;
    height: 21px;
}

.error-text[b-jqvifq4ql9] {
    color: var(--x-color-destructive);
    font-size: var(--x-text-sm);
    margin: 0;
}

/* Coming-soon / no-mutuals banner. Info callout so the user understands the 3-party flow
   is not-yet-usable from this card rather than broken. */
.request-intro-coming-soon[b-jqvifq4ql9] {
    background-color: var(--x-color-muted, rgba(0, 0, 0, 0.04));
    border-left: 3px solid var(--x-color-primary);
    border-radius: 6px;
    padding: var(--x-spacing-3, 12px) var(--x-spacing-md);
}

/* Mutual-connection picker sizing. The XDropdown ships its own chrome (trigger pill, popover
   styling); this scoped class anchors the dropdown to 100% width inside the modal body so it
   aligns with the message textarea below. */
.request-intro-broker-picker[b-jqvifq4ql9] {
    width: 100%;
}

/* Picker trigger: shows the selected broker's avatar + name together in the pill. */
.request-intro-broker-trigger[b-jqvifq4ql9] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-xs, 8px);
}

.request-intro-broker-trigger-name[b-jqvifq4ql9] {
    font-family: var(--x-font-body);
    color: var(--x-color-foreground);
}

/* Dropdown row: avatar + stacked (name, role-badge). Role-badge is a muted caption so the
   name stays the primary reading line. */
.request-intro-broker-row[b-jqvifq4ql9] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-sm, 12px);
    width: 100%;
}

.request-intro-broker-row-text[b-jqvifq4ql9] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.request-intro-broker-row-name[b-jqvifq4ql9] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    color: var(--x-color-foreground);
}

.request-intro-broker-row-role[b-jqvifq4ql9] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-xs, 12px);
    color: var(--x-color-muted-foreground);
    letter-spacing: 0.02em;
}

.modal-actions[b-jqvifq4ql9] {
    display: flex;
    justify-content: flex-end;
    gap: var(--x-spacing-lg);
    padding-top: var(--x-spacing-sm);
    border-top: 1px solid var(--x-color-border);
}

.btn-fixed[b-jqvifq4ql9] {
    width: 150px;
    min-width: 150px;
    height: 46px;
}

[b-jqvifq4ql9] .modal-cancel-btn {
    border-color: var(--x-color-reject);
    color: var(--x-color-reject);
}

[b-jqvifq4ql9] .modal-cancel-btn:hover {
    background-color: rgba(149, 69, 53, 0.08);
}

/* ── Responsive: stack modal buttons on mobile ── */
@media (max-width: 480px) {
    .modal-actions[b-jqvifq4ql9] {
        flex-direction: column;
    }

    .btn-fixed[b-jqvifq4ql9] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/TrustBadge.razor.rz.scp.css */
.trust-badge[b-63bdf9803t] {
    display: inline-flex;
    align-items: center;
    gap: var(--x-spacing-3);
    padding: var(--x-spacing-xs) 10px;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: var(--x-text-xs);
    font-weight: 500;
    font-family: var(--x-font-body);
    line-height: 1;
}

.trust-badge--verified[b-63bdf9803t] {
    background-color: color-mix(in srgb, var(--x-color-trust-verified) 10%, transparent);
    color: var(--x-color-trust-verified);
    border-color: color-mix(in srgb, var(--x-color-trust-verified) 30%, transparent);
}

.trust-badge--vouched[b-63bdf9803t] {
    background-color: color-mix(in srgb, var(--x-color-trust-vouched) 10%, transparent);
    color: var(--x-color-trust-vouched);
    border-color: color-mix(in srgb, var(--x-color-trust-vouched) 30%, transparent);
}

.trust-badge--trusted[b-63bdf9803t] {
    background-color: color-mix(in srgb, var(--x-color-trust-trusted) 10%, transparent);
    color: var(--x-color-trust-trusted);
    border-color: color-mix(in srgb, var(--x-color-trust-trusted) 30%, transparent);
}
/* /Components/Shared/UploadField.razor.rz.scp.css */
/* UploadField — label + (avatar|banner) upload area + 3-line text block.
   Consumes the same visual contract as the old fp/inv/pp-upload-row patterns
   that lived in four Edit*ProfileModal .razor.css files. */

.upload-field[b-5kuuvusrwe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upload-field__label[b-5kuuvusrwe] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-foreground);
    margin: 0;
}

.upload-field__row[b-5kuuvusrwe] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Upload area shapes. The size + border-radius differ per variant. */
.upload-field__area[b-5kuuvusrwe] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

.upload-field__area--circle[b-5kuuvusrwe] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.upload-field__area--square[b-5kuuvusrwe] {
    width: 120px;
    height: 120px;
    border-radius: 20px;
}

.upload-field__area--banner[b-5kuuvusrwe] {
    width: 241px;
    height: 120px;
    border-radius: 20px;
}

.upload-field__img[b-5kuuvusrwe] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Oksana 2026-04-20: 'Nothing happens when clicking on the existing image
       in Edit pop-up.' Browser click-on-<img> semantics prevented the event
       from reaching the hidden <InputFile>. Making the image + placeholder
       transparent to pointer events lets clicks pass through to the file
       input layered beneath. */
    pointer-events: none;
}

.upload-field__placeholder[b-5kuuvusrwe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--x-color-muted-foreground);
    pointer-events: none;
}

/* Pending-upload placeholder — shown in place of the inline base64 preview for
   files larger than PreviewMaxBytes (default 512 KB). Keeps the DOM slim by
   avoiding a multi-MB data URL that would re-serialise over SignalR on every
   parent render. */
.upload-field__pending[b-5kuuvusrwe] {
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    text-align: center;
    font-family: var(--x-font-body);
}

.upload-field__pending-name[b-5kuuvusrwe] {
    font-size: var(--x-text-xs, 12px);
    font-weight: 500;
    color: var(--x-color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.upload-field__pending-size[b-5kuuvusrwe] {
    font-size: var(--x-text-xs, 12px);
    color: var(--x-color-muted-foreground);
}

/* Hover overlay — only rendered when ShowHoverOverlay=true (personal profile). */
.upload-field__overlay[b-5kuuvusrwe] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.upload-field__overlay--circle[b-5kuuvusrwe] { border-radius: 50%; }
.upload-field__overlay--square[b-5kuuvusrwe] { border-radius: 20px; }
.upload-field__overlay--banner[b-5kuuvusrwe] { border-radius: 20px; }

.upload-field__area:hover .upload-field__overlay[b-5kuuvusrwe] {
    opacity: 1;
}

/* Native <input type=file> overlaid on the area so clicks anywhere trigger it.
   ::deep is required: <InputFile> is a child component, so Blazor's scoped-CSS
   attribute (b-xxxx) is applied only to HTML elements in THIS component's
   template — not to descendants rendered by child components. Without ::deep
   the rule compiles to `.upload-field__input[b-xxxx]` which never matches the
   <input type=file> InputFile renders, leaving it at default inline position.
   Result before this fix: clicks on the area hit the pointer-events:none img
   and never reached the file input, so the file picker never opened (regression
   reported by Arjan 2026-04-21). z-index pins it above img+placeholder+overlay. */
[b-5kuuvusrwe] .upload-field__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 3-line text block to the right of the upload area. */
.upload-field__text[b-5kuuvusrwe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.upload-field__upload-label[b-5kuuvusrwe] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--x-color-foreground);
    margin: 0;
}

.upload-field__hint[b-5kuuvusrwe] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-muted-foreground);
    margin: 0;
}

/* Responsive — stack on narrow widths, shrink avatar, banner fills. */
@media (max-width: 640px) {
    .upload-field__row[b-5kuuvusrwe] {
        flex-direction: column;
        gap: 12px;
    }

    .upload-field__area--circle[b-5kuuvusrwe],
    .upload-field__area--square[b-5kuuvusrwe] {
        width: 96px;
        height: 96px;
    }

    .upload-field__area--banner[b-5kuuvusrwe] {
        width: 100%;
        max-width: 241px;
    }
}
/* /Components/Shared/VideoPlayerModal.razor.rz.scp.css */
/* VideoPlayerModal — 16:9 embed slot with placeholder state. */

.video-player-modal__frame[b-askwcu5cjj] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--x-color-bg-dark);
    border-radius: var(--x-radius-md);
    overflow: hidden;
}

.video-player-modal__frame iframe[b-askwcu5cjj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-player-modal__placeholder[b-askwcu5cjj] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm);
    padding: var(--x-spacing-lg);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.video-player-modal__placeholder-title[b-askwcu5cjj] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-2xl);
    margin: 0;
}

.video-player-modal__placeholder-hint[b-askwcu5cjj] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    max-width: 360px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}