/* /Components/AuthFlow/AgentSearchPanel.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login.html
   .agent-search + .search-results + .search-result + sr-* helpers verbatim. */

.agent-search[b-eb1qb5fxuz] {
    position: relative;
}

.search-state[b-eb1qb5fxuz] {
    color: var(--text-secondary);
    font-size: 1.3rem;
    font-style: italic;
    padding: 0.6rem 0;
}

.search-results[b-eb1qb5fxuz] {
    margin-top: 0.6rem;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.search-result[b-eb1qb5fxuz] {
    display: grid;
    grid-template-columns: 44px 1fr 22px;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--grey-200);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.12s ease;
    font-family: var(--font-primary);
}

.search-result:last-child[b-eb1qb5fxuz] {
    border-bottom: none;
}

.search-result:hover[b-eb1qb5fxuz] {
    background: var(--brand-blue-50);
}

.search-result.selected[b-eb1qb5fxuz] {
    background: var(--brand-blue-50);
}

.search-result.selected .sr-name[b-eb1qb5fxuz] {
    color: var(--brand-blue-dark);
}

.sr-meta[b-eb1qb5fxuz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sr-name[b-eb1qb5fxuz] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.sr-sub[b-eb1qb5fxuz] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-top: 0.2rem;
}

.sr-rank[b-eb1qb5fxuz] {
    display: inline-block;
    margin-left: 0.4rem;
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--brand-blue);
}

.sr-check[b-eb1qb5fxuz] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--success-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
}

.agent-search[b-eb1qb5fxuz]  .search-input-wrap input {
    width: 100%;
}
/* /Components/AuthFlow/AuthCard.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login.html .auth-card
   block and the shared auth-* helpers (eyebrow, header, sub, OR-divider,
   disclaimer, signup-link) verbatim. The mock left-aligns the heading
   stack (eyebrow + h + sub) rather than centering it; that intentional
   asymmetry pairs with the 2-column auth-cols layout the login + register
   pages wrap their content in. */

.auth-card[b-yazw0vki90] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 16px;
    padding: 3.6rem 3.2rem 3.2rem;
    box-shadow: var(--shadow-md);
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
}

.auth-card.compact[b-yazw0vki90] {
    max-width: 460px;
}

.auth-eyebrow[b-yazw0vki90] {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: 1.2rem;
}

.auth-h[b-yazw0vki90] {
    font-family: var(--font-primary);
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.auth-sub[b-yazw0vki90] {
    font-family: var(--font-secondary);
    font-size: 1.35rem;
    color: var(--text-secondary);
    margin-bottom: 2.6rem;
    line-height: 1.5;
}

/* The auth-cols / agent-search / form-field / search-results / selected-agent
   / auth-cta / auth-or / passkey-btn / auth-disclaim / signup-link rules
   below live inside ChildContent that LoginPage / RegisterPage provide.
   ::deep is required to reach them through scoped CSS isolation. */

.auth-card[b-yazw0vki90]  .auth-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    align-items: start;
}

.auth-card[b-yazw0vki90]  .auth-cols > div {
    min-width: 0;
}

.auth-card[b-yazw0vki90]  .auth-cta {
    display: block;
    width: 100%;
    padding: 1.4rem;
    background: var(--brand-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s ease;
    text-align: center;
    text-decoration: none;
    margin-top: 0.6rem;
}

.auth-card[b-yazw0vki90]  .auth-cta:hover:not(:disabled) {
    background: var(--brand-blue-dark);
}

.auth-card[b-yazw0vki90]  .auth-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth-card[b-yazw0vki90]  .auth-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0;
    font-size: 1.1rem;
    color: var(--grey-500);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.auth-card[b-yazw0vki90]  .auth-or::before,
.auth-card[b-yazw0vki90]  .auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--grey-200);
}

.auth-card[b-yazw0vki90]  .auth-disclaim {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-top: 1.8rem;
    text-align: center;
    font-family: var(--font-secondary);
    line-height: 1.55;
}

.auth-card[b-yazw0vki90]  .auth-disclaim a {
    color: var(--brand-blue);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 500;
}

.auth-card[b-yazw0vki90]  .signup-link {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--grey-200);
    text-align: center;
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}

.auth-card[b-yazw0vki90]  .signup-link a {
    color: var(--brand-blue);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.auth-card[b-yazw0vki90]  .signup-link a:hover {
    text-decoration: underline;
}

/* Inline SVG arrow (Heroicons "arrow-right" path). Replaces the →
   text glyph which renders thin in Poppins and looked weak next to the
   bold link copy. 1.1em keeps it proportional to the link's font. */
.auth-card[b-yazw0vki90]  .signup-link a .link-arrow {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.auth-card[b-yazw0vki90]  .signup-link a:hover .link-arrow {
    transform: translateX(2px);
}

@media (max-width: 720px) {
    .auth-card[b-yazw0vki90]  .auth-cols {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
}

@media (max-width: 600px) {
    .auth-card[b-yazw0vki90] {
        padding: 2.6rem 2rem;
    }
}
/* /Components/AuthFlow/SelectedAgentSummary.razor.rz.scp.css */
/* Based on AgentArena.Documentation/Mock/LeaderboardPivot/login.html
   .selected-agent + sa-* helpers. Gradient background + blue border +
   12px radius keep the mock's emphasis treatment for the chosen agent.
   The internal layout (avatar-beside-name header, full-width phone block,
   number on its own line) deliberately diverges from the mock so the
   masked number never wraps in the confined mobile column. */

.selected-agent[b-71e3i6z6kz] {
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.4rem;
    margin: 1.4rem 0 0.4rem;
    background: linear-gradient(180deg, var(--brand-blue-50) 0%, #fff 100%);
    border: 1.5px solid var(--brand-blue-200);
    border-radius: 12px;
}

/* Avatar sits beside the name in the header so the phone block below
   can use the card's full width. The mock (login.html) kept the avatar
   in a left gutter spanning the whole card, which on a phone squeezed
   the masked number onto two lines — this intentionally diverges. */
.sa-head[b-71e3i6z6kz] {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.2rem;
    align-items: center;
}

.sa-id[b-71e3i6z6kz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sa-av[b-71e3i6z6kz] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
}

.sa-name[b-71e3i6z6kz] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sa-sub[b-71e3i6z6kz] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-top: 0.15rem;
}

/* Full-width phone block under the header. Label + Verified pill share
   the top line; the masked number drops to its own line below so it
   never wraps mid-number in the confined mobile column. */
.sa-phone[b-71e3i6z6kz] {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--brand-blue-200);
}

.sa-phone-top[b-71e3i6z6kz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sa-phone-label[b-71e3i6z6kz] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-blue);
}

.sa-phone-mask[b-71e3i6z6kz] {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
    white-space: nowrap;
}

.sa-phone-pill[b-71e3i6z6kz] {
    margin-left: auto;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(46, 133, 64, 0.12);
    color: var(--success-green);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.sa-no-phone[b-71e3i6z6kz] {
    margin-top: 1rem;
    font-size: 1.3rem;
    color: var(--error-red);
}

.sa-no-phone a[b-71e3i6z6kz],
.sa-phone-hint a[b-71e3i6z6kz] {
    color: inherit;
    text-decoration: underline;
}

/* "Is this the wrong number?" hint sits directly under the masked-phone
   row so users who spot an outdated mobile have an obvious next step.
   Subtler styling than .sa-no-phone -- this is informational, not an
   error state. */
.sa-phone-hint[b-71e3i6z6kz] {
    margin: 0.4rem 0 0;
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.sa-ineligible[b-71e3i6z6kz] {
    margin-top: 1rem;
    font-size: 1.3rem;
    color: var(--error-red);
}
/* /Components/Badges/BadgePreview.razor.rz.scp.css */
/* Verbatim copy of badge-preview rules from
   AgentArena.Documentation/Mock/LeaderboardPivot/dashboard.html so
   every place that renders a badge (active dashboard + register page +
   future re-subscribe page) draws the same pixel-for-pixel artwork.

   The radial overlay + linear base gradient are factored into custom
   properties so the square + story cards CANNOT drift apart -- both
   reference the same source of truth. */

.badge-preview[b-gsc0ofnqj4] {
    --badge-radial-overlay: radial-gradient(
        ellipse 80% 60% at 50% 25%,
        rgba(102, 163, 255, 0.22) 0%,
        transparent 60%
    );
    --badge-blue-fill: linear-gradient(
        180deg,
        var(--brand-blue) 0%,
        #001a4d 100%
    );

    display: flex;
}

/* ===== Square 1080x1080 ===== */
.badge-preview.sq[b-gsc0ofnqj4] {
    background: var(--badge-radial-overlay), var(--badge-blue-fill);
    color: #fff;
    border-radius: 4px;
    padding: 14px 14px 10px;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: var(--font-primary);
    box-shadow: 0 8px 20px rgba(0, 30, 80, 0.35);
}

.badge-preview.sq[b-gsc0ofnqj4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #99c2ff, #3385ff);
}

.bsq-logo[b-gsc0ofnqj4] {
    display: block;
    height: 16px;
    margin-bottom: 8px;
    align-self: flex-start;
    filter: brightness(0) invert(1);
}

.bsq-big[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 58px;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #fff;
}

/* Option A field caption -- "of N Active Realtors(R)" tucked under the rank. */
.bsq-of[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 7px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--brand-blue-200);
    margin-top: 2px;
}

.bsq-nm[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
    color: #fff;
}

.bsq-bk[b-gsc0ofnqj4] {
    /* Match the story card's brokerage style -- primary font, regular
       weight, no italics. The italic-serif variant didn't read as
       intentional next to the rest of the card's geometric typography. */
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 8px;
    color: var(--brand-blue-200);
    margin-top: 2px;
}

.bsq-pill[b-gsc0ofnqj4] {
    /* Match the Story preview's pill -- transparent fill with a thin
       white border. The white-fill variant read as a foreign "selected"
       chip against the blue card and didn't match the vertical/story
       artwork. */
    background: transparent;
    color: #fff;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 12px;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 10px;
    margin-top: 9px;
}

.bsq-vol-chip[b-gsc0ofnqj4] {
    /* display:flex + align-self:center guarantees horizontal centering
       inside the column-direction parent. Pill chrome (bg/border/label
       colour) mirrors .bvc-vol-chip so the Square card matches the Reel /
       Story card -- the previous translucent-white fill read too dark
       against the blue gradient. */
    margin-top: 7px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 4px;
    padding: 4px 8px 3px;
    display: flex;
    align-self: center;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.bsq-vol-lbl[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 6px;
    letter-spacing: 0.18em;
    color: var(--brand-blue-200);
    line-height: 1;
}

.bsq-vol-val[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 10px;
    color: #fff;
    line-height: 1;
}

.bsq-foot[b-gsc0ofnqj4] {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 6.5px;
    opacity: 0.75;
}

/* ===== Reel / Story 9:16 ===== */
.badge-preview.story[b-gsc0ofnqj4] {
    background: var(--badge-radial-overlay), var(--badge-blue-fill);
    color: #fff;
    border-radius: 4px;
    padding: 13px 13px 10px;
    width: 200px;
    aspect-ratio: 9 / 16;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    font-family: var(--font-primary);
    box-shadow: 0 8px 20px rgba(0, 30, 80, 0.35);
}

.badge-preview.story[b-gsc0ofnqj4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #99c2ff, #3385ff);
}

.bvc-hero[b-gsc0ofnqj4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bvc-logo[b-gsc0ofnqj4] {
    display: block;
    height: 22px;
    width: auto;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
}

.bvc-big[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 78px;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #fff;
    margin-bottom: 14px;
}

/* Option A field caption -- "of N Active Realtors(R)" tucked under the rank. */
.bvc-of[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    color: var(--brand-blue-200);
    margin-top: -8px;
    margin-bottom: 12px;
}

.bvc-nm[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 2px;
}

.bvc-bk[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 8px;
    color: var(--brand-blue-200);
}

.bvc-div[b-gsc0ofnqj4] {
    width: 24px;
    height: 1.5px;
    background: rgba(204, 224, 255, 0.8);
    margin: 10px auto;
}

.bvc-pill[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #fff;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 10px;
    margin-bottom: 6px;
}

.bvc-sub[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 6px;
    color: var(--brand-blue-200);
    margin-bottom: 10px;
    max-width: 140px;
}

.bvc-vol-chip[b-gsc0ofnqj4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 3px;
}

.bvc-vol-lbl[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 7px;
    letter-spacing: 0.18em;
    color: var(--brand-blue-200);
}

.bvc-vol-val[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 10px;
    color: #fff;
}

.bvc-foot[b-gsc0ofnqj4] {
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 7px;
    color: #fff;
}

/* ===== PDF Report ===== */
.badge-preview.pdf[b-gsc0ofnqj4] {
    background: #fff;
    border-radius: 2px;
    padding: 14px 14px 10px;
    width: 100%;
    aspect-ratio: 8.5 / 11;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    font-family: var(--font-secondary);
    box-shadow: 0 8px 20px rgba(0, 30, 80, 0.18);
}

.badge-preview.pdf[b-gsc0ofnqj4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-blue);
}

.bpdf-logo[b-gsc0ofnqj4] {
    display: block;
    width: 90px;
    height: auto;
    margin: 4px 0 14px;
}

.bpdf-eyebrow[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 5.5px;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.bpdf-h[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.05;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.bpdf-area[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.05;
    color: var(--brand-blue);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

.bpdf-area span[b-gsc0ofnqj4] {
    color: var(--brand-blue);
    font-size: 28px;
    letter-spacing: -0.02em;
}

.bpdf-sub[b-gsc0ofnqj4] {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 7px;
    line-height: 1.5;
    color: var(--text-primary);
    margin-top: 2px;
}

.bpdf-foot[b-gsc0ofnqj4] {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--grey-200);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 6.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.bpdf-lk[b-gsc0ofnqj4] {
    color: var(--brand-blue);
}
/* /Components/Dashboard/BadgeCard.razor.rz.scp.css */
/* Verbatim copy of badge-card / badge-preview rules from
   AgentArena.Documentation/Mock/LeaderboardPivot/dashboard.html so the
   live BadgeCard renders pixel-for-pixel against the mock.
   Only deviation: badge-card padding-top is reduced from 2rem to 1.4rem
   so the eyebrow lines up with the leaderboard column header row
   (.lb-head padding-top is 1.4rem) -- user feedback requires the two
   tops to sit on the same Y. */

.badge-card[b-7q8o09ppeh] {
    background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 60%, #3377cc 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.4rem 2rem 2rem;
    position: relative;
    overflow: hidden;
}

.badge-card[b-7q8o09ppeh]::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.badge-eyebrow[b-7q8o09ppeh] {
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.badge-eyebrow .dot[b-7q8o09ppeh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #66ff99;
    box-shadow: 0 0 0 4px rgba(102, 255, 153, 0.2);
}

.badge-tabs[b-7q8o09ppeh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 1.4rem;
    position: relative;
    z-index: 1;
}

.badge-tab[b-7q8o09ppeh] {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.7rem 0.3rem;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.04em;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.badge-tab:hover[b-7q8o09ppeh] {
    background: rgba(255, 255, 255, 0.2);
}

.badge-tab small[b-7q8o09ppeh] {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.8;
    letter-spacing: 0.06em;
}

.badge-tab.on[b-7q8o09ppeh] {
    background: #fff;
    color: var(--brand-blue-dark);
    border-color: #fff;
}

.badge-previews[b-7q8o09ppeh] {
    position: relative;
    max-width: 240px;
    margin: 0 auto 1.4rem;
    z-index: 1;
}

/* badge-preview / bsq-* / bvc-* / bpdf-* classes now live in
   Components/Badges/BadgePreview.razor.css. <BadgePreview> is the single
   source of truth for badge artwork everywhere it renders. */

/* Option A field-line toggle. Custom switch (no Bootstrap), styled light to
   read on the blue card -- track + label mirror the tab/button chrome. */
.badge-fieldtoggle[b-7q8o09ppeh] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: 240px;
    margin: 0 auto 1.2rem;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
}

.bf-input[b-7q8o09ppeh] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.bf-track[b-7q8o09ppeh] {
    flex-shrink: 0;
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background 0.15s ease;
}

.bf-thumb[b-7q8o09ppeh] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 20, 60, 0.4);
    transition: transform 0.15s ease;
}

.bf-input:checked + .bf-track[b-7q8o09ppeh] {
    background: #fff;
    border-color: #fff;
}

.bf-input:checked + .bf-track .bf-thumb[b-7q8o09ppeh] {
    transform: translateX(16px);
    background: var(--brand-blue);
}

.bf-input:focus-visible + .bf-track[b-7q8o09ppeh] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.bf-text[b-7q8o09ppeh] {
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Download buttons */
.badge-download[b-7q8o09ppeh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    background: #fff;
    color: var(--brand-blue-dark);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.3rem;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.badge-download:hover[b-7q8o09ppeh] {
    background: var(--surface-light);
}

.badge-download .arrow[b-7q8o09ppeh] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Mock dashboard.html .badge-download-all -- transparent button with
   white border that triggers all three format downloads in one click. */
.badge-download-all[b-7q8o09ppeh] {
    appearance: none;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 1.2rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.2rem;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.badge-download-all:hover[b-7q8o09ppeh] {
    background: rgba(255, 255, 255, 0.12);
}

.badge-download-all .arrow[b-7q8o09ppeh] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Admin view-as preview: the badge assets are signed-in-user scoped, so the
   download links are inert (the on-screen preview itself stays faithful). */
.badge-download.is-disabled[b-7q8o09ppeh],
.badge-download-all.is-disabled[b-7q8o09ppeh] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* /Components/Dashboard/MarketIntelChart.razor.rz.scp.css */
.mi-shell[b-xsw4ruxq0h] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 2rem 2.4rem 2.4rem;
    box-shadow: var(--shadow-sm);
}

/* ---- tab strip (Total / per-type / Comparison) ---- */
/* Mobile-first: a single horizontally scrollable row. The active tab is centered
   via JS on selection so it is never clipped at an edge on a phone. */
.mi-tabs[b-xsw4ruxq0h] {
    display: flex;
    gap: 0.2rem;
    overflow-x: auto;
    /* Pin the cross axis: with overflow-x:auto and overflow-y:visible the spec
       computes overflow-y to auto, so the strip scrolls on Y as well as X on
       mobile. touch-action keeps touch panning horizontal-only. */
    overflow-y: hidden;
    touch-action: pan-x;
    border-bottom: 1px solid var(--grey-200);
    margin-bottom: 1.4rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mi-tabs[b-xsw4ruxq0h]::-webkit-scrollbar {
    display: none;
}

.mi-tab[b-xsw4ruxq0h] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0.9rem 1.1rem;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mi-tab:hover[b-xsw4ruxq0h] {
    color: var(--brand-blue);
}

.mi-tab.on[b-xsw4ruxq0h] {
    color: var(--brand-blue);
    font-weight: 600;
    border-bottom-color: var(--brand-blue);
}

.mi-tab:focus-visible[b-xsw4ruxq0h] {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.mi-chart-head[b-xsw4ruxq0h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.mi-chart-h[b-xsw4ruxq0h] {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mi-chart-meta[b-xsw4ruxq0h] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-top: 0.3rem;
}

.mi-chart-toggle[b-xsw4ruxq0h] {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.mi-chart-toggle .t[b-xsw4ruxq0h] {
    background: transparent;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.9rem;
    font-size: 1.2rem;
    cursor: pointer;
    font-family: var(--font-primary);
    color: var(--text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}

.mi-chart-toggle .t:hover:not(:disabled)[b-xsw4ruxq0h] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.mi-chart-toggle .t.on[b-xsw4ruxq0h] {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
    font-weight: 600;
}

.mi-chart-toggle .t:disabled[b-xsw4ruxq0h] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- controls row (compare checkbox OR comparison series chips) ---- */
.mi-ctrl[b-xsw4ruxq0h] {
    min-height: 3.2rem;
    margin-bottom: 1.2rem;
}

.mi-compare[b-xsw4ruxq0h] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.mi-compare input[type="checkbox"][b-xsw4ruxq0h] {
    width: 14px;
    height: 14px;
    accent-color: var(--brand-blue);
}

.mi-series[b-xsw4ruxq0h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.mi-series-lbl[b-xsw4ruxq0h] {
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-right: 0.2rem;
}

.mi-chip[b-xsw4ruxq0h] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--grey-300);
    background: #fff;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-primary);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mi-chip .mi-dot[b-xsw4ruxq0h] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.mi-chip.on[b-xsw4ruxq0h] {
    border-color: var(--brand-blue);
    color: var(--text-primary);
    font-weight: 600;
    background: var(--brand-blue-50);
}

.mi-chip.off[b-xsw4ruxq0h] {
    opacity: 0.7;
}

.mi-chip.off .mi-dot[b-xsw4ruxq0h] {
    background: var(--grey-500) !important;
}

.mi-chip:focus-visible[b-xsw4ruxq0h] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.mi-canvas-wrap[b-xsw4ruxq0h] {
    position: relative;
    height: 280px;
}

.mi-chart-empty[b-xsw4ruxq0h] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.6rem;
    color: var(--text-secondary);
    font-size: 1.4rem;
    background: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
    .mi-shell[b-xsw4ruxq0h] {
        padding: 1.6rem;
    }
    .mi-canvas-wrap[b-xsw4ruxq0h] {
        height: 230px;
    }
}
/* /Components/Dashboard/MyRankingsCard.razor.rz.scp.css */
/* === My Rankings rail widget === */
/* .rail-card / .rail-eyebrow are the shared dashboard-rail frame. CSS isolation
   scopes them per component, so this card declares its own copy (verbatim from
   ScorecardCard.razor.css); otherwise the widget renders with no card chrome. */
.rail-card[b-kws58ys5jo] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.6rem 1.8rem;
    box-shadow: var(--shadow-sm);
}

.rail-eyebrow[b-kws58ys5jo] {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    margin-bottom: 1.2rem;
}

.mr-blurb[b-kws58ys5jo] {
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}

.mr-status[b-kws58ys5jo] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

.mr-pill[b-kws58ys5jo],
.mr-pill-warn[b-kws58ys5jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
}

.mr-pill[b-kws58ys5jo] {
    background: var(--brand-blue-50);
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue-200);
}

.mr-pill[b-kws58ys5jo]::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-blue);
}

.mr-pill-warn[b-kws58ys5jo] {
    background: rgba(212, 168, 90, 0.14);
    color: #8a6a1e;
    border: 1px solid rgba(212, 168, 90, 0.45);
}

.mr-pill-warn[b-kws58ys5jo]::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
}

.mr-cta[b-kws58ys5jo] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 1.4rem;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.3rem;
    text-decoration: none;
}

.mr-cta:hover[b-kws58ys5jo] {
    background: var(--brand-blue-dark);
}
/* /Components/Dashboard/PlanSummaryCard.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/dashboard.html
   .plan-card block verbatim: blue-gradient rail card with a soft radial
   highlight, an uppercase "Your plan" eyebrow, h, price line, a two-row
   tier comparison list (.you modifier marks the user's current tier),
   and a translucent-white CTA. */
.plan-card[b-a36yz8cgbv] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: #fff;
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.plan-card[b-a36yz8cgbv]::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.plan-card .l[b-a36yz8cgbv] {
    font-size: 1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.75;
    font-weight: 600;
    margin-bottom: 0.6rem;
    position: relative;
    z-index: 1;
}

.plan-card .h[b-a36yz8cgbv] {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    position: relative;
    z-index: 1;
}

.plan-card .price[b-a36yz8cgbv] {
    font-size: 1.2rem;
    opacity: 0.85;
    font-family: var(--font-secondary);
    margin-bottom: 1.6rem;
    position: relative;
    z-index: 1;
}

.plan-tier-list[b-a36yz8cgbv] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
    position: relative;
    z-index: 1;
}

.plan-tier-row[b-a36yz8cgbv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    font-family: var(--font-secondary);
    font-size: 1.2rem;
}

.plan-tier-row.you[b-a36yz8cgbv] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
}

.plan-tier-row .label strong[b-a36yz8cgbv] {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.plan-tier-row .pill[b-a36yz8cgbv] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.plan-tier-row.you .pill[b-a36yz8cgbv] {
    background: var(--success-green);
    color: #fff;
}

.plan-card-cta[b-a36yz8cgbv] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 1.4rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.3rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background 0.15s ease;
}

.plan-card-cta:hover:not(:disabled)[b-a36yz8cgbv] {
    background: rgba(255, 255, 255, 0.28);
}

.plan-card-cta:disabled[b-a36yz8cgbv] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Components/Dashboard/ScorecardCard.razor.rz.scp.css */
.rail-card[b-y2upus2ddr] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.6rem 1.8rem;
    box-shadow: var(--shadow-sm);
}

.rail-eyebrow[b-y2upus2ddr] {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    margin-bottom: 1.2rem;
}

.rail-profile[b-y2upus2ddr] {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    margin-bottom: 1.6rem;
}

.rail-av-wrap[b-y2upus2ddr] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.rail-av[b-y2upus2ddr] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #3377cc 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.6rem;
    overflow: hidden;
}

.rail-profile .nm[b-y2upus2ddr] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.rail-profile .br[b-y2upus2ddr] {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.rail-stats[b-y2upus2ddr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.2rem;
}

.rail-stat .l[b-y2upus2ddr] {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.rail-stat .v[b-y2upus2ddr] {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--brand-blue);
    letter-spacing: -0.01em;
    font-feature-settings: "tnum";
}

.stat-arrow[b-y2upus2ddr] {
    display: inline-block;
    font-size: 1.1rem;
    margin-right: 0.3rem;
}

.stat-arrow.up[b-y2upus2ddr] {
    color: var(--success-green);
}

.stat-arrow.down[b-y2upus2ddr] {
    color: var(--error-red);
}
/* /Components/Forms/FormField.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login.html
   .form-field + .form-label + .form-hint helpers verbatim. Label is NOT
   uppercase in the mock — normal sentence-case 1.1rem with mild letter-
   spacing. The pre-fix Client version uppercased + tightened spacing,
   which gave fields a "system console" look that doesn't match. */

.form-field[b-9d1jqm3wic] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.4rem;
}

.form-label[b-9d1jqm3wic] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--grey-700);
    margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
}

.form-hint[b-9d1jqm3wic] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-family: var(--font-secondary);
}

.form-error[b-9d1jqm3wic] {
    font-size: 1.25rem;
    color: var(--error-red);
    font-weight: 500;
    margin-top: 0.5rem;
}
/* /Components/Forms/OtpInput.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login-verify.html
   .otp-row + .otp-box verbatim. 2px border-grey-300, 10px radius, 700 weight
   brand-blue digit, brand-blue-50 fill on .filled, pulse animation on .cursor. */

/* Flex layout (was: grid-template-columns: repeat(6, 1fr)) so the row
   sizes itself to whatever Length the consumer passes -- 5 boxes no
   longer leave a phantom 6th column shifting the row off-centre. */
.otp-row[b-10d4xsi22p] {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.otp-box[b-10d4xsi22p] {
    aspect-ratio: 1;
    flex: 1 1 0;
    min-width: 0;
    border: 2px solid var(--grey-300);
    border-radius: 10px;
    background: #fff;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--brand-blue);
    font-feature-settings: "tnum";
    transition: all 0.15s ease;
}

.otp-box:focus[b-10d4xsi22p] {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.1);
}

/* Filled cell (value already entered) — soft blue fill, blue border. */
.otp-box:not(:placeholder-shown):not(:focus)[b-10d4xsi22p] {
    border-color: var(--brand-blue);
    background: var(--brand-blue-50);
}

@media (max-width: 480px) {
    .otp-box[b-10d4xsi22p] {
        font-size: 1.8rem;
    }

    .otp-row[b-10d4xsi22p] {
        gap: 0.5rem;
    }
}
/* /Components/Forms/OtpResend.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login-verify.html
   .otp-resend verbatim. */

.otp-resend[b-u9uxyjunxr] {
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    display: flex;
    justify-content: space-between;
    margin-top: 0.8rem;
    margin-bottom: 1.6rem;
}

.otp-resend a[b-u9uxyjunxr] {
    color: var(--brand-blue);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 500;
}

.otp-resend a:hover[b-u9uxyjunxr] {
    text-decoration: underline;
}
/* /Components/Forms/PassKeyButton.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login.html
   .passkey-btn verbatim. Outline brand-blue border, larger icon, blue text. */

.passkey-btn[b-9f004d2121] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1.3rem;
    background: #fff;
    color: var(--brand-blue);
    border: 1.5px solid var(--brand-blue);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.passkey-btn:hover:not(:disabled)[b-9f004d2121] {
    background: var(--brand-blue-50);
}

.passkey-btn:disabled[b-9f004d2121] {
    opacity: 0.55;
    cursor: not-allowed;
}

.passkey-btn svg[b-9f004d2121] {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
/* /Components/Forms/StepsIndicator.razor.rz.scp.css */
.steps[b-ndagwbt2ic] {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 0 auto 2.4rem;
    max-width: 540px;
}

.step[b-ndagwbt2ic] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
}

.step-num[b-ndagwbt2ic] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grey-200);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 1.3rem;
}

.step.on .step-num[b-ndagwbt2ic] {
    background: var(--brand-blue);
    color: #fff;
}

.step.done .step-num[b-ndagwbt2ic] {
    background: var(--success-green);
    color: #fff;
}

.step-label[b-ndagwbt2ic] {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.step.on .step-label[b-ndagwbt2ic],
.step.done .step-label[b-ndagwbt2ic] {
    color: var(--text-primary);
}

@media (max-width: 480px) {
    .steps[b-ndagwbt2ic] { flex-wrap: wrap; gap: 0.8rem 1.4rem; }
}
/* /Components/Forms/TextField.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login.html
   .form-input verbatim — 1.5px grey-300 border, 10px radius (NOT --radius-md
   which is 8px), 1.55rem font, 500 weight, 1.2rem vertical padding. */

.form-input[b-d46j2zmgzu] {
    width: 100%;
    padding: 1.2rem 1.4rem;
    border: 1.5px solid var(--grey-300);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.55rem;
    font-weight: 500;
    background: #fff;
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.form-input[b-d46j2zmgzu]::placeholder {
    color: var(--grey-500);
}

.form-input:focus[b-d46j2zmgzu] {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.1);
}

.form-input[aria-invalid="true"][b-d46j2zmgzu] {
    border-color: var(--error-red);
}
/* /Components/Layout/GlobalErrorPage.razor.rz.scp.css */
.global-error[b-2yd9snxy8w] {
    max-width: 720px;
    margin: 8rem auto;
    padding: 0 2.4rem;
    text-align: center;
}

.global-error h1[b-2yd9snxy8w] {
    font-family: var(--font-primary);
    font-size: 3.4rem;
    font-weight: 600;
    color: var(--error-red);
    margin-bottom: 1.4rem;
}

.global-error p[b-2yd9snxy8w] {
    color: var(--text-secondary);
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.aa-app[b-16us1v18tb] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.aa-main[b-16us1v18tb] {
    flex: 1 0 auto;
}
/* /Components/Layout/NotFoundContent.razor.rz.scp.css */
.not-found[b-mbgoo5oxs3] {
    max-width: 720px;
    margin: 8rem auto;
    padding: 0 2.4rem;
    text-align: center;
}

.not-found h1[b-mbgoo5oxs3] {
    font-family: var(--font-primary);
    font-size: 4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.4rem;
}

.not-found p[b-mbgoo5oxs3] {
    color: var(--text-secondary);
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}

.not-found a[b-mbgoo5oxs3] {
    color: var(--brand-blue);
    font-weight: 500;
}
/* /Components/Layout/PageLoading.razor.rz.scp.css */
.page-loading[b-r2enq16as3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1.4rem;
    color: var(--text-secondary);
}

.spinner[b-r2enq16as3] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--grey-200);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: spin-b-r2enq16as3 1s linear infinite;
}

.label[b-r2enq16as3] {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 500;
}

@keyframes spin-b-r2enq16as3 {
    to { transform: rotate(360deg); }
}
/* /Components/Layout/PasskeySetupBanner.razor.rz.scp.css */
/* Tokens + rem scale match app.css (html is 62.5%, so 1rem = 10px). */
.passkey-banner[b-x0c1zkdz9y] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 1080px;
    margin: 1.6rem auto 0;
    padding: 1.2rem 1.6rem;
    background: linear-gradient(100deg, var(--brand-blue-50), var(--brand-blue-100));
    border: 1px solid var(--brand-blue-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.passkey-banner-inner[b-x0c1zkdz9y] {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.passkey-banner-icon[b-x0c1zkdz9y] {
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-blue);
}

.passkey-banner-icon svg[b-x0c1zkdz9y] {
    width: 2rem;
    height: 2rem;
    fill: #fff;
}

.passkey-banner-text[b-x0c1zkdz9y] {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: 1.5;
    font-family: var(--font-secondary);
}

.passkey-banner-text strong[b-x0c1zkdz9y] {
    color: var(--brand-blue-dark);
    font-family: var(--font-primary);
    font-weight: 600;
}

.passkey-banner-actions[b-x0c1zkdz9y] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

.passkey-banner-busy[b-x0c1zkdz9y] {
    color: var(--text-secondary);
    font-size: 1.3rem;
}

.passkey-banner-error[b-x0c1zkdz9y] {
    margin: 0;
    color: var(--error-red);
    font-size: 1.25rem;
}

@media (max-width: 640px) {
    .passkey-banner-inner[b-x0c1zkdz9y] {
        flex-wrap: wrap;
    }

    .passkey-banner-actions[b-x0c1zkdz9y] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Layout/PivotFooter.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html .footer
   block verbatim. Background, border-top + flex-centered layout matter for
   visual continuity with the white .faq-section above. */

.aa-footer[b-nm9t1mt89j] {
    background: #fff;
    padding: 2rem;
    min-height: 85px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: 1px solid var(--grey-200);
}

.aa-footer small[b-nm9t1mt89j] {
    font-size: 1.2rem;
    color: var(--text-secondary);
}
/* /Components/Layout/PivotNav.razor.rz.scp.css */
.aa-nav[b-c6iw28e71m] {
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.aa-nav-inner[b-c6iw28e71m] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2.4rem;
    min-height: 85px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.aa-nav-logo[b-c6iw28e71m] {
    display: block;
    cursor: pointer;
}

.aa-nav-logo img[b-c6iw28e71m] {
    height: 60px;
    width: auto;
    display: block;
}

.aa-nav-social[b-c6iw28e71m] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.aa-nav-buttons[b-c6iw28e71m] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: auto;
}

.aa-nav-burger[b-c6iw28e71m] {
    display: none;
}

.aa-icon-btn[b-c6iw28e71m] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark-grey);
    border-radius: 50%;
    text-decoration: none;
    padding: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.aa-icon-btn svg[b-c6iw28e71m] {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.aa-icon-btn:hover[b-c6iw28e71m] {
    background: var(--grey-200);
    color: var(--brand-blue);
}

@media (max-width: 768px) {
    .aa-nav-inner[b-c6iw28e71m] {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 1rem 1.5rem;
        gap: 1rem;
    }

    .aa-nav-logo[b-c6iw28e71m] { grid-row: 1; grid-column: 1; justify-self: start; }
    .aa-nav-logo img[b-c6iw28e71m] { height: 50px; }

    .aa-nav-burger[b-c6iw28e71m] {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        display: flex;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }

    .aa-nav-burger span[b-c6iw28e71m] {
        width: 22px;
        height: 2px;
        background: var(--brand-dark-grey);
        border-radius: 1px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .aa-nav-inner.menu-open .aa-nav-burger span:nth-child(1)[b-c6iw28e71m] {
        transform: translateY(7px) rotate(45deg);
    }

    .aa-nav-inner.menu-open .aa-nav-burger span:nth-child(2)[b-c6iw28e71m] { opacity: 0; }

    .aa-nav-inner.menu-open .aa-nav-burger span:nth-child(3)[b-c6iw28e71m] {
        transform: translateY(-7px) rotate(-45deg);
    }

    .aa-nav-social[b-c6iw28e71m],
    .aa-nav-buttons[b-c6iw28e71m] { display: none; }

    .aa-nav-inner.menu-open .aa-nav-social[b-c6iw28e71m] {
        display: flex;
        grid-row: 2;
        grid-column: 1 / 3;
        justify-self: center;
        padding-top: 1.4rem;
        border-top: 1px solid var(--grey-200);
        width: 100%;
        justify-content: center;
        gap: 1.6rem;
        margin-left: 0;
    }

    .aa-nav-inner.menu-open .aa-nav-buttons[b-c6iw28e71m] {
        display: flex;
        grid-row: 3;
        grid-column: 1 / 3;
        justify-self: center;
        padding-bottom: 0.6rem;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
        margin-left: 0;
    }

    .aa-icon-btn[b-c6iw28e71m] { width: 36px; height: 36px; }
}
/* /Components/Leaderboard/FilterChips.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html .filters
   block verbatim. Note: the active state class is .filter-chip.on (matching
   the mock), not .filter-chip-active — keep these in sync if either side
   changes. */

.filter-chips[b-zo7t9fqh08] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.filter-chip[b-zo7t9fqh08] {
    padding: 0.6rem 1.2rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip:hover[b-zo7t9fqh08] {
    border-color: var(--brand-blue-200);
    color: var(--brand-blue);
}

.filter-chip.on[b-zo7t9fqh08] {
    background: var(--brand-blue-50);
    border-color: var(--brand-blue-200);
    color: var(--brand-blue-dark);
    font-weight: 600;
}
/* /Components/Leaderboard/FullListCta.razor.rz.scp.css */
/* Full-list purchase CTA — ported from Mock/LeaderboardPivot/index.html (.fulllist-*). */
.fulllist-section[b-c1lgeton7q] {
    background: var(--surface-light);
    padding: 6rem 0;
}

.fulllist-inner[b-c1lgeton7q] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2.4rem;
}

.fulllist-card[b-c1lgeton7q] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    color: #fff;
    padding: 4rem 4rem 3.2rem;
    text-align: center;
}

.fulllist-eyebrow[b-c1lgeton7q] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.4rem;
}

.fulllist-title[b-c1lgeton7q] {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 auto 1.2rem;
    max-width: 640px;
}

.fulllist-title .count[b-c1lgeton7q] {
    color: #fff;
    font-weight: 700;
}

.fulllist-sub[b-c1lgeton7q] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-secondary);
    max-width: 600px;
    margin: 0 auto 2.6rem;
    line-height: 1.55;
}

.fulllist-sub strong[b-c1lgeton7q] {
    color: #fff;
    font-family: var(--font-primary);
    font-weight: 600;
}

.fulllist-formats[b-c1lgeton7q] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.8rem;
}

.fulllist-chip[b-c1lgeton7q] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.3rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.fulllist-chip svg[b-c1lgeton7q] {
    width: 17px;
    height: 17px;
    fill: #fff;
}

.fulllist-buy[b-c1lgeton7q] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.fulllist-price[b-c1lgeton7q] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.8rem;
}

.fulllist-price .per[b-c1lgeton7q] {
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.fulllist-btn[b-c1lgeton7q] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.3rem 3rem;
    background: #fff;
    color: var(--brand-blue);
    border: none;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.fulllist-btn:hover:not(:disabled)[b-c1lgeton7q] {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.fulllist-btn:disabled[b-c1lgeton7q] {
    opacity: 0.7;
    cursor: default;
}

.fulllist-btn svg[b-c1lgeton7q] {
    width: 20px;
    height: 20px;
    fill: var(--brand-blue);
}

.fulllist-error[b-c1lgeton7q] {
    margin-top: 1.4rem;
    font-size: 1.3rem;
    color: #fff;
    background: rgba(216, 57, 51, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    padding: 0.8rem 1.2rem;
    display: inline-block;
}

.fulllist-fine[b-c1lgeton7q] {
    margin-top: 1.8rem;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .fulllist-section[b-c1lgeton7q] {
        padding: 4rem 0;
    }

    .fulllist-card[b-c1lgeton7q] {
        padding: 3rem 2rem 2.6rem;
        border-radius: 12px;
    }

    .fulllist-title[b-c1lgeton7q] {
        font-size: 2.3rem;
    }

    .fulllist-sub[b-c1lgeton7q] {
        font-size: 1.35rem;
    }
}
/* /Components/Leaderboard/Leaderboard.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html .lb-card
   + .lb-head + .lb-loadmore styles verbatim. */

.lb[b-1gm1f4ovxk] {
    /* No top padding -- the .lb-card needs to sit flush with the dash-grid
       row top so its rounded corners align with the badge-card on the
       right. Bottom padding kept for visual breathing room before page
       end on standalone /leaderboard. */
    padding: 0 0 4rem;
}

.lb-state[b-1gm1f4ovxk] {
    text-align: center;
    color: var(--text-secondary);
    padding: 4rem 2rem;
    font-size: 1.5rem;
}

.lb-card[b-1gm1f4ovxk] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

/* Dim the card slightly while a new scope is loading so the user sees a
   visual cue that fresh data is arriving without the leaderboard
   collapsing to a one-line "loading..." state. */
.lb-card-loading[b-1gm1f4ovxk] {
    opacity: 0.55;
    pointer-events: none;
}

.lb-head[b-1gm1f4ovxk] {
    display: grid;
    grid-template-columns: 110px 2.4fr 1.2fr 0.9fr 140px;
    gap: 1.2rem;
    /* Top padding matches BadgeCard padding-top (1.4rem) so the column
       header row aligns on the same Y as the badge eyebrow. */
    padding: 1.4rem 1.8rem;
    background: var(--surface-light);
    border-bottom: 1px solid var(--grey-200);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.lb-head .num-right[b-1gm1f4ovxk] {
    text-align: right;
}

.lb-head .num-center[b-1gm1f4ovxk] {
    text-align: center;
}

.lb-loadmore[b-1gm1f4ovxk] {
    display: block;
    width: 100%;
    padding: 1.6rem;
    background: var(--surface-light);
    border: none;
    border-top: 1px solid var(--grey-200);
    color: var(--brand-blue);
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.lb-loadmore:hover[b-1gm1f4ovxk] {
    background: var(--brand-blue-50);
}

@media (max-width: 880px) {
    .lb-head[b-1gm1f4ovxk] {
        grid-template-columns: 50px 1fr auto;
        gap: 0.8rem;
        padding: 1.4rem 1.2rem;
    }

    .lb-head .h-vol[b-1gm1f4ovxk],
    .lb-head .h-tx[b-1gm1f4ovxk] {
        display: none;
    }
}

/* Match LeaderboardRow.razor.css: phone landscape restores the Volume column,
   so the header label must reappear and the header grid must regain its column. */
@media (max-width: 880px) and (orientation: landscape) {
    .lb-head[b-1gm1f4ovxk] {
        grid-template-columns: 50px 1fr 1.2fr auto;
    }

    .lb-head .h-vol[b-1gm1f4ovxk] {
        display: block;
    }
}
/* /Components/Leaderboard/LeaderboardHead.razor.rz.scp.css */
.lb-head[b-puks5wusg0] {
    padding: 3rem 0 2rem;
    text-align: center;
}

.lb-title[b-puks5wusg0] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 3.2rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 1rem 0 0.6rem;
}

.lb-snapshot[b-puks5wusg0] {
    color: var(--text-secondary);
    font-size: 1.3rem;
    font-style: italic;
    font-family: var(--font-secondary);
}
/* /Components/Leaderboard/LeaderboardPills.razor.rz.scp.css */
/* ControlBand Option 6 "Hero scope-rail echo" sales-type rail, ported verbatim
   from Mock/LeaderboardControlBand/index.html (.o6-rail .. .o6-seg-flag). An
   elevated rail (gradient white -> surface, soft shadow); the active segment is
   lifted on white with a gold edge + "Current" badge, soon segments stay calm
   with a lock glyph. The mock's @container (min-width:720px) becomes a viewport
   @media query (full-width strip, not a fixed-width card). */

.lb-pills[b-qbnjrgz9ji] {
    margin: 0 0 1.8rem;
}

.o6-rail[b-qbnjrgz9ji] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--grey-200);
    border-radius: 1.4rem;
    background: linear-gradient(180deg, #ffffff, var(--surface-light));
    box-shadow: var(--shadow-sm);
}

.o6-seg[b-qbnjrgz9ji] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.3rem;
    border-radius: 1rem;
    overflow: hidden;
}

.o6-seg-label[b-qbnjrgz9ji] {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.o6-seg-active[b-qbnjrgz9ji] {
    background: #fff;
    border: 1px solid var(--brand-blue-200);
    box-shadow: var(--shadow-md);
}
.o6-seg-active[b-qbnjrgz9ji]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.4rem;
    background: linear-gradient(180deg, var(--gold), #c2914a);
}
.o6-seg-active .o6-seg-label[b-qbnjrgz9ji] {
    font-weight: 600;
    color: var(--brand-blue);
}

.o6-seg-now[b-qbnjrgz9ji] {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-blue-dark);
    background: var(--brand-blue-100);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}

.o6-seg-soon .o6-seg-label[b-qbnjrgz9ji] {
    color: var(--grey-500);
}

.o6-seg-flag[b-qbnjrgz9ji] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-500);
    white-space: nowrap;
}
.o6-seg-flag svg[b-qbnjrgz9ji] {
    display: block;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
}

@media (min-width: 720px) {
    .o6-rail[b-qbnjrgz9ji] {
        flex-direction: row;
        gap: 0.6rem;
        padding: 0.6rem;
        border-radius: 1.6rem;
    }
    .o6-seg[b-qbnjrgz9ji] {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.55rem;
        padding: 1.1rem 1.1rem 1rem;
        min-height: 5.6rem;
    }
    .o6-seg-active[b-qbnjrgz9ji]::before {
        left: 1.4rem;
        right: 1.4rem;
        top: 0;
        bottom: auto;
        width: auto;
        height: 0.3rem;
        border-radius: 0 0 0.3rem 0.3rem;
        background: linear-gradient(90deg, var(--gold), #c2914a);
    }
    .o6-seg-label[b-qbnjrgz9ji] {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .o6-seg[b-qbnjrgz9ji] {
        transition: none !important;
    }
}
/* /Components/Leaderboard/LeaderboardRow.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html .lb-row
   styles verbatim. Any structural change here needs an equivalent edit there
   first — the mock is the source of truth for the public leaderboard's
   visual contract. */

.lb-row-wrap[b-barhg626ud] {
    border-bottom: 1px solid var(--grey-200);
}

.lb-row-wrap:last-of-type[b-barhg626ud] {
    border-bottom: none;
}

.lb-row[b-barhg626ud] {
    display: grid;
    grid-template-columns: 110px 2.4fr 1.2fr 0.9fr 140px;
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    align-items: center;
    font-size: 1.4rem;
    transition: background 0.15s ease;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.lb-row:focus[b-barhg626ud],
.lb-row:focus-visible[b-barhg626ud] {
    outline: none;
}

.lb-row[b-barhg626ud]::-webkit-details-marker,
.lb-row[b-barhg626ud]::marker {
    display: none;
}

.lb-row:hover[b-barhg626ud] {
    background: var(--surface-light);
}

.lb-row-wrap[open] > .lb-row[b-barhg626ud] {
    background: var(--brand-blue-50);
    border-bottom: 1px dashed var(--brand-blue-200);
}

.lb-pos[b-barhg626ud] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-blue);
    font-feature-settings: "tnum";
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-agent[b-barhg626ud] {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 0;
}

.lb-av-wrap[b-barhg626ud] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.lb-av[b-barhg626ud] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #3377cc 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.4rem;
    overflow: hidden;
}

.lb-av svg[b-barhg626ud],
.lb-av img[b-barhg626ud] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* The photo is rendered as <img class="lb-av"> -- the class is on the img itself,
   not a child -- so the rule above never reaches it and the browser stretches the
   photo to the circle. Crop-to-fill it here so the avatar keeps the photo's aspect
   ratio. (The initials fallback is a <div class="lb-av"> and is unaffected.) */
img.lb-av[b-barhg626ud] {
    display: block;
    object-fit: cover;
}

.lb-name-block[b-barhg626ud] {
    min-width: 0;
}

.lb-name-block .nm[b-barhg626ud] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lb-name-block .brokerage[b-barhg626ud] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.lb-vol[b-barhg626ud] {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: right;
    font-feature-settings: "tnum";
    color: var(--text-primary);
}

.lb-tx[b-barhg626ud] {
    font-size: 1.35rem;
    text-align: center;
    font-feature-settings: "tnum";
    color: var(--text-primary);
}

.lb-cta[b-barhg626ud] {
    display: flex;
    justify-content: flex-end;
}

.lb-contact-btn[b-barhg626ud] {
    padding: 0.7rem 1.4rem;
    background: var(--brand-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: background 0.15s ease;
    user-select: none;
}

.lb-contact-btn:hover[b-barhg626ud] {
    background: var(--brand-blue-dark);
}

.lb-contact-btn.outline[b-barhg626ud] {
    background: transparent;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
}

.lb-contact-btn.outline:hover[b-barhg626ud] {
    background: var(--brand-blue-50);
}

.lb-contact-btn .chevron[b-barhg626ud] {
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.15s ease;
    margin-left: 0.3rem;
}

.lb-row-wrap[open] .lb-contact-btn .chevron[b-barhg626ud] {
    transform: rotate(180deg);
}

@media (max-width: 880px) {
    .lb-row[b-barhg626ud] {
        grid-template-columns: 44px 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.6rem;
        row-gap: 0.4rem;
        padding: 1.4rem 1rem;
    }

    /* Rank and agent span both rows so the volume can stack above the Contact
       button in the third column -- the column has the vertical room a
       single-line button leaves unused. */
    .lb-pos[b-barhg626ud],
    .lb-agent[b-barhg626ud] {
        grid-row: 1 / 3;
    }

    /* Tighten the avatar gap to leave the agent name as much width as possible
       on narrow phones (otherwise long names wrap to one word per line). */
    .lb-agent[b-barhg626ud] {
        gap: 0.8rem;
    }

    .lb-tx[b-barhg626ud] {
        display: none;
    }

    /* Re-show the volume on mobile, relocated into the Contact column above the
       button. Same font (Poppins, inherited) and weight (600) as the agent name
       detail -- no new font or weight introduced. */
    .lb-vol[b-barhg626ud] {
        display: block;
        grid-column: 3;
        grid-row: 1;
        align-self: end;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .lb-cta[b-barhg626ud] {
        grid-column: 3;
        grid-row: 2;
        align-self: start;
    }

    .lb-contact-btn[b-barhg626ud] {
        padding: 0.6rem 0.9rem;
        font-size: 1.1rem;
    }

    .lb-av[b-barhg626ud] {
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }

    .lb-pos[b-barhg626ud] {
        font-size: 1.7rem;
    }

    .lb-name-block .nm[b-barhg626ud] {
        font-size: 1.3rem;
    }

    /* Keep the brokerage to a single line (ellipsis) so it never wraps to 2-3
       lines and squeezes the row on narrow phones. */
    .lb-name-block .brokerage[b-barhg626ud] {
        font-size: 1.1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* A phone in landscape is still under 880px but wide enough to carry the
   volume column -- restore it (rotating to landscape is the user's cue that
   they want the extra detail back). Transactions stays hidden to keep the
   narrow row uncluttered. */
@media (max-width: 880px) and (orientation: landscape) {
    .lb-row[b-barhg626ud] {
        grid-template-columns: 50px 1fr 1.2fr auto;
        grid-template-rows: auto;
    }

    /* Wide enough for the standalone Volume column again -- undo the portrait
       stack so volume flows back into its own column. align-self is reset too so
       the Contact button re-centers (portrait pinned it to the top of its row). */
    .lb-pos[b-barhg626ud],
    .lb-agent[b-barhg626ud],
    .lb-cta[b-barhg626ud] {
        grid-row: auto;
        grid-column: auto;
        align-self: auto;
    }

    .lb-vol[b-barhg626ud] {
        display: block;
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        font-size: 1.5rem;
        font-weight: 500;
    }
}

/* Admin-anonymized row: silhouette avatar, muted name, no expansion and no
   contact CTA. Additive state, not part of the mock (rows arrive masked from
   the server with IsAnonymous = true). */
.lb-row-anon[b-barhg626ud] {
    cursor: default;
}

.lb-row-anon:hover[b-barhg626ud] {
    background: transparent;
}

.lb-row-anon .nm[b-barhg626ud] {
    color: var(--grey-600);
}

.lb-av-anon[b-barhg626ud] {
    background: var(--grey-300);
    color: var(--grey-600);
}

.lb-av-anon svg[b-barhg626ud] {
    width: 24px;
    height: 24px;
}
/* /Components/Leaderboard/LeaderboardRowExpand.razor.rz.scp.css */
/* Soft neutral surface -- the row highlight on the parent
   details[open] summary (brand-blue-50) reads as the "this row is
   selected" cue; the expand sits on a subtler grey surface so the
   white contact card + chips still read as the dominant elements
   without a gradient or a white-on-white bleed. */
.lb-expand[b-d00q33lac1] {
    padding: 2rem 2.4rem 2.4rem;
    background: var(--surface-light);
    border-top: 1px dashed var(--brand-blue-200);
}

.lb-expand.inactive[b-d00q33lac1] {
    padding: 2.4rem;
    background: var(--grey-100);
    border-top: 1px solid var(--grey-200);
}

.lb-expand.inactive .profile-state[b-d00q33lac1] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.profile-state-h[b-d00q33lac1] {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.profile-state-sub[b-d00q33lac1] {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    max-width: 56ch;
    line-height: 1.5;
}

.profile-state-cta[b-d00q33lac1] {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.6rem;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

.profile-state-cta:hover[b-d00q33lac1] {
    background: var(--brand-blue-dark);
}

.profile-state-cta svg[b-d00q33lac1] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.lb-expand-grid[b-d00q33lac1] {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 2.4rem;
    align-items: start;
}

/* Wrap sets the outer hit-box; the inner .lb-av draws the actual
   circle. Blazor CSS isolation means the LeaderboardRow's .lb-av rule
   (border-radius, overflow, gradient) doesn't reach into the expand
   component -- the avatar must be fully redeclared here. */
.lb-av-wrap.large[b-d00q33lac1] {
    width: 112px;
    height: 112px;
    padding: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 30, 80, 0.08);
}

.lb-av.large[b-d00q33lac1] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-blue) 0%, #3377cc 100%);
    color: #fff;
    font-weight: 600;
    font-size: 3.4rem;
}

.lb-av.large img[b-d00q33lac1],
.lb-av.large svg[b-d00q33lac1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* <img class="lb-av large"> carries the class itself, not as a child, so the rule
   above doesn't reach it -- crop-to-fill it here too. See LeaderboardRow.razor.css. */
img.lb-av.large[b-d00q33lac1] {
    object-fit: cover;
    display: block;
}

.lb-expand-content[b-d00q33lac1] {
    min-width: 0;
}

.lb-expand-header[b-d00q33lac1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.lb-expand-name[b-d00q33lac1] {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Right-justified meta (Brokerage · X yrs). Mock image 76. */
.lb-expand-meta[b-d00q33lac1] {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    text-align: right;
    letter-spacing: 0.02em;
}

.lb-expand-bio[b-d00q33lac1] {
    font-size: 1.4rem;
    line-height: 1.65;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    margin-bottom: 1.6rem;
    max-width: 68ch;
}

/* Contact strip -- white card with a tight grey border feels like a
   vCard segment instead of a translucent overlay; nicer on the
   gradient header behind it. */
.lb-expand-contact[b-d00q33lac1] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.4rem;
    row-gap: 0.8rem;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    padding: 1.2rem 1.6rem;
    margin-bottom: 1.4rem;
}

.contact-link[b-d00q33lac1] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.35rem;
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.contact-link:hover[b-d00q33lac1] {
    color: var(--brand-blue-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-link svg[b-d00q33lac1] {
    width: 16px;
    height: 16px;
    fill: var(--brand-blue);
    flex-shrink: 0;
}

.lb-expand-socials[b-d00q33lac1] {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.4rem;
}

/* Outlined chip -- 30px touch target, white fill, subtle grey ring,
   stroke-style icon. On hover the ring + icon tint brand-blue and the
   fill warms to brand-blue-50; no transform so the row doesn't jump.
   The smaller target reads as a tidy directory tag, not a share-bar. */
.social-link[b-d00q33lac1] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--grey-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.social-link:hover[b-d00q33lac1],
.social-link:focus-visible[b-d00q33lac1] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    background: var(--brand-blue-50);
    outline: none;
}

/* ::deep is required: the social SVGs are injected via AddMarkupContent and
   therefore carry no CSS-isolation scope attribute, so a plain ".social-link
   svg" (rewritten to require the scope attr on the svg) never matches them and
   the icons render unsized/invisible. ::deep drops the scope requirement on the
   descendant. The phone/email SVGs are inline scoped markup and don't need it. */
.social-link[b-d00q33lac1]  svg {
    width: 14px;
    height: 14px;
}

/* Mobile: single-column profile stack. The avatar sits left at a restrained
   size, then the content (name, brokerage, bio, contact, socials) flows
   full-width beneath it. The desktop header floats the brokerage to the far
   right against the name -- on a narrow column that reads as detached, so the
   header stacks left-aligned with the brokerage directly under the name. */
@media (max-width: 720px) {
    .lb-expand[b-d00q33lac1] {
        padding: 1.6rem 1.6rem 2rem;
    }

    .lb-expand-grid[b-d00q33lac1] {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .lb-av-wrap.large[b-d00q33lac1] {
        width: 72px;
        height: 72px;
    }

    .lb-av.large[b-d00q33lac1] {
        font-size: 2.2rem;
    }

    .lb-expand-header[b-d00q33lac1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        margin-bottom: 1.2rem;
    }

    .lb-expand-name[b-d00q33lac1] {
        font-size: 2rem;
    }

    .lb-expand-meta[b-d00q33lac1] {
        text-align: left;
    }

    .lb-expand-bio[b-d00q33lac1] {
        margin-bottom: 1.4rem;
    }

    .lb-expand-contact[b-d00q33lac1] {
        column-gap: 1.6rem;
    }
}
/* /Components/Leaderboard/ScopeSummary.razor.rz.scp.css */
/* ControlBand Option 6 "Hero scope-rail echo" head + rule, ported verbatim from
   Mock/LeaderboardControlBand/index.html (.o6-head .. .o6-rule). The mock's
   @container (min-width:720px) becomes a viewport @media query: this strip spans
   the full-width leaderboard section, not a fixed-width card. */

.scope-summary[b-33skpmzbqq] {
    font-family: var(--font-secondary);
    color: var(--text-primary);
}

.o6-head[b-33skpmzbqq] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.o6-head-main[b-33skpmzbqq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.o6-eyebrow[b-33skpmzbqq] {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
}

.o6-title[b-33skpmzbqq] {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #353330;
}

.o6-meta[b-33skpmzbqq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1.3rem;
}

.o6-stat[b-33skpmzbqq] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.o6-stat-num[b-33skpmzbqq] {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brand-blue);
}

.o6-stat-lbl[b-33skpmzbqq] {
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}
.o6-stat-lbl sup[b-33skpmzbqq] {
    font-size: 0.58em;
    top: -0.5em;
}

/* The kept-but-de-emphasised refresh stat: no blue number, just the muted label. */
.o6-stat-muted .o6-stat-lbl[b-33skpmzbqq] {
    font-style: italic;
}

.o6-stat-sep[b-33skpmzbqq] {
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.7;
}

.o6-rule[b-33skpmzbqq] {
    height: 1px;
    margin: 1.7rem 0 1.5rem;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(212, 168, 90, 0.35) 55%, rgba(212, 168, 90, 0) 100%);
}

@media (min-width: 720px) {
    .o6-head[b-33skpmzbqq] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
    }
    .o6-title[b-33skpmzbqq] {
        font-size: 4rem;
    }
    .o6-meta[b-33skpmzbqq] {
        justify-content: flex-end;
        padding-bottom: 0.4rem;
    }
    .o6-rule[b-33skpmzbqq] {
        margin: 1.9rem 0;
    }
}
/* /Components/Pages/AdminMyRankingsViewPage.razor.rz.scp.css */
/* Admin read-only banner above the viewed agent's My Rankings page. Distinct
   dark/gold bar so support always knows this is a read-only preview. */
.admin-ro-banner[b-5ye2c1q9g4] {
    background: var(--brand-blue-dark, #0b2545);
    color: #fff;
    border-bottom: 2px solid var(--gold, #c9a23f);
    padding: 1rem 2.4rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.admin-ro-tag[b-5ye2c1q9g4] {
    background: var(--gold, #c9a23f);
    color: #1a1a1a;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem 0.25rem;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}
/* /Components/Pages/DashboardPage.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/dashboard.html
   .hero-band verbatim. Centered text, eyebrow with inline tier chip,
   4.4rem h1 with .light emphasis span, italic PT Sans subtitle, and the
   verified-chip pill below — same treatment as the public leaderboard so
   the dashboard reads as "the arena" rather than a generic CRM. */
.dash-hero[b-wuq17i43jz] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: #fff;
    padding: 5rem 2.4rem 4rem;
}

.dash-hero-inner[b-wuq17i43jz] {
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

.dash-hero-eyebrow[b-wuq17i43jz] {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    display: inline-flex;
    gap: 1rem;
    align-items: center;
}

.dash-hero-eyebrow .basic-chip[b-wuq17i43jz] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 700;
    padding: 0.35rem 0.7rem 0.25rem;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    line-height: 1;
}

.dash-hero-eyebrow .pro-chip[b-wuq17i43jz] {
    background: #d4a85a;
    color: #212529;
    font-weight: 700;
    padding: 0.35rem 0.7rem 0.25rem;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    line-height: 1;
}

.dash-hero-h1[b-wuq17i43jz] {
    font-size: 4.4rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.dash-hero-h1 .light[b-wuq17i43jz] {
    font-weight: 300;
    opacity: 0.8;
}

.dash-hero-sub[b-wuq17i43jz] {
    font-size: 1.7rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    max-width: 620px;
    margin: 0 auto;
    font-family: var(--font-secondary);
}

.dash-verified-chip[b-wuq17i43jz] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-verified-chip svg[b-wuq17i43jz] {
    width: 16px;
    height: 16px;
    fill: #fff;
}

@media (max-width: 720px) {
    .dash-hero-h1[b-wuq17i43jz] {
        font-size: 3.2rem;
    }
    .dash-hero-sub[b-wuq17i43jz] {
        font-size: 1.45rem;
    }
}

.dash-shell[b-wuq17i43jz] {
    /* Match .aa-shell + mock .shell width (1240px) so the leaderboard +
       rail grid sits flush with the MI bar above. */
    padding: 3.2rem 2.4rem 4.8rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    max-width: 1240px;
    margin: 0 auto;
}

/* MI bar sits ABOVE the dash-grid as a full-shell-width section,
   spanning over both the leaderboard column AND the badge rail.
   Matches the mock layout in image 57: the bar is the first row, then
   leaderboard + rail render side-by-side underneath.

   width:100% + align-self:stretch are both required because the
   parent (.aa-app > main) is display:flex flex-direction:column,
   which lets children shrink below their content/max-width unless
   explicitly told to stretch. Without these the inner .mi-collapse
   shrink-wraps to its summary text and renders as a narrow pill. */
.dash-mi-section[b-wuq17i43jz] {
    /* Outer width 1192px matches .dash-shell's inner content area
       (1240 - 2*24px padding). With the MI section's own padding kept
       at 2.4rem, this centres the bar visually flush with the
       leaderboard's left edge and the badge rail's right edge. */
    width: 100%;
    align-self: stretch;
    padding: 3rem 2.4rem 0;
    max-width: 1192px;
    margin: 0 auto;
    box-sizing: border-box;
}

.mi-collapse[b-wuq17i43jz] {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
    box-sizing: border-box;
}

.mi-collapse.mi-open[b-wuq17i43jz] {
    box-shadow: var(--shadow-sm);
}

.mi-collapse-summary[b-wuq17i43jz] {
    /* Reset the <button> defaults that would otherwise shrink-wrap it. */
    appearance: none;
    border: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;

    padding: 1.2rem 2.2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    background: linear-gradient(180deg, var(--brand-blue-50) 0%, #fff 100%);
    line-height: 1;
    min-height: 48px;
}

.mi-collapse.mi-open .mi-collapse-summary[b-wuq17i43jz] {
    border-bottom: 1px solid var(--grey-200);
}

/* Mock dashboard.html .mi-eyebrow: small uppercase tracking-wide blue label
   with an inline status dot (green = active for Pro, gold = locked for
   Basic) and an optional gold "Pro" pill at the end when the tier doesn't
   already own the feature. */
.mi-eyebrow[b-wuq17i43jz] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-blue);
}

.mi-eyebrow .dot[b-wuq17i43jz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-green);
    box-shadow: 0 0 0 3px rgba(46, 133, 64, 0.2);
    flex-shrink: 0;
}

.mi-eyebrow .dot.dot-locked[b-wuq17i43jz] {
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 90, 0.25);
}

.mi-pro-tag[b-wuq17i43jz] {
    background: var(--gold);
    color: var(--grey-900);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    padding: 0.35rem 0.7rem 0.25rem;
    border-radius: 999px;
    margin-left: 0.4rem;
    line-height: 1;
}

.mi-caret[b-wuq17i43jz] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mi-caret svg[b-wuq17i43jz] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.mi-collapse.mi-open .mi-caret[b-wuq17i43jz] {
    transform: rotate(180deg);
}

.mi-body[b-wuq17i43jz] {
    /* Mock value (dashboard-pro.html line 686): .mi-body { padding: 2.6rem }
       gives the inner chart card breathing room on all four sides. */
    padding: 2.6rem;
    border-top: 1px solid var(--grey-200);
}

.mi-upsell[b-wuq17i43jz] {
    /* .mi-body now provides 2.6rem padding on all sides; upsell only
       needs its inner grid layout, not its own padding. */
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.4rem;
    align-items: center;
}

.mi-upsell-h[b-wuq17i43jz] {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.mi-upsell-p[b-wuq17i43jz] {
    font-size: 1.4rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-family: var(--font-secondary);
}

.mi-upsell-r[b-wuq17i43jz] {
    text-align: center;
}

.mi-upsell-price[b-wuq17i43jz] {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--brand-blue);
}

.mi-upsell-price .per[b-wuq17i43jz] {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 0.2rem;
}

.mi-upsell-note[b-wuq17i43jz] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin: 0.6rem 0 1.2rem;
}

@media (max-width: 720px) {
    .mi-upsell[b-wuq17i43jz] { grid-template-columns: 1fr; }
}

.dash-grid[b-wuq17i43jz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.4rem;
}

.dash-main[b-wuq17i43jz] {
    display: grid;
    grid-template-columns: 1fr;
    /* Keep both rows (MI bar + leaderboard) at their content height
       even when the right rail (badge+scorecard+plan summary) is taller.
       Without align-content: start, the implicit grid rows stretch to
       fill, leaving a tall empty gap inside the closed MI bar. */
    align-content: start;
    gap: 2.4rem;
    min-width: 0;
}

.dash-rail[b-wuq17i43jz] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    align-self: start;
}

@media (max-width: 1080px) {
    .dash-grid[b-wuq17i43jz] { grid-template-columns: 1fr; }
}

.dash-error[b-wuq17i43jz] {
    background: #fef3f2;
    border: 1px solid #fda29b;
    border-radius: var(--radius-md);
    color: #b42318;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
}

/* Subscription state banner that surfaces pending-cancel + past-due
   states so the user has a single-click recovery CTA. Sits in the
   same shell-width slot as the MI bar below; same 1192px outer
   width + 2.4rem horizontal padding so the inner copy lines up with
   the MI eyebrow. Two variants:
     .dash-sub-banner-soft   (amber, "your plan ends soon")
     .dash-sub-banner-urgent (red, "we couldn't charge your card")
   The CTA picks up the banner's accent via currentColor so the
   action reads as part of the alert, not a foreign brand chip. */
.dash-sub-banner[b-wuq17i43jz] {
    max-width: 1192px;
    margin: 2.4rem auto 0;
    padding: 1.4rem 2.4rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

.dash-sub-banner-soft[b-wuq17i43jz] {
    background: #fff8eb;
    border: 1px solid #fcd9a8;
    color: #8a4b00;
}

.dash-sub-banner-urgent[b-wuq17i43jz] {
    background: #fef3f2;
    border: 1px solid #fda29b;
    color: #b42318;
}

.dash-sub-banner-text[b-wuq17i43jz] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 1.35rem;
    line-height: 1.5;
    min-width: 0;
}

.dash-sub-banner-text strong[b-wuq17i43jz] {
    font-size: 1.55rem;
    font-weight: 600;
    color: inherit;
}

/* Banner-local CTA: tints with the banner's color via currentColor
   so it doesn't fight the alert palette. Same metrics as .aa-btn
   (line-height + padding) so muscle memory holds. */
.dash-sub-banner-cta[b-wuq17i43jz] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.dash-sub-banner-cta:hover:not(:disabled)[b-wuq17i43jz] {
    background: rgba(0, 0, 0, 0.04);
}

.dash-sub-banner-cta:disabled[b-wuq17i43jz] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dash-card[b-wuq17i43jz] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 2.4rem 2.4rem 2.8rem;
    box-shadow: var(--shadow-sm);
}

.dash-card-title[b-wuq17i43jz] {
    font-size: 1.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-secondary);
    margin: 0 0 1.6rem;
}

.dash-card-empty[b-wuq17i43jz] {
    font-size: 1.45rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.6rem;
}

@media (max-width: 720px) {
    .dash-hero-inner[b-wuq17i43jz] { flex-direction: column; gap: 1.6rem; }
    .dash-hero-h1[b-wuq17i43jz] { font-size: 2.8rem; }
    .dash-shell[b-wuq17i43jz] { padding: 2.4rem 1.6rem 3.2rem; }
    .dash-card[b-wuq17i43jz] { padding: 2rem 1.6rem; }
}

/* ============================================================
   Inactive (SubscriptionTier.None) reactivation page —
   verbatim port of AgentArena.Documentation/Mock/LeaderboardPivot/dashboard-user.html.
   Scoped to this component so .wrap / .eyebrow / .bt / .col / .plan don't
   leak into siblings. Rendered only when the @if (None) branch fires.
   ============================================================ */

.wrap[b-wuq17i43jz] { max-width: 1180px; margin: 0 auto; padding: 0 2.4rem; }

/* === Welcome banner === */
.dash-welcome[b-wuq17i43jz] {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  color: #fff;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.dash-welcome[b-wuq17i43jz]::after {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.dash-welcome .wrap[b-wuq17i43jz] { position: relative; z-index: 1; }
.dw-row[b-wuq17i43jz] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 720px) {
  .dw-row[b-wuq17i43jz] { grid-template-columns: 1fr; text-align: center; }
  /* Drop the avatar on a phone — the headline + signed-in line carry the
     banner and the photo only eats vertical space in the confined view. */
  .dw-avatar[b-wuq17i43jz] { display: none; }
}
.dw-av[b-wuq17i43jz] {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 2rem;
}
.dw-meta .h[b-wuq17i43jz] { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.01em; }
.dw-meta .p[b-wuq17i43jz] { font-size: 1.4rem; opacity: 0.85; font-family: var(--font-secondary); margin-top: 0.4rem; }
.dw-chip[b-wuq17i43jz] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem 0.5rem;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.dw-chip[b-wuq17i43jz]::before { content: ''; width: 7px; height: 7px; background: #66ff99; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(102,255,153,0.2); transform: translateY(-2px); }

/* === Page eyebrow & headline === */
.plans-head[b-wuq17i43jz] {
  text-align: center;
  padding: 6rem 0 4rem;
}
.plans-head .eyebrow[b-wuq17i43jz] {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 1.4rem;
}
.plans-head h1[b-wuq17i43jz] {
  font-size: 4.6rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
  max-width: 880px;
  margin-left: auto; margin-right: auto;
}
.plans-head h1 .blue[b-wuq17i43jz] { color: var(--brand-blue); }
.plans-head .lede[b-wuq17i43jz] {
  font-size: 1.8rem;
  color: var(--text-secondary);
  font-style: italic;
  font-family: var(--font-secondary);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .plans-head[b-wuq17i43jz] { padding: 4rem 0 3rem; }
  .plans-head h1[b-wuq17i43jz] { font-size: 3.2rem; }
  .plans-head .lede[b-wuq17i43jz] { font-size: 1.55rem; }
}

/* === Billing toggle === */
.billing-toggle[b-wuq17i43jz] {
  display: inline-flex;
  background: var(--surface-light);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  padding: 0.4rem;
  margin-top: 3rem;
}
.bt[b-wuq17i43jz] {
  padding: 0.9rem 2rem;
  font-family: var(--font-primary);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.bt.on[b-wuq17i43jz] {
  background: #fff;
  color: var(--brand-blue);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.bt .save[b-wuq17i43jz] {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--success-green);
  padding: 0.2rem 0.6rem;
  background: rgba(46,133,64,0.12);
  border-radius: 999px;
}

/* === Plan grid ===
   The plan / plan-name / feature-list / plan-cta / plan-secure rules
   live in Components/Plans/PlanCard.razor.css now -- DRY across the
   reactivation flow and /register. Only the grid wrapper stays here. */
.plan-grid[b-wuq17i43jz] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  max-width: 1000px;
  margin: 4rem auto 0;
}
@media (max-width: 880px) { .plan-grid[b-wuq17i43jz] { grid-template-columns: 1fr; gap: 2rem; } }

/* === Matrix === */
.matrix-section[b-wuq17i43jz] { padding: 6rem 0; }
.section-head[b-wuq17i43jz] { text-align: center; margin-bottom: 3.6rem; }
.section-head h2[b-wuq17i43jz] {
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.section-head h2 .blue[b-wuq17i43jz] { color: var(--brand-blue); }
.section-head .sub[b-wuq17i43jz] {
  font-size: 1.55rem;
  color: var(--text-secondary);
  font-style: italic;
  font-family: var(--font-secondary);
  max-width: 620px;
  margin: 0 auto;
}
.matrix-wrap[b-wuq17i43jz] {
  max-width: 940px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.matrix-row[b-wuq17i43jz] {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--grey-200);
  font-size: 1.35rem;
}
.matrix-row:last-child[b-wuq17i43jz] { border-bottom: none; }
.matrix-row.head[b-wuq17i43jz] {
  background: linear-gradient(180deg, var(--surface-light) 0%, #fff 100%);
  padding: 2rem;
  border-bottom: 2px solid var(--grey-200);
}
.matrix-row.head .col[b-wuq17i43jz] {
  text-align: center;
  font-weight: 600;
  font-size: 1.4rem;
}
.matrix-row.head .col .price-small[b-wuq17i43jz] {
  display: block;
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 0.4rem;
}
.matrix-row.head .col.featured[b-wuq17i43jz] {
  position: relative;
  background: var(--brand-blue);
  color: #fff;
  padding: 1.2rem 0.8rem;
  border-radius: 8px;
}
.matrix-row.head .col.featured .price-small[b-wuq17i43jz] { color: rgba(255,255,255,0.85); }
.matrix-row .feature-name[b-wuq17i43jz] { font-weight: 500; font-size: 1.35rem; }
.matrix-row .feature-name .desc[b-wuq17i43jz] {
  display: block;
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 0.2rem;
  font-family: var(--font-secondary);
}
.matrix-row .col[b-wuq17i43jz] { text-align: center; font-weight: 600; font-size: 1.55rem; }
.matrix-row .col.featured[b-wuq17i43jz] { background: rgba(0,75,187,0.04); }
.matrix-row .check[b-wuq17i43jz] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--success-green);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
}
.matrix-row .dash[b-wuq17i43jz] { color: var(--grey-300); font-weight: 600; font-size: 2rem; }
@media (max-width: 720px) {
  .matrix-row .feature-name .desc[b-wuq17i43jz] { display: none; }
  .matrix-row[b-wuq17i43jz] { padding: 1.2rem 1rem; font-size: 1.2rem; }
}

/* === Why it works === */
.why-section[b-wuq17i43jz] { padding: 6rem 0; background: var(--surface-light); }
.why-grid[b-wuq17i43jz] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 880px) { .why-grid[b-wuq17i43jz] { grid-template-columns: 1fr; } }
.why-card[b-wuq17i43jz] {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 14px;
  padding: 2.4rem;
}
.why-num[b-wuq17i43jz] {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-blue-50);
  color: var(--brand-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.why-title[b-wuq17i43jz] {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
.why-card p[b-wuq17i43jz] {
  font-size: 1.3rem;
  color: var(--text-secondary);
  font-family: var(--font-secondary);
  line-height: 1.55;
}

/* Third banner variant: informational (blue) bare-profile nudge. Same
   geometry as soft/urgent so the slot doesn't shift between states. */
.dash-sub-banner-info[b-wuq17i43jz] {
    background: #eff8ff;
    border: 1px solid #b2ddff;
    color: #175cd3;
}

.dash-banner-actions[b-wuq17i43jz] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

.dash-banner-dismiss[b-wuq17i43jz] {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 2rem;
    line-height: 1;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    opacity: 0.7;
}

.dash-banner-dismiss:hover[b-wuq17i43jz] {
    opacity: 1;
}

/* Admin "view this agent's dashboard" control band. Deliberately distinct
   (dark brand bar with a gold tag + pill toggle) so support always knows they
   are looking at a preview, never the agent's own session. Admin-only chrome;
   it never renders for a real realtor. */
.admin-viewas-band[b-wuq17i43jz] {
    background: var(--brand-blue-dark, #0b2545);
    color: #fff;
    border-bottom: 2px solid var(--gold, #c9a23f);
}

.admin-viewas-band .avb-inner[b-wuq17i43jz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.avb-meta[b-wuq17i43jz] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1.2rem;
    min-width: 0;
}

.avb-tag[b-wuq17i43jz] {
    background: var(--gold, #c9a23f);
    color: #1a1a1a;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem 0.25rem;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.avb-name[b-wuq17i43jz] {
    font-weight: 700;
    font-size: 1.6rem;
}

.avb-sub[b-wuq17i43jz] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
}

.avb-toggle[b-wuq17i43jz] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.avb-toggle-label[b-wuq17i43jz] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 0.2rem;
}

.avb-pill[b-wuq17i43jz] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-weight: 700;
    font-size: 1.2rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.avb-pill:hover[b-wuq17i43jz] {
    background: rgba(255, 255, 255, 0.2);
}

.avb-pill.on[b-wuq17i43jz] {
    background: var(--gold, #c9a23f);
    color: #1a1a1a;
    border-color: var(--gold, #c9a23f);
}
/* /Components/Pages/DownloadPage.razor.rz.scp.css */
/* Token download page — ported from Mock/LeaderboardPivot/download.html (.dl-*). */
.dl-wrap[b-a1suif6ma1] {
    max-width: 720px;
    margin: 0 auto;
    padding: 5rem 2.4rem 7rem;
}

/* Loading / error status card */
.dl-status[b-a1suif6ma1] {
    text-align: center;
    padding: 3rem 0;
}

.dl-spinner[b-a1suif6ma1] {
    width: 48px;
    height: 48px;
    margin: 0 auto 2.4rem;
    border: 4px solid var(--grey-200);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: dl-spin-b-a1suif6ma1 0.8s linear infinite;
}

@keyframes dl-spin-b-a1suif6ma1 {
    to {
        transform: rotate(360deg);
    }
}

.dl-badge[b-a1suif6ma1] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(46, 133, 64, 0.12);
    color: var(--success-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

.dl-badge svg[b-a1suif6ma1] {
    width: 38px;
    height: 38px;
    fill: currentColor;
}

.dl-head[b-a1suif6ma1] {
    text-align: center;
    margin-bottom: 2.8rem;
}

.dl-eyebrow[b-a1suif6ma1] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--success-green);
    margin-bottom: 1.2rem;
}

.dl-eyebrow.err[b-a1suif6ma1] {
    color: var(--error-red);
}

.dl-title[b-a1suif6ma1] {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.dl-title .blue[b-a1suif6ma1] {
    color: var(--brand-blue);
}

.dl-sub[b-a1suif6ma1] {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
}

.dl-sub a[b-a1suif6ma1] {
    color: var(--brand-blue);
}

.dl-snapshot[b-a1suif6ma1] {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin: 2rem auto 0;
}

.snap-chip[b-a1suif6ma1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    background: var(--brand-blue-50);
    border: 1px solid var(--brand-blue-200);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--brand-blue-dark);
}

.dl-panel[b-a1suif6ma1] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 2.8rem;
    margin-top: 3rem;
}

.dl-files[b-a1suif6ma1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    margin-bottom: 2.4rem;
}

.file-card[b-a1suif6ma1] {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem;
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    background: var(--surface-light);
}

.file-ico[b-a1suif6ma1] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-ico.csv[b-a1suif6ma1] {
    background: rgba(46, 133, 64, 0.12);
    color: var(--success-green);
}

.file-ico.pdf[b-a1suif6ma1] {
    background: rgba(216, 57, 51, 0.12);
    color: var(--error-red);
}

.file-ico svg[b-a1suif6ma1] {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.file-meta .fn[b-a1suif6ma1] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}

.file-meta .fd[b-a1suif6ma1] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.dl-zip-btn[b-a1suif6ma1] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.5rem;
    background: var(--brand-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.dl-zip-btn:hover[b-a1suif6ma1] {
    background: var(--brand-blue-dark);
}

.dl-zip-btn svg[b-a1suif6ma1] {
    width: 22px;
    height: 22px;
    fill: #fff;
}

.dl-note[b-a1suif6ma1] {
    margin-top: 2.4rem;
    background: var(--brand-blue-50);
    border: 1px solid var(--brand-blue-200);
    border-radius: 12px;
    padding: 2rem 2.2rem;
}

.dl-note-title[b-a1suif6ma1] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.45rem;
    color: var(--brand-blue-dark);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dl-note-title svg[b-a1suif6ma1] {
    width: 18px;
    height: 18px;
    fill: var(--brand-blue);
}

.dl-note ul[b-a1suif6ma1] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}

.dl-note li[b-a1suif6ma1] {
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    padding-left: 1.6rem;
    position: relative;
}

.dl-note li[b-a1suif6ma1]::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--brand-blue);
    font-weight: 700;
}

.dl-note li strong[b-a1suif6ma1] {
    font-family: var(--font-primary);
    font-weight: 600;
}

.dl-note a[b-a1suif6ma1] {
    color: var(--brand-blue);
}

.dl-back[b-a1suif6ma1] {
    text-align: center;
    margin-top: 3rem;
}

.dl-back a[b-a1suif6ma1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--brand-blue);
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 500;
}

.dl-back a svg[b-a1suif6ma1] {
    width: 1.05em;
    height: 1.05em;
    fill: currentColor;
    flex-shrink: 0;
}

.dl-back a:hover[b-a1suif6ma1] {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .dl-title[b-a1suif6ma1] {
        font-size: 2.3rem;
    }

    .dl-files[b-a1suif6ma1] {
        grid-template-columns: 1fr;
    }

    .dl-panel[b-a1suif6ma1] {
        padding: 2rem;
    }
}
/* /Components/Pages/LeaderboardHomePage.razor.rz.scp.css */
.lb-section[b-sujzxrdiz5] {
    /* width:100% pins the section to the shell's full width (max-width 1240px,
       centered) instead of letting it shrink-wrap to its widest line. Without
       it, .aa-shell's margin:0 auto disables the flex-column stretch, so the
       section sized to the ScopeSummary header's max-content and the whole
       leaderboard shifted and resized whenever the board name changed length
       (e.g. "Florida" 846px vs "Miami-Dade County" 1015px at 1440px wide).
       Same fix legal-page and .dash-mi-section already use for this artifact. */
    width: 100%;
    padding: 3rem 2.4rem 4rem;
}
/* /Components/Pages/LoginPage.razor.rz.scp.css */
/* Login-specific styles only. Shared auth-card / auth-cols / auth-or /
   auth-disclaim / signup-link styles live in AuthCard.razor.css and reach
   into ChildContent via ::deep. Keep this file minimal — adding rules here
   that duplicate AuthCard ones causes specificity wars. */

.login-error[b-2ris1jja5x] {
    margin: 1.2rem 0;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-md);
    background: rgba(216, 57, 51, 0.08);
    color: var(--error-red);
    font-size: 1.35rem;
}
/* /Components/Pages/LoginVerifyPage.razor.rz.scp.css */
.verify-meta[b-uki0iw1gqe] {
    margin-top: 1.6rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.3rem;
}

.verify-meta a[b-uki0iw1gqe] {
    margin-left: 0.6rem;
    color: var(--brand-blue);
    font-weight: 500;
}

.auth-or[b-uki0iw1gqe] {
    margin: 2rem 0 1.2rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    font-family: var(--font-secondary);
}
/* /Components/Pages/MyRankings/BoardSwitcher.razor.rz.scp.css */
/* Board scope switcher + morphing search. Verbatim from
   AgentArena.Documentation/Mock/RankingAudit/my-rankings.html (board-switch
   831-1059, lb-head 251-265). The gliding pill is folded onto .scope-seg.active
   so no DOM-measuring interop is needed; the gradient/shadow that lived on
   .scope-glider now sits on the active segment directly. */

.board-switch[b-nremwwel8m] {
    position: sticky;
    top: 0;
    z-index: 40;
    margin-bottom: 1.8rem;
    padding: 1rem 0 1.2rem;
    background: var(--surface-light);
}

/* the segmented rail */
.scope-rail[b-nremwwel8m] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: var(--shadow-sm);
}
.scope-seg[b-nremwwel8m] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    min-height: 46px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, background 0.38s cubic-bezier(0.34, 1.4, 0.5, 1);
    -webkit-tap-highlight-color: transparent;
}
.scope-seg .seg-count[b-nremwwel8m] {
    font-size: 1rem;
    font-weight: 700;
    min-width: 19px;
    height: 19px;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--grey-200);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-feature-settings: 'tnum';
    transition: background 0.25s ease, color 0.25s ease;
}
.scope-seg:not(.active):hover[b-nremwwel8m] {
    color: var(--brand-blue);
}
.scope-seg:disabled[b-nremwwel8m] {
    opacity: 0.5;
    cursor: default;
}
.scope-seg.active[b-nremwwel8m] {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    box-shadow: 0 6px 14px rgba(0, 75, 187, 0.3);
}
.scope-seg.active .seg-count[b-nremwwel8m] {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.scope-seg:focus-visible[b-nremwwel8m] {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* the search field */
.board-search[b-nremwwel8m] {
    position: relative;
    margin-top: 1.2rem;
}
.board-search-field[b-nremwwel8m] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1.5px solid var(--grey-300);
    border-radius: 12px;
    padding: 0 1.3rem;
    min-height: 52px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Tier-switch morph (mock: .board-search.morph .board-search-field). The
       wrapper is keyed on the active scope so Blazor re-creates it on every
       switch, re-running this entrance. */
    animation: searchMorph-b-nremwwel8m 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes searchMorph-b-nremwwel8m {
    0% {
        transform: translateY(-6px) scale(0.985);
        opacity: 0.55;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}
.board-search-field:focus-within[b-nremwwel8m] {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.1);
}
.board-search-field .search-ic[b-nremwwel8m] {
    width: 18px;
    height: 18px;
    fill: var(--grey-500);
    flex-shrink: 0;
    transition: fill 0.2s ease;
}
.board-search-field:focus-within .search-ic[b-nremwwel8m] {
    fill: var(--brand-blue);
}
.board-search-input[b-nremwwel8m] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary);
}
.board-search-input[b-nremwwel8m]::placeholder {
    color: var(--grey-500);
    font-weight: 400;
}
.board-search-clear[b-nremwwel8m] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--grey-200);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.board-search-clear:hover[b-nremwwel8m] {
    background: var(--grey-300);
    color: var(--text-primary);
}

/* the auto-populated, selectable suggestion list */
.board-suggest[b-nremwwel8m] {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.board-search.open .board-suggest[b-nremwwel8m] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.suggest-head[b-nremwwel8m] {
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-light);
    border-bottom: 1px solid var(--grey-200);
}
.suggest-item[b-nremwwel8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    min-height: 50px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--grey-100);
    transition: background 0.12s ease;
    font-family: var(--font-primary);
}
.suggest-item:last-child[b-nremwwel8m] {
    border-bottom: none;
}
.suggest-item:hover[b-nremwwel8m] {
    background: var(--brand-blue-50);
}
.suggest-item .si-main[b-nremwwel8m] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}
.suggest-item .si-name[b-nremwwel8m] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}
.suggest-item .si-sub[b-nremwwel8m] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
}
.suggest-item .si-rank[b-nremwwel8m] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-blue);
    font-feature-settings: 'tnum';
    white-space: nowrap;
}
.suggest-empty[b-nremwwel8m] {
    padding: 1.6rem 1.4rem;
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    font-size: 1.25rem;
}

/* locked chip, shown instead of search for a single-board scope (State) */
.board-locked[b-nremwwel8m] {
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--brand-blue-50);
    border: 1px solid var(--brand-blue-200);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    min-height: 52px;
    /* Same tier-switch morph as the search field (mock: .board-locked). */
    animation: searchMorph-b-nremwwel8m 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.board-locked svg[b-nremwwel8m] {
    width: 18px;
    height: 18px;
    fill: var(--brand-blue);
    flex-shrink: 0;
}
.board-locked .bl-name[b-nremwwel8m] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-blue-dark);
}
.board-locked .bl-sub[b-nremwwel8m] {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}

/* === leaderboard card head === */
.lb-card[b-nremwwel8m] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
}
.lb-head[b-nremwwel8m] {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr 1.1fr 0.7fr 130px;
    gap: 1.2rem;
    padding: 1.4rem 1.8rem;
    background: var(--surface-light);
    border-bottom: 1px solid var(--grey-200);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.lb-head .num-right[b-nremwwel8m] {
    text-align: right;
}
.lb-head .num-center[b-nremwwel8m] {
    text-align: center;
}
.board-empty[b-nremwwel8m] {
    padding: 2.6rem 1.8rem;
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    font-size: 1.35rem;
}

@media (max-width: 860px) {
    .lb-head[b-nremwwel8m] {
        display: none;
    }
}

/* mobile tuning for the switcher (80% of traffic) */
@media (max-width: 600px) {
    .board-switch[b-nremwwel8m] {
        top: 0;
        padding-top: 0.6rem;
    }
    .scope-rail[b-nremwwel8m] {
        gap: 0.2rem;
        padding: 0.4rem;
    }
    .scope-seg[b-nremwwel8m] {
        font-size: 1.2rem;
        padding: 1rem 0.2rem;
        gap: 0.35rem;
        min-height: 48px;
    }
    .scope-seg .seg-count[b-nremwwel8m] {
        min-width: 17px;
        height: 17px;
        font-size: 0.92rem;
        padding: 0 0.35rem;
    }
    .board-search-input[b-nremwwel8m] {
        font-size: 1.6rem;
    }
    .board-search-clear[b-nremwwel8m] {
        width: 44px;
        height: 44px;
    }
}
@media (max-width: 360px) {
    .scope-seg .seg-count[b-nremwwel8m] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scope-seg[b-nremwwel8m],
    .board-suggest[b-nremwwel8m] {
        transition: none !important;
    }
    .board-search-field[b-nremwwel8m],
    .board-locked[b-nremwwel8m] {
        animation: none !important;
    }
}
/* /Components/Pages/MyRankings/IsThisYouSection.razor.rz.scp.css */
/* Is this you? duplicate rows. Verbatim from
   AgentArena.Documentation/Mock/RankingAudit/my-rankings.html (.lb-card 245-250,
   details expand 313-338, .dup-* 606-668, .dup-reject 290-291, btn-sm 500-504,
   dismiss anim 1129-1131). */

.lb-card[b-7yfnhn8y28] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
}
.lb-head[b-7yfnhn8y28] {
    display: grid;
    gap: 1.2rem;
    padding: 1.4rem 1.8rem;
    background: var(--surface-light);
    border-bottom: 1px solid var(--grey-200);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.lb-head .num-right[b-7yfnhn8y28] {
    text-align: right;
}
.lb-head.dup-head-row[b-7yfnhn8y28] {
    grid-template-columns: 1.9fr 3fr 1fr 184px;
}

/* details expand */
details[b-7yfnhn8y28] {
    border-bottom: 1px solid var(--grey-200);
}
details:last-child[b-7yfnhn8y28] {
    border-bottom: none;
}
details summary[b-7yfnhn8y28] {
    list-style: none;
    cursor: pointer;
}
details summary[b-7yfnhn8y28]::-webkit-details-marker {
    display: none;
}
details summary[b-7yfnhn8y28]::marker {
    display: none;
}
details[open] summary .chevron[b-7yfnhn8y28] {
    transform: rotate(180deg);
}
.chevron[b-7yfnhn8y28] {
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
    transition: transform 0.15s ease;
    margin-left: 0.3rem;
}

.dup-row[b-7yfnhn8y28] {
    display: grid;
    grid-template-columns: 1.9fr 3fr 1fr 184px;
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    align-items: center;
    transition: background 0.15s ease;
}
details summary:hover .dup-row[b-7yfnhn8y28] {
    background: var(--surface-light);
}
details[open] summary .dup-row[b-7yfnhn8y28] {
    background: var(--brand-blue-50);
}
.dup-prof[b-7yfnhn8y28] {
    min-width: 0;
}
.dup-prof .nm[b-7yfnhn8y28] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.dup-prof .lic[b-7yfnhn8y28] {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    font-feature-settings: 'tnum';
}
.dup-match[b-7yfnhn8y28] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
}
.dup-conf[b-7yfnhn8y28] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}
.dup-conf.likely[b-7yfnhn8y28] {
    background: var(--brand-blue);
    color: #fff;
}
.dup-conf.maybe[b-7yfnhn8y28] {
    background: #8a6400;
    color: #fff;
}
.dup-signals[b-7yfnhn8y28] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.dup-chip[b-7yfnhn8y28] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--brand-blue-50);
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue-200);
}
.dup-chip.soft[b-7yfnhn8y28] {
    background: var(--surface-light);
    color: var(--text-secondary);
    border-color: var(--grey-200);
}
.dup-vol[b-7yfnhn8y28] {
    font-feature-settings: 'tnum';
}
.dup-vol strong[b-7yfnhn8y28] {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-blue);
}
.dup-vol .sub[b-7yfnhn8y28] {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.lb-cta[b-7yfnhn8y28] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.dup-reject[b-7yfnhn8y28] {
    background: transparent;
    border: 1px solid var(--grey-300);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.dup-reject:hover[b-7yfnhn8y28] {
    border-color: var(--grey-500);
    color: var(--text-primary);
    background: var(--surface-light);
}
.lb-contact-btn[b-7yfnhn8y28] {
    padding: 0.7rem 1.2rem;
    background: transparent;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.lb-contact-btn:hover[b-7yfnhn8y28] {
    background: var(--brand-blue-50);
}
.lb-contact-btn .chevron[b-7yfnhn8y28] {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

/* expand body */
.lb-expand[b-7yfnhn8y28] {
    padding: 2rem 2rem 2.4rem;
    background: var(--brand-blue-50);
    border-bottom: 1px solid var(--grey-200);
}
details[open] > .lb-expand[b-7yfnhn8y28] {
    animation: expandIn-b-7yfnhn8y28 0.32s ease both;
}
@keyframes expandIn-b-7yfnhn8y28 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.lb-expand-h[b-7yfnhn8y28] {
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 1rem;
}
.dup-conflict[b-7yfnhn8y28] {
    font-size: 1.25rem;
    color: var(--error-red);
    background: rgba(216, 57, 51, 0.08);
    border: 1px solid var(--error-red-light);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    font-family: var(--font-secondary);
    line-height: 1.5;
}
.dup-footprint[b-7yfnhn8y28] {
    font-size: 1.3rem;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    line-height: 1.55;
    margin-bottom: 0.4rem;
}
.dup-confirm[b-7yfnhn8y28] {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.btn-sm[b-7yfnhn8y28] {
    padding: 0.7rem 1.4rem;
    font-size: 1.25rem;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.btn-sm.solid[b-7yfnhn8y28] {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}
.btn-sm.solid:hover[b-7yfnhn8y28] {
    background: var(--brand-blue-dark);
}
.btn-sm.solid:disabled[b-7yfnhn8y28] {
    opacity: 0.5;
    cursor: default;
}
.btn-sm.outline[b-7yfnhn8y28] {
    background: transparent;
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.btn-sm.outline:hover[b-7yfnhn8y28] {
    background: var(--brand-blue-50);
}
.form-hint[b-7yfnhn8y28] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    font-family: var(--font-secondary);
}

@media (max-width: 860px) {
    .lb-head.dup-head-row[b-7yfnhn8y28] {
        display: none;
    }
    .dup-row[b-7yfnhn8y28] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.6rem;
    }
    .dup-vol[b-7yfnhn8y28] {
        text-align: left !important;
    }
    .dup-row .lb-cta[b-7yfnhn8y28] {
        width: 100%;
        gap: 0.8rem;
        margin-top: 0.2rem;
    }
    .dup-row .lb-cta .dup-reject[b-7yfnhn8y28],
    .dup-row .lb-cta .lb-contact-btn[b-7yfnhn8y28] {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }
    .btn-sm[b-7yfnhn8y28],
    .lb-contact-btn[b-7yfnhn8y28],
    .dup-reject[b-7yfnhn8y28] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Row removal when the agent taps "Not me" (mock: .dismissing -> dismissRow). */
.dismissing[b-7yfnhn8y28] {
    animation: dismissRow-b-7yfnhn8y28 0.4s ease forwards;
    overflow: hidden;
}
@keyframes dismissRow-b-7yfnhn8y28 {
    to {
        opacity: 0;
        transform: translateX(24px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    details[open] > .lb-expand[b-7yfnhn8y28],
    .dismissing[b-7yfnhn8y28] {
        animation: none !important;
    }
}
/* /Components/Pages/MyRankings/MethodologySection.razor.rz.scp.css */
/* Methodology accordion. Reuses the mi-collapse shell (verbatim from the mock,
   507-574, dotPulse 1123-1127) and the .method-* list (786-801). CSS isolation
   scopes per component, so the shared mi-collapse block is repeated here. */

.mi-collapse[b-wfj01vqxm2] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.mi-collapse[open][b-wfj01vqxm2] {
    box-shadow: var(--shadow-sm);
}
.mi-collapse-summary[b-wfj01vqxm2] {
    list-style: none;
    cursor: pointer;
    padding: 1.2rem 2.2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    background: linear-gradient(180deg, var(--brand-blue-50) 0%, #fff 100%);
    border-bottom: 1px solid var(--grey-200);
    user-select: none;
    line-height: 1;
    min-height: 48px;
}
.mi-collapse:not([open]) .mi-collapse-summary[b-wfj01vqxm2] {
    border-bottom: none;
}
.mi-collapse-summary[b-wfj01vqxm2]::-webkit-details-marker {
    display: none;
}
.mi-collapse-summary[b-wfj01vqxm2]::marker {
    display: none;
}
.mi-eyebrow[b-wfj01vqxm2] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-blue);
}
.mi-eyebrow .dot[b-wfj01vqxm2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-green);
    box-shadow: 0 0 0 3px rgba(46, 133, 64, 0.2);
    flex-shrink: 0;
    animation: dotPulse-b-wfj01vqxm2 2.6s ease-in-out infinite;
}
@keyframes dotPulse-b-wfj01vqxm2 {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(46, 133, 64, 0.2);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(46, 133, 64, 0.07);
    }
}
.mi-caret[b-wfj01vqxm2] {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.mi-caret svg[b-wfj01vqxm2] {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.mi-collapse[open] .mi-caret[b-wfj01vqxm2] {
    transform: rotate(180deg);
}
.mi-collapse-body[b-wfj01vqxm2] {
    padding: 2rem 2.4rem;
}

/* methodology list */
.method-p[b-wfj01vqxm2] {
    font-size: 1.4rem;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    line-height: 1.6;
    margin-bottom: 1.2rem;
}
.method-list[b-wfj01vqxm2] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.method-list li[b-wfj01vqxm2] {
    position: relative;
    padding-left: 24px;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    line-height: 1.5;
}
.method-list li[b-wfj01vqxm2]::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 2px;
    width: 17px;
    height: 17px;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 50%;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .mi-eyebrow .dot[b-wfj01vqxm2] {
        animation: none !important;
    }
}
/* /Components/Pages/MyRankings/PlacementRow.razor.rz.scp.css */
/* One placement row + inline transaction ledger + per-row flag form. Verbatim
   from AgentArena.Documentation/Mock/RankingAudit/my-rankings.html (.lb-row /
   place-* 266-323, .lb-expand + .tx-table 325-393, flag form 466-504 + 1035,
   rank-meter 1061-1080, expandIn 1090-1092, mobile reflow 803-822 + 1148-1208). */

.lb-row[b-fwc7x6vqym] {
    display: grid;
    grid-template-columns: 2.2fr 1.1fr 1.1fr 0.7fr 130px;
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    align-items: center;
    font-size: 1.4rem;
    transition: background 0.15s ease;
}

/* placement-scoped */
.place-scope[b-fwc7x6vqym] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.place-scope .sc[b-fwc7x6vqym] {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.place-scope .ty[b-fwc7x6vqym] {
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}
.place-rank[b-fwc7x6vqym] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.place-rank .pos[b-fwc7x6vqym] {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--brand-blue);
    font-feature-settings: 'tnum';
    line-height: 1;
}
.place-rank .pos.podium[b-fwc7x6vqym] {
    color: #7a5e16;
}
.place-rank .of[b-fwc7x6vqym] {
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
}
.place-vol[b-fwc7x6vqym] {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: right;
    font-feature-settings: 'tnum';
    color: var(--text-primary);
}
.place-tx[b-fwc7x6vqym] {
    font-size: 1.35rem;
    text-align: center;
    font-feature-settings: 'tnum';
    color: var(--text-primary);
}
.lb-cta[b-fwc7x6vqym] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.lb-contact-btn[b-fwc7x6vqym] {
    padding: 0.7rem 1.2rem;
    background: transparent;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.lb-contact-btn:hover[b-fwc7x6vqym] {
    background: var(--brand-blue-50);
}
.lb-contact-btn .chevron[b-fwc7x6vqym] {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.chevron[b-fwc7x6vqym] {
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
    transition: transform 0.15s ease;
    margin-left: 0.3rem;
}

/* details expand */
details[b-fwc7x6vqym] {
    border-bottom: 1px solid var(--grey-200);
    /* Staggered entrance the moment a board becomes active (mock:
       .board-group.active details { animation: rowIn } with per-row nth-child
       delays). The delay is data-driven via --row-i set by BoardSwitcher so it
       survives the @key-forced re-creation on a scope switch. */
    animation: rowIn-b-fwc7x6vqym 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.02s + var(--row-i, 0) * 0.05s);
}
@keyframes rowIn-b-fwc7x6vqym {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Row highlight when jumped-to via the board search. */
details.flash > summary .lb-row[b-fwc7x6vqym] {
    animation: rowFlash-b-fwc7x6vqym 1.4s ease;
}
@keyframes rowFlash-b-fwc7x6vqym {
    0% {
        background: var(--brand-blue-100);
    }
    100% {
        background: transparent;
    }
}
details:last-child[b-fwc7x6vqym] {
    border-bottom: none;
}
details summary[b-fwc7x6vqym] {
    list-style: none;
    cursor: pointer;
}
details summary[b-fwc7x6vqym]::-webkit-details-marker {
    display: none;
}
details summary[b-fwc7x6vqym]::marker {
    display: none;
}
details summary .lb-row[b-fwc7x6vqym] {
    border-bottom: none;
}
details[open] summary .lb-row[b-fwc7x6vqym] {
    background: var(--brand-blue-50);
}
details[open] summary .chevron[b-fwc7x6vqym] {
    transform: rotate(180deg);
}

/* expand body */
.lb-expand[b-fwc7x6vqym] {
    padding: 2rem 2rem 2.4rem;
    background: var(--brand-blue-50);
    border-bottom: 1px solid var(--grey-200);
}
details[open] > .lb-expand[b-fwc7x6vqym] {
    animation: expandIn-b-fwc7x6vqym 0.32s ease both;
}
@keyframes expandIn-b-fwc7x6vqym {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.lb-expand-h[b-fwc7x6vqym] {
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* === Transaction table === */
.tx-table[b-fwc7x6vqym] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--grey-200);
}
.tx-table th[b-fwc7x6vqym] {
    text-align: left;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 1rem 1.2rem;
    background: var(--surface-light);
    border-bottom: 1px solid var(--grey-200);
}
.tx-table th.num[b-fwc7x6vqym],
.tx-table td.num[b-fwc7x6vqym] {
    text-align: right;
    font-feature-settings: 'tnum';
}
.tx-table td[b-fwc7x6vqym] {
    padding: 1.1rem 1.2rem;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--grey-200);
    color: var(--text-primary);
    vertical-align: middle;
}
.tx-table tr:last-child td[b-fwc7x6vqym] {
    border-bottom: none;
}
.tx-table tr:hover td[b-fwc7x6vqym] {
    background: var(--surface-light);
}
.tx-addr[b-fwc7x6vqym] {
    font-weight: 500;
}
.tx-addr .unit[b-fwc7x6vqym] {
    color: var(--text-secondary);
    font-weight: 400;
}
.tx-type[b-fwc7x6vqym] {
    font-size: 1.15rem;
    color: var(--text-secondary);
}
.tx-mls[b-fwc7x6vqym] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
}
.tx-display-tag[b-fwc7x6vqym] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--gold);
    color: #fff;
    margin-left: 0.6rem;
    vertical-align: middle;
}

/* === Flag form === */
.tx-flag-btn[b-fwc7x6vqym] {
    background: transparent;
    border: 1px solid var(--grey-300);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.tx-flag-btn:hover[b-fwc7x6vqym] {
    border-color: var(--error-red);
    color: var(--error-red);
}
.tx-flag-btn.flagging[b-fwc7x6vqym] {
    border-color: var(--error-red);
    color: var(--error-red);
}
.flag-pill[b-fwc7x6vqym] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: rgba(253, 184, 30, 0.16);
    color: #8a6400;
    white-space: nowrap;
}
.flag-pill[b-fwc7x6vqym]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning-yellow);
}
.flag-form-row td[b-fwc7x6vqym] {
    background: var(--brand-blue-50) !important;
}
.flag-form[b-fwc7x6vqym] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0.6rem 0;
}
.flag-form-fields[b-fwc7x6vqym] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    align-items: start;
}
.flag-form-actions[b-fwc7x6vqym] {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
}

/* multi-select flag reasons */
.flag-checks[b-fwc7x6vqym] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.4rem;
    max-width: 540px;
}
@media (max-width: 600px) {
    .flag-checks[b-fwc7x6vqym] {
        grid-template-columns: 1fr;
    }
}
.flag-check[b-fwc7x6vqym] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    color: var(--text-primary);
    cursor: pointer;
}
.flag-check input[b-fwc7x6vqym] {
    width: 15px;
    height: 15px;
    accent-color: var(--brand-blue);
    flex-shrink: 0;
}

/* form controls used by the flag form */
.form-field[b-fwc7x6vqym] {
    display: flex;
    flex-direction: column;
}
.form-label[b-fwc7x6vqym] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--grey-700);
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
}
[b-fwc7x6vqym] .form-textarea{
    background: #fff;
    border: 1.5px solid var(--grey-300);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    font-family: var(--font-secondary);
    font-size: 1.55rem;
    font-weight: 400;
    color: var(--text-primary);
    width: 100%;
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}
[b-fwc7x6vqym] .form-textarea:focus{
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.1);
}
[b-fwc7x6vqym] .form-textarea::placeholder{
    color: var(--grey-500);
    font-weight: 400;
}
.form-hint[b-fwc7x6vqym] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    font-family: var(--font-secondary);
}

.btn-sm[b-fwc7x6vqym] {
    padding: 0.7rem 1.4rem;
    font-size: 1.25rem;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.btn-sm.solid[b-fwc7x6vqym] {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}
.btn-sm.solid:hover[b-fwc7x6vqym] {
    background: var(--brand-blue-dark);
}
.btn-sm.solid:disabled[b-fwc7x6vqym] {
    opacity: 0.5;
    cursor: default;
}
.btn-sm.outline[b-fwc7x6vqym] {
    background: transparent;
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.btn-sm.outline:hover[b-fwc7x6vqym] {
    background: var(--brand-blue-50);
}

/* percentile meter */
.rank-meter[b-fwc7x6vqym] {
    margin-top: 0.7rem;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.rank-meter-track[b-fwc7x6vqym] {
    position: relative;
    flex: 1;
    max-width: 130px;
    height: 5px;
    background: var(--grey-200);
    border-radius: 999px;
    overflow: hidden;
}
.rank-meter-fill[b-fwc7x6vqym] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-dark));
    transform: scaleX(var(--p, 1));
    transform-origin: left;
}
.rank-meter-fill.top[b-fwc7x6vqym] {
    background: linear-gradient(90deg, #e6c074, var(--gold));
}
details[open] .rank-meter-fill[b-fwc7x6vqym] {
    animation: meterGrow-b-fwc7x6vqym 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes meterGrow-b-fwc7x6vqym {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(var(--p, 1));
    }
}
.rank-meter-label[b-fwc7x6vqym] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}
.rank-meter-label.top[b-fwc7x6vqym] {
    color: #7a5e16;
}

/* mobile placement rows */
@media (max-width: 860px) {
    .lb-row[b-fwc7x6vqym] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 1.6rem 1.6rem;
    }
    .place-vol[b-fwc7x6vqym],
    .place-tx[b-fwc7x6vqym] {
        text-align: left;
    }
    .lb-row .lb-cta[b-fwc7x6vqym] {
        width: 100%;
        margin-top: 0.5rem;
    }
    .lb-row .lb-cta .lb-contact-btn[b-fwc7x6vqym] {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    .place-vol[b-fwc7x6vqym]::before,
    .place-tx[b-fwc7x6vqym]::before {
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-secondary);
        font-weight: 700;
        margin-right: 0.5rem;
    }
    .place-vol[b-fwc7x6vqym]::before {
        content: 'Volume';
    }
    .place-tx[b-fwc7x6vqym]::before {
        content: 'Closings';
    }
    .rank-meter-track[b-fwc7x6vqym] {
        max-width: none;
    }
}

/* mobile: reflow the closings table into stacked cards */
@media (max-width: 860px) {
    .tx-table[b-fwc7x6vqym],
    .tx-table tbody[b-fwc7x6vqym],
    .tx-table tr[b-fwc7x6vqym],
    .tx-table td[b-fwc7x6vqym] {
        display: block;
        width: 100%;
    }
    .tx-table[b-fwc7x6vqym] {
        min-width: 0;
        border: none;
        background: transparent;
    }
    .tx-table thead[b-fwc7x6vqym] {
        display: none;
    }
    .tx-table tr[b-fwc7x6vqym] {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--grey-200);
        border-radius: 10px;
        padding: 1.3rem 1.4rem;
        margin-bottom: 1rem;
    }
    .tx-table tr:last-child[b-fwc7x6vqym] {
        margin-bottom: 0;
    }
    .tx-table tr:hover td[b-fwc7x6vqym] {
        background: transparent;
    }
    .tx-table td[b-fwc7x6vqym] {
        border: none;
        padding: 0.4rem 0;
        text-align: left !important;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1.2rem;
        font-size: 1.35rem;
    }
    .tx-table td[b-fwc7x6vqym]::before {
        content: '';
        font-size: 1rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-secondary);
        font-weight: 700;
        flex-shrink: 0;
    }
    .tx-table td:nth-child(1)[b-fwc7x6vqym]::before {
        content: 'Sold';
    }
    .tx-table td:nth-child(3)[b-fwc7x6vqym]::before {
        content: 'Price';
    }
    .tx-table td:nth-child(4)[b-fwc7x6vqym]::before {
        content: 'Type';
    }
    .tx-table td:nth-child(5)[b-fwc7x6vqym]::before {
        content: 'MLS';
    }
    .tx-table td:nth-child(2)[b-fwc7x6vqym] {
        order: -1;
        display: block;
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 0.7rem;
    }
    .tx-table td:nth-child(2)[b-fwc7x6vqym]::before {
        display: none;
    }
    .tx-table td.num:nth-child(3)[b-fwc7x6vqym] {
        font-weight: 600;
        font-size: 1.45rem;
    }
    .tx-table td:nth-child(6)[b-fwc7x6vqym] {
        margin-top: 0.9rem;
    }
    .tx-table td:nth-child(6)[b-fwc7x6vqym]::before {
        display: none;
    }
    .tx-table td:nth-child(6) .tx-flag-btn[b-fwc7x6vqym],
    .tx-table td:nth-child(6) .flag-pill[b-fwc7x6vqym] {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .tx-table tr:has(> td[colspan])[b-fwc7x6vqym] {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0.6rem 0 0;
    }
    .tx-table td[colspan][b-fwc7x6vqym] {
        display: block;
    }
    .tx-table td[colspan][b-fwc7x6vqym]::before {
        display: none;
    }
    .flag-form-row td[colspan][b-fwc7x6vqym] {
        text-align: left !important;
        padding: 1.4rem !important;
        border-radius: 10px;
    }
    .lb-contact-btn[b-fwc7x6vqym],
    .btn-sm[b-fwc7x6vqym] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    details[b-fwc7x6vqym],
    details.flash > summary .lb-row[b-fwc7x6vqym],
    details[open] > .lb-expand[b-fwc7x6vqym],
    details[open] .rank-meter-fill[b-fwc7x6vqym] {
        animation: none !important;
    }
    .rank-meter-fill[b-fwc7x6vqym] {
        transform: scaleX(var(--p, 1)) !important;
    }
}
/* /Components/Pages/MyRankings/RecordCard.razor.rz.scp.css */
/* Your record card + Request-a-change form. Verbatim from
   AgentArena.Documentation/Mock/RankingAudit/my-rankings.html (.card 172-198,
   form controls 200-227, .rec-* 401-464, collapse-host 1097-1104,
   .miss-success 671-684). */

.section-head[b-q2bi12f37p] {
    margin-bottom: 1.4rem;
}
.section-title[b-q2bi12f37p] {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.section-intro[b-q2bi12f37p] {
    font-size: 1.45rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-top: 0.4rem;
    max-width: 760px;
}

/* === Card === */
.card[b-q2bi12f37p] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
}
.card-body[b-q2bi12f37p] {
    padding: 2rem 2.4rem;
}
.card-foot[b-q2bi12f37p] {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1.4rem 2.4rem;
    background: var(--surface-light);
    border-top: 1px solid var(--grey-200);
}
.card-foot.is-hidden[b-q2bi12f37p] {
    display: none;
}

/* === Form controls === */
.form-field[b-q2bi12f37p] {
    display: flex;
    flex-direction: column;
}
.form-label[b-q2bi12f37p] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--grey-700);
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
}
[b-q2bi12f37p] .form-input,
[b-q2bi12f37p] .form-select,
[b-q2bi12f37p] .form-textarea{
    background: #fff;
    border: 1.5px solid var(--grey-300);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    font-family: var(--font-primary);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--text-primary);
    width: 100%;
}
[b-q2bi12f37p] .form-textarea{
    font-family: var(--font-secondary);
    font-weight: 400;
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}
[b-q2bi12f37p] .form-input:focus,
[b-q2bi12f37p] .form-select:focus,
[b-q2bi12f37p] .form-textarea:focus{
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.1);
}
[b-q2bi12f37p] .form-input::placeholder,
[b-q2bi12f37p] .form-textarea::placeholder{
    color: var(--grey-500);
    font-weight: 400;
}
.form-hint[b-q2bi12f37p] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    font-family: var(--font-secondary);
}
.form-grid[b-q2bi12f37p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}
@media (max-width: 600px) {
    .form-grid[b-q2bi12f37p] {
        grid-template-columns: 1fr;
    }
}

/* === Your record card === */
.rec-list[b-q2bi12f37p] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.rec-row[b-q2bi12f37p] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.6rem;
    align-items: start;
}
@media (max-width: 600px) {
    .rec-row[b-q2bi12f37p] {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}
.rec-key[b-q2bi12f37p] {
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    padding-top: 0.3rem;
}
.rec-val[b-q2bi12f37p] {
    font-size: 1.6rem;
    color: var(--text-primary);
}
.rec-val .name[b-q2bi12f37p] {
    font-weight: 600;
}
.rec-badge[b-q2bi12f37p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--brand-blue-50);
    color: var(--brand-blue-dark);
    border: 1px solid var(--brand-blue-200);
    margin-left: 0.6rem;
    vertical-align: middle;
}
.rec-responsible[b-q2bi12f37p] {
    background: var(--brand-blue-50);
    border: 1px solid var(--brand-blue-200);
    border-radius: 8px;
    padding: 1.6rem 1.8rem;
    margin-top: 0.4rem;
}
.rec-responsible .lead[b-q2bi12f37p] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-bottom: 0.6rem;
}
.rec-responsible .addr[b-q2bi12f37p] {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
.rec-responsible .meta[b-q2bi12f37p] {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
}
.rec-legend[b-q2bi12f37p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin-top: 0.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--grey-200);
}
@media (max-width: 600px) {
    .rec-legend[b-q2bi12f37p] {
        grid-template-columns: 1fr;
    }
}
.rec-legend-col .h[b-q2bi12f37p] {
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.rec-legend-col .b[b-q2bi12f37p] {
    font-size: 1.3rem;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    line-height: 1.5;
}
.rec-legend-link[b-q2bi12f37p] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.8rem;
    font-size: 1.25rem;
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 600;
}
.rec-legend-link:hover[b-q2bi12f37p] {
    text-decoration: underline;
}
/* request-a-change form on the record card */
.rec-change-form[b-q2bi12f37p] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--grey-200);
}
.rcf-title[b-q2bi12f37p] {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
.rcf-sub[b-q2bi12f37p] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-bottom: 1.6rem;
    max-width: 760px;
}

/* === Success banner + status line === */
.miss-success[b-q2bi12f37p] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(46, 133, 64, 0.1);
    border: 1px solid rgba(46, 133, 64, 0.3);
    border-radius: 8px;
    padding: 1.2rem 1.6rem;
    margin-bottom: 1.6rem;
    font-size: 1.35rem;
    color: var(--success-green);
    font-weight: 500;
}
.miss-success svg[b-q2bi12f37p] {
    width: 20px;
    height: 20px;
    fill: var(--success-green);
    flex-shrink: 0;
}
.profile-status[b-q2bi12f37p] {
    font-size: 1.35rem;
}
.profile-status.error[b-q2bi12f37p] {
    color: var(--error-red);
}

/* === Buttons === */
.aa-btn[b-q2bi12f37p] {
    padding: 0.7rem 1.4rem;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.aa-btn-solid[b-q2bi12f37p] {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}
.aa-btn-solid:hover[b-q2bi12f37p] {
    background: var(--brand-blue-dark);
}

/* === Collapsible host === */
.collapse-host[b-q2bi12f37p] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.collapse-host.open[b-q2bi12f37p] {
    grid-template-rows: 1fr;
}
.collapse-host > .collapse-inner[b-q2bi12f37p] {
    overflow: hidden;
    min-height: 0;
}
.toggle-btn .tb-caret[b-q2bi12f37p] {
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.25s ease;
}
.toggle-btn[aria-expanded='true'] .tb-caret[b-q2bi12f37p] {
    transform: rotate(180deg);
}
.rec-change-trigger[b-q2bi12f37p] {
    margin-top: 2.2rem;
}
@media (max-width: 860px) {
    .rec-change-trigger[b-q2bi12f37p] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .collapse-host[b-q2bi12f37p] {
        transition: none !important;
    }
    .collapse-host.open[b-q2bi12f37p] {
        grid-template-rows: 1fr;
    }
}

/* <ValidationMessage> is a child component; ::deep is required for this scoped
   rule to reach its rendered output (matches the mock's small red form error). */
[b-q2bi12f37p] .validation-message {
    font-size: 1.1rem;
    color: var(--error-red);
    margin-top: 0.4rem;
    font-weight: 500;
}
/* /Components/Pages/MyRankings/ReportMissingForm.razor.rz.scp.css */
/* Report a missing sale. Verbatim from
   AgentArena.Documentation/Mock/RankingAudit/my-rankings.html (.card 172-198,
   form controls 200-227, .miss-success/.proof-group/.seg-toggle 670-712,
   collapse-host 1097-1104). */

.card[b-s09lcl4h2o] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
}
.card-head[b-s09lcl4h2o] {
    padding: 1.8rem 2.4rem;
    border-bottom: 1px solid var(--grey-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.card-foot[b-s09lcl4h2o] {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1.4rem 2.4rem;
    background: var(--surface-light);
    border-top: 1px solid var(--grey-200);
}
.card-foot.is-hidden[b-s09lcl4h2o] {
    display: none;
}

/* form controls */
.form-field[b-s09lcl4h2o] {
    display: flex;
    flex-direction: column;
}
.form-label[b-s09lcl4h2o] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--grey-700);
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
}
[b-s09lcl4h2o] .form-input,
[b-s09lcl4h2o] .form-select,
[b-s09lcl4h2o] .form-textarea{
    background: #fff;
    border: 1.5px solid var(--grey-300);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    font-family: var(--font-primary);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--text-primary);
    width: 100%;
}
[b-s09lcl4h2o] .form-textarea{
    font-family: var(--font-secondary);
    font-weight: 400;
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}
[b-s09lcl4h2o] .form-input:focus,
[b-s09lcl4h2o] .form-select:focus,
[b-s09lcl4h2o] .form-textarea:focus{
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.1);
}
[b-s09lcl4h2o] .form-input::placeholder,
[b-s09lcl4h2o] .form-textarea::placeholder{
    color: var(--grey-500);
    font-weight: 400;
}
.form-hint[b-s09lcl4h2o] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    font-family: var(--font-secondary);
}
.form-grid[b-s09lcl4h2o] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}
@media (max-width: 600px) {
    .form-grid[b-s09lcl4h2o] {
        grid-template-columns: 1fr;
    }
    [b-s09lcl4h2o] .form-input,
    [b-s09lcl4h2o] .form-select,
    [b-s09lcl4h2o] .form-textarea{
        font-size: 1.6rem;
    }
}

/* validation messages from DataAnnotationsValidator. <ValidationMessage> is a child
   component, so its output does not carry this component's scope id; ::deep is
   required for the scoped rule to reach it. */
[b-s09lcl4h2o] .validation-message {
    font-size: 1.1rem;
    color: var(--error-red);
    margin-top: 0.4rem;
    font-weight: 500;
}

/* === Report-missing scoped === */
.miss-success[b-s09lcl4h2o] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(46, 133, 64, 0.1);
    border: 1px solid rgba(46, 133, 64, 0.3);
    border-radius: 8px;
    padding: 1.2rem 1.6rem;
    margin-bottom: 1.6rem;
    font-size: 1.35rem;
    color: var(--success-green);
    font-weight: 500;
}
.miss-success svg[b-s09lcl4h2o] {
    width: 20px;
    height: 20px;
    fill: var(--success-green);
    flex-shrink: 0;
}
.miss-collapsed-head[b-s09lcl4h2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.miss-collapsed-head .blurb[b-s09lcl4h2o] {
    font-size: 1.4rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}
.proof-group[b-s09lcl4h2o] {
    border: 1px solid var(--brand-blue-200);
    background: var(--brand-blue-50);
    border-radius: 8px;
    padding: 1.6rem;
}
.proof-group .h[b-s09lcl4h2o] {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-blue-dark);
    margin-bottom: 1rem;
}
.seg-toggle[b-s09lcl4h2o] {
    display: inline-flex;
    border: 1px solid var(--brand-blue-200);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff;
}
.seg-toggle button[b-s09lcl4h2o] {
    padding: 0.7rem 1.4rem;
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 600;
    border: none;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
}
.seg-toggle button.on[b-s09lcl4h2o] {
    background: var(--brand-blue);
    color: #fff;
}
.profile-status[b-s09lcl4h2o] {
    font-size: 1.35rem;
}
.profile-status.error[b-s09lcl4h2o] {
    color: var(--error-red);
}

/* buttons + collapse */
.aa-btn[b-s09lcl4h2o] {
    padding: 0.7rem 1.4rem;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.aa-btn-solid[b-s09lcl4h2o] {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}
.aa-btn-solid:hover[b-s09lcl4h2o] {
    background: var(--brand-blue-dark);
}
.collapse-host[b-s09lcl4h2o] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.collapse-host.open[b-s09lcl4h2o] {
    grid-template-rows: 1fr;
}
.collapse-host > .collapse-inner[b-s09lcl4h2o] {
    overflow: hidden;
    min-height: 0;
}
.toggle-btn .tb-caret[b-s09lcl4h2o] {
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.25s ease;
}
.toggle-btn[aria-expanded='true'] .tb-caret[b-s09lcl4h2o] {
    transform: rotate(180deg);
}

@media (max-width: 600px) {
    .seg-toggle button[b-s09lcl4h2o] {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .collapse-host[b-s09lcl4h2o] {
        transition: none !important;
    }
    .collapse-host.open[b-s09lcl4h2o] {
        grid-template-rows: 1fr;
    }
}
/* /Components/Pages/MyRankings/TicketHistory.razor.rz.scp.css */
/* Your requests / tickets. Verbatim from
   AgentArena.Documentation/Mock/RankingAudit/my-rankings.html (.tk-* 714-784,
   .title-pill 1107-1120, expandIn 1090-1092). */

.section-head[b-9cdvp0ywwo] {
    margin-bottom: 1.4rem;
}
.section-title[b-9cdvp0ywwo] {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.section-intro[b-9cdvp0ywwo] {
    font-size: 1.45rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-top: 0.4rem;
    max-width: 760px;
}

/* request count pill on a section title */
.title-pill[b-9cdvp0ywwo] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.9rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--brand-blue-dark);
    background: var(--brand-blue-50);
    border: 1px solid var(--brand-blue-200);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    vertical-align: middle;
}

.tk-card[b-9cdvp0ywwo] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
}
.tk-card details[b-9cdvp0ywwo] {
    border-bottom: 1px solid var(--grey-200);
}
.tk-card details:last-child[b-9cdvp0ywwo] {
    border-bottom: none;
}
.tk-card details summary[b-9cdvp0ywwo] {
    list-style: none;
    cursor: pointer;
}
.tk-card details summary[b-9cdvp0ywwo]::-webkit-details-marker {
    display: none;
}
.tk-card details summary[b-9cdvp0ywwo]::marker {
    display: none;
}
.tk-row[b-9cdvp0ywwo] {
    display: grid;
    grid-template-columns: 130px 1fr 120px 150px 24px;
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    align-items: center;
    transition: background 0.15s ease;
}
.tk-card details[open] .tk-row[b-9cdvp0ywwo] {
    background: var(--brand-blue-50);
}
.tk-card details summary:hover .tk-row[b-9cdvp0ywwo] {
    background: var(--surface-light);
}
.tk-card details[open] summary:hover .tk-row[b-9cdvp0ywwo] {
    background: var(--brand-blue-50);
}
.tk-type[b-9cdvp0ywwo] {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-blue-dark);
}
.tk-summary[b-9cdvp0ywwo] {
    font-size: 1.4rem;
    color: var(--text-primary);
    font-weight: 500;
    min-width: 0;
}
.tk-date[b-9cdvp0ywwo] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-feature-settings: 'tnum';
}
.tk-status[b-9cdvp0ywwo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
    justify-self: start;
}
.tk-status[b-9cdvp0ywwo]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* Neutral grey/blue status palette: approved = solid blue, investigating = blue
   outline + grey text/dot, rejected = grey, new = light grey outline. Dots
   inherit currentColor. */
.tk-status.new[b-9cdvp0ywwo] {
    background: var(--surface-light);
    color: var(--text-secondary);
    border: 1px solid var(--grey-300);
}
.tk-status.investigating[b-9cdvp0ywwo] {
    background: #fff;
    color: var(--text-secondary);
    border: 1px solid var(--brand-blue);
}
.tk-status.approved[b-9cdvp0ywwo] {
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
}
.tk-status.rejected[b-9cdvp0ywwo] {
    background: var(--grey-200);
    color: var(--grey-600);
    border: 1px solid var(--grey-300);
}
.tk-caret[b-9cdvp0ywwo] {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    display: inline-flex;
}
.tk-caret svg[b-9cdvp0ywwo] {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.tk-card details[open] .tk-caret[b-9cdvp0ywwo] {
    transform: rotate(180deg);
}
.tk-thread[b-9cdvp0ywwo] {
    padding: 1.8rem 2rem 2.2rem;
    background: var(--brand-blue-50);
    border-top: 1px dashed var(--brand-blue-200);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.tk-bubble[b-9cdvp0ywwo] {
    max-width: 80%;
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    font-size: 1.3rem;
    line-height: 1.5;
}
.tk-bubble .who[b-9cdvp0ywwo] {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.4rem;
    opacity: 0.8;
}
.tk-bubble.agent[b-9cdvp0ywwo] {
    align-self: flex-end;
    background: #fff;
    border: 1px solid var(--grey-200);
    color: var(--text-primary);
    border-bottom-right-radius: 4px;
}
.tk-bubble.agent .who[b-9cdvp0ywwo] {
    color: var(--text-secondary);
}
.tk-bubble.aa[b-9cdvp0ywwo] {
    align-self: flex-start;
    background: var(--brand-blue);
    color: #fff;
    border-bottom-left-radius: 4px;
    font-family: var(--font-secondary);
}
.tk-bubble.aa .who[b-9cdvp0ywwo] {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-primary);
}
/* Awaiting review: no reviewer reply has landed yet, so the bubble is muted grey
   (mirrors the mock's greyed "awaiting" bubble) rather than the solid-blue reply
   treatment, so an unanswered request never reads as already answered. */
.tk-bubble.aa.pending[b-9cdvp0ywwo] {
    background: var(--surface-light);
    color: var(--text-secondary);
}
.tk-bubble.aa.pending .who[b-9cdvp0ywwo] {
    color: var(--text-secondary);
}
.tk-bubble.aa .res-status[b-9cdvp0ywwo] {
    margin-top: 0.7rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.92;
}
@media (max-width: 700px) {
    .tk-row[b-9cdvp0ywwo] {
        grid-template-columns: 1fr auto;
        column-gap: 1rem;
        row-gap: 0.5rem;
        align-items: center;
    }
    .tk-type[b-9cdvp0ywwo] {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .tk-summary[b-9cdvp0ywwo] {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }
    .tk-status[b-9cdvp0ywwo] {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        align-self: start;
    }
    .tk-date[b-9cdvp0ywwo] {
        grid-column: 1;
        grid-row: 3;
    }
    .tk-caret[b-9cdvp0ywwo] {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }
    .tk-bubble[b-9cdvp0ywwo] {
        max-width: 100%;
    }
}

/* smoother expand body */
.tk-card details[open] > .tk-thread[b-9cdvp0ywwo] {
    animation: expandIn-b-9cdvp0ywwo 0.32s ease both;
}
@keyframes expandIn-b-9cdvp0ywwo {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tk-card details[open] > .tk-thread[b-9cdvp0ywwo] {
        animation: none !important;
    }
}
/* /Components/Pages/MyRankingsPage.razor.rz.scp.css */
/* My Rankings page shell. Verbatim from
   AgentArena.Documentation/Mock/RankingAudit/my-rankings.html (hero band,
   content column, section heads). Brand tokens (--brand-blue etc.) are global
   in wwwroot/css/app.css; do not redeclare. Nav + footer are reused live
   components (PivotNav / PivotFooter) and carry their own scoped CSS. */

/* === Hero (verbatim, mock 86-146) === */
.hero-band[b-dmo6c24cul] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: #fff;
    padding: 5rem 2.4rem 4rem;
}
.hero-inner[b-dmo6c24cul] {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.hero-eyebrow[b-dmo6c24cul] {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    display: inline-flex;
    gap: 1rem;
    align-items: center;
}
.hero-eyebrow .basic-chip[b-dmo6c24cul] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 700;
    padding: 0.35rem 0.7rem 0.25rem;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    line-height: 1;
}
.hero-h1[b-dmo6c24cul] {
    font-size: 4.4rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}
.hero-h1 .light[b-dmo6c24cul] {
    font-weight: 300;
    opacity: 0.8;
}
.hero-sub[b-dmo6c24cul] {
    font-size: 1.7rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    max-width: 660px;
    margin: 0 auto;
    font-family: var(--font-secondary);
}
.verified-chip[b-dmo6c24cul] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.verified-chip svg[b-dmo6c24cul] {
    width: 16px;
    height: 16px;
    fill: #fff;
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .hero-h1[b-dmo6c24cul] {
        font-size: 3.2rem;
    }
}

/* === Content column (single, centered) === */
.content[b-dmo6c24cul] {
    max-width: 1140px;
    /* width:100% is load-bearing. The layout (.aa-app > main) is display:flex,
       and a flex item's horizontal `margin:auto` OVERRIDES align-items:stretch,
       so without a definite width .content shrink-wraps to its content, which is
       why the column width jumped between scopes (long vs short rank) and when a
       section expanded. A definite width pins it independent of content. */
    width: 100%;
    margin: 0 auto;
    padding: 3rem 2.4rem 6rem;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}
.section-head[b-dmo6c24cul] {
    margin-bottom: 1.4rem;
}
.section-title[b-dmo6c24cul] {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.section-intro[b-dmo6c24cul] {
    font-size: 1.45rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-top: 0.4rem;
    max-width: 760px;
}

/* The page renders each section directly, so sub-components live in their own
   scoped .razor.css. .section-head / .section-title / .section-intro are used
   inline here and so stay scoped to this component. */

/* page-level error + empty + inactive states (page-local, not in the mock) */
.mr-page-error[b-dmo6c24cul] {
    font-size: 1.45rem;
    color: var(--error-red);
    background: rgba(216, 57, 51, 0.08);
    border: 1px solid var(--error-red-light);
    border-radius: 12px;
    padding: 2rem 2.4rem;
}
.mr-page-empty[b-dmo6c24cul] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    padding: 3rem 2.4rem;
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    line-height: 1.55;
}
.aa-btn[b-dmo6c24cul] {
    padding: 0.7rem 1.4rem;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.aa-btn-solid[b-dmo6c24cul] {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}
.aa-btn-solid:hover[b-dmo6c24cul] {
    background: var(--brand-blue-dark);
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
/* Legal pages (Privacy Policy, Terms & Conditions). Content is admin-managed
   HTML injected as MarkupString, so structural styling uses ::deep to reach
   through CSS isolation. Visual lineage: matches the legacy site's spacious
   typography (Poppins headers, PT Sans body, blue accents) but with the
   pivot's white card-on-grey background and matched border radius. */

/* width:100% prevents the loading-state jump: without it, the section
   shrinks to the natural width of the header (h1 + eyebrow) while the
   admin-managed body is still being fetched, then snaps wider when the
   .legal-body renders. With width:100% the section always claims 880px,
   so the header lands in its final position from first paint. */
.legal-page[b-lg358hae14] {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 4rem 2.4rem 6rem;
    box-sizing: border-box;
}

.legal-head[b-lg358hae14] {
    margin-bottom: 2.4rem;
}

.legal-h1[b-lg358hae14] {
    font-family: var(--font-primary);
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0.6rem 0 0;
    color: var(--text-primary);
}

.legal-meta[b-lg358hae14] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin: 0.8rem 0 0;
}

.legal-loading[b-lg358hae14],
.legal-missing[b-lg358hae14] {
    font-size: 1.4rem;
    color: var(--text-secondary);
    padding: 1.6rem 0;
}

.legal-missing a[b-lg358hae14] {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-body[b-lg358hae14] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 3rem 3.4rem;
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Admin-managed HTML is emitted by MarkupString — use ::deep so the CSS
   isolation scope still reaches the dynamically-injected nodes. The DB body
   uses <h3> for numbered top-level sections (legacy convention shared with
   AgentArena.Site), so h3 carries the prominent border-bottom treatment.
   h2 keeps a slightly larger fallback for future content that wants it. */

.legal-body[b-lg358hae14]  h2,
.legal-body[b-lg358hae14]  h3,
.legal-body[b-lg358hae14]  h4 {
    font-family: var(--font-primary);
    color: var(--brand-blue-dark);
    font-weight: 600;
    line-height: 1.25;
}

.legal-body[b-lg358hae14]  h2 {
    font-size: 2.4rem;
    margin: 2.8rem 0 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--brand-blue-200);
}

.legal-body[b-lg358hae14]  h3 {
    font-size: 2rem;
    margin: 2.4rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--brand-blue-200);
}

.legal-body[b-lg358hae14]  h4 {
    font-size: 1.55rem;
    margin: 1.8rem 0 0.6rem;
    color: var(--brand-blue);
}

.legal-body[b-lg358hae14]  h2:first-child,
.legal-body[b-lg358hae14]  h3:first-child,
.legal-body[b-lg358hae14]  h4:first-child {
    margin-top: 0;
}

.legal-body[b-lg358hae14]  p {
    margin: 0 0 1.2rem;
}

.legal-body[b-lg358hae14]  p:last-child {
    margin-bottom: 0;
}

/* "Effective Date: ..." callout sits directly under the H1; lightly tinted
   so it reads as metadata rather than body copy. */
.legal-body[b-lg358hae14]  p.legal-effective {
    display: inline-block;
    background: var(--brand-blue-50, #eef4ff);
    border-left: 3px solid var(--brand-blue);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-size: 1.35rem;
    color: var(--text-primary);
    margin-bottom: 1.6rem;
}

.legal-body[b-lg358hae14]  ul,
.legal-body[b-lg358hae14]  ol {
    margin: 0 0 1.4rem 0;
    padding-left: 2rem;
}

.legal-body[b-lg358hae14]  li {
    margin-bottom: 0.5rem;
}

.legal-body[b-lg358hae14]  strong {
    color: var(--brand-blue-dark);
    font-family: var(--font-primary);
    font-weight: 600;
}

.legal-body[b-lg358hae14]  a {
    color: var(--brand-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--brand-blue-200);
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Effective-date callout has its own background — no underline border. */
.legal-body[b-lg358hae14]  p.legal-effective a {
    border-bottom: none;
}

.legal-body[b-lg358hae14]  a:hover {
    color: var(--brand-blue-dark);
    border-bottom-color: var(--brand-blue-dark);
}

.legal-body[b-lg358hae14]  sup {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
}

@media (max-width: 720px) {
    .legal-page[b-lg358hae14] {
        padding: 2.4rem 1.6rem 3.6rem;
    }
    .legal-h1[b-lg358hae14] {
        font-size: 2.6rem;
    }
    .legal-body[b-lg358hae14] {
        padding: 2rem 1.8rem;
        font-size: 1.35rem;
    }
    .legal-body[b-lg358hae14]  h2 {
        font-size: 2rem;
    }
    .legal-body[b-lg358hae14]  h3 {
        font-size: 1.7rem;
    }
    .legal-body[b-lg358hae14]  h4 {
        font-size: 1.4rem;
    }
}
/* /Components/Pages/ProfilePage.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/profile.html
   verbatim. Layout = sticky 240px sidebar + 1fr main column inside a
   1080px-max wrapper. Cards use .card / .card-head / .card-body / .card-foot
   per the mock. The blue-gradient hero from the previous Profile page is
   replaced by the white .page-head card at the top of main. */

.profile-loading[b-6yv4go5bxf],
.profile-error[b-6yv4go5bxf] {
    padding: 4rem 2.4rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.55rem;
}

.profile-error[b-6yv4go5bxf] {
    color: var(--error-red);
}

/* === .page wrapper === */
.profile-page[b-6yv4go5bxf] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 3.6rem 2.4rem 6rem;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.4rem;
}

@media (max-width: 880px) {
    .profile-page[b-6yv4go5bxf] {
        grid-template-columns: 1fr;
    }
}

/* === Section nav (sticky sidebar) === */
.section-nav[b-6yv4go5bxf] {
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.section-nav-h[b-6yv4go5bxf] {
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.section-nav-list[b-6yv4go5bxf] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.section-nav-list a[b-6yv4go5bxf] {
    display: block;
    padding: 0.8rem 1.2rem;
    font-size: 1.3rem;
    color: var(--grey-700);
    text-decoration: none;
    border-radius: 6px;
}

.section-nav-list a:hover[b-6yv4go5bxf] {
    background: #fff;
    color: var(--brand-blue);
}

/* Active-section highlight intentionally omitted -- the scroll-spy adds the
   .active class as the user scrolls, but the highlight raced with the route
   fragment and only landed correctly for the topmost section. Per product
   direction we leave the nav unstyled in the active state so nothing
   misrepresents the user's scroll position. */

@media (max-width: 880px) {
    .section-nav[b-6yv4go5bxf] {
        position: static;
    }
    .section-nav-list[b-6yv4go5bxf] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .section-nav-list a[b-6yv4go5bxf] {
        padding: 0.6rem 1rem;
        border-radius: 999px;
        background: #fff;
    }
}

/* === Main column === */
.profile-main[b-6yv4go5bxf] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
}

/* === Page head (avatar + meta + completeness, NOT a hero gradient) === */
.page-head[b-6yv4go5bxf] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    padding: 2.8rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
}

@media (max-width: 720px) {
    .page-head[b-6yv4go5bxf] {
        grid-template-columns: 1fr;
        text-align: center;
    }
    /* Center the avatar over the stacked name/meta. As a fixed-width grid
       item it otherwise pins to the start (left) of the single column. */
    .profile-photo[b-6yv4go5bxf] {
        justify-self: center;
    }
}

.profile-photo[b-6yv4go5bxf] {
    position: relative;
    width: 110px;
    height: 110px;
}

.profile-photo .ring[b-6yv4go5bxf] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 90deg,
        var(--brand-blue) var(--ring-pct, 0%),
        var(--grey-200) var(--ring-pct, 0%) 100%
    );
    z-index: 0;
}

/* SplitAvatar now renders the avatar circle directly in place of the
   old .img div. Override its scoped sizing to match the legacy 110px
   layout and add the white border that sits above the conic ring. */
.profile-photo[b-6yv4go5bxf]  .split-av {
    width: 110px;
    height: 110px;
    border: 4px solid #fff;
    font-size: 3.2rem;
    position: relative;
    z-index: 1;
}

.profile-photo .upload[b-6yv4go5bxf] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 2;
    cursor: pointer;
}

.profile-photo .upload:hover[b-6yv4go5bxf] {
    background: var(--brand-blue-dark);
}

.sr-only[b-6yv4go5bxf] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.head-meta[b-6yv4go5bxf] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

@media (max-width: 720px) {
    .head-meta[b-6yv4go5bxf] {
        align-items: center;
    }
}

.head-name[b-6yv4go5bxf] {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.head-line[b-6yv4go5bxf] {
    font-size: 1.35rem;
    color: var(--text-secondary);
}

.head-tier[b-6yv4go5bxf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    background: var(--brand-blue-50);
    color: var(--brand-blue-dark);
    border-radius: 999px;
    width: fit-content;
    margin-top: 0.4rem;
}

.head-tier[b-6yv4go5bxf]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-blue);
}

.head-completeness[b-6yv4go5bxf] {
    text-align: right;
}

@media (max-width: 720px) {
    .head-completeness[b-6yv4go5bxf] {
        text-align: center;
    }
}

.completeness-bar[b-6yv4go5bxf] {
    width: 140px;
    height: 8px;
    background: var(--grey-200);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.6rem 0;
}

.completeness-bar > div[b-6yv4go5bxf] {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-blue) 0%, #3377cc 100%);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.completeness-lbl[b-6yv4go5bxf] {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.completeness-v[b-6yv4go5bxf] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-blue);
}

/* === Cards (.card / .card-head / .card-body / .card-foot) === */
.card[b-6yv4go5bxf] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
    scroll-margin-top: 12rem;
}

.card-head[b-6yv4go5bxf] {
    padding: 1.8rem 2.4rem;
    border-bottom: 1px solid var(--grey-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.card-title[b-6yv4go5bxf] {
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 0;
}

.card-sub[b-6yv4go5bxf] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    font-family: var(--font-secondary);
}

.card-body[b-6yv4go5bxf] {
    padding: 2rem 2.4rem;
}

.card-foot[b-6yv4go5bxf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1.4rem 2.4rem;
    background: var(--surface-light);
    border-top: 1px solid var(--grey-200);
    align-items: center;
    flex-wrap: wrap;
}

/* Optional info banner inside profile-info card */
.optional-banner[b-6yv4go5bxf] {
    background: var(--surface-light);
    border: 1px dashed var(--grey-300);
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}

.optional-banner[b-6yv4go5bxf]::before {
    content: "i";
    width: 24px;
    height: 24px;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-primary);
    flex-shrink: 0;
}

.optional-banner strong[b-6yv4go5bxf] {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: 600;
}

/* === Bio === */
.bio-textarea[b-6yv4go5bxf] {
    width: 100%;
    min-height: 140px;
    background: #fff;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    line-height: 1.55;
    color: var(--text-primary);
    resize: vertical;
}

.bio-textarea:focus[b-6yv4go5bxf] {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px var(--brand-blue-200);
}

.bio-meta[b-6yv4go5bxf] {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

.bio-meta .over[b-6yv4go5bxf] {
    color: var(--error-red);
    font-weight: 600;
}

/* === Social grid (mock: 2 cols, bordered rows, platform-tinted icons) === */
.social-grid[b-6yv4go5bxf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .social-grid[b-6yv4go5bxf] {
        grid-template-columns: 1fr;
    }
}

.social-row[b-6yv4go5bxf] {
    display: grid;
    grid-template-columns: 40px auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
}

/* Subtle grey "instagram.com/" hint sits between the icon and the
   editable handle so the user only types their own handle. */
.social-prefix[b-6yv4go5bxf] {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--text-secondary);
    white-space: nowrap;
    user-select: none;
}

.social-icon[b-6yv4go5bxf] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.social-icon svg[b-6yv4go5bxf] {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.social-row.li .social-icon[b-6yv4go5bxf] {
    background: rgba(0, 119, 181, 0.12);
    color: #0077b5;
}

.social-row.ig .social-icon[b-6yv4go5bxf] {
    background: rgba(225, 48, 108, 0.12);
    color: #e1306c;
}

.social-row.fb .social-icon[b-6yv4go5bxf] {
    background: rgba(24, 119, 242, 0.12);
    color: #1877f2;
}

.social-row.tw .social-icon[b-6yv4go5bxf] {
    background: rgba(0, 0, 0, 0.08);
    color: #000;
}

.social-row.web .social-icon[b-6yv4go5bxf] {
    background: var(--brand-blue-100);
    color: var(--brand-blue);
}

.social-input[b-6yv4go5bxf] {
    border: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    color: var(--text-primary);
    outline: none;
    width: 100%;
}

.social-input[b-6yv4go5bxf]::placeholder {
    color: var(--grey-500);
}

/* === Sign-in methods (mobile primary + passkey list) === */
.method-row[b-6yv4go5bxf] {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 1.4rem;
    align-items: center;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--grey-200);
}

.method-row:last-child[b-6yv4go5bxf] {
    border-bottom: none;
}

.method-icon[b-6yv4go5bxf] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--brand-blue-50);
    color: var(--brand-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
}

.method-icon svg[b-6yv4go5bxf] {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.method-info .h[b-6yv4go5bxf] {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.method-info .p[b-6yv4go5bxf] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    font-family: var(--font-secondary);
}

.method-actions[b-6yv4go5bxf] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.method-status[b-6yv4go5bxf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
}

.method-status.on[b-6yv4go5bxf] {
    background: rgba(46, 133, 64, 0.12);
    color: var(--success-green);
}

.method-status.off[b-6yv4go5bxf] {
    background: var(--surface-light);
    color: var(--text-secondary);
}

.method-status.on[b-6yv4go5bxf]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-green);
}

.passkey-list[b-6yv4go5bxf] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px dashed var(--grey-200);
}

.passkey-item[b-6yv4go5bxf] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
    background: var(--surface-light);
    border-radius: 8px;
    font-size: 1.25rem;
}

.passkey-item .nm[b-6yv4go5bxf] {
    font-weight: 600;
}

.passkey-item .meta[b-6yv4go5bxf] {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Rename + two-step delete affordances (passkey management) */
.passkey-item[b-6yv4go5bxf] {
    display: flex;
    grid-template-columns: none;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.passkey-item-info[b-6yv4go5bxf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.2rem;
}

.passkey-item-actions[b-6yv4go5bxf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.passkey-rename-input[b-6yv4go5bxf] {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 1.25rem;
    color: var(--text-primary);
}

.passkey-rename-input:focus[b-6yv4go5bxf] {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px var(--brand-blue-200);
}

.passkey-confirm[b-6yv4go5bxf] {
    font-size: 1.15rem;
    color: var(--error-red);
    font-weight: 600;
}

.passkey-danger[b-6yv4go5bxf] {
    border-color: var(--error-red) !important;
    color: var(--error-red) !important;
}

.passkey-danger:hover:not(:disabled)[b-6yv4go5bxf] {
    background: rgba(216, 57, 51, 0.08) !important;
}

/* === Membership gradient card === */
.membership-card[b-6yv4go5bxf] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: #fff;
    border-radius: 12px;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.4rem;
}

@media (max-width: 560px) {
    .membership-card[b-6yv4go5bxf] {
        grid-template-columns: 1fr;
    }

    /* The 48px 1fr auto grid squeezes the title into a sliver on a phone
       (the status pill claims the auto column), forcing "Mobile & SMS
       one-time code" to wrap a word per line. Drop to a two-column grid and
       move the status onto its own row under the text so the title gets the
       full width. */
    .method-row[b-6yv4go5bxf] {
        grid-template-columns: 40px 1fr;
        column-gap: 1rem;
        row-gap: 0.6rem;
        align-items: start;
    }

    .method-icon[b-6yv4go5bxf] {
        width: 40px;
        height: 40px;
        grid-column: 1;
        grid-row: 1;
    }

    .method-icon svg[b-6yv4go5bxf] {
        width: 22px;
        height: 22px;
    }

    .method-info[b-6yv4go5bxf] {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    /* Let the title wrap as a unit instead of stacking letter-by-letter. */
    .method-info .h[b-6yv4go5bxf] {
        flex-wrap: wrap;
        font-size: 1.4rem;
    }

    .method-actions[b-6yv4go5bxf] {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
    }
}

.membership-card .lbl[b-6yv4go5bxf] {
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.75;
}

.membership-card .nm[b-6yv4go5bxf] {
    font-size: 2rem;
    font-weight: 600;
    margin: 0.4rem 0 0.6rem;
}

.membership-card .meta[b-6yv4go5bxf] {
    font-size: 1.2rem;
    opacity: 0.85;
}

.membership-card .btn[b-6yv4go5bxf] {
    background: #fff;
    color: var(--brand-blue-dark);
    padding: 0.8rem 1.4rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.3rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-primary);
}

.membership-card .btn:hover[b-6yv4go5bxf] {
    background: var(--brand-blue-50);
}

.membership-card .btn:disabled[b-6yv4go5bxf] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Plan switch row sits below the membership-card and offers Upgrade /
   Downgrade buttons that call POST /api/v1/stripe/change-plan. Kept outside
   .membership-card so the styles don't inherit the white-on-blue palette. */
.plan-switch[b-6yv4go5bxf] {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.plan-switch .btn[b-6yv4go5bxf] {
    padding: 0.9rem 1.6rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.3rem;
    font-family: var(--font-primary);
    border: 1px solid var(--brand-blue);
    background: #fff;
    color: var(--brand-blue);
    cursor: pointer;
    white-space: nowrap;
}

.plan-switch .btn:hover:not(:disabled)[b-6yv4go5bxf] {
    background: var(--brand-blue-50);
}

.plan-switch .btn.btn-primary[b-6yv4go5bxf] {
    background: var(--brand-blue);
    color: #fff;
}

.plan-switch .btn.btn-primary:hover:not(:disabled)[b-6yv4go5bxf] {
    background: var(--brand-blue-dark);
}

.plan-switch .btn:disabled[b-6yv4go5bxf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.plan-switch-note[b-6yv4go5bxf] {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--text-secondary);
    max-width: 46ch;
}

/* === Status messages + button styling that piggybacks on aa-btn === */
.profile-status[b-6yv4go5bxf] {
    font-size: 1.35rem;
}

.profile-status.ok[b-6yv4go5bxf] {
    color: var(--success-green);
}

.profile-status.error[b-6yv4go5bxf] {
    color: var(--error-red);
}

.aa-btn[b-6yv4go5bxf] {
    padding: 0.7rem 1.4rem;
    font-family: var(--font-primary);
    font-size: 1.3rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
}

.aa-btn-outline[b-6yv4go5bxf] {
    background: transparent;
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
}

.aa-btn-outline:hover[b-6yv4go5bxf] {
    background: var(--brand-blue-50);
}

.aa-btn-solid[b-6yv4go5bxf] {
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
}

.aa-btn-solid:hover[b-6yv4go5bxf] {
    background: var(--brand-blue-dark);
}

.aa-btn:disabled[b-6yv4go5bxf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.aa-btn-sm[b-6yv4go5bxf] {
    padding: 0.55rem 1.1rem;
    font-size: 1.2rem;
}

/* === Profile-card-sms-consent (kept from previous version) === */
.profile-card-sms-consent[b-6yv4go5bxf] {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 1rem 0 1.4rem;
}

.profile-card-sms-consent a[b-6yv4go5bxf] {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* /Components/Pages/RegisterPage.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/register.html
   layout + typography. Mock structure:
   - .reg-hero: full-width blue-gradient hero with white text
   - .section / .section.alt: 6rem 0 padding sections
   - .wrap: 1180px inner wrapper
   - .billing-toggle wrapper margin-top: 2rem
   - .reg-form-section: gradient soft-to-white background
   - .reg-form-grid: 1-COLUMN container (the 2-column split is .auth-cols
     INSIDE the auth-card, not at the page level)
   - .reg-form-side: centered intro (selected plan pill + h2 + lede)
*/

/* === Hero band (blue gradient like leaderboard hero) === */
.reg-hero[b-7gefaycz0c] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: #fff;
    padding: 6rem 2.4rem 4.6rem;
}

.reg-hero-inner[b-7gefaycz0c] {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.reg-eyebrow[b-7gefaycz0c] {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.4rem;
}

.reg-h1[b-7gefaycz0c] {
    font-family: var(--font-primary);
    font-size: 4.2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin-bottom: 1.6rem;
}

.reg-h1 .light[b-7gefaycz0c] {
    font-weight: 300;
}

.reg-sub[b-7gefaycz0c] {
    font-size: 1.7rem;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-secondary);
    font-style: italic;
    line-height: 1.5;
    max-width: 680px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .reg-hero[b-7gefaycz0c] {
        padding: 4rem 1.6rem 3.4rem;
    }

    .reg-h1[b-7gefaycz0c] {
        font-size: 3rem;
    }

    .reg-sub[b-7gefaycz0c] {
        font-size: 1.45rem;
    }
}

/* === Section wrappers === */
.reg-plan-section[b-7gefaycz0c] {
    padding: 6rem 0;
    background: var(--surface-light);
}

/* === "Your rank, ready to share" showcase section (mirrors
   register.html .section.alt + .asset-row block verbatim, scaled-
   down sample cards next to a caption + dimension line) === */
.reg-assets-section[b-7gefaycz0c] {
    padding: 6rem 0;
    background: linear-gradient(180deg, #fff 0%, var(--surface-light) 100%);
}

.asset-row[b-7gefaycz0c] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    align-items: end;
    justify-items: center;
    max-width: 980px;
    margin: 0 auto;
}

@media (max-width: 880px) {
    .asset-row[b-7gefaycz0c] {
        grid-template-columns: 1fr;
        gap: 2.6rem;
    }
}

.asset[b-7gefaycz0c] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.asset-caption[b-7gefaycz0c] {
    margin-top: 1.4rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-align: center;
}

.asset-dim[b-7gefaycz0c] {
    display: block;
    margin-top: 0.25rem;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Frame around each <BadgePreview>. The component owns its own artwork
   (Components/Badges/BadgePreview.razor.css); this wrapper sizes it so
   the three previews sit side by side on the register page AND render
   at the same scale the dashboard BadgeCard uses, so the type +
   chips don't look squashed. Square + PDF fill the wrapper (width:100%
   inside); Story is hard-coded to 200px in BadgePreview.razor.css so
   its frame matches that. */
.asset-frame[b-7gefaycz0c] {
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.asset-story[b-7gefaycz0c] {
    width: 200px;
}

.asset-pdf[b-7gefaycz0c] {
    width: 240px;
}

.reg-form-section[b-7gefaycz0c] {
    padding: 5rem 0 6rem;
    background: linear-gradient(180deg, var(--surface-light) 0%, #fff 100%);
}

.reg-wrap[b-7gefaycz0c] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2.4rem;
}

.reg-section-head[b-7gefaycz0c] {
    text-align: center;
    margin-bottom: 3.6rem;
}

.reg-section-eyebrow[b-7gefaycz0c] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: 1.4rem;
}

.reg-section-title[b-7gefaycz0c] {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

.reg-section-title .blue[b-7gefaycz0c] {
    color: var(--brand-blue);
}

.reg-section-sub[b-7gefaycz0c] {
    font-size: 1.55rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    font-style: italic;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

.register-billing-toggle[b-7gefaycz0c] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* === Plan grid === */
.reg-plan-section[b-7gefaycz0c]  .plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 880px;
    margin: 0 auto;
}

@media (max-width: 880px) {
    .reg-plan-section[b-7gefaycz0c]  .plan-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* === Form section === */
.reg-form-grid[b-7gefaycz0c] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    max-width: 880px;
    margin: 0 auto;
}

.reg-form-side[b-7gefaycz0c] {
    text-align: center;
}

/* The AuthCard inside reg-form-section centers its h2 + steps + auth-cols
   block, matching the mock's `.reg-form-section .auth-h { text-align:
   center }` rule. Use ::deep so the rule reaches inside the AuthCard
   scoped CSS isolation. */
.reg-form-section[b-7gefaycz0c]  .auth-h {
    text-align: center;
    margin-bottom: 2rem;
}

/* 3-step indicator shared with the verify pages. Mirrors
   register.html .steps verbatim. */
.reg-form-section[b-7gefaycz0c]  .steps {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 2.4rem;
}

.reg-form-section[b-7gefaycz0c]  .step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--grey-500);
    background: var(--surface-light);
    border: 1px solid var(--grey-200);
}

.reg-form-section[b-7gefaycz0c]  .step .n {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grey-300);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.reg-form-section[b-7gefaycz0c]  .step.on {
    background: var(--brand-blue-50);
    border-color: var(--brand-blue-200);
    color: var(--brand-blue-dark);
}

.reg-form-section[b-7gefaycz0c]  .step.on .n {
    background: var(--brand-blue);
    color: #fff;
}

.selected-plan[b-7gefaycz0c] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-blue);
    background: var(--brand-blue-50);
    border: 1px solid var(--brand-blue-200);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.4rem;
}

.selected-plan .dot[b-7gefaycz0c] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-blue);
}

.reg-feature-list[b-7gefaycz0c] {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.reg-feature-list li[b-7gefaycz0c] {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    line-height: 1.5;
    padding-left: 1.6rem;
    position: relative;
}

.reg-feature-list li[b-7gefaycz0c]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-blue);
    font-weight: 700;
}

.reg-feature-list li strong[b-7gefaycz0c] {
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.register-error[b-7gefaycz0c] {
    margin: 1.2rem 0;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-md);
    background: rgba(216, 57, 51, 0.08);
    color: var(--error-red);
    font-size: 1.35rem;
}

@media (max-width: 880px) {
    .reg-section-title[b-7gefaycz0c] {
        font-size: 2.4rem;
    }

    .reg-section-sub[b-7gefaycz0c] {
        font-size: 1.4rem;
    }

    .reg-plan-section[b-7gefaycz0c],
    .reg-form-section[b-7gefaycz0c] {
        padding: 4rem 0;
    }
}
/* /Components/Pages/SubscriptionCancelPage.razor.rz.scp.css */
.sub-cancel[b-lw2wc2pslp] {
    padding: 6rem 2.4rem;
    display: flex;
    justify-content: center;
}

.sub-cancel-card[b-lw2wc2pslp] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 4rem 3.2rem;
    max-width: 540px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.sub-cancel-h1[b-lw2wc2pslp] {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 1.6rem 0 1.2rem;
    color: var(--text-primary);
}

.sub-cancel-sub[b-lw2wc2pslp] {
    font-size: 1.55rem;
    color: var(--text-secondary);
    margin-bottom: 2.4rem;
    line-height: 1.5;
}

.sub-cancel-actions[b-lw2wc2pslp] {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .sub-cancel-card[b-lw2wc2pslp] { padding: 3rem 2rem; }
    .sub-cancel-h1[b-lw2wc2pslp] { font-size: 2.4rem; }
}
/* /Components/Pages/SubscriptionSuccessPage.razor.rz.scp.css */
.sub-success[b-5a6eqoey1f] {
    padding: 6rem 2.4rem;
    display: flex;
    justify-content: center;
}

.sub-success-card[b-5a6eqoey1f] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 4rem 3.2rem;
    max-width: 540px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.sub-success-h1[b-5a6eqoey1f] {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 1.6rem 0 1.2rem;
    color: var(--brand-blue);
}

.sub-success-sub[b-5a6eqoey1f] {
    font-size: 1.55rem;
    color: var(--text-secondary);
    margin-bottom: 2.4rem;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .sub-success-card[b-5a6eqoey1f] { padding: 3rem 2rem; }
    .sub-success-h1[b-5a6eqoey1f] { font-size: 2.4rem; }
}

/* Two side-by-side CTAs on the success branch (dashboard + profile nudge);
   stacks on narrow screens like the rest of the card. */
.sub-success-actions[b-5a6eqoey1f] {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}
/* /Components/Pages/TermsAndConditions.razor.rz.scp.css */
/* Legal pages (Privacy Policy, Terms & Conditions). Content is admin-managed
   HTML injected as MarkupString, so structural styling uses ::deep to reach
   through CSS isolation. Visual lineage: matches the legacy site's spacious
   typography (Poppins headers, PT Sans body, blue accents) but with the
   pivot's white card-on-grey background and matched border radius. */

/* width:100% prevents the loading-state jump: without it, the section
   shrinks to the natural width of the header (h1 + eyebrow) while the
   admin-managed body is still being fetched, then snaps wider when the
   .legal-body renders. With width:100% the section always claims 880px,
   so the header lands in its final position from first paint. */
.legal-page[b-82nu2ozbir] {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 4rem 2.4rem 6rem;
    box-sizing: border-box;
}

.legal-head[b-82nu2ozbir] {
    margin-bottom: 2.4rem;
}

.legal-h1[b-82nu2ozbir] {
    font-family: var(--font-primary);
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0.6rem 0 0;
    color: var(--text-primary);
}

.legal-meta[b-82nu2ozbir] {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin: 0.8rem 0 0;
}

.legal-loading[b-82nu2ozbir],
.legal-missing[b-82nu2ozbir] {
    font-size: 1.4rem;
    color: var(--text-secondary);
    padding: 1.6rem 0;
}

.legal-missing a[b-82nu2ozbir] {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-body[b-82nu2ozbir] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 3rem 3.4rem;
    font-family: var(--font-secondary);
    font-size: 1.45rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Admin-managed HTML is emitted by MarkupString — use ::deep so the CSS
   isolation scope still reaches the dynamically-injected nodes. The DB body
   uses <h3> for numbered top-level sections (legacy convention shared with
   AgentArena.Site), so h3 carries the prominent border-bottom treatment.
   h2 keeps a slightly larger fallback for future content that wants it. */

.legal-body[b-82nu2ozbir]  h2,
.legal-body[b-82nu2ozbir]  h3,
.legal-body[b-82nu2ozbir]  h4 {
    font-family: var(--font-primary);
    color: var(--brand-blue-dark);
    font-weight: 600;
    line-height: 1.25;
}

.legal-body[b-82nu2ozbir]  h2 {
    font-size: 2.4rem;
    margin: 2.8rem 0 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--brand-blue-200);
}

.legal-body[b-82nu2ozbir]  h3 {
    font-size: 2rem;
    margin: 2.4rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--brand-blue-200);
}

.legal-body[b-82nu2ozbir]  h4 {
    font-size: 1.55rem;
    margin: 1.8rem 0 0.6rem;
    color: var(--brand-blue);
}

.legal-body[b-82nu2ozbir]  h2:first-child,
.legal-body[b-82nu2ozbir]  h3:first-child,
.legal-body[b-82nu2ozbir]  h4:first-child {
    margin-top: 0;
}

.legal-body[b-82nu2ozbir]  p {
    margin: 0 0 1.2rem;
}

.legal-body[b-82nu2ozbir]  p:last-child {
    margin-bottom: 0;
}

/* "Effective Date: ..." callout sits directly under the H1; lightly tinted
   so it reads as metadata rather than body copy. */
.legal-body[b-82nu2ozbir]  p.legal-effective {
    display: inline-block;
    background: var(--brand-blue-50, #eef4ff);
    border-left: 3px solid var(--brand-blue);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-size: 1.35rem;
    color: var(--text-primary);
    margin-bottom: 1.6rem;
}

.legal-body[b-82nu2ozbir]  ul,
.legal-body[b-82nu2ozbir]  ol {
    margin: 0 0 1.4rem 0;
    padding-left: 2rem;
}

.legal-body[b-82nu2ozbir]  li {
    margin-bottom: 0.5rem;
}

.legal-body[b-82nu2ozbir]  strong {
    color: var(--brand-blue-dark);
    font-family: var(--font-primary);
    font-weight: 600;
}

.legal-body[b-82nu2ozbir]  a {
    color: var(--brand-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--brand-blue-200);
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Effective-date callout has its own background — no underline border. */
.legal-body[b-82nu2ozbir]  p.legal-effective a {
    border-bottom: none;
}

.legal-body[b-82nu2ozbir]  a:hover {
    color: var(--brand-blue-dark);
    border-bottom-color: var(--brand-blue-dark);
}

.legal-body[b-82nu2ozbir]  sup {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
}

@media (max-width: 720px) {
    .legal-page[b-82nu2ozbir] {
        padding: 2.4rem 1.6rem 3.6rem;
    }
    .legal-h1[b-82nu2ozbir] {
        font-size: 2.6rem;
    }
    .legal-body[b-82nu2ozbir] {
        padding: 2rem 1.8rem;
        font-size: 1.35rem;
    }
    .legal-body[b-82nu2ozbir]  h2 {
        font-size: 2rem;
    }
    .legal-body[b-82nu2ozbir]  h3 {
        font-size: 1.7rem;
    }
    .legal-body[b-82nu2ozbir]  h4 {
        font-size: 1.4rem;
    }
}
/* /Components/Plans/BillingToggle.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/register.html
   .billing-toggle + .bt button-pair verbatim. Pill-shaped tab group on
   light-grey background; active tab is white with shadow. save-pill is
   green-on-soft-green (not white-on-green) per the mock. */

.billing-toggle[b-kwalbhmo4a] {
    display: inline-flex;
    align-items: center;
    background: var(--surface-light);
    border-radius: 999px;
    padding: 0.4rem;
    gap: 0.2rem;
    border: 1px solid var(--grey-200);
}

.bt-option[b-kwalbhmo4a] {
    padding: 0.7rem 1.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: 0.02em;
}

.bt-option.active[b-kwalbhmo4a] {
    background: #fff;
    color: var(--brand-blue);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.save-pill[b-kwalbhmo4a] {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--success-green);
    background: rgba(46, 133, 64, 0.12);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-primary);
}
/* /Components/Plans/PlanCard.razor.rz.scp.css */
/* Canonical plan-card styling. Mirrors
   AgentArena.Documentation/Mock/LeaderboardPivot/dashboard-user.html
   `.plan` block (the reactivation surface, which the user nominated as
   the primary visual). Used by both /register (Radio mode) and the
   inactive /dashboard (Cta mode) -- one component, one stylesheet. */

.plan[b-yht9r66o2c] {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 16px;
    padding: 3.4rem 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.plan:hover[b-yht9r66o2c] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-blue-200);
}

/* Featured (Pro) card: same neutral grey border + soft shadow as
   Basic. Only the SELECTED card (Radio mode) carries the blue border,
   so the visual choice belongs to the user, not to one tier. */
.plan.featured[b-yht9r66o2c] {
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.plan.featured:hover[b-yht9r66o2c] {
    box-shadow: 0 20px 40px rgba(0, 30, 80, 0.14);
}

.plan.selected[b-yht9r66o2c] {
    border: 2px solid var(--brand-blue);
    box-shadow: var(--shadow-lg);
}

.plan-selected-pill[b-yht9r66o2c] {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 999px;
}

.plan-radio.sr-only[b-yht9r66o2c] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.plan-name[b-yht9r66o2c] {
    font-family: var(--font-primary);
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.plan-tagline[b-yht9r66o2c] {
    font-size: 1.4rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    font-style: italic;
    margin-bottom: 2.2rem;
}

.plan-price-row[b-yht9r66o2c] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.plan-price-row .amount[b-yht9r66o2c] {
    font-size: 5rem;
    font-weight: 700;
    color: var(--brand-blue);
    letter-spacing: -0.025em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.plan-price-row .per[b-yht9r66o2c] {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.plan-price-alt[b-yht9r66o2c] {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin-bottom: 2.4rem;
}

.plan-price-alt[b-yht9r66o2c]  .save {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--success-green);
    padding: 0.2rem 0.6rem;
    background: rgba(46, 133, 64, 0.12);
    border-radius: 999px;
    margin-left: 0.4rem;
    font-family: var(--font-primary);
}

.feature-list[b-yht9r66o2c] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.8rem;
    padding: 0;
}

.feature-list li[b-yht9r66o2c] {
    position: relative;
    padding-left: 34px;
    font-size: 1.35rem;
    line-height: 1.55;
    font-family: var(--font-secondary);
    color: var(--text-primary);
}

.feature-list li[b-yht9r66o2c]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 22px;
    height: 22px;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
}

.feature-list li.pro[b-yht9r66o2c]::before {
    background: var(--brand-blue-dark);
}

.feature-list li[b-yht9r66o2c]  strong {
    font-weight: 700;
    color: var(--brand-blue-dark);
    font-family: var(--font-primary);
}

.feature-list .everything[b-yht9r66o2c] {
    padding: 1rem 1.2rem;
    background: var(--brand-blue-50);
    border-radius: 8px;
    border: 1px solid var(--brand-blue-100);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.feature-list .everything[b-yht9r66o2c]::before {
    content: "\2728";
    position: static;
    background: transparent;
    color: var(--brand-blue);
    width: auto;
    height: auto;
    top: auto;
    left: auto;
    font-size: 1.4rem;
}

.feature-list .everything[b-yht9r66o2c]  strong {
    color: var(--brand-blue);
    font-family: var(--font-primary);
}

.plan-cta[b-yht9r66o2c] {
    display: block;
    text-align: center;
    padding: 1.4rem 2rem;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-top: auto;
    letter-spacing: 0.02em;
    border: none;
    width: 100%;
}

.plan-cta.secondary[b-yht9r66o2c] {
    background: transparent;
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
}

.plan-cta.secondary:hover:not(:disabled)[b-yht9r66o2c] {
    background: var(--brand-blue-50);
}

.plan-cta.primary[b-yht9r66o2c] {
    background: var(--brand-blue);
    color: #fff;
}

.plan-cta.primary:hover:not(:disabled)[b-yht9r66o2c] {
    background: var(--brand-blue-dark);
}

.plan-cta:disabled[b-yht9r66o2c] {
    opacity: 0.55;
    cursor: not-allowed;
}

.plan-secure[b-yht9r66o2c] {
    margin-top: 0.9rem;
    font-size: 1rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    text-align: center;
}

.plan-secure.pro[b-yht9r66o2c] {
    color: rgba(0, 75, 187, 0.7);
}
/* /Components/Plans/PlanGrid.razor.rz.scp.css */
.plan-grid[b-0pohjhn4w1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
    margin: 2rem 0;
}
/* /Components/Primitives/Avatar.razor.rz.scp.css */
.aa-avatar[b-xw0wcmqlnn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-blue-100);
    color: var(--brand-blue);
    font-weight: 600;
    font-family: var(--font-primary);
    overflow: hidden;
    flex-shrink: 0;
}

.aa-avatar img[b-xw0wcmqlnn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aa-avatar-sm[b-xw0wcmqlnn] { width: 32px; height: 32px; font-size: 1.2rem; }
.aa-avatar-md[b-xw0wcmqlnn] { width: 44px; height: 44px; font-size: 1.5rem; }
.aa-avatar-lg[b-xw0wcmqlnn] { width: 100px; height: 100px; font-size: 3.2rem; }
.aa-avatar-rail[b-xw0wcmqlnn] { width: 52px; height: 52px; font-size: 1.7rem; }

.initials[b-xw0wcmqlnn] {
    line-height: 1;
    letter-spacing: 0.02em;
}
/* /Components/Primitives/Chip.razor.rz.scp.css */
.aa-chip[b-goc8rl4jhw] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--grey-200);
    color: var(--text-secondary);
}

.aa-chip-verified[b-goc8rl4jhw] {
    background: rgba(46, 133, 64, 0.12);
    color: var(--success-green);
    border: 1px solid rgba(46, 133, 64, 0.25);
}

.aa-chip-tier[b-goc8rl4jhw] {
    background: var(--brand-blue-100);
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue-200);
}

.aa-chip-filter[b-goc8rl4jhw] {
    background: #fff;
    border: 1px solid var(--grey-300);
    color: var(--text-primary);
    cursor: pointer;
}

/* basic-chip and pro-chip render on top of the hero band's blue gradient,
   so both use white-on-blue treatments — Basic is a frosted-glass border,
   Pro is solid gold with dark text. Matches dashboard.html / dashboard-pro.html
   mock styling exactly. */
.basic-chip[b-goc8rl4jhw] {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.pro-chip[b-goc8rl4jhw] {
    background: var(--gold);
    border: 1px solid var(--gold);
    color: var(--grey-900);
}
/* /Components/Primitives/Eyebrow.razor.rz.scp.css */
.aa-eyebrow[b-8sdhk10py3] {
    display: inline-block;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
/* /Components/Primitives/SearchInputWrap.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login.html
   .search-input-wrap + .search-icon + .search-clear + .form-input.search
   padding overrides verbatim. */

.search-input-wrap[b-89rn3cg1xy] {
    position: relative;
}

.search-icon[b-89rn3cg1xy] {
    position: absolute;
    top: 50%;
    left: 1.2rem;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--grey-500);
    fill: currentColor;
    pointer-events: none;
}

.search-input-wrap[b-89rn3cg1xy]  input {
    width: 100%;
    padding: 1.2rem 3.4rem 1.2rem 3.8rem;
    border: 1.5px solid var(--grey-300);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--text-primary);
    background: #fff;
    transition: all 0.15s ease;
}

.search-input-wrap[b-89rn3cg1xy]  input::placeholder {
    color: var(--grey-500);
    font-weight: 400;
}

.search-input-wrap[b-89rn3cg1xy]  input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.1);
}

.search-clear[b-89rn3cg1xy] {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--grey-200);
    color: var(--grey-700);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
}

.search-clear:hover[b-89rn3cg1xy] {
    background: var(--grey-300);
}
/* /Components/Primitives/SectionHead.razor.rz.scp.css */
.aa-section-head[b-2wz4h9r53e] {
    text-align: center;
    margin-bottom: 3rem;
}

.aa-section-title[b-2wz4h9r53e] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    margin: 1rem 0;
}

.aa-section-sub[b-2wz4h9r53e] {
    font-size: 1.55rem;
    color: var(--text-secondary);
    font-style: italic;
    font-family: var(--font-secondary);
    max-width: 640px;
    margin: 0 auto;
}
/* /Components/Primitives/SplitAvatar.razor.rz.scp.css */
/* Diagonal-split avatar. The .sa-initials triangle covers the top-left
   half (clip-path: polygon(0 0, 100% 0, 0 100%)); the .sa-photo triangle
   covers the bottom-right half (clip-path: polygon(100% 0, 100% 100%,
   0 100%)). Both share inset:0 so the diagonal seam is exact. The
   circle's border-radius is applied at the outer wrapper -- clip-paths
   on the children don't round their own edges. */

.split-av[b-46e0pc7xal] {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

/* When the user has uploaded a photo, the avatar collapses to just
   the image -- no diagonal split. A complete profile shouldn't carry
   the "your picture is missing" visual cue. */
.split-av .sa-full-photo[b-46e0pc7xal] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.split-av .sa-initials[b-46e0pc7xal],
.split-av .sa-photo[b-46e0pc7xal] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-av .sa-initials[b-46e0pc7xal] {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: var(--brand-blue);
    color: #fff;
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.split-av .sa-initials > span[b-46e0pc7xal] {
    transform: translate(-25%, -25%);
}

.split-av .sa-photo[b-46e0pc7xal] {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background: linear-gradient(135deg, var(--brand-blue-100) 0%, var(--brand-blue-50) 100%);
}

.split-av .sa-photo img[b-46e0pc7xal] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OnDark variant: surfaces shift to translucent-white for legibility
   on the brand-blue gradient header (dash-welcome). */
.split-av.on-dark .sa-initials[b-46e0pc7xal] {
    background: rgba(255, 255, 255, 0.22);
}

.split-av.on-dark .sa-photo[b-46e0pc7xal] {
    background: rgba(255, 255, 255, 0.08);
}

/* Sizes. The initials font scales with the circle to keep the wedge
   feeling balanced; smaller wedges use proportionally smaller text. */
.split-av.sa-sm[b-46e0pc7xal] {
    width: 32px;
    height: 32px;
    font-size: 1.05rem;
}

.split-av.sa-md[b-46e0pc7xal] {
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
}

.split-av.sa-lg[b-46e0pc7xal] {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
}

.split-av.sa-xl[b-46e0pc7xal] {
    width: 120px;
    height: 120px;
    font-size: 3rem;
}
/* /Components/Primitives/TrendArrow.razor.rz.scp.css */
.aa-trend[b-du062a0y5d] {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1;
}

.aa-trend.up[b-du062a0y5d] { color: var(--success-green); }
.aa-trend.down[b-du062a0y5d] { color: var(--error-red); }
.aa-trend.neutral[b-du062a0y5d] { color: var(--grey-500); }
/* /Components/Sections/DisclaimerCollapse.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html
   `.disclaimer-collapse` rule. Light-grey pill that centers an uppercase
   tracking-wide blue label. Hover lift; open state swaps to white + soft
   shadow. Previously this was a brand-blue-50 pill with left-aligned text
   in the wrong font size — the mock's centered uppercase treatment is the
   correct one. */

.disclaimer-collapse[b-esn6cl2wsy] {
    max-width: 900px;
    margin: 4rem auto 0;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    background: var(--surface-light);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.disclaimer-collapse[open][b-esn6cl2wsy] {
    background: #fff;
    border-color: var(--grey-300);
    box-shadow: var(--shadow-sm);
}

.disclaimer-collapse > summary[b-esn6cl2wsy] {
    list-style: none;
    cursor: pointer;
    padding: 1.4rem 1.8rem;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-blue);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.disclaimer-collapse > summary:focus[b-esn6cl2wsy],
.disclaimer-collapse > summary:focus-visible[b-esn6cl2wsy] {
    outline: none;
}

.disclaimer-collapse > summary[b-esn6cl2wsy]::-webkit-details-marker { display: none; }
.disclaimer-collapse > summary[b-esn6cl2wsy]::marker { display: none; }

.disclaimer-collapse > summary:hover[b-esn6cl2wsy] {
    color: var(--brand-blue-dark);
}

.disclaimer[b-esn6cl2wsy] {
    padding: 0 2.4rem 2.4rem;
    color: var(--text-secondary);
    font-size: 1.35rem;
    line-height: 1.6;
    font-family: var(--font-secondary);
    text-align: left;
}

/* The body is admin-managed HTML injected via MarkupString, so its children
   don't carry this component's CSS-isolation attribute. ::deep styles the
   injected <p>/<ul>/<li>/<strong>/<a> the same way the inline markup used to. */
.disclaimer[b-esn6cl2wsy]  p { margin-bottom: 1.2rem; }
.disclaimer[b-esn6cl2wsy]  p strong { color: var(--text-primary); }
.disclaimer[b-esn6cl2wsy]  ul { margin: 0 0 1.6rem 2rem; padding: 0; }
.disclaimer[b-esn6cl2wsy]  li { margin-bottom: 0.4rem; }
.disclaimer[b-esn6cl2wsy]  a { color: var(--brand-blue); }
/* /Components/Sections/EditorialHero.razor.rz.scp.css */
/* Editorial-left "v02" hero, ported verbatim from the mock
   (HeroHeadlineRound2/leaderboard.html .v02-hero 1134-1545 + headlines.html
   option 5). The JS-measured .scope-glider is folded onto .scope-seg.active
   (white slab + gold top accent) so no DOM-measuring interop is needed -- the
   same approach the My Rankings BoardSwitcher uses. */

.v02-hero[b-d4mh8if5z2] {
    position: relative;
    background: linear-gradient(118deg, var(--brand-blue-dark) 0%, var(--brand-blue) 58%, #0a57c9 100%);
    color: #fff;
    padding: 6.4rem 2.4rem 7.2rem;
}

.v02-hero-bg[b-d4mh8if5z2] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.v02-hero[b-d4mh8if5z2]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.4rem;
    background: linear-gradient(180deg, var(--gold) 0%, rgba(212, 168, 90, 0) 78%);
    opacity: 0.9;
}
.v02-hero-watermark[b-d4mh8if5z2] {
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 34rem;
    height: auto;
    fill: #fff;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.v02-hero-inner[b-d4mh8if5z2] {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    /* minmax(0, 1fr), not the 1fr (= minmax(auto, 1fr)) default: the aside's
       min-content (four nowrap scope segments + the search field) would
       otherwise stretch this single column past a narrow phone's width and
       push the whole hero into horizontal scroll. */
    grid-template-columns: minmax(0, 1fr);
    gap: 4.4rem;
    padding-left: clamp(0rem, 3vw, 5rem);
}

.v02-hero-lead[b-d4mh8if5z2] {
    max-width: 78rem;
}

.v02-eyebrow[b-d4mh8if5z2] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 2.4rem;
}
.v02-eyebrow-tick[b-d4mh8if5z2] {
    display: inline-block;
    width: 3.2rem;
    height: 2px;
    background: var(--gold);
    flex-shrink: 0;
}

/* Tier chip (Pro / Basic) passed in via the dashboard's Eyebrow fragment.
   It carries the consumer's scope attribute, so it is targeted through ::deep
   (relocated from the old .dash-hero-eyebrow chip rules). */
.v02-eyebrow[b-d4mh8if5z2]  .basic-chip,
.v02-eyebrow[b-d4mh8if5z2]  .pro-chip {
    font-weight: 700;
    padding: 0.35rem 0.7rem 0.25rem;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    line-height: 1;
}
.v02-eyebrow[b-d4mh8if5z2]  .basic-chip {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.v02-eyebrow[b-d4mh8if5z2]  .pro-chip {
    background: var(--gold);
    color: #212529;
}

/* Option 6: bold/editorial -- semibold base throughout, "Comprehensive" heaviest,
   tight tracking, slightly smaller clamp (headlines.html .opt-6). Applied to both
   the public landing and the agent dashboard hero. The headline content
   (.v02-line / .v02-em) is supplied by the consumer, so it is styled via ::deep. */
.v02-headline[b-d4mh8if5z2] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(3.4rem, 5.4vw, 6rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin: 0;
}
/* The router's <FocusOnNavigate Selector="h1"> programmatically focuses this
   heading on every route change for a11y landing; it is not keyboard-tabbable
   (tabindex=-1), so suppress the visible focus ring it would otherwise paint. */
.v02-headline:focus[b-d4mh8if5z2] {
    outline: none;
}
.v02-headline[b-d4mh8if5z2]  .v02-line {
    display: block;
    white-space: nowrap;
}
.v02-headline[b-d4mh8if5z2]  .l3 {
    font-weight: 600;
}
.v02-headline[b-d4mh8if5z2]  sup {
    font-size: 0.5em;
    font-weight: 400;
    top: -0.86em;
    margin-left: 0.06em;
}
.v02-headline[b-d4mh8if5z2]  .v02-em {
    font-style: normal;
    font-weight: 700;
    color: #fff;
    position: relative;
    white-space: nowrap;
    /* Isolate so the underline's negative z-index stays above the hero
       gradient while still painting BEHIND the glyphs. */
    isolation: isolate;
}
.v02-headline[b-d4mh8if5z2]  .v02-em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.08em;
    height: 0.5rem;
    background: var(--gold);
    opacity: 0.85;
    border-radius: 2px;
    /* Behind the text so descenders (the leg of a "p") sit over the accent,
       not under it. */
    z-index: -1;
}

.v02-hero-aside[b-d4mh8if5z2] {
    position: relative;
    max-width: 60rem;
}

.v02-hairline[b-d4mh8if5z2] {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 14%, rgba(255, 255, 255, 0.18) 14%, rgba(255, 255, 255, 0.18) 100%);
    margin-bottom: 2.4rem;
}

.v02-framing[b-d4mh8if5z2] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2.6rem;
}
.v02-framing-lead[b-d4mh8if5z2] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: -0.005em;
    color: #fff;
}
.v02-framing-lead[b-d4mh8if5z2]  sup {
    font-size: 0.66em;
    top: -0.66em;
    font-weight: 400;
}
.v02-framing-sub[b-d4mh8if5z2] {
    font-family: var(--font-secondary);
    font-style: italic;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.82);
}

/* ---- embedded scope switcher ---- */
.board-switch[b-d4mh8if5z2] {
    max-width: 56rem;
    margin: 0;
    text-align: left;
}

.scope-rail[b-d4mh8if5z2] {
    position: relative;
    display: grid;
    /* minmax(0, ...) so the four nowrap segments can never force the rail
       wider than its container (defense-in-depth alongside the .v02-hero-inner
       fix above). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.4rem;
    padding: 0.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1.2rem 2.8rem rgba(0, 24, 70, 0.32);
    backdrop-filter: blur(6px);
}
.scope-seg[b-d4mh8if5z2] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1rem 0.5rem;
    min-height: 4.8rem;
    border: none;
    background: transparent;
    border-radius: 1rem;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.scope-seg .seg-count[b-d4mh8if5z2] {
    font-size: 1rem;
    font-weight: 700;
    min-width: 2rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-feature-settings: 'tnum';
    transition: background 0.25s ease, color 0.25s ease;
}
.scope-seg:not(.active):hover[b-d4mh8if5z2] {
    color: #fff;
}
.scope-seg:disabled[b-d4mh8if5z2] {
    opacity: 0.45;
    cursor: default;
}
/* active segment carries the folded glider: white slab + gold top accent */
.scope-seg.active[b-d4mh8if5z2] {
    color: var(--brand-blue-dark);
    background: #fff;
    box-shadow: 0 0.6rem 1.6rem rgba(0, 24, 70, 0.35);
}
.scope-seg.active[b-d4mh8if5z2]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.9rem;
    right: 0.9rem;
    height: 3px;
    background: var(--gold);
    border-radius: 0 0 2px 2px;
}
.scope-seg.active .seg-count[b-d4mh8if5z2] {
    background: var(--brand-blue);
    color: #fff;
}
.scope-seg:focus-visible[b-d4mh8if5z2] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.board-search[b-d4mh8if5z2] {
    position: relative;
    margin-top: 1.4rem;
}
.board-search-field[b-d4mh8if5z2] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1.5px solid transparent;
    border-radius: 1.2rem;
    padding: 0 1.4rem;
    min-height: 5.6rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 24, 70, 0.22);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.board-search-field:focus-within[b-d4mh8if5z2] {
    border-color: var(--gold);
    box-shadow: 0 0.8rem 2rem rgba(0, 24, 70, 0.22), 0 0 0 4px rgba(212, 168, 90, 0.28);
}
.board-search-field .search-ic[b-d4mh8if5z2] {
    width: 1.9rem;
    height: 1.9rem;
    fill: var(--grey-500);
    flex-shrink: 0;
    transition: fill 0.2s ease;
}
.board-search-field:focus-within .search-ic[b-d4mh8if5z2] {
    fill: var(--brand-blue);
}
.board-search-input[b-d4mh8if5z2] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
}
.board-search-input[b-d4mh8if5z2]::placeholder {
    color: var(--grey-500);
    font-weight: 400;
}
.board-search-clear[b-d4mh8if5z2] {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border: none;
    background: var(--grey-200);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
}
.board-search-clear:hover[b-d4mh8if5z2] {
    background: var(--grey-300);
    color: var(--text-primary);
}

.board-suggest[b-d4mh8if5z2] {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 1.2rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden auto;
    max-height: 32rem;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    text-align: left;
    color: var(--text-primary);
}
.board-search.open .board-suggest[b-d4mh8if5z2] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.suggest-head[b-d4mh8if5z2] {
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-light);
    border-bottom: 1px solid var(--grey-200);
}
.suggest-item[b-d4mh8if5z2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    min-height: 5rem;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--grey-100);
    transition: background 0.12s ease;
    font-family: var(--font-primary);
}
.suggest-item:last-child[b-d4mh8if5z2] {
    border-bottom: none;
}
.suggest-item:hover[b-d4mh8if5z2] {
    background: var(--brand-blue-50);
}
.suggest-item .si-name[b-d4mh8if5z2] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}
.suggest-item .si-count[b-d4mh8if5z2] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-blue);
    font-feature-settings: 'tnum';
    white-space: nowrap;
}
.suggest-empty[b-d4mh8if5z2] {
    padding: 1.6rem 1.4rem;
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    font-size: 1.3rem;
}

.board-locked[b-d4mh8if5z2] {
    margin-top: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.2rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 4px solid var(--gold);
    border-radius: 0.4rem 1.2rem 1.2rem 0.4rem;
    padding: 1.4rem 1.6rem;
    min-height: 5.6rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 24, 70, 0.22);
}
.board-locked .bl-name[b-d4mh8if5z2] {
    font-family: var(--font-primary);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--brand-blue-dark);
}
.board-locked .bl-sub[b-d4mh8if5z2] {
    font-family: var(--font-secondary);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Desktop: two-column editorial spread, headline left, switcher right */
@media (min-width: 960px) {
    .v02-hero[b-d4mh8if5z2] {
        padding: 8rem 3.2rem 9rem;
    }
    .v02-hero-inner[b-d4mh8if5z2] {
        grid-template-columns: minmax(0, 1.15fr) minmax(40rem, 0.85fr);
        align-items: center;
        gap: 6rem;
    }
    .v02-hero-aside[b-d4mh8if5z2] {
        padding-top: 0.4rem;
    }
    .v02-hero-watermark[b-d4mh8if5z2] {
        width: 44rem;
        right: 1rem;
        bottom: -5rem;
    }
}

@media (max-width: 959px) {
    .v02-hero-inner[b-d4mh8if5z2] {
        gap: 3.6rem;
    }
}

@media (max-width: 600px) {
    .v02-hero[b-d4mh8if5z2] {
        padding: 4.8rem 2rem 5.6rem;
    }
    .v02-hero[b-d4mh8if5z2]::before {
        width: 0.3rem;
    }
    .v02-hero-watermark[b-d4mh8if5z2] {
        width: 22rem;
        right: -1rem;
        bottom: -2rem;
    }
    .v02-eyebrow[b-d4mh8if5z2] {
        font-size: 1.05rem;
        letter-spacing: 0.26em;
        gap: 0.8rem;
        margin-bottom: 1.8rem;
    }
    .v02-eyebrow-tick[b-d4mh8if5z2] {
        width: 2.4rem;
    }
    .v02-headline[b-d4mh8if5z2]  .v02-line {
        white-space: normal;
    }
    .v02-framing-lead[b-d4mh8if5z2] {
        font-size: 1.8rem;
    }
    .v02-framing-sub[b-d4mh8if5z2] {
        font-size: 1.5rem;
    }
}

@media (max-width: 420px) {
    .scope-rail[b-d4mh8if5z2] {
        gap: 0.2rem;
        padding: 0.4rem;
    }
    .scope-seg[b-d4mh8if5z2] {
        font-size: 1.25rem;
        padding: 1rem 0.2rem;
        gap: 0.35rem;
        min-height: 4.6rem;
    }
    .scope-seg .seg-count[b-d4mh8if5z2] {
        min-width: 1.7rem;
        height: 1.7rem;
        font-size: 0.92rem;
        padding: 0 0.35rem;
    }
}
@media (max-width: 360px) {
    .scope-seg .seg-count[b-d4mh8if5z2] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scope-seg[b-d4mh8if5z2],
    .board-suggest[b-d4mh8if5z2],
    .board-search-field[b-d4mh8if5z2] {
        transition: none !important;
    }
}
/* /Components/Sections/FaqItem.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html .faq-item
   verbatim. NOT a boxed card — just a bottom-bordered row inside the white
   .faq-section. The pre-fix version had a boxed/shadowed style that doesn't
   match the mock. */

.faq-item[b-3nsjek4g7z] {
    border-bottom: 1px solid var(--grey-200);
    padding: 2rem 0;
}

.faq-item:last-child[b-3nsjek4g7z] {
    border-bottom: none;
}

.faq-item h5[b-3nsjek4g7z] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--text-primary);
    margin: 0 0 0.8rem 0;
}

.faq-answer[b-3nsjek4g7z] {
    font-size: 1.35rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}

.faq-answer[b-3nsjek4g7z]  p {
    margin: 0 0 0.9rem 0;
}

.faq-answer[b-3nsjek4g7z]  p:last-child {
    margin-bottom: 0;
}

.faq-answer[b-3nsjek4g7z]  a {
    color: var(--brand-blue);
    text-decoration: none;
}

.faq-answer[b-3nsjek4g7z]  a:hover {
    text-decoration: underline;
}

.faq-answer[b-3nsjek4g7z]  strong {
    color: var(--text-primary);
}

.faq-answer[b-3nsjek4g7z]  sup {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
}

/* The global reset zeroes ul/li padding + drops bullets, so any FAQ
   answer that uses a list must restore them locally. */
.faq-answer[b-3nsjek4g7z]  ul {
    list-style: disc;
    padding-left: 2rem;
    margin: 0 0 1rem 0;
}

.faq-answer[b-3nsjek4g7z]  li {
    margin-bottom: 0.5rem;
}

.faq-answer[b-3nsjek4g7z]  li:last-child {
    margin-bottom: 0;
}
/* /Components/Sections/FaqList.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html
   .faq-section + .faq-list blocks verbatim. White background (not grey),
   plain max-width list (not flex with gaps, since faq-items are bottom-
   bordered rows). */

.faq-section[b-fkavyteyr4] {
    background: #fff;
    padding: 6rem 0;
}

.product-container[b-fkavyteyr4] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2.4rem;
}

.product-section-head[b-fkavyteyr4] {
    text-align: center;
    margin-bottom: 3rem;
}

.product-section-eyebrow[b-fkavyteyr4] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: 1.4rem;
}

.product-section-title[b-fkavyteyr4] {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.product-section-title[b-fkavyteyr4]  .blue {
    color: var(--brand-blue);
}

.faq-list[b-fkavyteyr4] {
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 880px) {
    .product-section-title[b-fkavyteyr4] {
        font-size: 2.6rem;
    }

    .faq-section[b-fkavyteyr4] {
        padding: 4rem 0;
    }
}
/* /Components/Sections/MethodCard.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html
   .method-card block verbatim. Bigger padding, heavier shadow, larger
   heading than the pre-fix Client version. */

.method-card[b-sm876rm4wb] {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--grey-200);
    padding: 2.6rem 2.4rem 2.8rem;
}

.method-step[b-sm876rm4wb] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: 1rem;
}

.method-heading[b-sm876rm4wb] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.85rem;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.method-card p[b-sm876rm4wb] {
    font-size: 1.35rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
    margin: 0;
}

.method-card p[b-sm876rm4wb]  strong {
    color: var(--text-primary);
    font-weight: 600;
}
/* /Components/Sections/MethodGrid.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html
   .method-section + .product-section-head + .method-grid blocks verbatim. */

.method-section[b-yl9bmr4mox] {
    padding: 6rem 0;
}

.method-container[b-yl9bmr4mox] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2.4rem;
}

.product-section-head[b-yl9bmr4mox] {
    text-align: center;
    margin-bottom: 3rem;
}

.product-section-eyebrow[b-yl9bmr4mox] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: 1.4rem;
}

.product-section-title[b-yl9bmr4mox] {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.product-section-title[b-yl9bmr4mox]  .blue {
    color: var(--brand-blue);
}

.product-section-sub[b-yl9bmr4mox] {
    font-size: 1.55rem;
    color: var(--text-secondary);
    font-style: italic;
    font-family: var(--font-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

.method-grid[b-yl9bmr4mox] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1240px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .method-grid[b-yl9bmr4mox] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-section-title[b-yl9bmr4mox] {
        font-size: 2.6rem;
    }

    .product-section-sub[b-yl9bmr4mox] {
        font-size: 1.4rem;
    }

    .method-section[b-yl9bmr4mox] {
        padding: 4rem 0;
    }
}