@import '_content/Xablu.Blazor/Xablu.Blazor.v8t2v0wj2a.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 ─────────────────────────────────────────────────── */
.bottom-nav-link[b-9t9i2ffi1a] {
    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 !important;
    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) ────────────── */
.app-header-cluster[b-pmdaasst4j] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--layout-header-height, 64px);
    flex-shrink: 0;
    padding: 0 var(--layout-gutter, 40px);
    gap: var(--x-spacing-sm);
}

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

/* ── 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 */
.app-content[b-pmdaasst4j] {
    padding: 0 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) ────────────────────── */
.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) ──────────────────────────────────────── */
.sidebar__nav-item[b-h5bxvi85wr] {
    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) !important; /* FigmaMake: stroke="white" on dark sidebar */
    text-decoration: none !important;
    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 ── */
.notif-panel[b-om974ekw6t] {
    width: 360px;
    max-height: 520px;
    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));
}

.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(360px, 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);
}

/* FigmaMake: all onboarding inputs/dropdowns use border-radius: 100px (full pill) */
.onboarding-shell[b-nnx86xeuad]  .x-textfield-input,
.onboarding-shell[b-nnx86xeuad]  .x-dropdown-trigger,
.onboarding-shell[b-nnx86xeuad]  .x-select-control {
    border-radius: var(--x-radius-full, 100px) !important;
}
/* /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
   XButton.Ghost renders a <button> so we target it via ::deep               */

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

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

/* ── 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/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 !important;
    height: 120px !important;
    border-radius: 50% !important;
    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) {
    .connprofile-header-card[b-bf6hy9bzw0] {
        padding: var(--x-spacing-lg, 24px);
    }

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

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

    .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);
}

.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-3xl);
}

/* ── 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);
}

/* ── 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;
}


/* Type chip (Project / Investor) */
.vc-type-chip[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs, 4px);
    height: 24px;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-chip-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);
}

.vc-type-chip svg[b-gcyh6rzxmx] {
    width: 14px;
    height: 14px;
}

/* Introducer pill — small avatar + name inline (Issue 4) */
.vc-introducer-pill[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs, 4px);
    height: 24px;
    border-radius: var(--x-radius-full, 100px);
    background-color: var(--x-color-card);
    border: 1px solid var(--x-color-chip-light);
    padding: 2px 6px;
}

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

.vc-introducer-name[b-gcyh6rzxmx] {
    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;
}

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

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

.chip-blue[b-gcyh6rzxmx] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: var(--x-radius-full, 100px);
    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;
}

.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;
    }
}
/* /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 ── */
.hive-tabs[b-luns99tzgx] {
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(234, 237, 241, 1);
}

.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) !important;
    color: var(--x-color-foreground) !important;
    border-radius: var(--x-radius-full) !important;
    height: 24px;
    padding: 0 4px !important;
    font-size: var(--x-text-sm) !important;
    font-weight: 600 !important;
    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;
    margin-bottom: var(--x-spacing-lg);
    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;
    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);
}

.discover-banner__close:hover[b-luns99tzgx] {
    opacity: 0.8;
}

.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;
}

/* ── 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) !important;
    font-size: var(--x-text-md) !important;
}

.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);
}

.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) ── */
.extend-card__intro-btn[b-luns99tzgx] {
    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) !important;
    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 !important;
    height: 46px !important;
}

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

/* Muted placeholder text */
[b-luns99tzgx] .hive-searchbox input::placeholder {
    color: rgba(122, 127, 133, 1) !important;
    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 #515458 */
.discover-carousel-btn[b-luns99tzgx]  .x-icon,
.discover-carousel-btn[b-luns99tzgx]  svg {
    color: rgba(81, 84, 88, 1) !important;
}

.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) {
    .discover-carousel-item[b-luns99tzgx] {
        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% !important;
    }

    /* 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) !important;
    }
}

/* ── 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 ──────────────────────────────────────────────────────────── */

.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: '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-subtitle[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-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;
}

.login-welcome-text[b-1x0sczj5jt] {
    font-family: '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, max 320px on desktop per FigmaMake */
.login-cta-wrapper[b-1x0sczj5jt] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.login-cta-wrapper .login-form-full[b-1x0sczj5jt] {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-content: center;
}

/* FigmaMake: h-46px, w-full, gold bg, var(--radius), uppercase sm/700 */
.login-cta-wrapper[b-1x0sczj5jt]  button,
.login-cta-wrapper[b-1x0sczj5jt]  a {
    height: 46px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--x-radius) !important;
    border: none !important;
    background: var(--x-color-primary) !important;
    color: var(--x-color-primary-foreground) !important;
    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;
    cursor: pointer;
    transition: opacity var(--x-duration-normal) var(--x-ease-out);
}

.login-cta-wrapper[b-1x0sczj5jt]  button:hover { opacity: 0.9; }
.login-cta-wrapper[b-1x0sczj5jt]  button:disabled,
.login-cta-wrapper[b-1x0sczj5jt]  a[aria-disabled="true"] { 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%;
}

.login-social-btn-wrapper[b-1x0sczj5jt] {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* Figma: h-46px, w-full, center-aligned content, r=100 pill, rgba(208,215,224) border */
/* ::deep on wrapper div crosses into XButton's rendered <a> element */
.login-social-btn-wrapper[b-1x0sczj5jt]  a,
.login-social-btn-wrapper[b-1x0sczj5jt]  button {
    position: relative;
    height: 46px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm);
    padding: 0 var(--x-spacing-3sm, 12px) !important;
    cursor: pointer;
    background: var(--x-color-card) !important;
    border: 1px solid rgba(208, 215, 224, 1) !important;
    border-radius: 100px !important;
    transition: background-color var(--x-duration-normal) var(--x-ease-out);
}

.login-social-btn-wrapper[b-1x0sczj5jt]  a:hover,
.login-social-btn-wrapper[b-1x0sczj5jt]  button:hover {
    background: var(--x-color-neutral-50) !important;
}

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

.login-social-btn-wrapper[b-1x0sczj5jt]  a:active,
.login-social-btn-wrapper[b-1x0sczj5jt]  button: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] {
    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] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    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;
    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);
}

/* ── Forgot password (FigmaMake: right-aligned, h-40px, uppercase, sm/700, muted) ── */
.login-forgot-row[b-1x0sczj5jt] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: var(--x-spacing-xs);
}

/* ── Forgot password button — CSS custom properties replace most ::deep (Phase 194) ── */
.login-forgot-row[b-1x0sczj5jt] {
    --x-button-height: 40px;
    --x-button-padding: 0 var(--x-spacing-md);
    --x-button-radius: var(--x-radius);
    --x-button-bg: transparent;
    --x-button-font-size: var(--x-text-sm);
    --x-button-font-weight: 700;
    --x-button-color: var(--x-color-muted-foreground);
    --x-button-text-transform: uppercase;
    --x-button-letter-spacing: var(--x-letter-spacing-button);
}

/* ::deep retained for border/box-shadow reset not exposed as CSS custom properties */
.login-forgot-row[b-1x0sczj5jt]  button,
.login-forgot-row[b-1x0sczj5jt]  a {
    border: none !important;
    box-shadow: none !important;
}

/* ── 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 ── */
.login-form-full[b-1x0sczj5jt] {
    width: 100%;
}

/* ── 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);
}

.login-magic-heading[b-1x0sczj5jt] {
    margin: var(--x-spacing-md) 0 var(--x-spacing-sm);
    font-family: var(--x-font-heading);
    color: var(--x-color-foreground);
}

.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;
}

.messages-chat-list-card .x-card-body[b-3t56tblxbu] {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-lg);
    height: 100%;
    overflow: hidden;
}

.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 */
/* ::deep targets XButton component internals (.btn-pill class) */
.messages-chat-list-header[b-3t56tblxbu]  .btn-pill {
    height: 46px;
    min-width: 150px;
    border-radius: var(--x-radius-full);
    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);
}

.messages-chat-list-title[b-3t56tblxbu] {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    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 .x-card-body[b-3t56tblxbu] {
    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;
}

.new-chat-modal__empty[b-3t56tblxbu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--x-spacing-2xl-5, 40px) 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;
}

.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 !important;
    border-radius: 100px !important;
}

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

/* Muted placeholder */
[b-ekmiobfrie] .network-top-search input::placeholder {
    color: rgba(122, 127, 133, 1) !important;
    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 .x-card-body[b-ekmiobfrie] {
    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 .x-button[b-ekmiobfrie] {
    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 #954535 reject border + text */
.network-watchlist-remove-btn[b-ekmiobfrie] {
    border-color: var(--x-color-reject, #954535);
    color: var(--x-color-reject, #954535);
    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 .x-button[b-ekmiobfrie] {
        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: '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: '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: '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: '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: '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: '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: '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: '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 #515458) ── */
.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: '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: '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: '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 ── */
/* border-radius on top corners replaces the clipping that was done by .profile-hero-wrapper's overflow:hidden */
.profile-hero-banner[b-2h6ilkupi0] {
    height: 344px;
    margin-bottom: -84px;
    position: relative;
    z-index: 1;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    background: linear-gradient(rgba(0,0,0,0.2) 0%, rgba(177,177,177,0.2) 100%), linear-gradient(90deg, var(--x-color-neutral-900), var(--x-color-neutral-900));
}

/* 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] {
        padding: var(--x-spacing-md) 20px;
    }

    .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);
}
/* /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;
}

.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;
}

.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/Shared/AddToHiveModal.razor.rz.scp.css */
/* ::deep targets content rendered inside XModal child RenderFragment */
[b-6c87lnfvog] .modal-heading-serif {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    color: var(--x-color-card-foreground);
}

[b-6c87lnfvog] .modal-heading-accent {
    color: var(--x-color-primary);
}

[b-6c87lnfvog] .modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-sm) 0;
}

[b-6c87lnfvog] .modal-section {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

[b-6c87lnfvog] .modal-section-md {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}

[b-6c87lnfvog] .modal-text {
    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;
}

[b-6c87lnfvog] .modal-char-counter {
    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;
}

[b-6c87lnfvog] .modal-char-counter--warn {
    color: var(--x-color-destructive);
}

[b-6c87lnfvog] .modal-text-muted {
    color: var(--x-color-muted-foreground);
}

[b-6c87lnfvog] .avatar-row {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-md);
}

[b-6c87lnfvog] .connection-icon {
    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;
}

[b-6c87lnfvog] .error-text {
    color: var(--x-color-destructive);
    font-size: var(--x-text-sm);
    margin: 0;
}

[b-6c87lnfvog] .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--x-spacing-lg);
}

/* FigmaMake: fixed 150px width for action buttons */
[b-6c87lnfvog] .btn-fixed {
    width: 150px;
    min-width: 150px;
    height: 46px;
}

/* ── Responsive: stack modal buttons on mobile ── */
@media (max-width: 480px) {
    [b-6c87lnfvog] .modal-actions {
        flex-direction: column;
    }

    [b-6c87lnfvog] .btn-fixed {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/AvatarPill.razor.rz.scp.css */
/* ::deep targets child component content (avatar pill button rendered in parent) */
[b-xk2m0mdcx2] .avatar-pill-btn {
    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);
}

[b-xk2m0mdcx2] .avatar-pill-btn:hover {
    border-color: var(--x-color-primary);
}

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

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

[b-xk2m0mdcx2] .avatar-pill-name {
    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;
}

/* 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 ── */
[b-ayq7sub9r3] .bsd-panel {
    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 #d5dce4;
}

/* ── Scrollable content wrapper: gap=32 between sections ── */
[b-ayq7sub9r3] .bsd-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0;
}

/* ── Entity row: horizontal, gap=12, NO border-bottom ── */
[b-ayq7sub9r3] .bsd-entity {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-ayq7sub9r3] .bsd-entity__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

[b-ayq7sub9r3] .bsd-entity__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-ayq7sub9r3] .bsd-entity__name {
    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);
}

[b-ayq7sub9r3] .bsd-entity__verified-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

[b-ayq7sub9r3] .bsd-entity__meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

[b-ayq7sub9r3] .bsd-entity__contact {
    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 ── */
[b-ayq7sub9r3] .bsd-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-ayq7sub9r3] .bsd-section--gap16 {
    gap: 16px;
}

[b-ayq7sub9r3] .bsd-section__title {
    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);
}

[b-ayq7sub9r3] .bsd-section__subtitle {
    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=#d5dce4 r=16 pad=24 gap=12 ── */
[b-ayq7sub9r3] .bsd-card {
    background: var(--x-color-surface-card, #ffffff);
    border: 1px solid #d5dce4;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-ayq7sub9r3] .bsd-card--r20 {
    border-radius: 20px;
}

[b-ayq7sub9r3] .bsd-bars {
    --x-progressbar-track-color: #efead9;
    --x-progressbar-track-radius: 100px;
}

[b-ayq7sub9r3] .bsd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-ayq7sub9r3] .bsd-empty {
    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;
}

[b-ayq7sub9r3] .bsd-credential {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-ayq7sub9r3] .bsd-credential__text {
    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 ── */
[b-ayq7sub9r3] .bsd-section__count {
    color: var(--x-color-primary);
    font-style: italic;
    font-weight: 400;
    margin-left: 4px;
}

/* ── Avatar cluster (Vouches): S avatars + optional +N chip ── */
[b-ayq7sub9r3] .bsd-avatar-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

[b-ayq7sub9r3] .bsd-avatar-cluster__item {
    display: inline-flex;
    flex-shrink: 0;
}

[b-ayq7sub9r3] .bsd-avatar-cluster__more {
    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 ── */
[b-ayq7sub9r3] .bsd-overall-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

[b-ayq7sub9r3] .bsd-overall-rating__score {
    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);
}

[b-ayq7sub9r3] .bsd-overall-rating__denom {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--x-color-muted-foreground);
}

[b-ayq7sub9r3] .bsd-overall-rating__stars {
    display: flex;
    gap: 2px;
    align-items: center;
    margin-left: auto;
}

/* ── Review row: avatar + identity + stars/time header, text below ── */
[b-ayq7sub9r3] .bsd-review {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--x-color-border, #d6dce4);
}

[b-ayq7sub9r3] .bsd-review:first-of-type {
    border-top: none;
    padding-top: 0;
}

[b-ayq7sub9r3] .bsd-review__header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}

[b-ayq7sub9r3] .bsd-review__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

[b-ayq7sub9r3] .bsd-review__name {
    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);
}

[b-ayq7sub9r3] .bsd-review__role {
    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);
}

[b-ayq7sub9r3] .bsd-review__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

[b-ayq7sub9r3] .bsd-review__stars {
    display: flex;
    gap: 2px;
    align-items: center;
}

[b-ayq7sub9r3] .bsd-review__time {
    font-family: var(--x-font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    white-space: nowrap;
}

[b-ayq7sub9r3] .bsd-review__text {
    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 ── */
[b-ayq7sub9r3] .bsd-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 767px) {
    [b-ayq7sub9r3] .bsd-panel {
        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;
    }

    [b-ayq7sub9r3] .bsd-footer {
        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 ── */
[b-s76hgsr0ro] .bse-panel {
    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;
}

/* ── Body: 24 top, 32 sides/bottom ── */
[b-s76hgsr0ro] .bse-panel .x-sidepanel-body {
    padding: 24px 32px 32px;
}

/* ── Title: "What is BeeScore" — 40px serif ── */
[b-s76hgsr0ro] .bse-heading {
    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;
}

[b-s76hgsr0ro] .bse-accent {
    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 ── */
[b-s76hgsr0ro] .bse-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

[b-s76hgsr0ro] .bse-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ── Section heading: 32px serif, NOT italic ── */
[b-s76hgsr0ro] .bse-section-heading {
    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 ── */
[b-s76hgsr0ro] .bse-para {
    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) ── */
[b-s76hgsr0ro] .bse-list-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Dimensions list: 5 tight rows ── */
[b-s76hgsr0ro] .bse-dimensions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Bullet list: disc, inherits body weight (fw=400) ── */
[b-s76hgsr0ro] .bse-bullet-list {
    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;
}

[b-s76hgsr0ro] .bse-bullet-list li {
    padding: 0;
}

@media (max-width: 767px) {
    [b-s76hgsr0ro] .bse-panel {
        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;
    }

    [b-s76hgsr0ro] .bse-heading {
        font-size: 32px;
    }

    [b-s76hgsr0ro] .bse-section-heading {
        font-size: 24px;
    }

    [b-s76hgsr0ro] .bse-body {
        gap: 32px;
    }

    [b-s76hgsr0ro] .bse-section {
        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 */
.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;
    gap: var(--x-spacing-2xl-5, 40px);
    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 ── */
[b-a6vo7tzu5y] .connection-card { 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 !important;
    transition: box-shadow var(--x-duration-fast) var(--x-ease-out);
}

[b-a6vo7tzu5y] .connection-card:hover {
    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 */
.connection-card__msg-btn[b-a6vo7tzu5y] {
    background-color: var(--x-color-graphite, #292a2c) !important;
    border-color: var(--x-color-graphite, #292a2c) !important;
    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 — ::deep targets XAvatar internals */
[b-a6vo7tzu5y] .connection-card__company-logo {
    border-radius: 6px;
}

/* FigmaMake: avatar 80px mobile, 100px desktop — ::deep targets XAvatar internals */
[b-a6vo7tzu5y] .connection-card__avatar {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    [b-a6vo7tzu5y] .connection-card__avatar {
        width: 100px;
        height: 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 */
/* ── Panel shell: rounded-left corners (FigmaMake parity) ── */
[b-c63r4z3zx0] .edit-investor-panel {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

@media (max-width: 767px) {
    [b-c63r4z3zx0] .edit-investor-panel {
        border-radius: 0;
    }
}

/* ── Panel body ── */
.inv-body[b-c63r4z3zx0] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
}

/* ── Header ── */
.inv-header[b-c63r4z3zx0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.inv-header-title[b-c63r4z3zx0] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.inv-heading[b-c63r4z3zx0] {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-foreground);
}

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

.inv-completion[b-c63r4z3zx0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: rgba(142, 148, 155, 1);
    white-space: nowrap;
}

/* ── Section containers ── */
.inv-section[b-c63r4z3zx0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inv-section--narrow[b-c63r4z3zx0] {
    max-width: 440px;
}

.inv-section--picker[b-c63r4z3zx0] {
    max-width: 322px;
}

/* ── Labels ── */
.inv-label[b-c63r4z3zx0] {
    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;
}

.inv-label-sm[b-c63r4z3zx0] {
    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;
}

.inv-hint[b-c63r4z3zx0] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    margin: 0;
}

/* ── Upload row (avatar / banner side-by-side) ── */
.inv-upload-row[b-c63r4z3zx0] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.inv-upload-text[b-c63r4z3zx0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

/* ── Avatar area: 120×120 rounded square ── */
.inv-avatar-area[b-c63r4z3zx0] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Banner area: 241×120 rounded rectangle ── */
.inv-banner-area[b-c63r4z3zx0] {
    position: relative;
    width: 241px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Upload placeholder (centered camera icon) ── */
.inv-upload-placeholder[b-c63r4z3zx0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--x-color-muted-foreground);
}

/* ── Uploaded image: fills the area ── */
.inv-upload-img[b-c63r4z3zx0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Hidden file input: covers the clickable area ── */
.inv-file-input[b-c63r4z3zx0] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Textarea override ── */
[b-c63r4z3zx0] .inv-textarea textarea {
    min-height: 160px;
    resize: vertical;
}

/* ── Chip container ── */
.inv-chip-wrap[b-c63r4z3zx0] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Selected chip: light blue ── */
[b-c63r4z3zx0] .inv-chip-selected {
    background-color: rgba(156, 193, 224, 1) !important;
    border-color: rgba(156, 193, 224, 1) !important;
    color: var(--x-color-foreground) !important;
}

/* ── Unselected chip: white + muted border ── */
[b-c63r4z3zx0] .inv-chip-unselected {
    background-color: var(--x-color-card) !important;
    border: 1px solid rgba(203, 211, 221, 1) !important;
    color: var(--x-color-foreground) !important;
}

/* ── "Add" chip: white + black border ── */
[b-c63r4z3zx0] .inv-chip-add {
    background-color: var(--x-color-card) !important;
    border: 1px solid var(--x-color-foreground) !important;
    color: var(--x-color-foreground) !important;
}

/* ── Removable geography chip ── */
[b-c63r4z3zx0] .inv-chip-removable {
    cursor: pointer;
}

/* ── 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 ── */
[b-c63r4z3zx0] .inv-social-field {
    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;
}

[b-c63r4z3zx0] .inv-geo-input {
    flex: 1;
    min-width: 0;
}

[b-c63r4z3zx0] .inv-geo-add-btn {
    flex-shrink: 0;
    min-width: 64px;
}

[b-c63r4z3zx0] .inv-geo-cancel-btn {
    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;
}

/* ── Error message ── */
.inv-error[b-c63r4z3zx0] {
    margin-top: auto;
}

/* ── Footer ── */
.inv-footer[b-c63r4z3zx0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
}

/* Cancel button */
[b-c63r4z3zx0] .inv-btn-cancel {
    min-width: 150px;
    height: 46px;
}

/* Save button: gold fill */
[b-c63r4z3zx0] .inv-btn-save {
    min-width: 150px;
    height: 46px;
    background-color: var(--x-color-primary) !important;
    border-color: var(--x-color-primary) !important;
    color: #ffffff !important;
}

[b-c63r4z3zx0] .inv-btn-save:hover:not(:disabled) {
    background-color: var(--x-color-primary-hover) !important;
    border-color: var(--x-color-primary-hover) !important;
}

/* Figma button typography: UPPERCASE, letter-spacing 0.7px, weight 700 */
[b-c63r4z3zx0] .inv-btn-cancel .x-button-text,
[b-c63r4z3zx0] .inv-btn-save .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700 !important;
    font-size: var(--x-text-sm);
}

/* ── 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;
    }

    .inv-banner-area[b-c63r4z3zx0] {
        width: 100%;
        max-width: 241px;
    }

    .inv-section--narrow[b-c63r4z3zx0],
    .inv-section--picker[b-c63r4z3zx0] {
        max-width: 100%;
    }
}
/* /Components/Shared/EditPartnerProfileModal.razor.rz.scp.css */
/* ── Panel shell: rounded-left corners (FigmaMake parity) ── */
[b-c0i63sav7w] .edit-partner-panel {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

@media (max-width: 767px) {
    [b-c0i63sav7w] .edit-partner-panel {
        border-radius: 0;
    }
}

/* ── Panel body ── */
.pp-body[b-c0i63sav7w] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
}

/* ── Header ── */
.pp-header[b-c0i63sav7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pp-header-title[b-c0i63sav7w] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pp-heading[b-c0i63sav7w] {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-foreground);
}

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

.pp-completion[b-c0i63sav7w] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: rgba(142, 148, 155, 1);
    white-space: nowrap;
}

/* ── Section containers ── */
.pp-section[b-c0i63sav7w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-section--narrow[b-c0i63sav7w] {
    max-width: 440px;
}

.pp-section--picker[b-c0i63sav7w] {
    max-width: 322px;
}

/* ── Labels ── */
.pp-label[b-c0i63sav7w] {
    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;
}

.pp-label-sm[b-c0i63sav7w] {
    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;
}

.pp-hint[b-c0i63sav7w] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    margin: 0;
}

/* ── Upload row ── */
.pp-upload-row[b-c0i63sav7w] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.pp-upload-text[b-c0i63sav7w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

/* ── Avatar area: 120x120 ── */
.pp-avatar-area[b-c0i63sav7w] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Banner area: 241x120 ── */
.pp-banner-area[b-c0i63sav7w] {
    position: relative;
    width: 241px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Upload placeholder ── */
.pp-upload-placeholder[b-c0i63sav7w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--x-color-muted-foreground);
}

/* ── Uploaded image ── */
.pp-upload-img[b-c0i63sav7w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Hidden file input ── */
.pp-file-input[b-c0i63sav7w] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Textarea override ── */
[b-c0i63sav7w] .pp-textarea textarea {
    min-height: 160px;
    resize: vertical;
}

/* ── Chip container ── */
.pp-chip-wrap[b-c0i63sav7w] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Selected chip ── */
[b-c0i63sav7w] .pp-chip-selected {
    background-color: rgba(156, 193, 224, 1) !important;
    border-color: rgba(156, 193, 224, 1) !important;
    color: var(--x-color-foreground) !important;
}

/* ── Unselected chip ── */
[b-c0i63sav7w] .pp-chip-unselected {
    background-color: var(--x-color-card) !important;
    border: 1px solid rgba(203, 211, 221, 1) !important;
    color: var(--x-color-foreground) !important;
}

/* ── Add chip ── */
[b-c0i63sav7w] .pp-chip-add {
    background-color: var(--x-color-card) !important;
    border: 1px solid var(--x-color-foreground) !important;
    color: var(--x-color-foreground) !important;
}

/* ── Removable chip ── */
[b-c0i63sav7w] .pp-chip-removable {
    cursor: pointer;
}

/* ── 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; }

[b-c0i63sav7w] .pp-social-field {
    flex: 1;
    min-width: 0;
}

/* ── Picker dropdown ── */
.pp-section--picker[b-c0i63sav7w]  .pp-picker-dropdown,
.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;
}

[b-c0i63sav7w] .pp-geo-input {
    flex: 1;
    min-width: 0;
}

[b-c0i63sav7w] .pp-geo-add-btn {
    flex-shrink: 0;
    min-width: 64px;
}

[b-c0i63sav7w] .pp-geo-cancel-btn {
    flex-shrink: 0;
    min-width: 80px;
}

/* ── Error message ── */
.pp-error[b-c0i63sav7w] {
    margin-top: auto;
}

/* ── Footer ── */
.pp-footer[b-c0i63sav7w] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
}

[b-c0i63sav7w] .pp-btn-cancel {
    min-width: 150px;
    height: 46px;
}

[b-c0i63sav7w] .pp-btn-save {
    min-width: 150px;
    height: 46px;
    background-color: var(--x-color-primary) !important;
    border-color: var(--x-color-primary) !important;
    color: #ffffff !important;
}

[b-c0i63sav7w] .pp-btn-save:hover:not(:disabled) {
    background-color: var(--x-color-primary-hover) !important;
    border-color: var(--x-color-primary-hover) !important;
}

/* Figma button typography: UPPERCASE, letter-spacing 0.7px, weight 700 */
[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 !important;
    font-size: var(--x-text-sm);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .pp-socials-grid[b-c0i63sav7w] {
        grid-template-columns: 1fr;
    }

    .pp-banner-area[b-c0i63sav7w] {
        width: 100%;
        max-width: 241px;
    }

    .pp-section--narrow[b-c0i63sav7w],
    .pp-section--picker[b-c0i63sav7w] {
        max-width: 100%;
    }
}
/* /Components/Shared/EditProfileModal.razor.rz.scp.css */
/* EditProfileModal — Figma: Profile - personal page edit (node 1855-37731)
   Panel: 700px wide, 32px padding, VERTICAL gap=40px between sections         */

/* ── Panel shell: rounded-left corners (FigmaMake parity) ── */
[b-8585fcte9m] .edit-profile-panel {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

@media (max-width: 767px) {
    [b-8585fcte9m] .edit-profile-panel {
        border-radius: 0;
    }
}

/* ── Header ─────────────────────────────────────────────────────────── */
[b-8585fcte9m] .panel-header-title {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    flex: 1;
}

[b-8585fcte9m] .heading-serif {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-foreground);
}

[b-8585fcte9m] .heading-accent {
    font-style: italic;
    color: var(--x-color-primary);
}

[b-8585fcte9m] .completion-text {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    white-space: nowrap;
    margin-left: auto;
}

/* ── Body ────────────────────────────────────────────────────────────── */
[b-8585fcte9m] .panel-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Form sections — label + field, gap=12px per Figma ─────────────── */
[b-8585fcte9m] .form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Name, Location, E-mail: max-width 440px per Figma */
[b-8585fcte9m] .form-section--narrow {
    max-width: 440px;
}

/* ── Labels: Inter 16px / weight 400 per Figma ──────────────────────── */
[b-8585fcte9m] .field-label {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base);
    font-weight: 400;
    color: var(--x-color-foreground);
    margin: 0;
}

[b-8585fcte9m] .field-hint {
    font-family: var(--x-font-body);
    font-size: var(--x-text-xs);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    margin: 0;
}

/* ── All text fields in this modal: pill r=100 per Figma ─────────────── */
[b-8585fcte9m] .x-textfield-input,
[b-8585fcte9m] .x-textarea-input {
    border-radius: 100px !important;
    border-color: rgba(208, 215, 224, 1) !important;
    height: 46px !important;
    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) !important;
    height: auto !important;
}

[b-8585fcte9m] .textarea-headline textarea { min-height: 118px; max-height: 240px; }
[b-8585fcte9m] .textarea-about textarea    { min-height: 230px; max-height: 360px; }

/* ── Upload row (avatar / banner side-by-side with text) ───────────── */
[b-8585fcte9m] .upload-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

[b-8585fcte9m] .upload-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

[b-8585fcte9m] .field-label-sm {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--x-color-foreground);
    margin: 0;
}

/* ── Avatar area: 120×120 circle ──────────────────────────────────── */
[b-8585fcte9m] .avatar-area {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Banner area: 241×120 rounded rectangle ───────────────────────── */
[b-8585fcte9m] .banner-area {
    position: relative;
    width: 241px;
    height: 120px;
    border-radius: var(--x-radius-md);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Upload placeholder (centered content) ────────────────────────── */
[b-8585fcte9m] .upload-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--x-color-muted-foreground);
}

[b-8585fcte9m] .avatar-initials {
    font-family: var(--x-font-body);
    font-size: 40px;
    font-weight: 600;
    color: var(--x-color-primary);
}

/* ── Uploaded image fills the area ────────────────────────────────── */
[b-8585fcte9m] .upload-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Shared hover overlay ─────────────────────────────────────────── */
[b-8585fcte9m] .upload-overlay {
    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;
}

[b-8585fcte9m] .upload-overlay--avatar { border-radius: 50%; }
[b-8585fcte9m] .upload-overlay--banner { border-radius: var(--x-radius-md); }

[b-8585fcte9m] .avatar-area:hover .upload-overlay,
[b-8585fcte9m] .banner-area:hover .upload-overlay { opacity: 1; }

[b-8585fcte9m] .upload-hidden-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ── Socials ─────────────────────────────────────────────────────────── */
/* Figma: 2-column grid (306+24+306=636px), row gap=12px, col gap=24px   */
[b-8585fcte9m] .socials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

/* Each row: icon (24x24) + pill input, gap=12px — no outer border box   */
[b-8585fcte9m] .social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* Icon: 24x24 brand color, no background panel */
[b-8585fcte9m] .social-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: none;
    border-right: none;
}

[b-8585fcte9m] .social-input-icon--linkedin  { color: #0A66C2; }
[b-8585fcte9m] .social-input-icon--twitter   { color: var(--x-color-foreground); }
[b-8585fcte9m] .social-input-icon--instagram { color: #E4405F; }
[b-8585fcte9m] .social-input-icon--facebook  { color: #1877F2; }
[b-8585fcte9m] .social-input-icon--tiktok    { color: var(--x-color-foreground); }

/* Social text field: flex fills remaining width, pill shape */
[b-8585fcte9m] .social-row .social-field {
    flex: 1;
    min-width: 0;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
/* Figma: Cancel 150x46 pill outlined, Save 150x46 pill gold fill        */
[b-8585fcte9m] .panel-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}

[b-8585fcte9m] .btn-cancel {
    min-width: 150px;
    height: 46px;
    border-radius: 100px !important;
}

[b-8585fcte9m] .btn-save {
    min-width: 150px;
    height: 46px;
    border-radius: 100px !important;
    background-color: var(--x-color-primary) !important;
    border-color: var(--x-color-primary) !important;
    color: #ffffff !important;
}

[b-8585fcte9m] .btn-save:hover:not(:disabled) {
    background-color: var(--x-color-primary-hover) !important;
    border-color: var(--x-color-primary-hover) !important;
}

/* Figma button typography: UPPERCASE, letter-spacing 0.7px, weight 700 */
[b-8585fcte9m] .btn-cancel .x-button-text,
[b-8585fcte9m] .btn-save .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700 !important;
    font-size: var(--x-text-sm);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    [b-8585fcte9m] .socials-grid {
        grid-template-columns: 1fr;
    }

    [b-8585fcte9m] .form-section--narrow {
        max-width: 100%;
    }

    [b-8585fcte9m] .upload-row {
        flex-direction: column;
        gap: 12px;
    }

    [b-8585fcte9m] .avatar-area {
        width: 96px;
        height: 96px;
    }

    [b-8585fcte9m] .banner-area {
        width: 100%;
        max-width: 241px;
        height: 120px;
    }

    [b-8585fcte9m] .heading-serif {
        font-size: 28px;
    }

    [b-8585fcte9m] .completion-text {
        white-space: normal;
        margin-left: 0;
        font-size: var(--x-text-sm);
    }

    [b-8585fcte9m] .panel-body {
        gap: 24px;
        padding-bottom: max(var(--x-spacing-lg), env(safe-area-inset-bottom));
    }

    [b-8585fcte9m] .panel-footer {
        flex-direction: column-reverse;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    [b-8585fcte9m] .btn-cancel,
    [b-8585fcte9m] .btn-save {
        width: 100%;
    }
}
/* /Components/Shared/EditProjectProfileModal.razor.rz.scp.css */
/* ── Panel shell: rounded-left corners (FigmaMake parity) ── */
[b-8gnynzrdvq] .edit-project-panel {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

@media (max-width: 767px) {
    [b-8gnynzrdvq] .edit-project-panel {
        border-radius: 0;
    }
}

/* ── Panel body ── */
.fp-body[b-8gnynzrdvq] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
}

/* ── Header ── */
.fp-header[b-8gnynzrdvq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.fp-header-title[b-8gnynzrdvq] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.fp-heading[b-8gnynzrdvq] {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-foreground);
}

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

.fp-completion[b-8gnynzrdvq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: rgba(142, 148, 155, 1);
    white-space: nowrap;
}

/* ── Section containers ── */
.fp-section[b-8gnynzrdvq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-section--narrow[b-8gnynzrdvq] {
    max-width: 440px;
}

.fp-section--picker[b-8gnynzrdvq] {
    max-width: 322px;
}

/* ── Labels ── */
.fp-label[b-8gnynzrdvq] {
    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;
}

.fp-label-sm[b-8gnynzrdvq] {
    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;
}

.fp-hint[b-8gnynzrdvq] {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    margin: 0;
}

.fp-hint--top[b-8gnynzrdvq] {
    margin-bottom: -4px;
}

/* ── Upload row ── */
.fp-upload-row[b-8gnynzrdvq] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.fp-upload-text[b-8gnynzrdvq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

/* ── Avatar area: 120×120 rounded square ── */
.fp-avatar-area[b-8gnynzrdvq] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Banner area: 241×120 rounded rectangle ── */
.fp-banner-area[b-8gnynzrdvq] {
    position: relative;
    width: 241px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--x-color-secondary);
}

/* ── Upload placeholder ── */
.fp-upload-placeholder[b-8gnynzrdvq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--x-color-muted-foreground);
}

/* ── Uploaded image ── */
.fp-upload-img[b-8gnynzrdvq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Hidden file input ── */
.fp-file-input[b-8gnynzrdvq] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Textarea override ── */
[b-8gnynzrdvq] .fp-textarea textarea {
    min-height: 160px;
    resize: vertical;
}

/* ── Chip container ── */
.fp-chip-wrap[b-8gnynzrdvq] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Selected chip ── */
[b-8gnynzrdvq] .fp-chip-selected {
    background-color: rgba(156, 193, 224, 1) !important;
    border-color: rgba(156, 193, 224, 1) !important;
    color: var(--x-color-foreground) !important;
}

/* ── Unselected chip ── */
[b-8gnynzrdvq] .fp-chip-unselected {
    background-color: var(--x-color-card) !important;
    border: 1px solid rgba(203, 211, 221, 1) !important;
    color: var(--x-color-foreground) !important;
}

/* ── "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;
}

[b-8gnynzrdvq] .fp-round-input,
[b-8gnynzrdvq] .fp-round-dropdown,
[b-8gnynzrdvq] .fp-contract-input {
    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) ── */
[b-8gnynzrdvq] .fp-add-btn {
    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;
}

/* ── Error message ── */
.fp-error[b-8gnynzrdvq] {
    margin-top: auto;
}

/* ── Footer ── */
.fp-footer[b-8gnynzrdvq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
}

[b-8gnynzrdvq] .fp-btn-cancel {
    min-width: 150px;
    height: 46px;
}

[b-8gnynzrdvq] .fp-btn-save {
    min-width: 150px;
    height: 46px;
    background-color: var(--x-color-primary) !important;
    border-color: var(--x-color-primary) !important;
    color: #ffffff !important;
}

[b-8gnynzrdvq] .fp-btn-save:hover:not(:disabled) {
    background-color: var(--x-color-primary-hover) !important;
    border-color: var(--x-color-primary-hover) !important;
}

/* Figma button typography: UPPERCASE, letter-spacing 0.7px, weight 700 */
[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 !important;
    font-size: var(--x-text-sm);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .fp-socials-grid[b-8gnynzrdvq] {
        grid-template-columns: 1fr;
    }

    .fp-banner-area[b-8gnynzrdvq] {
        width: 100%;
        max-width: 241px;
    }

    .fp-section--narrow[b-8gnynzrdvq],
    .fp-section--picker[b-8gnynzrdvq] {
        max-width: 100%;
    }
}
/* /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/MatchCard.razor.rz.scp.css */
/* ── Container query support ── */
[b-4eg77jgsny] .match-card { 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) {
    /* ::deep targets XAvatar component internals */
    [b-4eg77jgsny] .match-card__avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        border-radius: var(--x-radius-sm) !important;
        font-size: var(--x-text-sm) !important;
    }

    /* Mobile avatar size override via CSS custom property */
    .match-card__header[b-4eg77jgsny] {
        --x-avatar-radius: var(--x-radius-sm);
    }

    .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);
    }

    /* ::deep 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 ::deep 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 ── */
[b-vn3taz1lfi] .modal-heading-serif {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-card-foreground);
    font-style: normal;
}

[b-vn3taz1lfi] .modal-heading-accent {
    color: var(--x-color-primary);
    font-style: italic;
    font-weight: 400;
}

/* ── Body wrapper ── */
[b-vn3taz1lfi] .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

/* ── Empty state ── */
[b-vn3taz1lfi] .ratings-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--x-spacing-sm);
    padding: var(--x-spacing-xl) var(--x-spacing-lg);
    text-align: center;
}

[b-vn3taz1lfi] .ratings-empty-icon {
    color: var(--x-color-muted-foreground);
    opacity: 0.45;
}

[b-vn3taz1lfi] .ratings-empty-title {
    font-size: var(--x-text-base);
    font-weight: 700;
    line-height: 1.4;
    color: var(--x-color-card-foreground);
}

[b-vn3taz1lfi] .ratings-empty-hint {
    font-size: var(--x-text-sm);
    line-height: 1.5;
    color: var(--x-color-muted-foreground);
    max-width: 320px;
}

/* ── Ratings list: 8px gap per FigmaMake line 329 ── */
[b-vn3taz1lfi] .ratings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Rating card ── */
[b-vn3taz1lfi] .rating-card {
    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 ── */
[b-vn3taz1lfi] .rating-header {
    display: flex;
    gap: var(--x-spacing-3, 12px);
    align-items: flex-start;
    width: 100%;
}

/* ── Info column ── */
[b-vn3taz1lfi] .rating-info {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-xs);
    flex: 1;
    min-width: 0;
}

/* ── Action text ── */
[b-vn3taz1lfi] .rating-action-text {
    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;
}

[b-vn3taz1lfi] .rating-action-text--vouch {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-xs);
    flex-wrap: wrap;
}

/* ── Stars ── */
[b-vn3taz1lfi] .rating-stars {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* ── Vouch heart ── */
[b-vn3taz1lfi] .vouch-heart {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── Emoji chip (pitch type) ── */
[b-vn3taz1lfi] .emoji-label-chip {
    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 ── */
[b-vn3taz1lfi] .rating-time {
    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) ── */
[b-vn3taz1lfi] .rating-comment {
    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) {
    [b-vn3taz1lfi] .modal-heading-serif {
        font-size: 32px;
    }
}
/* /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/PendingRequestCard.razor.rz.scp.css */
/* ── Container query support ── */
[b-wfkug1bwhv] .pending-request-card { container-type: inline-size; }

/* Figma: flat white card, 16px radius, 16px padding, no shadow or border */
[b-wfkug1bwhv] .pending-request-card {
    border: none !important;
    box-shadow: none !important;
}

@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 #954535 (rust/brown) border + text */
.pending-request-card__btn--decline[b-wfkug1bwhv] {
    border-color: var(--x-color-reject, #954535);
    color: var(--x-color-reject, #954535);
}

.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);
}

/* ::deep targets XAvatar component internals (overlapping avatars) */
[b-j32031jfzv] .pitchroom-card__avatar-overlap {
    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). */

[b-saae9wj3e9] .modal-heading-serif {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-card-foreground);
    font-style: normal;
}

[b-saae9wj3e9] .modal-heading-accent {
    color: var(--x-color-primary);
    font-style: italic;
    font-weight: 400;
}

[b-saae9wj3e9] .modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
    padding: var(--x-spacing-xs) 0 0;
}

[b-saae9wj3e9] .rb-subtitle {
    font-size: var(--x-text-base);
    line-height: 1.5;
    color: var(--x-color-card-foreground);
    margin: 0;
}

[b-saae9wj3e9] .rb-target {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-saae9wj3e9] .rb-target__name {
    font-size: var(--x-text-base);
    font-weight: 500;
    color: var(--x-color-card-foreground);
}

[b-saae9wj3e9] .rb-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-saae9wj3e9] .rb-label {
    font-size: var(--x-text-base);
    font-weight: 400;
    color: var(--x-color-card-foreground);
}

[b-saae9wj3e9] .rb-stars {
    display: flex;
    gap: 6px;
    align-items: center;
}

[b-saae9wj3e9] .rb-star {
    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;
}

[b-saae9wj3e9] .rb-star:focus-visible {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 2px;
}

[b-saae9wj3e9] .rb-textarea textarea {
    min-height: 112px;
    resize: vertical;
}

[b-saae9wj3e9] .rb-error {
    margin-top: var(--x-spacing-xs);
}

[b-saae9wj3e9] .rb-actions {
    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) !important;
    color: var(--x-color-reject) !important;
}

[b-saae9wj3e9] .rb-btn-cancel .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700 !important;
    font-size: var(--x-text-sm);
}

[b-saae9wj3e9] .rb-btn-submit {
    min-width: 130px;
    height: 46px;
    background-color: var(--x-color-primary) !important;
    border-color: var(--x-color-primary) !important;
    color: #ffffff !important;
}

[b-saae9wj3e9] .rb-btn-submit .x-button-text {
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700 !important;
    font-size: var(--x-text-sm);
}

@media (max-width: 480px) {
    [b-saae9wj3e9] .modal-heading-serif {
        font-size: 32px;
    }

    [b-saae9wj3e9] .rb-actions {
        flex-direction: column-reverse;
    }

    [b-saae9wj3e9] .rb-btn-cancel,
    [b-saae9wj3e9] .rb-btn-submit {
        width: 100%;
    }
}
/* /Components/Shared/RateInteractionModal.razor.rz.scp.css */
/* ::deep targets content rendered inside XModal child RenderFragment */
[b-vl3cwurl8i] .modal-heading-serif {
    font-family: var(--x-font-heading);
    font-size: var(--x-text-3xl);
    line-height: 1;
    color: var(--x-color-card-foreground);
}

[b-vl3cwurl8i] .modal-heading-accent {
    color: var(--x-color-primary);
}

[b-vl3cwurl8i] .modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-xs) 0;
}

[b-vl3cwurl8i] .modal-text {
    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;
}

[b-vl3cwurl8i] .modal-text-bold {
    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;
}

[b-vl3cwurl8i] .mood-selector {
    display: flex;
    gap: var(--x-spacing-2_5);
    flex-wrap: wrap;
    align-items: center;
}

[b-vl3cwurl8i] .tag-section {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-2_5);
}

[b-vl3cwurl8i] .tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--x-spacing-3, 12px);
}

[b-vl3cwurl8i] .modal-section {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

[b-vl3cwurl8i] .error-text {
    color: var(--x-color-destructive);
    font-size: var(--x-text-sm);
    margin: 0;
}

[b-vl3cwurl8i] .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--x-spacing-lg);
}

[b-vl3cwurl8i] .btn-fixed {
    width: 150px;
    min-width: 150px;
    height: 46px;
}

[b-vl3cwurl8i] .modal-cancel-btn {
    border-color: var(--x-color-reject, #954535) !important;
    color: var(--x-color-reject, #954535) !important;
}

[b-vl3cwurl8i] .modal-cancel-btn:hover {
    background-color: rgba(149, 69, 53, 0.08) !important;
}

/* FigmaMake: mood chips 32px, emoji-border, 10px gap; tag chips 32px, 12px gap */
[b-vl3cwurl8i] .mood-selector,
[b-vl3cwurl8i] .tag-chips {
    --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) {
    [b-vl3cwurl8i] .modal-actions {
        flex-direction: column;
    }

    [b-vl3cwurl8i] .btn-fixed {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Shared/RequestIntroModal.razor.rz.scp.css */
/* ::deep targets content rendered inside XModal child RenderFragment */
[b-jqvifq4ql9] .modal-heading-serif {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-card-foreground);
}

[b-jqvifq4ql9] .modal-heading-accent {
    color: var(--x-color-primary);
    font-style: italic;
}

@media (max-width: 480px) {
    [b-jqvifq4ql9] .modal-heading-serif {
        font-size: 32px;
    }
}

[b-jqvifq4ql9] .modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-lg);
    padding: var(--x-spacing-xs) 0;
}

[b-jqvifq4ql9] .modal-section-md {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-md);
}

[b-jqvifq4ql9] .modal-section {
    display: flex;
    flex-direction: column;
    gap: var(--x-spacing-3, 12px);
}

[b-jqvifq4ql9] .modal-text {
    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;
}

[b-jqvifq4ql9] .avatar-row {
    display: flex;
    align-items: center;
    gap: var(--x-spacing-md);
}

[b-jqvifq4ql9] .connection-icon {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: var(--x-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-jqvifq4ql9] .connection-icon svg {
    width: 20px;
    height: 21px;
}

[b-jqvifq4ql9] .error-text {
    color: var(--x-color-destructive);
    font-size: var(--x-text-sm);
    margin: 0;
}

[b-jqvifq4ql9] .modal-actions {
    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);
}

[b-jqvifq4ql9] .btn-fixed {
    width: 150px;
    min-width: 150px;
    height: 46px;
}

[b-jqvifq4ql9] .modal-cancel-btn {
    border-color: var(--x-color-reject, #954535) !important;
    color: var(--x-color-reject, #954535) !important;
}

[b-jqvifq4ql9] .modal-cancel-btn:hover {
    background-color: rgba(149, 69, 53, 0.08) !important;
}

/* ── Responsive: stack modal buttons on mobile ── */
@media (max-width: 480px) {
    [b-jqvifq4ql9] .modal-actions {
        flex-direction: column;
    }

    [b-jqvifq4ql9] .btn-fixed {
        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);
}