/* /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 */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/login.html
   .selected-agent + sa-* helpers verbatim. Gradient background + blue
   border + 12px radius — the pre-fix Client version used a flat surface-
   light card which doesn't match the mock's emphasis treatment for the
   chosen agent. */

.selected-agent[b-71e3i6z6kz] {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.2rem;
    align-items: center;
    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;
}

.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-body[b-71e3i6z6kz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.sa-phone-row[b-71e3i6z6kz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--brand-blue-200);
}

.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] {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
}

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

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

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

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

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

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

.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-controls[b-xsw4ruxq0h] {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.mi-compare[b-xsw4ruxq0h] {
    display: 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-chart-toggle[b-xsw4ruxq0h] {
    display: flex;
    gap: 0.4rem;
}

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

.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;
    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: 220px; }
}
/* /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/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-toggle[b-c6iw28e71m] {
    display: none;
}

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

.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-toggle:checked ~ .aa-nav-burger span:nth-child(1)[b-c6iw28e71m] {
        transform: translateY(7px) rotate(45deg);
    }

    .aa-nav-toggle:checked ~ .aa-nav-burger span:nth-child(2)[b-c6iw28e71m] { opacity: 0; }

    .aa-nav-toggle:checked ~ .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-toggle:checked ~ .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-toggle:checked ~ .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/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;
    }
}
/* /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/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;
}

.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: 50px 1fr auto;
        gap: 0.8rem;
        padding: 1.4rem 1.2rem;
    }

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

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

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

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

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

    .lb-name-block .brokerage[b-barhg626ud] {
        font-size: 1.1rem;
    }
}
/* /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;
}

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

.social-link svg[b-d00q33lac1] {
    width: 14px;
    height: 14px;
}

@media (max-width: 720px) {
    .lb-expand-grid[b-d00q33lac1] { grid-template-columns: 1fr; }
    .lb-av-wrap.large[b-d00q33lac1] { width: 88px; height: 88px; }
    .lb-av.large[b-d00q33lac1] { font-size: 2.6rem; }
}
/* /Components/Leaderboard/ScopeSummary.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html
   .scope-summary block verbatim. Inline flex row (city name on the left,
   next-refresh timestamp on the right), NOT a left-aligned block with
   bottom border. */

.scope-summary[b-33skpmzbqq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.scope-summary h2[b-33skpmzbqq] {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.scope-summary h2 .meta[b-33skpmzbqq] {
    font-size: 1.4rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-left: 0.6rem;
}

.scope-summary .ts[b-33skpmzbqq] {
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-family: var(--font-secondary);
}
/* /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; } }
.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;
}
/* /Components/Pages/LeaderboardHomePage.razor.rz.scp.css */
.lb-section[b-sujzxrdiz5] {
    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/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;
    }
}

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

/* === Profile info readonly grid === */
.field-grid[b-6yv4go5bxf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}

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

.field[b-6yv4go5bxf] {
    display: flex;
    flex-direction: column;
}

.field.full[b-6yv4go5bxf] {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .field.full[b-6yv4go5bxf] {
        grid-column: span 1;
    }
}

.field-label[b-6yv4go5bxf] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--grey-700);
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
}

.field-label .accent[b-6yv4go5bxf] {
    color: var(--brand-blue);
    font-weight: 700;
}

.field-label .muted[b-6yv4go5bxf] {
    color: var(--text-secondary);
    font-weight: 500;
}

.field-input[b-6yv4go5bxf] {
    background: #fff;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    padding: 0.9rem 1.2rem;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    color: var(--text-primary);
}

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

.field-input[readonly][b-6yv4go5bxf],
.field-input:disabled[b-6yv4go5bxf] {
    background: var(--surface-light);
    color: var(--text-secondary);
}

.field-hint[b-6yv4go5bxf] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

.field-verified[b-6yv4go5bxf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    color: var(--success-green);
    font-weight: 600;
    margin-top: 0.4rem;
}

.field-verified[b-6yv4go5bxf]::before {
    content: "\2713";
    width: 16px;
    height: 16px;
    background: var(--success-green);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
}

/* 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-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-row.primary[b-6yv4go5bxf] {
    background: var(--brand-blue-50);
    border-radius: 10px;
    padding: 1.6rem 1.4rem;
    border: 1px solid var(--brand-blue-200);
    border-bottom: 1px solid var(--brand-blue-200);
}

.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-row.primary .method-icon[b-6yv4go5bxf] {
    background: #fff;
}

.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 .h .primary-pill[b-6yv4go5bxf] {
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 999px;
}

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

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

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

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

.experience-help[b-6yv4go5bxf] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.6rem;
    font-family: var(--font-secondary);
}

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

.disclaimer p[b-esn6cl2wsy] { margin-bottom: 1.2rem; }
.disclaimer p strong[b-esn6cl2wsy] { color: var(--text-primary); }
.disclaimer ul[b-esn6cl2wsy] { margin: 0 0 1.6rem 2rem; padding: 0; }
.disclaimer li[b-esn6cl2wsy] { margin-bottom: 0.4rem; }
.disclaimer a[b-esn6cl2wsy] { color: var(--brand-blue); }
/* /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/HeroBand.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html .hero-band
   block verbatim. The verified-chip styling in particular matches the mock:
   semi-transparent white background, 1px border, uppercase letter-spaced
   label — the previous Client version dropped the border and uppercase. */

.hero-band[b-nrmv0x3frr] {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
    color: #fff;
    padding: 6rem 2.4rem 4.6rem;
}

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

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

.hero-h1[b-nrmv0x3frr] {
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 auto 1.4rem;
    max-width: 880px;
}

.hero-h1[b-nrmv0x3frr]  .light {
    font-weight: 300;
    opacity: 0.85;
}

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

.verified-chip[b-nrmv0x3frr] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
    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;
    color: #fff;
}

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

.hero-extra[b-nrmv0x3frr] {
    /* No top margin here — HeroStats has its own margin-top + border-top
       separator that flows directly under the verified chip. */
}

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

    .hero-sub[b-nrmv0x3frr] {
        font-size: 1.55rem;
    }
}
/* /Components/Sections/HeroStats.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html
   .hero-stats block verbatim. Flex layout (NOT grid) with white border-top
   separator above the row, evenly spaced. */

.hero-stats[b-2nmsueaetd] {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 3.2rem;
    padding-top: 2.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
}

.stat[b-2nmsueaetd] {
    text-align: center;
}

.stat-num[b-2nmsueaetd] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 2.6rem;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1;
}

.stat-lbl[b-2nmsueaetd] {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.6rem;
}

@media (max-width: 720px) {
    .hero-stats[b-2nmsueaetd] {
        gap: 2rem;
        margin-top: 2rem;
    }

    .stat-num[b-2nmsueaetd] {
        font-size: 2rem;
    }
}
/* /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;
    }
}
/* /Components/Sections/ScopePicker.razor.rz.scp.css */
/* Mirrors SearchBand.razor.css visual treatment but with <select>
   dropdowns in place of free-text inputs. The grid uses align-items:
   end so the OR badge can sit in the gap between the input row and the
   button row via padding-bottom (same trick SearchBand uses). */

.scope-picker[b-gvk0ilnorz] {
    background: linear-gradient(180deg, var(--surface-light) 0%, #fff 100%);
    border-bottom: 1px solid var(--grey-200);
    padding: 5rem 2.4rem;
}

.scope-picker-inner[b-gvk0ilnorz] {
    max-width: 900px;
    margin: 0 auto;
}

.scope-picker-header[b-gvk0ilnorz] {
    text-align: center;
    margin-bottom: 3rem;
}

.scope-picker-title[b-gvk0ilnorz] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.scope-picker-sub[b-gvk0ilnorz] {
    font-size: 1.55rem;
    color: var(--text-secondary);
    font-style: italic;
    font-family: var(--font-secondary);
    max-width: 640px;
    margin: 0 auto;
}

.scope-picker-empty[b-gvk0ilnorz] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-family: var(--font-secondary);
}

.scope-picker-fields[b-gvk0ilnorz] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: end;
}

.scope-field[b-gvk0ilnorz] {
    display: flex;
    flex-direction: column;
}

.scope-label[b-gvk0ilnorz] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 0.8rem;
}

.scope-select[b-gvk0ilnorz] {
    width: 100%;
    padding: 1.2rem 1.6rem;
    border: 1.5px solid var(--grey-200);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--text-primary);
    background: #fff;
    transition: all 0.15s ease;
    text-align: center;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 16px;
    padding-right: 3rem;
    cursor: pointer;
}

.scope-select:focus[b-gvk0ilnorz] {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 75, 187, 0.12);
}

.scope-btn[b-gvk0ilnorz] {
    margin-top: 0.8rem;
    padding: 1.2rem 2.4rem;
    background: var(--brand-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
}

.scope-btn:hover:not(:disabled)[b-gvk0ilnorz] {
    background: var(--brand-blue-dark);
}

.scope-btn:disabled[b-gvk0ilnorz] {
    opacity: 0.45;
    cursor: not-allowed;
}

.scope-or[b-gvk0ilnorz] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3.4rem;
}

.scope-or span[b-gvk0ilnorz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--grey-300);
    background: #fff;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

@media (max-width: 720px) {
    .scope-picker-fields[b-gvk0ilnorz] {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .scope-or[b-gvk0ilnorz] {
        padding-bottom: 0;
    }
}
/* /Components/Sections/SearchBand.razor.rz.scp.css */
/* Mirrors AgentArena.Documentation/Mock/LeaderboardPivot/index.html .search-band
   block verbatim. Key visual cues taken from the mock: uppercase title with
   700 weight, circular "OR" pill divider (not italic text), search-btn with
   1.2rem padding and 600 weight + 0.8rem margin-top above the input. */

.search-band[b-q47cv9pwlt] {
    background: linear-gradient(180deg, var(--surface-light) 0%, #fff 100%);
    border-bottom: 1px solid var(--grey-200);
    padding: 5rem 2.4rem;
}

.search-inner[b-q47cv9pwlt] {
    max-width: 900px;
    margin: 0 auto;
}

.search-header[b-q47cv9pwlt] {
    text-align: center;
    margin-bottom: 3rem;
}

.search-title[b-q47cv9pwlt] {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.search-subtitle[b-q47cv9pwlt] {
    font-size: 1.55rem;
    color: var(--text-secondary);
    font-style: italic;
    font-family: var(--font-secondary);
    max-width: 640px;
    margin: 0 auto;
}

.search-fields[b-q47cv9pwlt] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: end;
}

.search-field[b-q47cv9pwlt] {
    display: flex;
    flex-direction: column;
}

.search-label[b-q47cv9pwlt] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 0.8rem;
}

.search-input-prod[b-q47cv9pwlt] {
    width: 100%;
    padding: 1.2rem 1.6rem;
    border: 1.5px solid var(--grey-200);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--text-primary);
    background: #fff;
    transition: all 0.15s ease;
    text-align: center;
}

.search-input-prod[b-q47cv9pwlt]::placeholder {
    color: var(--grey-500);
    font-weight: 400;
}

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

.search-btn[b-q47cv9pwlt] {
    margin-top: 0.8rem;
    padding: 1.2rem 2.4rem;
    background: var(--brand-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
}

.search-btn:hover[b-q47cv9pwlt] {
    background: var(--brand-blue-dark);
}

.search-or[b-q47cv9pwlt] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The grid uses align-items: end so each column anchors at the
       button row. The OR cell shrinks to the badge size and sits at
       the button row by default; padding-bottom lifts it up into the
       gap between input and button (visually centered in the active
       form area, ignoring the label row at the top). */
    padding-bottom: 3.4rem;
}

.search-or span[b-q47cv9pwlt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--grey-300);
    background: #fff;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.search-suggest[b-q47cv9pwlt] {
    position: relative;
}

.suggest-list[b-q47cv9pwlt] {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(20, 31, 51, 0.12);
    z-index: 5;
    max-height: 32rem;
    overflow-y: auto;
}

.suggest-item[b-q47cv9pwlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.9rem 1.4rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 1.4rem;
    color: var(--text-primary);
    text-align: left;
    transition: background 0.12s ease;
}

.suggest-item:hover[b-q47cv9pwlt],
.suggest-item:focus-visible[b-q47cv9pwlt] {
    background: var(--brand-blue-50);
    outline: none;
}

.suggest-value[b-q47cv9pwlt] {
    font-weight: 500;
}

.suggest-count[b-q47cv9pwlt] {
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-left: 1.2rem;
}

@media (max-width: 720px) {
    .search-band[b-q47cv9pwlt] {
        padding: 3.6rem 1.8rem;
    }

    .search-title[b-q47cv9pwlt] {
        font-size: 2rem;
    }

    .search-subtitle[b-q47cv9pwlt] {
        font-size: 1.4rem;
    }

    .search-fields[b-q47cv9pwlt] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .search-or[b-q47cv9pwlt] {
        padding-bottom: 0;
        padding: 0.6rem 0;
    }
}