/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-jbupxmxome] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-jbupxmxome] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PlatformShellLayout.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   PlatformShellLayout — the chrome for platform-level pages.

   Isolation: this file is component-scoped. Every selector gets a
   [b-xxxxx] attribute appended at build time, so these rules only apply
   to elements rendered by THIS layout. Tenant pages that don't use this
   layout are completely untouched.

   Design tokens (--m-*): defined on .platform-shell so child pages
   inherit them via the standard CSS cascade. var(--m-cyan) inside a
   page's component-scoped CSS resolves correctly against the value set
   here, even though the two stylesheets have different scope attributes
   — var() is a runtime cascade lookup, not a selector match.
   ────────────────────────────────────────────────────────────────────── */

.platform-shell[b-ruznogdtgc] {
    /* Marketing palette — single source of truth for every platform-level
       page. If a future page wants to tweak (e.g. swag shop wants warmer
       accents), define overrides on a more specific class within that
       page, not here. */
    --m-navy:        #0d1b2a;
    --m-navy-mid:    #1a2e42;
    --m-navy-light:  #243b55;
    --m-cyan:        #00BCD4;
    --m-cyan-dark:   #0097A7;
    --m-gold:        #FFC107;
    --m-green:       #4CAF50;
    --m-green-light: #81c784;
    --m-white:       #ffffff;
    --m-text-light:  #e8f5e9;
    --m-text-muted:  #a5d6a7;
    --m-radius:      14px;
    --m-radius-sm:   8px;

    min-height: 100vh;
    width: 100%;
    background:
        radial-gradient(ellipse 80% 60% at 70% 0%, rgba(0,188,212,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 20% 100%, rgba(76,175,80,0.08) 0%, transparent 60%),
        linear-gradient(135deg, #0d1b2a 0%, #1a2e42 50%, #0d1b2a 100%);
    color: var(--m-white);
    font-family: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Subtle grid backdrop — fixed so it doesn't scroll. */
.platform-shell[b-ruznogdtgc]::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0,188,212,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,188,212,0.035) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.platform-shell-topbar[b-ruznogdtgc] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: rgba(13,27,42,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,188,212,0.15);
    flex-wrap: wrap;
    gap: 12px;
}

.platform-shell-brand[b-ruznogdtgc] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--m-white);
}

.platform-shell-brand-logo[b-ruznogdtgc] {
    /* Matches the marketing nav's .nav-logo (height: 56px) so the
       brand mark reads at the same size across both sites. The
       wordmark+mascot is baked into the PNG itself, so no companion
       text run is needed alongside it. */
    height: 56px;
    width: auto;
    display: block;
}

.platform-shell-nav[b-ruznogdtgc] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.platform-shell-nav-link[b-ruznogdtgc] {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-text-light);
    text-decoration: none;
    transition: color 0.15s;
}

.platform-shell-nav-link:hover[b-ruznogdtgc] {
    color: var(--m-cyan);
}

.platform-shell-nav-form[b-ruznogdtgc] {
    margin: 0;
    display: inline-flex;
}

/* ── Topbar buttons ──────────────────────────────────────────────────── */
.platform-shell-btn[b-ruznogdtgc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: var(--m-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.platform-shell-btn-primary[b-ruznogdtgc] {
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 16px rgba(0,188,212,0.3);
}

.platform-shell-btn-primary:hover[b-ruznogdtgc] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.45);
}

.platform-shell-btn-ghost[b-ruznogdtgc] {
    background: transparent;
    color: var(--m-white);
    border-color: rgba(255,255,255,0.25);
}

.platform-shell-btn-ghost:hover[b-ruznogdtgc] {
    border-color: var(--m-cyan);
    background: rgba(0,188,212,0.08);
}

/* ── Main content area ───────────────────────────────────────────────── */
.platform-shell-main[b-ruznogdtgc] {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    padding: 32px 24px 64px;
    box-sizing: border-box;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.platform-shell-footer[b-ruznogdtgc] {
    position: relative;
    z-index: 1;
    background: rgba(13,27,42,0.6);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 24px 32px;
}

.platform-shell-footer-inner[b-ruznogdtgc] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--m-text-muted);
}

.platform-shell-footer-inner a[b-ruznogdtgc] {
    color: var(--m-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.platform-shell-footer-inner a:hover[b-ruznogdtgc] {
    color: var(--m-cyan);
}

.platform-shell-footer-sep[b-ruznogdtgc] {
    color: rgba(255,255,255,0.18);
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .platform-shell-topbar[b-ruznogdtgc] {
        padding: 12px 18px;
    }

    .platform-shell-brand-logo[b-ruznogdtgc] {
        /* Slightly tighter on phones to leave room for the nav links
           on the right. Same proportional drop as the marketing nav. */
        height: 44px;
    }

    .platform-shell-nav[b-ruznogdtgc] {
        gap: 12px;
    }

    .platform-shell-main[b-ruznogdtgc] {
        padding: 20px 16px 48px;
    }

    .platform-shell-footer[b-ruznogdtgc] {
        padding: 20px 16px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-eb3zu94sjw],
.components-reconnect-repeated-attempt-visible[b-eb3zu94sjw],
.components-reconnect-failed-visible[b-eb3zu94sjw],
.components-pause-visible[b-eb3zu94sjw],
.components-resume-failed-visible[b-eb3zu94sjw],
.components-rejoining-animation[b-eb3zu94sjw] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-retrying[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-failed[b-eb3zu94sjw],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-eb3zu94sjw] {
    display: block;
}


#components-reconnect-modal[b-eb3zu94sjw] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-eb3zu94sjw 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-eb3zu94sjw 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-eb3zu94sjw 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-eb3zu94sjw]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-eb3zu94sjw 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-eb3zu94sjw {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-eb3zu94sjw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-eb3zu94sjw {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-eb3zu94sjw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-eb3zu94sjw] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-eb3zu94sjw] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-eb3zu94sjw] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-eb3zu94sjw] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-eb3zu94sjw] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-eb3zu94sjw] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-eb3zu94sjw 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-eb3zu94sjw] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-eb3zu94sjw {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/players/PlayerMerge.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   PlayerMerge.razor.css
   Scoped component styles for the Merge Players admin page.
   All values use canonical tokens — no hard-coded colors, radii,
   shadows, or spacing.  See /ui-rules.md.
   ───────────────────────────────────────────────────────────── */

/* ── Typeahead picker (Select step) ──────────────────────────── */

.adm-merge-picker-list[b-jweckcev7k] {
    margin-top: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    max-height: 20rem;
    overflow-y: auto;
}

.adm-merge-picker-row[b-jweckcev7k] {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: var(--text-body-size);
}

    .adm-merge-picker-row:last-child[b-jweckcev7k] {
        border-bottom: 0;
    }

    .adm-merge-picker-row:hover[b-jweckcev7k] {
        background: var(--color-card-hover);
    }

.adm-merge-picker-meta[b-jweckcev7k] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.adm-merge-selected[b-jweckcev7k] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ── Review step — summary cards ─────────────────────────────── */

.adm-merge-summary-card[b-jweckcev7k] {
    padding: var(--space-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Impacts table ───────────────────────────────────────────── */

.adm-merge-impact-table[b-jweckcev7k] {
    margin-top: var(--space-3);
}

/* ── XP note callout ─────────────────────────────────────────── */

.adm-merge-xp-note[b-jweckcev7k] {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

/* ── Collisions ──────────────────────────────────────────────── */

.adm-merge-collision[b-jweckcev7k] {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
}

.adm-merge-collision-header[b-jweckcev7k] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-3);
}

.adm-merge-collision-options[b-jweckcev7k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.adm-merge-radio[b-jweckcev7k] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .adm-merge-radio:hover[b-jweckcev7k] {
        background: var(--color-card-hover);
    }

    .adm-merge-radio input[type="radio"][b-jweckcev7k] {
        margin-top: 0.2rem;
        flex-shrink: 0;
    }

    .adm-merge-radio > span[b-jweckcev7k] {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

/* ── Warning list ────────────────────────────────────────────── */

.adm-merge-warning-list[b-jweckcev7k] {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text);
}

/* ── Footer ──────────────────────────────────────────────────── */

.adm-merge-footer[b-jweckcev7k] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
}

/* ── Result step — change log table ──────────────────────────── */

.adm-merge-items-table[b-jweckcev7k] {
    margin-top: var(--space-3);
}

    .adm-merge-items-table td[b-jweckcev7k],
    .adm-merge-items-table th[b-jweckcev7k] {
        vertical-align: top;
    }
/* /Components/Pages/Communities.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   Communities.razor — public community directory at /communities.

   Inherits design tokens from PlatformShellLayout via cascade. Class
   prefix is .cm-* (communities). All rules are component-scoped via
   Blazor's [b-xxxxx] attribute — cannot leak outside this component.
   ────────────────────────────────────────────────────────────────────── */

.cm-page[b-gv0bnn4f5r] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Header (title + search) ─────────────────────────────────────────── */
.cm-header[b-gv0bnn4f5r] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px 36px 32px;
    position: relative;
    overflow: hidden;
}

.cm-header[b-gv0bnn4f5r]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.10), transparent 70%);
    pointer-events: none;
}

.cm-eyebrow[b-gv0bnn4f5r] {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.cm-title[b-gv0bnn4f5r] {
    margin: 0 0 12px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--m-white);
    position: relative;
    z-index: 1;
}

.cm-sub[b-gv0bnn4f5r] {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--m-text-light);
    max-width: 600px;
    position: relative;
    z-index: 1;
}

/* ── Search bar ──────────────────────────────────────────────────────── */
.cm-search[b-gv0bnn4f5r] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cm-search-input[b-gv0bnn4f5r] {
    flex: 1 1 240px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--m-radius-sm);
    color: var(--m-white);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cm-search-input[b-gv0bnn4f5r]::placeholder {
    color: rgba(255,255,255,0.35);
}

.cm-search-input:focus[b-gv0bnn4f5r] {
    border-color: var(--m-cyan);
    box-shadow: 0 0 0 3px rgba(0,188,212,0.15);
}

.cm-search-btn[b-gv0bnn4f5r] {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: var(--m-radius-sm);
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 16px rgba(0,188,212,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.cm-search-btn:hover[b-gv0bnn4f5r] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.45);
}

/* ── States ──────────────────────────────────────────────────────────── */
.cm-loading[b-gv0bnn4f5r] {
    text-align: center;
    padding: 48px 20px;
    color: var(--m-text-muted);
    font-size: 16px;
}

.cm-result-count[b-gv0bnn4f5r] {
    margin: 0;
    color: var(--m-text-muted);
    font-size: 14px;
    padding: 0 4px;
}

.cm-result-count strong[b-gv0bnn4f5r] {
    color: var(--m-white);
}

.cm-empty[b-gv0bnn4f5r] {
    text-align: center;
    padding: 64px 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--m-radius);
}

.cm-empty-icon[b-gv0bnn4f5r] {
    font-size: 48px;
    line-height: 1;
    display: block;
    margin-bottom: 18px;
    opacity: 0.85;
}

.cm-empty-title[b-gv0bnn4f5r] {
    margin: 0 0 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--m-white);
}

.cm-empty-title strong[b-gv0bnn4f5r] {
    color: var(--m-cyan);
}

.cm-empty-body[b-gv0bnn4f5r] {
    margin: 8px auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--m-text-light);
    max-width: 480px;
}

.cm-link[b-gv0bnn4f5r],
.cm-link-btn[b-gv0bnn4f5r] {
    color: var(--m-cyan);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    transition: color 0.15s;
}

.cm-link:hover[b-gv0bnn4f5r],
.cm-link-btn:hover[b-gv0bnn4f5r] {
    color: var(--m-white);
}

/* ── Grid of community cards ─────────────────────────────────────────── */
.cm-grid[b-gv0bnn4f5r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cm-card[b-gv0bnn4f5r] {
    background: var(--m-navy-mid);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--m-radius);
    padding: 24px 24px 20px;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cm-card:hover[b-gv0bnn4f5r] {
    transform: translateY(-3px);
    border-color: rgba(0,188,212,0.35);
}

.cm-card-head[b-gv0bnn4f5r] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

/* Logo avatar — circle anchored on the left of the card head.
   Same visual treatment as the platform court-logo so cards feel
   cohesive with the rest of the app. */
.cm-card-avatar[b-gv0bnn4f5r] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--m-navy);
    border: 2px solid rgba(0,188,212,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cm-card-avatar img[b-gv0bnn4f5r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cm-card-avatar-initials[b-gv0bnn4f5r] {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--m-cyan);
    letter-spacing: 0.04em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cm-card-headtext[b-gv0bnn4f5r] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cm-card-name[b-gv0bnn4f5r] {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--m-white);
    line-height: 1.2;
    word-break: break-word;
    min-width: 0;
}

.cm-card-location[b-gv0bnn4f5r] {
    color: var(--m-text-muted);
    font-size: 12px;
}

.cm-trial-pill[b-gv0bnn4f5r] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(255,193,7,0.18);
    color: var(--m-gold);
    border: 1px solid rgba(255,193,7,0.4);
    border-radius: 100px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.cm-card-meta[b-gv0bnn4f5r] {
    margin: 0;
    font-size: 13px;
    color: var(--m-text-muted);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cm-card-meta-sep[b-gv0bnn4f5r] {
    color: rgba(255,255,255,0.25);
}

.cm-card-host[b-gv0bnn4f5r] {
    color: rgba(255,255,255,0.5);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
}

.cm-card-actions[b-gv0bnn4f5r] {
    display: flex;
    margin-top: auto;
}

.cm-btn[b-gv0bnn4f5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: var(--m-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    flex: 1 1 auto;
}

.cm-btn-primary[b-gv0bnn4f5r] {
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 16px rgba(0,188,212,0.3);
}

.cm-btn-primary:hover[b-gv0bnn4f5r] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.45);
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cm-header[b-gv0bnn4f5r] {
        padding: 28px 22px 24px;
    }

    .cm-card[b-gv0bnn4f5r] {
        padding: 20px;
    }

    .cm-search-btn[b-gv0bnn4f5r] {
        width: 100%;
    }
}
/* /Components/Pages/Me.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   Me.razor — player global profile (page-specific styles only).

   Chrome (navy background, fonts, design tokens, topbar, footer) lives
   in PlatformShellLayout.razor.css. This file owns ONLY the page body:
   container, hero, stats strip, communities grid, account actions.

   Design tokens (--m-cyan, --m-navy, etc.) are defined on .platform-shell
   in the layout's scoped CSS. They cascade in here via standard CSS
   inheritance — var() is a runtime lookup, not a selector match, so it
   resolves correctly even though this file has its own scope attribute.

   Isolation: this file is component-scoped. Every selector gets a
   [b-xxxxx] attribute at build time, so these rules CANNOT match
   outside /me. All class names use the .me-* prefix as a defense in
   depth.
   ────────────────────────────────────────────────────────────────────── */

/* ── Page container (sits inside .platform-shell-main) ───────────────── */
.me-container[b-gg5hd5lpt4] {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Loading state ───────────────────────────────────────────────────── */
.me-loading[b-gg5hd5lpt4] {
    text-align: center;
    padding: 80px 20px;
    color: var(--m-text-muted);
    font-size: 16px;
}

/* ── Hero (identity header + stats strip) ────────────────────────────── */
.me-hero[b-gg5hd5lpt4] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
    overflow: hidden;
}

.me-hero-row[b-gg5hd5lpt4] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.me-hero[b-gg5hd5lpt4]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.10), transparent 70%);
    pointer-events: none;
}

.me-avatar[b-gg5hd5lpt4] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    border: 3px solid var(--m-cyan);
    box-shadow: 0 8px 32px rgba(0,188,212,0.35);
    position: relative;
    z-index: 1;
}

.me-avatar-img[b-gg5hd5lpt4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.me-avatar-initials[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: var(--m-navy);
    letter-spacing: -0.02em;
}

.me-hero-text[b-gg5hd5lpt4] {
    min-width: 0;
    flex: 1 1 240px;
    position: relative;
    z-index: 1;
}

.me-name[b-gg5hd5lpt4] {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--m-white);
}

.me-email[b-gg5hd5lpt4] {
    margin: 8px 0 0;
    color: var(--m-text-light);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    word-break: break-word;
}

.me-verified-pill[b-gg5hd5lpt4] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(76,175,80,0.15);
    color: var(--m-green-light);
    border: 1px solid rgba(76,175,80,0.35);
    border-radius: 100px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Hero stats strip ────────────────────────────────────────────────── */
.me-hero-stats[b-gg5hd5lpt4] {
    display: flex;
    gap: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.10);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.me-stat[b-gg5hd5lpt4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 80px;
}

.me-stat-num[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--m-cyan);
    letter-spacing: -0.01em;
}

.me-stat-label[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--m-text-muted);
}

/* ── Verify-email banner ─────────────────────────────────────────────── */
.me-verify-banner[b-gg5hd5lpt4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: rgba(255,193,7,0.10);
    border: 1px solid rgba(255,193,7,0.35);
    border-radius: var(--m-radius);
    color: var(--m-text-light);
    font-size: 15px;
    line-height: 1.55;
}

.me-verify-banner strong[b-gg5hd5lpt4] {
    color: var(--m-gold);
}

.me-link-btn[b-gg5hd5lpt4] {
    background: transparent;
    border: 1px solid rgba(255,193,7,0.45);
    padding: 8px 16px;
    color: var(--m-gold);
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--m-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.me-link-btn:hover:not(:disabled)[b-gg5hd5lpt4] {
    background: rgba(255,193,7,0.15);
    border-color: rgba(255,193,7,0.7);
    transform: translateY(-1px);
}

.me-link-btn:disabled[b-gg5hd5lpt4] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Status banner (success / error) ─────────────────────────────────── */
.me-status[b-gg5hd5lpt4] {
    padding: 14px 18px;
    border-radius: var(--m-radius-sm);
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.me-status-success[b-gg5hd5lpt4] {
    background: rgba(76,175,80,0.10);
    border-color: rgba(76,175,80,0.35);
    color: var(--m-green-light);
}

.me-status-error[b-gg5hd5lpt4] {
    background: rgba(211,47,47,0.12);
    border-color: rgba(211,47,47,0.4);
    color: #ef9a9a;
}

/* ── Section (My Communities) ────────────────────────────────────────── */
.me-section[b-gg5hd5lpt4] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 32px 36px;
}

.me-section-head[b-gg5hd5lpt4] {
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.me-section-tag[b-gg5hd5lpt4] {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-bottom: 6px;
}

.me-section-title[b-gg5hd5lpt4] {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--m-white);
}

/* ── Communities grid ────────────────────────────────────────────────── */
.me-tenant-grid[b-gg5hd5lpt4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.me-tenant-card[b-gg5hd5lpt4] {
    background: var(--m-navy-mid);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--m-radius);
    padding: 24px 24px 20px;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.me-tenant-card:hover[b-gg5hd5lpt4] {
    transform: translateY(-3px);
    border-color: rgba(0,188,212,0.35);
}

.me-tenant-card-home[b-gg5hd5lpt4] {
    border-color: rgba(255,193,7,0.45);
    background: linear-gradient(160deg, rgba(255,193,7,0.08), rgba(255,193,7,0.02)), var(--m-navy-mid);
}

.me-tenant-card-home:hover[b-gg5hd5lpt4] {
    border-color: rgba(255,193,7,0.75);
}

.me-tenant-card-head[b-gg5hd5lpt4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.me-tenant-name[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--m-white);
    line-height: 1.2;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.me-home-badge[b-gg5hd5lpt4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(255,193,7,0.18);
    color: var(--m-gold);
    border: 1px solid rgba(255,193,7,0.4);
    border-radius: 100px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.me-tenant-meta[b-gg5hd5lpt4] {
    margin: 0;
    font-size: 13px;
    color: var(--m-text-muted);
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.me-tenant-meta-sep[b-gg5hd5lpt4] {
    color: rgba(255,255,255,0.25);
}

.me-tenant-actions[b-gg5hd5lpt4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ── Buttons (page-specific) ─────────────────────────────────────────── */
.me-btn[b-gg5hd5lpt4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: var(--m-radius-sm);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.me-btn:disabled[b-gg5hd5lpt4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.me-btn-primary[b-gg5hd5lpt4] {
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 16px rgba(0,188,212,0.3);
    flex: 1 1 auto;
}

.me-btn-primary:hover:not(:disabled)[b-gg5hd5lpt4] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.45);
}

.me-btn-secondary[b-gg5hd5lpt4] {
    background: transparent;
    color: var(--m-white);
    border-color: rgba(255,255,255,0.25);
}

.me-btn-secondary:hover:not(:disabled)[b-gg5hd5lpt4] {
    border-color: var(--m-cyan);
    background: rgba(0,188,212,0.08);
}

.me-btn-outline[b-gg5hd5lpt4] {
    background: transparent;
    color: var(--m-text-light);
    border-color: rgba(255,255,255,0.18);
}

.me-btn-outline:hover:not(:disabled)[b-gg5hd5lpt4] {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
    color: var(--m-white);
}

.me-btn-small[b-gg5hd5lpt4] {
    font-size: 11px;
    padding: 8px 14px;
}

/* ── Empty state (no communities yet) ────────────────────────────────── */
.me-empty[b-gg5hd5lpt4] {
    text-align: center;
    padding: 32px 16px 16px;
}

.me-empty-icon[b-gg5hd5lpt4] {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 18px;
    display: block;
    opacity: 0.85;
}

.me-empty-title[b-gg5hd5lpt4] {
    margin: 0 0 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--m-white);
}

.me-empty-body[b-gg5hd5lpt4] {
    margin: 8px auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--m-text-light);
    max-width: 480px;
}

/* ── Hint when memberships exist but no home court ───────────────────── */
.me-hint-home[b-gg5hd5lpt4] {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: rgba(0,188,212,0.10);
    color: var(--m-text-light);
    border: 1px solid rgba(0,188,212,0.3);
    border-radius: var(--m-radius-sm);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Account actions row ─────────────────────────────────────────────── */
.me-actions[b-gg5hd5lpt4] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.me-logout-form[b-gg5hd5lpt4] {
    margin: 0;
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .me-hero[b-gg5hd5lpt4] {
        padding: 28px 22px 24px;
        gap: 22px;
    }

    .me-hero-row[b-gg5hd5lpt4] {
        gap: 18px;
    }

    .me-hero-stats[b-gg5hd5lpt4] {
        gap: 24px;
        padding-top: 20px;
    }

    .me-stat-num[b-gg5hd5lpt4] {
        font-size: 28px;
    }

    .me-section[b-gg5hd5lpt4] {
        padding: 24px 22px;
    }

    .me-tenant-card[b-gg5hd5lpt4] {
        padding: 20px;
    }

    .me-actions[b-gg5hd5lpt4] {
        flex-direction: column;
        align-items: stretch;
    }

    .me-actions .me-btn[b-gg5hd5lpt4],
    .me-logout-form .me-btn[b-gg5hd5lpt4] {
        width: 100%;
    }
}

/* ── Home court section (mirrors mobile Home) ─────────────────────────
   Sits between the hero and the My Communities grid. Renders only when
   the user has a HomeTenantId set AND that tenant has a Player row for
   them. */
.me-homecourt-heading[b-gg5hd5lpt4] {
    display: flex;
    align-items: center;
    gap: 16px;
}
.me-homecourt-logo[b-gg5hd5lpt4] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 2px solid var(--m-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}
.me-homecourt-logo img[b-gg5hd5lpt4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.me-homecourt-logo-initials[b-gg5hd5lpt4] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--m-cyan);
    letter-spacing: 0.02em;
}

.me-homecourt-grid[b-gg5hd5lpt4] {
    display: grid;
    grid-template-columns: minmax(200px, 240px) 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 8px;
}
.me-homecourt-card-wrap[b-gg5hd5lpt4] {
    /* Center the PlayerCard inside its column */
    display: flex;
    justify-content: center;
}
.me-homecourt-stats-grid[b-gg5hd5lpt4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.me-homecourt-stats-grid .me-stat[b-gg5hd5lpt4] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,188,212,0.20);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.me-homecourt-split[b-gg5hd5lpt4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.me-homecourt-split-row[b-gg5hd5lpt4] {
    display: grid;
    grid-template-columns: 110px 1fr 80px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.me-homecourt-split-label[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    color: var(--m-text-light);
}
.me-homecourt-split-meta[b-gg5hd5lpt4] {
    font-size: 13px;
    color: var(--m-text-muted);
}
.me-homecourt-split-rate[b-gg5hd5lpt4] {
    text-align: right;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--m-cyan);
    font-size: 16px;
}

/* Badges grid */
.me-badges-block[b-gg5hd5lpt4] { margin-top: 28px; }
.me-subhead[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--m-text-light);
    margin: 0 0 12px;
}
.me-badges-grid[b-gg5hd5lpt4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.me-badge-tile[b-gg5hd5lpt4] {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.me-badge-tile-icon[b-gg5hd5lpt4] { font-size: 28px; line-height: 1; }
.me-badge-tile-name[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m-text-light);
    line-height: 1.25;
}
.me-badge-tile-count[b-gg5hd5lpt4] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    color: var(--m-cyan);
    font-weight: 600;
}
.me-badge-rarity-uncommon[b-gg5hd5lpt4]  { border-color: rgba(76,175,80,0.45); }
.me-badge-rarity-rare[b-gg5hd5lpt4]      { border-color: rgba(0,188,212,0.55); }
.me-badge-rarity-legendary[b-gg5hd5lpt4] {
    border-color: var(--m-gold);
    box-shadow: 0 0 12px rgba(255,193,7,0.30);
}
.me-badge-rarity-hidden[b-gg5hd5lpt4] {
    border-color: rgba(155,40,71,0.55);
    background: rgba(155,40,71,0.10);
}
.me-badge-tile.is-featured[b-gg5hd5lpt4] {
    background: linear-gradient(135deg, rgba(0,188,212,0.12), rgba(76,175,80,0.08));
}

/* Leaderboard */
.me-leaderboard[b-gg5hd5lpt4] {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,188,212,0.15);
    border-radius: 12px;
    overflow: hidden;
}
.me-leaderboard-row[b-gg5hd5lpt4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.me-leaderboard-row:last-child[b-gg5hd5lpt4] { border-bottom: none; }
.me-leaderboard-row.is-me[b-gg5hd5lpt4] {
    background: linear-gradient(90deg, rgba(0,188,212,0.18), rgba(0,188,212,0.06));
    border-left: 3px solid var(--m-cyan);
    padding-left: 13px;
}
.me-leaderboard-rank[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--m-cyan);
    width: 28px;
    text-align: center;
    font-size: 16px;
}
.me-leaderboard-row:nth-child(1) .me-leaderboard-rank[b-gg5hd5lpt4] { color: var(--m-gold); }
.me-leaderboard-row:nth-child(2) .me-leaderboard-rank[b-gg5hd5lpt4] { color: #c0c0c0; }
.me-leaderboard-row:nth-child(3) .me-leaderboard-rank[b-gg5hd5lpt4] { color: #cd7f32; }
.me-leaderboard-avatar[b-gg5hd5lpt4] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0,188,212,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
}
.me-leaderboard-avatar img[b-gg5hd5lpt4] { width: 100%; height: 100%; object-fit: cover; }
.me-leaderboard-avatar-initials[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--m-cyan);
}
.me-leaderboard-name[b-gg5hd5lpt4] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: var(--m-white);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.me-leaderboard-you[b-gg5hd5lpt4] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--m-cyan);
    color: var(--m-navy);
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
}
.me-leaderboard-value[b-gg5hd5lpt4] {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--m-cyan);
    font-size: 16px;
}

/* Stack the home-court grid on narrow screens */
@media (max-width: 720px) {
    .me-homecourt-grid[b-gg5hd5lpt4] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .me-homecourt-split-row[b-gg5hd5lpt4] {
        grid-template-columns: 100px 1fr 60px;
    }
}
/* /Components/Pages/PlatformHome.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   PlatformHome.razor — platform landing page at /welcome (served at /).

   Inherits design tokens (--m-navy, --m-cyan, ...) from PlatformShellLayout
   via CSS cascade. Class prefix is .pl-* (platform-landing) to keep grep
   audits clean. All rules are component-scoped — Blazor appends a
   [b-xxxxx] attribute at build, so they only match elements rendered by
   this page.
   ────────────────────────────────────────────────────────────────────── */

.pl-page[b-uxsymdxa83] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ── Visitor hero ────────────────────────────────────────────────────── */
.pl-hero[b-uxsymdxa83] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 56px 48px 64px;
    position: relative;
    overflow: hidden;
}

.pl-hero[b-uxsymdxa83]::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.14), transparent 70%);
    pointer-events: none;
}

.pl-hero[b-uxsymdxa83]::after {
    content: '';
    position: absolute;
    bottom: -120px;
    left: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76,175,80,0.10), transparent 70%);
    pointer-events: none;
}

.pl-hero-inner[b-uxsymdxa83] {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.pl-hero-eyebrow[b-uxsymdxa83] {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-cyan);
    background: rgba(0,188,212,0.12);
    border: 1px solid rgba(0,188,212,0.3);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 22px;
}

.pl-hero-title[b-uxsymdxa83] {
    margin: 0 0 24px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--m-white);
}

.pl-accent[b-uxsymdxa83] {
    color: var(--m-cyan);
}

.pl-hero-sub[b-uxsymdxa83] {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--m-text-light);
    font-weight: 300;
    max-width: 540px;
}

.pl-hero-ctas[b-uxsymdxa83] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Signed-in welcome ───────────────────────────────────────────────── */
.pl-welcome[b-uxsymdxa83] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px 36px 32px;
    position: relative;
    overflow: hidden;
}

.pl-welcome[b-uxsymdxa83]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.10), transparent 70%);
    pointer-events: none;
}

.pl-welcome-row[b-uxsymdxa83] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.pl-avatar[b-uxsymdxa83] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    border: 3px solid var(--m-cyan);
    box-shadow: 0 8px 28px rgba(0,188,212,0.32);
}

.pl-avatar-img[b-uxsymdxa83] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-avatar-initials[b-uxsymdxa83] {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--m-navy);
    letter-spacing: -0.02em;
}

.pl-welcome-text[b-uxsymdxa83] {
    min-width: 0;
    flex: 1 1 240px;
}

.pl-welcome-eyebrow[b-uxsymdxa83] {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-bottom: 6px;
}

.pl-welcome-name[b-uxsymdxa83] {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--m-white);
}

.pl-welcome-home[b-uxsymdxa83] {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--m-text-light);
}

.pl-welcome-home-empty[b-uxsymdxa83] {
    color: var(--m-text-muted);
}

.pl-welcome-home-link[b-uxsymdxa83] {
    color: var(--m-cyan);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.pl-welcome-home-link:hover[b-uxsymdxa83] {
    color: var(--m-white);
}

/* ── Tile grid (discover / quick-links) ──────────────────────────────── */
.pl-tiles[b-uxsymdxa83] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.pl-tile[b-uxsymdxa83] {
    background: var(--m-navy-mid);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--m-radius);
    padding: 28px 28px 24px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}

.pl-tile:not(.pl-tile-static):hover[b-uxsymdxa83] {
    transform: translateY(-3px);
    border-color: rgba(0,188,212,0.4);
    background: linear-gradient(160deg, rgba(0,188,212,0.06), transparent), var(--m-navy-mid);
}

.pl-tile-static[b-uxsymdxa83] {
    border-style: dashed;
    border-color: rgba(255,193,7,0.35);
    background: linear-gradient(160deg, rgba(255,193,7,0.04), rgba(255,193,7,0.01)), var(--m-navy-mid);
}

.pl-tile-icon[b-uxsymdxa83] {
    font-size: 36px;
    line-height: 1;
}

.pl-tile-title[b-uxsymdxa83] {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--m-white);
    line-height: 1.2;
}

.pl-tile-body[b-uxsymdxa83] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--m-text-light);
    flex: 1 1 auto;
}

.pl-tile-cta[b-uxsymdxa83] {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-top: 4px;
}

.pl-tile-cta-muted[b-uxsymdxa83] {
    color: var(--m-gold);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.pl-btn[b-uxsymdxa83] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 26px;
    border-radius: var(--m-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.pl-btn-large[b-uxsymdxa83] {
    font-size: 15px;
    padding: 15px 32px;
}

.pl-btn-primary[b-uxsymdxa83] {
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 20px rgba(0,188,212,0.35);
}

.pl-btn-primary:hover[b-uxsymdxa83] {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,188,212,0.5);
}

.pl-btn-ghost[b-uxsymdxa83] {
    background: transparent;
    color: var(--m-white);
    border-color: rgba(255,255,255,0.25);
}

.pl-btn-ghost:hover[b-uxsymdxa83] {
    border-color: var(--m-cyan);
    background: rgba(0,188,212,0.08);
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pl-page[b-uxsymdxa83] {
        gap: 32px;
    }

    .pl-hero[b-uxsymdxa83] {
        padding: 36px 24px 40px;
    }

    .pl-welcome[b-uxsymdxa83] {
        padding: 28px 22px 24px;
    }

    .pl-welcome-row[b-uxsymdxa83] {
        gap: 18px;
    }

    .pl-tile[b-uxsymdxa83] {
        padding: 24px 22px 20px;
    }

    .pl-hero-ctas[b-uxsymdxa83] {
        flex-direction: column;
        align-items: stretch;
    }

    .pl-btn[b-uxsymdxa83] {
        width: 100%;
    }
}
/* /Components/Pages/PlatformMarketplace.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   PlatformMarketplace.razor — platform-wide shop at /shop (rewritten
   internally to /marketplace). Class prefix is .mp-* (marketplace).

   Inherits tokens from PlatformShellLayout via cascade. Component-scoped.
   ────────────────────────────────────────────────────────────────────── */

.mp-page[b-jhn1yn0t2j] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Header (title + search) ─────────────────────────────────────────── */
.mp-header[b-jhn1yn0t2j] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px 36px 32px;
    position: relative;
    overflow: hidden;
}

.mp-header[b-jhn1yn0t2j]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.10), transparent 70%);
    pointer-events: none;
}

.mp-eyebrow[b-jhn1yn0t2j] {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.mp-title[b-jhn1yn0t2j] {
    margin: 0 0 12px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--m-white);
    position: relative;
    z-index: 1;
}

.mp-sub[b-jhn1yn0t2j] {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--m-text-light);
    max-width: 600px;
    position: relative;
    z-index: 1;
}

/* ── Search ──────────────────────────────────────────────────────────── */
.mp-search[b-jhn1yn0t2j] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.mp-search-input[b-jhn1yn0t2j] {
    flex: 1 1 240px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--m-radius-sm);
    color: var(--m-white);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mp-search-input[b-jhn1yn0t2j]::placeholder {
    color: rgba(255,255,255,0.35);
}

.mp-search-input:focus[b-jhn1yn0t2j] {
    border-color: var(--m-cyan);
    box-shadow: 0 0 0 3px rgba(0,188,212,0.15);
}

.mp-search-btn[b-jhn1yn0t2j] {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: var(--m-radius-sm);
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 16px rgba(0,188,212,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.mp-search-btn:hover[b-jhn1yn0t2j] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.45);
}

/* ── States ──────────────────────────────────────────────────────────── */
.mp-loading[b-jhn1yn0t2j] {
    text-align: center;
    padding: 48px 20px;
    color: var(--m-text-muted);
    font-size: 16px;
}

.mp-result-count[b-jhn1yn0t2j] {
    margin: 0;
    color: var(--m-text-muted);
    font-size: 14px;
    padding: 0 4px;
}

.mp-result-count strong[b-jhn1yn0t2j] {
    color: var(--m-white);
}

.mp-empty[b-jhn1yn0t2j] {
    text-align: center;
    padding: 64px 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--m-radius);
}

.mp-empty-icon[b-jhn1yn0t2j] {
    font-size: 48px;
    line-height: 1;
    display: block;
    margin-bottom: 18px;
    opacity: 0.85;
}

.mp-empty-title[b-jhn1yn0t2j] {
    margin: 0 0 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--m-white);
}

.mp-empty-title strong[b-jhn1yn0t2j] {
    color: var(--m-cyan);
}

.mp-empty-body[b-jhn1yn0t2j] {
    margin: 8px auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--m-text-light);
    max-width: 480px;
}

.mp-link[b-jhn1yn0t2j],
.mp-link-btn[b-jhn1yn0t2j] {
    color: var(--m-cyan);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    transition: color 0.15s;
}

.mp-link:hover[b-jhn1yn0t2j],
.mp-link-btn:hover[b-jhn1yn0t2j] {
    color: var(--m-white);
}

/* ── Product grid ────────────────────────────────────────────────────── */
.mp-grid[b-jhn1yn0t2j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-card[b-jhn1yn0t2j] {
    background: var(--m-navy-mid);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--m-radius);
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}

.mp-card:hover[b-jhn1yn0t2j] {
    transform: translateY(-3px);
    border-color: rgba(0,188,212,0.35);
}

.mp-card-link[b-jhn1yn0t2j] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.mp-card-image-wrap[b-jhn1yn0t2j] {
    aspect-ratio: 1 / 1;
    background: var(--m-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.mp-card-image[b-jhn1yn0t2j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-card-image-placeholder[b-jhn1yn0t2j] {
    font-size: 56px;
    color: rgba(255,255,255,0.25);
}

.mp-card-body[b-jhn1yn0t2j] {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-card-title[b-jhn1yn0t2j] {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--m-white);
    line-height: 1.25;
    /* Two-line clamp keeps cards uniform even with long titles. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-card-tenant[b-jhn1yn0t2j] {
    margin: 0;
    font-size: 12px;
    color: var(--m-text-muted);
    letter-spacing: 0.02em;
}

.mp-card-price[b-jhn1yn0t2j] {
    margin: 6px 0 0;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--m-cyan);
    line-height: 1;
}

.mp-card-compare-price[b-jhn1yn0t2j] {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--m-text-muted);
    text-decoration: line-through;
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .mp-header[b-jhn1yn0t2j] {
        padding: 28px 22px 24px;
    }

    .mp-grid[b-jhn1yn0t2j] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .mp-card-body[b-jhn1yn0t2j] {
        padding: 12px 14px 14px;
    }

    .mp-card-title[b-jhn1yn0t2j] {
        font-size: 14px;
    }

    .mp-card-price[b-jhn1yn0t2j] {
        font-size: 16px;
    }

    .mp-search-btn[b-jhn1yn0t2j] {
        width: 100%;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   Settings.razor — platform account settings at /settings.

   Inherits design tokens from PlatformShellLayout via cascade. Class
   prefix is .st-* (settings). Component-scoped via Blazor.
   ────────────────────────────────────────────────────────────────────── */

.st-page[b-omljpa6hvs] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.st-loading[b-omljpa6hvs] {
    text-align: center;
    padding: 80px 20px;
    color: var(--m-text-muted);
    font-size: 16px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.st-header[b-omljpa6hvs] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 32px 36px 28px;
    position: relative;
    overflow: hidden;
}

.st-header[b-omljpa6hvs]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.08), transparent 70%);
    pointer-events: none;
}

.st-eyebrow[b-omljpa6hvs] {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.st-title[b-omljpa6hvs] {
    margin: 0 0 8px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--m-white);
    position: relative;
    z-index: 1;
}

.st-sub[b-omljpa6hvs] {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--m-text-light);
    max-width: 540px;
    position: relative;
    z-index: 1;
}

/* ── Section card ────────────────────────────────────────────────────── */
.st-section[b-omljpa6hvs] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 32px 36px;
}

.st-section-head[b-omljpa6hvs] {
    margin: 0 0 20px;
}

.st-section-title[b-omljpa6hvs] {
    margin: 0 0 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--m-white);
}

.st-section-sub[b-omljpa6hvs] {
    margin: 0;
    font-size: 14px;
    color: var(--m-text-muted);
    line-height: 1.5;
}

.st-section-quiet[b-omljpa6hvs] {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.06);
    padding: 20px 28px;
    text-align: center;
}

.st-quiet-text[b-omljpa6hvs] {
    margin: 0;
    font-size: 14px;
    color: var(--m-text-muted);
}

.st-link[b-omljpa6hvs] {
    color: var(--m-cyan);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.st-link:hover[b-omljpa6hvs] {
    color: var(--m-white);
}

/* ── Status messages ─────────────────────────────────────────────────── */
.st-msg[b-omljpa6hvs] {
    padding: 12px 16px;
    border-radius: var(--m-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
    margin-bottom: 16px;
}

.st-msg-success[b-omljpa6hvs] {
    background: rgba(76,175,80,0.10);
    border-color: rgba(76,175,80,0.35);
    color: var(--m-green-light);
}

.st-msg-error[b-omljpa6hvs] {
    background: rgba(211,47,47,0.12);
    border-color: rgba(211,47,47,0.4);
    color: #ef9a9a;
}

/* ── Form ────────────────────────────────────────────────────────────── */
.st-form[b-omljpa6hvs] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.st-row[b-omljpa6hvs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.st-field[b-omljpa6hvs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-field label[b-omljpa6hvs] {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--m-text-muted);
}

.st-optional[b-omljpa6hvs] {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255,255,255,0.35);
}

.st-input[b-omljpa6hvs] {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--m-radius-sm);
    color: var(--m-white);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.st-input[b-omljpa6hvs]::placeholder {
    color: rgba(255,255,255,0.35);
}

.st-input:focus[b-omljpa6hvs] {
    border-color: var(--m-cyan);
    box-shadow: 0 0 0 3px rgba(0,188,212,0.15);
}

.st-input-readonly[b-omljpa6hvs] {
    background: rgba(255,255,255,0.03);
    color: var(--m-text-muted);
    cursor: not-allowed;
}

.st-field-help[b-omljpa6hvs] {
    margin: 0;
    font-size: 13px;
    color: var(--m-text-muted);
    line-height: 1.5;
}

.st-verified[b-omljpa6hvs] {
    color: var(--m-green-light);
    font-weight: 600;
}

.st-unverified[b-omljpa6hvs] {
    color: var(--m-gold);
    font-weight: 600;
}

/* ── Form actions ────────────────────────────────────────────────────── */
.st-form-actions[b-omljpa6hvs] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.st-btn[b-omljpa6hvs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: var(--m-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.st-btn:disabled[b-omljpa6hvs] {
    opacity: 0.6;
    cursor: not-allowed;
}

.st-btn-primary[b-omljpa6hvs] {
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 16px rgba(0,188,212,0.3);
}

.st-btn-primary:hover:not(:disabled)[b-omljpa6hvs] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.45);
}

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .st-header[b-omljpa6hvs],
    .st-section[b-omljpa6hvs] {
        padding: 24px 22px;
    }

    .st-row[b-omljpa6hvs] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .st-form-actions[b-omljpa6hvs] {
        justify-content: stretch;
    }

    .st-btn[b-omljpa6hvs] {
        width: 100%;
    }
}
/* /Components/Pages/TalkToUs.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   TalkToUs.razor — anonymous contact form at /talk-to-us.

   Inherits tokens from PlatformShellLayout via cascade. Class prefix
   is .ttu-* (talk to us). All rules are component-scoped via Blazor's
   [b-xxxxx] attribute — cannot leak outside this component.
   ────────────────────────────────────────────────────────────────────── */

.ttu-page[b-oe97gkx6ck] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.ttu-header[b-oe97gkx6ck] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 36px 36px 32px;
    position: relative;
    overflow: hidden;
}

.ttu-header[b-oe97gkx6ck]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,188,212,0.10), transparent 70%);
    pointer-events: none;
}

.ttu-eyebrow[b-oe97gkx6ck] {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-cyan);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.ttu-title[b-oe97gkx6ck] {
    margin: 0 0 12px 0;
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--m-white);
    line-height: 1.1;
    position: relative;
    z-index: 1;
}

.ttu-sub[b-oe97gkx6ck] {
    margin: 0;
    color: var(--m-text-muted);
    line-height: 1.55;
    font-size: 15px;
    position: relative;
    z-index: 1;
    max-width: 560px;
}

/* ── Form card ───────────────────────────────────────────────────────── */
.ttu-form[b-oe97gkx6ck] {
    background: var(--m-navy-mid);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--m-radius);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ttu-field[b-oe97gkx6ck] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ttu-label[b-oe97gkx6ck] {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-text-muted);
}

.ttu-optional[b-oe97gkx6ck] {
    color: rgba(255,255,255,0.35);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

.ttu-input[b-oe97gkx6ck] {
    background: var(--m-navy);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--m-radius-sm);
    color: var(--m-white);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 15px;
    padding: 11px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ttu-input:focus[b-oe97gkx6ck] {
    outline: none;
    border-color: var(--m-cyan);
    box-shadow: 0 0 0 3px rgba(0,188,212,0.18);
}

.ttu-textarea[b-oe97gkx6ck] {
    resize: vertical;
    min-height: 140px;
    font-family: 'Source Sans 3', sans-serif;
    line-height: 1.5;
}

.ttu-select[b-oe97gkx6ck] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300bcd4' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

.ttu-help[b-oe97gkx6ck] {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    text-align: right;
}

/* Honeypot — invisible to humans, present in the DOM for bots. */
.ttu-honeypot[b-oe97gkx6ck] {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.ttu-actions[b-oe97gkx6ck] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
}

.ttu-btn[b-oe97gkx6ck] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: var(--m-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ttu-btn-primary[b-oe97gkx6ck] {
    background: linear-gradient(135deg, var(--m-cyan), var(--m-cyan-dark));
    color: var(--m-navy);
    box-shadow: 0 4px 16px rgba(0,188,212,0.3);
}

.ttu-btn-primary:hover:not(:disabled)[b-oe97gkx6ck] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,188,212,0.45);
}

.ttu-btn-primary:disabled[b-oe97gkx6ck] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ttu-btn-secondary[b-oe97gkx6ck] {
    background: transparent;
    color: var(--m-cyan);
    border-color: rgba(0,188,212,0.4);
}

.ttu-btn-secondary:hover[b-oe97gkx6ck] {
    background: rgba(0,188,212,0.08);
}

.ttu-fineprint[b-oe97gkx6ck] {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
}

.ttu-link[b-oe97gkx6ck] {
    color: var(--m-cyan);
    text-decoration: none;
}

.ttu-link:hover[b-oe97gkx6ck] {
    text-decoration: underline;
}

/* ── Error + success ────────────────────────────────────────────────── */
.ttu-error[b-oe97gkx6ck] {
    background: rgba(220,53,69,0.12);
    border: 1px solid rgba(220,53,69,0.4);
    color: #ff8a93;
    border-radius: var(--m-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
}

.ttu-success[b-oe97gkx6ck] {
    background: var(--m-navy-mid);
    border: 1px solid rgba(0,188,212,0.35);
    border-radius: var(--m-radius);
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.ttu-success-icon[b-oe97gkx6ck] {
    font-size: 40px;
    line-height: 1;
}

.ttu-success-title[b-oe97gkx6ck] {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--m-white);
}

.ttu-success-body[b-oe97gkx6ck] {
    margin: 0 0 8px 0;
    color: var(--m-text-muted);
    line-height: 1.55;
    max-width: 460px;
}

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ttu-header[b-oe97gkx6ck] {
        padding: 28px 22px 24px;
    }
    .ttu-title[b-oe97gkx6ck] {
        font-size: 28px;
    }
    .ttu-form[b-oe97gkx6ck] {
        padding: 22px 20px 20px;
    }
}
/* /Components/Pages/WhenAndWhere.razor.rz.scp.css */
/*
    When & Where page — zoned-band layout.

    The page reads as five horizontal bands stacked vertically:
      1. waw-title-band       — heading + quick facts + visible description
      2. waw-venue-band       — map + photo side-by-side; address with map
      3. waw-features-band    — Surface & Features + Amenities side-by-side
      4. waw-schedule-band    — weekly schedule (existing .schedule-* classes)
      5. waw-body-band        — admin long-form HTML

    Each band has internal spacing via padding rather than margin so the
    bands' visual rhythm comes from the gap between them, not from
    accumulating margin collapse.

    All side-by-side pairs collapse to single column at <768px so the page
    reads naturally on mobile without horizontal scroll. Within the venue
    band the map renders ABOVE the photo on mobile because the address
    is structurally bound to the map column.
*/

.waw-page[b-gh4fs5i700] {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* ── Zone 1: Title band ──────────────────────────────────────────── */

.waw-title-band[b-gh4fs5i700] {
    margin-bottom: 2.5rem;
}

.waw-title[b-gh4fs5i700] {
    margin: 0 0 0.75rem;
    /* Inherit site's H1 sizing — no override needed. The default h1
       size from site.css already lands at a comfortable reading
       weight for this band. */
}

.waw-quick-facts[b-gh4fs5i700] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    color: var(--color-text);
}

.waw-quick-fact[b-gh4fs5i700] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.waw-quick-fact-icon[b-gh4fs5i700] {
    /* Slightly larger than surrounding text for visual anchor. Emoji
       are inherently inline-block but explicit alignment helps when
       the rendering font swaps shape between OS versions. */
    font-size: 1.25rem;
    line-height: 1;
}

.waw-description[b-gh4fs5i700] {
    /* RTE-authored HTML — paragraphs, lists, links, emphasis are
       allowed. Use the shared .rte-content tokens (line-height, link
       color) by combining classes on the host element. */
    max-width: 70ch;
    color: var(--color-text);
}

.waw-description p:first-child[b-gh4fs5i700] { margin-top: 0; }
.waw-description p:last-child[b-gh4fs5i700]  { margin-bottom: 0; }

/* ── Zone 2: Venue band ──────────────────────────────────────────── */

.waw-venue-band[b-gh4fs5i700] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
    align-items: stretch;
}

.waw-venue-map-col[b-gh4fs5i700] {
    display: flex;
    flex-direction: column;
    /* Map at top, info below. Min-height ensures the map gets enough
       vertical space to be useful on tall viewports without growing
       unbounded on wide ones. */
}

.waw-map-frame[b-gh4fs5i700] {
    /* Aspect-ratio keeps the iframe at a consistent proportion across
       viewport widths. 4:3 reads as "actual map" rather than the
       letterbox 16:9 which often looks like a thumbnail. */
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface-alt, #f4f4f4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.waw-venue-info[b-gh4fs5i700] {
    margin-top: 1rem;
}

.waw-venue-name[b-gh4fs5i700] {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.waw-venue-address[b-gh4fs5i700] {
    margin: 0 0 0.5rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--color-text);
}

.waw-venue-phone[b-gh4fs5i700] {
    margin: 0;
    font-size: 1rem;
}

.waw-venue-phone a[b-gh4fs5i700] {
    color: var(--color-primary);
    text-decoration: none;
}

.waw-venue-phone a:hover[b-gh4fs5i700] {
    text-decoration: underline;
}

.waw-venue-photo-col[b-gh4fs5i700] {
    display: flex;
    /* Photo is also constrained to the band's aspect ratio so the two
       columns visually balance — neither column dominates regardless
       of the source image aspect ratio. */
}

.waw-venue-photo[b-gh4fs5i700] {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.waw-venue-photo-empty[b-gh4fs5i700] {
    /* Placeholder shown when no court photo is uploaded yet. Keeps the
       two-column rhythm so the map doesn't sprawl into a single full-
       width tile. Quiet visual treatment — no "upload a photo" CTA on
       the public-facing page. */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt, #f4f4f4);
    color: var(--color-text-muted, #999);
    font-size: 3rem;
    opacity: 0.4;
}

/* ── Zone 3: Features + Amenities ───────────────────────────────── */

.waw-features-band[b-gh4fs5i700] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

/* When only one panel has content, let it span the full width rather
   than rendering one populated column and one ghost empty column.
   Single-child grid rules don't exist in CSS, so the markup omits the
   panel entirely when its list is empty — see the @if guards in the
   .razor. This rule covers the case where the band exists with one
   child element. */
.waw-features-band > .waw-feature-panel:only-child[b-gh4fs5i700] {
    grid-column: 1 / -1;
    max-width: 60ch;
}

.waw-feature-panel-title[b-gh4fs5i700] {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.waw-feature-list[b-gh4fs5i700] {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
    line-height: 1.85;
    color: var(--color-text);
}

.waw-feature-list li[b-gh4fs5i700] {
    /* Subtle marker color so the dots read as decorative bullet
       separators rather than competing with the label text. */
    padding-left: 0.25rem;
}

.waw-feature-list li[b-gh4fs5i700]::marker {
    color: var(--color-primary);
}

/* ── Zone 4: Schedule ────────────────────────────────────────────── */

.waw-schedule-band[b-gh4fs5i700] {
    margin-bottom: 2.5rem;
}

.waw-section-title[b-gh4fs5i700] {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
}

/* The .schedule-list / .schedule-row / .schedule-day / .schedule-time
   / .schedule-badge / .schedule-empty classes live in site.css and
   retain their existing rendering — no override needed here. The
   .waw-schedule-band wrapper is purely structural for the band rhythm. */

/* ── Zone 5: Body band ───────────────────────────────────────────── */

.waw-body-band[b-gh4fs5i700] {
    /* RTE-authored long-form. Constrain reading width so paragraphs
       don't sprawl across a 1200px content area, which would hurt
       readability. */
    max-width: 70ch;
    line-height: 1.7;
    color: var(--color-text);
}

.waw-body-band h2[b-gh4fs5i700],
.waw-body-band h3[b-gh4fs5i700] {
    /* RTE may emit H2/H3 inside the body. Visually demote them so
       they don't compete with the page-level section titles. */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.waw-body-band p:first-child[b-gh4fs5i700] { margin-top: 0; }
.waw-body-band p:last-child[b-gh4fs5i700]  { margin-bottom: 0; }

/* ── Mobile: stack the two-column bands ──────────────────────────── */

@media (max-width: 767px) {
    .waw-page[b-gh4fs5i700] {
        padding-top: 1.25rem;
        padding-bottom: 2rem;
    }

    .waw-title-band[b-gh4fs5i700] {
        margin-bottom: 1.75rem;
    }

    .waw-quick-facts[b-gh4fs5i700] {
        gap: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    .waw-venue-band[b-gh4fs5i700] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 1.75rem;
    }

    /* On mobile the photo is more inviting at the top — gives the
       page a strong visual anchor before the structured info. The
       map column (which carries the address + phone) follows. */
    .waw-venue-photo-col[b-gh4fs5i700] { order: -1; }

    .waw-features-band[b-gh4fs5i700] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 1.75rem;
    }

    .waw-schedule-band[b-gh4fs5i700] {
        margin-bottom: 1.75rem;
    }
}
/* /Components/Shared/CardFramePicker.razor.rz.scp.css */
/* CardFramePicker — minimal scoped styles */
.card-picker-section[b-o939uaoaqp] {
    margin: 1.5rem 0;
}

.card-picker-section h3[b-o939uaoaqp] {
    margin: 0 0 0.25rem;
}
/* /Components/Shared/PlayerCard.razor.rz.scp.css */
/* ============================================================
   Player Card Component Styles
   Two card styles:
   1. "playing" — Original gradient/suit playing card design
   2. "trading" — Baseball trading card with ribbons, pickleballs, stripes
   
   NOTE: Blazor scoped CSS uses ::deep for child/nested elements.
   ============================================================ */

/* ── Shared Base ── */
.player-card[b-d81jrellu3] {
    position: relative;
    border-radius: 20px;
    border: 3px solid;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.player-card:hover[b-d81jrellu3] {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
}

.player-card-selected[b-d81jrellu3] {
    transform: scale(1.04) rotate(-1deg);
    box-shadow: var(--card-shadow), 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* ── Size Variants ── */
.player-card-sm[b-d81jrellu3] { width: 140px; height: 200px; }
.player-card-md[b-d81jrellu3] { width: 195px; height: 278px; }
.player-card-lg[b-d81jrellu3] { width: 280px; height: 400px; }

/* ============================================================
   PLAYING CARD STYLE (Original)
   ============================================================ */

.player-card[b-d81jrellu3]  .card-shine {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 18px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.25) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.05) 100%);
}
.player-card[b-d81jrellu3]  .card-shine-dark {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.03) 100%);
}

/* ── Suit Icons ── */
.player-card[b-d81jrellu3]  .card-suit { position: absolute; z-index: 4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.player-card[b-d81jrellu3]  .card-suit img { width: 100%; height: 100%; }
.player-card[b-d81jrellu3]  .card-suit-tl { top: 10px; left: 10px; }
.player-card[b-d81jrellu3]  .card-suit-br { bottom: 10px; right: 10px; transform: rotate(180deg); }
.player-card-sm[b-d81jrellu3]  .card-suit { width: 12px; height: 12px; }
.player-card-sm[b-d81jrellu3]  .card-suit-tl { top: 7px; left: 7px; }
.player-card-sm[b-d81jrellu3]  .card-suit-br { bottom: 7px; right: 7px; }
.player-card-md[b-d81jrellu3]  .card-suit { width: 16px; height: 16px; }
.player-card-lg[b-d81jrellu3]  .card-suit { width: 22px; height: 22px; }
.player-card-lg[b-d81jrellu3]  .card-suit-tl { top: 14px; left: 14px; }
.player-card-lg[b-d81jrellu3]  .card-suit-br { bottom: 14px; right: 14px; }

/* ── Frame Label ── */
.player-card[b-d81jrellu3]  .card-frame-label {
    position: absolute; top: 12px; left: 0; right: 0; text-align: center; z-index: 4;
    font-family: 'Lilita One', 'Fredoka', system-ui, cursive;
    font-size: 0.5rem; color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.player-card[b-d81jrellu3]  .card-frame-label-dark { color: var(--card-accent, rgba(255, 255, 255, 0.5)); opacity: 0.7; }
.player-card-sm[b-d81jrellu3]  .card-frame-label { font-size: 0.4rem; top: 8px; }
.player-card-lg[b-d81jrellu3]  .card-frame-label { font-size: 0.65rem; top: 18px; }

/* ── Photo Area ── */
.player-card[b-d81jrellu3]  .card-photo-frame {
    position: absolute; left: 50%; transform: translateX(-50%);
    border-radius: 14px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.05);
    z-index: 3; background: rgba(255, 255, 255, 0.15);
}
.player-card[b-d81jrellu3]  .card-photo-dark { background: rgba(255, 255, 255, 0.06); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.05); }
.player-card-sm[b-d81jrellu3]  .card-photo-frame { top: 24px; width: 96px; height: 110px; }
.player-card-md[b-d81jrellu3]  .card-photo-frame { top: 35px; width: 130px; height: 138px; }
.player-card-lg[b-d81jrellu3]  .card-photo-frame { top: 50px; width: 190px; height: 200px; }
.player-card[b-d81jrellu3]  .card-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-card[b-d81jrellu3]  .card-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); }
.player-card[b-d81jrellu3]  .card-placeholder-dark { background: rgba(255, 255, 255, 0.03); }
.player-card[b-d81jrellu3]  .card-placeholder-svg { width: 55%; height: 55%; opacity: 0.25; }
.player-card[b-d81jrellu3]  .card-placeholder-dark .card-placeholder-svg { opacity: 0.15; }

/* ── Nickname Banner ── */
.player-card[b-d81jrellu3]  .card-nickname-wrap {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 5;
    white-space: nowrap; text-align: center; pointer-events: none;
}
.player-card[b-d81jrellu3]  .card-nickname-wrap > * { pointer-events: auto; }
.player-card-sm[b-d81jrellu3]  .card-nickname-wrap { bottom: 18px; }
.player-card-md[b-d81jrellu3]  .card-nickname-wrap { bottom: 26px; }
.player-card-lg[b-d81jrellu3]  .card-nickname-wrap { bottom: 42px; }
.player-card[b-d81jrellu3]  .card-nickname-pill {
    display: flex; align-items: center; align-content: center; flex-wrap: nowrap;
    padding: 4px 10px; background: var(--card-name-bg, rgba(0, 0, 0, 0.5));
    border-radius: 30px; backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); vertical-align: middle; line-height: initial;
}
.player-card-sm[b-d81jrellu3]  .card-nickname-pill { padding: 2px 8px; border-width: 1px; }
.player-card-lg[b-d81jrellu3]  .card-nickname-pill { padding: 7px 22px; }
.player-card[b-d81jrellu3]  .card-nickname-text {
    font-family: 'Lilita One', 'Fredoka', 'Comic Sans MS', cursive;
    font-weight: 400; color: var(--card-name-color, #fff);
    letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.player-card-sm[b-d81jrellu3]  .card-nickname-text { font-size: 0.55rem; }
.player-card-md[b-d81jrellu3]  .card-nickname-text { font-size: 0.72rem; }
.player-card-lg[b-d81jrellu3]  .card-nickname-text { font-size: 1.1rem; }

/* ── Playing Card Tagline ── */
.player-card[b-d81jrellu3]  .card-tagline {
    margin-top: 2px; text-align: center;
}
.player-card[b-d81jrellu3]  .card-tagline-text {
    font-family: 'Lilita One', 'Fredoka', 'Comic Sans MS', cursive;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; max-width: 100%;
}
.player-card-sm[b-d81jrellu3]  .card-tagline { margin-top: 1px; }
.player-card-sm[b-d81jrellu3]  .card-tagline-text { font-size: 0.35rem; }
.player-card-md[b-d81jrellu3]  .card-tagline-text { font-size: 0.48rem; }
.player-card-lg[b-d81jrellu3]  .card-tagline-text { font-size: 0.75rem; }

/* ── Bottom Suit Trio ── */
.player-card[b-d81jrellu3]  .card-suit-trio { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; z-index: 4; opacity: 0.4; }
.player-card-sm[b-d81jrellu3]  .card-suit-trio { bottom: 8px; }
.player-card-sm[b-d81jrellu3]  .card-suit-trio img { width: 6px; height: 6px; }
.player-card-md[b-d81jrellu3]  .card-suit-trio { bottom: 10px; }
.player-card-md[b-d81jrellu3]  .card-suit-trio img { width: 8px; height: 8px; }
.player-card-lg[b-d81jrellu3]  .card-suit-trio { bottom: 16px; gap: 5px; }
.player-card-lg[b-d81jrellu3]  .card-suit-trio img { width: 12px; height: 12px; }

/* ── Background Patterns ── */
.player-card[b-d81jrellu3]  .card-pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.player-card[b-d81jrellu3]  .card-pattern-waves { background: repeating-linear-gradient(0deg, transparent, transparent 46px, rgba(255, 255, 255, 0.06) 46px, rgba(255, 255, 255, 0.06) 48px); }
.player-card[b-d81jrellu3]  .card-pattern-flames { background: radial-gradient(ellipse 60% 30% at 20% 95%, rgba(255, 200, 0, 0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 25% at 50% 98%, rgba(255, 150, 0, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 20% at 80% 92%, rgba(255, 200, 0, 0.07) 0%, transparent 65%); }
.player-card[b-d81jrellu3]  .card-pattern-bolts { background: repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(255, 140, 0, 0.04) 30px, rgba(255, 140, 0, 0.04) 31px); }
.player-card[b-d81jrellu3]  .card-pattern-zigzag { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -20px 0, linear-gradient(225deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -20px 0, linear-gradient(315deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%), linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%); background-size: 40px 40px; }
.player-card[b-d81jrellu3]  .card-pattern-dots { background-image: radial-gradient(rgba(255, 255, 255, 0.08) 2px, transparent 2px); background-size: 20px 20px; }
.player-card[b-d81jrellu3]  .card-pattern-bubbles { background: radial-gradient(circle 20px at 25% 15%, transparent 18px, rgba(255, 255, 255, 0.06) 18px, transparent 20px), radial-gradient(circle 14px at 70% 30%, transparent 12px, rgba(255, 255, 255, 0.05) 12px, transparent 14px), radial-gradient(circle 18px at 40% 60%, transparent 16px, rgba(255, 255, 255, 0.06) 16px, transparent 18px), radial-gradient(circle 12px at 80% 75%, transparent 10px, rgba(255, 255, 255, 0.05) 10px, transparent 12px), radial-gradient(circle 16px at 15% 85%, transparent 14px, rgba(255, 255, 255, 0.06) 14px, transparent 16px); }
.player-card[b-d81jrellu3]  .card-pattern-grid { background-image: linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; }
.player-card[b-d81jrellu3]  .card-pattern-confetti { background-image: linear-gradient(30deg, rgba(255, 214, 0, 0.08) 2px, transparent 2px), linear-gradient(150deg, rgba(0, 245, 212, 0.06) 2px, transparent 2px), linear-gradient(70deg, rgba(255, 105, 180, 0.07) 2px, transparent 2px); background-size: 40px 60px, 50px 45px, 35px 55px; }
.player-card[b-d81jrellu3]  .card-pattern-leaves { background: radial-gradient(ellipse 20px 8px at 30% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 100%), radial-gradient(ellipse 16px 6px at 70% 45%, rgba(255, 255, 255, 0.04) 0%, transparent 100%), radial-gradient(ellipse 18px 7px at 25% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 100%), radial-gradient(ellipse 14px 5px at 80% 85%, rgba(255, 255, 255, 0.04) 0%, transparent 100%); }
.player-card[b-d81jrellu3]  .card-pattern-toxicdrip { background: repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(57, 255, 20, 0.04) 28px, rgba(57, 255, 20, 0.04) 29px), radial-gradient(circle 30px at 30% 40%, rgba(57, 255, 20, 0.04) 0%, transparent 100%), radial-gradient(circle 40px at 70% 70%, rgba(57, 255, 20, 0.03) 0%, transparent 100%); }

/* ============================================================
   TRADING CARD STYLE
   ============================================================ */

.tc-card[b-d81jrellu3] {
    border: none !important;
    border-radius: 16px;
    overflow: hidden;
}

/* ── Outer border ── */
.tc-card[b-d81jrellu3]  .tc-border {
    position: absolute; inset: 0; border-radius: 16px;
    border: 7px solid var(--tc-border); z-index: 1; pointer-events: none;
}

/* ── Inner pinstripe ── */
.tc-card[b-d81jrellu3]  .tc-inner-border {
    position: absolute; inset: 6px; border-radius: 11px;
    border: 2px solid var(--tc-inner-border); z-index: 6; pointer-events: none;
}

/* ── Edge stripe backgrounds ── */
.tc-card[b-d81jrellu3]  .tc-stripe-bg {
    position: absolute; top: 8px; bottom: 8px; width: 12px;
    z-index: 2; pointer-events: none; opacity: 0.3;
}
.tc-card[b-d81jrellu3]  .tc-stripe-bg-left { left: 8px; }
.tc-card[b-d81jrellu3]  .tc-stripe-bg-right { right: 8px; }

/* ── Star stripes ── */
.tc-card[b-d81jrellu3]  .tc-stripe {
    position: absolute; top: 8px; bottom: 8px; width: 12px;
    z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; align-items: center;
    justify-content: space-evenly; padding: 25px 0;
    font-size: 0.4rem; opacity: 0.6; line-height: 1;
}
.tc-card[b-d81jrellu3]  .tc-stripe-left { left: 8px; }
.tc-card[b-d81jrellu3]  .tc-stripe-right { right: 8px; }

/* ── Photo ── */
.tc-card[b-d81jrellu3]  .tc-photo {
    position: absolute; z-index: 3; overflow: hidden; border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.12);
}
.tc-card[b-d81jrellu3]  .tc-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-card[b-d81jrellu3]  .tc-photo-placeholder {
    width: 100%; height: 100%; display: flex;
    align-items: center; justify-content: center;
    font-size: 2.5rem; background: rgba(255,255,255,0.06);
}

/* ── Corner pickleballs ── */
.tc-card[b-d81jrellu3]  .tc-ball {
    position: absolute; z-index: 7; pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* ── Bottom section ── */
.tc-card[b-d81jrellu3]  .tc-bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 8; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Heights match the photo's bottom value (= gap below photo) */
.player-card-sm.tc-card[b-d81jrellu3]  .tc-bottom { height: 48px; padding: 0 8px; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-bottom { height: 62px; padding: 0 14px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-bottom { height: 88px; padding: 0 20px; }
.tc-card[b-d81jrellu3]  .tc-sport-banner {
    display: inline-block; padding: 2px 16px 3px;
    margin-bottom: 2px; border-radius: 3px;
}
.tc-card[b-d81jrellu3]  .tc-sport-text {
    font-family: 'Bangers', 'Lilita One', cursive;
    font-size: 0.75rem; letter-spacing: 0.06em;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
    text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; max-width: 100%;
}
.tc-card[b-d81jrellu3]  .tc-nameplate {
    padding: 1px 8px 2px; border-radius: 3px; display: block;
}
.tc-card[b-d81jrellu3]  .tc-nameplate-text {
    font-family: 'Oswald', 'Bebas Neue', system-ui, sans-serif;
    font-weight: 700; font-size: 0.5rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}

/* ── Glossy shine ── */
.tc-card[b-d81jrellu3]  .tc-shine {
    position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: 16px;
    background: linear-gradient(155deg, rgba(255,255,255,0.15) 0%, transparent 30%, transparent 65%, rgba(255,255,255,0.03) 100%);
}

/* ── Neon glow effect ── */
.tc-neon[b-d81jrellu3]::after {
    content: ''; position: absolute; inset: -3px;
    border-radius: 19px; z-index: -1;
    background: var(--tc-border);
    filter: blur(10px); opacity: 0.35;
    transition: opacity 0.3s;
}
.tc-neon:hover[b-d81jrellu3]::after { opacity: 0.6; }
.tc-neon[b-d81jrellu3]  .tc-ball { filter: drop-shadow(0 0 6px var(--tc-border)); }

/* ============================================================
   TRADING CARD — SM (140×200)
   ============================================================ */
.player-card-sm.tc-card[b-d81jrellu3]  .tc-border { border-width: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-inner-border { inset: 4px; border-width: 1.5px; border-radius: 10px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-stripe-bg { width: 9px; top: 5px; bottom: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-stripe-bg-left { left: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-stripe-bg-right { right: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-stripe { width: 9px; top: 5px; bottom: 5px; font-size: 0.3rem; padding: 16px 0; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-stripe-left { left: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-stripe-right { right: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-photo { top: 10px; left: 16px; right: 16px; bottom: 48px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-photo-placeholder { font-size: 1.8rem; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-ball { width: 14px; height: 14px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-ball-tl { top: 6px; left: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-ball-tr { top: 6px; right: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-ball-bl { bottom: 44px; left: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-ball-br { bottom: 44px; right: 5px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-sport-banner { padding: 1px 8px 2px; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-sport-text { font-size: 0.5rem; }
.player-card-sm.tc-card[b-d81jrellu3]  .tc-nameplate-text { font-size: 0.35rem; }

/* ============================================================
   TRADING CARD — MD (195×278)
   ============================================================ */
.player-card-md.tc-card[b-d81jrellu3]  .tc-photo { top: 14px; left: 20px; right: 20px; bottom: 62px; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-ball { width: 20px; height: 20px; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-ball-tl { top: 10px; left: 7px; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-ball-tr { top: 10px; right: 7px; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-ball-bl { bottom: 58px; left: 7px; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-ball-br { bottom: 58px; right: 7px; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-sport-text { font-size: 0.7rem; }
.player-card-md.tc-card[b-d81jrellu3]  .tc-nameplate-text { font-size: 0.45rem; }

/* ============================================================
   TRADING CARD — LG (280×400)
   ============================================================ */
.player-card-lg.tc-card[b-d81jrellu3]  .tc-border { border-width: 9px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-inner-border { inset: 8px; border-width: 2.5px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-stripe-bg { width: 16px; top: 10px; bottom: 10px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-stripe-bg-left { left: 10px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-stripe-bg-right { right: 10px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-stripe { width: 16px; top: 10px; bottom: 10px; font-size: 0.55rem; padding: 30px 0; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-stripe-left { left: 10px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-stripe-right { right: 10px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-photo { top: 18px; left: 28px; right: 28px; bottom: 88px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-photo-placeholder { font-size: 3.5rem; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-ball { width: 28px; height: 28px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-ball-tl { top: 14px; left: 12px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-ball-tr { top: 14px; right: 12px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-ball-bl { bottom: 82px; left: 12px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-ball-br { bottom: 82px; right: 12px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-sport-banner { padding: 5px 24px 6px; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-sport-text { font-size: 1.1rem; }
.player-card-lg.tc-card[b-d81jrellu3]  .tc-nameplate-text { font-size: 0.65rem; }

/* ============================================================
   Card Picker Grid
   ============================================================ */
.card-picker-grid[b-d81jrellu3] {
    display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center;
}
.card-picker-item[b-d81jrellu3] {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.card-picker-label[b-d81jrellu3] {
    text-align: center; font-size: 0.82rem; font-weight: 700; color: #999;
    transition: color 0.2s;
}
.card-picker-label.active[b-d81jrellu3] { color: var(--color-primary, #333); }
.card-picker-desc[b-d81jrellu3] { font-size: 0.68rem; color: #bbb; margin-top: 1px; }

/* ============================================================
   Animation
   ============================================================ */
@keyframes card-float-b-d81jrellu3 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}
.player-card-float[b-d81jrellu3] { animation: card-float-b-d81jrellu3 3s ease-in-out infinite; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
    .player-card-lg[b-d81jrellu3] { width: 240px; height: 342px; }
    .player-card-lg[b-d81jrellu3]  .card-photo-frame { top: 42px; width: 160px; height: 170px; }
    .player-card-lg[b-d81jrellu3]  .card-nickname-wrap { bottom: 36px; }
    .player-card-lg[b-d81jrellu3]  .card-nickname-text { font-size: 0.95rem; }

    .player-card-lg.tc-card[b-d81jrellu3] { width: 240px; height: 342px; }
    .player-card-lg.tc-card[b-d81jrellu3]  .tc-photo { top: 14px; left: 22px; right: 22px; bottom: 75px; }
    .player-card-lg.tc-card[b-d81jrellu3]  .tc-bottom { height: 75px; }
    .player-card-lg.tc-card[b-d81jrellu3]  .tc-ball { width: 22px; height: 22px; }
}
/* /Components/Shared/UnifiedAccountBanner.razor.rz.scp.css */
/* Unified Account Banner Styles */

.unified-account-banner[b-i6pz37jj5q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideDown-b-i6pz37jj5q 0.4s ease-out;
}

@keyframes slideDown-b-i6pz37jj5q {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.unified-account-banner-content[b-i6pz37jj5q] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.unified-account-banner-icon[b-i6pz37jj5q] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.unified-account-banner-icon svg[b-i6pz37jj5q] {
    width: 100%;
    height: 100%;
}

.unified-account-banner-text[b-i6pz37jj5q] {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.unified-account-banner-text strong[b-i6pz37jj5q] {
    font-weight: 700;
}

.unified-account-banner-dismiss[b-i6pz37jj5q] {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unified-account-banner-dismiss:hover[b-i6pz37jj5q] {
    background: rgba(255, 255, 255, 0.3);
}

.unified-account-banner-dismiss svg[b-i6pz37jj5q] {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .unified-account-banner-content[b-i6pz37jj5q] {
        padding: 12px 16px;
        gap: 12px;
    }

    .unified-account-banner-text[b-i6pz37jj5q] {
        font-size: 0.875rem;
    }

    .unified-account-banner-icon[b-i6pz37jj5q] {
        width: 20px;
        height: 20px;
    }
}