/* /Components/Contact/ContactReasonCards.razor.rz.scp.css */
/* ContactReasonCards — scoped styles */

.crc-grid[b-7oseizgo9f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 640px) {
    .crc-grid[b-7oseizgo9f] {
        grid-template-columns: 1fr;
    }
}

.crc-card[b-7oseizgo9f] {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    min-height: 64px;
    background: var(--b4u-bg-surface);
    border: 1.5px solid var(--b4u-border);
    border-radius: 13px;
    padding: 13px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    width: 100%;
}

.crc-card--active[b-7oseizgo9f] {
    background: var(--b4u-primary-light);
    border-color: var(--b4u-primary);
}

.crc-card:not(.crc-card--active):hover[b-7oseizgo9f] {
    background: var(--b4u-bg-card-hover);
    border-color: var(--b4u-border);
}

.crc-icon[b-7oseizgo9f] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-text-muted);
}

.crc-icon--active[b-7oseizgo9f] {
    background: var(--b4u-primary);
    border: none;
    color: #fff;
}

/* Logo tile (e.g. EZ Lexer): show the real full-colour logo on white, keeping it
   readable whether or not the card is active (no primary wash over the logo). */
.crc-icon--logo[b-7oseizgo9f],
.crc-icon--logo.crc-icon--active[b-7oseizgo9f] {
    background: #fff;
    border: 1px solid var(--b4u-border);
    padding: 3px;
}

.crc-icon--logo.crc-icon--active[b-7oseizgo9f] {
    border-color: var(--b4u-primary);
}

.crc-icon-img[b-7oseizgo9f] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.crc-text[b-7oseizgo9f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crc-label[b-7oseizgo9f] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
}

.crc-card--active .crc-label[b-7oseizgo9f] {
    color: var(--b4u-text);
}

.crc-hint[b-7oseizgo9f] {
    display: block;
    font-size: 11.5px;
    color: var(--b4u-text-muted);
    margin-top: 1px;
    line-height: 1.3;
}
/* /Components/Contact/ContactSidebar.razor.rz.scp.css */
/* ContactSidebar — scoped styles */

.csb-stack[b-ggfvyo89ij] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.csb-card[b-ggfvyo89ij] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 18px;
    padding: 22px;
}

.csb-card--surface[b-ggfvyo89ij] {
    background: var(--b4u-bg-surface);
}

.csb-card-title[b-ggfvyo89ij] {
    font-size: 15px;
    font-weight: 700;
    color: var(--b4u-text);
    margin: 0 0 16px;
}

.csb-rows[b-ggfvyo89ij] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.csb-row[b-ggfvyo89ij] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.csb-icon-tile[b-ggfvyo89ij] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--b4u-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-primary);
}

.csb-row-body[b-ggfvyo89ij] {
    min-width: 0;
}

.csb-row-label[b-ggfvyo89ij] {
    font-size: 11.5px;
    color: var(--b4u-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.csb-row-value[b-ggfvyo89ij] {
    font-size: 14px;
    color: var(--b4u-text);
    font-weight: 600;
    margin-top: 1px;
}

.csb-email-link[b-ggfvyo89ij] {
    color: var(--b4u-text);
    text-decoration: none;
    font-weight: 600;
}

.csb-email-link:hover[b-ggfvyo89ij] {
    color: var(--b4u-primary);
    text-decoration: underline;
}

.csb-flags[b-ggfvyo89ij] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.csb-messenger[b-ggfvyo89ij] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    background: linear-gradient(90deg, #00B2FF 0%, #006AFF 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(0, 114, 241, 0.25);
    transition: all 0.2s;
}

.csb-messenger:hover[b-ggfvyo89ij] {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 114, 241, 0.35);
}

.csb-quick-body[b-ggfvyo89ij] {
    font-size: 13.5px;
    color: var(--b4u-text-muted);
    line-height: 1.55;
    margin: 0 0 14px;
}

.csb-pricing-link[b-ggfvyo89ij] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1.5px solid var(--b4u-border);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--b4u-text);
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.csb-pricing-link:hover[b-ggfvyo89ij] {
    background: var(--b4u-bg-card-hover);
    color: var(--b4u-text);
}
/* /Components/Contact/ContactSuccess.razor.rz.scp.css */
/* ContactSuccess — scoped styles */

.cs-wrap[b-do6jkaler2] {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 8px;
}

.cs-circle[b-do6jkaler2] {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 24px;
    background: color-mix(in srgb, var(--b4u-success) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--b4u-success) 33%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-success);
    animation: csPop-b-do6jkaler2 0.3s ease;
}

@keyframes csPop-b-do6jkaler2 {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.cs-title[b-do6jkaler2] {
    font-size: 26px;
    font-weight: 800;
    color: var(--b4u-text);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.cs-body[b-do6jkaler2] {
    font-size: 15.5px;
    color: var(--b4u-text-secondary);
    line-height: 1.6;
    margin: 0 0 28px;
}

.cs-actions[b-do6jkaler2] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
/* /Components/Contact/OrgWarningModal.razor.rz.scp.css */
/* OrgWarningModal — scoped styles */

.owm-backdrop[b-38k0ci90te] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(8, 8, 12, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: owmFade-b-38k0ci90te 0.2s ease;
}

@keyframes owmFade-b-38k0ci90te {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.owm-dialog[b-38k0ci90te] {
    width: min(480px, 100%);
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 22px;
    padding: 34px 34px 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    animation: owmPop-b-38k0ci90te 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

@media (max-width: 640px) {
    .owm-dialog[b-38k0ci90te] {
        padding: 28px 22px 24px;
    }
}

@keyframes owmPop-b-38k0ci90te {
    0%   { transform: translateY(12px) scale(0.97); opacity: 0; }
    100% { transform: translateY(0) scale(1);       opacity: 1; }
}

.owm-icon-wrap[b-38k0ci90te] {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--b4u-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--b4u-warning) 33%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-warning);
}

.owm-title[b-38k0ci90te] {
    font-size: 21px;
    font-weight: 800;
    color: var(--b4u-text);
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    line-height: 1.25;
}

.owm-body[b-38k0ci90te] {
    font-size: 14.5px;
    color: var(--b4u-text-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
}

.owm-dontshow[b-38k0ci90te] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--b4u-text-secondary);
    cursor: pointer;
    user-select: none;
}
.owm-dontshow input[b-38k0ci90te] {
    width: 15px;
    height: 15px;
    accent-color: var(--b4u-primary);
    cursor: pointer;
    margin: 0;
}

.owm-ack[b-38k0ci90te] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* /Components/Events/AgeDistributionChart.razor.rz.scp.css */
/* Age distribution histogram. Ported from event-detail.jsx (AgeDistributionChart).
   Bar colour is data-driven via an inline --cls custom property per column; hover/dim is pure CSS. */

.b4u-age-empty[b-x7il4phiua] { text-align: center; padding: 40px 0; color: var(--b4u-text-muted); font-size: 14px; }

/* Header + summary */
.b4u-age-head[b-x7il4phiua] { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.b4u-age-h[b-x7il4phiua] { color: var(--b4u-text); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.b4u-age-cap[b-x7il4phiua] { font-size: 12.5px; color: var(--b4u-text-muted); margin: 0; }
.b4u-age-cap-field[b-x7il4phiua] { font-weight: 700; }

.b4u-age-pills[b-x7il4phiua] { display: flex; gap: 24px; flex-wrap: wrap; }
.b4u-age-pill[b-x7il4phiua] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b4u-age-pill-v[b-x7il4phiua] { font-size: 18px; font-weight: 800; color: var(--b4u-text); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.b4u-age-pill-l[b-x7il4phiua] { font-size: 11px; color: var(--b4u-text-muted); font-weight: 500; white-space: nowrap; }

/* Plot */
.b4u-age-plot[b-x7il4phiua] { display: flex; gap: 14px; align-items: stretch; }
.b4u-age-barscol[b-x7il4phiua] { flex: 1; min-width: 0; }

.b4u-age-bars[b-x7il4phiua] { position: relative; height: 188px; display: flex; align-items: flex-end; gap: 2.5%; }
.b4u-age-grid[b-x7il4phiua] { position: absolute; left: 0; right: 0; height: 1px; background: var(--b4u-border); pointer-events: none; }

.b4u-age-col[b-x7il4phiua] { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.b4u-age-colinner[b-x7il4phiua] { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }

.b4u-age-count[b-x7il4phiua] { font-size: 12px; font-weight: 700; color: var(--b4u-text-secondary); margin-bottom: 4px; font-variant-numeric: tabular-nums; transition: color 0.15s, opacity .5s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.b4u-age-count--muted[b-x7il4phiua] { color: var(--b4u-text-muted); }

.b4u-age-fill[b-x7il4phiua] {
    width: 100%; max-width: 46px; border-radius: 6px 6px 0 0;
    background: var(--cls, var(--b4u-primary));
    transform-origin: bottom;
    transition: opacity 0.15s, box-shadow 0.15s, transform .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i, 0) * 60ms);
}
.b4u-age-fill--hatched[b-x7il4phiua] {
    max-width: 56px; background: none;
    border: 1.5px dashed var(--b4u-text-muted);
    background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--b4u-text-muted) 13%, transparent) 0 6px, transparent 6px 12px);
}

/* Tooltip — floats just above each bar */
.b4u-age-tip[b-x7il4phiua] {
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(4px); opacity: 0;
    background: var(--b4u-text); color: var(--b4u-bg-surface, #fff);
    border-radius: 7px; padding: 5px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); pointer-events: none; z-index: 5;
    transition: opacity 0.15s, transform 0.15s;
}

/* Hover: dim the rest of the plot, highlight the hovered column */
.b4u-age-plot:hover .b4u-age-fill[b-x7il4phiua] { opacity: 0.5; }
.b4u-age-col:hover .b4u-age-fill[b-x7il4phiua] { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cls, var(--b4u-primary)) 20%, transparent); }
.b4u-age-col--unknown[b-x7il4phiua] { --cls: var(--b4u-text-muted); }
.b4u-age-col:hover .b4u-age-count[b-x7il4phiua] { color: var(--cls, var(--b4u-primary)); }
.b4u-age-col:hover .b4u-age-tip[b-x7il4phiua] { opacity: 1; transform: translateX(-50%) translateY(0); }

/* x labels */
.b4u-age-xlabels[b-x7il4phiua] { display: flex; gap: 2.5%; margin-top: 8px; }
.b4u-age-xlabel[b-x7il4phiua] { flex: 1; text-align: center; min-width: 0; }
.b4u-age-xbracket[b-x7il4phiua] { font-size: 12px; font-weight: 600; color: var(--b4u-text-secondary); font-variant-numeric: tabular-nums; }
.b4u-age-xmedian[b-x7il4phiua] { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b4u-text-muted); margin-top: 2px; }

/* Class grouping band */
.b4u-age-band[b-x7il4phiua] { display: flex; gap: 2.5%; margin-top: 10px; }
.b4u-age-band-seg[b-x7il4phiua] {
    min-width: 0; border-top: 2px solid var(--cls); border-radius: 0 0 8px 8px;
    background: color-mix(in srgb, var(--cls) 8%, transparent); padding: 6px 8px;
    display: flex; flex-direction: column; gap: 1px; text-align: center;
}
.b4u-age-band-label[b-x7il4phiua] { font-size: 11.5px; font-weight: 700; color: var(--cls); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b4u-age-band-sub[b-x7il4phiua] { font-size: 10.5px; color: var(--b4u-text-muted); font-variant-numeric: tabular-nums; }

/* Divider + Unknown bucket */
.b4u-age-unknown-wrap[b-x7il4phiua] { display: flex; gap: 14px; }
.b4u-age-divider[b-x7il4phiua] { width: 1px; background: repeating-linear-gradient(var(--b4u-border) 0 6px, transparent 6px 12px); }
.b4u-age-unknown[b-x7il4phiua] { width: 92px; display: flex; flex-direction: column; }
.b4u-age-unknown .b4u-age-col[b-x7il4phiua] { height: 188px; }
.b4u-age-unknown-label[b-x7il4phiua] { text-align: center; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--b4u-text-muted); line-height: 1.3; }

/* Footnote */
.b4u-age-foot[b-x7il4phiua] { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--b4u-border); padding-top: 14px; }
.b4u-age-foot-note[b-x7il4phiua] { font-size: 12px; color: var(--b4u-text-muted); }
.b4u-age-foot-legend[b-x7il4phiua] { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--b4u-text-muted); }
.b4u-age-foot-swatch[b-x7il4phiua] {
    width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0;
    border: 1.5px dashed var(--b4u-text-muted);
    background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--b4u-text-muted) 13%, transparent) 0 4px, transparent 4px 8px);
}

/* ── Scroll-reveal: bars grow up + counts fade in ───────────────────────────
   From-states are gated behind the reveal-ready guard so nothing shows until
   the IntersectionObserver (Task 1) has had a chance to classify every element.
   The Unknown bucket column carries no --i so it uses the var(--i, 0) fallback
   (instant delay), which is intentional — it sits outside the stagger sequence. */
html.b4u-reveal-ready:not(.b4u-reveal-reduced) .b4u-age-bars[data-inview]:not(.is-in) .b4u-age-fill[b-x7il4phiua] { transform: scaleY(.001); }
html.b4u-reveal-ready:not(.b4u-reveal-reduced) .b4u-age-bars[data-inview]:not(.is-in) .b4u-age-count[b-x7il4phiua] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .b4u-age-fill[b-x7il4phiua], .b4u-age-count[b-x7il4phiua] { transition: none; }
}

/* ── Small screens ───────────────────────────────────────────────────────────
   Fit all the bars in view — no horizontal scroll. Three secondary elements are dropped
   on phones, each because its information lives elsewhere:
     • the "No birthdate" bucket  → reported in the footnote;
     • the hover tooltips         → useless on touch (and their wide boxes broke the width);
     • the class-grouping band    → conveyed by the colour-coded pills + the bar colours.
   Axis labels shrink to 10px and wrap only at the en-dash, so "18–23" stacks cleanly while
   "U18" / "70+" stay on one line. */
@media (max-width: 560px) {
    .b4u-age-unknown-wrap[b-x7il4phiua] { display: none; }
    .b4u-age-tip[b-x7il4phiua] { display: none; }
    .b4u-age-band[b-x7il4phiua] { display: none; }

    .b4u-age-bars[b-x7il4phiua] { gap: 1.5%; }
    .b4u-age-fill[b-x7il4phiua] { max-width: 34px; }

    .b4u-age-xlabels[b-x7il4phiua] { gap: 1.5%; }
    .b4u-age-xbracket[b-x7il4phiua] { font-size: 10px; white-space: normal; line-height: 1.15; }
    .b4u-age-count[b-x7il4phiua] { font-size: 10px; }
    .b4u-age-xmedian[b-x7il4phiua] { font-size: 8px; }

    .b4u-age-pills[b-x7il4phiua] { gap: 14px 18px; }
    .b4u-age-pill-v[b-x7il4phiua] { font-size: 16px; }
}
/* /Components/Events/ArchiveEventRow.razor.rz.scp.css */
/* ArchiveEventRow — compact archive list row */

.b4u-arow[b-ky4xrkswuu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 86px;   /* uniform row height across the list (content is clamped to fit) */
    background: var(--b4u-bg-card, #fff);
    border: 1px solid var(--b4u-border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;   /* clips the edge-bleeding thumbnail to the rounded corners */
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

/* Stretched nav link: covers the whole row so it's clickable, while the
   Results link (a real sibling, not nested) sits above it. Avoids the
   invalid <a> inside <a> that ejected the Results button from the row. */
.b4u-arow-stretch[b-ky4xrkswuu] { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.b4u-arow-right[b-ky4xrkswuu] { position: relative; z-index: 2; }

    .b4u-arow:hover[b-ky4xrkswuu] {
        border-color: var(--b4u-border-hover, #9ca3af);
        transform: translateX(4px);
        text-decoration: none;
        color: inherit;
    }

/* Event thumbnail: event image layered over the shared default bowling picture.
   Bleeds flush to the row's left/top/bottom edges at full height (like the
   LatestRegistrations thumbnail); the row's overflow:hidden + radius round the
   outer corners. A missing/404 image simply doesn't paint, so the default shows. */
.b4u-arow-thumb[b-ky4xrkswuu] {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    align-self: stretch;
    width: 124px;
    min-height: 58px;
    margin: -14px 0 -14px -20px;   /* cancel .b4u-arow padding to bleed to the edges */
    background-color: var(--b4u-bg-elevated);
    box-shadow: inset 0 0 0 1px var(--b4u-border);
}
.b4u-arow-thumbimg[b-ky4xrkswuu] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 560px) {
    .b4u-arow-thumb[b-ky4xrkswuu] { width: 96px; }
}

/* Body: everything right of the thumbnail. Row on desktop, stacks on mobile. */
.b4u-arow-body[b-ky4xrkswuu] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Left: flag + name + venue */
.b4u-arow-left[b-ky4xrkswuu] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;   /* let the name ellipsis instead of forcing the row wider/taller */
}

.b4u-arow-info[b-ky4xrkswuu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.b4u-arow-name[b-ky4xrkswuu] {
    font-size: 15px;
    font-weight: 600;
    color: var(--b4u-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b4u-arow-venue[b-ky4xrkswuu] {
    font-size: 12px;
    color: var(--b4u-text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Middle meta: date, tags, players */
.b4u-arow-meta[b-ky4xrkswuu] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.b4u-arow-dates[b-ky4xrkswuu] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--b4u-text-secondary, #374151);
    white-space: nowrap;
}

.b4u-arow-tags[b-ky4xrkswuu] {
    display: flex;
    gap: 4px;
}

.b4u-arow-tag[b-ky4xrkswuu] {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--b4u-tag-bg, rgba(107,114,128,0.1));
    color: var(--b4u-tag-text, #6b7280);
    white-space: nowrap;
}

.b4u-arow-players[b-ky4xrkswuu] {
    font-size: 13px;
    color: var(--b4u-text-muted, #6b7280);
    white-space: nowrap;
}

/* Right: results or muted label */
.b4u-arow-right[b-ky4xrkswuu] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.b4u-arow-results[b-ky4xrkswuu] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: var(--b4u-primary, #6366f1);
    color: #fff;
    text-decoration: none;
    transition: opacity 0.15s;
}

    .b4u-arow-results:hover[b-ky4xrkswuu] {
        opacity: 0.88;
        text-decoration: none;
        color: #fff;
    }

.b4u-arow-noresults[b-ky4xrkswuu] {
    font-size: 12px;
    color: var(--b4u-text-muted, #9ca3af);
    font-style: italic;
}

/* Below tablet: stack name/venue, meta and results into a column beside the
   full-height thumbnail (instead of the old ragged flex-wrap). */
@media (max-width: 720px) {
    .b4u-arow[b-ky4xrkswuu] { min-height: 0; }
    .b4u-arow-body[b-ky4xrkswuu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .b4u-arow-left[b-ky4xrkswuu] { flex: 0 0 auto; width: 100%; }
    .b4u-arow-meta[b-ky4xrkswuu] { width: 100%; }
}
/* /Components/Events/ChyronItem.razor.rz.scp.css */
.chy-item[b-o7qzp1622f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 13px;
    letter-spacing: 0.005em;
    color: var(--b4u-text-secondary);
    text-decoration: none;
}

.chy-item:hover[b-o7qzp1622f] { text-decoration: none; }

.chy-name[b-o7qzp1622f] { color: var(--b4u-text); font-weight: 800; }
.chy-target[b-o7qzp1622f] { color: var(--b4u-primary); font-weight: 700; }

/* One-shot green flash on a fresh arrival. The base .chy-item has no animation, so Blazor
   adding is-new starts this once; removing it 2.6s later is a no-op. */
.chy-item.is-new[b-o7qzp1622f] { animation: chy-new-b-o7qzp1622f 2.6s ease-out; }

@keyframes chy-new-b-o7qzp1622f {
    0%   { background: rgba(34, 197, 94, 0); }
    12%  { background: rgba(34, 197, 94, 0.24); }
    100% { background: rgba(34, 197, 94, 0); }
}

/* Separator between entries: a 5px dot with a 3.5px ring. Literal muted greys via color-mix
   so it works in both themes without a dedicated token. */
.chy-sep[b-o7qzp1622f] {
    flex-shrink: 0;
    align-self: center;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--b4u-text-muted) 55%, transparent);
    box-shadow: 0 0 0 3.5px color-mix(in oklab, var(--b4u-text-muted) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .chy-item.is-new[b-o7qzp1622f] { animation: none; }
}
/* /Components/Events/Countdown/AddToCalendarLink.razor.rz.scp.css */
.cal[b-i6qp8locii] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .18s, color .18s;
}

.cal:hover[b-i6qp8locii] {
    border-color: var(--b4u-border-hover);
    color: var(--b4u-text);
}

.cal.is-block[b-i6qp8locii] { width: 100%; }
/* /Components/Events/Countdown/RegOpensBlock.razor.rz.scp.css */
.block[b-7gsq0fows3] { min-width: 0; }

.eyebrow[b-7gsq0fows3] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
}

.when[b-7gsq0fows3] {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--b4u-text-muted);
}
/* /Components/Events/Countdown/RegOpensCardFooter.razor.rz.scp.css */
.foot[b-0xk71itzkg] {
    display: flex;
    align-items: center;
    gap: 14px;
    /* Pins the footer to the bottom of an equal-height card, exactly as the .b4u-hcard-foot
       this replaces does. The /events grid stretches its items, .b4u-hcard is height:100% and
       .b4u-hcard-body is a column flex container — without this a scheduled event's countdown
       floats mid-card with dead space under it while its open neighbours sit flush.
       RegOpensScope is display:contents, so .foot really is a direct flex item of the body.
       No-op on EventCard, whose block-flow footer resolves auto to 0. */
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--b4u-border);
}
/* /Components/Events/Countdown/RegOpensHeroCta.razor.rz.scp.css */
.cta[b-hyan97sis0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 340px;
    max-width: 100%;
    padding: 16px;
    border-radius: 16px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
}

.top[b-hyan97sis0] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* RegOpensRing's track defaults to --b4u-bg-surface, which is exactly this card's own
   background — so on the hero the track vanished and the ring read as a floating arc, worst
   at a low fill. Fixed here rather than in the ring: the card chose the background, so the
   card owns the contrast, and the ring keeps working unchanged on every other surface. */
.cta[b-hyan97sis0]  .track { stroke: var(--b4u-bg-elevated); }
/* /Components/Events/Countdown/RegOpensPill.razor.rz.scp.css */
.pill[b-cq9gkmeod5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    background: color-mix(in srgb, var(--b4u-soon) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--b4u-soon) 27%, transparent);
    color: var(--b4u-soon);
}

.pill.is-solid[b-cq9gkmeod5] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: var(--b4u-soon);
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--b4u-soon) 40%, transparent);
}
/* /Components/Events/Countdown/RegOpensReadout.razor.rz.scp.css */
.readout[b-787nxkqbxm] {
    font-weight: 800;
    color: var(--b4u-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
    white-space: nowrap;
}
/* /Components/Events/Countdown/RegOpensRing.razor.rz.scp.css */
.ring[b-9jvvm2sefs] { position: relative; flex-shrink: 0; }
.ring svg[b-9jvvm2sefs] { display: block; }

.track[b-9jvvm2sefs] { stroke: var(--b4u-bg-surface); }

.arc[b-9jvvm2sefs] {
    stroke: var(--b4u-primary);
    transition: stroke-dashoffset .5s;
}

/* The tick keeps running under reduced motion — it is information — but the arc
   stops animating between values. */
@media (prefers-reduced-motion: reduce) {
    .arc[b-9jvvm2sefs] { transition: none; }
}

.centre[b-9jvvm2sefs] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lead[b-9jvvm2sefs] {
    font-weight: 800;
    line-height: 1;
    color: var(--b4u-text);
    font-variant-numeric: tabular-nums;
}

.unit[b-9jvvm2sefs] {
    margin-top: 2px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
}
/* /Components/Events/Countdown/RegOpensRowMini.razor.rz.scp.css */
.mini[b-ghc5r3nsod] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    min-width: 128px;
}

.line[b-ghc5r3nsod] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.label[b-ghc5r3nsod] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    white-space: nowrap;
}
/* /Components/Events/Countdown/RegOpensScope.razor.rz.scp.css */
.scope[b-p4nrn77s78] { display: contents; }
/* /Components/Events/EligibilityRegisterCta.razor.rz.scp.css */
.b4u-eligcta[b-pcg8jo8v66] {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 24px; font-size: 16px; font-weight: 700; border-radius: 10px;
    text-decoration: none; cursor: pointer; transition: all .18s;
    border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.b4u-eligcta:hover[b-pcg8jo8v66] { background: color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-1px); }
.b4u-eligcta--warning[b-pcg8jo8v66] { --accent: var(--b4u-warning); }
.b4u-eligcta--blocked[b-pcg8jo8v66] { --accent: var(--b4u-primary); }
.b4u-eligcta-count[b-pcg8jo8v66] {
    background: var(--accent); color: #1a1205; border-radius: 999px;
    min-width: 22px; height: 22px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800;
}
.b4u-eligcta-sub[b-pcg8jo8v66] { font-size: 13px; font-weight: 600; opacity: .75; }
/* /Components/Events/EventContactSection.razor.rz.scp.css */
.b4u-ct-title[b-9n67u22ze2] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin: 0 0 6px; }
.b4u-ct-sub[b-9n67u22ze2] { font-size: 14px; color: var(--b4u-text-muted); margin: 0 0 20px; }

.b4u-ct-grid[b-9n67u22ze2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.b4u-ct-card[b-9n67u22ze2] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.b4u-ct-avatar[b-9n67u22ze2] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.b4u-ct-avatar-img[b-9n67u22ze2] { object-fit: cover; }

/* Fallback swap — see /app/image-fallback.js. */
.b4u-ct-avatar.is-hidden[b-9n67u22ze2] { display: none; }
[data-b4u-noimg] .b4u-ct-avatar.is-hidden[b-9n67u22ze2] { display: inline-flex; }
.b4u-ct-name[b-9n67u22ze2] { font-size: 16px; font-weight: 600; color: var(--b4u-text); margin-bottom: 4px; }
.b4u-ct-role[b-9n67u22ze2] {
    font-size: 11px;
    font-weight: 700;
    color: var(--b4u-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 14px;
}
.b4u-ct-details[b-9n67u22ze2] { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.b4u-ct-line[b-9n67u22ze2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--b4u-text-secondary);
    background: var(--b4u-bg-input, var(--b4u-bg-surface));
    border: 1px solid var(--b4u-border);
    border-radius: 10px;
    padding: 8px 12px;
    text-decoration: none;
    transition: border-color .15s;
    min-width: 0;
}
.b4u-ct-line:hover[b-9n67u22ze2] { border-color: var(--b4u-primary); }
.b4u-ct-line.is-whatsapp[b-9n67u22ze2] { color: #22C55E; }
.b4u-ct-line.is-whatsapp .b4u-ct-lico[b-9n67u22ze2] { color: #22C55E; }
.b4u-ct-line.is-whatsapp:hover[b-9n67u22ze2] { border-color: #22C55E; }
.b4u-ct-lico[b-9n67u22ze2] { color: var(--b4u-primary); display: inline-flex; flex: 0 0 auto; }
.b4u-ct-ltext[b-9n67u22ze2] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.b4u-ct-empty[b-9n67u22ze2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 20px;
    color: var(--b4u-text-muted);
    border: 1px dashed var(--b4u-border);
    border-radius: 14px;
}
/* /Components/Events/EventEligibilityCard.razor.rz.scp.css */
.b4u-elig[b-dts0xakipb] {
    border: 1.5px solid var(--b4u-border);
    border-radius: 16px; overflow: hidden; margin-bottom: 28px;
}
.b4u-elig--met[b-dts0xakipb]     { border-color: color-mix(in srgb, var(--b4u-success) 40%, transparent); }
.b4u-elig--missing[b-dts0xakipb] { border-color: color-mix(in srgb, var(--b4u-warning) 40%, transparent); }
.b4u-elig--failed[b-dts0xakipb]  { border-color: color-mix(in srgb, var(--b4u-primary) 40%, transparent); }

.b4u-elig-head[b-dts0xakipb] {
    width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left;
    padding: 16px 20px; border: none; cursor: pointer; font-family: inherit;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.b4u-elig--met[b-dts0xakipb]     { --accent: var(--b4u-success); }
.b4u-elig--missing[b-dts0xakipb] { --accent: var(--b4u-warning); }
.b4u-elig--failed[b-dts0xakipb]  { --accent: var(--b4u-primary); }

.b4u-elig-ico[b-dts0xakipb] {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}
.b4u-elig-headmain[b-dts0xakipb] { flex: 1; min-width: 0; }
.b4u-elig-titlerow[b-dts0xakipb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.b4u-elig-title[b-dts0xakipb] { font-size: 15.5px; font-weight: 800; color: var(--b4u-text); }
.b4u-elig-badge[b-dts0xakipb] {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .02em;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.b4u-elig-msg[b-dts0xakipb] { font-size: 13px; color: var(--b4u-text-secondary); line-height: 1.5; }
.b4u-elig-chev[b-dts0xakipb] { flex-shrink: 0; color: var(--b4u-text-muted); display: inline-flex; padding-top: 4px; transition: transform .2s; }
.b4u-elig-chev.is-open[b-dts0xakipb] { transform: rotate(180deg); }

.b4u-elig-grid[b-dts0xakipb] {
    padding: 16px 20px; display: grid; gap: 14px 20px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    border-top: 1px solid var(--b4u-border);
}
.b4u-elig-item[b-dts0xakipb] { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.b4u-elig-itemico[b-dts0xakipb] {
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
}
.b4u-elig-item--met     .b4u-elig-itemico[b-dts0xakipb] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 18%, transparent); }
.b4u-elig-item--missing .b4u-elig-itemico[b-dts0xakipb] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 18%, transparent); }
.b4u-elig-item--failed  .b4u-elig-itemico[b-dts0xakipb] { color: var(--b4u-primary); background: color-mix(in srgb, var(--b4u-primary) 18%, transparent); }
.b4u-elig-item--pending .b4u-elig-itemico[b-dts0xakipb] { color: var(--b4u-text-muted); background: color-mix(in srgb, var(--b4u-text-muted) 18%, transparent); }
.b4u-elig-itemtext[b-dts0xakipb] { min-width: 0; }
.b4u-elig-itemlabel[b-dts0xakipb] { display: block; font-size: 13px; font-weight: 700; color: var(--b4u-text); line-height: 1.25; }
.b4u-elig-itemdetail[b-dts0xakipb] { display: block; font-size: 12px; color: var(--b4u-text-muted); line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.b4u-elig-foot[b-dts0xakipb] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 20px; border-top: 1px solid var(--b4u-border);
}
.b4u-elig-foot-note[b-dts0xakipb] { font-size: 12.5px; color: var(--b4u-text-muted); }
.b4u-elig-foot-actions[b-dts0xakipb] { display: flex; gap: 8px; flex-wrap: wrap; }
/* /Components/Events/EventFilesSection.razor.rz.scp.css */
.b4u-fl-filters[b-cccn4047dx] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.b4u-fl-pill[b-cccn4047dx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--b4u-border);
    background: var(--b4u-bg-card);
    color: var(--b4u-text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.b4u-fl-pill:hover[b-cccn4047dx] { border-color: var(--b4u-border-hover); }
/* "All" + base active state; category pills override bg/border/colour via an inline style. */
.b4u-fl-pill.is-active[b-cccn4047dx] { background: var(--b4u-primary); border-color: var(--b4u-primary); color: #fff; }
.b4u-fl-pico[b-cccn4047dx] { display: inline-flex; }

.b4u-fl-list[b-cccn4047dx] { display: flex; flex-direction: column; gap: 8px; }

.b4u-fl-row[b-cccn4047dx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
    background: var(--b4u-bg-card);
    text-decoration: none;
    transition: transform .15s, border-color .15s, background .15s;
}
.b4u-fl-row:hover[b-cccn4047dx] {
    border-color: var(--b4u-border-hover);
    background: var(--b4u-bg-card-hover);
    transform: translateX(2px);
}
.b4u-fl-icon[b-cccn4047dx] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.b4u-fl-body[b-cccn4047dx] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.b4u-fl-head[b-cccn4047dx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b4u-fl-cat[b-cccn4047dx] { color: var(--b4u-text); font-weight: 700; font-size: 14px; }
.b4u-fl-ext[b-cccn4047dx] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 6px;
}
.b4u-fl-meta[b-cccn4047dx] { color: var(--b4u-text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b4u-fl-desc[b-cccn4047dx] { color: var(--b4u-text-muted); font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b4u-fl-dl[b-cccn4047dx] { flex: 0 0 auto; color: var(--b4u-text-muted); display: flex; transition: color .15s; }
.b4u-fl-row:hover .b4u-fl-dl[b-cccn4047dx] { color: var(--b4u-text); }

.b4u-fl-empty[b-cccn4047dx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 20px;
    color: var(--b4u-text-muted);
    border: 1px dashed var(--b4u-border);
    border-radius: 14px;
}

/* ---- Manager mode ---- */
.b4u-fl-mgr[b-cccn4047dx] { position: relative; }

/* Manager toolbar */
.b4u-flm-bar[b-cccn4047dx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(224, 52, 64, .055);
    border: 1px solid rgba(224, 52, 64, .19);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.b4u-flm-bar-ico[b-cccn4047dx] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(224, 52, 64, .12);
    color: var(--b4u-primary);
    flex-shrink: 0;
}
.b4u-flm-bar-text[b-cccn4047dx] { flex: 1; min-width: 150px; }
.b4u-flm-bar-title[b-cccn4047dx] { font-size: 13px; font-weight: 700; color: var(--b4u-text); }
.b4u-flm-bar-sub[b-cccn4047dx] { font-size: 12px; color: var(--b4u-text-muted); }
.b4u-flm-upload-btn[b-cccn4047dx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--b4u-primary);
    color: #fff;
    border-radius: 9px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter .15s;
}
.b4u-flm-upload-btn:hover[b-cccn4047dx] { filter: brightness(1.06); }

.b4u-flm-keep-original[b-cccn4047dx] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: var(--b4u-text-secondary);
    cursor: pointer; white-space: nowrap;
}

/* Whole-tab drop overlay */
.b4u-flm-overlay[b-cccn4047dx] {
    position: absolute;
    inset: -4px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 16px;
    border: 2.5px dashed var(--b4u-primary);
    background: rgba(224, 52, 64, .10);
    color: var(--b4u-primary);
    pointer-events: none;
}
.b4u-flm-overlay-title[b-cccn4047dx] { font-size: 15px; font-weight: 800; }
.b4u-flm-overlay-sub[b-cccn4047dx] { font-size: 12.5px; color: var(--b4u-text); opacity: .7; }

/* Manager rows */
.b4u-flm-row[b-cccn4047dx] { align-items: center; }
/* Dim only the card content when a file is hidden — NOT the row, or the opacity would composite the
   dropdown at .6 too (a child can't recover opacity its parent already applied). */
.b4u-flm-row.is-hidden .b4u-flm-open[b-cccn4047dx] { opacity: .6; }
/* No hover-slide on manager rows: the translate shifted the anchored dropdown (flicker) and, because
   a transformed element is the containing block for position:fixed children, it shrank the menu's
   backdrop to the row box — breaking outside-click-to-close. Keep the colour change, drop the slide. */
.b4u-flm-row:hover[b-cccn4047dx] { transform: none; }
.b4u-flm-open[b-cccn4047dx] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.b4u-flm-actions[b-cccn4047dx] { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 8px; }
.b4u-flm-more[b-cccn4047dx] { position: relative; display: inline-flex; }
.b4u-flm-ico[b-cccn4047dx] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--b4u-border);
    background: transparent;
    color: var(--b4u-text-muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.b4u-flm-ico:hover[b-cccn4047dx] { background: var(--b4u-bg-card-hover); border-color: var(--b4u-border-hover); color: var(--b4u-text); }

/* Inline edit form (name + description) */
.b4u-flm-edit[b-cccn4047dx] { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.b4u-flm-editinput[b-cccn4047dx] {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text);
    background: var(--b4u-bg-card);
    border: 1.5px solid var(--b4u-primary);
    border-radius: 7px;
    padding: 6px 9px;
    outline: none;
}
.b4u-flm-editinput.is-desc[b-cccn4047dx] { font-weight: 500; border-color: var(--b4u-border-hover); }
.b4u-flm-editinput.is-desc:focus[b-cccn4047dx] { border-color: var(--b4u-primary); }
.b4u-flm-edit-actions[b-cccn4047dx] { display: inline-flex; gap: 6px; align-self: flex-end; }
.b4u-flm-ico.is-save[b-cccn4047dx] { border-color: var(--b4u-primary); color: var(--b4u-primary); }
.b4u-flm-ico.is-save:hover[b-cccn4047dx] { background: rgba(224, 52, 64, .10); color: var(--b4u-primary); }

/* Add-link toolbar button (secondary style next to the primary upload button) */
button.b4u-flm-upload-btn[b-cccn4047dx] { font-family: inherit; }
.b4u-flm-upload-btn.is-link[b-cccn4047dx] { background: transparent; color: var(--b4u-primary); border: 1.5px solid var(--b4u-primary); }
.b4u-flm-upload-btn.is-link:hover[b-cccn4047dx] { background: rgba(224, 52, 64, .08); filter: none; }

/* Add-link inline form */
.b4u-flm-addlink[b-cccn4047dx] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1.5px dashed var(--b4u-primary);
    border-radius: 12px;
    margin-bottom: 14px;
}
.b4u-fl-icon.is-linkadd[b-cccn4047dx] { background: rgba(224, 52, 64, .10); color: var(--b4u-primary); }
.b4u-flm-addlink .b4u-flm-edit[b-cccn4047dx] { flex: 1; margin-top: 0; }
.b4u-flm-addlink-foot[b-cccn4047dx] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b4u-flm-editinput.is-cat[b-cccn4047dx] { width: auto; font-weight: 600; border-color: var(--b4u-border-hover); }
.b4u-flm-editinput.is-cat:focus[b-cccn4047dx] { border-color: var(--b4u-primary); }

/* Status badges */
.b4u-flm-badge[b-cccn4047dx] {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.b4u-flm-badge.is-new[b-cccn4047dx] { color: var(--b4u-primary); background: rgba(224, 52, 64, .15); }
.b4u-flm-badge.is-upd[b-cccn4047dx] { color: #F59E0B; background: rgba(245, 158, 11, .16); }
.b4u-flm-badge.is-hidden[b-cccn4047dx] { color: var(--b4u-text-muted); background: var(--b4u-bg-card-hover); }

/* Open-menu row is raised above its siblings so the dropdown is never overlapped by their hover
   state; a transparent full-viewport backdrop sits below the menu and closes it on an outside click. */
.b4u-flm-row.is-menu-open[b-cccn4047dx] { position: relative; z-index: 40; }
.b4u-flm-backdrop[b-cccn4047dx] { position: fixed; inset: 0; z-index: 10; }

/* Overflow menu */
.b4u-flm-menu[b-cccn4047dx] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 200px;
    padding: 6px;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 11px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}
.b4u-flm-menu-label[b-cccn4047dx] {
    padding: 6px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
}
.b4u-flm-menu-item[b-cccn4047dx] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.b4u-flm-menu-item:hover[b-cccn4047dx] { background: var(--b4u-bg-card-hover); }
.b4u-flm-menu-item.is-danger[b-cccn4047dx] { color: #EF4444; }
.b4u-flm-menu-ico[b-cccn4047dx] { display: inline-flex; color: var(--b4u-text-muted); }
.b4u-flm-menu-txt[b-cccn4047dx] { flex: 1; }
.b4u-flm-menu-chk[b-cccn4047dx] { display: inline-flex; color: var(--b4u-primary); }
.b4u-flm-menu-sep[b-cccn4047dx] { height: 1px; margin: 5px 4px; background: var(--b4u-border); }

/* ---- Phones ---------------------------------------------------------------
   The manager row reserves ~112px on the right for three 32px icon buttons, so
   on a 390px phone the content was squeezed to ~200px: names wrapped over two
   lines and the meta line ellipsized down to a few characters. Below 640px the
   Edit + Replace buttons hide and resurface as entries in the ⋮ menu.

   This base rule MUST stay ABOVE the media block: equal specificity means source
   order decides, so a later display:none would defeat the override below. */
.b4u-flm-menu-phone[b-cccn4047dx] { display: none; }

@media (max-width: 640px) {
    /* Role swap. */
    .b4u-flm-ico.is-wide[b-cccn4047dx] { display: none; }
    .b4u-flm-menu-phone[b-cccn4047dx] { display: block; }

    /* Reclaim padding and icon width for the content. */
    .b4u-fl-row[b-cccn4047dx] { padding: 12px; gap: 11px; }
    .b4u-flm-open[b-cccn4047dx] { gap: 11px; }
    .b4u-fl-icon[b-cccn4047dx] { width: 38px; height: 38px; border-radius: 10px; }
    .b4u-flm-actions[b-cccn4047dx] { margin-left: 6px; }
    /* Bigger tap target below 640px. This bare selector isn't only ⋮ — it also matches the inline-edit
       Save/Cancel buttons and the add-link form's Save/Cancel buttons (none of them carry is-wide), so
       they grow too. That's fine: bigger tap targets there as well, and the add-link footer still fits
       at 390px. Don't "simplify" this into a rule scoped to ⋮ only. */
    .b4u-flm-ico[b-cccn4047dx] { width: 36px; height: 36px; }

    /* A single long unbroken file name must not overflow the card. The meta line
       keeps its ellipsis — it is a filename plus a date, and wrapping it over
       three lines reads worse than truncating; it simply has the width now. The
       description is organiser prose, so give it two lines. */
    .b4u-fl-cat[b-cccn4047dx] { overflow-wrap: anywhere; }
    .b4u-fl-desc[b-cccn4047dx] {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Two more items plus long de/fi labels must not reach past the viewport edge. The 80px offset is
       the ⋮ button's actual distance from the viewport edge: .b4u-container padding 24px + .b4u-ed-panel
       border 1px + .b4u-ed-tabcontent padding 28px + row border 1px + row padding 12px, doubled for
       left/right symmetry with right:0 below — using a smaller value clips the menu's left edge
       off-screen in the longest locale strings (e.g. French "Remplacer par une nouvelle version").
       The taller menu (2 new items + separator) can now exceed the viewport height on short phones, and
       it only ever opens downward (a real flip-up needs JS, deliberately out of scope) — cap it and let
       it scroll internally instead of extending under the fixed bottom tab bar (EventTabNav.razor.css). */
    .b4u-flm-menu[b-cccn4047dx] {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 80px);
        max-height: 60vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .b4u-flm-menu-item[b-cccn4047dx] { padding: 11px 10px; }

    /* Toolbar: the text fills line 1 next to the 30px shield (30 + 12 gap = 42),
       so both buttons drop to line 2 and split it evenly instead of orphaning
       "Add link" on a line of its own.

       A single fixed padding value here is a knife-edge: the longest locale's
       pair (FR "Télécharger des fichiers" + "Ajouter un lien") needs a roughly
       constant ~210px of min-content, while the line's available width shrinks
       1:1 with the viewport — so any one fixed padding only buys a margin that
       itself shrinks to nothing (and then negative) at some narrower width.
       Scaling padding AND font-size continuously with viewport width (clamped
       at each end) keeps both buttons on one shared line across the full
       320–640px range instead of moving the cliff to a different pixel. The
       font-size clamp's upper bound (13px) matches the base rule, so it is
       continuous across the 640px breakpoint. The padding clamp's upper bound
       (10px) does NOT match the base rule's horizontal padding (15px), so
       horizontal padding steps 10px → 15px right at the boundary; that step is
       accepted rather than fixed, because a phone only crosses 640px on
       rotation, where a 5px change is imperceptible. The floor was chosen to
       stay legible down to 320px. */
    .b4u-flm-bar-text[b-cccn4047dx] { flex-basis: calc(100% - 42px); min-width: 0; }
    .b4u-flm-upload-btn[b-cccn4047dx] {
        flex: 1 1 0;
        justify-content: center;
        padding: 9px clamp(5px, 2vw, 10px);
        font-size: clamp(10.5px, 2.5vw + 2.5px, 13px);
    }

    /* Neither inline form needs the 42px leading category icon. In VIEW mode that
       icon is nested inside the .b4u-flm-open anchor, so the child combinator
       matches EDIT mode only — do not relax it to a descendant selector. */
    .b4u-flm-row > .b4u-fl-icon[b-cccn4047dx] { display: none; }
    .b4u-flm-addlink > .b4u-fl-icon.is-linkadd[b-cccn4047dx] { display: none; }
    .b4u-flm-addlink[b-cccn4047dx] { padding: 12px; }
}
/* /Components/Events/EventHeroCard.razor.rz.scp.css */
.b4u-hcard[b-wdxiv4p7jb] { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.b4u-hcard:hover[b-wdxiv4p7jb] { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.2); border-color: var(--b4u-border-hover); }
.b4u-hcard.is-live[b-wdxiv4p7jb] { border-color: rgba(34,197,94,.5); box-shadow: 0 0 18px rgba(34,197,94,.2); }
.b4u-hcard.is-live:hover[b-wdxiv4p7jb] { box-shadow: 0 12px 32px rgba(34,197,94,.25); }
/* Featured events: a red border + ring so they stand out in the grid */
.b4u-hcard.is-featured[b-wdxiv4p7jb] { border-color: var(--b4u-primary); box-shadow: 0 8px 28px color-mix(in srgb, var(--b4u-primary) 25%, transparent), 0 0 0 2px color-mix(in srgb, var(--b4u-primary) 80%, transparent); }
.b4u-hcard.is-featured:hover[b-wdxiv4p7jb] { box-shadow: 0 16px 40px color-mix(in srgb, var(--b4u-primary) 33%, transparent), 0 0 0 2px var(--b4u-primary); }

.b4u-hcard-media[b-wdxiv4p7jb] { position: relative; height: 140px; overflow: hidden; background: linear-gradient(135deg, var(--b4u-bg-card-hover), var(--b4u-bg-surface)); flex-shrink: 0; }
.b4u-hcard-media img[b-wdxiv4p7jb] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.b4u-hcard:hover .b4u-hcard-media img[b-wdxiv4p7jb] { transform: scale(1.06); }
.b4u-hcard-emoji[b-wdxiv4p7jb] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 80px; opacity: .06; }
.b4u-hcard-scrim[b-wdxiv4p7jb] { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.12) 100%); }
.b4u-hcard-badges[b-wdxiv4p7jb] { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2; }
.b4u-hcard-featured[b-wdxiv4p7jb] { background: var(--b4u-primary); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.b4u-hcard-flag[b-wdxiv4p7jb] { position: absolute; top: 12px; right: 12px; z-index: 2; }

.b4u-hcard-body[b-wdxiv4p7jb] { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; }
.b4u-hcard-date[b-wdxiv4p7jb] { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--b4u-primary); font-size: 13px; font-weight: 600; }
.b4u-hcard-name[b-wdxiv4p7jb] { font-size: 16px; font-weight: 600; color: var(--b4u-text); margin: 0 0 8px; line-height: 1.3; }
.b4u-hcard-venue[b-wdxiv4p7jb] { display: flex; align-items: center; gap: 6px; color: var(--b4u-text-muted); font-size: 13px; margin-bottom: 4px; }
.b4u-hcard-mode[b-wdxiv4p7jb] { display: flex; align-items: center; gap: 6px; color: var(--b4u-text-muted); font-size: 13px; margin-bottom: 12px; }
.b4u-hcard-venue + .b4u-hcard-tags[b-wdxiv4p7jb], .b4u-hcard-venue + .b4u-hcard-foot[b-wdxiv4p7jb] { margin-top: 8px; }
.b4u-hcard-tags[b-wdxiv4p7jb] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.b4u-hcard-tag[b-wdxiv4p7jb] { background: var(--b4u-primary-light); color: var(--b4u-primary); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.b4u-hcard-tag.is-more[b-wdxiv4p7jb] { background: transparent; color: var(--b4u-text-muted); border: 1px solid var(--b4u-border); }
.b4u-hcard-foot[b-wdxiv4p7jb] { margin-top: auto; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--b4u-border); padding-top: 12px; }
.b4u-hcard-price[b-wdxiv4p7jb] { font-size: 18px; font-weight: 700; color: var(--b4u-text); white-space: nowrap; }
.b4u-hcard-meter[b-wdxiv4p7jb] { flex: 1; min-width: 0; }
/* /Components/Events/EventListRow.razor.rz.scp.css */
/* EventListRow — compact list-view row (CompactEventCard design port) */

.b4u-lrow[b-a5dufvcc9s] {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--b4u-bg-card, #fff);
    border-radius: 12px;
    border: 1px solid var(--b4u-border, #e5e7eb);
    overflow: hidden;   /* clips the edge-bleeding thumbnail to the rounded corners */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

    .b4u-lrow:hover[b-a5dufvcc9s] {
        border-color: var(--b4u-border-hover, #9ca3af);
        transform: translateX(4px);
        text-decoration: none;
        color: inherit;
    }

    .b4u-lrow.is-live[b-a5dufvcc9s] {
        border-color: rgba(var(--b4u-success-rgb, 34,197,94), 0.5);
        box-shadow: 0 0 16px rgba(var(--b4u-success-rgb, 34,197,94), 0.18);
    }

/* ── Inner layout ── */
.b4u-lrow-main[b-a5dufvcc9s] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    min-height: 104px;   /* uniform row height whether or not the event carries tags */
}

/* Body: details + price/meter. Row on desktop, stacks beside the thumb on narrow. */
.b4u-lrow-body[b-a5dufvcc9s] {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* ── Event thumbnail: event image layered over the shared default bowling picture.
   Bleeds flush to the row's left/top/bottom edges at full height (like the
   LatestRegistrations thumbnail); the row's overflow:hidden + radius round the
   outer corners. A missing/404 image simply doesn't paint, so the default shows. ── */
.b4u-lrow-thumb[b-a5dufvcc9s] {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    align-self: stretch;
    width: 140px;
    min-height: 92px;
    margin: -16px 0 -16px -20px;   /* cancel .b4u-lrow-main padding to bleed to the edges */
    background-color: var(--b4u-bg-elevated);
    box-shadow: inset 0 0 0 1px var(--b4u-border);
}
.b4u-lrow-thumbimg[b-a5dufvcc9s] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 560px) {
    .b4u-lrow-thumb[b-a5dufvcc9s] { width: 100px; min-height: 80px; }
}

/* ── Left column ── */
.b4u-lrow-left[b-a5dufvcc9s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Title row: flag + name + RegisteredBadge + Live chip — one line, name ellipsises */
.b4u-lrow-title-row[b-a5dufvcc9s] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.b4u-lrow-name[b-a5dufvcc9s] {
    font-size: 15px;
    font-weight: 600;
    color: var(--b4u-text, #111827);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b4u-lrow-title-row[b-a5dufvcc9s]  .b4u-flag { flex-shrink: 0; }

/* Live chip */
.b4u-lrow-live[b-a5dufvcc9s] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(var(--b4u-success-rgb, 34,197,94), 0.1);
    color: var(--b4u-success, #22c55e);
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.b4u-lrow-livedot[b-a5dufvcc9s] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b4u-success, #22c55e);
    box-shadow: 0 0 6px var(--b4u-success, #22c55e);
    animation: b4u-livePulse-b-a5dufvcc9s 1.5s ease-in-out infinite;
}

@keyframes b4u-livePulse-b-a5dufvcc9s {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Tags */
.b4u-lrow-tags[b-a5dufvcc9s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.b4u-lrow-tag[b-a5dufvcc9s] {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--b4u-tag-bg, rgba(107,114,128,0.1));
    color: var(--b4u-tag-text, #6b7280);
}

    .b4u-lrow-tag.is-more[b-a5dufvcc9s] {
        color: var(--b4u-text-muted, #9ca3af);
    }

/* Meta row: city · date · mode */
.b4u-lrow-meta[b-a5dufvcc9s] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--b4u-text-muted, #6b7280);
    font-size: 13px;
}

.b4u-lrow-meta-item[b-a5dufvcc9s] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Right column ── */
.b4u-lrow-right[b-a5dufvcc9s] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.b4u-lrow-price[b-a5dufvcc9s] {
    font-size: 16px;
    font-weight: 700;
    color: var(--b4u-text, #111827);
    white-space: nowrap;
}

.b4u-lrow-meter[b-a5dufvcc9s] {
    width: 132px;
}

/* Tablet & down: once the middle column gets too narrow for the meta to stay on
   one line, stack the details + price/meter into a column beside the full-height
   thumbnail. space-between pins the price to the bottom so every card is uniform. */
@media (max-width: 700px) {
    .b4u-lrow-main[b-a5dufvcc9s] { min-height: 148px; align-items: stretch; }
    .b4u-lrow-body[b-a5dufvcc9s] {
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 8px;
    }
    .b4u-lrow-right[b-a5dufvcc9s] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
    }
}
/* /Components/Events/EventPartnersStrip.razor.rz.scp.css */
/* Event Partners carousel. Hover lift and image zoom are pure CSS so the
   circuit only round-trips on paging (arrows / dots / auto-advance). */

.b4u-ed-partners[b-cxcnh7zucw] {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--b4u-border);
}

/* Header: title + count on the left, prev/next on the right */
.b4u-ed-partners-head[b-cxcnh7zucw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.b4u-ed-partners-heading[b-cxcnh7zucw] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.b4u-ed-partners-title[b-cxcnh7zucw] {
    font-size: 15px;
    font-weight: 700;
    color: var(--b4u-text);
    margin: 0;
}

.b4u-ed-partners-count[b-cxcnh7zucw] {
    font-size: 12.5px;
    color: var(--b4u-text-muted);
}

.b4u-ed-partners-nav[b-cxcnh7zucw] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.b4u-ed-partners-arrow[b-cxcnh7zucw] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.b4u-ed-partners-arrow:hover[b-cxcnh7zucw] {
    background: var(--b4u-primary);
    border-color: var(--b4u-primary);
    color: #fff;
}

/* Viewport clips the sliding track */
.b4u-ed-partners-viewport[b-cxcnh7zucw] {
    overflow: hidden;
    border-radius: 14px;
}

.b4u-ed-partners-track[b-cxcnh7zucw] {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.b4u-ed-partners-page[b-cxcnh7zucw] {
    flex: 0 0 100%;
    min-width: 100%;
    display: grid;
    gap: 12px;
}

/* A card. The blurred copy of the logo fills any leftover space so every
   aspect ratio reads edge to edge without cropping the real mark. */
.b4u-ed-partner[b-cxcnh7zucw] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.b4u-ed-partner.is-big[b-cxcnh7zucw] {
    height: 140px;
}

.b4u-ed-partner:hover[b-cxcnh7zucw] {
    border-color: var(--b4u-primary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.b4u-ed-partner-blur[b-cxcnh7zucw] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: blur(22px) brightness(0.85);
    transform: scale(1.25);
}

.b4u-ed-partner-logo[b-cxcnh7zucw] {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.b4u-ed-partner:hover .b4u-ed-partner-logo[b-cxcnh7zucw] {
    transform: scale(1.04);
}

/* Pagination dots */
.b4u-ed-partners-dots[b-cxcnh7zucw] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

.b4u-ed-partners-dot[b-cxcnh7zucw] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    padding: 0;
    border: none;
    background: var(--b4u-border);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.b4u-ed-partners-dot.is-active[b-cxcnh7zucw] {
    width: 22px;
    background: var(--b4u-primary);
}

.b4u-ed-partner-name[b-cxcnh7zucw] {
    display: block;
    position: relative;
    z-index: 1;
    padding: 0 14px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--b4u-text);
}
/* Fallback swap — see /app/image-fallback.js. */
.b4u-ed-partner-name.is-hidden[b-cxcnh7zucw] { display: none; }
[data-b4u-noimg] .b4u-ed-partner-name.is-hidden[b-cxcnh7zucw] { display: block; }

@media (prefers-reduced-motion: reduce) {
    .b4u-ed-partners-track[b-cxcnh7zucw],
    .b4u-ed-partner[b-cxcnh7zucw],
    .b4u-ed-partner-logo[b-cxcnh7zucw],
    .b4u-ed-partners-dot[b-cxcnh7zucw] {
        transition: none;
    }
}
/* /Components/Events/EventPlayersSection.razor.rz.scp.css */
.b4u-pl-head[b-ytidzt6dzg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.b4u-pl-count[b-ytidzt6dzg] {
    font-size: 14px;
    color: var(--b4u-text-muted);
}
.b4u-pl-controls[b-ytidzt6dzg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.b4u-pl-toggle[b-ytidzt6dzg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.b4u-pl-toggle-lbl[b-ytidzt6dzg] {
    font-size: 12.5px;
    color: var(--b4u-text-muted);
}
.b4u-pl-seg[b-ytidzt6dzg] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 9px;
    padding: 3px;
}
.b4u-pl-toggle-opt[b-ytidzt6dzg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--b4u-text-secondary);
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.b4u-pl-toggle-opt.is-active[b-ytidzt6dzg] {
    background: var(--b4u-primary);
    color: #fff;
}
.b4u-pl-searchwrap[b-ytidzt6dzg] {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.b4u-pl-searchicon[b-ytidzt6dzg] {
    position: absolute;
    left: 12px;
    color: var(--b4u-text-muted);
    display: inline-flex;
}
.b4u-pl-search[b-ytidzt6dzg] {
    border: 1px solid var(--b4u-border);
    border-radius: 10px;
    background: var(--b4u-bg-input);
    color: var(--b4u-text);
    font-size: 14px;
    padding: 8px 14px 8px 36px;
    min-width: 220px;
}
.b4u-pl-search:focus[b-ytidzt6dzg] {
    outline: none;
    border-color: var(--b4u-primary);
}
.b4u-pl-player[b-ytidzt6dzg] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.b4u-pl-avatar[b-ytidzt6dzg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.b4u-pl-avatar.is-anon[b-ytidzt6dzg] {
    background: var(--b4u-bg-surface);
    color: var(--b4u-text-muted);
}
.b4u-pl-avatarimg[b-ytidzt6dzg] { object-fit: cover; background: var(--b4u-bg-surface); }
/* Fallback swap — see /app/image-fallback.js. */
.b4u-pl-avatar.is-hidden[b-ytidzt6dzg] { display: none; }
[data-b4u-noimg] .b4u-pl-avatar.is-hidden[b-ytidzt6dzg] { display: inline-flex; }
.b4u-pl-name[b-ytidzt6dzg] {
    font-weight: 600;
    color: var(--b4u-text);
}
.b4u-pl-pills[b-ytidzt6dzg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}
.b4u-pl-pill[b-ytidzt6dzg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.b4u-pl-pill.is-ok[b-ytidzt6dzg] {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
}
.b4u-pl-pill.is-wait[b-ytidzt6dzg] {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}
.b4u-pl-empty[b-ytidzt6dzg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--b4u-text-muted);
    border: 1px dashed var(--b4u-border);
    border-radius: 14px;
}
/* Desktop grid vs mobile cards: show one at a time (default = desktop).
   NOTE: this base rule MUST precede the 640px media block below — equal specificity means
   source order decides, so a later display:none would defeat the media override. */
.b4u-pl-mobile[b-ytidzt6dzg] { display: none; }
@media (max-width: 640px) {
    .b4u-pl-head[b-ytidzt6dzg] { flex-direction: column; align-items: flex-start; }
    .b4u-pl-search[b-ytidzt6dzg] { min-width: 0; width: 100%; }
    .b4u-pl-desktop[b-ytidzt6dzg] { display: none; }
    .b4u-pl-mobile[b-ytidzt6dzg] { display: block; }
}
.b4u-pl-teams[b-ytidzt6dzg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--b4u-text-secondary);
}
.b4u-pl-pill.is-clickable[b-ytidzt6dzg] { cursor: pointer; }
.b4u-pl-pill.is-clickable:hover[b-ytidzt6dzg] { box-shadow: inset 0 0 0 1.5px currentColor; }

.b4u-plc[b-ytidzt6dzg] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.b4u-plc-id[b-ytidzt6dzg] { display: flex; align-items: center; gap: 10px; }
.b4u-plc-av[b-ytidzt6dzg] { position: relative; display: inline-flex; flex-shrink: 0; }
.b4u-plc-dot[b-ytidzt6dzg] {
    position: absolute; bottom: -1px; right: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--b4u-bg-card);
}
.b4u-plc-dot.is-m[b-ytidzt6dzg] { background: #0EA5E9; }
.b4u-plc-dot.is-f[b-ytidzt6dzg] { background: #A855F7; }
.b4u-plc-idtext[b-ytidzt6dzg] { flex: 1; min-width: 0; }
.b4u-plc-name[b-ytidzt6dzg] {
    display: block; font-size: 14.5px; font-weight: 700; color: var(--b4u-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b4u-plc-sub[b-ytidzt6dzg] {
    display: block; font-size: 11.5px; color: var(--b4u-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b4u-plc-chips[b-ytidzt6dzg] { margin-top: 9px; }
/* /Components/Events/EventRewardsSection.razor.rz.scp.css */
.b4u-rw[b-r8seot5uhx] { display: flex; flex-direction: column; gap: 16px; }
.b4u-rw-head[b-r8seot5uhx] { margin-bottom: 0; }
.b4u-rw-title[b-r8seot5uhx] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin: 0 0 4px; }
.b4u-rw-sub[b-r8seot5uhx] { font-size: 14px; color: var(--b4u-text-muted); margin: 0; }

.b4u-rw-card[b-r8seot5uhx] {
    border: 1px solid var(--b4u-border);
    border-radius: 16px;
    background: var(--b4u-bg-card);
    padding: 22px 20px 18px;
}
.b4u-rw-cardhead[b-r8seot5uhx] { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.b4u-rw-cardico[b-r8seot5uhx] {
    width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
    background: var(--b4u-primary-light); color: var(--b4u-primary);
    display: flex; align-items: center; justify-content: center;
}
.b4u-rw-cardtitle[b-r8seot5uhx] { font-size: 15px; font-weight: 700; color: var(--b4u-text); }
.b4u-rw-cardsub[b-r8seot5uhx] { font-size: 12.5px; color: var(--b4u-text-muted); }

/* Tabs */
.b4u-rw-tabs[b-r8seot5uhx] { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.b4u-rw-tab[b-r8seot5uhx] {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--b4u-border);
    background: var(--b4u-bg-card);
    color: var(--b4u-text-secondary);
    font-size: 13px; font-weight: 600; font-family: inherit;
    white-space: nowrap; cursor: pointer; transition: all .15s;
}
.b4u-rw-tab:hover[b-r8seot5uhx] { border-color: var(--b4u-border-hover); }
.b4u-rw-tab.is-active[b-r8seot5uhx] {
    border: 2px solid var(--b4u-primary);
    background: color-mix(in srgb, var(--b4u-primary) 8%, transparent);
    color: var(--b4u-primary);
}

/* Podium */
.b4u-rw-podium[b-r8seot5uhx] { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: wrap; }
.b4u-rw-pod[b-r8seot5uhx] { flex: 1 1 150px; max-width: 220px; display: flex; flex-direction: column; align-items: center; }
.b4u-rw-pod-top[b-r8seot5uhx] { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.b4u-rw-medal[b-r8seot5uhx] {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 15px;
}
.b4u-rw-medal-1[b-r8seot5uhx] { width: 40px; height: 40px; font-size: 17px; background: var(--b4u-primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--b4u-primary) 45%, transparent); }
.b4u-rw-medal-2[b-r8seot5uhx] { background: var(--b4u-text-secondary); box-shadow: 0 4px 12px rgba(100,116,139,.4); }
.b4u-rw-medal-3[b-r8seot5uhx] { background: #F97316; box-shadow: 0 4px 12px rgba(249,115,22,.4); }
.b4u-rw-pod-amt[b-r8seot5uhx] { font-size: 20px; font-weight: 800; color: var(--b4u-text); letter-spacing: -.02em; }
.b4u-rw-pod .b4u-rw-pod-amt[b-r8seot5uhx] { font-size: 20px; }
.b4u-rw-pod-lbl[b-r8seot5uhx] { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.b4u-rw-lbl-1[b-r8seot5uhx] { color: var(--b4u-primary); }
.b4u-rw-lbl-2[b-r8seot5uhx] { color: var(--b4u-text-secondary); }
.b4u-rw-lbl-3[b-r8seot5uhx] { color: #F97316; }
.b4u-rw-pod-block[b-r8seot5uhx] {
    width: 100%; border-radius: 12px 12px 0 0;
    border: 1.5px solid var(--b4u-border); border-bottom: none;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 12px;
    background: linear-gradient(180deg, var(--b4u-bg-card-hover), var(--b4u-bg-surface));
}
.b4u-rw-pod-block span[b-r8seot5uhx] { font-size: 30px; font-weight: 800; opacity: .55; }
.b4u-rw-block-1[b-r8seot5uhx] { height: 132px; border-color: var(--b4u-primary); background: linear-gradient(180deg, color-mix(in srgb, var(--b4u-primary) 9%, transparent), var(--b4u-bg-surface)); }
.b4u-rw-block-1 span[b-r8seot5uhx] { color: var(--b4u-primary); }
.b4u-rw-block-2[b-r8seot5uhx] { height: 100px; }
.b4u-rw-block-2 span[b-r8seot5uhx] { color: var(--b4u-text-secondary); }
.b4u-rw-block-3[b-r8seot5uhx] { height: 80px; background: linear-gradient(180deg, rgba(249,115,22,.10), var(--b4u-bg-surface)); }
.b4u-rw-block-3 span[b-r8seot5uhx] { color: #F97316; }
/* Make rank-1 the tallest regardless of DOM order */
.b4u-rw-medal-1[b-r8seot5uhx], .b4u-rw-pod-amt[b-r8seot5uhx] { font-variant-numeric: tabular-nums; }

/* Pool tracker */
.b4u-rw-poolhead[b-r8seot5uhx] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.b4u-rw-poolhead .b4u-rw-cardhead[b-r8seot5uhx] { margin-bottom: 0; }
.b4u-rw-poolcount[b-r8seot5uhx] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border);
    padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--b4u-text-secondary);
}
.b4u-rw-poolcount b[b-r8seot5uhx] { color: var(--b4u-text); font-variant-numeric: tabular-nums; }
.b4u-rw-tiers[b-r8seot5uhx] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 18px; }
.b4u-rw-tier[b-r8seot5uhx] {
    border-radius: 14px; padding: 16px 16px 14px;
    border: 1.5px solid var(--b4u-border); background: var(--b4u-bg-surface);
}
.b4u-rw-tier.is-active[b-r8seot5uhx] {
    border: 2px solid var(--b4u-primary);
    background: color-mix(in srgb, var(--b4u-primary) 6%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--b4u-primary) 8%, transparent);
}
.b4u-rw-tier.is-locked[b-r8seot5uhx] { opacity: .9; }
.b4u-rw-tier-badge[b-r8seot5uhx] {
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--b4u-text-muted);
}
.b4u-rw-tier.is-active .b4u-rw-tier-badge[b-r8seot5uhx] { color: var(--b4u-primary); }
.b4u-rw-tier.is-passed .b4u-rw-tier-badge[b-r8seot5uhx] { color: #22C55E; }
.b4u-rw-tier-total[b-r8seot5uhx] { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--b4u-text); font-variant-numeric: tabular-nums; }
.b4u-rw-tier.is-locked .b4u-rw-tier-total[b-r8seot5uhx] { color: var(--b4u-text-muted); }
.b4u-rw-tier-name[b-r8seot5uhx] { font-size: 13px; font-weight: 600; color: var(--b4u-text-secondary); margin-top: 2px; }
.b4u-rw-tier.is-active .b4u-rw-tier-name[b-r8seot5uhx] { color: var(--b4u-primary); }
.b4u-rw-tier-cap[b-r8seot5uhx] { font-size: 12px; color: var(--b4u-text-muted); margin-top: 2px; }

.b4u-rw-progress[b-r8seot5uhx] { margin-top: 16px; }
.b4u-rw-progress-head[b-r8seot5uhx] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.b4u-rw-progress-lbl[b-r8seot5uhx] { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--b4u-text-secondary); }
.b4u-rw-progress-lbl b[b-r8seot5uhx] { color: var(--b4u-text); font-variant-numeric: tabular-nums; }
.b4u-rw-progress-pct[b-r8seot5uhx] { font-size: 12px; font-weight: 700; color: var(--b4u-primary); font-variant-numeric: tabular-nums; }
.b4u-rw-bar[b-r8seot5uhx] { position: relative; height: 10px; border-radius: 999px; background: var(--b4u-bg-surface); overflow: hidden; }
.b4u-rw-bar-fill[b-r8seot5uhx] {
    position: absolute; inset: 0 auto 0 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--b4u-primary), color-mix(in srgb, var(--b4u-primary) 80%, transparent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--b4u-primary) 40%, transparent);
    transition: width .6s ease;
}
.b4u-rw-progress-ends[b-r8seot5uhx] { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--b4u-text-muted); font-variant-numeric: tabular-nums; }

/* Table */
.b4u-rw-tablecard[b-r8seot5uhx] { padding: 18px 20px; }
.b4u-rw-tablenote[b-r8seot5uhx] { font-size: 13px; color: var(--b4u-text-secondary); margin: 0 0 12px; }
.b4u-rw-tablewrap[b-r8seot5uhx] { overflow-x: auto; }
.b4u-rw-table[b-r8seot5uhx] { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.b4u-rw-table th[b-r8seot5uhx] {
    text-align: right; padding: 10px 14px; font-size: 11px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; color: var(--b4u-text-muted);
    border-bottom: 1px solid var(--b4u-border); white-space: nowrap;
}
.b4u-rw-table th.b4u-rw-poscol[b-r8seot5uhx] { text-align: left; }
.b4u-rw-table td[b-r8seot5uhx] { padding: 9px 14px; text-align: right; color: var(--b4u-text-secondary); border-bottom: 1px solid var(--b4u-border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b4u-rw-table td.b4u-rw-pos[b-r8seot5uhx] { text-align: left; color: var(--b4u-text); }
.b4u-rw-table th.is-active[b-r8seot5uhx], .b4u-rw-table td.is-active[b-r8seot5uhx] {
    background: color-mix(in srgb, var(--b4u-primary) 6%, transparent);
    color: var(--b4u-primary); font-weight: 600;
}
.b4u-rw-table th.is-active[b-r8seot5uhx] { color: var(--b4u-primary); }
.b4u-rw-table tr.b4u-rw-total td[b-r8seot5uhx] { font-weight: 800; color: var(--b4u-text); border-top: 2px solid var(--b4u-border); border-bottom: none; }
.b4u-rw-table tr.b4u-rw-total td.is-active[b-r8seot5uhx] { color: var(--b4u-primary); }

.b4u-rw-empty[b-r8seot5uhx] {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 44px 20px; color: var(--b4u-text-muted);
    border: 1px dashed var(--b4u-border); border-radius: 14px;
}

@media (max-width: 640px) {
    .b4u-rw-card[b-r8seot5uhx] { padding: 18px 16px; }
}
/* /Components/Events/EventsFilterModal.razor.rz.scp.css */
/* Segmented filters stacked inside the sheet's "Filters" section, above the drill-in rows. */
.b4u-efm-pills[b-4vtqrubovo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
/* /Components/Events/EventsFiltersFab.razor.rz.scp.css */
.b4u-evt-fab[b-zlaw8adik4] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 80;
    background: var(--b4u-primary);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--b4u-primary) 40%, transparent);
    transition: transform 0.3s ease, box-shadow 0.2s;
}

.b4u-evt-fab:hover[b-zlaw8adik4] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--b4u-primary) 55%, transparent);
}

/* Desktop uses the inline FilterToolbar instead of the FAB. Breakpoint 900px
   mirrors FilterToolbar.razor.css — keep in sync. */
@media (min-width: 900px) {
    .b4u-evt-fab[b-zlaw8adik4] { display: none; }
}
/* /Components/Events/EventsHeroMap.razor.rz.scp.css */
/* Server-rendered hero map. The <svg> covers the hero; "slice" is the SVG equivalent of
   background-size: cover, so the browser scales it and nothing needs measuring. */
.b4u-evt-map[b-aj76b74c7w] { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    pointer-events: none; animation: b4u-evt-map-in-b-aj76b74c7w 1.2s ease; }
@keyframes b4u-evt-map-in-b-aj76b74c7w { from { opacity: 0; } to { opacity: 1; } }

.b4u-evt-map-zoom[b-aj76b74c7w] { transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); }

/* Only the pins take clicks; the map and the hero text layer are pointer-events:none. */
.b4u-pin[b-aj76b74c7w] { pointer-events: auto; cursor: pointer;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1); }
.b4u-pin--inactive[b-aj76b74c7w] { opacity: 0.3; pointer-events: none; cursor: default; }
.b4u-pin-head[b-aj76b74c7w] { transition: transform 0.2s; transform-box: fill-box; transform-origin: center; }
.b4u-pin:hover .b4u-pin-head[b-aj76b74c7w] { transform: scale(1.2); }

.b4u-pin-halo[b-aj76b74c7w] { transform-box: fill-box; transform-origin: center;
    animation: b4u-pin-pulse-b-aj76b74c7w 2.4s ease-out infinite; }
@keyframes b4u-pin-pulse-b-aj76b74c7w {
    0%   { transform: scale(0.4); opacity: 0.6; }
    100% { transform: scale(2.8); opacity: 0; }
}

.b4u-evt-map-scrim[b-aj76b74c7w] { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 52% 80% at 50% 46%, rgba(8,12,24,0.55), rgba(8,12,24,0) 72%); }

.b4u-evt-map-attrib[b-aj76b74c7w] { position: absolute; right: 10px; bottom: 8px; z-index: 3;
    font-size: 10px; color: rgba(255,255,255,0.5); pointer-events: none; }

/* Darkened strip under the fixed nav — rendered in BOTH variants so the nav links stay legible over
   map land/pins. Stronger + taller than the old light-only band to cover a bright pin or pale country
   sitting directly under a menu item. */
.b4u-evt-map-navband[b-aj76b74c7w] { position: absolute; top: 0; left: 0; right: 0; height: 160px; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,12,24,0.92) 0%, rgba(8,12,24,0.6) 32%, rgba(8,12,24,0) 100%); }

/* ---- light variant ---- */
.b4u-evt-map-vscrim[b-aj76b74c7w] { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(11,25,45,0.55) 0%, rgba(11,25,45,0) 22%,
                                           rgba(11,25,45,0) 62%, rgba(11,25,45,0.4) 100%); }
@media (prefers-reduced-motion: reduce) {
    .b4u-evt-map[b-aj76b74c7w], .b4u-evt-map-zoom[b-aj76b74c7w], .b4u-pin[b-aj76b74c7w], .b4u-pin-halo[b-aj76b74c7w] { animation: none; transition: none; }
}

/* ---- live registration flight arc ---- */
/* Country glow: opacity starts at 0 so reduced-motion (animation:none) leaves it hidden, not a solid fill. */
.b4u-country-flash[b-aj76b74c7w] { opacity: 0; pointer-events: none;
    animation: b4uCountryFlash-b-aj76b74c7w 3.2s ease-out forwards; filter: blur(1px); }
@keyframes b4uCountryFlash-b-aj76b74c7w {
    0% { opacity: 0; } 12% { opacity: 0.5; } 32% { opacity: 0.14; } 50% { opacity: 0.42; }
    68% { opacity: 0.1; } 84% { opacity: 0.28; } 100% { opacity: 0; }
}

.b4u-evt-flight[b-aj76b74c7w] { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    pointer-events: none; z-index: 2; }

/* pathLength="1" lets the draw-in run regardless of the arc's real length. */
.b4u-arc[b-aj76b74c7w] { stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: b4uArcDraw-b-aj76b74c7w 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.45)); }
@keyframes b4uArcDraw-b-aj76b74c7w { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.b4u-arc-origin[b-aj76b74c7w] { opacity: 0; animation: b4uDotIn-b-aj76b74c7w 0.5s ease-out 0.1s forwards; }
@keyframes b4uDotIn-b-aj76b74c7w { from { opacity: 0; } to { opacity: 1; } }

.b4u-arc-travel[b-aj76b74c7w] { opacity: 0; animation: b4uTravelFade-b-aj76b74c7w 1.4s ease-out forwards;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)); }
@keyframes b4uTravelFade-b-aj76b74c7w { 0% { opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

.b4u-arc-chip[b-aj76b74c7w] { width: 30px; height: 22px; display: flex; align-items: center; justify-content: center;
    animation: b4uDotIn-b-aj76b74c7w 0.5s ease-out forwards; }
/* ::deep — CountryFlag is a child component; its .b4u-flag span carries ITS OWN scope attribute,
   not this component's, so a plain descendant selector would silently never match. */
.b4u-arc-chip[b-aj76b74c7w]  .b4u-flag { width: 22px; height: 15px; border-radius: 2px;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 2px 5px rgba(0, 0, 0, 0.5); }

@media (prefers-reduced-motion: reduce) {
    .b4u-country-flash[b-aj76b74c7w], .b4u-arc[b-aj76b74c7w], .b4u-arc-origin[b-aj76b74c7w], .b4u-arc-travel[b-aj76b74c7w], .b4u-arc-chip[b-aj76b74c7w] { animation: none; }
    .b4u-evt-flight[b-aj76b74c7w] { display: none; }
}
/* /Components/Events/EventsListing.razor.rz.scp.css */
/* Listing layout — moved here from Events.razor.css when this component was extracted,
   so the styles travel with the markup (used by both /events and the federation detail).
   The hero + search styling stays on the host page (Events.razor); the section spacing
   classes (.b4u-section / --last) are global in theme.css. */
.b4u-evt-results-bar[b-ul12kvw57l] { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }

.b4u-pill[b-ul12kvw57l] {
    background: var(--b4u-bg-card); color: var(--b4u-text-secondary);
    border: 1px solid var(--b4u-border); padding: 6px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.b4u-pill:hover[b-ul12kvw57l] { background: var(--b4u-bg-card-hover); }
.b4u-pill--active[b-ul12kvw57l] { background: var(--b4u-primary); color: #fff; border-color: var(--b4u-primary); }
/* Keep the active pill red with white text on hover — otherwise the generic
   :hover swaps to a light background and the white label becomes invisible. */
.b4u-pill--active:hover[b-ul12kvw57l] { background: var(--b4u-primary-hover); border-color: var(--b4u-primary-hover); color: #fff; }

.b4u-evt-sort[b-ul12kvw57l] { font-size: 13px; color: var(--b4u-text-muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.b4u-evt-sort.is-active[b-ul12kvw57l] { color: var(--b4u-primary); font-weight: 600; }
.b4u-evt-count[b-ul12kvw57l] { font-size: 14px; color: var(--b4u-text-muted); white-space: nowrap; }

/* Archives CTA — made to pop (theme-conditional colours come from --b4u-archive-* in theme.css).
   The card is dark in both themes, so its text is white. */
.b4u-evt-archives[b-ul12kvw57l] { margin-top: 24px; background: var(--b4u-archive-bg); border: 1px solid var(--b4u-archive-border); border-radius: 16px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; box-shadow: var(--b4u-archive-shadow); position: relative; overflow: hidden; }
.b4u-evt-archives-left[b-ul12kvw57l] { display: flex; align-items: center; gap: 18px; min-width: 0; }
.b4u-evt-archives-icon[b-ul12kvw57l] { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--b4u-archive-icon-bg); color: var(--b4u-archive-icon-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b4u-primary) 30%, transparent); }
.b4u-evt-archives h3[b-ul12kvw57l] { font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: -0.01em; }
.b4u-evt-archives p[b-ul12kvw57l] { font-size: 14px; color: rgba(255,255,255,0.62); margin: 0; }

.b4u-eventgrid[b-ul12kvw57l] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.b4u-evt-listgrid[b-ul12kvw57l] { display: flex; flex-direction: column; gap: 12px; }

/* Load-more block — count line above a centred button. Replaces the numbered pagination;
   the four marketing sections below the grid are why this is a button and not infinite scroll. */
.b4u-evt-loadmore[b-ul12kvw57l] { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.b4u-evt-loadmore-count[b-ul12kvw57l] { margin: 0; font-size: 13px; color: var(--b4u-text-secondary); }

/* Results bar — count on the left, controls on the right */
.b4u-evt-results-left[b-ul12kvw57l] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.b4u-evt-results-right[b-ul12kvw57l] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Sort + view move into the filter sheet on phones, where the FAB is the single entry point for
   shaping the list. Breakpoint 900px mirrors FilterToolbar/EventsFiltersFab — keep in sync.
   Must follow the base rule above: same specificity, so source order decides. */
@media (max-width: 899px) {
    .b4u-evt-results-right[b-ul12kvw57l] { display: none; }
}
.b4u-evt-live-chip[b-ul12kvw57l] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--b4u-success, #22c55e); padding: 4px 10px; background: rgba(34,197,94,0.12); border-radius: 20px; }
.b4u-evt-live-dot[b-ul12kvw57l] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: b4u-pulse-b-ul12kvw57l 1.4s ease-in-out infinite; }
@keyframes b4u-pulse-b-ul12kvw57l { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Clear-filters inline link button */
/* /Components/Events/EventsSortControl.razor.rz.scp.css */
.b4u-sort-control[b-08i1terug8] {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--b4u-border);
    border-radius: 10px;
    overflow: hidden;
}

.b4u-sort-select[b-08i1terug8] {
    background: var(--b4u-bg-input, var(--b4u-bg-surface));
    color: var(--b4u-text);
    border: none;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

.b4u-sortdir[b-08i1terug8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    flex-shrink: 0;
    background: var(--b4u-bg-input, var(--b4u-bg-surface));
    color: var(--b4u-text-muted);
    border: none;
    border-left: 1px solid var(--b4u-border);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}

.b4u-sortdir:hover[b-08i1terug8] {
    color: var(--b4u-text);
    background: var(--b4u-bg-card-hover);
}
/* /Components/Events/EventStatsSection.razor.rz.scp.css */
.b4u-st[b-3k18yyty58] { display: flex; flex-direction: column; gap: 20px; }

/* Metrics strip */
.b4u-st-strip[b-3k18yyty58] {
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 14px;
    padding: 20px 28px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px;
}
.b4u-st-metric[b-3k18yyty58] { text-align: center; min-width: 80px; }
.b4u-st-metric-v[b-3k18yyty58] { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--b4u-text); }
.b4u-st-metric-l[b-3k18yyty58] { font-size: 12px; color: var(--b4u-text-muted); font-weight: 500; margin-top: 2px; }

/* Cards */
.b4u-st-cols[b-3k18yyty58] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.b4u-st-card[b-3k18yyty58] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 14px; padding: 24px; }
.b4u-st-h[b-3k18yyty58] { color: var(--b4u-text); font-size: 15px; font-weight: 600; margin: 0 0 16px; }
.b4u-st-empty[b-3k18yyty58] { color: var(--b4u-text-muted); font-size: 13px; padding: 24px 0; text-align: center; }

/* Legend dots (shared by chart + demographics) */
.b4u-st-legend[b-3k18yyty58] { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.b4u-st-legend-item[b-3k18yyty58] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--b4u-text-muted); }
.b4u-st-legend-dot[b-3k18yyty58] { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* Capacity ring */
.b4u-st-cap[b-3k18yyty58] { display: flex; align-items: center; gap: 24px; }
.b4u-st-ring[b-3k18yyty58] { position: relative; width: 80px; height: 80px; flex: 0 0 auto; }
.b4u-st-ring svg[b-3k18yyty58] { width: 80px; height: 80px; transform: rotate(-90deg); }
.b4u-st-ring-track[b-3k18yyty58] { fill: none; stroke: var(--b4u-border); stroke-width: 7; }
.b4u-st-ring-fill[b-3k18yyty58] { fill: none; stroke: var(--b4u-primary); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }
/* Sweep from empty → value when the ring scrolls into view. */
html.b4u-reveal-ready:not(.b4u-reveal-reduced) .b4u-st-ring[data-inview]:not(.is-in) .b4u-st-ring-fill[b-3k18yyty58] { stroke-dashoffset: var(--b4u-ring-circ); }
@media (prefers-reduced-motion: reduce) { .b4u-st-ring-fill[b-3k18yyty58] { transition: none; } }
.b4u-st-ring-pct[b-3k18yyty58] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--b4u-text); }
.b4u-st-cap-legend[b-3k18yyty58] { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.b4u-st-cap-row[b-3k18yyty58] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--b4u-text-secondary); }
.b4u-st-cap-row b[b-3k18yyty58] { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--b4u-text); }
.b4u-st-dot[b-3k18yyty58] { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }

/* Demographics */
.b4u-st-demo-row[b-3k18yyty58] { margin-bottom: 16px; }
.b4u-st-demo-row:last-child[b-3k18yyty58] { margin-bottom: 0; }
.b4u-st-demo-head[b-3k18yyty58] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13px; color: var(--b4u-text-secondary); }
.b4u-st-demo-cap[b-3k18yyty58] { font-size: 12px; color: var(--b4u-text-muted); }
.b4u-st-bar[b-3k18yyty58] { height: 10px; border-radius: 5px; overflow: hidden; display: flex; background: var(--b4u-bg-card-hover); }
.b4u-st-bar-seg[b-3k18yyty58] { width: var(--b4u-seg-w, 0); transition: width .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 90ms); }

/* Top countries */
.b4u-st-ctry[b-3k18yyty58] { display: flex; flex-direction: column; gap: 12px; }
.b4u-st-ctry-row[b-3k18yyty58] { display: flex; align-items: center; gap: 12px; }
.b4u-st-ctry-name[b-3k18yyty58] { font-size: 13px; color: var(--b4u-text); min-width: 120px; display: flex; align-items: center; gap: 8px; }
.b4u-st-ctry-track[b-3k18yyty58] { flex: 1; height: 8px; border-radius: 4px; background: var(--b4u-bg-card-hover); overflow: hidden; }
.b4u-st-ctry-fill[b-3k18yyty58] { display: block; height: 100%; background: var(--b4u-primary); border-radius: 4px; width: var(--b4u-fill-w, 0); transition: width .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.b4u-st-ctry-val[b-3k18yyty58] { font-size: 13px; font-weight: 700; color: var(--b4u-text); min-width: 96px; text-align: right; white-space: nowrap; }
.b4u-st-ctry-val span[b-3k18yyty58] { color: var(--b4u-text-muted); font-weight: 500; font-size: 11px; }
/* Grow from zero when the card scrolls into view. */
html.b4u-reveal-ready:not(.b4u-reveal-reduced) [data-inview]:not(.is-in) .b4u-st-bar-seg[b-3k18yyty58],
html.b4u-reveal-ready:not(.b4u-reveal-reduced) [data-inview]:not(.is-in) .b4u-st-ctry-fill[b-3k18yyty58] { width: 0; }
@media (prefers-reduced-motion: reduce) {
    .b4u-st-bar-seg[b-3k18yyty58], .b4u-st-ctry-fill[b-3k18yyty58] { transition: none; }
}

@media (max-width: 640px) {
    .b4u-st-card[b-3k18yyty58] { padding: 18px; }
    .b4u-st-strip[b-3k18yyty58] { padding: 18px; }
    .b4u-st-ctry-name[b-3k18yyty58] { min-width: 90px; }
}
/* /Components/Events/EventsViewToggle.razor.rz.scp.css */
.b4u-vtoggle[b-lglec5xm10] {
    display: flex;
    gap: 2px;
    background: var(--b4u-bg-surface);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--b4u-border);
}

.b4u-vtoggle-btn[b-lglec5xm10] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--b4u-text-muted);
    border: none;
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s;
}

.b4u-vtoggle-btn:hover[b-lglec5xm10] {
    color: var(--b4u-text);
    background: var(--b4u-bg-card-hover);
}

.b4u-vtoggle-btn.is-active[b-lglec5xm10] {
    background: var(--b4u-primary);
    color: #fff;
}

.b4u-vtoggle-label[b-lglec5xm10] {
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Events/EventTabNav.razor.rz.scp.css */
/* Desktop: centered icon-over-label bar. Moved here with the <nav> — scoped CSS only matches
   elements rendered by its own component, so these rules stop working if left on the page. */
.b4u-ed-tabs[b-k0hq4drj1b] { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--b4u-border); padding: 0 8px; overflow-x: auto; }
.b4u-ed-tab[b-k0hq4drj1b] { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 18px; color: var(--b4u-text-secondary); text-decoration: none; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.b4u-ed-tab:hover[b-k0hq4drj1b] { color: var(--b4u-text); }
.b4u-ed-tab.is-active[b-k0hq4drj1b] { color: var(--b4u-primary); border-bottom-color: var(--b4u-primary); }
.b4u-ed-tab.is-disabled[b-k0hq4drj1b] { color: var(--b4u-text-muted); opacity: 0.45; cursor: default; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Phone (<=640px): fixed bottom tab bar + More sheet.

   These base `display: none` rules MUST stay ABOVE the @media block: equal
   specificity means source order decides, so declaring them after would beat
   the override and hide the bar at every width.
   --------------------------------------------------------------------------- */
.b4u-ed-bottomnav[b-k0hq4drj1b] { display: none; }
.b4u-ed-bnscrim[b-k0hq4drj1b] { display: none; }
.b4u-ed-bnsheet[b-k0hq4drj1b] { display: none; }

@media (max-width: 640px) {
    .b4u-ed-tabs[b-k0hq4drj1b] { display: none; }

    .b4u-ed-bottomnav[b-k0hq4drj1b] {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        background: var(--b4u-bg-card);
        border-top: 1px solid var(--b4u-border);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .b4u-ed-bottomnav-row[b-k0hq4drj1b] { display: flex; padding: 2px 2px 4px; }

    /* The cell's own `color` is what the <Icon> svg inherits (stroke: currentColor); the label
       overrides it, so icon and label can differ in the inactive state as the design requires.
       Most cells are now <a> elements (finding IMPORTANT-2 — real anchors so they work before
       hydration), so text-decoration: none undoes the UA underline; the rest is unchanged from
       when this was a <button>. */
    .b4u-ed-bncell[b-k0hq4drj1b] {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 4px; height: 54px;
        background: transparent; border: none; padding: 0;
        font-family: inherit; cursor: pointer; text-decoration: none;
        color: var(--b4u-text-muted);
    }
    .b4u-ed-bnlabel[b-k0hq4drj1b] { font-size: 10.5px; font-weight: 600; white-space: nowrap; color: var(--b4u-text-secondary); }
    .b4u-ed-bncell.is-active[b-k0hq4drj1b] { color: var(--b4u-primary); }
    .b4u-ed-bncell.is-active .b4u-ed-bnlabel[b-k0hq4drj1b] { font-weight: 800; color: var(--b4u-primary); }
    /* pointer-events: none mirrors .b4u-ed-tab.is-disabled above: the disabled cell is a <span>
       with no href/onclick, but this keeps it inert even if a child element were ever made
       interactive. */
    .b4u-ed-bncell.is-disabled[b-k0hq4drj1b] { opacity: 0.45; cursor: default; pointer-events: none; }

    .b4u-ed-bnmore[b-k0hq4drj1b] { position: relative; }
    /* --b4u-bg-surface, not --b4u-bg-elevated: the latter is #FFFFFF in light theme, i.e. the same
       colour as the bar, so the badge would be invisible. */
    .b4u-ed-bnbadge[b-k0hq4drj1b] {
        position: absolute; top: 4px; right: 6px;
        width: 16px; height: 16px; border-radius: 8px;
        background: var(--b4u-bg-surface);
        display: flex; align-items: center; justify-content: center;
        color: var(--b4u-text-secondary);
    }

    .b4u-ed-bnscrim[b-k0hq4drj1b] {
        display: block;
        position: fixed; inset: 0; z-index: 65;
        background: rgba(15, 23, 42, 0.35);
    }

    .b4u-ed-bnsheet[b-k0hq4drj1b] {
        display: block;
        position: fixed; left: 0; right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 68;
        background: var(--b4u-bg-card);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
        padding: 8px 14px 10px;
    }

    .b4u-ed-bnhandle[b-k0hq4drj1b] { display: flex; justify-content: center; padding-bottom: 8px; }
    .b4u-ed-bnhandle span[b-k0hq4drj1b] { width: 38px; height: 4.5px; border-radius: 3px; background: var(--b4u-border); }

    .b4u-ed-bnsheet-head[b-k0hq4drj1b] { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
    .b4u-ed-bnsheet-title[b-k0hq4drj1b] { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--b4u-text-muted); }
    .b4u-ed-bnsheet-close[b-k0hq4drj1b] { background: transparent; border: none; cursor: pointer; padding: 6px; display: flex; color: var(--b4u-text-muted); }

    /* `color` on the row is what the trailing check icon inherits. */
    .b4u-ed-bnrow[b-k0hq4drj1b] {
        width: 100%; display: flex; align-items: center; gap: 13px;
        padding: 12px 10px; border-radius: 12px;
        background: transparent; border: none; cursor: pointer;
        font-family: inherit; text-align: left;
        color: var(--b4u-primary);
    }
    .b4u-ed-bnrow.is-active[b-k0hq4drj1b] { background: color-mix(in srgb, var(--b4u-primary) 7%, transparent); }
    .b4u-ed-bnrow.is-disabled[b-k0hq4drj1b] { opacity: 0.5; cursor: default; }

    /* --b4u-bg-surface for the same reason as the badge: --b4u-bg-elevated is #FFFFFF in light
       theme, identical to the sheet behind it. */
    .b4u-ed-bnrow-chip[b-k0hq4drj1b] {
        width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
        background: var(--b4u-bg-surface);
        display: flex; align-items: center; justify-content: center;
        color: var(--b4u-text-secondary);
    }
    .b4u-ed-bnrow.is-active .b4u-ed-bnrow-chip[b-k0hq4drj1b] {
        background: color-mix(in srgb, var(--b4u-primary) 10%, transparent);
        color: var(--b4u-primary);
    }

    .b4u-ed-bnrow-label[b-k0hq4drj1b] { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--b4u-text); }
    .b4u-ed-bnrow.is-active .b4u-ed-bnrow-label[b-k0hq4drj1b] { font-weight: 700; color: var(--b4u-primary); }
}

/* Motion is opt-in, not opt-out: users who asked for less get the sheet with no animation. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .b4u-ed-bnsheet[b-k0hq4drj1b] { animation: b4u-ed-bnsheet-up-b-k0hq4drj1b 200ms ease-out; }
    .b4u-ed-bnscrim[b-k0hq4drj1b] { animation: b4u-ed-bnscrim-in-b-k0hq4drj1b 200ms ease-out; }
}

@keyframes b4u-ed-bnsheet-up-b-k0hq4drj1b { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes b4u-ed-bnscrim-in-b-k0hq4drj1b { from { opacity: 0; } to { opacity: 1; } }
/* /Components/Events/EventTeamsSection.razor.rz.scp.css */
.b4u-tm-head[b-qyu5s5jict] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.b4u-tm-count[b-qyu5s5jict] {
    font-size: 13px;
    color: var(--b4u-text-muted);
}
.b4u-tm-searchwrap[b-qyu5s5jict] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 260px;
    max-width: 360px;
    min-width: 200px;
}
.b4u-tm-searchicon[b-qyu5s5jict] {
    position: absolute;
    left: 12px;
    color: var(--b4u-text-muted);
    display: inline-flex;
}
.b4u-tm-search[b-qyu5s5jict] {
    width: 100%;
    border: 1px solid var(--b4u-border);
    border-radius: 10px;
    background: var(--b4u-bg-input);
    color: var(--b4u-text);
    font-size: 14px;
    padding: 8px 14px 8px 36px;
}
.b4u-tm-search:focus[b-qyu5s5jict] {
    outline: none;
    border-color: var(--b4u-primary);
}
.b4u-tm-team[b-qyu5s5jict] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.b4u-tm-avatar[b-qyu5s5jict] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.b4u-tm-name[b-qyu5s5jict] {
    font-weight: 600;
    color: var(--b4u-text);
}
.b4u-tm-wl[b-qyu5s5jict] {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.b4u-tm-members[b-qyu5s5jict] {
    color: var(--b4u-text-secondary);
    white-space: nowrap;
}
.b4u-tm-pills[b-qyu5s5jict] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}
.b4u-tm-dash[b-qyu5s5jict] {
    color: var(--b4u-text-muted);
    font-size: 12px;
}
.b4u-tm-pill[b-qyu5s5jict] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.b4u-tm-pill.is-ok[b-qyu5s5jict] {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
}
.b4u-tm-pill.is-wait[b-qyu5s5jict] {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}
.b4u-tm-roster[b-qyu5s5jict] {
    padding: 4px 16px 16px 42px;
}
.b4u-tm-rostergrid[b-qyu5s5jict] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.b4u-tm-member[b-qyu5s5jict] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.b4u-tm-mmark[b-qyu5s5jict] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}
.b4u-tm-member.is-pending .b4u-tm-mmark[b-qyu5s5jict] {
    background: var(--b4u-bg-card);
    border: 1px dashed var(--b4u-text-muted);
    color: transparent;
}
.b4u-tm-member.is-resv .b4u-tm-mmark[b-qyu5s5jict] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text-muted);
}
.b4u-tm-mname[b-qyu5s5jict] {
    color: var(--b4u-text);
    font-weight: 500;
}
.b4u-tm-mslot[b-qyu5s5jict] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--b4u-bg-card);
    border: 1px dashed var(--b4u-text-muted);
    flex-shrink: 0;
}
.b4u-tm-empty[b-qyu5s5jict] {
    color: var(--b4u-text-muted);
    font-style: italic;
    font-size: 13px;
}
.b4u-tm-resv[b-qyu5s5jict] {
    margin-top: 14px;
}
.b4u-tm-resv-h[b-qyu5s5jict] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--b4u-text-muted);
    margin-bottom: 8px;
}
.b4u-tm-noteams[b-qyu5s5jict] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--b4u-text-muted);
    border: 1px dashed var(--b4u-border);
    border-radius: 14px;
}
/* Desktop grid vs mobile cards: show one at a time (default = desktop).
   NOTE: this base rule MUST precede the 640px media block below — equal specificity means
   source order decides, so a later display:none would defeat the media override. */
.b4u-tm-mobile[b-qyu5s5jict] { display: none; }

/* Card list (≤640px). Mirrors .b4u-plc on the Players tab so both tabs read as one system. */
.b4u-tmc[b-qyu5s5jict] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
    margin-bottom: 8px;
}
.b4u-tmc-head[b-qyu5s5jict] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
.b4u-tmc-idtext[b-qyu5s5jict] { flex: 1; min-width: 0; }
.b4u-tmc-name[b-qyu5s5jict] {
    display: block; font-size: 14.5px; font-weight: 700; color: var(--b4u-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b4u-tmc-sub[b-qyu5s5jict] {
    display: block; font-size: 11.5px; color: var(--b4u-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b4u-tmc-chev[b-qyu5s5jict] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--b4u-text-muted);
    transition: transform .2s;
}
.b4u-tmc-chev.is-open[b-qyu5s5jict] { transform: rotate(180deg); }
.b4u-tmc-chips[b-qyu5s5jict] { padding: 0 14px 12px; }
.b4u-tmc-body[b-qyu5s5jict] { padding: 12px 14px; border-top: 1px solid var(--b4u-border); }

@media (max-width: 640px) {
    .b4u-tm-head[b-qyu5s5jict] { flex-direction: column; align-items: stretch; }
    /* In the column layout the flex-basis (260px) would become the search wrapper's HEIGHT,
       leaving a huge empty band; drop the grow/basis so it's just the input's height. */
    .b4u-tm-searchwrap[b-qyu5s5jict] { flex: none; max-width: none; }
    .b4u-tm-desktop[b-qyu5s5jict] { display: none; }
    .b4u-tm-mobile[b-qyu5s5jict] { display: block; }
}
.b4u-tm-pill.is-clickable[b-qyu5s5jict] { cursor: pointer; }
.b4u-tm-pill.is-clickable:hover[b-qyu5s5jict] { box-shadow: inset 0 0 0 1.5px currentColor; }
/* /Components/Events/FilterCombobox.razor.rz.scp.css */
/* FilterCombobox — b4u-combo-* */

.b4u-combo[b-gepfe879nw] {
    border: 1px solid var(--b4u-border, #e2e8f0);
    border-radius: 12px;
    background: var(--b4u-bg-surface, #fff);
    overflow: hidden;
    transition: border-color 0.15s;
}

.b4u-combo--open[b-gepfe879nw] {
    border-color: var(--b4u-primary, #E03440);
}

/* Trigger button */
.b4u-combo-trigger[b-gepfe879nw] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--b4u-text, #0f172a);
}

.b4u-combo-trigger:focus-visible[b-gepfe879nw] {
    outline: 2px solid var(--b4u-primary, #E03440);
    outline-offset: -2px;
}

.b4u-combo-trigger-label[b-gepfe879nw] {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--b4u-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b4u-combo-trigger-label--placeholder[b-gepfe879nw] {
    font-weight: 400;
    color: var(--b4u-text-muted, #94a3b8);
}

/* Clear (×) button inside trigger */
.b4u-combo-clear[b-gepfe879nw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--b4u-text-muted, #94a3b8);
    cursor: pointer;
}

.b4u-combo-clear:hover[b-gepfe879nw] {
    color: var(--b4u-text, #0f172a);
}

/* Chevron */
.b4u-combo-chevron[b-gepfe879nw] {
    display: flex;
    flex-shrink: 0;
    color: var(--b4u-text-muted, #94a3b8);
    transition: transform 0.2s;
}

.b4u-combo-chevron--open[b-gepfe879nw] {
    transform: rotate(180deg);
}

/* Panel (search + list) */
.b4u-combo-panel[b-gepfe879nw] {
    border-top: 1px solid var(--b4u-border, #e2e8f0);
}

/* Search row */
.b4u-combo-search-row[b-gepfe879nw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--b4u-text-muted, #94a3b8);
}

.b4u-combo-search-input[b-gepfe879nw] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--b4u-text, #0f172a);
    font-size: 14px;
    font-family: inherit;
}

/* Scrollable list */
.b4u-combo-list[b-gepfe879nw] {
    max-height: 220px;
    overflow-y: auto;
    border-top: 1px solid var(--b4u-border, #e2e8f0);
}

/* Empty hint */
.b4u-combo-empty[b-gepfe879nw] {
    padding: 18px 16px;
    text-align: center;
    color: var(--b4u-text-muted, #94a3b8);
    font-size: 13px;
}

/* Option button */
.b4u-combo-opt[b-gepfe879nw] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--b4u-border, #e2e8f0);
    cursor: pointer;
    font-family: inherit;
    color: var(--b4u-text, #0f172a);
    transition: background 0.1s;
}

.b4u-combo-opt:first-child[b-gepfe879nw] {
    border-top: none;
}

.b4u-combo-opt:hover[b-gepfe879nw] {
    background: var(--b4u-bg-hover, #f8fafc);
}

.b4u-combo-opt--selected[b-gepfe879nw] {
    background: color-mix(in srgb, var(--b4u-primary, #E03440) 10%, transparent);
}

/* Option text block */
.b4u-combo-opt-text[b-gepfe879nw] {
    flex: 1;
    min-width: 0;
}

.b4u-combo-opt-label[b-gepfe879nw] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--b4u-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b4u-combo-opt--selected .b4u-combo-opt-label[b-gepfe879nw] {
    font-weight: 700;
    color: var(--b4u-primary, #E03440);
}

.b4u-combo-opt-sub[b-gepfe879nw] {
    display: block;
    font-size: 12px;
    color: var(--b4u-text-muted, #94a3b8);
}
/* /Components/Events/FilterPillSelect.razor.rz.scp.css */
/* FilterPillSelect — b4u-fps-* */

.b4u-fps[b-pxn49w0olb] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.b4u-fps-pills-row[b-pxn49w0olb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Pills */
.b4u-fps-pill[b-pxn49w0olb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--b4u-border, #e2e8f0);
    background: var(--b4u-bg-surface, #fff);
    color: var(--b4u-text-secondary, #64748b);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.b4u-fps-pill:hover[b-pxn49w0olb] {
    border-color: var(--b4u-primary, #E03440);
    color: var(--b4u-primary, #E03440);
}

.b4u-fps-pill--active[b-pxn49w0olb] {
    background: var(--b4u-primary, #E03440);
    border-color: var(--b4u-primary, #E03440);
    color: #fff;
}

.b4u-fps-pill--active:hover[b-pxn49w0olb] {
    background: var(--b4u-primary-hover, #C62D38);
    border-color: var(--b4u-primary-hover, #C62D38);
    color: #fff;
}

/* More pill chevron */
.b4u-fps-more-label[b-pxn49w0olb] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.b4u-fps-chevron[b-pxn49w0olb] {
    display: flex;
    transition: transform 0.2s;
}

.b4u-fps-chevron--open[b-pxn49w0olb] {
    transform: rotate(180deg);
}

/* Inline dropdown */
.b4u-fps-dropdown[b-pxn49w0olb] {
    margin-top: 10px;
    border: 1px solid var(--b4u-border, #e2e8f0);
    border-radius: 12px;
    background: var(--b4u-bg-surface, #fff);
    overflow: hidden;
}

.b4u-fps-search-row[b-pxn49w0olb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--b4u-text-muted, #94a3b8);
}

.b4u-fps-search-input[b-pxn49w0olb] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--b4u-text, #0f172a);
    font-size: 14px;
    font-family: inherit;
}

/* List */
.b4u-fps-list[b-pxn49w0olb] {
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid var(--b4u-border, #e2e8f0);
}

.b4u-fps-list-item[b-pxn49w0olb] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--b4u-border, #e2e8f0);
    cursor: pointer;
    font-family: inherit;
    color: var(--b4u-text, #0f172a);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.1s;
}

.b4u-fps-list-item:first-child[b-pxn49w0olb] {
    border-top: none;
}

.b4u-fps-list-item:hover[b-pxn49w0olb] {
    background: var(--b4u-bg-hover, #f8fafc);
}

.b4u-fps-list-item--selected[b-pxn49w0olb] {
    background: color-mix(in srgb, var(--b4u-primary, #E03440) 10%, transparent);
    font-weight: 700;
    color: var(--b4u-primary, #E03440);
}

.b4u-fps-list-label[b-pxn49w0olb] {
    flex: 1;
    min-width: 0;
}

.b4u-fps-list-count[b-pxn49w0olb] {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--b4u-text-muted, #94a3b8);
}

.b4u-fps-no-match[b-pxn49w0olb] {
    padding: 16px;
    text-align: center;
    color: var(--b4u-text-muted, #94a3b8);
    font-size: 13px;
}
/* /Components/Events/HostEventCta.razor.rz.scp.css */
/* Host / organizer marketing band. Ported from events-page.jsx (HostEventCTA).
   The band is always dark (hero gradient is theme-independent), so all inner text
   uses white-on-dark regardless of the active light/dark theme. */
.b4u-host-cta[b-uxfpwi285f] { margin-top: 40px; }

.b4u-host-cta-band[b-uxfpwi285f] {
    position: relative;
    overflow: hidden;
    background: var(--b4u-hero-gradient);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 44px 48px;
}

/* Soft glow accents */
.b4u-host-cta-glow[b-uxfpwi285f] { position: absolute; border-radius: 50%; pointer-events: none; }
.b4u-host-cta-glow--primary[b-uxfpwi285f] {
    top: -80px; right: -40px; width: 320px; height: 320px;
    background: color-mix(in srgb, var(--b4u-primary) 13%, transparent);
    filter: blur(90px);
}
.b4u-host-cta-glow--accent[b-uxfpwi285f] {
    bottom: -100px; left: 20%; width: 260px; height: 260px;
    background: color-mix(in srgb, var(--b4u-accent) 8%, transparent);
    filter: blur(80px);
}

.b4u-host-cta-row[b-uxfpwi285f] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* Left: pitch */
.b4u-host-cta-pitch[b-uxfpwi285f] { flex: 1; min-width: 280px; }

.b4u-host-cta-badge[b-uxfpwi285f] {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}
.b4u-host-cta-badge-ic[b-uxfpwi285f] { display: inline-flex; }
.b4u-host-cta-badge-ic[b-uxfpwi285f]  svg { color: var(--b4u-primary); }
.b4u-host-cta-badge-text[b-uxfpwi285f] { color: rgba(255, 255, 255, 0.85); font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }

.b4u-host-cta-title[b-uxfpwi285f] {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px;
    font-family: var(--b4u-font-display);
}
.b4u-host-cta-lead[b-uxfpwi285f] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 460px;
    text-wrap: pretty;
}

.b4u-host-cta-perks[b-uxfpwi285f] { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 28px; }
.b4u-host-cta-perk[b-uxfpwi285f] { display: flex; align-items: center; gap: 8px; }
.b4u-host-cta-perk-ic[b-uxfpwi285f] {
    display: flex; width: 26px; height: 26px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    align-items: center; justify-content: center; flex-shrink: 0;
}
.b4u-host-cta-perk-ic[b-uxfpwi285f]  svg { color: var(--b4u-primary); }
.b4u-host-cta-perk-label[b-uxfpwi285f] { font-size: 13.5px; color: rgba(255, 255, 255, 0.78); font-weight: 500; }

.b4u-host-cta-actions[b-uxfpwi285f] { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.b4u-host-cta-link[b-uxfpwi285f] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14.5px; font-weight: 600;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 4px;
    transition: color 0.2s ease;
}
.b4u-host-cta-link:hover[b-uxfpwi285f] { color: #fff; }

/* Right: pricing teaser card */
.b4u-host-cta-card[b-uxfpwi285f] {
    width: 248px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 26px 26px 24px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.b4u-host-cta-card:hover[b-uxfpwi285f] {
    border-color: color-mix(in srgb, var(--b4u-primary) 60%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.b4u-host-cta-card-eyebrow[b-uxfpwi285f] {
    font-size: 12px; font-weight: 700; color: var(--b4u-primary);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}
.b4u-host-cta-price[b-uxfpwi285f] { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
.b4u-host-cta-price-cur[b-uxfpwi285f] { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.b4u-host-cta-price-amt[b-uxfpwi285f] {
    font-size: 52px; font-weight: 800; color: #fff;
    letter-spacing: -0.03em; line-height: 1; font-family: var(--b4u-font-display);
}
.b4u-host-cta-price-unit[b-uxfpwi285f] { font-size: 14px; color: rgba(255, 255, 255, 0.5); }
.b4u-host-cta-price-note[b-uxfpwi285f] { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; }

.b4u-host-cta-card-list[b-uxfpwi285f] {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.b4u-host-cta-card-item[b-uxfpwi285f] { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.b4u-host-cta-card-item[b-uxfpwi285f]  svg { color: var(--b4u-success); flex-shrink: 0; }

/* Stack the teaser card under the pitch and tighten padding on small screens */
@media (max-width: 640px) {
    .b4u-host-cta-band[b-uxfpwi285f] { padding: 32px 24px; }
    .b4u-host-cta-card[b-uxfpwi285f] { width: 100%; }
}
/* /Components/Events/LatestRegistrations.razor.rz.scp.css */
/* Latest Registrations — "strip" variant ported from
   docs/design/full-project/latest-registrations.jsx (RegStrip + useRegStyles + RegHeader).
   A slim live band: overlapping avatar stack + a rolling "just joined" caption + a
   pulsing LIVE pill. Values (sizes / colours / timings) are lifted verbatim from the
   jsx; theme.css --b4u-* tokens are used so it respects light & dark.
   The brand green (#22C55E / #16A34A) is kept literal to match the design. */

.b4u-livereg[b-jnd0tt7bod] {
    width: 100%;
}

/* ---------- header (RegHeader): LIVE pill + title + running "+N today" ---------- */
.b4u-livereg-head[b-jnd0tt7bod] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.b4u-livereg-pill[b-jnd0tt7bod] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #22C55E18;
    border: 1px solid #22C55E55;
    color: #16A34A;
    padding: 3px 10px 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.b4u-livereg-head-text[b-jnd0tt7bod] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.b4u-livereg-title[b-jnd0tt7bod] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 800;
    color: var(--b4u-text);
    letter-spacing: -0.01em;
    font-family: var(--b4u-font-display);
}

.b4u-livereg-sub[b-jnd0tt7bod] {
    font-size: 12.5px;
    color: var(--b4u-text-muted);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.b4u-livereg-count[b-jnd0tt7bod] {
    font-weight: 700;
    color: var(--b4u-primary);
}

.b4u-livereg-sub :global(.b4u-icon)[b-jnd0tt7bod] {
    color: var(--b4u-primary);
}

/* ---------- band (RegStrip card) ---------- */
.b4u-livereg-band[b-jnd0tt7bod] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 16px;
    padding: 12px 18px;
}

/* the band is a link to the event-detail page */
a.b4u-livereg-band[b-jnd0tt7bod] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

a.b4u-livereg-band:hover[b-jnd0tt7bod] {
    border-color: color-mix(in srgb, var(--b4u-primary) 45%, var(--b4u-border));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--b4u-primary) 12%, transparent);
}

/* green glow pulse — fires whenever a new registration lands (.is-glow toggled on) */
.b4u-livereg-band.is-glow[b-jnd0tt7bod]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    animation: regGlow-b-jnd0tt7bod 2.2s ease-out forwards;
}

@keyframes regGlow-b-jnd0tt7bod {
    0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(34,197,94,0),    inset 0 0 0 1.5px rgba(34,197,94,.95); }
    18%  { opacity: 1; box-shadow: 0 0 24px 4px rgba(34,197,94,.6), inset 0 0 0 1.5px rgba(34,197,94,.95); }
    100% { opacity: 0; box-shadow: 0 0 0 0 rgba(34,197,94,0),    inset 0 0 0 1.5px rgba(34,197,94,0); }
}

/* ---------- event-image thumbnail (the "avatar") ---------- */
/* On wide screens it bleeds flush to the card's left/top/bottom edges (the card's
   overflow:hidden + 16px radius round its outer corners) for a fuller backdrop. */
.b4u-livereg-thumb[b-jnd0tt7bod] {
    flex-shrink: 0;
    align-self: stretch;
    position: relative;
    overflow: hidden;
    width: 132px;
    min-height: 84px;
    margin: -12px 0 -12px -18px;
    /* An absolutely-filled <img> (set in the component) sits on this elevated surface with an onerror fallback
       to the default bowling image. A transparent PNG stays clean over the surface; the img is absolutely
       positioned (out of flow) so it can never change the card height. */
    background-color: var(--b4u-bg-elevated);
    box-shadow: inset 0 0 0 1px var(--b4u-border);
}
.b4u-livereg-thumbimg[b-jnd0tt7bod] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the thumbnail pops in on a real arrival */
.b4u-livereg-thumb.is-fresh[b-jnd0tt7bod] {
    animation: regAvatarIn-b-jnd0tt7bod 0.5s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes regAvatarIn-b-jnd0tt7bod {
    0%   { opacity: 0; transform: scale(0.94); }
    60%  { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

/* the country flag sits inline beside the subject in the caption */
.b4u-livereg-line1[b-jnd0tt7bod]  .b4u-flag {
    display: inline-block;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}

/* ---------- rolling caption ---------- */
.b4u-livereg-cap[b-jnd0tt7bod] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;   /* stack name / "joined …" / time so it stays compact */
    gap: 3px;
    animation: regCaptionIn-b-jnd0tt7bod 0.45s ease-out;
}

.b4u-livereg-line1[b-jnd0tt7bod] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@keyframes regCaptionIn-b-jnd0tt7bod {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.b4u-livereg-name[b-jnd0tt7bod] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

/* "×N" badge — how many spots a single subject grabbed at once (one card per person) */
.b4u-livereg-multi[b-jnd0tt7bod] {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--b4u-primary);
    background: color-mix(in srgb, var(--b4u-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--b4u-primary) 32%, transparent);
    padding: 1px 7px;
    border-radius: 999px;
}

/* "TEAM · N" badge for team registrations */
.b4u-livereg-team[b-jnd0tt7bod] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--b4u-primary);
    background: color-mix(in srgb, var(--b4u-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--b4u-primary) 35%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
}

/* "Waiting list" badge — amber/yellow to set it apart from confirmed registrations */
.b4u-livereg-wait[b-jnd0tt7bod] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #CA8A04;
    background: #EAB3081f;
    border: 1px solid #EAB30866;
    padding: 2px 8px;
    border-radius: 999px;
}

.b4u-livereg-new[b-jnd0tt7bod] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #16A34A;
    background: #22C55E22;
    border: 1px solid #22C55E66;
    padding: 1px 6px;
    border-radius: 999px;
    /* Badge fades out (jsx regTagFade) and is removed from the DOM when Fresh
       clears at Task.Delay(2200) — 2.2s so the fade finishes just as it's
       removed (no abrupt pop). jsx used 2.4s; matched to the 2200ms window. */
    animation: regTagFade-b-jnd0tt7bod 2.2s ease-out forwards;
}

@keyframes regTagFade-b-jnd0tt7bod {
    0%, 65% { opacity: 1; transform: translateY(0); }
    100%    { opacity: 0; transform: translateY(-2px); }
}

/* one line, ellipsised — so a long event name never wraps and changes the card height */
.b4u-livereg-meta[b-jnd0tt7bod] {
    font-size: 13.5px;
    color: var(--b4u-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b4u-livereg-squad[b-jnd0tt7bod] {
    color: var(--b4u-primary);
    font-weight: 700;
}

.b4u-livereg-ago[b-jnd0tt7bod] {
    font-size: 11.5px;
    color: var(--b4u-text-muted);
}

/* ---------- rotation progress dots ---------- */
.b4u-livereg-dots[b-jnd0tt7bod] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.b4u-livereg-dot-i[b-jnd0tt7bod] {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--b4u-border);
    transition: width 0.3s ease, background 0.3s ease;
}

.b4u-livereg-dot-i.is-on[b-jnd0tt7bod] {
    width: 14px;
    background: var(--b4u-primary);
}

/* ---------- compact LIVE tag (no header) ---------- */
.b4u-livereg-tag[b-jnd0tt7bod] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #16A34A;
}

/* ---------- pulsing LIVE dot (header pill + compact tag) ---------- */
.b4u-livereg-dot[b-jnd0tt7bod] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 7px #22C55E;
    animation: livePulse-b-jnd0tt7bod 1.5s ease-in-out infinite;
}

@keyframes livePulse-b-jnd0tt7bod {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ---------- phone: tighter band + a small inset square thumbnail ---------- */
@media (max-width: 640px) {
    .b4u-livereg-band[b-jnd0tt7bod] {
        gap: 12px;
        padding: 10px 12px;
        flex-wrap: nowrap;
    }

    .b4u-livereg-thumb[b-jnd0tt7bod] {
        align-self: center;
        width: 64px;
        height: 64px;
        min-height: 0;
        margin: 0;
        border-radius: 13px;
    }

    /* The caption column is narrow on phones — the "grabbed a spot in [squad] · [event]"
       line would ellipsise away the squad and event name after a single character. Let it
       wrap to two lines instead so both stay readable (still clamped, so height stays sane). */
    .b4u-livereg-meta[b-jnd0tt7bod] {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    /* Drop the rotation progress dots on phones to give the caption the full width —
       the spotlight still visibly rotates through the content. */
    .b4u-livereg-dots[b-jnd0tt7bod] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .b4u-livereg-band.is-glow[b-jnd0tt7bod]::after,
    .b4u-livereg-thumb.is-fresh[b-jnd0tt7bod],
    .b4u-livereg-cap[b-jnd0tt7bod],
    .b4u-livereg-new[b-jnd0tt7bod],
    .b4u-livereg-dot[b-jnd0tt7bod] {
        animation: none;
    }
}
/* /Components/Events/LiveRegistrationsChyron.razor.rz.scp.css */
/* Full-bleed 42px band. The call site controls the surrounding width (flush on Home, inset on
   event detail) — the bar itself is always width:100%. */
.chy[b-cg4bbk3zhk] {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 42px;
    background: var(--b4u-bg-surface);
    border-top: 1px solid var(--b4u-border);
    border-bottom: 1px solid var(--b4u-border);
    overflow: hidden;
}

/* Standalone dark band for light, contained page contexts (Events), where the flush hairline
   strip reads as unfinished. Reads as an intentional live ticker like the Browse Archives banner.
   Redefining the tokens the bar + items consume (they cascade into the separately-scoped
   ChyronItem, so no ::deep is needed) flips the text light and the edge fades to the band colour.
   The band is the hero gradient (navy #0B1120 at both edges); the fades fade to that same
   #0B1120, so the seam stays clean even though the fill is a gradient. The `border` shorthand
   (and radius) intentionally overrides the base top/bottom-only hairlines. */
.chy--panel[b-cg4bbk3zhk] {
    --b4u-bg-surface: #0B1120;
    --b4u-text: #fff;
    --b4u-text-secondary: rgba(255, 255, 255, 0.74);
    --b4u-text-muted: rgba(255, 255, 255, 0.5);
    background: var(--b4u-hero-gradient);
    border: 1px solid var(--b4u-archive-border);
    border-radius: 16px;
    box-shadow: var(--b4u-archive-shadow);
}

/* LIVE block: a solid brand-red gradient that melts into the bar. */
.chy-live[b-cg4bbk3zhk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 34px 0 18px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: linear-gradient(to right, var(--b4u-primary) 0%, var(--b4u-primary) 62%, transparent);
}

.chy-dot[b-cg4bbk3zhk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
    animation: chy-pulse-b-cg4bbk3zhk 1.5s ease-in-out infinite;
}

.chy-livetext[b-cg4bbk3zhk] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #fff;
}

@keyframes chy-pulse-b-cg4bbk3zhk {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}

.chy-viewport[b-cg4bbk3zhk] {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* The scroll. 78s = max(48, 12*6.5). Two copies of the 12 slots, so translateX(-50%) lands
   copy B exactly where copy A started -> seamless loop. */
.chy-track[b-cg4bbk3zhk] {
    display: flex;
    align-items: center;
    gap: 22px;
    width: max-content;
    height: 100%;
    animation: chy-ticker-b-cg4bbk3zhk 78s linear infinite;
}

/* Pause on hover or keyboard focus inside, pure CSS — the track's own class never changes, so
   the scroll only pauses, never restarts, and there is no Blazor round-trip. :focus-within lets
   a keyboard user reach and activate the copy-A links while the scroll holds still. */
.chy:hover .chy-track[b-cg4bbk3zhk],
.chy:focus-within .chy-track[b-cg4bbk3zhk] { animation-play-state: paused; }

@keyframes chy-ticker-b-cg4bbk3zhk {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 36px edge fades to the band colour, masking the loop seam and the LIVE block edge. */
.chy-fade[b-cg4bbk3zhk] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    z-index: 1;
}

.chy-fade-l[b-cg4bbk3zhk] { left: 0;  background: linear-gradient(to right, var(--b4u-bg-surface), transparent); }
.chy-fade-r[b-cg4bbk3zhk] { right: 0; background: linear-gradient(to left,  var(--b4u-bg-surface), transparent); }

/* Reduced motion: stop the scroll (the most recent slots show statically, the rest clipped)
   and stop the LIVE pulse. */
@media (prefers-reduced-motion: reduce) {
    .chy-track[b-cg4bbk3zhk] { animation: none; }
    .chy-dot[b-cg4bbk3zhk] { animation: none; }
}
/* /Components/Events/PastSquadsGroup.razor.rz.scp.css */
.b4u-past-toggle[b-sh4af4wfzw] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1px dashed var(--b4u-border);
    border-radius: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--b4u-text-muted);
    text-align: left;
    transition: background .15s;
}
.b4u-past-toggle.is-open[b-sh4af4wfzw] { background: var(--b4u-bg-surface); }
.b4u-past-chev[b-sh4af4wfzw] { display: inline-flex; flex: 0 0 auto; transition: transform .2s; }
.b4u-past-toggle.is-open .b4u-past-chev[b-sh4af4wfzw] { transform: rotate(90deg); }
.b4u-past-check[b-sh4af4wfzw] { display: inline-flex; flex: 0 0 auto; }
.b4u-past-lbl[b-sh4af4wfzw] { font-size: 13px; font-weight: 700; }
.b4u-past-hint[b-sh4af4wfzw] { font-size: 12px; font-weight: 500; }
.b4u-past-action[b-sh4af4wfzw] { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--b4u-text-secondary); }

.b4u-past-list[b-sh4af4wfzw] { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.b4u-past-row[b-sh4af4wfzw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--b4u-border);
    background: transparent;
    cursor: pointer;
    transition: background .15s;
}
.b4u-past-row:hover[b-sh4af4wfzw] { background: var(--b4u-bg-surface); }
.b4u-past-ico[b-sh4af4wfzw] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--b4u-bg-card-hover);
    color: var(--b4u-text-muted);
}
.b4u-past-name[b-sh4af4wfzw] { font-weight: 600; color: var(--b4u-text-secondary); font-size: 13.5px; }
.b4u-past-team[b-sh4af4wfzw] { display: inline-flex; color: var(--b4u-text-muted); }
.b4u-past-time[b-sh4af4wfzw] { color: var(--b4u-text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.b4u-past-fill[b-sh4af4wfzw] { display: inline-flex; align-items: center; gap: 4px; color: var(--b4u-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: auto; }
/* /Components/Events/RecentlyFinishedStrip.razor.rz.scp.css */
/* RecentlyFinishedStrip — quiet "wrapped up" section */
.b4u-rf-section[b-fn3ygzekgx] { margin-top: 48px; }

.b4u-rf-header[b-fn3ygzekgx] { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.b4u-rf-title[b-fn3ygzekgx] { font-size: 16px; font-weight: 700; color: var(--b4u-text-secondary); margin: 0; display: flex; align-items: center; gap: 8px; }
.b4u-rf-subtitle[b-fn3ygzekgx] { font-size: 13px; color: var(--b4u-text-muted); }

.b4u-rf-grid[b-fn3ygzekgx] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }

/* Card */
.b4u-rf-card[b-fn3ygzekgx] {
    position: relative;
    display: flex; gap: 12px; align-items: center;
    background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 12px;
    padding: 12px; cursor: pointer; text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.b4u-rf-card:hover[b-fn3ygzekgx] { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.14); border-color: var(--b4u-border-hover); }
/* Stretched nav link covers the card; the Results link (a real sibling, not nested) sits above it. */
.b4u-rf-stretch[b-fn3ygzekgx] { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* Thumbnail */
.b4u-rf-thumb[b-fn3ygzekgx] {
    width: 54px; height: 54px; border-radius: 10px; overflow: hidden;
    flex-shrink: 0; position: relative; background: var(--b4u-bg-elevated);
    display: flex; align-items: center; justify-content: center;
}
.b4u-rf-img[b-fn3ygzekgx] { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55); opacity: 0.8; transition: opacity 0.2s; }
.b4u-rf-card:hover .b4u-rf-img[b-fn3ygzekgx] { opacity: 0.95; }
.b4u-rf-emoji[b-fn3ygzekgx] { display: block; font-size: 28px; opacity: 0.5; }
/* Fallback swap — see /app/image-fallback.js. */
.b4u-rf-emoji.is-hidden[b-fn3ygzekgx] { display: none; }
[data-b4u-noimg] .b4u-rf-emoji.is-hidden[b-fn3ygzekgx] { display: block; }
.b4u-rf-flag[b-fn3ygzekgx] { position: absolute; bottom: 4px; right: 4px; }

/* Body */
.b4u-rf-body[b-fn3ygzekgx] { flex: 1; min-width: 0; }

.b4u-rf-ended-chip[b-fn3ygzekgx] {
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px;
    background: var(--b4u-bg-elevated); color: var(--b4u-text-muted);
    padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
}
.b4u-rf-dot[b-fn3ygzekgx] { width: 5px; height: 5px; border-radius: 50%; background: var(--b4u-text-muted); flex-shrink: 0; }

.b4u-rf-name[b-fn3ygzekgx] { font-size: 14px; font-weight: 600; color: var(--b4u-text); margin: 0 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b4u-rf-meta[b-fn3ygzekgx] { font-size: 12px; color: var(--b4u-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Results link */
.b4u-rf-results[b-fn3ygzekgx] {
    position: relative; z-index: 2;
    flex-shrink: 0; color: var(--b4u-primary); font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px;
    text-decoration: none; background: transparent;
    transition: background 0.15s;
}
.b4u-rf-results:hover[b-fn3ygzekgx] { background: var(--b4u-primary-light); }
/* /Components/Events/RegistrationActivityChart.razor.rz.scp.css */
/* Registration growth — transparent stacked-area chart with per-day hover tooltips (pure CSS). */

.b4u-ract-empty[b-y99q0l40py] { text-align: center; padding: 40px 0; color: var(--b4u-text-muted); font-size: 14px; }

.b4u-ract-plot[b-y99q0l40py] { position: relative; height: 240px; overflow: visible; }
.b4u-ract-svg[b-y99q0l40py] { width: 100%; height: 100%; display: block; }

/* Series colours. Entries = primary (the area); Players = blue line; Teams = accent line;
   Waiting list = muted dashed line (secondary). */
.b4u-ract[b-y99q0l40py] { --ract-players: #3B82F6; --ract-teams: var(--b4u-accent); --ract-waitlist: #94A3B8; }

/* Gradient stops (stop-color in CSS resolves custom properties reliably across browsers) */
.b4u-ract-ge-0[b-y99q0l40py] { stop-color: var(--b4u-primary); stop-opacity: 0.28; }
.b4u-ract-ge-1[b-y99q0l40py] { stop-color: var(--b4u-primary); stop-opacity: 0.02; }

.b4u-ract-grid[b-y99q0l40py] { stroke: var(--b4u-border); stroke-width: 1; }
.b4u-ract-line[b-y99q0l40py] { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.b4u-ract-line--entries[b-y99q0l40py] { stroke: var(--b4u-primary); }
.b4u-ract-line--players[b-y99q0l40py] { stroke: var(--ract-players); }
.b4u-ract-line--teams[b-y99q0l40py] { stroke: var(--ract-teams); }
.b4u-ract-line--waitlist[b-y99q0l40py] { stroke: var(--ract-waitlist); stroke-dasharray: 5 3; }

/* Hover / scrub overlay.

   Two selection mechanisms, deliberately kept apart:
     • :hover          — mouse, pure CSS, gated behind @media (hover: hover);
     • [data-active]   — a finger dragged across the plot, set by chart-scrub.js.
   The gate is what keeps them exclusive. A tap on a touch device leaves :hover stuck on
   the tapped strip; without the gate that strip would keep its tooltip while the finger
   dragged data-active onto another, painting two at once.

   touch-action: pan-y hands vertical swipes to the browser (the page still scrolls
   normally through the chart) and keeps horizontal ones for scrubbing. */
.b4u-ract-overlay[b-y99q0l40py] { position: absolute; inset: 0; touch-action: pan-y; }
.b4u-ract-hit[b-y99q0l40py] { position: absolute; top: 0; bottom: 0; }
.b4u-ract-hit[data-active][b-y99q0l40py] { z-index: 6; }

.b4u-ract-guide[b-y99q0l40py] {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: var(--b4u-border-hover); transform: translateX(-50%);
    opacity: 0; transition: opacity 0.12s;
}
.b4u-ract-dot[b-y99q0l40py] {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: var(--b4u-primary); border: 2px solid var(--b4u-bg-surface, #fff);
    transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.12s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.b4u-ract-hit[data-active] .b4u-ract-guide[b-y99q0l40py],
.b4u-ract-hit[data-active] .b4u-ract-dot[b-y99q0l40py] { opacity: 1; }

/* :not([data-scrubbing]) — a touchscreen laptop matches (hover: hover) as well, and there a
   tap leaves :hover stuck on the strip it landed on. chart-scrub.js flags the overlay for as
   long as a touch selection exists so the mouse path stands down while a finger is driving. */
@media (hover: hover) {
    .b4u-ract-overlay:not([data-scrubbing]) .b4u-ract-hit:hover[b-y99q0l40py] { z-index: 6; }
    .b4u-ract-overlay:not([data-scrubbing]) .b4u-ract-hit:hover .b4u-ract-guide[b-y99q0l40py],
    .b4u-ract-overlay:not([data-scrubbing]) .b4u-ract-hit:hover .b4u-ract-dot[b-y99q0l40py] { opacity: 1; }
}

/* Tooltip */
.b4u-ract-tip[b-y99q0l40py] {
    position: absolute; top: 8px; z-index: 7;
    min-width: 130px; max-width: 220px;
    background: var(--b4u-bg-surface, #fff);
    border: 1px solid var(--b4u-border);
    border-radius: 10px; padding: 9px 11px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    opacity: 0; transform: translateY(-3px); transition: opacity 0.12s, transform 0.12s;
    pointer-events: none;
}
.b4u-ract-hit[data-active] .b4u-ract-tip[b-y99q0l40py] { opacity: 1; transform: translateY(0); }
@media (hover: hover) {
    .b4u-ract-overlay:not([data-scrubbing]) .b4u-ract-hit:hover .b4u-ract-tip[b-y99q0l40py] { opacity: 1; transform: translateY(0); }
}

.b4u-ract-tip-date[b-y99q0l40py] { font-size: 11px; font-weight: 600; color: var(--b4u-text-muted); margin-bottom: 3px; }
.b4u-ract-tip-total[b-y99q0l40py] { font-size: 14px; font-weight: 700; color: var(--b4u-text); margin-bottom: 6px; }
.b4u-ract-tip-split[b-y99q0l40py] { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--b4u-text-secondary); }
.b4u-ract-tip-split span[b-y99q0l40py] { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.b4u-ract-tip-delta[b-y99q0l40py] { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--b4u-border); font-size: 12px; font-weight: 600; }
.b4u-ract-tip-delta--quiet[b-y99q0l40py] { color: var(--b4u-text-muted); font-weight: 500; }
.b4u-ract-d-add[b-y99q0l40py] { color: var(--b4u-success, #22C55E); }
.b4u-ract-d-rem[b-y99q0l40py] { color: #EF4444; }
.b4u-ract-d-mov[b-y99q0l40py] { color: #F59E0B; }

/* Swatches */
.b4u-ract-sw[b-y99q0l40py] { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.b4u-ract-sw--entries[b-y99q0l40py] { background: var(--b4u-primary); }
.b4u-ract-sw--players[b-y99q0l40py] { background: var(--ract-players); }
.b4u-ract-sw--teams[b-y99q0l40py] { background: var(--ract-teams); }
.b4u-ract-sw--waitlist[b-y99q0l40py] { background: var(--ract-waitlist); }

/* X axis */
.b4u-ract-xaxis[b-y99q0l40py] { position: relative; height: 16px; margin-top: 8px; }
.b4u-ract-xtick[b-y99q0l40py] {
    position: absolute; transform: translateX(-50%); white-space: nowrap;
    font-size: 11px; color: var(--b4u-text-muted); font-variant-numeric: tabular-nums;
}
.b4u-ract-xtick:first-child[b-y99q0l40py] { transform: none; }
.b4u-ract-xtick:last-child[b-y99q0l40py] { transform: translateX(-100%); }

/* Legend */
.b4u-ract-legend[b-y99q0l40py] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.b4u-ract-leg[b-y99q0l40py] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--b4u-text-secondary); }
.b4u-ract-leg--hint[b-y99q0l40py] { margin-left: auto; color: var(--b4u-text-muted); font-size: 12px; }

@media (max-width: 560px) {
    .b4u-ract-plot[b-y99q0l40py] { height: 180px; }
    .b4u-ract-xtick[b-y99q0l40py] { font-size: 10px; }
    .b4u-ract-leg--hint[b-y99q0l40py] { display: none; }
    .b4u-ract-tip[b-y99q0l40py] { min-width: 120px; }
}

/* Draw the lines left-to-right and fade the area in when the chart scrolls in.
   pathLength="1" normalizes each path so dasharray/offset of 1 == the whole line.
   The waitlist line is intentionally dashed (stroke-dasharray: 5 3) and has no
   pathLength="1", so it is excluded from the draw animation to avoid breaking its
   dash pattern. It appears immediately while the other lines draw in. */
.b4u-ract-line[b-y99q0l40py] { stroke-dasharray: none; }
.b4u-ract-line--waitlist[b-y99q0l40py] { stroke-dasharray: 5 3; }

/* Left-to-right reveal wipe. Earlier attempts animated the line <path> elements'
   stroke-dashoffset, but those paths re-render constantly (live registration feed),
   which restarted the animation so it never finished — freezing each line at its
   staggered offset. This instead animates a clip-path on the STABLE <svg> element:
   its path children re-render, but the svg element itself does not, so the wipe plays
   once to completion and can't be restarted or frozen. It reveals the lines and area
   together, sweeping in from the left. Pure CSS — JS off means no clip (shown at
   once). The overlay/tooltips are siblings of the svg, so they are never clipped. */
@keyframes b4u-ract-wipe-b-y99q0l40py { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html.b4u-reveal-ready:not(.b4u-reveal-reduced) .b4u-ract-plot[data-inview]:not(.is-in) .b4u-ract-svg[b-y99q0l40py] { clip-path: inset(0 100% 0 0); }
html.b4u-reveal-ready:not(.b4u-reveal-reduced) .b4u-ract-plot.is-in .b4u-ract-svg[b-y99q0l40py] { animation: b4u-ract-wipe-b-y99q0l40py 1.1s cubic-bezier(.4, 0, .2, 1) both; }
/* /Components/Events/SquadDetail.razor.rz.scp.css */
.b4u-sd-head[b-11790gp8l3] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.b4u-sd-crumb[b-11790gp8l3] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b4u-sd-back[b-11790gp8l3] { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--b4u-primary); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 0; }
.b4u-sd-flip[b-11790gp8l3] { display: inline-flex; transform: rotate(180deg); }
.b4u-sd-sep[b-11790gp8l3] { color: var(--b4u-text-muted); font-size: 14px; }
.b4u-sd-name[b-11790gp8l3] { font-size: 14px; font-weight: 600; color: var(--b4u-text); }
.b4u-sd-chip-cat[b-11790gp8l3] { background: var(--b4u-primary-light); color: var(--b4u-primary); padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.b4u-sd-live[b-11790gp8l3] { display: inline-flex; align-items: center; gap: 5px; background: rgba(34,197,94,0.12); color: var(--b4u-success); padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.b4u-live-dot[b-11790gp8l3] { width: 7px; height: 7px; border-radius: 50%; background: var(--b4u-success); box-shadow: 0 0 6px var(--b4u-success); }
.b4u-sd-nav[b-11790gp8l3] { display: flex; gap: 6px; }
.b4u-sd-navbtn[b-11790gp8l3] { display: inline-flex; align-items: center; gap: 4px; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--b4u-text-secondary); cursor: pointer; font-family: inherit; }
.b4u-sd-navbtn:disabled[b-11790gp8l3] { opacity: 0.4; cursor: default; }

.b4u-sd-summary[b-11790gp8l3] { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 12px; padding: 14px 20px; margin-bottom: 24px; }
.b4u-sd-sumitem[b-11790gp8l3] { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--b4u-text-secondary); }
.b4u-sd-sumitem.is-strong[b-11790gp8l3] { color: var(--b4u-text); font-weight: 600; }
.b4u-sd-price-main[b-11790gp8l3] { font-weight: 700; color: var(--b4u-text); }
.b4u-sd-price-rest[b-11790gp8l3] { font-weight: 700; color: var(--b4u-success); }
.b4u-sd-closed[b-11790gp8l3] { background: rgba(239,68,68,0.1); color: var(--b4u-danger); padding: 3px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; }

.b4u-sd-switch[b-11790gp8l3] { display: flex; gap: 4px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; }
.b4u-sd-chip[b-11790gp8l3] { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; background: var(--b4u-bg-surface); color: var(--b4u-text-secondary); border: 1px solid var(--b4u-border); transition: all 0.15s; }
.b4u-sd-chip.is-active[b-11790gp8l3] { background: var(--b4u-primary); color: #fff; border-color: var(--b4u-primary); }
.b4u-sd-chip-time[b-11790gp8l3] { font-size: 10px; opacity: 0.7; }

.b4u-sd-tablewrap[b-11790gp8l3] { border: 1px solid var(--b4u-border); border-radius: 12px; overflow: hidden; }
.b4u-sd-table[b-11790gp8l3] { width: 100%; border-collapse: collapse; font-size: 14px; }
.b4u-sd-table thead tr[b-11790gp8l3] { background: var(--b4u-bg-surface); }
.b4u-sd-table th[b-11790gp8l3] { padding: 12px 16px; text-align: left; color: var(--b4u-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.b4u-sd-table td[b-11790gp8l3] { padding: 12px 16px; border-top: 1px solid var(--b4u-border); }
.b4u-sd-num[b-11790gp8l3] { color: var(--b4u-text-muted); font-weight: 500; }
.b4u-sd-player[b-11790gp8l3] { display: flex; align-items: center; gap: 10px; }
.b4u-sd-avatar[b-11790gp8l3] { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.b4u-sd-avatar.is-anon[b-11790gp8l3] { background: var(--b4u-bg-surface); color: var(--b4u-text-muted); }
.b4u-sd-pname[b-11790gp8l3] { font-weight: 500; color: var(--b4u-text); }
.b4u-sd-gender[b-11790gp8l3] { color: var(--b4u-text-secondary); }
.b4u-sd-wl[b-11790gp8l3] { background: rgba(245,158,11,0.1); color: #F59E0B; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.b4u-sd-wlrow td[b-11790gp8l3] { opacity: 0.7; }
.b4u-sd-wldivider td[b-11790gp8l3] { padding: 10px 16px; background: rgba(245,158,11,0.06); border-top: 2px dashed #F59E0B; }
.b4u-sd-wlhead[b-11790gp8l3] { display: flex; align-items: center; gap: 8px; color: #F59E0B; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.b4u-sd-empty[b-11790gp8l3] { padding: 32px 16px !important; text-align: center; color: var(--b4u-text-muted); }

/* Manager-only "pending confirmation" group: same amber token as the waitlist divider/badge above,
   but a distinct chip label ("Pending" vs "WL") so the two states never read as the same thing. */
.b4u-sd-penddivider td[b-11790gp8l3] { padding: 10px 16px; background: rgba(245,158,11,0.06); border-top: 2px dashed #F59E0B; }
.b4u-sd-pendhead[b-11790gp8l3] { display: flex; align-items: center; gap: 8px; color: #F59E0B; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.b4u-sd-pendrow td[b-11790gp8l3] { background: rgba(245,158,11,0.045); }
.b4u-sd-pend[b-11790gp8l3] { background: rgba(245,158,11,0.14); color: #F59E0B; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; }

.b4u-sd-pendctl[b-11790gp8l3] { display: inline-flex; align-items: center; margin-left: 8px; }
.b4u-sd-pendbtn[b-11790gp8l3] { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; cursor: pointer; font-family: inherit; }
.b4u-sd-pendbtn.is-open[b-11790gp8l3] { background: #F59E0B; color: #fff; padding: 4px 12px; font-size: 11px; font-weight: 700; }
.b4u-sd-pendbtn.is-open:hover[b-11790gp8l3] { background: #D97706; }
.b4u-sd-pendbtn.is-cancel[b-11790gp8l3] { background: transparent; color: var(--b4u-text-muted); padding: 5px; }
.b4u-sd-pendbtn.is-cancel:hover[b-11790gp8l3] { color: var(--b4u-text); }
.b4u-sd-pendbtn.is-confirm[b-11790gp8l3] { background: #F59E0B; color: #fff; padding: 5px; }
.b4u-sd-pendbtn.is-confirm:hover[b-11790gp8l3] { background: #D97706; }
.b4u-sd-pendbtn:disabled[b-11790gp8l3] { opacity: 0.55; cursor: default; }

.b4u-sd-pendpop[b-11790gp8l3] { display: inline-flex; align-items: center; gap: 4px; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 8px; padding: 3px; }
.b4u-sd-pendinput[b-11790gp8l3] { border: none; background: transparent; padding: 4px 8px; font-size: 12px; font-family: inherit; width: 150px; color: var(--b4u-text); }
.b4u-sd-pendinput:focus[b-11790gp8l3] { outline: none; }
.b4u-sd-placeholder[b-11790gp8l3] { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--b4u-text-muted); border: 1px dashed var(--b4u-border); border-radius: 14px; }
.b4u-sd-skel[b-11790gp8l3] { padding: 8px 0; }

.b4u-sd-tmrow[b-11790gp8l3] { cursor: pointer; }
.b4u-sd-tmrow:hover td[b-11790gp8l3] { background: var(--b4u-bg-card-hover); }
.b4u-sd-tmchev[b-11790gp8l3] { display: inline-flex; color: var(--b4u-text-muted); transition: transform 0.2s; margin-left: 4px; }
.b4u-sd-tmchev.is-open[b-11790gp8l3] { transform: rotate(180deg); }
.b4u-sd-tmdetail td[b-11790gp8l3] { padding: 4px 16px 16px 58px; background: var(--b4u-bg-surface); border-top: none; }
.b4u-sd-troster[b-11790gp8l3] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.b4u-sd-tmember[b-11790gp8l3] { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.b4u-sd-tmmark[b-11790gp8l3] { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(34,197,94,0.15); color: #22C55E; }
.b4u-sd-tmember.is-pending .b4u-sd-tmmark[b-11790gp8l3] { background: var(--b4u-bg-card); border: 1px dashed var(--b4u-text-muted); color: transparent; }
.b4u-sd-tmember.is-resv .b4u-sd-tmmark[b-11790gp8l3] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); color: var(--b4u-text-muted); }
.b4u-sd-tmname[b-11790gp8l3] { color: var(--b4u-text); font-weight: 500; }
.b4u-sd-tmslot[b-11790gp8l3] { width: 20px; height: 20px; border-radius: 50%; background: var(--b4u-bg-card); border: 1px dashed var(--b4u-text-muted); flex-shrink: 0; }
.b4u-sd-tmempty[b-11790gp8l3] { color: var(--b4u-text-muted); font-style: italic; font-size: 13px; }
.b4u-sd-tresv[b-11790gp8l3] { margin-top: 14px; }
.b4u-sd-tresv-h[b-11790gp8l3] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--b4u-text-muted); margin-bottom: 8px; }

/* /Components/Federations/FederationCard.razor.rz.scp.css */
.b4u-fedcard[b-hqgbkyg426] { display: block; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border);
    border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .25s, border-color .25s, box-shadow .25s; }
.b4u-fedcard:hover[b-hqgbkyg426] { transform: translateY(-6px); border-color: var(--b4u-border-hover, var(--b4u-primary));
    box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.b4u-fedcard-band[b-hqgbkyg426] { position: relative; height: 120px;
    background: linear-gradient(135deg, var(--fed), color-mix(in srgb, var(--fed) 80%, black));
    display: flex; align-items: center; justify-content: center; }
/* When the federation has a banner image, use it as a cover instead of the small logo. */
.b4u-fedcard-band.has-banner[b-hqgbkyg426] { background-size: cover; background-position: center; background-repeat: no-repeat; }
.b4u-fedcard-band.has-banner[b-hqgbkyg426]::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 45%, rgba(0,0,0,.10)); }
.b4u-fedcard-flag[b-hqgbkyg426] { position: absolute; top: 14px; right: 16px; font-size: 26px; z-index: 1; }
.b4u-fedcard-logo[b-hqgbkyg426] { max-height: 56px; max-width: 70%; object-fit: contain; }
.b4u-fedcard-initials[b-hqgbkyg426] { display: block; font-size: 30px; font-weight: 800; color: #fff; letter-spacing: .02em; }
/* Fallback swap — see /app/image-fallback.js. */
.b4u-fedcard-initials.is-hidden[b-hqgbkyg426] { display: none; }
[data-b4u-noimg] .b4u-fedcard-initials.is-hidden[b-hqgbkyg426] { display: block; }
.b4u-fedcard-body[b-hqgbkyg426] { padding: 18px 20px 20px; }
.b4u-fedcard-name[b-hqgbkyg426] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin: 0; }
.b4u-fedcard-full[b-hqgbkyg426] { font-size: 13px; color: var(--b4u-text-muted); margin: 4px 0 0; line-height: 1.4; }
.b4u-fedcard-season[b-hqgbkyg426] { font-size: 12.5px; color: var(--b4u-text-muted); margin: 8px 0 0; font-weight: 600; }
.b4u-fedcard-stats[b-hqgbkyg426] { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--b4u-border); }
.b4u-fedcard-stat[b-hqgbkyg426] { font-size: 13px; color: var(--b4u-text-muted); }
.b4u-fedcard-stat strong[b-hqgbkyg426] { color: var(--b4u-text); font-weight: 700; }
/* /Components/Filters/ActiveFilterChips.razor.rz.scp.css */
.b4u-fchips[b-jjy5jcxtm2] {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    min-height: 30px; margin: 14px 0 18px;
}
.b4u-fchips-none[b-jjy5jcxtm2] { font-size: 12.5px; color: var(--b4u-text-muted); }
.b4u-fchips-active[b-jjy5jcxtm2] { font-size: 12.5px; color: var(--b4u-text-muted); font-weight: 600; }
.b4u-fchip[b-jjy5jcxtm2] {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 999px;
    padding: 5px 6px 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--b4u-text);
}
.b4u-fchip-x[b-jjy5jcxtm2] {
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
    background: var(--b4u-bg-surface); border-radius: 50%; width: 18px; height: 18px;
    color: var(--b4u-text-muted); padding: 0;
}
.b4u-fchip-x:hover[b-jjy5jcxtm2] { background: var(--b4u-border-hover); color: var(--b4u-text); }
.b4u-fchips-clear[b-jjy5jcxtm2] {
    display: inline-flex; align-items: center; gap: 5px; background: none; border: none;
    color: var(--b4u-primary); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.b4u-fchips-clear:hover[b-jjy5jcxtm2] { text-decoration: underline; }
/* /Components/Filters/FilterCheckList.razor.rz.scp.css */
.b4u-fcl-list[b-v4p1ed9pwb] { max-height: 280px; overflow-y: auto; padding: 6px 0; }
.b4u-fcl-row[b-v4p1ed9pwb] {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 9px 14px; background: transparent; border: none; cursor: pointer;
    font-family: inherit; color: var(--b4u-text);
}
.b4u-fcl-row:hover[b-v4p1ed9pwb] { background: var(--b4u-bg-card-hover); }
.b4u-fcl-row--on[b-v4p1ed9pwb] { background: var(--b4u-primary-light); }
.b4u-fcl-box[b-v4p1ed9pwb] {
    width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--b4u-border-hover); background: transparent; color: #fff;
}
.b4u-fcl-box--on[b-v4p1ed9pwb] { border-color: var(--b4u-primary); background: var(--b4u-primary); }
.b4u-fcl-label[b-v4p1ed9pwb] { flex: 1; font-size: 13.5px; font-weight: 500; }
.b4u-fcl-row--on .b4u-fcl-label[b-v4p1ed9pwb] { color: var(--b4u-primary); font-weight: 700; }
.b4u-fcl-count[b-v4p1ed9pwb] { font-size: 12px; color: var(--b4u-text-muted); font-variant-numeric: tabular-nums; }
.b4u-fcl-footer[b-v4p1ed9pwb] { border-top: 1px solid var(--b4u-border); padding: 10px; }
.b4u-fcl-clear[b-v4p1ed9pwb] {
    width: 100%; padding: 8px; border-radius: 8px; cursor: pointer; font-family: inherit;
    background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border);
    color: var(--b4u-text); font-size: 12.5px; font-weight: 600;
}
.b4u-fcl-clear:hover[b-v4p1ed9pwb] { background: var(--b4u-bg-card-hover); }
/* /Components/Filters/FilterDropdown.razor.rz.scp.css */
.b4u-fdd[b-51adky60n3] { position: relative; }
.b4u-fdd-trigger[b-51adky60n3] {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    background: var(--b4u-bg-card); color: var(--b4u-text-secondary);
    border: 1.5px solid var(--b4u-border); border-radius: 10px; padding: 8px 12px;
    font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s;
}
.b4u-fdd-trigger:hover[b-51adky60n3] { border-color: var(--b4u-border-hover); }
.b4u-fdd-trigger--active[b-51adky60n3] {
    background: var(--b4u-primary-light); color: var(--b4u-primary); border-color: var(--b4u-primary);
}
.b4u-fdd-trigger--active .b4u-icon[b-51adky60n3] { color: var(--b4u-primary); }
.b4u-fdd-label[b-51adky60n3] { line-height: 1; }
.b4u-fdd-badge[b-51adky60n3] {
    background: var(--b4u-primary); color: #fff; font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
}
.b4u-fdd-chevron[b-51adky60n3] { display: inline-flex; transition: transform .2s; }
.b4u-fdd-chevron--open[b-51adky60n3] { transform: rotate(180deg); }
.b4u-fdd-panel[b-51adky60n3] {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
    max-width: calc(100vw - 32px);
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border);
    border-radius: 14px; box-shadow: 0 16px 44px rgba(15,23,42,0.16); overflow: hidden;
}
/* /Components/Filters/FilterRadioList.razor.rz.scp.css */
.b4u-frl[b-i7jbpigm9u] { max-height: 280px; overflow-y: auto; }
.b4u-frl-row[b-i7jbpigm9u] {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 9px 14px; background: transparent; border: none; cursor: pointer;
    font-family: inherit; color: var(--b4u-text);
}
.b4u-frl-row:hover[b-i7jbpigm9u] { background: var(--b4u-bg-card-hover); }
.b4u-frl-row--on[b-i7jbpigm9u] { background: var(--b4u-primary-light); }
.b4u-frl-row--on:hover[b-i7jbpigm9u] { background: var(--b4u-primary-light); }
.b4u-frl-radio[b-i7jbpigm9u] {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--b4u-border-hover); background: transparent;
}
.b4u-frl-radio--on[b-i7jbpigm9u] {
    border-color: var(--b4u-primary); background: var(--b4u-primary);
    box-shadow: inset 0 0 0 3px var(--b4u-bg-card);
}
.b4u-frl-label[b-i7jbpigm9u] { flex: 1; font-size: 13.5px; font-weight: 500; }
.b4u-frl-row--on .b4u-frl-label[b-i7jbpigm9u] { color: var(--b4u-primary); font-weight: 700; }
.b4u-frl-count[b-i7jbpigm9u] { font-size: 12px; color: var(--b4u-text-muted); font-variant-numeric: tabular-nums; }
/* /Components/Filters/FilterSegmented.razor.rz.scp.css */
.b4u-fseg[b-27sb3a4jc2] {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 10px;
}
.b4u-fseg-opt[b-27sb3a4jc2] {
    border: none; border-radius: 7px; padding: 6px 13px;
    font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
    background: transparent; color: var(--b4u-text-muted); transition: all .15s;
}
.b4u-fseg-opt:hover[b-27sb3a4jc2] { color: var(--b4u-text-secondary); }
.b4u-fseg-opt--on[b-27sb3a4jc2] {
    background: var(--b4u-bg-card); color: var(--b4u-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.b4u-fseg-opt:focus-visible[b-27sb3a4jc2] { outline: 2px solid var(--b4u-primary); outline-offset: 2px; }

/* Touch-sized variant for the mobile filter sheet: same visual language, a tap target that
   clears 40px, and enough room for the longer localized labels a phone has to wrap. */
.b4u-fseg--lg[b-27sb3a4jc2] { border-radius: 12px; max-width: 100%; flex-wrap: wrap; }
.b4u-fseg--lg .b4u-fseg-opt[b-27sb3a4jc2] { padding: 10px 16px; font-size: 13.5px; font-weight: 700; }
/* /Components/Filters/FilterSheetRows.razor.rz.scp.css */
/* Drill-in filter rows inside the mobile filter sheet. */

.b4u-msheet-rows[b-3qi7155lho] {
    margin-top: 10px;
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--b4u-bg-input);
}

.b4u-frow[b-3qi7155lho] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--b4u-border);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.b4u-frow:last-child[b-3qi7155lho] { border-bottom: none; }

.b4u-frow:hover[b-3qi7155lho],
.b4u-frow:active[b-3qi7155lho] { background: var(--b4u-bg-card-hover); }

/* Inset so the ring isn't clipped by the group's overflow:hidden. */
.b4u-frow:focus-visible[b-3qi7155lho] { outline: 2px solid var(--b4u-primary); outline-offset: -2px; }

.b4u-frow-label[b-3qi7155lho] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--b4u-text);
    white-space: nowrap;
}

/* Takes the slack so the chevron pins right and a long value ellipsises rather than wraps. */
.b4u-frow-value[b-3qi7155lho] {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b4u-frow-value.is-set[b-3qi7155lho] {
    color: var(--b4u-primary);
    font-weight: 700;
}

.b4u-frow-chev[b-3qi7155lho] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--b4u-text-muted);
}
/* /Components/Filters/FilterSheetSearch.razor.rz.scp.css */
.b4u-fsearch[b-84iujfcakt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--b4u-bg-input);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
    color: var(--b4u-text-muted);
}

.b4u-fsearch:focus-within[b-84iujfcakt] { border-color: var(--b4u-primary); }

.b4u-fsearch-input[b-84iujfcakt] {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--b4u-text);
    font-size: 15px;
    font-family: inherit;
}

.b4u-fsearch-input[b-84iujfcakt]::placeholder { color: var(--b4u-text-muted); }
/* /Components/Filters/FilterSheetSort.razor.rz.scp.css */
.b4u-fsort[b-3lpibd1878] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Pinned to the trailing edge so the direction toggle always sits in the same place, whatever
   the localized sort labels do to the segmented control's width. */
.b4u-fsort-dir[b-3lpibd1878] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    flex-shrink: 0;
    margin-left: auto;
    border-radius: 12px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text-secondary);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.b4u-fsort-dir:hover[b-3lpibd1878] {
    border-color: var(--b4u-border-hover);
    color: var(--b4u-text);
}

.b4u-fsort-dir:focus-visible[b-3lpibd1878] {
    outline: 2px solid var(--b4u-primary);
    outline-offset: 2px;
}
/* /Components/Filters/FilterToggleButton.razor.rz.scp.css */
.b4u-ftgl[b-5l251nx5nh] {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    background: var(--b4u-bg-card); color: var(--b4u-text-secondary);
    border: 1.5px solid var(--b4u-border); border-radius: 10px; padding: 8px 12px;
    cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: all .15s;
}
.b4u-ftgl:hover[b-5l251nx5nh] { border-color: var(--b4u-border-hover); }
.b4u-ftgl--on[b-5l251nx5nh] {
    background: var(--b4u-primary-light); color: var(--b4u-primary); border-color: var(--b4u-primary);
}
.b4u-ftgl--on .b4u-icon[b-5l251nx5nh] { color: var(--b4u-primary); }
/* /Components/Filters/FilterToolbar.razor.rz.scp.css */
/* Desktop-only. Breakpoint 900px is mirrored in EventsFiltersFab.razor.css — keep in sync. */
.b4u-ftoolbar[b-fnb8fsqpzp] { display: none; }
@media (min-width: 900px) {
    .b4u-ftoolbar[b-fnb8fsqpzp] {
        display: block; position: sticky; top: 64px; z-index: 40;
        padding: 14px 0; margin-bottom: 2px;
        background: color-mix(in srgb, var(--b4u-bg) 86%, transparent);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--b4u-border);
    }
}
.b4u-ftoolbar-row[b-fnb8fsqpzp] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* /Components/Filters/FilterVenueList.razor.rz.scp.css */
.b4u-fvl-search[b-rqnjbuko6v] {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    border-bottom: 1px solid var(--b4u-border); color: var(--b4u-text-muted);
}
.b4u-fvl-search-input[b-rqnjbuko6v] {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 13.5px; font-family: inherit; color: var(--b4u-text);
}
.b4u-fvl-list[b-rqnjbuko6v] { max-height: 260px; overflow-y: auto; }
.b4u-fvl-empty[b-rqnjbuko6v] { padding: 16px; text-align: center; color: var(--b4u-text-muted); font-size: 13px; }
.b4u-fvl-row[b-rqnjbuko6v] {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 9px 14px; background: transparent; border: none; cursor: pointer;
    font-family: inherit; color: var(--b4u-text);
}
.b4u-fvl-row:hover[b-rqnjbuko6v] { background: var(--b4u-bg-card-hover); }
.b4u-fvl-row--on[b-rqnjbuko6v] { background: var(--b4u-primary-light); }
.b4u-fvl-text[b-rqnjbuko6v] { flex: 1; min-width: 0; }
.b4u-fvl-name[b-rqnjbuko6v] {
    display: block; font-size: 13.5px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b4u-fvl-row--on .b4u-fvl-name[b-rqnjbuko6v] { color: var(--b4u-primary); font-weight: 700; }
.b4u-fvl-sub[b-rqnjbuko6v] { display: block; font-size: 11.5px; color: var(--b4u-text-muted); }
.b4u-fvl-row--on .b4u-icon[b-rqnjbuko6v] { color: var(--b4u-primary); }
/* /Components/Filters/MobileFilterSheet.razor.rz.scp.css */
/* MOBILE FILTER SHEET — shared bottom sheet for the public listings.
   Ported from Bowl4U.Listing's MobileFilterSheet (FFBSQ). */

@keyframes b4uSheetFade-b-3c1zn9alhe {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes b4uSheetUp-b-3c1zn9alhe {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.b4u-msheet[b-3c1zn9alhe] {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.b4u-msheet-scrim[b-3c1zn9alhe] {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 18, .58);
    animation: b4uSheetFade-b-3c1zn9alhe .2s ease-out both;
}

/* Flex column so the header, drill search and footer pin while only the body scrolls — the panel
   hugs its content up to 92vh, then the body takes the overflow. Without this the "View results"
   button scrolls away and the count it carries stops being visible while filtering. */
.b4u-msheet-panel[b-3c1zn9alhe] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    background: var(--b4u-bg-elevated);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 40px rgba(2, 6, 18, .28);
    animation: b4uSheetUp-b-3c1zn9alhe .28s cubic-bezier(.2, .75, .35, 1) both;
}

.b4u-msheet-grip[b-3c1zn9alhe] {
    display: flex;
    justify-content: center;
    padding: 9px 0 3px;
    flex-shrink: 0;
}

.b4u-msheet-grip span[b-3c1zn9alhe] {
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: var(--b4u-border-hover);
}

.b4u-msheet-head[b-3c1zn9alhe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 13px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--b4u-border);
}

.b4u-msheet-title[b-3c1zn9alhe] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--b4u-text);
}

/* On the drill screen a back arrow leads the row and the close button trails it. The header is
   symmetric, so flex:1 + text-align already lands the title on the panel's centre line — nudging
   it by the trailing button's width (as the FFBSQ original does) pushes it off by that much. */
.b4u-msheet-title--centered[b-3c1zn9alhe] { text-align: center; }

.b4u-msheet-icon[b-3c1zn9alhe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text-secondary);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.b4u-msheet-icon:hover[b-3c1zn9alhe] {
    border-color: var(--b4u-border-hover);
    color: var(--b4u-text);
}

.b4u-msheet-icon:focus-visible[b-3c1zn9alhe] {
    outline: 2px solid var(--b4u-primary);
    outline-offset: 2px;
}

.b4u-msheet-body[b-3c1zn9alhe] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px 8px;
}

/* ---- Main screen sections ---- */

.b4u-msheet-sec[b-3c1zn9alhe] { margin-bottom: 22px; }

.b4u-msheet-sec:last-child[b-3c1zn9alhe] { margin-bottom: 4px; }

.b4u-msheet-label[b-3c1zn9alhe] {
    margin: 0 2px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
}

/* ---- Drill-in sub-screen ---- */

.b4u-msheet-search[b-3c1zn9alhe] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 16px 4px;
    padding: 0 12px;
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
    background: var(--b4u-bg-input);
    color: var(--b4u-text-muted);
    flex-shrink: 0;
    animation: b4uSheetFade-b-3c1zn9alhe .18s ease-out both;
}

.b4u-msheet-search:focus-within[b-3c1zn9alhe] { border-color: var(--b4u-primary); }

.b4u-msheet-search-input[b-3c1zn9alhe] {
    flex: 1;
    min-width: 0;
    padding: 11px 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--b4u-text);
}

.b4u-msheet-search-input[b-3c1zn9alhe]::placeholder { color: var(--b4u-text-muted); }

.b4u-msheet-list[b-3c1zn9alhe] { animation: b4uSheetFade-b-3c1zn9alhe .18s ease-out both; }

.b4u-msheet-opt[b-3c1zn9alhe] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--b4u-border);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.b4u-msheet-opt:last-child[b-3c1zn9alhe] { border-bottom: none; }

.b4u-msheet-opt:hover[b-3c1zn9alhe],
.b4u-msheet-opt:active[b-3c1zn9alhe] { background: var(--b4u-bg-card-hover); }

.b4u-msheet-opt:focus-visible[b-3c1zn9alhe] { outline: 2px solid var(--b4u-primary); outline-offset: -2px; }

.b4u-msheet-mark[b-3c1zn9alhe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    border: 1.5px solid var(--b4u-border-hover);
    color: #fff;
    transition: background .12s, border-color .12s;
}

.b4u-msheet-mark.is-check[b-3c1zn9alhe] { border-radius: 6px; }

.b4u-msheet-mark.is-radio[b-3c1zn9alhe] { border-radius: 50%; }

.b4u-msheet-opt.is-sel .b4u-msheet-mark[b-3c1zn9alhe] {
    background: var(--b4u-primary);
    border-color: var(--b4u-primary);
}

/* A selected radio reads as a filled ring rather than a glyph. */
.b4u-msheet-opt.is-sel .b4u-msheet-mark.is-radio[b-3c1zn9alhe] {
    box-shadow: inset 0 0 0 3px var(--b4u-bg-elevated);
}

/* The flag lives in the CountryFlag component, so it needs ::deep to reach. Without the shrink
   guard a long venue name squeezes it into a sliver — the label absorbs the overflow instead.
   Sized explicitly (4:3, as flag-icon renders) rather than left at its em-relative default, so
   the placeholder below can match it exactly. */
.b4u-msheet-opt[b-3c1zn9alhe]  .b4u-flag {
    flex-shrink: 0;
    width: 20px;
    height: 15px;
}

/* Rows without a flag (the "all" row, or an option missing a country) keep the gutter, so every
   label in a flagged list starts on the same left edge. */
.b4u-msheet-flagpad[b-3c1zn9alhe] {
    width: 20px;
    flex-shrink: 0;
}

.b4u-msheet-opt-text[b-3c1zn9alhe] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.b4u-msheet-opt-label[b-3c1zn9alhe] {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--b4u-text);
}

.b4u-msheet-opt.is-sel .b4u-msheet-opt-label[b-3c1zn9alhe] { font-weight: 700; }

.b4u-msheet-opt-sub[b-3c1zn9alhe] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--b4u-text-muted);
}

.b4u-msheet-opt-count[b-3c1zn9alhe] {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--b4u-text-muted);
}

.b4u-msheet-note[b-3c1zn9alhe] {
    padding: 16px 6px;
    font-size: 13px;
    color: var(--b4u-text-muted);
}

/* ---- Sticky footer ---- */

.b4u-msheet-foot[b-3c1zn9alhe] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--b4u-border);
    background: var(--b4u-bg-elevated);
}

.b4u-msheet-clear[b-3c1zn9alhe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 14px 18px;
    border-radius: 13px;
    background: transparent;
    border: 1px solid var(--b4u-border-hover);
    color: var(--b4u-text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, opacity .15s;
}

.b4u-msheet-clear:disabled[b-3c1zn9alhe] {
    opacity: .4;
    cursor: default;
}

.b4u-msheet-clear:not(:disabled):hover[b-3c1zn9alhe] { border-color: var(--b4u-text-muted); }

.b4u-msheet-apply[b-3c1zn9alhe] {
    flex: 1;
    padding: 14px 18px;
    border-radius: 13px;
    background: var(--b4u-primary);
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: background .15s;
}

.b4u-msheet-apply:hover[b-3c1zn9alhe] { background: var(--b4u-primary-hover); }

.b4u-msheet-clear:focus-visible[b-3c1zn9alhe],
.b4u-msheet-apply:focus-visible[b-3c1zn9alhe] {
    outline: 2px solid var(--b4u-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .b4u-msheet-panel[b-3c1zn9alhe],
    .b4u-msheet-scrim[b-3c1zn9alhe],
    .b4u-msheet-search[b-3c1zn9alhe],
    .b4u-msheet-list[b-3c1zn9alhe] {
        animation: none !important;
    }
}
/* /Components/Home/HomePanel.razor.rz.scp.css */
/* Frosted glass, sized to sit inside the dark hero. */
.panel[b-wmla3ikwmf] {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 16px 16px 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: left;
    min-width: 0;
}

.head[b-wmla3ikwmf] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.head[b-wmla3ikwmf]  svg { color: var(--b4u-primary); flex-shrink: 0; }

.title[b-wmla3ikwmf] {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    font-family: var(--b4u-font-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* white-space:nowrap is required, not cosmetic: "Alle Ergebnisse" wraps under the title
   at panel widths and drags the header to two lines. */
.all[b-wmla3ikwmf] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}

.all:hover[b-wmla3ikwmf] { color: var(--b4u-primary); text-decoration: none; }
.all[b-wmla3ikwmf]  svg { color: currentColor; }

.rows[b-wmla3ikwmf] { display: flex; flex-direction: column; gap: 6px; }
/* /Components/Home/HomePanelEventRow.razor.rz.scp.css */
/* flex-start, not center: the name may wrap to two lines, and the pill must stay at the top
   of the row beside the name's first line rather than floating to the vertical middle. */
.row[b-y94ozm79t2] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 11px;
    padding: 11px 13px;
    min-width: 0;
    text-decoration: none;
    transition: background .15s;
}

.row:hover[b-y94ozm79t2] { background: rgba(255, 255, 255, 0.10); text-decoration: none; }

/* The flag is baseline-nudged so it sits with the name's first line, not the body's top. */
.row[b-y94ozm79t2]  .b4u-flag { margin-top: 1px; flex-shrink: 0; }

.body[b-y94ozm79t2] { flex: 1; min-width: 0; }

/* Wraps to at most two lines: full name when there is room, wrapped when the column is
   narrow, ellipsis only past the second line — so the name is never lost to a single-line
   clip. -webkit-line-clamp is the cross-browser idiom and needs the three companion props. */
.name[b-y94ozm79t2] {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.venue[b-y94ozm79t2],
.citydate[b-y94ozm79t2] {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Literal colours, deliberately not tokens — the handoff calls these out as intentional.
   margin-top:1px aligns the pill with the name's first line under align-items:flex-start. */
.spots[b-y94ozm79t2] {
    flex-shrink: 0;
    margin-top: 1px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spots.is-ok[b-y94ozm79t2]   { color: #22C55E; background: #22C55E1A; border: 1px solid #22C55E44; }
.spots.is-warn[b-y94ozm79t2] { color: #EAB308; background: #EAB3081A; border: 1px solid #EAB30844; }
.spots.is-full[b-y94ozm79t2] { color: #EF4444; background: #EF44441A; border: 1px solid #EF444444; }
/* /Components/Home/HomePanelResultRow.razor.rz.scp.css */
.row[b-vtl735zkhz] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 11px;
    padding: 11px 13px;
    min-width: 0;
    text-decoration: none;
    transition: background .15s;
}

.row:hover[b-vtl735zkhz] { background: rgba(255, 255, 255, 0.10); text-decoration: none; }

.body[b-vtl735zkhz] { flex: 1; min-width: 0; }

.name[b-vtl735zkhz] {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta[b-vtl735zkhz] {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ago[b-vtl735zkhz] {
    flex-shrink: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.40);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Home/HomePanels.razor.rz.scp.css */
/* auto-fit collapses to one column below ~632px without a media query. */
.grid[b-4e4j5b6c1v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    width: 100%;
}

/* Approximates a real row's footprint (name bar + meta bar), so the hero's reflow
   when data lands is minimal. Event rows (up to 2-line names) and result rows differ
   in exact height, so this can't be pixel-identical to either -- it targets "close
   enough that the jump isn't noticeable", not exact equality. */
.skel[b-4e4j5b6c1v] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 11px;
    padding: 11px 13px;
}
/* /Components/Layout/Footer.razor.rz.scp.css */
.b4u-footer[b-7gpjulxtnn] {
    background: var(--b4u-bg-surface);
    border-top: 1px solid var(--b4u-border);
    padding: 48px 0 24px;
}
.b4u-footer-grid[b-7gpjulxtnn] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px; margin-bottom: 32px;
}
.b4u-footer-logo[b-7gpjulxtnn] { margin-bottom: 12px; }
.b4u-footer-tagline[b-7gpjulxtnn] { color: var(--b4u-text-muted); font-size: 13px; line-height: 1.6; margin: 0; }
.b4u-footer-h[b-7gpjulxtnn] {
    color: var(--b4u-text-secondary); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px;
}
.b4u-footer-link[b-7gpjulxtnn] { display: block; color: var(--b4u-text-muted); font-size: 14px; text-decoration: none; margin-bottom: 8px; }
.b4u-footer-link:hover[b-7gpjulxtnn] { color: var(--b4u-text); }
.b4u-footer-bottom[b-7gpjulxtnn] {
    border-top: 1px solid var(--b4u-border); padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.b4u-footer-copy[b-7gpjulxtnn] { color: var(--b4u-text-muted); font-size: 13px; }
.b4u-footer-controls[b-7gpjulxtnn] { display: flex; align-items: center; gap: 12px; }
/* /Components/Layout/LanguageSelector.razor.rz.scp.css */
.b4u-lang[b-iqklxuaaxu] { position: relative; }

.b4u-lang-btn[b-iqklxuaaxu] {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--b4u-radius-sm); padding: 6px 10px; cursor: pointer;
    color: var(--b4u-text-secondary); font-size: 13px; font-weight: 500;
    font-family: inherit;
}

.b4u-lang-menu[b-iqklxuaaxu] {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border);
    border-radius: var(--b4u-radius-lg); padding: 6px; min-width: 190px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    display: none;
}

/* Click-to-open (JS toggles .is-open; hover was dropped — the 6px gap between the
   button and the menu made hover-opened menus close while crossing it). */
.b4u-lang.is-open .b4u-lang-menu[b-iqklxuaaxu] { display: block; }
.b4u-lang.is-open .b4u-lang-btn[b-iqklxuaaxu] { background: var(--b4u-bg-card-hover); border-color: var(--b4u-border); }

/* Footer placement: open the menu upward so it isn't pushed off the bottom of the page. */
.b4u-lang--up .b4u-lang-menu[b-iqklxuaaxu] { top: auto; bottom: calc(100% + 6px); }

.b4u-lang-item[b-iqklxuaaxu] {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border-radius: 9px; padding: 9px 12px; cursor: pointer;
    color: var(--b4u-text); font-size: 14px; text-decoration: none;
}
.b4u-lang-item:hover[b-iqklxuaaxu] { background: var(--b4u-bg-card-hover); }
.b4u-lang-item.is-active[b-iqklxuaaxu] { background: var(--b4u-primary-light); color: var(--b4u-primary); font-weight: 600; }
.b4u-lang-check[b-iqklxuaaxu] { margin-left: auto; }

/* Flags: sized + rounded to match the prototype's CountryFlag (≈22×16 trigger,
   ≈23×17 menu) — the package default sizes them off the font (~13–14px). */
.b4u-lang-btn .flag-icon[b-iqklxuaaxu],
.b4u-lang-item .flag-icon[b-iqklxuaaxu] {
    border-radius: 3px;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.b4u-lang-btn .flag-icon[b-iqklxuaaxu] { width: 22px; height: 16px; }
.b4u-lang-item .flag-icon[b-iqklxuaaxu] { width: 23px; height: 17px; }
/* /Components/Layout/Navbar.razor.rz.scp.css */
.b4u-nav[b-l2umsgri06] {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease, backdrop-filter 0.35s ease;
    padding: 16px 0;
}
.b4u-nav.b4u-scrolled[b-l2umsgri06],
.b4u-nav.b4u-nav-open[b-l2umsgri06] {
    background: var(--b4u-nav-bg);
    border-bottom-color: var(--b4u-border);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.b4u-nav.b4u-scrolled[b-l2umsgri06] { padding: 10px 0; }

.b4u-nav-inner[b-l2umsgri06] {
    display: flex; align-items: center; justify-content: space-between;
}
.b4u-nav-logo[b-l2umsgri06] { display: flex; align-items: center; }
.b4u-nav-logo img[b-l2umsgri06] { height: 32px; }
.b4u-nav-links[b-l2umsgri06] { display: flex; align-items: center; gap: 4px; }
.b4u-nav-link[b-l2umsgri06] {
    color: var(--b4u-text-secondary); text-decoration: none;
    padding: 8px 16px; border-radius: var(--b4u-radius-sm);
    font-size: 14px; font-weight: 500;
    transition: color 0.25s ease, background 0.2s ease;
}
.b4u-nav-link:hover[b-l2umsgri06] { background: var(--b4u-bg-card-hover); color: var(--b4u-text); }
/* Active page: tinted-primary pill + red text (--b4u-primary-light is a semi-transparent
   red, so it reads on both the dark hero and the light bar). The over-hero white rule in
   theme.css excludes .is-active so the red text wins there too. Kept on hover. */
.b4u-nav-link.is-active[b-l2umsgri06],
.b4u-nav-link.is-active:hover[b-l2umsgri06] { color: var(--b4u-primary); background: var(--b4u-primary-light); }
.b4u-nav-right[b-l2umsgri06] { display: flex; align-items: center; gap: 8px; }
.b4u-nav-auth[b-l2umsgri06] { display: inline-flex; align-items: center; gap: 8px; }
.b4u-nav-logout[b-l2umsgri06] { margin: 0; }
.b4u-nav-linkbtn[b-l2umsgri06] {
    background: transparent; border: none; cursor: pointer;
    color: var(--b4u-text-secondary); font: inherit; font-weight: 500;
    padding: 8px 12px;
}

/* The logo needs no recolouring: its SVG carries a white "splash" backdrop
   (.st0) behind the dark wordmark, so it stays legible on both the dark hero
   (transparent nav) and the light scrolled bar. The light-mode-at-top link/icon
   recolouring (which needs a [data-theme] ancestor) lives in global theme.css. */

@media (max-width: 820px) {
    .b4u-nav-links[b-l2umsgri06] { display: none; }
    /* The inline Login/SignUp CTA is too wide for a phone bar and, in a nowrap
       flex row, would push the burger off-screen. Collapse it into the mobile
       dropdown (see .b4u-nav-mobile-auth) below 820px. */
    .b4u-nav-auth[b-l2umsgri06] { display: none; }
}

.b4u-nav-burger[b-l2umsgri06] {
    display: none;
    background: transparent;
    border: none;
    color: var(--b4u-text-secondary);
    cursor: pointer;
    padding: 8px;
    align-items: center;
}
.b4u-nav-mobile[b-l2umsgri06] {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--b4u-border);
}
.b4u-nav-mobile-link[b-l2umsgri06] {
    color: var(--b4u-text);
    text-decoration: none;
    padding: 12px 8px;
    border-radius: var(--b4u-radius-sm);
    font-size: 15px;
    font-weight: 500;
}
.b4u-nav-mobile-link:hover[b-l2umsgri06] { background: var(--b4u-bg-card-hover); }
.b4u-nav-mobile-link.is-active[b-l2umsgri06] { color: var(--b4u-primary); background: var(--b4u-primary-light); }

/* Auth actions relocated into the mobile dropdown (hidden from the bar < 820px). */
.b4u-nav-mobile-auth[b-l2umsgri06] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--b4u-border);
}
.b4u-nav-mobile-signup[b-l2umsgri06] { width: 100%; justify-content: center; }

/* Separator above the relocated theme row. Declared outside any media query: the whole
   .b4u-nav-mobile container is display:none unless the nav is open, and it can only be
   opened below 820px, so it needs no breakpoint of its own. When logged out this sits
   below .b4u-nav-mobile-auth, giving two rules - links | auth | theme - which is intended. */
.b4u-nav-mobile-theme[b-l2umsgri06] {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--b4u-border);
}

@media (max-width: 820px) {
    .b4u-nav-burger[b-l2umsgri06] { display: inline-flex; }
    .b4u-nav.b4u-nav-open .b4u-nav-mobile[b-l2umsgri06] { display: flex; }
    /* The toggle relocates into the dropdown (.b4u-nav-mobile-theme) at this width.
       ::deep is REQUIRED, not stylistic: .b4u-theme-toggle is rendered by the child
       ThemeToggle component and carries ITS scope id, so a plain descendant selector
       compiles to `...[b-navbar]` on the last selector and silently never matches.
       Scoping to .b4u-nav-right is what leaves the footer toggle alone - do not
       widen it. */
    .b4u-nav-right[b-l2umsgri06]  .b4u-theme-toggle { display: none; }
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.b4u-notif[b-nz89jsdnl6] { position: relative; display: inline-flex; }
.b4u-notif-trigger[b-nz89jsdnl6] {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
    /* Match the sibling nav controls (theme toggle, language button, profile trigger) — they
       all use --b4u-text-secondary as their base. NOTE: the navbar is NOT dark in both themes;
       it is transparent over the dark hero at the top of the page and turns solid on scroll
       (white in light mode, navy in dark). This base colour is only correct for the SOLID bar.
       The over-the-hero case is handled globally in theme.css, which flips every
       .b4u-nav-right control to white — this bell must stay in that selector list. */
    color: var(--b4u-text-secondary, #475569); border-radius: 10px;
}
.b4u-notif.is-open .b4u-notif-trigger[b-nz89jsdnl6] { background: var(--b4u-bg-elevated); }
.b4u-notif-badge[b-nz89jsdnl6] {
    position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; line-height: 1; color: #fff;
    background: #E03440; border-radius: 999px;
}
.b4u-notif-pill[b-nz89jsdnl6] {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; font-size: 12px; font-weight: 700; color: #fff; background: #E03440; border-radius: 999px;
}

/* Panel: mirrors ProfileMenu's .b4u-pm-panel positioning + .is-open reveal (same tokens,
   radius, shadow, z-index), renamed and gated by .b4u-notif.is-open. */
.b4u-notif-panel[b-nz89jsdnl6] {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border);
    border-radius: 16px; padding: 8px; width: 340px; max-width: calc(100vw - 32px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.b4u-notif.is-open .b4u-notif-panel[b-nz89jsdnl6] { display: block; }

/* Phones: `right: 0` anchors the 340px panel to the 40px trigger, but the bell sits
   mid-navbar (theme, language, avatar and burger all follow it), so the panel's left
   edge lands ~89px off-screen at 393px wide. `max-width` cannot rescue that -- it caps
   the panel's SIZE, never its POSITION, and at 340px it never even engages.
   Dropping position:relative hands the containing block to the fixed .b4u-nav, which
   spans the viewport, so `right` now gutters the panel against the SCREEN edge while
   `top: 100%` keeps tracking the bar (incl. its 16px->10px scrolled padding).
   The badge is unaffected: it anchors to .b4u-notif-trigger, which stays relative. */
@media (max-width: 640px) {
    .b4u-notif[b-nz89jsdnl6] { position: static; }
    .b4u-notif-panel[b-nz89jsdnl6] { right: 16px; }
}

/* Every colour below must be a --b4u-* token (or a color-mix against one). The panel
   background follows --b4u-bg-card, so any hardcoded light value here becomes a bright
   patch on a dark panel. This file previously used var(--b4u-soft, …) and var(--b4u-muted, …)
   — NEITHER token exists anywhere in the project, so both silently fell back to their light
   literals and the whole panel stayed light-mode in dark mode. The real tokens are
   --b4u-bg-card-hover and --b4u-text-muted / --b4u-text-secondary. */
.b4u-notif-head[b-nz89jsdnl6] { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 700; }
/* Font-size is explicit: the panel inherits the navbar's ~16px, which read oversized here.
   13.5px matches the design's empty-state message. */
.b4u-notif-empty[b-nz89jsdnl6] { padding: 20px 16px; color: var(--b4u-text-secondary); text-align: center; font-size: 13.5px; }
.b4u-notif-row[b-nz89jsdnl6] { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; text-decoration: none; color: inherit; }
.b4u-notif-row:hover[b-nz89jsdnl6] { background: var(--b4u-bg-card-hover); }
.b4u-notif-ico[b-nz89jsdnl6] { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
/* Tint chips: mixing the accent INTO --b4u-bg-card keeps them pale on white and deep on
   navy automatically, so no [data-theme] rule is needed (scoped CSS can't host one). */
.b4u-notif-ico--confirm[b-nz89jsdnl6] { color: var(--b4u-text-secondary); background: color-mix(in srgb, var(--b4u-text-secondary) 16%, var(--b4u-bg-card)); }
.b4u-notif-ico--cancel[b-nz89jsdnl6]  { color: var(--b4u-primary); background: color-mix(in srgb, var(--b4u-primary) 16%, var(--b4u-bg-card)); }
.b4u-notif-ico--move[b-nz89jsdnl6]    { color: var(--b4u-info); background: color-mix(in srgb, var(--b4u-info) 16%, var(--b4u-bg-card)); }
.b4u-notif-body[b-nz89jsdnl6] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.b4u-notif-title[b-nz89jsdnl6] { font-weight: 700; font-size: 14px; }
.b4u-notif-sub[b-nz89jsdnl6] { font-size: 12.5px; color: var(--b4u-text-secondary); }
.b4u-notif-time[b-nz89jsdnl6] { flex: 0 0 auto; font-size: 12px; color: var(--b4u-text-muted); white-space: nowrap; }
.b4u-notif-cta[b-nz89jsdnl6] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 8px 12px 12px; padding: 10px; text-align: center; font-weight: 700; font-size: 13px;
    color: var(--b4u-primary); text-decoration: none; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--b4u-primary) 28%, transparent);
    background: color-mix(in srgb, var(--b4u-primary) 9%, var(--b4u-bg-card));
}
/* The external-link glyph should not dictate the row height; keep it optically aligned. */
.b4u-notif-cta svg[b-nz89jsdnl6] { flex: 0 0 auto; }
.b4u-notif-cta:hover[b-nz89jsdnl6] { background: color-mix(in srgb, var(--b4u-primary) 16%, var(--b4u-bg-card)); }

/* Attention animation, only when there are items. Applied to elements the static-SSR navbar
   renders once (no mid-life re-render), so it plays once per navigation. */
.b4u-notif.has-items .b4u-notif-badge[b-nz89jsdnl6] { animation: b4u-notif-pop-b-nz89jsdnl6 320ms ease-out both; }
.b4u-notif.has-items .b4u-notif-trigger[b-nz89jsdnl6] { animation: b4u-notif-ring-b-nz89jsdnl6 700ms ease-in-out; transform-origin: 50% 4px; }
@keyframes b4u-notif-pop-b-nz89jsdnl6 { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes b4u-notif-ring-b-nz89jsdnl6 {
    0%,100% { transform: rotate(0); } 15% { transform: rotate(12deg); } 30% { transform: rotate(-10deg); }
    45% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .b4u-notif.has-items .b4u-notif-badge[b-nz89jsdnl6],
    .b4u-notif.has-items .b4u-notif-trigger[b-nz89jsdnl6] { animation: none; }
}
/* /Components/Layout/ProfileMenu.razor.rz.scp.css */
.b4u-pm[b-qxxnvxgjji] { position: relative; }

.b4u-pm-trigger[b-qxxnvxgjji] {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid transparent;
    border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer;
    color: var(--b4u-text-secondary);
}
.b4u-pm.is-open .b4u-pm-trigger[b-qxxnvxgjji] { background: var(--b4u-bg-elevated); border-color: var(--b4u-border); }

.b4u-pm-img[b-qxxnvxgjji] { border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; }
.b4u-pm-initials[b-qxxnvxgjji] {
    border-radius: 50%; color: #fff; font-weight: 800; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em;
}
/* Fallback swap — see /app/image-fallback.js. */
.b4u-pm-initials.is-hidden[b-qxxnvxgjji] { display: none; }
[data-b4u-noimg] .b4u-pm-initials.is-hidden[b-qxxnvxgjji] { display: inline-flex; }

.b4u-pm-panel[b-qxxnvxgjji] {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border);
    border-radius: 16px; padding: 8px; min-width: 248px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.b4u-pm.is-open .b4u-pm-panel[b-qxxnvxgjji] { display: block; }

.b4u-pm-head[b-qxxnvxgjji] { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; }
.b4u-pm-id[b-qxxnvxgjji] { min-width: 0; }
.b4u-pm-name[b-qxxnvxgjji] { font-size: 15px; font-weight: 700; color: var(--b4u-text); white-space: nowrap; }
.b4u-pm-sub[b-qxxnvxgjji] { font-size: 12px; color: var(--b4u-text-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.b4u-pm-dot[b-qxxnvxgjji] { opacity: 0.6; }

.b4u-pm-divider[b-qxxnvxgjji] { height: 1px; background: var(--b4u-border); margin: 4px 6px; }

.b4u-pm-item[b-qxxnvxgjji] {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: transparent; border: none; border-radius: 10px;
    padding: 10px 12px; cursor: pointer; color: var(--b4u-text);
    font-size: 14px; font-weight: 500; font-family: inherit; text-align: left;
    text-decoration: none;
}
.b4u-pm-item:hover[b-qxxnvxgjji] { background: var(--b4u-bg-card-hover); }
.b4u-pm-label[b-qxxnvxgjji] { flex: 1; }

.b4u-pm-em[b-qxxnvxgjji] {
    background: var(--b4u-primary-light); border: 1px solid var(--b4u-primary);
    color: var(--b4u-primary); font-weight: 700; margin-bottom: 6px;
}
.b4u-pm-em:hover[b-qxxnvxgjji] { background: var(--b4u-primary-light); filter: brightness(1.05); }
.b4u-pm-ext[b-qxxnvxgjji] { flex-shrink: 0; }

.b4u-pm-badge[b-qxxnvxgjji] {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff; background: #E03440; border-radius: 999px;
}

.b4u-pm-item.is-disabled[b-qxxnvxgjji] { color: var(--b4u-text-muted); cursor: default; }
.b4u-pm-item.is-disabled:hover[b-qxxnvxgjji] { background: transparent; }
.b4u-pm-soon[b-qxxnvxgjji] {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--b4u-text-muted); background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border); border-radius: 999px; padding: 2px 7px;
}

.b4u-pm-logout[b-qxxnvxgjji] { color: var(--b4u-primary); font-weight: 600; }
.b4u-pm-logout:hover[b-qxxnvxgjji] { background: var(--b4u-primary-light); }
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
main[b-99fw8bp70z] { display: block; }
/* /Components/Pages/Archives.razor.rz.scp.css */
/* Archives page — static SSR, query-param driven */

/* ── Hero ─────────────────────────────────────────────── */
.b4u-arch-hero[b-xd0881h6dg] {
    background: var(--b4u-hero-gradient, linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%));
    padding: 100px 24px 56px;
    text-align: center;
}

.b4u-arch-hero-inner[b-xd0881h6dg] {
    max-width: 600px;
    margin: 0 auto;
}

.b4u-arch-back-row[b-xd0881h6dg] {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.b4u-arch-back[b-xd0881h6dg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
}

    .b4u-arch-back:hover[b-xd0881h6dg] {
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
    }

.b4u-arch-h1[b-xd0881h6dg] {
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.b4u-arch-sub[b-xd0881h6dg] {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 auto 32px;
    max-width: 500px;
}

.b4u-arch-search-wrap[b-xd0881h6dg] {
    max-width: 560px;
    margin: 0 auto;
}

/* ── Content container ───────────────────────────────── */
.b4u-arch-container[b-xd0881h6dg] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

/* ── Season filter pills ─────────────────────────────── */
.b4u-arch-seasons[b-xd0881h6dg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.b4u-arch-seasons-label[b-xd0881h6dg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text-muted, #6b7280);
    margin-right: 4px;
}

.b4u-arch-pill[b-xd0881h6dg] {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: var(--b4u-bg-card, #f9fafb);
    border: 1px solid var(--b4u-border, #e5e7eb);
    color: var(--b4u-text-secondary, #374151);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}

    .b4u-arch-pill:hover[b-xd0881h6dg] {
        background: var(--b4u-bg-hover, #f3f4f6);
        border-color: var(--b4u-border-hover, #9ca3af);
        text-decoration: none;
        color: var(--b4u-text, #111827);
    }

    .b4u-arch-pill.is-active[b-xd0881h6dg] {
        background: var(--b4u-primary, #6366f1);
        border-color: var(--b4u-primary, #6366f1);
        color: #fff;
    }

/* ── Count ──────────────────────────────────────────── */
.b4u-arch-count[b-xd0881h6dg] {
    font-size: 14px;
    color: var(--b4u-text-muted, #6b7280);
    margin-bottom: 16px;
}

/* ── Event list ──────────────────────────────────────── */
.b4u-arch-list[b-xd0881h6dg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* Contact.razor — scoped styles
   Theme mapping: theme.X → var(--b4u-X)
   primary         → --b4u-primary
   primaryHover    → --b4u-primary-hover
   primaryLight    → --b4u-primary-light
   bgCard          → --b4u-bg-card
   bgCardHover     → --b4u-bg-card-hover
   bgSurface       → --b4u-bg-surface
   bgInput         → --b4u-bg-input
   border          → --b4u-border
   warning         → --b4u-warning
   success         → --b4u-success
   text            → --b4u-text
   textSecondary   → --b4u-text-secondary
   textMuted       → --b4u-text-muted
   heroGradient    → --b4u-hero-gradient
   bg              → --b4u-bg
*/

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.ct-hero[b-gtgu5nngsf] {
    background: var(--b4u-hero-gradient);
    padding: 120px 24px 64px;
    text-align: center;
}

.ct-hero-badge[b-gtgu5nngsf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.02em;
}

.ct-hero-title[b-gtgu5nngsf] {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.ct-hero-sub[b-gtgu5nngsf] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 540px;
    margin: 0 auto;
}

/* ── Page body ──────────────────────────────────────────────────────────────── */

.ct-body[b-gtgu5nngsf] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 24px 80px;
}

@media (max-width: 820px) {
    .ct-body[b-gtgu5nngsf] {
        padding: 32px 18px 72px;
    }
}

/* ── Inline org warning banner ──────────────────────────────────────────────── */

.ct-org-banner[b-gtgu5nngsf] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: color-mix(in srgb, var(--b4u-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--b4u-warning) 33%, transparent);
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 24px;
}

.ct-org-icon[b-gtgu5nngsf] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--b4u-warning) 13%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-warning);
}

.ct-org-text[b-gtgu5nngsf] {
    min-width: 0;
}

.ct-org-title[b-gtgu5nngsf] {
    font-size: 15px;
    font-weight: 700;
    color: var(--b4u-text);
    margin-bottom: 3px;
}

.ct-org-body[b-gtgu5nngsf] {
    font-size: 13.5px;
    color: var(--b4u-text-secondary);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 820px) {
    .ct-org-banner[b-gtgu5nngsf] {
        padding: 16px;
    }
}

/* ── 2-col grid ─────────────────────────────────────────────────────────────── */

.ct-grid[b-gtgu5nngsf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

@media (max-width: 820px) {
    .ct-grid[b-gtgu5nngsf] {
        grid-template-columns: 1fr;
    }
}

/* ── Form card ──────────────────────────────────────────────────────────────── */

.ct-form-card[b-gtgu5nngsf] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 20px;
    padding: 32px 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 820px) {
    .ct-form-card[b-gtgu5nngsf] {
        padding: 24px 20px;
    }
}

/* ── Divider ────────────────────────────────────────────────────────────────── */

.ct-divider[b-gtgu5nngsf] {
    height: 1px;
    background: var(--b4u-border);
    margin: 8px 0;
}

/* ── Name + email 2-col row ─────────────────────────────────────────────────── */

.ct-name-email-row[b-gtgu5nngsf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .ct-name-email-row[b-gtgu5nngsf] {
        grid-template-columns: 1fr;
    }
}

/* ── Field + label ──────────────────────────────────────────────────────────── */

.ct-field[b-gtgu5nngsf] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.ct-label[b-gtgu5nngsf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
}

.ct-required[b-gtgu5nngsf] {
    color: var(--b4u-primary);
}

.ct-hint-tag[b-gtgu5nngsf] {
    font-weight: 400;
    color: var(--b4u-text-muted);
    font-size: 12px;
}

/* ── Input wrapper ──────────────────────────────────────────────────────────── */

.ct-input-wrap[b-gtgu5nngsf] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--b4u-bg-input);
    border: 1.5px solid var(--b4u-border);
    border-radius: 12px;
    padding: 0 14px;
    box-sizing: border-box;
    transition: all 0.2s;
    color: var(--b4u-text-muted);
}

.ct-input-wrap:focus-within[b-gtgu5nngsf] {
    border-color: var(--b4u-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 8%, transparent);
}

.ct-input[b-gtgu5nngsf] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--b4u-text);
    font-size: 14.5px;
    padding: 12px 0;
    font-family: inherit;
}

.ct-input[b-gtgu5nngsf]::placeholder {
    color: var(--b4u-text-muted);
}

/* ── Textarea ────────────────────────────────────────────────────────────────── */

.ct-textarea-wrap[b-gtgu5nngsf] {
    background: var(--b4u-bg-input);
    border: 1.5px solid var(--b4u-border);
    border-radius: 12px;
    padding: 4px 14px;
    transition: all 0.2s;
}

.ct-textarea-wrap:focus-within[b-gtgu5nngsf] {
    border-color: var(--b4u-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 8%, transparent);
}

.ct-textarea[b-gtgu5nngsf] {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    color: var(--b4u-text);
    font-size: 14.5px;
    line-height: 1.6;
    padding: 9px 0;
    font-family: inherit;
    resize: vertical;
    min-height: 110px;
}

.ct-textarea[b-gtgu5nngsf]::placeholder {
    color: var(--b4u-text-muted);
}

/* ── Validation messages ─────────────────────────────────────────────────────── */

.ct-val-msg[b-gtgu5nngsf] {
    font-size: 12px;
    color: var(--b4u-primary);
    margin-top: 4px;
    display: block;
}

/* ── Turnstile block ─────────────────────────────────────────────────────────── */

.ct-ts-wrap[b-gtgu5nngsf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-ts-note[b-gtgu5nngsf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--b4u-text-muted);
}

/* ── Send button ─────────────────────────────────────────────────────────────── */

.ct-send-btn[b-gtgu5nngsf] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--b4u-primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--b4u-primary) 20%, transparent);
    transition: all 0.2s ease;
    opacity: 1;
}

.ct-send-btn:hover:not(:disabled):not(.ct-send-btn--dim)[b-gtgu5nngsf] {
    background: var(--b4u-primary-hover);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--b4u-primary) 27%, transparent);
    transform: translateY(-1px);
}

.ct-send-btn--dim[b-gtgu5nngsf] {
    opacity: 0.55;
}

.ct-send-btn:disabled[b-gtgu5nngsf] {
    cursor: not-allowed;
}

/* ── Privacy consent ─────────────────────────────────────────────────────────── */

.ct-consent[b-gtgu5nngsf] {
    font-size: 11.5px;
    color: var(--b4u-text-muted);
    text-align: center;
    margin: 4px 0 0;
    line-height: 1.5;
}

.ct-consent-link[b-gtgu5nngsf] {
    color: var(--b4u-primary);
    font-weight: 600;
    text-decoration: none;
}

.ct-consent-link:hover[b-gtgu5nngsf] {
    text-decoration: underline;
}
/* /Components/Pages/Docs/DocsCategoryGrid.razor.rz.scp.css */
/* Guide index cards. Mirrors DocsCategoryGrid in docs/design/full-project/docs-pages.jsx.
   The per-card accent arrives as the --b4u-card-accent custom property, set inline. */

.b4u-docs-cards[b-smafegv6w3] {
    max-width: var(--b4u-maxw);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 1rem;
}

.b4u-docs-card[b-smafegv6w3] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    border-radius: 16px;
    background: var(--b4u-bg-card, #fff);
    border: 1px solid var(--b4u-border, #E5E7EB);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.b4u-docs-card:hover[b-smafegv6w3] {
    transform: translateY(-3px);
    /* colour-mix keeps the accent in one place; the design used #rrggbb + alpha suffixes. */
    box-shadow: 0 12px 28px color-mix(in srgb, var(--b4u-card-accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--b4u-card-accent) 40%, transparent);
}

.b4u-docs-card:focus-visible[b-smafegv6w3] {
    outline: 2px solid var(--b4u-card-accent);
    outline-offset: 2px;
}

.b4u-docs-card-icon[b-smafegv6w3] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-card-accent);
    background: color-mix(in srgb, var(--b4u-card-accent) 12%, transparent);
}

.b4u-docs-card-title[b-smafegv6w3] {
    font-family: var(--b4u-font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--b4u-text, #0F172A);
}

.b4u-docs-card-blurb[b-smafegv6w3] {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--b4u-text-muted, #64748B);
}

@media (prefers-reduced-motion: reduce) {
    .b4u-docs-card[b-smafegv6w3] { transition: none; }
    .b4u-docs-card:hover[b-smafegv6w3] { transform: none; }
}
/* /Components/Pages/Docs/DocsHero.razor.rz.scp.css */
/* Shared docs/FAQ hero. Mirrors DocsHero in docs/design/full-project/docs-pages.jsx. */

/* Deliberately NOT overflow:hidden. The search panel is an absolutely-positioned
   descendant that hangs below the hero, and overflow:hidden on an ancestor clips it
   whatever its z-index. The glyph gets its own clipping layer below instead. */
.b4u-docs-hero[b-31vcl1525x] {
    position: relative;
    background: var(--b4u-hero-gradient); /* accent wash, when set, is applied inline */
    padding: 120px 1.25rem 48px;
}

.b4u-docs-hero-inner[b-31vcl1525x] {
    position: relative;
    max-width: var(--b4u-maxw);
    margin: 0 auto;
}

/* Clipping layer for the glyph alone. inset:0 on the position:relative hero makes this
   box identical to the hero's padding box, so the glyph's percentage offsets below
   resolve exactly as they did when the hero was the clipper. */
.b4u-docs-hero-glyph-clip[b-31vcl1525x] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Oversized chapter icon bleeding off the right edge. */
.b4u-docs-hero-glyph[b-31vcl1525x] {
    position: absolute;
    right: clamp(-24px, 3vw, 56px);
    top: 52%;
    transform: translateY(-40%) rotate(-8deg);
    color: #fff;
    opacity: .16;
    pointer-events: none;
    line-height: 0;
}

.b4u-docs-hero-eyebrow[b-31vcl1525x] {
    display: inline-block;
    font-family: var(--b4u-font-display);
    font-size: .8125rem;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    margin-bottom: .5rem;
}

.b4u-docs-hero-eyebrow:hover[b-31vcl1525x] { color: #fff; }

.b4u-docs-hero-title[b-31vcl1525x] {
    font-family: var(--b4u-font-display);
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}

/* Guide | FAQ pills. */
.b4u-docs-hero-views[b-31vcl1525x] {
    display: inline-flex;
    gap: .25rem;
    margin-top: 1.25rem;
    padding: .25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.b4u-docs-hero-view[b-31vcl1525x] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    font-family: var(--b4u-font-display);
    font-size: .875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.b4u-docs-hero-view:hover[b-31vcl1525x] { color: #fff; background: rgba(255, 255, 255, 0.10); }

.b4u-docs-hero-view.is-active[b-31vcl1525x] {
    background: #fff;
    color: var(--b4u-primary, #E03440);
}

.b4u-docs-hero-view.is-active:hover[b-31vcl1525x] { background: #fff; }

@media (max-width: 640px) {
    .b4u-docs-hero[b-31vcl1525x] { padding: 104px 1.25rem 36px; }
    .b4u-docs-hero-title[b-31vcl1525x] { font-size: 1.875rem; }
    .b4u-docs-hero-glyph[b-31vcl1525x] { display: none; } /* too little room; it only crowds the title */
}

@media (prefers-reduced-motion: reduce) {
    .b4u-docs-hero-view[b-31vcl1525x] { transition: none; }
}

.b4u-docs-search[b-31vcl1525x] {
    position: relative;
    margin-top: 1.25rem;
    max-width: 34rem;
}

.b4u-docs-search-input[b-31vcl1525x] {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1rem;
}

.b4u-docs-search-input[b-31vcl1525x]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* State lives on a data-* attribute, never on class: Blazor rewrites the whole class
   attribute when its rendered value changes and would wipe a JS-set flag. */
.b4u-docs-search-panel[b-31vcl1525x] {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 24rem;
    overflow-y: auto;
    border-radius: var(--b4u-radius-md);
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    text-align: left;
}

.b4u-docs-search-panel[data-open][b-31vcl1525x] {
    display: block;
}

/* The panel's children are written by docs-search.js and carry no scope attribute of
   their own; ::deep matches descendants of the scoped form, which they are. */
[b-31vcl1525x] .b4u-docs-search-result {
    display: block;
    padding: 0.7rem 0.9rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--b4u-border);
}

[b-31vcl1525x] .b4u-docs-search-result:last-child {
    border-bottom: 0;
}

[b-31vcl1525x] .b4u-docs-search-result:hover,
[b-31vcl1525x] .b4u-docs-search-result[data-active] {
    background: var(--b4u-bg-card-hover);
}

[b-31vcl1525x] .b4u-docs-search-crumb {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

[b-31vcl1525x] .b4u-docs-search-excerpt {
    display: block;
    font-size: 0.85rem;
    color: var(--b4u-text-muted);
}

[b-31vcl1525x] .b4u-docs-search-more {
    display: block;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--b4u-text-muted);
    text-align: center;
}

[b-31vcl1525x] mark {
    background: var(--b4u-primary-light);
    color: inherit;
    padding: 0 0.15em;
    border-radius: 0.2em;
}
/* /Components/Pages/Docs/EventManagerDocs.razor.rz.scp.css */
.b4u-docs[b-5szrrv02ho] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 200px;
    gap: 2.5rem;
    max-width: var(--b4u-maxw);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}
.b4u-docs-side-title[b-5szrrv02ho],
.b4u-docs-rail-title[b-5szrrv02ho] {
    font-family: var(--b4u-font-display);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
    margin-bottom: .75rem;
}
.b4u-docs-side[b-5szrrv02ho],
.b4u-docs-rail[b-5szrrv02ho] {
    position: sticky;
    top: 5rem;
    align-self: start;
}
.b4u-docs-side-link[b-5szrrv02ho],
.b4u-docs-rail-link[b-5szrrv02ho] {
    display: block;
    padding: .375rem 0;
    color: var(--b4u-text-secondary);
    text-decoration: none;
    font-size: .9375rem;
    line-height: 1.4;
}

/* Chapter links carry the same accent tile as the index cards, at rail size.
   The accent arrives as --b4u-card-accent, set inline per link. */
.b4u-docs-side-link[b-5szrrv02ho] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.b4u-docs-side-icon[b-5szrrv02ho] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-card-accent, var(--b4u-text-muted));
    background: color-mix(in srgb, var(--b4u-card-accent, transparent) 12%, transparent);
}
.b4u-docs-side-link:hover[b-5szrrv02ho],
.b4u-docs-rail-link:hover[b-5szrrv02ho] { color: var(--b4u-text); }
.b4u-docs-side-link.is-active[b-5szrrv02ho] {
    color: var(--b4u-primary);
    font-weight: 600;
}
.b4u-docs-rail-h3[b-5szrrv02ho] { padding-left: .75rem; font-size: .875rem; }
.b4u-docs-untranslated[b-5szrrv02ho] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-left: 3px solid var(--b4u-warning);
    border-radius: var(--b4u-radius-md);
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    color: var(--b4u-text-secondary);
    font-size: .9375rem;
}
/* ::deep — the markdown HTML is injected as a MarkupString, so scoped
   attributes are never applied to its elements. */
.b4u-docs-body[b-5szrrv02ho]  h2 {
    font-family: var(--b4u-font-display);
    font-size: 1.5rem;
    margin: 2.5rem 0 .75rem;
    scroll-margin-top: 5rem;
    color: var(--b4u-text);
}
.b4u-docs-body[b-5szrrv02ho]  h3 {
    font-size: 1.1875rem;
    margin: 1.75rem 0 .5rem;
    scroll-margin-top: 5rem;
    color: var(--b4u-text);
}
.b4u-docs-body[b-5szrrv02ho]  p,
.b4u-docs-body[b-5szrrv02ho]  li {
    color: var(--b4u-text-secondary);
    line-height: 1.7;
}
.b4u-docs-body[b-5szrrv02ho]  a { color: var(--b4u-primary); }
.b4u-docs-body[b-5szrrv02ho]  img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--b4u-border);
    border-radius: var(--b4u-radius-lg);
    margin: 1.25rem 0;
    display: block;
}
/* GLightbox (docs-lightbox.js) wraps each content image in this anchor. Keep it
   block so it occupies the image's slot, and hint that the image is zoomable. */
.b4u-docs-body[b-5szrrv02ho]  a.glightbox {
    display: block;
    cursor: zoom-in;
}
.b4u-docs-body[b-5szrrv02ho]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: .9375rem;
}
.b4u-docs-body[b-5szrrv02ho]  th,
.b4u-docs-body[b-5szrrv02ho]  td {
    border: 1px solid var(--b4u-border);
    padding: .5rem .75rem;
    text-align: left;
}
.b4u-docs-body[b-5szrrv02ho]  th { background: var(--b4u-bg-card); color: var(--b4u-text); }
.b4u-docs-body[b-5szrrv02ho]  code {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: var(--b4u-radius-sm);
    padding: .0625rem .3125rem;
    font-size: .875em;
}
.b4u-docs-body[b-5szrrv02ho]  pre {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: var(--b4u-radius-md);
    padding: 1rem;
    overflow-x: auto;
}
.b4u-docs-body[b-5szrrv02ho]  pre code { border: 0; padding: 0; background: none; }
@media (max-width: 1100px) {
    .b4u-docs[b-5szrrv02ho] { grid-template-columns: 220px minmax(0, 1fr); }
    .b4u-docs-rail[b-5szrrv02ho] { display: none; }
}
@media (max-width: 760px) {
    .b4u-docs[b-5szrrv02ho] { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .b4u-docs-side[b-5szrrv02ho] { position: static; }
}
.b4u-docs-side-faq[b-5szrrv02ho] {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--b4u-border);
}
/* /Components/Pages/Docs/EventManagerDocsSearch.razor.rz.scp.css */
.b4u-docs-results[b-k3oxfl8u9p] {
    max-width: var(--b4u-maxw);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.b4u-docs-results-count[b-k3oxfl8u9p],
.b4u-docs-results-empty[b-k3oxfl8u9p] {
    color: var(--b4u-text-muted);
    margin-bottom: 1.5rem;
}

.b4u-docs-results-list[b-k3oxfl8u9p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.b4u-docs-result-link[b-k3oxfl8u9p] {
    display: block;
    padding: 1rem 1.15rem;
    border: 1px solid var(--b4u-border);
    border-radius: var(--b4u-radius-md);
    background: var(--b4u-bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.b4u-docs-result-link:hover[b-k3oxfl8u9p] {
    border-color: var(--b4u-border-hover);
    background: var(--b4u-bg-card-hover);
    transform: translateY(-1px);
}

.b4u-docs-result-crumb[b-k3oxfl8u9p] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.b4u-docs-result-snippet[b-k3oxfl8u9p] {
    display: block;
    color: var(--b4u-text-muted);
    font-size: 0.925rem;
    line-height: 1.55;
}

/* The snippet arrives as a MarkupString, so its <mark> children carry no scope
   attribute of their own — ::deep is what reaches them. */
[b-k3oxfl8u9p] mark {
    background: var(--b4u-primary-light);
    color: inherit;
    padding: 0 0.15em;
    border-radius: 0.2em;
}
/* /Components/Pages/Docs/EventManagerFaq.razor.rz.scp.css */
/* FAQ shell */
.b4u-faq[b-gt6gyxw840] { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.b4u-faq-controls[b-gt6gyxw840] { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.b4u-faq-search[b-gt6gyxw840] {
    width: 100%; padding: .625rem .875rem; font-size: .9375rem;
    color: var(--b4u-text); background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border); border-radius: var(--b4u-radius-md);
}
.b4u-faq-search:focus[b-gt6gyxw840] { outline: none; border-color: var(--b4u-primary); }
.b4u-faq-chips[b-gt6gyxw840] { display: flex; flex-wrap: wrap; gap: .5rem; }
.b4u-faq-chip[b-gt6gyxw840] {
    font-family: var(--b4u-font-display); font-size: .8125rem; line-height: 1;
    padding: .4375rem .75rem; border-radius: 999px; cursor: pointer;
    color: var(--b4u-text-secondary); background: var(--b4u-bg-card); border: 1px solid var(--b4u-border);
}
.b4u-faq-chip:hover[b-gt6gyxw840] { color: var(--b4u-text); }
.b4u-faq-chip.is-active[b-gt6gyxw840] { color: #fff; background: var(--b4u-primary); border-color: var(--b4u-primary); }
.b4u-faq-empty[b-gt6gyxw840] { color: var(--b4u-text-muted); font-size: .9375rem; padding: 1rem 0; }
.b4u-faq-group[b-gt6gyxw840] { margin-bottom: 2rem; }
.b4u-faq-group-title[b-gt6gyxw840] {
    font-family: var(--b4u-font-display); font-size: .75rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--b4u-text-muted); margin: 0 0 .75rem;
}
/* Search deep-links target this element directly (#<entry-id> on the <details> itself);
   matches EventManagerDocs.razor.css's chapter-heading rule so the fixed navbar never
   covers the target after a jump. */
.b4u-faq-item[b-gt6gyxw840] { border-bottom: 1px solid var(--b4u-border); scroll-margin-top: 5rem; }
.b4u-faq-q[b-gt6gyxw840] {
    cursor: pointer; list-style: none; padding: .875rem 1.75rem .875rem 0; position: relative;
    font-family: var(--b4u-font-display); font-weight: 600; font-size: 1rem; color: var(--b4u-text);
}
.b4u-faq-q[b-gt6gyxw840]::-webkit-details-marker { display: none; }
.b4u-faq-q[b-gt6gyxw840]::after {
    content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
    font-size: 1.25rem; line-height: 1; color: var(--b4u-text-muted);
}
.b4u-faq-item[open] .b4u-faq-q[b-gt6gyxw840]::after { content: "\2212"; }
.b4u-faq-a[b-gt6gyxw840] { padding: 0 0 1rem; }
.b4u-faq-a[b-gt6gyxw840]  p { color: var(--b4u-text-secondary); line-height: 1.7; margin: 0 0 .5rem; }
.b4u-faq-a[b-gt6gyxw840]  a { color: var(--b4u-primary); }
.b4u-faq-a[b-gt6gyxw840]  strong { color: var(--b4u-text); }
/* /Components/Pages/EventDetail.razor.rz.scp.css */
.b4u-ed-hero[b-u5v6hvut23] { background: var(--b4u-hero-gradient); padding: 100px 0 0; }
.b4u-ed-crumb[b-u5v6hvut23] { display: flex; align-items: center; gap: 8px; padding: 0 0 24px; color: rgba(255,255,255,0.7); font-size: 13px; }
.b4u-ed-crumb a[b-u5v6hvut23] { color: rgba(255,255,255,0.6); text-decoration: none; }
.b4u-ed-card[b-u5v6hvut23] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-bottom: none; border-radius: 20px 20px 0 0; padding: 32px 36px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; }
.b4u-ed-main[b-u5v6hvut23] { flex: 1; min-width: 280px; }
.b4u-ed-titlerow[b-u5v6hvut23] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.b4u-ed-title[b-u5v6hvut23] { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--b4u-text); margin: 0; }
.b4u-ed-meta[b-u5v6hvut23] { display: flex; flex-wrap: wrap; gap: 20px; color: var(--b4u-text-secondary); font-size: 14px; }
.b4u-ed-meta span[b-u5v6hvut23] { display: flex; align-items: center; gap: 6px; }
.b4u-ed-meta span :first-child[b-u5v6hvut23] { color: var(--b4u-primary); }
.b4u-ed-tags[b-u5v6hvut23] { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.b4u-ed-tag[b-u5v6hvut23] { background: var(--b4u-primary-light); color: var(--b4u-primary); padding: 4px 14px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.b4u-ed-cta[b-u5v6hvut23] { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.b4u-ed-cta-sub[b-u5v6hvut23] { display: flex; gap: 8px; flex-wrap: wrap; }
/* Desktop (>880px): the wrapper is transparent (display:contents), so Results and the nested
   live-buttons row lay out exactly as the three separate children did before → byte-identical. */
.b4u-ed-cta-actions[b-u5v6hvut23] { display: contents; }
.b4u-ed-body[b-u5v6hvut23] { padding-bottom: 48px; }
/* No `overflow: hidden` here: it would clip the file manager's ⋯ dropdown, which is absolutely
   positioned inside this panel and is taller than the space left below (or above) its row. The
   radius only rounds the bottom corners, and no child paints there — the partners carousel's
   blurred fill is already clipped by its own `.b4u-ed-partner` / `-viewport` ancestors. */
.b4u-ed-panel[b-u5v6hvut23] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-top: none; border-radius: 0 0 20px 20px; }
.b4u-ed-tabcontent[b-u5v6hvut23] { padding: 24px 28px; }
.b4u-ed-infogrid[b-u5v6hvut23] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.b4u-ed-infocard[b-u5v6hvut23] { background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 12px; padding: 14px 16px; }
.b4u-ed-infocard-h[b-u5v6hvut23] { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--b4u-text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.b4u-ed-infocard-h :first-child[b-u5v6hvut23] { color: var(--b4u-primary); }
.b4u-ed-infocard-v[b-u5v6hvut23] { font-size: 14px; color: var(--b4u-text); font-weight: 500; }
.b4u-ed-h[b-u5v6hvut23] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin: 0 0 12px; }
.b4u-ed-desc[b-u5v6hvut23] { color: var(--b4u-text-secondary); font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.b4u-ed-glance[b-u5v6hvut23] { display: flex; gap: 32px; flex-wrap: wrap; }
.b4u-ed-stat[b-u5v6hvut23] { text-align: center; }
.b4u-ed-stat .n[b-u5v6hvut23] { display: block; font-size: 26px; font-weight: 800; color: var(--b4u-text); }
.b4u-ed-stat .l[b-u5v6hvut23] { font-size: 13px; color: var(--b4u-text-muted); }
.b4u-ed-prize[b-u5v6hvut23] { margin-bottom: 24px; }
.b4u-ed-prize h3[b-u5v6hvut23] { font-size: 16px; font-weight: 700; color: var(--b4u-text); margin: 0 0 4px; }
.b4u-ed-prizetable[b-u5v6hvut23] { width: 100%; border-collapse: collapse; margin-top: 8px; }
.b4u-ed-prizetable td[b-u5v6hvut23] { padding: 8px 12px; border-bottom: 1px solid var(--b4u-border); font-size: 14px; color: var(--b4u-text-secondary); }
.b4u-ed-prizetable td:last-child[b-u5v6hvut23] { text-align: right; font-weight: 700; color: var(--b4u-text); }
.b4u-ed-prizetable tr.is-total td[b-u5v6hvut23] { border-top: 2px solid var(--b4u-border); border-bottom: none; font-weight: 800; color: var(--b4u-text); }
.b4u-ed-files[b-u5v6hvut23] { list-style: none; padding: 0; margin: 0; }
.b4u-ed-files li[b-u5v6hvut23] { padding: 10px 0; border-bottom: 1px solid var(--b4u-border); display: flex; align-items: center; gap: 10px; }
.b4u-ed-files a[b-u5v6hvut23] { display: inline-flex; align-items: center; gap: 8px; color: var(--b4u-primary); text-decoration: none; font-weight: 600; }
.b4u-ed-files .d[b-u5v6hvut23] { color: var(--b4u-text-muted); font-size: 13px; }
.b4u-ed-contact[b-u5v6hvut23] { display: flex; flex-direction: column; gap: 12px; color: var(--b4u-text-secondary); font-size: 14px; }
.b4u-ed-contact a[b-u5v6hvut23] { color: var(--b4u-primary); }
/* Event Partners carousel lives in EventPartnersStrip.razor(.css) — scoped there. */
.b4u-ed-sub[b-u5v6hvut23] { margin-bottom: 16px; }
.b4u-ed-fileext[b-u5v6hvut23] { flex: 0 0 auto; min-width: 42px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 3px 8px; border-radius: 6px; background: var(--b4u-primary-light); color: var(--b4u-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.b4u-ed-locwrap[b-u5v6hvut23] { margin: 8px 0 28px; }
.b4u-ed-loc-head[b-u5v6hvut23] { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.b4u-ed-loc-name[b-u5v6hvut23] { display: inline-flex; align-items: center; gap: 6px; color: var(--b4u-text-secondary); font-size: 14px; }
.b4u-ed-loc-name strong[b-u5v6hvut23] { color: var(--b4u-text); }
.b4u-ed-directions[b-u5v6hvut23] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--b4u-border); border-radius: 10px; color: var(--b4u-primary); text-decoration: none; font-size: 13px; font-weight: 600; }
.b4u-ed-map[b-u5v6hvut23] { width: 100%; height: 320px; border: 1px solid var(--b4u-border); border-radius: 14px; display: block; }

.b4u-ed-tabskel[b-u5v6hvut23] { padding: 8px 2px 24px; }
.b4u-ed-taberror[b-u5v6hvut23] {
    display: flex; align-items: center; gap: 12px;
    padding: 24px; color: var(--b4u-text-secondary);
    font-size: 14px;
}
.b4u-ed-taberror-retry[b-u5v6hvut23] {
    background: transparent; border: 1px solid var(--b4u-border); border-radius: 8px;
    padding: 7px 14px; color: var(--b4u-primary); font-weight: 700; cursor: pointer;
}
.b4u-ed-taberror-retry:hover[b-u5v6hvut23] { background: var(--b4u-primary-light); }

/* Tablet / wrapped zone: the header flex-wraps, so stack the actions into a centered,
   width-capped block. */
@media (max-width: 880px) {
    .b4u-ed-cta[b-u5v6hvut23] { align-items: stretch; width: 100%; max-width: 440px; margin: 0 auto; }

    .b4u-ed-cta[b-u5v6hvut23]  .b4u-aqa { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 6px; }
    .b4u-ed-cta[b-u5v6hvut23]  .b4u-aqa-btn { justify-content: center; padding: 7px 9px; }

    .b4u-ed-cta[b-u5v6hvut23]  .b4u-btn,
    .b4u-ed-cta[b-u5v6hvut23]  .b4u-eligcta { width: 100%; justify-content: center; }

    /* .cta is RegOpensHeroCta's countdown card. align-items:stretch does NOT stretch an item
       that has an explicit width, and that card sets width:340px (correct on desktop) — so
       without this it sat left-aligned inside the 440px column while the sibling button grid
       spanned the full width. Width only: .cta is a column flex container, so the
       justify-content above it would mean something different here. */
    .b4u-ed-cta[b-u5v6hvut23]  .cta { width: 100%; }

    /* The wrapper becomes a real grid; the nested live-row flattens (display:contents) so its
       buttons become grid items alongside Results. */
    .b4u-ed-cta-actions[b-u5v6hvut23] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .b4u-ed-cta-actions .b4u-ed-cta-sub[b-u5v6hvut23] { display: contents; }
    /* Uniform sizing for the Results/Live buttons in the grid. */
    .b4u-ed-cta-actions[b-u5v6hvut23]  .b4u-btn { padding: 11px 12px; font-size: 14px; }
    /* Results is the only .b4u-btn that is a DIRECT child of the wrapper (Live buttons are nested in
       .b4u-ed-cta-sub, so they are grandchildren). Direct-child match spans ONLY Results. */
    .b4u-ed-cta-actions.has-two-live[b-u5v6hvut23] >  .b4u-btn { grid-column: 1 / -1; }
    /* 0 or 1 live button → single column so each action spans full width. */
    .b4u-ed-cta-actions:not(.has-two-live)[b-u5v6hvut23] { grid-template-columns: 1fr; }
}

/* Phone: same stack, but full-bleed (no 440px cap). */
@media (max-width: 640px) {
    .b4u-ed-cta[b-u5v6hvut23] { max-width: none; }
}
/* /Components/Pages/EventEligibilityCheck.razor.rz.scp.css */
.b4u-eligp-hero[b-t262xy548w] { background: var(--b4u-hero-gradient); padding: 100px 0 40px; }
.b4u-eligp-crumb[b-t262xy548w] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.b4u-eligp-crumb a[b-t262xy548w] { color: rgba(255,255,255,0.6); text-decoration: none; }
.b4u-eligp-crumb span[b-t262xy548w] { color: rgba(255,255,255,0.85); font-weight: 600; }
.b4u-eligp-title[b-t262xy548w] { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; color: #fff; margin: 0; }
.b4u-eligp-body[b-t262xy548w] { padding: 28px 0 72px; max-width: 820px; }

.b4u-eligp-banner[b-t262xy548w] {
    display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px;
    border-radius: 16px; margin-bottom: 24px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.b4u-eligp-banner--met[b-t262xy548w]     { --accent: var(--b4u-success); }
.b4u-eligp-banner--missing[b-t262xy548w] { --accent: var(--b4u-warning); }
.b4u-eligp-banner--failed[b-t262xy548w]  { --accent: var(--b4u-primary); }
.b4u-eligp-banner-ico[b-t262xy548w] {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}
.b4u-eligp-banner-title[b-t262xy548w] { font-size: 17px; font-weight: 800; color: var(--b4u-text); margin: 2px 0 4px; }
.b4u-eligp-banner-msg[b-t262xy548w] { font-size: 13.5px; color: var(--b4u-text-secondary); line-height: 1.55; margin: 0; }

.b4u-eligp-group[b-t262xy548w] {
    font-size: 12px; font-weight: 800; color: var(--b4u-primary);
    text-transform: uppercase; letter-spacing: .06em; margin: 24px 0 12px;
}
.b4u-eligp-rows[b-t262xy548w] { display: flex; flex-direction: column; gap: 8px; }
.b4u-eligp-row[b-t262xy548w] {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border: 1.5px solid var(--b4u-border); border-radius: 14px; background: var(--b4u-bg-surface);
}
.b4u-eligp-row--missing[b-t262xy548w] { border-color: color-mix(in srgb, var(--b4u-warning) 40%, transparent); background: color-mix(in srgb, var(--b4u-warning) 5%, transparent); }
.b4u-eligp-row--failed[b-t262xy548w]  { border-color: color-mix(in srgb, var(--b4u-primary) 40%, transparent); background: color-mix(in srgb, var(--b4u-primary) 5%, transparent); }
.b4u-eligp-row-ico[b-t262xy548w] {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.b4u-eligp-row--met     .b4u-eligp-row-ico[b-t262xy548w] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 18%, transparent); }
.b4u-eligp-row--missing .b4u-eligp-row-ico[b-t262xy548w] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 18%, transparent); }
.b4u-eligp-row--failed  .b4u-eligp-row-ico[b-t262xy548w] { color: var(--b4u-primary); background: color-mix(in srgb, var(--b4u-primary) 18%, transparent); }
.b4u-eligp-row--pending .b4u-eligp-row-ico[b-t262xy548w] { color: var(--b4u-text-muted); background: color-mix(in srgb, var(--b4u-text-muted) 18%, transparent); }
.b4u-eligp-row-label[b-t262xy548w] { font-size: 14.5px; font-weight: 700; color: var(--b4u-text); margin-bottom: 2px; }
.b4u-eligp-row-detail[b-t262xy548w] { font-size: 13px; color: var(--b4u-text-muted); }
.b4u-eligp-foot[b-t262xy548w] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
/* /Components/Pages/EventRegister.razor.rz.scp.css */
.b4u-reg[b-uqmqhj691d] { min-height: 100vh; background: var(--b4u-bg); }

.b4u-reg-hero[b-uqmqhj691d] {
    background: var(--b4u-hero-gradient);
    padding: 100px 0 40px;
}
.b4u-reg-back[b-uqmqhj691d] {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--b4u-text-muted);
    font-size: 13px;
    text-decoration: none;
}
.b4u-reg-back:hover[b-uqmqhj691d] { color: rgba(255, 255, 255, 0.85); }
.b4u-reg-title[b-uqmqhj691d] {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}
.b4u-reg-sub[b-uqmqhj691d] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.b4u-reg-body[b-uqmqhj691d] {
    max-width: 800px;
    padding-bottom: 64px;
}

.b4u-reg-card[b-uqmqhj691d] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 20px;
    padding: 28px 32px;
    min-height: 340px;
}

.b4u-reg-nav[b-uqmqhj691d] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.b4u-reg-licchip[b-uqmqhj691d] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 10px 16px;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
}
.b4u-reg-licchip-lbl[b-uqmqhj691d] {
    color: var(--b4u-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.b4u-reg-licchip[b-uqmqhj691d]  .b4u-flag { width: 24px; height: 17px; }
.b4u-reg-licchip-num[b-uqmqhj691d] { color: var(--b4u-text); font-weight: 700; font-size: 15px; }
.b4u-reg-licchip-fed[b-uqmqhj691d] { color: var(--b4u-text-muted); font-size: 13px; }
.b4u-reg-licchip-btn[b-uqmqhj691d] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--b4u-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.b4u-reg-licchip-btn:hover[b-uqmqhj691d] { text-decoration: underline; }

/* ============ mobile: reclaim horizontal space ============
   Container (24px) + card (32px) ate 56px each side on phones. Trim both, scoped
   to the register flow, so the squad cards get the width back without touching the
   site-wide .b4u-container. */
@media (max-width: 640px) {
    .b4u-reg .b4u-container[b-uqmqhj691d] { padding-left: 14px; padding-right: 14px; }
    .b4u-reg-card[b-uqmqhj691d] { padding: 22px 16px; border-radius: 16px; }
    .b4u-reg-body[b-uqmqhj691d] { padding-bottom: 44px; }
    .b4u-reg-nav[b-uqmqhj691d] { gap: 12px; }
}
/* /Components/Pages/EventRegisterTeam.razor.rz.scp.css */
.b4u-reg[b-zjem5emoj2] { min-height: 100vh; background: var(--b4u-bg); }
.b4u-reg-hero[b-zjem5emoj2] { background: var(--b4u-hero-gradient); padding: 100px 0 40px; }
.b4u-reg-back[b-zjem5emoj2] { display: inline-block; margin-bottom: 12px; color: var(--b4u-text-muted); font-size: 13px; text-decoration: none; }
.b4u-reg-back:hover[b-zjem5emoj2] { color: rgba(255, 255, 255, 0.85); }
.b4u-reg-title[b-zjem5emoj2] { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.b4u-reg-sub[b-zjem5emoj2] { font-size: 14px; color: rgba(255, 255, 255, 0.4); margin: 0; }
.b4u-reg-body[b-zjem5emoj2] { max-width: 800px; padding-bottom: 64px; }
.b4u-reg-card[b-zjem5emoj2] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 20px; padding: 28px 32px; min-height: 340px; }
.b4u-reg-nav[b-zjem5emoj2] { display: flex; justify-content: space-between; margin-top: 20px; }

/* mobile: reclaim horizontal space (see EventRegister.razor.css) — scoped to the
   register flow so the squad cards get the width back without touching the
   site-wide .b4u-container. */
@media (max-width: 640px) {
    .b4u-reg .b4u-container[b-zjem5emoj2] { padding-left: 14px; padding-right: 14px; }
    .b4u-reg-card[b-zjem5emoj2] { padding: 22px 16px; border-radius: 16px; }
    .b4u-reg-body[b-zjem5emoj2] { padding-bottom: 44px; }
    .b4u-reg-nav[b-zjem5emoj2] { gap: 12px; }
}
/* /Components/Pages/Events.razor.rz.scp.css */
/* Hero + search only — the listing layout (toolbar, grid, pills, etc.) moved to
   EventsListing.razor.css with the extracted markup. Section spacing is global. */
/* min-height keeps a tall map canvas now that the hero holds only a search box — without it the
   content-driven hero would shrink and show LESS map. The search box is anchored to the BOTTOM
   (flex-end) so the pin cluster + arcs in the map centre stay unobstructed. */
.b4u-evt-hero[b-g5dl69z8la] { background: var(--b4u-hero-gradient); padding: 130px 24px 26px; text-align: center;
    position: relative; overflow: hidden; min-height: clamp(360px, 46vh, 500px);
    display: flex; flex-direction: column; justify-content: flex-end; }

/* The hero text is gone, so the scrim only needs to keep the search box + top nav legible, not a
   whole centred title block — lighten it well down from 0.55 so the live map reads clearly. */
.b4u-evt-hero[b-g5dl69z8la]  .b4u-evt-map-scrim {
    background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(8,12,24,0.34), rgba(8,12,24,0) 68%); }

/* Light map variant: the MAP does not draw the ocean — the hero does. */
.b4u-evt-hero--map-light[b-g5dl69z8la] { background: linear-gradient(135deg, #2B4A6F 0%, #3C5D84 55%, #314F70 100%); }
.b4u-evt-hero--map-light[b-g5dl69z8la]  .b4u-evt-map-scrim {
    background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(11,25,45,0.4), rgba(11,25,45,0) 70%); }
.b4u-evt-hero--map-light[b-g5dl69z8la]  .b4u-evt-map image { filter: drop-shadow(0 2px 5px rgba(11,25,45,0.45)); }
.b4u-evt-hero--map-light[b-g5dl69z8la]  .b4u-pin-label { fill: #1E293B; stroke: rgba(255,255,255,0.9); }

/* Above the map, but transparent to clicks so pins stay reachable.
   max-width must be >= the search wrap's below, or it silently clamps the box narrower. */
.b4u-evt-hero-inner[b-g5dl69z8la] { max-width: 960px; margin: 0 auto; position: relative; z-index: 2; pointer-events: none; }

/* Screen-reader-only: keeps the <h1> in the a11y/DOM heading order while hiding it visually. */
.b4u-visually-hidden[b-g5dl69z8la] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Glass search, same shape as the Results page but a DARK tint instead of white: the white glass
   washed out over the (light-variant) map, so a semi-opaque dark backing keeps the white text legible
   over BOTH map variants. Kept at the bottom-centre of the hero (.b4u-evt-hero uses flex-end above).
   pointer-events is re-enabled here because .b4u-evt-hero-inner is click-through so map pins stay reachable. */
.b4u-evt-search-wrap[b-g5dl69z8la] { position: relative; display: flex; align-items: center; max-width: 960px;
    margin: 0 auto; pointer-events: auto; }
.b4u-evt-search-wrap[b-g5dl69z8la]  svg { position: absolute; left: 16px; color: rgba(255,255,255,0.7); pointer-events: none; }
.b4u-evt-search-input[b-g5dl69z8la] { width: 100%; padding: 14px 20px 14px 48px; border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.28); background: rgba(15,23,42,0.55); color: #fff;
    font-size: 15px; outline: none; box-shadow: 0 8px 24px rgba(8,12,24,0.35);
    transition: border-color 0.2s, background 0.2s; }
.b4u-evt-search-input[b-g5dl69z8la]::placeholder { color: rgba(255,255,255,0.62); }
.b4u-evt-search-input:focus[b-g5dl69z8la] { border-color: rgba(255,255,255,0.5); background: rgba(15,23,42,0.66); }
/* /Components/Pages/FederationDetail.razor.rz.scp.css */
.b4u-feddetail-hero[b-ciqugl1vv7] { position: relative; padding: 100px 24px 48px;
    background: linear-gradient(135deg, var(--fed-primary, var(--b4u-primary)), var(--fed-accent, var(--b4u-primary))); overflow: hidden; }
.b4u-feddetail-hero[b-ciqugl1vv7]::before { content: ""; position: absolute; inset: 0; background-image: var(--fed-banner, none);
    background-size: cover; background-position: center; opacity: .18; }
.b4u-feddetail-hero-inner[b-ciqugl1vv7] { position: relative; max-width: 1100px; margin: 0 auto; }
.b4u-feddetail-back[b-ciqugl1vv7] { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85);
    text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 22px; }
.b4u-feddetail-back:hover[b-ciqugl1vv7] { color: #fff; }
.b4u-feddetail-brand[b-ciqugl1vv7] { display: flex; align-items: center; gap: 18px; }
.b4u-feddetail-logo[b-ciqugl1vv7] { width: 76px; height: 76px; border-radius: 16px; flex-shrink: 0; background: rgba(255,255,255,.95);
    display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800;
    color: var(--fed-primary, var(--b4u-primary)); overflow: hidden; }
.b4u-feddetail-logo img[b-ciqugl1vv7] { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Fallback swap — see /app/image-fallback.js. */
.b4u-feddetail-initials.is-hidden[b-ciqugl1vv7] { display: none; }
[data-b4u-noimg] .b4u-feddetail-initials.is-hidden[b-ciqugl1vv7] { display: inline; }
.b4u-feddetail-eyebrow[b-ciqugl1vv7] { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.b4u-feddetail-title[b-ciqugl1vv7] { font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: #fff; margin: 4px 0 0; letter-spacing: -.02em; }
.b4u-feddetail-season[b-ciqugl1vv7] { font-size: 15px; color: rgba(255,255,255,.85); margin-top: 6px; font-weight: 600; }
.b4u-feddetail-brand[b-ciqugl1vv7] { flex-wrap: wrap; }
.b4u-feddetail-listing[b-ciqugl1vv7] { margin-left: auto; display: inline-flex; align-items: center; gap: 16px;
    text-decoration: none; background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 14px 20px 14px 16px;
    transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.b4u-feddetail-listing:hover[b-ciqugl1vv7] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.b4u-feddetail-listing-icon[b-ciqugl1vv7] { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--fed-accent, var(--b4u-primary)), var(--fed-primary, var(--b4u-primary))); }
.b4u-feddetail-listing-text[b-ciqugl1vv7] { display: flex; flex-direction: column; text-align: left; }
.b4u-feddetail-listing-eyebrow[b-ciqugl1vv7] { font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255,255,255,.5); }
.b4u-feddetail-listing-title[b-ciqugl1vv7] { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px;
    font-size: 16px; font-weight: 700; color: #fff; }
.b4u-feddetail-listing-title svg[b-ciqugl1vv7] { color: rgba(255,255,255,.7); }
@media (max-width: 640px) {
    .b4u-feddetail-listing[b-ciqugl1vv7] { margin-left: 0; margin-top: 18px; width: 100%; }
}
/* /Components/Pages/Federations.razor.rz.scp.css */
/* Hero — same look as the other public pages. The b4u-evt-hero* classes are scoped
   per-page in this project (Events/Pricing/NewRequest each carry their own copy), so
   the listing page needs its own. */
.b4u-evt-hero[b-yd6s53r3lj] { background: var(--b4u-hero-gradient); padding: 120px 24px 72px; text-align: center; }
.b4u-evt-hero-inner[b-yd6s53r3lj] { max-width: 720px; margin: 0 auto; }
.b4u-evt-h1[b-yd6s53r3lj] { font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0 0 12px; font-family: var(--b4u-font-display); }
.b4u-evt-sub[b-yd6s53r3lj] { font-size: 17px; color: rgba(255,255,255,0.5); max-width: 560px; margin: 0 auto; line-height: 1.6; }
/* /Components/Pages/Home.razor.rz.scp.css */
/* min-height drops from 92vh: the panels now occupy the space it was reserving, and leaving
   it would add dead space below them on tall screens. */
.b4u-hero[b-gltrnj74y8] { background: var(--b4u-hero-gradient); min-height: 640px; display: flex; align-items: center; justify-content: center; padding: 120px 24px 80px; text-align: center; }
.b4u-hero-inner[b-gltrnj74y8] { max-width: 1000px; width: 100%; }
.b4u-hero-badge[b-gltrnj74y8] { display: inline-flex; align-items: center; gap: 8px; background: var(--b4u-primary-light); color: var(--b4u-primary); border-radius: 20px; padding: 6px 16px; margin-bottom: 20px; font-size: 13px; font-weight: 600; }
/* No `.b4u-hero-title span { display: block }` — that is what stacked the old three lines. */
.b4u-hero-title[b-gltrnj74y8] { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; color: #fff; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em; font-family: var(--b4u-font-display); }
.b4u-hero-accent[b-gltrnj74y8] { color: var(--b4u-primary); }
.b4u-hero-sub[b-gltrnj74y8] { font-size: 14px; color: rgba(255,255,255,0.6); max-width: 560px; margin: 0 auto 14px; line-height: 1.6; }
/* Carried through unchanged: the hero no longer uses it, but the bottom CTA section does. */
.b4u-hero-cta[b-gltrnj74y8] { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* One inline row, not a 3-up block. */
.b4u-hero-stats[b-gltrnj74y8] { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 0 0 20px; font-size: 13px; color: rgba(255,255,255,0.4); }
.b4u-hero-stat[b-gltrnj74y8] { display: inline-flex; align-items: center; gap: 6px; }
.b4u-hero-stat b[b-gltrnj74y8] { color: #fff; font-weight: 800; }
/* The chyron sits flush against the bottom of the dark hero, full-bleed edge-to-edge. It is
   outside .b4u-container, so width:100% already spans the viewport; this just removes any
   inherited spacing and pins it to the hero with no gap. */
.b4u-hero-chyron[b-gltrnj74y8] { margin: 0; }
.b4u-section[b-gltrnj74y8] { padding: 80px 0 0; background: var(--b4u-bg); }
.b4u-section--last[b-gltrnj74y8] { padding-bottom: 80px; }
.b4u-section-head[b-gltrnj74y8] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }
.b4u-section-title[b-gltrnj74y8] { font-size: 28px; font-weight: 700; color: var(--b4u-text); letter-spacing: -0.02em; margin: 0 0 4px; }
/* Phones: the head wraps and the "view all" button drops onto its own line under the
   title. A ghost button draws no box, so its 24px inset read as nothing but a stray
   indent -- the arrow floated in from the title's left edge with no rule explaining why.
   Flush padding puts the arrow on the title's margin. The hover pill goes with it: with
   no padding there is nothing left to tint, so hover becomes a colour change. */
@media (max-width: 640px) {
    .b4u-section-head[b-gltrnj74y8] { gap: 6px; margin-bottom: 24px; }
    .b4u-section-head[b-gltrnj74y8]  .b4u-btn--ghost { padding-left: 0; padding-right: 0; }
    .b4u-section-head[b-gltrnj74y8]  .b4u-btn--ghost:hover { background: none; color: var(--b4u-primary); }
}
.b4u-center[b-gltrnj74y8] { text-align: center; }
.b4u-features-head[b-gltrnj74y8] { text-align: center; margin: 0 auto 48px; max-width: 600px; }
.b4u-eventgrid[b-gltrnj74y8] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
/* Features marquee — smooth continuous horizontal scroll (full-bleed).
   The track holds two copies of the cards; translateX(-50%) loops one copy seamlessly. */
.b4u-marquee[b-gltrnj74y8] { overflow: hidden; padding: 8px 0; }
.b4u-marquee-track[b-gltrnj74y8] { display: flex; gap: 20px; width: max-content; animation: b4u-marquee-scroll-b-gltrnj74y8 60s linear infinite; }
.b4u-marquee:hover .b4u-marquee-track[b-gltrnj74y8] { animation-play-state: paused; }
.b4u-marquee .b4u-feature[b-gltrnj74y8] { width: 300px; flex-shrink: 0; }
@keyframes b4u-marquee-scroll-b-gltrnj74y8 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .b4u-marquee[b-gltrnj74y8] { overflow-x: auto; }
    .b4u-marquee-track[b-gltrnj74y8] { animation: none; }
}
.b4u-feature[b-gltrnj74y8] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; padding: 28px; transition: transform 0.3s, border-color 0.3s; }
.b4u-feature:hover[b-gltrnj74y8] { transform: translateY(-4px); border-color: var(--b4u-border-hover); }
.b4u-feature-icon[b-gltrnj74y8] { width: 44px; height: 44px; border-radius: 12px; background: var(--b4u-primary-light); color: var(--b4u-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.b4u-feature-title[b-gltrnj74y8] { font-size: 17px; font-weight: 600; color: var(--b4u-text); margin: 0 0 8px; }
.b4u-feature-desc[b-gltrnj74y8] { font-size: 14px; color: var(--b4u-text-muted); line-height: 1.6; margin: 0; }
.b4u-cta[b-gltrnj74y8] { padding: 80px 24px; text-align: center; background: linear-gradient(135deg, var(--b4u-primary-light) 0%, var(--b4u-bg) 50%, var(--b4u-bg-surface) 100%); }
.b4u-cta-inner[b-gltrnj74y8] { max-width: 640px; margin: 0 auto; }
.b4u-cta .b4u-section-title[b-gltrnj74y8] { font-size: 32px; margin-bottom: 16px; }
.b4u-cta .b4u-section-sub[b-gltrnj74y8] { margin-bottom: 32px; font-size: 17px; }
/* /Components/Pages/MyRegistrations.razor.rz.scp.css */
.b4u-rg-hero[b-r4u8kd3h3y] { background: var(--b4u-hero-gradient); padding: 108px 24px 56px; }
.b4u-rg-wrap[b-r4u8kd3h3y] { max-width: 1040px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.b4u-rg-crumb[b-r4u8kd3h3y] { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: rgba(255,255,255,0.55); }
.b4u-rg-crumb a[b-r4u8kd3h3y] { color: rgba(255,255,255,0.45); text-decoration: none; }
.b4u-rg-title[b-r4u8kd3h3y] { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0; }
.b4u-rg-sub[b-r4u8kd3h3y] { font-size: 15px; color: rgba(255,255,255,0.55); margin: 8px 0 0; }
.b4u-rg-body[b-r4u8kd3h3y] { padding-top: 24px; padding-bottom: 72px; }
.b4u-rg-summary[b-r4u8kd3h3y] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.b4u-rg-sumcard[b-r4u8kd3h3y] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.b4u-rg-sumicon[b-r4u8kd3h3y] { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--b4u-bg-surface); color: var(--b4u-text-muted); border: 1px solid var(--b4u-border); }
.b4u-rg-sumicon--primary[b-r4u8kd3h3y] { color: var(--b4u-primary); background: var(--b4u-primary-light); border-color: color-mix(in srgb, var(--b4u-primary) 25%, transparent); }
.b4u-rg-sumicon--success[b-r4u8kd3h3y] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 11%, transparent); border-color: color-mix(in srgb, var(--b4u-success) 25%, transparent); }
.b4u-rg-sumicon--warning[b-r4u8kd3h3y] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 11%, transparent); border-color: color-mix(in srgb, var(--b4u-warning) 25%, transparent); }
.b4u-rg-sumtext[b-r4u8kd3h3y] { min-width: 0; }
.b4u-rg-sumval[b-r4u8kd3h3y] { font-size: 19px; font-weight: 800; color: var(--b4u-text); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4u-rg-sumlabel[b-r4u8kd3h3y] { font-size: 12.5px; color: var(--b4u-text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4u-rg-controls[b-r4u8kd3h3y] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.b4u-rg-tabs[b-r4u8kd3h3y] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b4u-rg-tab[b-r4u8kd3h3y] { display: inline-flex; align-items: center; gap: 8px; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); color: var(--b4u-text-secondary); border-radius: 11px; padding: 9px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; transition: all 0.15s; }
.b4u-rg-tab.is-active[b-r4u8kd3h3y] { background: var(--b4u-primary); border-color: var(--b4u-primary); color: #fff; font-weight: 700; box-shadow: 0 6px 16px color-mix(in srgb, var(--b4u-primary) 20%, transparent); }
.b4u-rg-tabcount[b-r4u8kd3h3y] { font-size: 11.5px; font-weight: 800; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--b4u-bg-surface); color: var(--b4u-text-muted); }
.b4u-rg-tab.is-active .b4u-rg-tabcount[b-r4u8kd3h3y] { background: rgba(255,255,255,0.22); color: #fff; }
.b4u-rg-layout[b-r4u8kd3h3y] { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--b4u-border); background: var(--b4u-bg-card); color: var(--b4u-text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.b4u-rg-cards[b-r4u8kd3h3y] { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 720px) { .b4u-rg-summary[b-r4u8kd3h3y] { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .b4u-rg-layout[b-r4u8kd3h3y] { display: none; } }
/* /Components/Pages/MyTeams.razor.rz.scp.css */
.b4u-tm-hero[b-twwwe8pagg] { background: var(--b4u-hero-gradient); padding: 108px 24px 56px; }
.b4u-tm-wrap[b-twwwe8pagg] { max-width: 1040px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.b4u-tm-crumb[b-twwwe8pagg] { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: rgba(255,255,255,0.55); }
.b4u-tm-crumb a[b-twwwe8pagg] { color: rgba(255,255,255,0.45); text-decoration: none; }
.b4u-tm-title[b-twwwe8pagg] { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0; }
.b4u-tm-sub[b-twwwe8pagg] { font-size: 15px; color: rgba(255,255,255,0.55); margin: 8px 0 0; }
.b4u-tm-body[b-twwwe8pagg] { padding-top: 24px; padding-bottom: 72px; }
/* Active/Past filter tabs (same pill style as My Registrations). */
.b4u-tm-tabs[b-twwwe8pagg] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.b4u-tm-tab[b-twwwe8pagg] { display: inline-flex; align-items: center; gap: 8px; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); color: var(--b4u-text-secondary); border-radius: 11px; padding: 9px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; transition: all 0.15s; }
.b4u-tm-tab.is-active[b-twwwe8pagg] { background: var(--b4u-primary); border-color: var(--b4u-primary); color: #fff; font-weight: 700; box-shadow: 0 6px 16px color-mix(in srgb, var(--b4u-primary) 20%, transparent); }
.b4u-tm-tabcount[b-twwwe8pagg] { font-size: 11.5px; font-weight: 800; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--b4u-bg-surface); color: var(--b4u-text-muted); }
.b4u-tm-tab.is-active .b4u-tm-tabcount[b-twwwe8pagg] { background: rgba(255,255,255,0.22); color: #fff; }
.b4u-tm-grid[b-twwwe8pagg] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .b4u-tm-grid[b-twwwe8pagg] { grid-template-columns: 1fr; } }
/* /Components/Pages/NewRequest.razor.rz.scp.css */
/* Hero — same look as the other public pages (copied so this page is self-contained). */
.b4u-evt-hero[b-7w61frbpti] { background: var(--b4u-hero-gradient); padding: 120px 24px 76px; text-align: center; }
.b4u-evt-hero-inner[b-7w61frbpti] { max-width: 720px; margin: 0 auto; }
.b4u-evt-h1[b-7w61frbpti] { font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0 0 12px; font-family: var(--b4u-font-display); }
.b4u-evt-sub[b-7w61frbpti] { font-size: 17px; color: rgba(255,255,255,0.5); max-width: 560px; margin: 0 auto; }

.b4u-section[b-7w61frbpti] { padding-top: 16px; padding-bottom: 64px; }
.b4u-nr-wrap[b-7w61frbpti] { max-width: 880px; margin: 0 auto; padding: 0 24px; }
/* White card holding the CognitoForms embed; pulled up to overlap the hero. The padding
   gives the inline form breathing room from the card edges (it rendered flush before). */
.b4u-nr-form[b-7w61frbpti] { background: #fff; border-radius: 16px; box-shadow: 0 16px 44px rgba(0,0,0,.18); overflow: hidden; margin-top: -40px; min-height: 560px; padding: 36px clamp(20px, 4vw, 48px); }
.b4u-nr-form[b-7w61frbpti]  iframe { display: block; width: 100%; border: 0; }
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* Hero — same look as the other public pages (copied so this page is self-contained). */
.b4u-evt-hero[b-y1pvan07xd] { background: var(--b4u-hero-gradient); padding: 120px 24px 80px; text-align: center; }
.b4u-evt-hero-inner[b-y1pvan07xd] { max-width: 720px; margin: 0 auto; }
.b4u-evt-h1[b-y1pvan07xd] { font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0 0 12px; font-family: var(--b4u-font-display); }
.b4u-evt-sub[b-y1pvan07xd] { font-size: 17px; color: rgba(255,255,255,0.5); max-width: 540px; margin: 0 auto 32px; }

.b4u-pricing-section[b-y1pvan07xd] { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; }
.b4u-pricing-grid[b-y1pvan07xd] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: -40px; }
.b4u-pricing-vat[b-y1pvan07xd] { text-align: right; margin-top: 12px; font-size: 13px; color: var(--b4u-text-muted); }
.b4u-pricing-custom[b-y1pvan07xd] { max-width: 700px; margin: 24px auto 0; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 20px; padding: 32px 36px; text-align: center; }
.b4u-pricing-custom p[b-y1pvan07xd] { font-size: 16px; color: var(--b4u-text-secondary); line-height: 1.6; margin: 0 0 20px; }
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Privacy Policy — ported from docs/design/full-project/other-pages.jsx (PrivacyPage).
   English-only static page; theme.css --b4u-* tokens keep it light/dark aware. */

/* ---------- hero ---------- */
.b4u-privacy-hero[b-1558ctct3q] {
    background: var(--b4u-hero-gradient);
    padding: 120px 24px 56px;
    text-align: center;
}

.b4u-privacy-badge[b-1558ctct3q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
    letter-spacing: 0.02em;
}

.b4u-privacy-h1[b-1558ctct3q] {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    font-family: var(--b4u-font-display);
}

.b4u-privacy-lead[b-1558ctct3q] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 540px;
    margin: 0 auto;
}

/* ---------- body wrap ---------- */
.b4u-privacy-wrap[b-1558ctct3q] {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 24px 72px;
}

.b4u-privacy-bar[b-1558ctct3q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.b4u-privacy-updated[b-1558ctct3q] {
    font-size: 13px;
    color: var(--b4u-text-muted);
}

.b4u-privacy-expand[b-1558ctct3q] {
    background: transparent;
    border: 1px solid var(--b4u-border);
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.b4u-privacy-expand:hover[b-1558ctct3q] {
    background: var(--b4u-bg-card-hover);
    border-color: var(--b4u-border-hover);
}

/* ---------- accordion (native <details>) ---------- */
.b4u-privacy-list[b-1558ctct3q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.b4u-privacy-item[b-1558ctct3q] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.b4u-privacy-item[open][b-1558ctct3q] {
    border-color: var(--b4u-border-hover);
}

.b4u-privacy-head[b-1558ctct3q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;            /* hide the default disclosure triangle (Firefox) */
}

.b4u-privacy-head[b-1558ctct3q]::-webkit-details-marker {
    display: none;               /* hide the default disclosure triangle (WebKit) */
}

.b4u-privacy-title[b-1558ctct3q] {
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--b4u-text);
}

.b4u-privacy-chev[b-1558ctct3q] {
    flex-shrink: 0;
    display: flex;
    color: var(--b4u-text-muted);
    transition: transform 0.25s ease;
}

.b4u-privacy-item[open] .b4u-privacy-chev[b-1558ctct3q] {
    transform: rotate(180deg);
}

.b4u-privacy-body[b-1558ctct3q] {
    padding: 16px 22px 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--b4u-text-secondary);
    border-top: 1px solid var(--b4u-border);
}

.b4u-privacy-body p[b-1558ctct3q] {
    margin: 0 0 12px;
}

.b4u-privacy-body p:last-child[b-1558ctct3q] {
    margin-bottom: 0;
}

.b4u-privacy-body ul[b-1558ctct3q] {
    margin: 0 0 12px;
    padding-left: 22px;
}

.b4u-privacy-body ul ul[b-1558ctct3q] {
    margin: 8px 0;
}

.b4u-privacy-body li[b-1558ctct3q] {
    margin-bottom: 6px;
}

.b4u-privacy-body h5[b-1558ctct3q] {
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 8px;
    color: var(--b4u-text);
}

.b4u-privacy-body h5:first-child[b-1558ctct3q] {
    margin-top: 0;
}

.b4u-privacy-strong[b-1558ctct3q] {
    font-weight: 600;
    color: var(--b4u-text);
}

/* ---------- contact callout ---------- */
.b4u-privacy-contact[b-1558ctct3q] {
    margin-top: 28px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 16px;
    padding: 24px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.b4u-privacy-contact-left[b-1558ctct3q] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.b4u-privacy-contact-icon[b-1558ctct3q] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--b4u-primary-light);
    color: var(--b4u-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.b4u-privacy-contact-title[b-1558ctct3q] {
    font-size: 15px;
    font-weight: 600;
    color: var(--b4u-text);
}

.b4u-privacy-contact-sub[b-1558ctct3q] {
    font-size: 13.5px;
    color: var(--b4u-text-muted);
    margin-top: 2px;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.b4u-pf-hero[b-giitig1in7] { background: var(--b4u-hero-gradient); padding: 108px 0 56px; }
/* The prototype constrains this page to 980px with 24px side padding (narrower than
   the global 1280px .b4u-container) — hero text and body share the same rail. */
.b4u-pf-hero > .b4u-container[b-giitig1in7],
.b4u-pf-body[b-giitig1in7] {
    max-width: 980px;
    margin-left: auto; margin-right: auto;
    padding-left: 24px; padding-right: 24px;
}
.b4u-pf-crumb[b-giitig1in7] { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.b4u-pf-crumb a[b-giitig1in7] { color: rgba(255,255,255,0.45); text-decoration: none; }
.b4u-pf-crumb span[b-giitig1in7] { color: rgba(255,255,255,0.8); }
.b4u-pf-crumb[b-giitig1in7]  svg { transform: rotate(-90deg); color: rgba(255,255,255,0.4); }
.b4u-pf-title[b-giitig1in7] { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0; font-family: var(--b4u-font-display); }
.b4u-pf-sub[b-giitig1in7] { font-size: 15px; color: rgba(255,255,255,0.55); margin: 8px 0 0; }

.b4u-pf-body[b-giitig1in7] { padding-top: 24px; padding-bottom: 72px; }
.b4u-pf-grid[b-giitig1in7] { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.b4u-pf-nav[b-giitig1in7] { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 88px; }
@media (max-width: 820px) {
    .b4u-pf-grid[b-giitig1in7] { display: block; }
    .b4u-pf-nav[b-giitig1in7] { position: static; flex-direction: row; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
}

.b4u-pf-nav-btn[b-giitig1in7] {
    display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border);
    color: var(--b4u-text-secondary); border-radius: 12px; padding: 11px 14px;
    cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; text-align: left;
    transition: all 0.15s;
}
.b4u-pf-nav-btn.is-active[b-giitig1in7] {
    background: var(--b4u-primary); border-color: var(--b4u-primary); color: #fff; font-weight: 700;
}
.b4u-pf-content[b-giitig1in7] { min-width: 0; }
/* /Components/Pages/Results.razor.rz.scp.css */
/* Hero + search — same look as Events (copied so this page is self-contained). */
.b4u-evt-hero[b-57ij5z6af0] { position: relative; overflow: hidden; background: var(--b4u-hero-gradient); padding: 120px 24px 60px; text-align: center; }
.b4u-evt-hero-inner[b-57ij5z6af0] { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.b4u-evt-h1[b-57ij5z6af0] { font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0 0 12px; font-family: var(--b4u-font-display); text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.b4u-evt-sub[b-57ij5z6af0] { font-size: 17px; color: rgba(255,255,255,0.72); max-width: 500px; margin: 0 auto 32px; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.b4u-evt-search-wrap[b-57ij5z6af0] { position: relative; display: flex; align-items: center; max-width: 540px; margin: 0 auto; }
.b4u-evt-search-wrap[b-57ij5z6af0]  svg { position: absolute; left: 16px; color: rgba(255,255,255,0.5); pointer-events: none; }
.b4u-evt-search-input[b-57ij5z6af0] { width: 100%; padding: 14px 20px 14px 48px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.12); color: #fff; font-size: 15px; outline: none; transition: border-color 0.2s, background 0.2s; }
.b4u-evt-search-input[b-57ij5z6af0]::placeholder { color: rgba(255,255,255,0.45); }
.b4u-evt-search-input:focus[b-57ij5z6af0] { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.18); }

/* ── EZLexer app-screenshot backdrop (Results hero only) ──────────────────── */
.b4u-res-hero-bg[b-57ij5z6af0] { position: absolute; inset: 0; overflow: hidden; }
.b4u-res-hero-bg img[b-57ij5z6af0] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: 0.5; animation: b4u-res-ken-b-57ij5z6af0 26s ease-in-out infinite alternate; }
/* Scrim: darken the left where the text sits, lift toward the image on the right.
   Base tone rgba(11,17,32,·) = the hero gradient's #0B1120 (unchanged in dark mode). */
.b4u-res-hero-scrim[b-57ij5z6af0] { position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(11,17,32,0.82) 0%, rgba(11,17,32,0.82) 34%, rgba(0,0,0,0.35) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 30%, rgba(0,0,0,0.35) 100%); }
@keyframes b4u-res-ken-b-57ij5z6af0 { 0% { transform: scale(1.06) translate(0, 0); } 100% { transform: scale(1.14) translate(-2%, -1.5%); } }

/* "Results powered by EZ Lexer" glass badge → link to /software */
.b4u-res-badge[b-57ij5z6af0] { display: inline-flex; align-items: center; gap: 11px; margin-top: 24px; padding: 9px 15px 9px 11px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; max-width: 100%; text-align: left; text-decoration: none; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.2s, border-color 0.2s; }
.b4u-res-badge:hover[b-57ij5z6af0] { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.b4u-res-badge img[b-57ij5z6af0] { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.b4u-res-badge span[b-57ij5z6af0] { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.78); }
.b4u-res-badge[b-57ij5z6af0]  svg { color: rgba(255,255,255,0.6); flex-shrink: 0; }

/* Staggered entrance fades (title/subtitle, then search/badge) */
@keyframes b4u-res-in-b-57ij5z6af0 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.b4u-res-anim-1[b-57ij5z6af0] { animation: b4u-res-in-b-57ij5z6af0 0.7s ease both; }
.b4u-res-anim-2[b-57ij5z6af0] { animation: b4u-res-in-b-57ij5z6af0 0.7s ease 0.15s both; }

/* Desktop: left-aligned hero with wider content + search (mobile stays centered) */
@media (min-width: 900px) {
    .b4u-evt-hero-inner[b-57ij5z6af0] { max-width: 1140px; text-align: left; }
    .b4u-evt-sub[b-57ij5z6af0] { margin: 0 0 32px; }
    .b4u-evt-search-wrap[b-57ij5z6af0] { max-width: 620px; margin: 0; }
}
@media (max-width: 899px) {
    .b4u-res-hero-bg img[b-57ij5z6af0] { object-position: 60% 42%; opacity: 0.42; }
    .b4u-res-hero-scrim[b-57ij5z6af0] { background: linear-gradient(180deg, rgba(11,17,32,0.82) 0%, rgba(0,0,0,0.55) 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .b4u-res-hero-bg img[b-57ij5z6af0], .b4u-res-anim-1[b-57ij5z6af0], .b4u-res-anim-2[b-57ij5z6af0] { animation: none; }
}

.b4u-section[b-57ij5z6af0] { padding-top: 16px; padding-bottom: 56px; }

/* Results bar + list */
.b4u-res-bar[b-57ij5z6af0] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.b4u-res-count[b-57ij5z6af0] { font-size: 15px; font-weight: 700; color: var(--b4u-text); }
/* Sort select + direction toggle, joined into a single pill (matches Events). */
.b4u-res-sort-control[b-57ij5z6af0] { display: flex; align-items: stretch; border: 1px solid var(--b4u-border); border-radius: 10px; overflow: hidden; }
.b4u-res-sort[b-57ij5z6af0] { background: var(--b4u-bg-input, var(--b4u-bg-surface)); color: var(--b4u-text); border: none; padding: 6px 12px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; outline: none; }
.b4u-res-sortdir[b-57ij5z6af0] { display: flex; align-items: center; justify-content: center; width: 34px; flex-shrink: 0; background: var(--b4u-bg-input, var(--b4u-bg-surface)); color: var(--b4u-text-muted); border: none; border-left: 1px solid var(--b4u-border); cursor: pointer; padding: 0; transition: color 0.15s, background 0.15s; }
.b4u-res-sortdir:hover[b-57ij5z6af0] { color: var(--b4u-text); background: var(--b4u-bg-card-hover); }
.b4u-res-actions[b-57ij5z6af0] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b4u-res-prefs[b-57ij5z6af0] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Sort + view move into the filter sheet on phones, where the FAB is the single entry point for
   shaping the list; Share stays in the bar. Breakpoint 900px mirrors FilterToolbar/EventsFiltersFab
   — keep in sync. Must follow the base rule above: same specificity, so source order decides. */
@media (max-width: 899px) {
    .b4u-res-prefs[b-57ij5z6af0] { display: none; }
}
.b4u-res-share[b-57ij5z6af0] { display: inline-flex; align-items: center; gap: 6px; background: var(--b4u-bg-card); color: var(--b4u-text-secondary); border: 1px solid var(--b4u-border); border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.b4u-res-share:hover[b-57ij5z6af0] { background: var(--b4u-bg-surface); color: var(--b4u-text); }
.b4u-res-share.is-copied[b-57ij5z6af0] { background: var(--b4u-primary); color: #fff; border-color: var(--b4u-primary); }
.b4u-res-list[b-57ij5z6af0] { display: flex; flex-direction: column; gap: 12px; }

/* Card view grid + the footer row that pairs per-page (left) with pagination (right). */
.b4u-res-cardgrid[b-57ij5z6af0] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.b4u-res-pagebar[b-57ij5z6af0] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
/* Pagination carries a global margin-top:32px; the pagebar already spaces it, so zero it here. */
.b4u-res-pagebar[b-57ij5z6af0]  .b4u-pagination { margin-top: 0; }
/* /Components/Pages/Software.razor.rz.scp.css */
/* ===== EZ Lexer software page (ported from software-page.jsx) ===== */

.b4u-ezx-wrap[b-tx1emx0yt3] { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.b4u-ezx-center[b-tx1emx0yt3] { text-align: center; }
.b4u-ezx-sec[b-tx1emx0yt3] { padding: 80px 0; background: var(--b4u-bg); }
.b4u-ezx-sec--surface[b-tx1emx0yt3] { background: var(--b4u-bg-surface); border-top: 1px solid var(--b4u-border); border-bottom: 1px solid var(--b4u-border); }
.b4u-ezx-head[b-tx1emx0yt3] { max-width: 720px; margin: 0 auto 44px; }
.b4u-ezx-kicker[b-tx1emx0yt3] { font-size: 13px; font-weight: 700; color: var(--b4u-primary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.b4u-ezx-h2[b-tx1emx0yt3] { font-family: var(--b4u-font-display); font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; color: var(--b4u-text); letter-spacing: -0.02em; margin: 0; }
.b4u-ezx-sub[b-tx1emx0yt3] { font-size: 16px; color: var(--b4u-text-muted); max-width: 560px; margin: 14px auto 0; line-height: 1.6; }

/* window chrome around each screenshot */
.b4u-ezx-window[b-tx1emx0yt3] { border-radius: 14px; overflow: hidden; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.18); }
.b4u-ezx-window img[b-tx1emx0yt3] { display: block; width: 100%; height: auto; }

/* ---------- HERO ---------- */
.b4u-ezx-hero[b-tx1emx0yt3] { position: relative; overflow: hidden; background: var(--b4u-hero-gradient); }
.b4u-ezx-hero-inner[b-tx1emx0yt3] { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; padding-top: 132px; padding-bottom: 88px; }
.b4u-ezx-hero-glow[b-tx1emx0yt3] { position: absolute; top: -20%; right: -5%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--b4u-primary) 33%, transparent) 0%, transparent 62%); filter: blur(20px); animation: b4u-ezx-glow-b-tx1emx0yt3 6s ease-in-out infinite; pointer-events: none; }
.b4u-ezx-hero-grid[b-tx1emx0yt3] { position: absolute; inset: 0; opacity: 0.5; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 40%, transparent 100%); pointer-events: none; }
.b4u-ezx-badge[b-tx1emx0yt3] { display: inline-flex; align-items: center; gap: 11px; padding: 8px 16px 8px 10px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); margin-bottom: 22px; }
.b4u-ezx-badge-logo[b-tx1emx0yt3] { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.b4u-ezx-badge span[b-tx1emx0yt3] { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.82); }
.b4u-ezx-hero-title[b-tx1emx0yt3] { font-family: var(--b4u-font-display); font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; font-weight: 800; color: #fff; letter-spacing: -0.025em; margin: 0 0 20px; text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
.b4u-ezx-hero-title span[b-tx1emx0yt3] { display: block; }
.b4u-ezx-hero-sub[b-tx1emx0yt3] { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 540px; margin: 0 0 32px; }
.b4u-ezx-hero-cta[b-tx1emx0yt3] { display: flex; gap: 12px; flex-wrap: wrap; }
.b4u-ezx-hero-demo[b-tx1emx0yt3] { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }
.b4u-ezx-hero-feats[b-tx1emx0yt3] { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.b4u-ezx-feat[b-tx1emx0yt3] { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: rgba(255,255,255,0.62); font-weight: 500; }
.b4u-ezx-feat .b4u-icon[b-tx1emx0yt3] { color: var(--b4u-primary); }
.b4u-ezx-hero-art[b-tx1emx0yt3] { position: relative; min-height: 420px; }
.b4u-ezx-window--frames[b-tx1emx0yt3] { position: absolute; bottom: -46px; left: -40px; width: 320px; z-index: 3; }

/* hero entrance + float */
.b4u-ezx-rise[b-tx1emx0yt3] { animation: b4u-ezx-rise-b-tx1emx0yt3 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.b4u-ezx-rise-1[b-tx1emx0yt3] { animation-delay: 0.08s; }
.b4u-ezx-rise-2[b-tx1emx0yt3] { animation-delay: 0.16s; }
.b4u-ezx-rise-3[b-tx1emx0yt3] { animation-delay: 0.24s; }
.b4u-ezx-rise-art[b-tx1emx0yt3] { animation: b4u-ezx-rise-l-b-tx1emx0yt3 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both; }
.b4u-ezx-float[b-tx1emx0yt3] { animation: b4u-ezx-float-b-tx1emx0yt3 7s ease-in-out infinite; }
.b4u-ezx-float-2[b-tx1emx0yt3] { animation: b4u-ezx-float-b-tx1emx0yt3 7s ease-in-out infinite; animation-delay: -3.5s; }

@keyframes b4u-ezx-rise-b-tx1emx0yt3 { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes b4u-ezx-rise-l-b-tx1emx0yt3 { from { opacity: 0; transform: translateX(-24px) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes b4u-ezx-float-b-tx1emx0yt3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes b4u-ezx-glow-b-tx1emx0yt3 { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

/* ---------- PIPELINE ---------- */
.b4u-ezx-pipe[b-tx1emx0yt3] { position: relative; }
.b4u-ezx-pipe-svg[b-tx1emx0yt3] { position: absolute; top: 27px; left: 0; width: 100%; height: 4px; overflow: visible; }
.b4u-ezx-pipe-track[b-tx1emx0yt3] { stroke: var(--b4u-border); stroke-width: 3; stroke-linecap: round; }
.b4u-ezx-pipe-line[b-tx1emx0yt3] { stroke: var(--b4u-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 920; stroke-dashoffset: 920; transition: stroke-dashoffset 1.4s cubic-bezier(0.4,0,0.2,1) 0.2s; }
.b4u-ezx-pipe.is-in .b4u-ezx-pipe-line[b-tx1emx0yt3] { stroke-dashoffset: 0; }
.b4u-ezx-pipe-steps[b-tx1emx0yt3] { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.b4u-ezx-pipe-step[b-tx1emx0yt3] { text-align: center; padding: 0 6px; }
.b4u-ezx-node[b-tx1emx0yt3] { position: relative; width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--b4u-primary); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--b4u-primary) 27%, transparent); opacity: 0; transform: scale(0.6); z-index: 2; }
.b4u-ezx-pipe.is-in .b4u-ezx-node[b-tx1emx0yt3] { opacity: 1; transform: scale(1); transition: opacity 0.45s cubic-bezier(0.34,1.56,0.64,1), transform 0.45s cubic-bezier(0.34,1.56,0.64,1); }
.b4u-ezx-pipe.is-in .b4u-ezx-pipe-step:nth-child(1) .b4u-ezx-node[b-tx1emx0yt3] { transition-delay: 0.30s; }
.b4u-ezx-pipe.is-in .b4u-ezx-pipe-step:nth-child(2) .b4u-ezx-node[b-tx1emx0yt3] { transition-delay: 0.43s; }
.b4u-ezx-pipe.is-in .b4u-ezx-pipe-step:nth-child(3) .b4u-ezx-node[b-tx1emx0yt3] { transition-delay: 0.56s; }
.b4u-ezx-pipe.is-in .b4u-ezx-pipe-step:nth-child(4) .b4u-ezx-node[b-tx1emx0yt3] { transition-delay: 0.69s; }
.b4u-ezx-pipe.is-in .b4u-ezx-pipe-step:nth-child(5) .b4u-ezx-node[b-tx1emx0yt3] { transition-delay: 0.82s; }
.b4u-ezx-pipe.is-in .b4u-ezx-pipe-step:nth-child(6) .b4u-ezx-node[b-tx1emx0yt3] { transition-delay: 0.95s; }
.b4u-ezx-node-num[b-tx1emx0yt3] { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 999px; background: var(--b4u-bg); color: var(--b4u-primary); border: 2px solid var(--b4u-primary); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.b4u-ezx-node-title[b-tx1emx0yt3] { font-size: 15px; font-weight: 700; color: var(--b4u-text); margin-bottom: 3px; letter-spacing: -0.01em; }
.b4u-ezx-node-desc[b-tx1emx0yt3] { font-size: 12.5px; color: var(--b4u-text-muted); line-height: 1.4; }

/* ---------- SHOWCASE (CSS-only tabs) ---------- */
.b4u-ezx-tab-radio[b-tx1emx0yt3] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.b4u-ezx-tab-pills[b-tx1emx0yt3] { display: flex; gap: 4px; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 12px; padding: 4px; overflow-x: auto; max-width: 620px; margin: 0 auto 28px; }
.b4u-ezx-tab-pill[b-tx1emx0yt3] { flex: 1 0 auto; text-align: center; padding: 10px 16px; border-radius: 9px; white-space: nowrap; color: var(--b4u-text-secondary); font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.b4u-ezx-tab-body[b-tx1emx0yt3] { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: center; }
.b4u-ezx-tab-panel[b-tx1emx0yt3], .b4u-ezx-tab-text[b-tx1emx0yt3] { display: none; }
.b4u-ezx-tab-title[b-tx1emx0yt3] { font-family: var(--b4u-font-display); font-size: 26px; font-weight: 800; color: var(--b4u-text); letter-spacing: -0.02em; margin: 0 0 14px; }
.b4u-ezx-tab-desc[b-tx1emx0yt3] { font-size: 16px; line-height: 1.65; color: var(--b4u-text-secondary); margin: 0 0 22px; }
.b4u-ezx-steplist[b-tx1emx0yt3] { display: flex; flex-direction: column; gap: 4px; }
.b4u-ezx-step[b-tx1emx0yt3] { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
.b4u-ezx-step-num[b-tx1emx0yt3] { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; background: var(--b4u-bg-surface); color: var(--b4u-text-muted); font-size: 12px; font-weight: 700; }
.b4u-ezx-step-title[b-tx1emx0yt3] { font-size: 14.5px; font-weight: 500; color: var(--b4u-text-secondary); }

/* per-tab checked state (radios precede pills + body as siblings) */
#ezx-tab-manage:checked ~ .b4u-ezx-tab-pills .b4u-ezx-tab-pill[data-tab="manage"][b-tx1emx0yt3],
#ezx-tab-lineups:checked ~ .b4u-ezx-tab-pills .b4u-ezx-tab-pill[data-tab="lineups"][b-tx1emx0yt3],
#ezx-tab-score:checked ~ .b4u-ezx-tab-pills .b4u-ezx-tab-pill[data-tab="score"][b-tx1emx0yt3],
#ezx-tab-frames:checked ~ .b4u-ezx-tab-pills .b4u-ezx-tab-pill[data-tab="frames"][b-tx1emx0yt3],
#ezx-tab-standings:checked ~ .b4u-ezx-tab-pills .b4u-ezx-tab-pill[data-tab="standings"][b-tx1emx0yt3] { background: var(--b4u-primary); color: #fff; }

#ezx-tab-manage:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-panel[data-tab="manage"][b-tx1emx0yt3],
#ezx-tab-lineups:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-panel[data-tab="lineups"][b-tx1emx0yt3],
#ezx-tab-score:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-panel[data-tab="score"][b-tx1emx0yt3],
#ezx-tab-frames:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-panel[data-tab="frames"][b-tx1emx0yt3],
#ezx-tab-standings:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-panel[data-tab="standings"][b-tx1emx0yt3] { display: block; animation: b4u-ezx-rise-b-tx1emx0yt3 0.5s ease both; }

#ezx-tab-manage:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-text[data-tab="manage"][b-tx1emx0yt3],
#ezx-tab-lineups:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-text[data-tab="lineups"][b-tx1emx0yt3],
#ezx-tab-score:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-text[data-tab="score"][b-tx1emx0yt3],
#ezx-tab-frames:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-text[data-tab="frames"][b-tx1emx0yt3],
#ezx-tab-standings:checked ~ .b4u-ezx-tab-body .b4u-ezx-tab-text[data-tab="standings"][b-tx1emx0yt3] { display: block; }

#ezx-tab-manage:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="manage"][b-tx1emx0yt3],
#ezx-tab-lineups:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="lineups"][b-tx1emx0yt3],
#ezx-tab-score:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="score"][b-tx1emx0yt3],
#ezx-tab-frames:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="frames"][b-tx1emx0yt3],
#ezx-tab-standings:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="standings"][b-tx1emx0yt3] { background: var(--b4u-primary-light); border-color: color-mix(in srgb, var(--b4u-primary) 33%, transparent); }

#ezx-tab-manage:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="manage"] .b4u-ezx-step-num[b-tx1emx0yt3],
#ezx-tab-lineups:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="lineups"] .b4u-ezx-step-num[b-tx1emx0yt3],
#ezx-tab-score:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="score"] .b4u-ezx-step-num[b-tx1emx0yt3],
#ezx-tab-frames:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="frames"] .b4u-ezx-step-num[b-tx1emx0yt3],
#ezx-tab-standings:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="standings"] .b4u-ezx-step-num[b-tx1emx0yt3] { background: var(--b4u-primary); color: #fff; }

#ezx-tab-manage:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="manage"] .b4u-ezx-step-title[b-tx1emx0yt3],
#ezx-tab-lineups:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="lineups"] .b4u-ezx-step-title[b-tx1emx0yt3],
#ezx-tab-score:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="score"] .b4u-ezx-step-title[b-tx1emx0yt3],
#ezx-tab-frames:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="frames"] .b4u-ezx-step-title[b-tx1emx0yt3],
#ezx-tab-standings:checked ~ .b4u-ezx-tab-body .b4u-ezx-step[data-tab="standings"] .b4u-ezx-step-title[b-tx1emx0yt3] { color: var(--b4u-text); font-weight: 700; }

/* keyboard focus ring on the pill of a focused radio */
.b4u-ezx-tab-radio:focus-visible ~ .b4u-ezx-tab-pills .b4u-ezx-tab-pill[b-tx1emx0yt3] { outline: 2px solid var(--b4u-primary); outline-offset: 2px; }
.b4u-ezx-showcase[b-tx1emx0yt3] { scroll-margin-top: 90px; }

/* ---------- CAPABILITIES ---------- */
.b4u-ezx-caps[b-tx1emx0yt3] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b4u-ezx-cap[b-tx1emx0yt3] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; padding: 28px 26px; height: 100%; display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.b4u-ezx-cap:hover[b-tx1emx0yt3] { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.5); }
.b4u-ezx-cap-icon[b-tx1emx0yt3] { width: 50px; height: 50px; border-radius: 13px; background: var(--b4u-primary-light); color: var(--b4u-primary); display: grid; place-items: center; margin-bottom: 18px; }
.b4u-ezx-cap-title[b-tx1emx0yt3] { font-size: 19px; font-weight: 700; color: var(--b4u-text); margin: 0 0 10px; letter-spacing: -0.01em; }
.b4u-ezx-cap-desc[b-tx1emx0yt3] { font-size: 14.5px; line-height: 1.6; color: var(--b4u-text-secondary); margin: 0 0 18px; }
.b4u-ezx-cap-points[b-tx1emx0yt3] { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--b4u-border); }
.b4u-ezx-cap-point[b-tx1emx0yt3] { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--b4u-text-muted); font-weight: 500; }
.b4u-ezx-cap-dot[b-tx1emx0yt3] { width: 5px; height: 5px; border-radius: 999px; background: var(--b4u-primary); flex-shrink: 0; }

/* ---------- SCORING MARQUEE ---------- */
.b4u-ezx-marquee[b-tx1emx0yt3] { overflow: hidden; padding: 6px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.b4u-ezx-marquee-track[b-tx1emx0yt3] { display: flex; gap: 18px; width: max-content; animation: b4u-ezx-marquee-b-tx1emx0yt3 32s linear infinite; }
.b4u-ezx-marquee:hover .b4u-ezx-marquee-track[b-tx1emx0yt3] { animation-play-state: paused; }
@keyframes b4u-ezx-marquee-b-tx1emx0yt3 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.b4u-ezx-logo[b-tx1emx0yt3] { width: 224px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.b4u-ezx-logo-tile[b-tx1emx0yt3] { position: relative; width: 100%; height: 116px; border-radius: 16px; overflow: hidden; border: 1px solid var(--b4u-border); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.03); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.b4u-ezx-logo:hover .b4u-ezx-logo-tile[b-tx1emx0yt3] { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(0,0,0,0.04); }
.b4u-ezx-logo-img[b-tx1emx0yt3] { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center; transform: scale(var(--ezx-logo-scale, 1)); filter: grayscale(1) opacity(0.8); transition: transform 0.35s ease, filter 0.3s ease; }
.b4u-ezx-logo:hover .b4u-ezx-logo-img[b-tx1emx0yt3] { transform: scale(calc(var(--ezx-logo-scale, 1) * 1.05)); filter: none; }
.b4u-ezx-logo-name[b-tx1emx0yt3] { font-size: 12.5px; font-weight: 600; color: var(--b4u-text-muted); text-align: center; letter-spacing: 0.01em; transition: color 0.2s; }
.b4u-ezx-logo:hover .b4u-ezx-logo-name[b-tx1emx0yt3] { color: var(--b4u-text); }
.b4u-ezx-note[b-tx1emx0yt3] { font-size: 13px; color: var(--b4u-text-muted); text-align: center; margin: 26px auto 0; max-width: 640px; line-height: 1.6; }
.b4u-ezx-inlink[b-tx1emx0yt3] { color: var(--b4u-primary); font-weight: 600; }

/* ---------- PRINT / REPORTS ---------- */
.b4u-ezx-print[b-tx1emx0yt3] { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.b4u-ezx-body-title[b-tx1emx0yt3] { font-family: var(--b4u-font-display); font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; color: var(--b4u-text); letter-spacing: -0.02em; margin: 0 0 16px; }
.b4u-ezx-body-text[b-tx1emx0yt3] { font-size: 16px; line-height: 1.65; color: var(--b4u-text-secondary); margin: 0 0 22px; }
.b4u-ezx-checklist[b-tx1emx0yt3] { display: flex; flex-direction: column; gap: 12px; }
.b4u-ezx-check[b-tx1emx0yt3] { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--b4u-text-secondary); }
.b4u-ezx-check .b4u-icon[b-tx1emx0yt3] { color: var(--b4u-success); margin-top: 1px; }
.b4u-ezx-print-grid[b-tx1emx0yt3] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.b4u-ezx-window--wide[b-tx1emx0yt3] { grid-column: 1 / -1; }

/* ---------- ECOSYSTEM ---------- */
.b4u-ezx-eco-grid[b-tx1emx0yt3] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b4u-ezx-eco[b-tx1emx0yt3] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; padding: 28px 26px; height: 100%; transition: transform 0.25s, box-shadow 0.25s; }
.b4u-ezx-eco:hover[b-tx1emx0yt3] { transform: translateY(-4px); }
.b4u-ezx-eco-top[b-tx1emx0yt3] { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.b4u-ezx-eco-icon[b-tx1emx0yt3] { width: 46px; height: 46px; border-radius: 12px; background: var(--b4u-primary-light); color: var(--b4u-primary); display: grid; place-items: center; flex-shrink: 0; }
.b4u-ezx-eco-badge[b-tx1emx0yt3] { font-size: 11px; font-weight: 700; color: var(--b4u-text-muted); text-transform: uppercase; letter-spacing: 0.06em; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); padding: 4px 10px; border-radius: 999px; }
.b4u-ezx-eco-name[b-tx1emx0yt3] { font-size: 19px; font-weight: 700; color: var(--b4u-text); margin: 0 0 8px; }
.b4u-ezx-eco-desc[b-tx1emx0yt3] { font-size: 14.5px; line-height: 1.6; color: var(--b4u-text-secondary); margin: 0; }

/* ---------- FINAL CTA ---------- */
.b4u-ezx-cta[b-tx1emx0yt3] { position: relative; overflow: hidden; background: var(--b4u-hero-gradient); }
.b4u-ezx-cta-glow[b-tx1emx0yt3] { position: absolute; bottom: -40%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--b4u-primary) 27%, transparent) 0%, transparent 60%); filter: blur(30px); pointer-events: none; }
.b4u-ezx-cta-inner[b-tx1emx0yt3] { position: relative; max-width: 780px; margin: 0 auto; padding: 88px 24px; text-align: center; }
.b4u-ezx-cta-logo[b-tx1emx0yt3] { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 22px; }
.b4u-ezx-cta-title[b-tx1emx0yt3] { font-family: var(--b4u-font-display); font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; color: #fff; letter-spacing: -0.025em; margin: 0 0 16px; }
.b4u-ezx-cta-sub[b-tx1emx0yt3] { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 540px; margin: 0 auto 32px; }
.b4u-ezx-cta-btns[b-tx1emx0yt3] { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.b4u-ezx-cta-foot[b-tx1emx0yt3] { font-size: 12.5px; color: rgba(255,255,255,0.42); margin: 30px auto 0; max-width: 560px; line-height: 1.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .b4u-ezx-hero-inner[b-tx1emx0yt3] { grid-template-columns: 1fr; gap: 40px; padding-top: 120px; padding-bottom: 64px; text-align: center; }
    .b4u-ezx-hero-sub[b-tx1emx0yt3] { margin-left: auto; margin-right: auto; }
    .b4u-ezx-hero-cta[b-tx1emx0yt3], .b4u-ezx-hero-feats[b-tx1emx0yt3] { justify-content: center; }
    .b4u-ezx-hero-art[b-tx1emx0yt3] { min-height: 300px; }
    .b4u-ezx-window--frames[b-tx1emx0yt3] { display: none; }
    .b4u-ezx-tab-body[b-tx1emx0yt3] { grid-template-columns: 1fr; gap: 28px; }
    .b4u-ezx-caps[b-tx1emx0yt3] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .b4u-ezx-eco-grid[b-tx1emx0yt3] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .b4u-ezx-print[b-tx1emx0yt3] { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 780px) {
    .b4u-ezx-pipe-svg[b-tx1emx0yt3] { display: none; }
    .b4u-ezx-pipe-steps[b-tx1emx0yt3] { grid-template-columns: 1fr; gap: 14px; max-width: 460px; margin: 0 auto; }
    .b4u-ezx-pipe-step[b-tx1emx0yt3] { display: flex; align-items: center; gap: 16px; text-align: left; padding: 0; }
    .b4u-ezx-node[b-tx1emx0yt3] { margin: 0; width: 46px; height: 46px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .b4u-ezx-rise[b-tx1emx0yt3], .b4u-ezx-rise-art[b-tx1emx0yt3], .b4u-ezx-float[b-tx1emx0yt3], .b4u-ezx-float-2[b-tx1emx0yt3], .b4u-ezx-hero-glow[b-tx1emx0yt3] { animation: none !important; }
    .b4u-ezx-rise[b-tx1emx0yt3], .b4u-ezx-rise-art[b-tx1emx0yt3] { opacity: 1 !important; transform: none !important; }
    .b4u-ezx-tab-panel[b-tx1emx0yt3] { animation: none !important; }
    .b4u-ezx-pipe-line[b-tx1emx0yt3] { transition: none !important; stroke-dashoffset: 0 !important; }
    .b4u-ezx-node[b-tx1emx0yt3] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .b4u-ezx-marquee-track[b-tx1emx0yt3] { animation: none !important; }
    .b4u-ezx-marquee[b-tx1emx0yt3] { overflow-x: auto; }
}
/* /Components/Pricing/PricingCard.razor.rz.scp.css */
.b4u-pcard[b-9zp8mq76ha] { position: relative; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s, border-color .3s; }
.b4u-pcard:hover[b-9zp8mq76ha] { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.b4u-pcard.is-popular[b-9zp8mq76ha] { border: 2px solid var(--b4u-tier); transform: translateY(-8px); box-shadow: 0 20px 40px color-mix(in srgb, var(--b4u-tier) 20%, transparent); }
.b4u-pcard-badge[b-9zp8mq76ha] { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--b4u-tier); color: #fff; padding: 4px 18px; border-radius: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

.b4u-pcard-head[b-9zp8mq76ha] { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.b4u-pcard-logo[b-9zp8mq76ha] { height: 46px; width: auto; object-fit: contain; }
.b4u-pcard-tier[b-9zp8mq76ha] { font-size: 13px; font-weight: 700; color: var(--b4u-tier); text-transform: uppercase; letter-spacing: .08em; }

.b4u-pcard-price[b-9zp8mq76ha] { margin-bottom: 2px; }
.b4u-pcard-cur[b-9zp8mq76ha] { font-size: 14px; font-weight: 500; color: var(--b4u-text-muted); }
.b4u-pcard-amount[b-9zp8mq76ha] { font-size: 48px; font-weight: 800; color: var(--b4u-text); letter-spacing: -.03em; }
.b4u-pcard-cents[b-9zp8mq76ha] { font-size: 13px; color: var(--b4u-text-muted); vertical-align: super; }
.b4u-pcard-per[b-9zp8mq76ha] { font-size: 14px; color: var(--b4u-text-muted); margin-bottom: 20px; }

.b4u-pcard-desc[b-9zp8mq76ha] { font-size: 14px; color: var(--b4u-text-secondary); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--b4u-border); }

.b4u-pcard-features[b-9zp8mq76ha] { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.b4u-pcard-feat[b-9zp8mq76ha] { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--b4u-text-secondary); }
.b4u-pcard-feat[b-9zp8mq76ha]  svg { color: var(--b4u-success); flex-shrink: 0; }
.b4u-pcard-feat.is-excluded[b-9zp8mq76ha] { color: var(--b4u-text-muted); opacity: .6; }
.b4u-pcard-feat.is-excluded[b-9zp8mq76ha]  svg { color: var(--b4u-text-muted); }
.b4u-pcard-feat.is-excluded span[b-9zp8mq76ha] { text-decoration: line-through; }

.b4u-pcard-cta[b-9zp8mq76ha] { width: 100%; justify-content: center; margin-top: 24px; }
/* /Components/Profile/ProfileSectionAccount.razor.rz.scp.css */
.b4u-pf-card[b-ek2ek5qju5] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.b4u-pf-card-head[b-ek2ek5qju5] { margin-bottom: 18px; }
.b4u-pf-card-title[b-ek2ek5qju5] { font-size: 17px; font-weight: 700; color: var(--b4u-text); margin: 0; }
.b4u-pf-card-desc[b-ek2ek5qju5] { font-size: 13px; color: var(--b4u-text-muted); margin: 4px 0 0; }

.b4u-pf-acct[b-ek2ek5qju5] {
    display: flex; align-items: center; gap: 14px;
    background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
    color: var(--b4u-text); text-decoration: none; transition: border-color 0.15s;
}
.b4u-pf-acct:hover[b-ek2ek5qju5] { border-color: var(--b4u-primary); }
.b4u-pf-acct-body[b-ek2ek5qju5] { flex: 1; display: flex; flex-direction: column; }
.b4u-pf-acct-title[b-ek2ek5qju5] { font-size: 14px; font-weight: 600; }
.b4u-pf-acct-desc[b-ek2ek5qju5] { font-size: 12.5px; color: var(--b4u-text-muted); margin-top: 2px; }
/* /Components/Profile/ProfileSectionBowling.razor.rz.scp.css */
.b4u-pf-card[b-rs2bpp9u92] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.b4u-pf-card-head[b-rs2bpp9u92] { margin-bottom: 18px; }
.b4u-pf-card-title[b-rs2bpp9u92] { font-size: 17px; font-weight: 700; color: var(--b4u-text); margin: 0; }
.b4u-pf-card-desc[b-rs2bpp9u92] { font-size: 13px; color: var(--b4u-text-muted); margin: 4px 0 0; }

.b4u-pf-grid2[b-rs2bpp9u92] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .b4u-pf-grid2[b-rs2bpp9u92] { grid-template-columns: 1fr; gap: 0; } }

.b4u-pf-input[b-rs2bpp9u92] {
    width: 100%; box-sizing: border-box;
    background: var(--b4u-bg-input); border: 1px solid var(--b4u-border);
    border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; color: var(--b4u-text);
}

.b4u-pf-photo[b-rs2bpp9u92] { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.b4u-pf-photo-img[b-rs2bpp9u92], .b4u-pf-photo-fallback[b-rs2bpp9u92] {
    width: 132px; height: 160px; border-radius: 14px; flex-shrink: 0;
    border: 1px solid var(--b4u-border); object-fit: cover;
}
.b4u-pf-photo-fallback[b-rs2bpp9u92] {
    display: flex; align-items: center; justify-content: center;
    background: var(--b4u-bg-surface); color: var(--b4u-text-muted);
}
.b4u-pf-photo-actions[b-rs2bpp9u92] { min-width: 220px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.b4u-pf-photo-pick[b-rs2bpp9u92] { position: relative; overflow: hidden; cursor: pointer; }
.b4u-pf-photo-pick[b-rs2bpp9u92]  input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.b4u-pf-photo-remove[b-rs2bpp9u92] {
    background: transparent; border: 1px solid var(--b4u-border); color: var(--b4u-primary);
    border-radius: 10px; padding: 8px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
}
.b4u-pf-photo-error[b-rs2bpp9u92] { color: var(--b4u-primary); font-size: 13px; margin: 0; }
.b4u-pf-savebar[b-rs2bpp9u92] { display: flex; justify-content: flex-end; margin-top: 14px; }

/* Fallback swap — see /app/image-fallback.js. */
.b4u-pf-photo-fallback.is-hidden[b-rs2bpp9u92] { display: none; }
[data-b4u-noimg] .b4u-pf-photo-fallback.is-hidden[b-rs2bpp9u92] { display: flex; }
/* /Components/Profile/ProfileSectionIdentity.razor.rz.scp.css */
.b4u-pf-card[b-fhjmlcay8j] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.b4u-pf-card-head[b-fhjmlcay8j] { margin-bottom: 18px; }
.b4u-pf-card-title[b-fhjmlcay8j] { font-size: 17px; font-weight: 700; color: var(--b4u-text); margin: 0; }
.b4u-pf-card-desc[b-fhjmlcay8j] { font-size: 13px; color: var(--b4u-text-muted); margin: 4px 0 0; }

.b4u-pf-grid2[b-fhjmlcay8j] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .b4u-pf-grid2[b-fhjmlcay8j] { grid-template-columns: 1fr; gap: 0; } }

.b4u-pf-input[b-fhjmlcay8j] {
    width: 100%; box-sizing: border-box;
    background: var(--b4u-bg-input); border: 1px solid var(--b4u-border);
    border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px;
    color: var(--b4u-text);
}
.b4u-pf-input:focus[b-fhjmlcay8j] { outline: none; border-color: var(--b4u-primary); }
/* Read-only/disabled keeps the gray fill (editable fields are white above). */
.b4u-pf-input:disabled[b-fhjmlcay8j] { background: var(--b4u-bg-surface); color: var(--b4u-text-muted); cursor: not-allowed; }
.b4u-pf-inputwrap[b-fhjmlcay8j] { position: relative; display: flex; align-items: center; }
.b4u-pf-inputwrap[b-fhjmlcay8j]  svg { position: absolute; left: 12px; pointer-events: none; }
.b4u-pf-inputwrap .b4u-pf-input[b-fhjmlcay8j] { padding-left: 36px; }

.b4u-pf-sharebox[b-fhjmlcay8j] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border);
    border-radius: 12px; padding: 14px 16px; flex-wrap: wrap; margin-top: 8px;
}
.b4u-pf-share-title[b-fhjmlcay8j] { font-size: 14px; font-weight: 600; color: var(--b4u-text); }
.b4u-pf-share-desc[b-fhjmlcay8j] { font-size: 12.5px; color: var(--b4u-text-muted); margin-top: 2px; }

.b4u-pf-switch[b-fhjmlcay8j] {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: transparent; border: none; font: inherit; color: var(--b4u-text-muted); padding: 0;
}
.b4u-pf-switch-knob[b-fhjmlcay8j] {
    width: 40px; height: 22px; border-radius: 999px; position: relative;
    background: var(--b4u-border); transition: background 0.2s;
}
.b4u-pf-switch-knob[b-fhjmlcay8j]::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; transition: transform 0.2s;
}
.b4u-pf-switch.is-on .b4u-pf-switch-knob[b-fhjmlcay8j] { background: var(--b4u-primary); }
.b4u-pf-switch.is-on .b4u-pf-switch-knob[b-fhjmlcay8j]::after { transform: translateX(18px); }
.b4u-pf-switch-label[b-fhjmlcay8j] { font-size: 13px; font-weight: 600; }

.b4u-pf-savebar[b-fhjmlcay8j] { display: flex; justify-content: flex-end; margin-top: 18px; }
/* /Components/Profile/ProfileSectionLicenses.razor.rz.scp.css */
/* ---- section shell (scoped per profile section) ---- */
.b4u-pf-card[b-a951r6wqce] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
.b4u-pf-card-head[b-a951r6wqce] { margin-bottom: 18px; }
.b4u-pf-card-title[b-a951r6wqce] { font-size: 17px; font-weight: 700; color: var(--b4u-text); margin: 0; }
.b4u-pf-card-desc[b-a951r6wqce] { font-size: 13px; color: var(--b4u-text-muted); margin: 4px 0 0; }
.b4u-pf-lic-head[b-a951r6wqce] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- licence list ---- */
.b4u-pf-lic-list[b-a951r6wqce] { display: flex; flex-direction: column; gap: 10px; }

.b4u-pf-lic[b-a951r6wqce] {
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
/* Verified licences carry a faint success wash so the state reads at a glance, no text needed. */
.b4u-pf-lic.is-verified[b-a951r6wqce] {
    border-color: color-mix(in srgb, var(--b4u-success) 34%, var(--b4u-border));
    background: color-mix(in srgb, var(--b4u-success) 6%, var(--b4u-bg-surface));
}

/* --- line 1: licence number (hero) + status / delete --- */
.b4u-pf-lic-main[b-a951r6wqce] { display: flex; align-items: center; gap: 10px; }

.b4u-pf-lic-number[b-a951r6wqce] { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: .2px; color: var(--b4u-text); }
input.b4u-pf-lic-number[b-a951r6wqce] {
    box-sizing: border-box;
    background: var(--b4u-bg-input); border: 1px solid var(--b4u-border); border-radius: 10px;
    padding: 10px 14px; font: inherit; font-size: 16px; font-weight: 600;
}
input.b4u-pf-lic-number:focus[b-a951r6wqce] { outline: none; border-color: var(--b4u-primary); }
input.b4u-pf-lic-number[b-a951r6wqce]::placeholder { color: var(--b4u-text-muted); font-weight: 400; letter-spacing: normal; }
.b4u-pf-lic-number.is-readonly[b-a951r6wqce] { padding: 6px 2px; }

.b4u-pf-lic-topright[b-a951r6wqce] { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* --- status marker + hover/focus tooltip --- */
.b4u-pf-lic-status[b-a951r6wqce] {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; outline: none; cursor: default;
}
.b4u-pf-lic-status.is-verified[b-a951r6wqce] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 14%, transparent); }
.b4u-pf-lic-status.is-unverified[b-a951r6wqce] { color: var(--b4u-text-muted); }
.b4u-pf-lic-status:focus-visible[b-a951r6wqce] { box-shadow: 0 0 0 2px var(--b4u-primary); }

.b4u-pf-lic-status[b-a951r6wqce]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 9px); right: 0;
    width: 232px; max-width: 62vw;
    background: var(--b4u-text); color: var(--b4u-bg-card);
    font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left;
    padding: 9px 11px; border-radius: 9px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity .16s ease, transform .16s ease; z-index: 40;
}
.b4u-pf-lic-status[b-a951r6wqce]::before {
    content: ""; position: absolute; bottom: calc(100% + 4px); right: 11px;
    border: 5px solid transparent; border-top-color: var(--b4u-text);
    opacity: 0; transition: opacity .16s ease; z-index: 40;
}
.b4u-pf-lic-status:hover[b-a951r6wqce]::after, .b4u-pf-lic-status:focus-visible[b-a951r6wqce]::after { opacity: 1; transform: translateY(0); }
.b4u-pf-lic-status:hover[b-a951r6wqce]::before, .b4u-pf-lic-status:focus-visible[b-a951r6wqce]::before { opacity: 1; }

/* --- delete (destructive: neutral, reddens on hover) --- */
.b4u-pf-lic-remove[b-a951r6wqce] {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--b4u-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.b4u-pf-lic-remove:hover[b-a951r6wqce] {
    color: var(--b4u-danger);
    background: color-mix(in srgb, var(--b4u-danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--b4u-danger) 30%, transparent);
}

/* --- line 2: federation (quiet) + default star --- */
.b4u-pf-lic-meta[b-a951r6wqce] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.b4u-pf-lic-fed-select[b-a951r6wqce] { flex: 0 1 190px; min-width: 120px; }
.b4u-pf-lic-fed-select[b-a951r6wqce]  .e-input-group { width: 100%; }

.b4u-pf-lic-fed[b-a951r6wqce] { display: inline-flex; align-items: center; gap: 8px; color: var(--b4u-text-muted); font-size: 13px; font-weight: 600; }
.b4u-pf-lic-fed[b-a951r6wqce]  .b4u-flag { width: 22px; height: 16px; display: inline-block; }
.b4u-pf-lic-fed-code[b-a951r6wqce] { letter-spacing: .3px; }

.b4u-pf-lic-default[b-a951r6wqce] { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; user-select: none; }
.b4u-pf-lic-default-input[b-a951r6wqce] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.b4u-pf-lic-star[b-a951r6wqce] { display: inline-flex; color: var(--b4u-text-muted); opacity: .4; transition: color .15s ease, opacity .15s ease, transform .15s ease; }
.b4u-pf-lic-default:hover .b4u-pf-lic-star[b-a951r6wqce] { opacity: .85; color: var(--b4u-text); transform: scale(1.08); }
.b4u-pf-lic-default.is-on .b4u-pf-lic-star[b-a951r6wqce] { color: var(--b4u-primary); opacity: 1; }
.b4u-pf-lic-default-input:focus-visible ~ .b4u-pf-lic-star[b-a951r6wqce] { outline: 2px solid var(--b4u-primary); outline-offset: 2px; border-radius: 4px; }
.b4u-pf-lic-default-txt[b-a951r6wqce] { font-size: 12px; font-weight: 700; color: var(--b4u-primary); }

.b4u-pf-lic-empty[b-a951r6wqce] { text-align: center; color: var(--b4u-text-muted); font-size: 14px; padding: 18px 0; }
.b4u-pf-savebar[b-a951r6wqce] { display: flex; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 480px) {
    .b4u-pf-lic-fed-select[b-a951r6wqce] { flex: 1 1 auto; min-width: 0; }
}
/* /Components/Registration/RegLicenseStep.razor.rz.scp.css */
.b4u-reg-step[b-urs3ch0dns] {
    display: flex;
    flex-direction: column;
}

.b4u-reg-step-h[b-urs3ch0dns] {
    font-size: 18px;
    font-weight: 700;
    color: var(--b4u-text);
    margin: 0 0 4px;
}

.b4u-reg-step-sub[b-urs3ch0dns] {
    font-size: 14px;
    color: var(--b4u-text-muted);
    margin: 0 0 24px;
}

.b4u-reg-field[b-urs3ch0dns] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.b4u-reg-label[b-urs3ch0dns] {
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
}
/* /Components/Registration/RegManualConfirmBanner.razor.rz.scp.css */
.b4u-reg-mcbanner[b-l306mbsi2d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--b4u-warning) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--b4u-warning) 32%, transparent);
    color: var(--b4u-text);
    font-size: 0.9rem;
    line-height: 1.35;
}

.b4u-reg-mcbanner[b-l306mbsi2d]  svg {
    flex: 0 0 auto;
    color: var(--b4u-warning);
}
/* /Components/Registration/RegMetadataField.razor.rz.scp.css */
.b4u-reg-field[b-8zqnho0lus] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.b4u-reg-field + .b4u-reg-field[b-8zqnho0lus] {
    margin-top: 16px;
}

.b4u-reg-label[b-8zqnho0lus] {
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
}

.b4u-reg-req[b-8zqnho0lus] {
    color: var(--b4u-primary);
    margin-left: 2px;
}

.b4u-reg-input[b-8zqnho0lus] {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--b4u-border);
    border-radius: 12px;
    background: var(--b4u-bg-card);
    color: var(--b4u-text);
    font-size: 14px;
    font-family: inherit;
    appearance: auto;
}

.b4u-reg-input:focus[b-8zqnho0lus] {
    outline: none;
    border-color: var(--b4u-primary);
}

.b4u-reg-check[b-8zqnho0lus] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--b4u-text);
    cursor: pointer;
}

.b4u-reg-check input[b-8zqnho0lus] {
    width: 18px;
    height: 18px;
    accent-color: var(--b4u-primary);
    cursor: pointer;
}
/* /Components/Registration/RegModePicker.razor.rz.scp.css */
/* Mirrors .b4u-tmsel-team card-radio styling; tokens only, no literal colours. */
.b4u-modepick[b-x2jxxgeg6j] {
    margin-bottom: 20px;
}

.b4u-modepick-label[b-x2jxxgeg6j] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
    margin-bottom: 8px;
}

.b4u-modepick-grid[b-x2jxxgeg6j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.b4u-modepick-card[b-x2jxxgeg6j] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    background: var(--b4u-bg-card-hover);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.b4u-modepick-card:hover[b-x2jxxgeg6j] {
    border-color: var(--b4u-primary);
}

.b4u-modepick-card.is-selected[b-x2jxxgeg6j] {
    border-color: var(--b4u-primary);
    background: var(--b4u-primary-light);
}

.b4u-modepick-name[b-x2jxxgeg6j] {
    display: block;
    font-weight: 700;
    color: var(--b4u-text);
}

.b4u-modepick-meta[b-x2jxxgeg6j] {
    display: block;
    font-size: 0.8rem;
    color: var(--b4u-text-muted);
}

.b4u-modepick-info[b-x2jxxgeg6j] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.b4u-modepick-radio[b-x2jxxgeg6j] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--b4u-border);
    border-radius: 50%;
}

.b4u-modepick-radio.is-selected[b-x2jxxgeg6j] {
    border-color: var(--b4u-primary);
    background:
        radial-gradient(circle, var(--b4u-primary) 0 40%, transparent 41%);
}
/* /Components/Registration/RegOverviewStep.razor.rz.scp.css */
/* Overview / Review & Confirm step — cards, rows, due-now band, payment terms.
   Layout per docs/design/full-project/register-wizard.jsx (OverviewStep :958). */

.b4u-ov-card[b-hkh93zzw57] {
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}

.b4u-ov-cap[b-hkh93zzw57] {
    font-size: 12px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.b4u-ov-cap-row[b-hkh93zzw57] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.b4u-ov-cap-row .b4u-ov-cap[b-hkh93zzw57] {
    margin-bottom: 0;
}

.b4u-ov-count[b-hkh93zzw57] {
    font-size: 12px;
    font-weight: 700;
    color: var(--b4u-text-muted);
    white-space: nowrap;
}

.b4u-ov-title[b-hkh93zzw57] {
    font-weight: 600;
    color: var(--b4u-text);
    font-size: 16px;
    margin-bottom: 4px;
}

.b4u-ov-sub[b-hkh93zzw57] {
    color: var(--b4u-text-muted);
    font-size: 13px;
}

/* player */
.b4u-ov-player[b-hkh93zzw57] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.b4u-ov-player-name[b-hkh93zzw57] {
    font-weight: 600;
    color: var(--b4u-text);
}

.b4u-ov-player-lic[b-hkh93zzw57] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 4px 10px 4px 8px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 999px;
    font-size: 13px;
}
.b4u-ov-player-lic[b-hkh93zzw57]  .b4u-flag { width: 20px; height: 14px; }
.b4u-ov-lic-num[b-hkh93zzw57] { color: var(--b4u-text); font-weight: 600; }
.b4u-ov-lic-fed[b-hkh93zzw57] { color: var(--b4u-text-muted); }

/* rows */
.b4u-ov-row[b-hkh93zzw57] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--b4u-border);
}

.b4u-ov-row:last-child[b-hkh93zzw57] {
    border-bottom: none;
    padding-bottom: 0;
}

.b4u-ov-row-main[b-hkh93zzw57] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.b4u-ov-row-name[b-hkh93zzw57] {
    font-weight: 700;
    color: var(--b4u-text);
    font-size: 14px;
}

.b4u-ov-row-when[b-hkh93zzw57] {
    color: var(--b4u-text-muted);
    font-size: 13px;
}

.b4u-ov-row-status[b-hkh93zzw57] {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.b4u-ov-row-status.is-pick[b-hkh93zzw57] {
    color: var(--b4u-pick, #3B82F6);
}

.b4u-ov-row-status.is-warning[b-hkh93zzw57] {
    color: var(--b4u-warning);
}

.b4u-ov-row-status.is-success[b-hkh93zzw57] {
    color: var(--b4u-success);
}

.b4u-ov-row-status.is-danger[b-hkh93zzw57] {
    color: var(--b4u-danger, #EF4444);
}

/* cancellation row */
.b4u-ov-cancel .b4u-ov-row-name[b-hkh93zzw57] {
    color: var(--b4u-danger, #EF4444);
}

.b4u-ov-reason[b-hkh93zzw57] {
    color: var(--b4u-text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.b4u-ov-empty[b-hkh93zzw57] {
    font-size: 13.5px;
    color: var(--b4u-text-muted);
    padding-top: 6px;
    line-height: 1.5;
}

.b4u-ov-fields[b-hkh93zzw57] {
    display: flex;
    flex-direction: column;
}

/* due now */
.b4u-ov-due[b-hkh93zzw57] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 2px solid rgba(59, 130, 246, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
}

.b4u-ov-due-label[b-hkh93zzw57] {
    font-weight: 600;
    color: var(--b4u-text);
    font-size: 16px;
}

.b4u-ov-due-amount[b-hkh93zzw57] {
    font-weight: 800;
    color: var(--b4u-pick, #3B82F6);
    font-size: 24px;
}

/* manual-confirmation note */
.b4u-ov-confirmnote[b-hkh93zzw57] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--b4u-warning) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--b4u-warning) 32%, transparent);
    font-size: 0.85rem;
    line-height: 1.35;
}

.b4u-ov-confirmnote[b-hkh93zzw57]  svg { flex: 0 0 auto; color: var(--b4u-warning); }

/* payment terms */
.b4u-ov-terms[b-hkh93zzw57] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--b4u-text);
    cursor: pointer;
}

.b4u-ov-terms input[b-hkh93zzw57] {
    width: 18px;
    height: 18px;
    accent-color: var(--b4u-primary);
    cursor: pointer;
    flex-shrink: 0;
}
/* /Components/Registration/RegSquadSelectRow.razor.rz.scp.css */
/* Squad-selection row — per-state colours per docs/design/full-project/register-wizard.jsx
   (SquadSelectRow ~:516). Selection accent is deliberately BLUE so a chosen squad
   never reads like an error/"full" state. */

.b4u-srow[b-aa7hl88m2h] {
    --srow-accent: var(--b4u-pick, #3B82F6);
    background: var(--b4u-bg-surface);
    border: 2px solid var(--b4u-border);
    border-radius: 14px;
    transition: border-color 0.2s, background 0.2s, opacity 0.2s;
    overflow: hidden;
}

/* selectable squads: the whole card is a click target */
.b4u-srow.is-clickable[b-aa7hl88m2h] {
    cursor: pointer;
}

.b4u-srow-main[b-aa7hl88m2h] {
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
}

.b4u-srow-info[b-aa7hl88m2h] {
    min-width: 0;
}

.b4u-srow-head[b-aa7hl88m2h] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.b4u-srow-name[b-aa7hl88m2h] {
    font-size: 14px;
    font-weight: 700;
    color: var(--b4u-text);
}

/* squad comment chip (e.g. "Early bird") — mirrors the event squads list category chip */
.b4u-srow-cat[b-aa7hl88m2h] {
    background: var(--b4u-primary-light);
    color: var(--b4u-primary);
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.b4u-srow-when[b-aa7hl88m2h] {
    font-size: 12px;
    color: var(--b4u-text-muted);
}

.b4u-srow-start[b-aa7hl88m2h] {
    color: var(--b4u-success);
    font-size: 16px;
    font-weight: 700;
}

.b4u-srow-end[b-aa7hl88m2h] {
    margin-left: 4px;
}

/* status badge */
.b4u-srow-badge[b-aa7hl88m2h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.b4u-srow-badge.is-success[b-aa7hl88m2h] {
    color: var(--b4u-success);
    background: rgba(34, 197, 94, 0.11);
    border-color: rgba(34, 197, 94, 0.34);
}

.b4u-srow-badge.is-warning[b-aa7hl88m2h] {
    color: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.11);
    border-color: rgba(234, 179, 8, 0.34);
}

.b4u-srow-badge.is-muted[b-aa7hl88m2h] {
    color: var(--b4u-text-muted);
    background: var(--b4u-bg-card);
    border-color: var(--b4u-border);
}

.b4u-srow-badge.is-pick[b-aa7hl88m2h] {
    color: var(--srow-accent);
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.34);
}

/* price */
.b4u-srow-price[b-aa7hl88m2h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.b4u-srow-price-amount[b-aa7hl88m2h] {
    font-size: 16px;
    font-weight: 700;
    color: var(--b4u-text);
    white-space: nowrap;
}

.b4u-srow-price-label[b-aa7hl88m2h] {
    font-size: 11px;
    color: var(--b4u-text-muted);
}

/* ring */
.b4u-srow-ring[b-aa7hl88m2h] {
    display: inline-flex;
}

/* selection control */
.b4u-srow-control[b-aa7hl88m2h] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b4u-srow-control--pick[b-aa7hl88m2h] {
    background: transparent;
    border: 2px solid var(--b4u-border);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
}

.b4u-srow-control--pick:hover[b-aa7hl88m2h] {
    border-color: var(--srow-accent);
}

.b4u-srow-control--pick.is-checked[b-aa7hl88m2h] {
    background: var(--srow-accent);
    border-color: var(--srow-accent);
}

.b4u-srow-control--locked[b-aa7hl88m2h] {
    border: 1.5px solid;
}

.b4u-srow-control--full[b-aa7hl88m2h] {
    width: auto;
    height: auto;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
    border: 1.5px solid var(--b4u-border);
    white-space: nowrap;
}

/* ============ per-state tints ============ */

.b4u-srow.is-open:hover[b-aa7hl88m2h] {
    border-color: var(--b4u-border-hover);
    background: var(--b4u-bg-card-hover);
}

.b4u-srow.is-pick[b-aa7hl88m2h] {
    border-color: var(--srow-accent);
    background: rgba(59, 130, 246, 0.07);
}

.b4u-srow.is-pick.is-waiting[b-aa7hl88m2h] {
    --srow-accent: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.08);
}

.b4u-srow.is-pick.is-waiting .b4u-srow-badge.is-pick[b-aa7hl88m2h] {
    color: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.34);
}

.b4u-srow.is-registered[b-aa7hl88m2h] {
    border-color: var(--b4u-success);
    background: rgba(34, 197, 94, 0.07);
}

.b4u-srow.is-registered .b4u-srow-control--locked[b-aa7hl88m2h] {
    color: var(--b4u-success);
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.12);
}

.b4u-srow.is-waiting[b-aa7hl88m2h] {
    border-color: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.07);
}

.b4u-srow.is-waiting .b4u-srow-control--locked[b-aa7hl88m2h] {
    color: var(--b4u-warning);
    border-color: rgba(234, 179, 8, 0.5);
    background: rgba(234, 179, 8, 0.12);
}

.b4u-srow.is-openwaiting .b4u-srow-control--pick[b-aa7hl88m2h] {
    /* unselected waiting-list squad: a softer amber than the picked / joined states, so the box
       reads "available to join the waiting list" rather than "you're already on it"
       (design: warning88 border, warningcc clock) */
    border-color: rgba(234, 179, 8, 0.53);
    color: rgba(234, 179, 8, 0.8);
}

.b4u-srow.is-played[b-aa7hl88m2h] {
    opacity: 0.72;
}

.b4u-srow.is-played .b4u-srow-control--locked[b-aa7hl88m2h] {
    color: var(--b4u-text-muted);
    border-color: var(--b4u-border);
    background: var(--b4u-bg-card);
}

.b4u-srow.is-blocked[b-aa7hl88m2h] {
    opacity: 0.62;
}

/* ============ cancel affordance ============ */

/* "Cancel entry" footer link */
.b4u-srow-cancel-open[b-aa7hl88m2h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    transition: color 0.15s;
}

.b4u-srow-cancel-open:hover[b-aa7hl88m2h] {
    color: var(--b4u-danger, #EF4444);
}

/* inline cancel form */
.b4u-srow-cancelform[b-aa7hl88m2h] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px dashed var(--b4u-border);
    padding: 12px 20px;
    background: var(--b4u-bg-card);
}

.b4u-srow-cancelform-head[b-aa7hl88m2h] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

.b4u-srow-cancelform-head :global(svg)[b-aa7hl88m2h] {
    color: var(--b4u-danger, #EF4444);
}

.b4u-srow-cancelform-sub[b-aa7hl88m2h] {
    margin: 0;
    font-size: 12.5px;
    color: var(--b4u-text-muted);
    line-height: 1.5;
}

.b4u-srow-cancelform-quick[b-aa7hl88m2h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.b4u-srow-quick[b-aa7hl88m2h] {
    background: var(--b4u-bg-surface);
    color: var(--b4u-text-muted);
    border: 1px solid var(--b4u-border);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.b4u-srow-quick:hover[b-aa7hl88m2h] {
    border-color: var(--b4u-border-hover);
    color: var(--b4u-text);
}

.b4u-srow-quick.is-on[b-aa7hl88m2h] {
    color: var(--b4u-danger, #EF4444);
    border-color: var(--b4u-danger, #EF4444);
    background: rgba(239, 68, 68, 0.08);
}

.b4u-srow-cancelform-ta[b-aa7hl88m2h] {
    width: 100%;
    resize: vertical;
    padding: 10px 12px;
    background: var(--b4u-bg-surface);
    border: 1.5px solid var(--b4u-border);
    border-radius: 10px;
    color: var(--b4u-text);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
}

.b4u-srow-cancelform-ta:focus[b-aa7hl88m2h] {
    border-color: var(--b4u-border-hover);
}

.b4u-srow-cancelform-foot[b-aa7hl88m2h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.b4u-srow-cancelform-hint[b-aa7hl88m2h] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--b4u-text-muted);
}

.b4u-srow-cancelform-actions[b-aa7hl88m2h] {
    display: flex;
    gap: 8px;
}

.b4u-srow-cancel-keep[b-aa7hl88m2h] {
    background: transparent;
    border: none;
    color: var(--b4u-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 6px 10px;
}

.b4u-srow-cancel-keep:hover[b-aa7hl88m2h] {
    color: var(--b4u-text);
}

.b4u-srow-cancel-confirm[b-aa7hl88m2h] {
    background: var(--b4u-danger, #EF4444);
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 16px;
    border-radius: 8px;
}

.b4u-srow-cancel-confirm:disabled[b-aa7hl88m2h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* requested / will-be-cancelled summary */
.b4u-srow-cancelled[b-aa7hl88m2h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px dashed var(--b4u-border);
    padding: 11px 20px;
    background: rgba(239, 68, 68, 0.06);
}

.b4u-srow-cancelled.is-requested[b-aa7hl88m2h] {
    background: rgba(234, 179, 8, 0.08);
}

.b4u-srow-cancelled :global(svg)[b-aa7hl88m2h] {
    margin-top: 2px;
    color: var(--b4u-text-muted);
}

.b4u-srow-cancelled-body[b-aa7hl88m2h] {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.b4u-srow-cancelled-head[b-aa7hl88m2h] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

.b4u-srow-cancelled-reason[b-aa7hl88m2h] {
    font-size: 12.5px;
    color: var(--b4u-text-muted);
    line-height: 1.5;
}

.b4u-srow-cancel-undo[b-aa7hl88m2h] {
    background: transparent;
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.b4u-srow-cancel-undo:hover[b-aa7hl88m2h] {
    border-color: var(--b4u-border-hover);
    color: var(--b4u-text);
}

/* ============ footer action bar (note / move / cancel links) ============ */

.b4u-srow-footbar[b-aa7hl88m2h] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px dashed var(--b4u-border);
    padding: 11px 20px;
    background: rgba(0, 0, 0, 0.02);
}

.b4u-srow-foot-link[b-aa7hl88m2h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    transition: color 0.15s;
    min-width: 0;
}

.b4u-srow-foot-link:hover[b-aa7hl88m2h] {
    color: var(--b4u-text);
}

.b4u-srow-foot-link.is-set[b-aa7hl88m2h] {
    color: var(--b4u-text-secondary, var(--b4u-text));
}

.b4u-srow-foot-link--cancel:hover[b-aa7hl88m2h] {
    color: var(--b4u-danger, #EF4444);
}

.b4u-srow-foot-note[b-aa7hl88m2h] {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b4u-srow-foot-edit[b-aa7hl88m2h] {
    color: var(--srow-accent);
    font-weight: 700;
}

.b4u-srow-foot-opt[b-aa7hl88m2h] {
    color: var(--b4u-text-muted);
    font-weight: 500;
}

/* ============ per-squad metadata (Registration-target fields) ============ */
/* Recessed panel so the manager's extra questions read as part of the entry,
   not loose text. Inputs use --b4u-bg-card and sit elevated on this tint.
   Inter-field spacing comes from RegMetadataField's own .b4u-reg-field margin. */
.b4u-srow-meta[b-aa7hl88m2h] {
    border-top: 1px dashed var(--b4u-border);
    padding: 14px 20px 16px;
    background: rgba(0, 0, 0, 0.02);
}

/* ============ move form ============ */

.b4u-srow-moveform[b-aa7hl88m2h] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px dashed var(--b4u-border);
    padding: 12px 20px;
    background: var(--b4u-bg-card);
}

.b4u-srow-moveform-head :global(svg)[b-aa7hl88m2h] {
    color: var(--srow-accent);
}

.b4u-srow-moveform-select[b-aa7hl88m2h] {
    width: 100%;
    padding: 9px 12px;
    background: var(--b4u-bg-surface);
    border: 1.5px solid var(--b4u-border);
    border-radius: 10px;
    color: var(--b4u-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.b4u-srow-moveform-select:focus[b-aa7hl88m2h] {
    border-color: var(--srow-accent);
}

.b4u-srow-move-confirm[b-aa7hl88m2h] {
    background: var(--srow-accent);
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 16px;
    border-radius: 8px;
}

.b4u-srow-move-confirm:disabled[b-aa7hl88m2h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ note form ============ */

.b4u-srow-noteform[b-aa7hl88m2h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px dashed var(--b4u-border);
    padding: 12px 20px;
    background: var(--b4u-bg-card);
}

.b4u-srow-note-save[b-aa7hl88m2h] {
    background: var(--srow-accent);
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 16px;
    border-radius: 8px;
}

/* ============ moved summary ============ */

.b4u-srow-moved[b-aa7hl88m2h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px dashed var(--b4u-border);
    padding: 11px 20px;
    background: rgba(59, 130, 246, 0.07);
}

.b4u-srow-moved :global(svg)[b-aa7hl88m2h] {
    margin-top: 2px;
    color: var(--srow-accent);
}

.b4u-srow-moved-body[b-aa7hl88m2h] {
    flex: 1;
    min-width: 160px;
}

.b4u-srow-moved-head[b-aa7hl88m2h] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

/* ============ mobile: reflow the cramped 4-up row ============
   The desktop grid (info | price | ring | control) crams four tracks onto a
   ~360px card, so the nowrap price and the long status badge collide. On phones
   we split it into two lines: squad info + the pick control up top, then the
   price and the fill ring underneath. Price leaves its own horizontal track,
   which is what removes the overlap. */
@media (max-width: 640px) {
    .b4u-srow-main[b-aa7hl88m2h] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info  control"
            "price ring";
        column-gap: 12px;
        row-gap: 8px;
        padding: 13px 15px;
    }

    .b4u-srow-info[b-aa7hl88m2h] { grid-area: info; }

    /* toggle stays top-right, aligned with the squad name (thumb reach) */
    .b4u-srow-control[b-aa7hl88m2h] {
        grid-area: control;
        justify-self: end;
        align-self: start;
    }

    /* price under the name, inline and left-aligned */
    .b4u-srow-price[b-aa7hl88m2h] {
        grid-area: price;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        text-align: left;
    }

    .b4u-srow-ring[b-aa7hl88m2h] {
        grid-area: ring;
        justify-self: end;
    }

    /* footer bars / inline forms hug the tighter card padding */
    .b4u-srow-footbar[b-aa7hl88m2h],
    .b4u-srow-cancelform[b-aa7hl88m2h],
    .b4u-srow-moveform[b-aa7hl88m2h],
    .b4u-srow-noteform[b-aa7hl88m2h],
    .b4u-srow-cancelled[b-aa7hl88m2h],
    .b4u-srow-moved[b-aa7hl88m2h],
    .b4u-srow-meta[b-aa7hl88m2h] {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* /Components/Registration/RegSquadSelectStep.razor.rz.scp.css */
/* Squad-selection step — header, summary chips, legend, day groups.
   Layout per docs/design/full-project/register-wizard.jsx (SquadSelectStep :387). */

.b4u-sqstep-head[b-y22smvylo8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.b4u-sqstep-sub[b-y22smvylo8] {
    max-width: 380px;
    margin-bottom: 0;
}

.b4u-sqstep-chips[b-y22smvylo8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.b4u-sqstep-chip[b-y22smvylo8] {
    padding: 5px 13px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.b4u-sqstep-chip.is-pick[b-y22smvylo8] {
    color: var(--b4u-pick, #3B82F6);
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.34);
}

.b4u-sqstep-chip.is-warning[b-y22smvylo8] {
    color: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.34);
}

.b4u-sqstep-notice[b-y22smvylo8] {
    margin-bottom: 14px;
}

/* legend */
.b4u-sqstep-legend[b-y22smvylo8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px 14px;
    margin-bottom: 18px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
}

.b4u-sqstep-legend-item[b-y22smvylo8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
}

.b4u-sqstep-dot[b-y22smvylo8] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}

.b4u-sqstep-dot.is-pick[b-y22smvylo8] {
    background: var(--b4u-pick, #3B82F6);
}

.b4u-sqstep-dot.is-warning[b-y22smvylo8] {
    background: var(--b4u-warning);
}

.b4u-sqstep-dot.is-success[b-y22smvylo8] {
    background: var(--b4u-success);
}

.b4u-sqstep-dot.is-muted[b-y22smvylo8] {
    background: var(--b4u-text-muted);
}

/* day groups */
.b4u-sqstep-day[b-y22smvylo8] {
    margin-bottom: 20px;
}

.b4u-sqstep-day-h[b-y22smvylo8] {
    font-size: 12px;
    font-weight: 700;
    color: var(--b4u-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

.b4u-sqstep-rows[b-y22smvylo8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Components/Registration/RegTeamOverviewStep.razor.rz.scp.css */
.b4u-reg-step[b-7v9zbr95tq] { display: block; }
.b4u-reg-step-h[b-7v9zbr95tq] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin: 0 0 4px; }
.b4u-reg-step-sub[b-7v9zbr95tq] { font-size: 14px; color: var(--b4u-text-muted); margin: 0 0 20px; }

.b4u-tmov-team[b-7v9zbr95tq] {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    background: var(--b4u-bg-card-hover); border: 1px solid var(--b4u-border); border-radius: 14px; padding: 14px 18px;
}
.b4u-tmov-team-icon[b-7v9zbr95tq] {
    width: 40px; height: 40px; border-radius: 10px; background: var(--b4u-primary-light); color: var(--b4u-primary);
    display: flex; align-items: center; justify-content: center;
}
.b4u-tmov-team-name[b-7v9zbr95tq] { font-weight: 700; color: var(--b4u-text); font-size: 15px; }
.b4u-tmov-team-meta[b-7v9zbr95tq] { color: var(--b4u-text-muted); font-size: 12px; }

.b4u-tmov-group[b-7v9zbr95tq] { margin-bottom: 16px; }
.b4u-tmov-group-h[b-7v9zbr95tq] { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.b4u-tmov-group-h.is-pick[b-7v9zbr95tq] { color: var(--b4u-primary); }
.b4u-tmov-group-h.is-success[b-7v9zbr95tq] { color: var(--b4u-success); }
.b4u-tmov-group-h.is-muted[b-7v9zbr95tq] { color: var(--b4u-text-muted); }
.b4u-tmov-line[b-7v9zbr95tq] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border: 1px solid var(--b4u-border); border-radius: 10px; margin-bottom: 6px;
    font-size: 14px; color: var(--b4u-text);
}
.b4u-tmov-line-right[b-7v9zbr95tq] { font-weight: 700; }
.b4u-tmov-tag[b-7v9zbr95tq] { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.b4u-tmov-tag.is-success[b-7v9zbr95tq] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 12%, transparent); }
.b4u-tmov-tag.is-warning[b-7v9zbr95tq] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 12%, transparent); }
.b4u-tmov-tag.is-muted[b-7v9zbr95tq] { color: var(--b4u-text-muted); background: color-mix(in srgb, var(--b4u-text-muted) 12%, transparent); }
.b4u-tmov-empty[b-7v9zbr95tq] { font-size: 14px; color: var(--b4u-text-muted); }

.b4u-tmov-total[b-7v9zbr95tq] {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--b4u-border); margin-top: 18px; padding-top: 16px;
    font-size: 15px; color: var(--b4u-text);
}
.b4u-tmov-total strong[b-7v9zbr95tq] { font-size: 18px; font-weight: 800; }

.b4u-ov-card[b-7v9zbr95tq] {
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}

.b4u-ov-cap[b-7v9zbr95tq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.b4u-ov-fields[b-7v9zbr95tq] { display:flex; flex-direction:column; gap:14px; }

/* manual-confirmation note */
.b4u-ov-confirmnote[b-7v9zbr95tq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--b4u-warning) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--b4u-warning) 32%, transparent);
    font-size: 0.85rem;
    line-height: 1.35;
}

.b4u-ov-confirmnote[b-7v9zbr95tq]  svg { flex: 0 0 auto; color: var(--b4u-warning); }
/* /Components/Registration/RegTeamSelectStep.razor.rz.scp.css */
.b4u-reg-step[b-mswgvwm58d] { display: block; }
.b4u-reg-step-h[b-mswgvwm58d] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin: 0 0 4px; }
.b4u-reg-step-sub[b-mswgvwm58d] { font-size: 14px; color: var(--b4u-text-muted); margin: 0 0 20px; }

.b4u-tmsel-modes[b-mswgvwm58d] { display: flex; gap: 8px; margin-bottom: 24px; }
.b4u-tmsel-empty[b-mswgvwm58d] { font-size: 14px; color: var(--b4u-text-muted); }

.b4u-tmsel-list[b-mswgvwm58d] { display: flex; flex-direction: column; gap: 10px; }
.b4u-tmsel-team[b-mswgvwm58d] {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--b4u-bg-card-hover); border: 2px solid var(--b4u-border); border-radius: 14px;
    padding: 16px 20px; cursor: pointer; transition: all 0.2s; color: inherit; font: inherit;
}
.b4u-tmsel-team.is-selected[b-mswgvwm58d] { border-color: var(--b4u-primary); background: color-mix(in srgb, var(--b4u-primary) 7%, transparent); }
.b4u-tmsel-team-icon[b-mswgvwm58d] {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: var(--b4u-primary-light); color: var(--b4u-primary);
    display: flex; align-items: center; justify-content: center;
}
.b4u-tmsel-team-info[b-mswgvwm58d] { display: flex; flex-direction: column; flex: 1; }
.b4u-tmsel-team-name[b-mswgvwm58d] { font-weight: 600; color: var(--b4u-text); font-size: 15px; }
.b4u-tmsel-team-meta[b-mswgvwm58d] { color: var(--b4u-text-muted); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.b4u-tmsel-radio[b-mswgvwm58d] {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--b4u-border); flex-shrink: 0;
}
.b4u-tmsel-radio.is-selected[b-mswgvwm58d] { border-color: var(--b4u-primary); background: var(--b4u-primary) content-box; padding: 4px; }

.b4u-tmsel-create[b-mswgvwm58d] { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.b4u-tmsel-label[b-mswgvwm58d] { font-size: 13px; font-weight: 600; color: var(--b4u-text-secondary); }
.b4u-tmsel-name[b-mswgvwm58d] {
    padding: 12px 14px; background: var(--b4u-bg-card); border: 1.5px solid var(--b4u-border);
    border-radius: 12px; color: var(--b4u-text); font-size: 14px; outline: none; font-family: inherit;
}
.b4u-tmsel-name:focus[b-mswgvwm58d] { border-color: var(--b4u-primary); }
.b4u-tmsel-create-btn[b-mswgvwm58d] { align-self: flex-start; }

.b4u-tmsel-members[b-mswgvwm58d] {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
    color: var(--b4u-primary); font-size: 14px; font-weight: 600; text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.b4u-tmsel-members:hover[b-mswgvwm58d] { text-decoration: underline; }

.b4u-tmsel-team-mode[b-mswgvwm58d] {
    font-weight: 600;
}
/* /Components/Registration/RegTeamSquadSelectRow.razor.rz.scp.css */
/* Squad-selection row — per-state colours per docs/design/full-project/register-wizard.jsx
   (SquadSelectRow ~:516). Selection accent is deliberately BLUE so a chosen squad
   never reads like an error/"full" state. */

.b4u-srow[b-q3gewq7fce] {
    --srow-accent: var(--b4u-pick, #3B82F6);
    background: var(--b4u-bg-surface);
    border: 2px solid var(--b4u-border);
    border-radius: 14px;
    transition: border-color 0.2s, background 0.2s, opacity 0.2s;
    overflow: hidden;
}

/* selectable squads: the whole card is a click target */
.b4u-srow.is-clickable[b-q3gewq7fce] {
    cursor: pointer;
}

.b4u-srow-main[b-q3gewq7fce] {
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
}

.b4u-srow-info[b-q3gewq7fce] {
    min-width: 0;
}

.b4u-srow-head[b-q3gewq7fce] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.b4u-srow-name[b-q3gewq7fce] {
    font-size: 14px;
    font-weight: 700;
    color: var(--b4u-text);
}

/* squad comment chip (e.g. "Early bird") — mirrors the event squads list category chip */
.b4u-srow-cat[b-q3gewq7fce] {
    background: var(--b4u-primary-light);
    color: var(--b4u-primary);
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.b4u-srow-when[b-q3gewq7fce] {
    font-size: 12px;
    color: var(--b4u-text-muted);
}

.b4u-srow-start[b-q3gewq7fce] {
    color: var(--b4u-success);
    font-size: 16px;
    font-weight: 700;
}

.b4u-srow-end[b-q3gewq7fce] {
    margin-left: 4px;
}

/* status badge */
.b4u-srow-badge[b-q3gewq7fce] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.b4u-srow-badge.is-success[b-q3gewq7fce] {
    color: var(--b4u-success);
    background: rgba(34, 197, 94, 0.11);
    border-color: rgba(34, 197, 94, 0.34);
}

.b4u-srow-badge.is-warning[b-q3gewq7fce] {
    color: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.11);
    border-color: rgba(234, 179, 8, 0.34);
}

.b4u-srow-badge.is-muted[b-q3gewq7fce] {
    color: var(--b4u-text-muted);
    background: var(--b4u-bg-card);
    border-color: var(--b4u-border);
}

.b4u-srow-badge.is-pick[b-q3gewq7fce] {
    color: var(--srow-accent);
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.34);
}

/* price */
.b4u-srow-price[b-q3gewq7fce] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.b4u-srow-price-amount[b-q3gewq7fce] {
    font-size: 16px;
    font-weight: 700;
    color: var(--b4u-text);
    white-space: nowrap;
}

.b4u-srow-price-label[b-q3gewq7fce] {
    font-size: 11px;
    color: var(--b4u-text-muted);
}

/* ring */
.b4u-srow-ring[b-q3gewq7fce] {
    display: inline-flex;
}

/* selection control */
.b4u-srow-control[b-q3gewq7fce] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.b4u-srow-control--pick[b-q3gewq7fce] {
    background: transparent;
    border: 2px solid var(--b4u-border);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
}

.b4u-srow-control--pick:hover[b-q3gewq7fce] {
    border-color: var(--srow-accent);
}

.b4u-srow-control--pick.is-checked[b-q3gewq7fce] {
    background: var(--srow-accent);
    border-color: var(--srow-accent);
}

.b4u-srow-control--locked[b-q3gewq7fce] {
    border: 1.5px solid;
}

.b4u-srow-control--full[b-q3gewq7fce] {
    width: auto;
    height: auto;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
    border: 1.5px solid var(--b4u-border);
    white-space: nowrap;
}

/* ============ per-state tints ============ */

.b4u-srow.is-open:hover[b-q3gewq7fce] {
    border-color: var(--b4u-border-hover);
    background: var(--b4u-bg-card-hover);
}

.b4u-srow.is-pick[b-q3gewq7fce] {
    border-color: var(--srow-accent);
    background: rgba(59, 130, 246, 0.07);
}

.b4u-srow.is-pick.is-waiting[b-q3gewq7fce] {
    --srow-accent: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.08);
}

.b4u-srow.is-pick.is-waiting .b4u-srow-badge.is-pick[b-q3gewq7fce] {
    color: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.34);
}

.b4u-srow.is-registered[b-q3gewq7fce] {
    border-color: var(--b4u-success);
    background: rgba(34, 197, 94, 0.07);
}

.b4u-srow.is-registered .b4u-srow-control--locked[b-q3gewq7fce] {
    color: var(--b4u-success);
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.12);
}

.b4u-srow.is-waiting[b-q3gewq7fce] {
    border-color: var(--b4u-warning);
    background: rgba(234, 179, 8, 0.07);
}

.b4u-srow.is-waiting .b4u-srow-control--locked[b-q3gewq7fce] {
    color: var(--b4u-warning);
    border-color: rgba(234, 179, 8, 0.5);
    background: rgba(234, 179, 8, 0.12);
}

.b4u-srow.is-openwaiting .b4u-srow-control--pick[b-q3gewq7fce] {
    /* unselected waiting-list squad: a softer amber than the picked / joined states, so the box
       reads "available to join the waiting list" rather than "you're already on it"
       (design: warning88 border, warningcc clock) */
    border-color: rgba(234, 179, 8, 0.53);
    color: rgba(234, 179, 8, 0.8);
}

.b4u-srow.is-played[b-q3gewq7fce] {
    opacity: 0.72;
}

.b4u-srow.is-played .b4u-srow-control--locked[b-q3gewq7fce] {
    color: var(--b4u-text-muted);
    border-color: var(--b4u-border);
    background: var(--b4u-bg-card);
}

.b4u-srow.is-blocked[b-q3gewq7fce] {
    opacity: 0.62;
}

/* ============ cancel affordance ============ */

/* "Cancel entry" footer link */
.b4u-srow-cancel-open[b-q3gewq7fce] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    transition: color 0.15s;
}

.b4u-srow-cancel-open:hover[b-q3gewq7fce] {
    color: var(--b4u-danger, #EF4444);
}

/* inline cancel form */
.b4u-srow-cancelform[b-q3gewq7fce] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px dashed var(--b4u-border);
    padding: 12px 20px;
    background: var(--b4u-bg-card);
}

.b4u-srow-cancelform-head[b-q3gewq7fce] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

.b4u-srow-cancelform-head :global(svg)[b-q3gewq7fce] {
    color: var(--b4u-danger, #EF4444);
}

.b4u-srow-cancelform-sub[b-q3gewq7fce] {
    margin: 0;
    font-size: 12.5px;
    color: var(--b4u-text-muted);
    line-height: 1.5;
}

.b4u-srow-cancelform-quick[b-q3gewq7fce] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.b4u-srow-quick[b-q3gewq7fce] {
    background: var(--b4u-bg-surface);
    color: var(--b4u-text-muted);
    border: 1px solid var(--b4u-border);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.b4u-srow-quick:hover[b-q3gewq7fce] {
    border-color: var(--b4u-border-hover);
    color: var(--b4u-text);
}

.b4u-srow-quick.is-on[b-q3gewq7fce] {
    color: var(--b4u-danger, #EF4444);
    border-color: var(--b4u-danger, #EF4444);
    background: rgba(239, 68, 68, 0.08);
}

.b4u-srow-cancelform-ta[b-q3gewq7fce] {
    width: 100%;
    resize: vertical;
    padding: 10px 12px;
    background: var(--b4u-bg-surface);
    border: 1.5px solid var(--b4u-border);
    border-radius: 10px;
    color: var(--b4u-text);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
}

.b4u-srow-cancelform-ta:focus[b-q3gewq7fce] {
    border-color: var(--b4u-border-hover);
}

.b4u-srow-cancelform-foot[b-q3gewq7fce] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.b4u-srow-cancelform-hint[b-q3gewq7fce] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--b4u-text-muted);
}

.b4u-srow-cancelform-actions[b-q3gewq7fce] {
    display: flex;
    gap: 8px;
}

.b4u-srow-cancel-keep[b-q3gewq7fce] {
    background: transparent;
    border: none;
    color: var(--b4u-text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 6px 10px;
}

.b4u-srow-cancel-keep:hover[b-q3gewq7fce] {
    color: var(--b4u-text);
}

.b4u-srow-cancel-confirm[b-q3gewq7fce] {
    background: var(--b4u-danger, #EF4444);
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 16px;
    border-radius: 8px;
}

.b4u-srow-cancel-confirm:disabled[b-q3gewq7fce] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* requested / will-be-cancelled summary */
.b4u-srow-cancelled[b-q3gewq7fce] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px dashed var(--b4u-border);
    padding: 11px 20px;
    background: rgba(239, 68, 68, 0.06);
}

.b4u-srow-cancelled.is-requested[b-q3gewq7fce] {
    background: rgba(234, 179, 8, 0.08);
}

.b4u-srow-cancelled :global(svg)[b-q3gewq7fce] {
    margin-top: 2px;
    color: var(--b4u-text-muted);
}

.b4u-srow-cancelled-body[b-q3gewq7fce] {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.b4u-srow-cancelled-head[b-q3gewq7fce] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

.b4u-srow-cancelled-reason[b-q3gewq7fce] {
    font-size: 12.5px;
    color: var(--b4u-text-muted);
    line-height: 1.5;
}

.b4u-srow-cancel-undo[b-q3gewq7fce] {
    background: transparent;
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.b4u-srow-cancel-undo:hover[b-q3gewq7fce] {
    border-color: var(--b4u-border-hover);
    color: var(--b4u-text);
}

/* ============ footer action bar (note / move / cancel links) ============ */

.b4u-srow-footbar[b-q3gewq7fce] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px dashed var(--b4u-border);
    padding: 11px 20px;
    background: rgba(0, 0, 0, 0.02);
}

.b4u-srow-foot-link[b-q3gewq7fce] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    transition: color 0.15s;
    min-width: 0;
}

.b4u-srow-foot-link:hover[b-q3gewq7fce] {
    color: var(--b4u-text);
}

.b4u-srow-foot-link.is-set[b-q3gewq7fce] {
    color: var(--b4u-text-secondary, var(--b4u-text));
}

.b4u-srow-foot-link--cancel:hover[b-q3gewq7fce] {
    color: var(--b4u-danger, #EF4444);
}

.b4u-srow-foot-note[b-q3gewq7fce] {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b4u-srow-foot-edit[b-q3gewq7fce] {
    color: var(--srow-accent);
    font-weight: 700;
}

.b4u-srow-foot-opt[b-q3gewq7fce] {
    color: var(--b4u-text-muted);
    font-weight: 500;
}

/* ============ move form ============ */

.b4u-srow-moveform[b-q3gewq7fce] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px dashed var(--b4u-border);
    padding: 12px 20px;
    background: var(--b4u-bg-card);
}

.b4u-srow-moveform-head :global(svg)[b-q3gewq7fce] {
    color: var(--srow-accent);
}

.b4u-srow-moveform-select[b-q3gewq7fce] {
    width: 100%;
    padding: 9px 12px;
    background: var(--b4u-bg-surface);
    border: 1.5px solid var(--b4u-border);
    border-radius: 10px;
    color: var(--b4u-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.b4u-srow-moveform-select:focus[b-q3gewq7fce] {
    border-color: var(--srow-accent);
}

.b4u-srow-move-confirm[b-q3gewq7fce] {
    background: var(--srow-accent);
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 16px;
    border-radius: 8px;
}

.b4u-srow-move-confirm:disabled[b-q3gewq7fce] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ note form ============ */

.b4u-srow-noteform[b-q3gewq7fce] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px dashed var(--b4u-border);
    padding: 12px 20px;
    background: var(--b4u-bg-card);
}

.b4u-srow-note-save[b-q3gewq7fce] {
    background: var(--srow-accent);
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 16px;
    border-radius: 8px;
}

/* ============ moved summary ============ */

.b4u-srow-moved[b-q3gewq7fce] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px dashed var(--b4u-border);
    padding: 11px 20px;
    background: rgba(59, 130, 246, 0.07);
}

.b4u-srow-moved :global(svg)[b-q3gewq7fce] {
    margin-top: 2px;
    color: var(--srow-accent);
}

.b4u-srow-moved-body[b-q3gewq7fce] {
    flex: 1;
    min-width: 160px;
}

.b4u-srow-moved-head[b-q3gewq7fce] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

/* ============ mobile: reflow the cramped row ============
   The team row (info | price | control) crams onto a ~360px card, so the price
   and the long status badge collide. On phones we split it into two lines: squad
   info + the pick control up top, then the price underneath, left-aligned and off
   its own horizontal track. (No fill ring on the team variant.) */
@media (max-width: 640px) {
    .b4u-srow-main[b-q3gewq7fce] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info  control"
            "price price";
        column-gap: 12px;
        row-gap: 8px;
        padding: 13px 15px;
    }

    .b4u-srow-info[b-q3gewq7fce] { grid-area: info; }

    .b4u-srow-control[b-q3gewq7fce] {
        grid-area: control;
        justify-self: end;
        align-self: start;
    }

    .b4u-srow-price[b-q3gewq7fce] {
        grid-area: price;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        text-align: left;
    }

    .b4u-srow-footbar[b-q3gewq7fce],
    .b4u-srow-cancelform[b-q3gewq7fce],
    .b4u-srow-moveform[b-q3gewq7fce],
    .b4u-srow-noteform[b-q3gewq7fce],
    .b4u-srow-cancelled[b-q3gewq7fce],
    .b4u-srow-moved[b-q3gewq7fce],
    .b4u-srow-meta[b-q3gewq7fce] {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* per-squad metadata (Registration-target fields) — recessed panel, inputs elevated on --b4u-bg-card */
.b4u-srow-meta[b-q3gewq7fce] {
    border-top: 1px dashed var(--b4u-border);
    padding: 14px 20px 16px;
    background: rgba(0, 0, 0, 0.02);
}

/* Grandfathered entry: registered in a squad outside the team's playing mode. */
.b4u-srow-othermode[b-q3gewq7fce] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--b4u-warning) 12%, transparent);
    color: var(--b4u-warning);
}
/* /Components/Registration/RegTeamSquadSelectStep.razor.rz.scp.css */
.b4u-reg-step[b-c9u4tj95kr] { display: block; }
.b4u-reg-step-h[b-c9u4tj95kr] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin: 0 0 4px; }
.b4u-reg-step-sub[b-c9u4tj95kr] { font-size: 14px; color: var(--b4u-text-muted); margin: 0 0 20px; }

.b4u-tmsq-legend[b-c9u4tj95kr] { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.b4u-tmsq-legend-item[b-c9u4tj95kr] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--b4u-text-muted); }
.b4u-tmsq-dot[b-c9u4tj95kr] { width: 9px; height: 9px; border-radius: 3px; }
.b4u-tmsq-dot.is-pick[b-c9u4tj95kr] { background: var(--b4u-primary); }
.b4u-tmsq-dot.is-warning[b-c9u4tj95kr] { background: var(--b4u-warning); }
.b4u-tmsq-dot.is-success[b-c9u4tj95kr] { background: var(--b4u-success); }
.b4u-tmsq-dot.is-muted[b-c9u4tj95kr] { background: var(--b4u-text-muted); }

.b4u-tmsq-day[b-c9u4tj95kr] { margin-bottom: 18px; }
.b4u-tmsq-day-h[b-c9u4tj95kr] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b4u-text-muted); margin: 0 0 10px; }
.b4u-tmsq-rows[b-c9u4tj95kr] { display: flex; flex-direction: column; gap: 8px; }

.b4u-tmsq-row[b-c9u4tj95kr] {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    background: var(--b4u-bg-card-hover); border: 1.5px solid var(--b4u-border); border-radius: 12px;
    padding: 14px 18px; cursor: pointer; transition: all 0.2s; color: inherit; font: inherit;
}
.b4u-tmsq-row.is-selected[b-c9u4tj95kr] { border-color: var(--b4u-primary); background: color-mix(in srgb, var(--b4u-primary) 6%, transparent); }
.b4u-tmsq-row.is-locked[b-c9u4tj95kr] { cursor: default; opacity: 0.92; }
.b4u-tmsq-row.is-closed[b-c9u4tj95kr] { cursor: not-allowed; opacity: 0.55; }
.b4u-tmsq-row[disabled][b-c9u4tj95kr] { cursor: not-allowed; }

.b4u-tmsq-check[b-c9u4tj95kr] {
    width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--b4u-border); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.b4u-tmsq-check.is-on[b-c9u4tj95kr] { background: var(--b4u-primary); border-color: var(--b4u-primary); }
.b4u-tmsq-info[b-c9u4tj95kr] { display: flex; flex-direction: column; flex: 1; }
.b4u-tmsq-caption[b-c9u4tj95kr] { font-weight: 600; color: var(--b4u-text); font-size: 14px; }
.b4u-tmsq-time[b-c9u4tj95kr] { color: var(--b4u-text-muted); font-size: 12px; }
.b4u-tmsq-status[b-c9u4tj95kr] { display: flex; align-items: center; }
.b4u-tmsq-badge[b-c9u4tj95kr] { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.b4u-tmsq-badge.is-success[b-c9u4tj95kr] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 12%, transparent); }
.b4u-tmsq-badge.is-warning[b-c9u4tj95kr] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 12%, transparent); }
.b4u-tmsq-badge.is-muted[b-c9u4tj95kr] { color: var(--b4u-text-muted); background: color-mix(in srgb, var(--b4u-text-muted) 12%, transparent); }
.b4u-tmsq-price[b-c9u4tj95kr] { font-weight: 700; color: var(--b4u-text); font-size: 14px; min-width: 64px; text-align: right; }
/* /Components/Registration/RegTypeChooser.razor.rz.scp.css */
.b4u-rtc[b-ryw4t9mpwn] { min-height: 100vh; background: var(--b4u-bg); }

.b4u-rtc-hero[b-ryw4t9mpwn] {
    background: var(--b4u-hero-gradient);
    padding: 120px 24px 60px;
    text-align: center;
}
.b4u-rtc-crumb[b-ryw4t9mpwn] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.7);
}
.b4u-rtc-crumb-link[b-ryw4t9mpwn] { color: var(--b4u-text-muted); font-size: 13px; }
.b4u-rtc-crumb-cur[b-ryw4t9mpwn] { color: rgba(255, 255, 255, 0.7); font-size: 13px; }
.b4u-rtc-title[b-ryw4t9mpwn] {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}
.b4u-rtc-sub[b-ryw4t9mpwn] { font-size: 16px; color: rgba(255, 255, 255, 0.5); margin: 0; }

.b4u-rtc-body[b-ryw4t9mpwn] {
    max-width: 640px;
    margin: -32px auto 0;
    padding: 0 24px 64px;
    position: relative;
    z-index: 1;
}
.b4u-rtc-q[b-ryw4t9mpwn] {
    font-size: 22px;
    font-weight: 700;
    color: var(--b4u-text);
    text-align: center;
    margin: 0 0 32px;
}
.b4u-rtc-grid[b-ryw4t9mpwn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.b4u-rtc-card[b-ryw4t9mpwn] {
    display: block;
    width: 100%;
    background: var(--b4u-bg-card);
    border: 2px solid var(--b4u-border);
    border-radius: 20px;
    padding: 32px;
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
}
.b4u-rtc-card:hover[b-ryw4t9mpwn] {
    border-color: var(--b4u-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--b4u-primary-light);
}
.b4u-rtc-card-icon[b-ryw4t9mpwn] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--b4u-primary-light);
    color: var(--b4u-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.b4u-rtc-card-title[b-ryw4t9mpwn] {
    font-size: 20px;
    font-weight: 700;
    color: var(--b4u-text);
    margin: 0 0 8px;
}
.b4u-rtc-card-desc[b-ryw4t9mpwn] {
    font-size: 14px;
    color: var(--b4u-text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 560px) {
    .b4u-rtc-grid[b-ryw4t9mpwn] { grid-template-columns: 1fr; }
}
/* /Components/Registration/RegWizardStepper.razor.rz.scp.css */
.b4u-stepper[b-kb3w3mg04y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 32px 0 28px;
}

.b4u-stepper-line[b-kb3w3mg04y] {
    height: 2px;
    width: 48px;
    background: var(--b4u-border);
    transition: background 0.3s;
}
.b4u-stepper-line.is-filled[b-kb3w3mg04y] { background: var(--b4u-primary); }

.b4u-stepper-step[b-kb3w3mg04y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}

.b4u-stepper-circle[b-kb3w3mg04y] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--b4u-bg-card);
    border: 2px solid var(--b4u-border);
    color: var(--b4u-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s;
}
.b4u-stepper-circle.is-active[b-kb3w3mg04y] {
    background: var(--b4u-primary-light);
    border-color: var(--b4u-primary);
    color: var(--b4u-primary);
}
.b4u-stepper-circle.is-complete[b-kb3w3mg04y] {
    background: var(--b4u-primary);
    border-color: var(--b4u-primary);
    color: #fff;
}

.b4u-stepper-label[b-kb3w3mg04y] {
    font-size: 11px;
    font-weight: 600;
    color: var(--b4u-text-muted);
    text-align: center;
    white-space: nowrap;
}
.b4u-stepper-label.is-reached[b-kb3w3mg04y] { color: var(--b4u-text); }

@media (max-width: 480px) {
    .b4u-stepper-line[b-kb3w3mg04y] { width: 28px; }
    .b4u-stepper-step[b-kb3w3mg04y] { min-width: 64px; }
}

.b4u-stepper-step.is-clickable[b-kb3w3mg04y] { cursor: pointer; }
.b4u-stepper-step.is-clickable:hover .b4u-stepper-circle[b-kb3w3mg04y] { border-color: var(--b4u-primary); }
.b4u-stepper-step.is-clickable:focus-visible[b-kb3w3mg04y] { outline: 2px solid var(--b4u-primary); outline-offset: 4px; border-radius: 12px; }
/* /Components/Registrations/RegistrationCard.razor.rz.scp.css */
.b4u-rc[b-po1abxspwe] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; overflow: hidden; }
.b4u-rc-head[b-po1abxspwe] { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; font-family: inherit; padding: 18px 20px; }
.b4u-rc-thumb[b-po1abxspwe] { width: 72px; height: 72px; border-radius: 14px; flex-shrink: 0; background-size: cover; background-position: center; border: 1px solid var(--b4u-border); }
.b4u-rc-main[b-po1abxspwe] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.b4u-rc-title[b-po1abxspwe] { font-size: 17px; font-weight: 700; color: var(--b4u-text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4u-rc-meta[b-po1abxspwe] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--b4u-text-muted); }
.b4u-rc-metaitem[b-po1abxspwe] { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.b4u-rc-flag[b-po1abxspwe] { width: 15px; height: 11px; border-radius: 2px; background-size: cover; }
.b4u-rc-venue[b-po1abxspwe] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4u-rc-right[b-po1abxspwe] { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.b4u-rc-countwrap[b-po1abxspwe] { text-align: right; }
.b4u-rc-count[b-po1abxspwe] { font-size: 22px; font-weight: 800; color: var(--b4u-text); line-height: 1; display: block; }
.b4u-rc-countlabel[b-po1abxspwe] { font-size: 10.5px; color: var(--b4u-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.b4u-rc-chev[b-po1abxspwe] { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); transition: transform 0.2s; }
.b4u-rc-chev.is-open[b-po1abxspwe] { transform: rotate(180deg); }
.b4u-rc-body[b-po1abxspwe] { padding: 0 20px 20px; }
.b4u-rc-divider[b-po1abxspwe] { height: 1px; background: var(--b4u-border); margin: 0 0 16px; }
.b4u-rc-chips[b-po1abxspwe] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.b4u-rc-chip[b-po1abxspwe] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--b4u-text-secondary); background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); padding: 5px 11px; border-radius: 999px; }
.b4u-rc-chip--pending[b-po1abxspwe] { color: var(--b4u-warning); border-color: color-mix(in srgb, var(--b4u-warning) 33%, transparent); background: color-mix(in srgb, var(--b4u-warning) 11%, transparent); }
.b4u-rc-squads[b-po1abxspwe] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.b4u-rc-foot[b-po1abxspwe] { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
    .b4u-rc-head[b-po1abxspwe] { padding: 14px; gap: 12px; }
    .b4u-rc-thumb[b-po1abxspwe] { width: 56px; height: 56px; }
    .b4u-rc-title[b-po1abxspwe] { white-space: normal; }
    .b4u-rc-squads[b-po1abxspwe] { grid-template-columns: 1fr; }
}
/* /Components/Registrations/RegistrationSquadCard.razor.rz.scp.css */
.b4u-rsq[b-ffqmiib7g1] {
    background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 14px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
    border-left: 3px solid var(--b4u-text-muted);
}
.b4u-rsq--confirmed[b-ffqmiib7g1] { border-left-color: var(--b4u-success); }
.b4u-rsq--waitlist[b-ffqmiib7g1]  { border-left-color: var(--b4u-warning); }
.b4u-rsq--pendingconfirmation[b-ffqmiib7g1] { border-left-color: var(--b4u-warning); }
.b4u-rsq--played[b-ffqmiib7g1]    { border-left-color: var(--b4u-text-muted); }
.b4u-rsq-top[b-ffqmiib7g1] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b4u-rsq-name[b-ffqmiib7g1] { font-size: 14.5px; font-weight: 800; color: var(--b4u-text); }
.b4u-rsq-badge[b-ffqmiib7g1] {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
    padding: 2px 8px; border-radius: 999px;
    color: var(--b4u-text-muted); border: 1px solid var(--b4u-border);
}
.b4u-rsq--confirmed .b4u-rsq-badge[b-ffqmiib7g1] { color: var(--b4u-success); border-color: color-mix(in srgb, var(--b4u-success) 33%, transparent); background: color-mix(in srgb, var(--b4u-success) 11%, transparent); }
.b4u-rsq--waitlist  .b4u-rsq-badge[b-ffqmiib7g1] { color: var(--b4u-warning); border-color: color-mix(in srgb, var(--b4u-warning) 33%, transparent); background: color-mix(in srgb, var(--b4u-warning) 11%, transparent); }
.b4u-rsq--pendingconfirmation .b4u-rsq-badge[b-ffqmiib7g1] { color: var(--b4u-warning); border-color: color-mix(in srgb, var(--b4u-warning) 33%, transparent); background: color-mix(in srgb, var(--b4u-warning) 11%, transparent); }
.b4u-rsq-when[b-ffqmiib7g1] { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--b4u-text-secondary); font-weight: 600; }
.b4u-rsq-dot[b-ffqmiib7g1] { color: var(--b4u-border); }
.b4u-rsq-time[b-ffqmiib7g1] { font-variant-numeric: tabular-nums; }
/* /Components/Registrations/RegistrationTable.razor.rz.scp.css */
.b4u-rt[b-xkyedx3whl] { width: 100%; border-collapse: collapse; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; overflow: hidden; }
.b4u-rt-th[b-xkyedx3whl] { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--b4u-text-muted); padding: 16px; border-bottom: 1px solid var(--b4u-border); }
.b4u-rt-th--event[b-xkyedx3whl] { padding-left: 20px; }
.b4u-rt-th--c[b-xkyedx3whl] { text-align: center; }
.b4u-rt-th--r[b-xkyedx3whl] { text-align: right; padding-right: 20px; }
.b4u-rt-row[b-xkyedx3whl] { border-bottom: 1px solid var(--b4u-border); cursor: pointer; transition: background 0.15s; }
.b4u-rt-row:hover[b-xkyedx3whl] { background: var(--b4u-bg-surface); }
.b4u-rt-td[b-xkyedx3whl] { padding: 16px; vertical-align: middle; font-size: 14px; color: var(--b4u-text-secondary); }
.b4u-rt-td--event[b-xkyedx3whl] { padding-left: 20px; }
.b4u-rt-td--c[b-xkyedx3whl] { text-align: center; }
.b4u-rt-td--r[b-xkyedx3whl] { text-align: right; padding-right: 20px; }
.b4u-rt-td--event[b-xkyedx3whl] { display: flex; align-items: center; gap: 12px; }
.b4u-rt-chev[b-xkyedx3whl] { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); transition: transform 0.2s; }
.b4u-rt-chev.is-open[b-xkyedx3whl] { transform: rotate(180deg); }
.b4u-rt-name[b-xkyedx3whl] { font-size: 14.5px; font-weight: 700; color: var(--b4u-text); display: block; }
.b4u-rt-sub[b-xkyedx3whl] { font-size: 12px; color: var(--b4u-text-muted); }
.b4u-rt-nowrap[b-xkyedx3whl] { white-space: nowrap; }
.b4u-rt-flag[b-xkyedx3whl] { width: 15px; height: 11px; border-radius: 2px; background-size: cover; display: inline-block; vertical-align: middle; margin-right: 7px; }
.b4u-rt-pill[b-xkyedx3whl] { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; background: var(--b4u-primary-light); color: var(--b4u-primary); border-radius: 8px; font-size: 13px; font-weight: 800; }
.b4u-rt-toggle[b-xkyedx3whl] { font-size: 13px; color: var(--b4u-primary); font-weight: 600; }
.b4u-rt-detail > td[b-xkyedx3whl] { padding: 4px 20px 20px; background: var(--b4u-bg-surface); border-bottom: 1px solid var(--b4u-border); }
.b4u-rt-squads[b-xkyedx3whl] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.b4u-rt-foot[b-xkyedx3whl] { display: flex; align-items: center; justify-content: flex-end; }
/* /Components/Results/EzLexerPromo.razor.rz.scp.css */
/* EZ Lexer "results are generated by" promo card (Results page). Always dark, like the hero. */
.b4u-ezp[b-hw7mmansbm] { position: relative; overflow: hidden; border-radius: 24px; margin-top: 40px;
    background: var(--b4u-hero-gradient); border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 30px 70px -40px rgba(0,0,0,0.6); }
/* red glow accent — brand red #E03440 at 0.33 alpha */
.b4u-ezp-glow[b-hw7mmansbm] { position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(224,52,64,0.33) 0%, transparent 68%); pointer-events: none; }

.b4u-ezp-grid[b-hw7mmansbm] { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; align-items: center; }

.b4u-ezp-kicker[b-hw7mmansbm] { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px;
    background: rgba(224,52,64,0.15); border: 1px solid rgba(224,52,64,0.33); margin-bottom: 20px; }
.b4u-ezp-kicker[b-hw7mmansbm]  svg { color: var(--b4u-primary); }
.b4u-ezp-kicker span[b-hw7mmansbm] { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b4u-primary); }

.b4u-ezp-h2[b-hw7mmansbm] { font-size: 26px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; }
.b4u-ezp-body[b-hw7mmansbm] { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.66); max-width: 460px; margin: 0 0 26px; }

.b4u-ezp-feats[b-hw7mmansbm] { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.b4u-ezp-feat[b-hw7mmansbm] { display: flex; align-items: flex-start; gap: 13px; }
.b4u-ezp-feat-ico[b-hw7mmansbm] { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(224,52,64,0.27); }
.b4u-ezp-feat-ico[b-hw7mmansbm]  svg { color: var(--b4u-primary); }
.b4u-ezp-feat-t[b-hw7mmansbm] { font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.b4u-ezp-feat-d[b-hw7mmansbm] { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.55); }

.b4u-ezp-actions[b-hw7mmansbm] { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.b4u-ezp-cta[b-hw7mmansbm] { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 12px; text-decoration: none;
    font-size: 15.5px; font-weight: 700; color: #fff; background: var(--b4u-primary);
    box-shadow: 0 6px 18px rgba(224,52,64,0.25); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.b4u-ezp-cta:hover[b-hw7mmansbm] { background: var(--b4u-primary-hover); box-shadow: 0 12px 30px rgba(224,52,64,0.33); transform: translateY(-1px); }
.b4u-ezp-cta[b-hw7mmansbm]  svg { color: #fff; }
.b4u-ezp-link[b-hw7mmansbm] { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-size: 14.5px; font-weight: 600;
    color: rgba(255,255,255,0.72); transition: color 0.2s; }
.b4u-ezp-link:hover[b-hw7mmansbm] { color: #fff; }
.b4u-ezp-link[b-hw7mmansbm]  svg { color: rgba(255,255,255,0.72); transition: color 0.2s; }
.b4u-ezp-link:hover[b-hw7mmansbm]  svg { color: #fff; }

.b4u-ezp-shot[b-hw7mmansbm] { position: relative; }
.b4u-ezp-shot-frame[b-hw7mmansbm] { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,0.7); }
.b4u-ezp-shot-frame img[b-hw7mmansbm] { display: block; width: 100%; height: auto; }
.b4u-ezp-shot-pill[b-hw7mmansbm] { position: absolute; bottom: 10px; left: 12px; display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 14px 9px 10px; border-radius: 999px; background: rgba(11,17,32,0.9); border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.b4u-ezp-shot-pill img[b-hw7mmansbm] { width: 26px; height: 26px; border-radius: 6px; }
.b4u-ezp-shot-pill span[b-hw7mmansbm] { font-size: 12.5px; font-weight: 600; color: #fff; }

/* Desktop: two-column, wider padding, tilted screenshot, heading break, pill overhangs bottom-left.
   Base (mobile) rules above come FIRST so these media overrides win by source order. */
@media (min-width: 900px) {
    .b4u-ezp-grid[b-hw7mmansbm] { grid-template-columns: 1.15fr 0.85fr; gap: 44px; padding: 44px 48px; }
    .b4u-ezp-h2[b-hw7mmansbm] { font-size: 34px; }
    .b4u-ezp-shot-frame[b-hw7mmansbm] { transform: rotate(1.2deg); }
    .b4u-ezp-shot-pill[b-hw7mmansbm] { bottom: -14px; left: -14px; }
}
@media (prefers-reduced-motion: reduce) {
    .b4u-ezp-cta[b-hw7mmansbm] { transition: none; }
}
/* /Components/Results/ResultCard.razor.rz.scp.css */
.b4u-rcard[b-e394jg0wiy] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 16px;
    padding: 18px 20px 14px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.b4u-rcard:hover[b-e394jg0wiy] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--b4u-primary) 6%, transparent);
    border-color: var(--b4u-border-hover);
}

/* Header: flag on the left, venue over city in a stacked block, type badge on the right.
   Three items on one line starved both text spans at phone widths — the block gives each a
   full line, so they truncate only against the badge and never against each other. */
.b4u-rcard-head[b-e394jg0wiy] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }

/* Takes all the space the flag and badge leave. min-width:0 is what lets its children
   actually ellipsize — without it the block refuses to shrink below its content. */
.b4u-rcard-place[b-e394jg0wiy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.b4u-rcard-venue[b-e394jg0wiy],
.b4u-rcard-venue-btn[b-e394jg0wiy] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* A button centres its text by default; as a full-width column item it must read left. */
    text-align: left;
}

.b4u-rcard-venue-btn[b-e394jg0wiy] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--b4u-border-hover);
    text-underline-offset: 3px;
    transition: color .15s;
}

.b4u-rcard-venue-btn:hover[b-e394jg0wiy] { color: var(--b4u-primary); text-decoration-style: solid; text-decoration-color: currentColor; }

.b4u-rcard-city[b-e394jg0wiy] {
    min-width: 0;
    font-size: 12px;
    color: var(--b4u-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An empty city still has to occupy its line, or a city-less card would be shorter than its
   neighbours and their info grids would stop lining up across a grid row. */
.b4u-rcard-city:empty[b-e394jg0wiy]::after { content: "\00a0"; }

.b4u-rcard-type[b-e394jg0wiy] {
    flex-shrink: 0;
    /* Belt-and-braces: .b4u-rcard-place's flex:1 already claims the free space, so this only
       matters if the place block is ever removed or made conditional. */
    margin-left: auto;
    background: var(--b4u-primary-light);
    color: var(--b4u-primary);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.b4u-rcard-name[b-e394jg0wiy] {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--b4u-text);
    margin: 0 0 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Three fixed rows. The icon column is 18px so the 14px icons sit centred.
   margin-bottom carries the spec's 14px gap above the footer rule. It lives here, not on
   the footer, because the footer uses margin-top:auto to bottom-pin itself and `auto`
   absorbs all free space -- a margin-top:14px there would be overridden, and swapping auto
   for 14px would let the footer float up on any card whose content is short. */
.b4u-rcard-info[b-e394jg0wiy] {
    display: grid;
    grid-template-columns: 18px 64px 1fr;
    row-gap: 7px;
    column-gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--b4u-text-muted);
    margin-bottom: 14px;
    /* Contains the absolutely-positioned labels in the icons-only variant below. */
    position: relative;
}

.b4u-rcard-label[b-e394jg0wiy] { font-size: 12.5px; color: var(--b4u-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Icons-only below 400px — the handoff's own variant. The label column's 64px is worth more
   to the value, which otherwise truncates a localized date mid-string on a phone; the icons
   (calendar / clock / users) carry the meaning.

   The labels are only *visually* hidden, never `display: none`, so screen readers still
   announce "Period" / "Next" / "Format". `position: absolute` is what does the work twice
   over: it clips them out of sight and takes them out of grid auto-placement, so the track
   genuinely collapses instead of sitting empty. */
@media (max-width: 400px) {
    .b4u-rcard-info[b-e394jg0wiy] { grid-template-columns: 18px 1fr; }

    .b4u-rcard-label[b-e394jg0wiy] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.b4u-rcard-value[b-e394jg0wiy] {
    font-weight: 600;
    color: var(--b4u-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* An upcoming session is the one forward-looking value on the card. */
.b4u-rcard-next[b-e394jg0wiy] { color: var(--b4u-accent); }

/* Two class selectors, so this wins over .b4u-rcard-next regardless of source order. */
.b4u-rcard-value.is-empty[b-e394jg0wiy] { color: var(--b4u-text-muted); font-weight: 400; }

/* margin-top:auto pins the footer to the bottom of the card. Cards are already equal height
   -- the grid stretches them and .b4u-rcard is height:100% -- and with fixed slots every
   card's content is currently the same height too, so this is belt-and-braces. Keep it: it
   costs nothing and it means the footer stays bottom-aligned if any element above it ever
   wraps to a second line. Removing it makes equal-height a property of the content rather
   than of the layout. */
.b4u-rcard-foot[b-e394jg0wiy] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--b4u-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.b4u-rcard-updated[b-e394jg0wiy] { color: var(--b4u-text-muted); font-size: 12px; white-space: nowrap; }

/* Secondary, not the filled primary it used to be — the card is a scan target, not a CTA. */
.b4u-rcard-results[b-e394jg0wiy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--b4u-text-secondary);
    border: 1px solid var(--b4u-border);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}

.b4u-rcard-results:hover[b-e394jg0wiy] { border-color: var(--b4u-border-hover); color: var(--b4u-text); text-decoration: none; }
/* /Components/Results/ResultRow.razor.rz.scp.css */
.b4u-rrow[b-kkj4eucbgz] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; padding: 20px 24px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.b4u-rrow:hover[b-kkj4eucbgz] { border-color: var(--b4u-border-hover); transform: translateX(4px); }
.b4u-rrow-main[b-kkj4eucbgz] { flex: 1; min-width: 240px; }
.b4u-rrow-head[b-kkj4eucbgz] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.b4u-rrow-venue[b-kkj4eucbgz] { color: var(--b4u-text-secondary); font-size: 13px; font-weight: 500; }
.b4u-rrow-venue-btn[b-kkj4eucbgz] { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--b4u-border-hover); text-underline-offset: 3px; transition: color .15s; }
.b4u-rrow-venue-btn:hover[b-kkj4eucbgz] { color: var(--b4u-primary); text-decoration-style: solid; text-decoration-color: currentColor; }
.b4u-rrow-city[b-kkj4eucbgz] { color: var(--b4u-text-muted); font-size: 12px; }
.b4u-rrow-name[b-kkj4eucbgz] { font-size: 17px; font-weight: 600; color: var(--b4u-text); margin: 0 0 8px; }
.b4u-rrow-meta[b-kkj4eucbgz] { display: flex; flex-wrap: wrap; gap: 12px; color: var(--b4u-text-muted); font-size: 13px; }
.b4u-rrow-metaitem[b-kkj4eucbgz] { display: inline-flex; align-items: center; gap: 4px; }
.b4u-rrow-next[b-kkj4eucbgz] { color: var(--b4u-primary); }
.b4u-rrow-tags[b-kkj4eucbgz] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.b4u-rrow-tag[b-kkj4eucbgz] { background: var(--b4u-primary-light); color: var(--b4u-primary); padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.b4u-rrow-side[b-kkj4eucbgz] { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.b4u-rrow-updated[b-kkj4eucbgz] { color: var(--b4u-text-muted); font-size: 12px; white-space: nowrap; }
.b4u-rrow-results[b-kkj4eucbgz] { display: inline-flex; align-items: center; gap: 6px; background: var(--b4u-primary); color: #fff; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: opacity .15s; }
.b4u-rrow-results:hover[b-kkj4eucbgz] { opacity: .9; color: #fff; text-decoration: none; }

/* Phones: .b4u-rrow-main no longer fits beside the side block, so the row wraps and the
   side block lands on its own line. Left as a shrink-to-fit column it was as wide as the
   widest child (the button), and align-items:flex-end then pushed the timestamp to the
   right edge of that column -- so "14 hours ago" hung in mid-card above a left-aligned
   button, aligned to neither the card nor the button. Wrapped it is a footer, not a
   column: full width, timestamp left, button right, separated from the body by a rule. */
@media (max-width: 640px) {
    .b4u-rrow[b-kkj4eucbgz] { padding: 18px; gap: 12px; }
    .b4u-rrow-main[b-kkj4eucbgz] { min-width: 0; }
    .b4u-rrow-side[b-kkj4eucbgz] {
        flex: 1 0 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--b4u-border);
    }
}
/* /Components/Results/ResultsPerPage.razor.rz.scp.css */
.b4u-perpage[b-ixvn6rsar7] { display: inline-flex; align-items: center; gap: 12px; }
.b4u-perpage-label[b-ixvn6rsar7] { font-size: 14px; font-weight: 500; color: var(--b4u-text-muted); white-space: nowrap; }
.b4u-perpage-opts[b-ixvn6rsar7] { display: flex; gap: 2px; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 10px; padding: 3px; }
.b4u-perpage-opt[b-ixvn6rsar7] { min-width: 40px; background: transparent; color: var(--b4u-text-muted); border: none; border-radius: 7px; padding: 6px 12px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .2s; }
.b4u-perpage-opt:hover[b-ixvn6rsar7] { color: var(--b4u-text); background: var(--b4u-bg-card-hover); }
.b4u-perpage-opt.is-active[b-ixvn6rsar7] { background: var(--b4u-primary); color: #fff; }
/* /Components/Results/ResultsViewToggle.razor.rz.scp.css */
.b4u-vtoggle[b-no6genv7bv] { display: flex; gap: 2px; background: var(--b4u-bg-surface); border-radius: 10px; padding: 3px; border: 1px solid var(--b4u-border); }
.b4u-vtoggle-btn[b-no6genv7bv] { display: flex; align-items: center; gap: 6px; background: transparent; color: var(--b4u-text-muted); border: none; border-radius: 7px; padding: 6px 10px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; transition: all 0.2s; }
.b4u-vtoggle-btn:hover[b-no6genv7bv] { color: var(--b4u-text); background: var(--b4u-bg-card-hover); }
.b4u-vtoggle-btn.is-active[b-no6genv7bv] { background: var(--b4u-primary); color: #fff; }
.b4u-vtoggle-label[b-no6genv7bv] { font-size: 13px; font-weight: 600; }
/* /Components/Shared/AdminQuickActions.razor.rz.scp.css */
/* Manager/admin quick actions — compact amber-accented buttons so they read as privileged
   controls without dominating the header (values from docs/design/full-project/event-detail.jsx). */
.b4u-aqa[b-29l0p75xb0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.b4u-aqa-btn[b-29l0p75xb0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    color: #B45309;                            /* amber-700 */
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.5); /* amber-500 @ 50% */
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.b4u-aqa-btn:hover[b-29l0p75xb0] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.8);
}

.b4u-aqa-btn.is-filled[b-29l0p75xb0] {
    color: #fff;
    background: #B45309;
    border-color: #B45309;
}

.b4u-aqa-btn.is-filled:hover[b-29l0p75xb0] {
    background: #92400E;                        /* amber-800 */
    border-color: #92400E;
}
/* /Components/Shared/Banner.razor.rz.scp.css */
.b4u-banner[b-jtahhw8g7j] {
    --bnr: #3B82F6;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-radius: 14px;
    margin-bottom: 16px;
    background: color-mix(in srgb, var(--bnr) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bnr) 25%, transparent);
}
.b4u-banner--info[b-jtahhw8g7j] { --bnr: #3B82F6; }
.b4u-banner--success[b-jtahhw8g7j] { --bnr: #22C55E; }
.b4u-banner--warning[b-jtahhw8g7j] { --bnr: #F59E0B; }
.b4u-banner--error[b-jtahhw8g7j] { --bnr: #EF4444; }
.b4u-banner--maintenance[b-jtahhw8g7j] { --bnr: #8B5CF6; }

.b4u-banner-icon[b-jtahhw8g7j] {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--bnr);
    background: color-mix(in srgb, var(--bnr) 18%, transparent);
}
.b4u-banner-body[b-jtahhw8g7j] { flex: 1; min-width: 0; }
.b4u-banner-title[b-jtahhw8g7j] { font-weight: 600; color: var(--b4u-text); font-size: 14px; margin-bottom: 2px; }
.b4u-banner-message[b-jtahhw8g7j] { color: var(--b4u-text-secondary); font-size: 13px; line-height: 1.5; }
.b4u-banner-message[b-jtahhw8g7j]  p { margin: 0 0 6px; }
.b4u-banner-message[b-jtahhw8g7j]  p:last-child { margin-bottom: 0; }
.b4u-banner-message[b-jtahhw8g7j]  ul,
.b4u-banner-message[b-jtahhw8g7j]  ol { margin: 0 0 6px; padding-left: 20px; }
.b4u-banner-message[b-jtahhw8g7j]  ul:last-child,
.b4u-banner-message[b-jtahhw8g7j]  ol:last-child { margin-bottom: 0; }
.b4u-banner-message[b-jtahhw8g7j]  a { color: var(--b4u-primary); text-decoration: underline; }
.b4u-banner-action[b-jtahhw8g7j] {
    background: var(--bnr); color: #fff; border: none; border-radius: 8px;
    padding: 7px 16px; font-size: 13px; font-weight: 600; white-space: nowrap;
    text-decoration: none; font-family: inherit; cursor: pointer;
}
.b4u-banner-dismiss[b-jtahhw8g7j] {
    background: transparent; border: none; cursor: pointer;
    padding: 4px; flex-shrink: 0; color: var(--b4u-text-muted);
    display: inline-flex; align-items: center;
}
/* /Components/Shared/ErrorState.razor.rz.scp.css */
.b4u-err[b-09g26js7nf] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 112px 16px 88px;
}
/* Dark hero band behind the fixed, transparent navbar. The site turns nav links white
   at the top of every page (theme.css), so the error pages need this band too — without
   it the light-mode menu is invisible on the light background. It also matches the design
   (card straddling a dark top band). In dark mode the band ≈ the page bg, so it's a no-op. */
.b4u-err[b-09g26js7nf]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(300px, 44vh, 460px);
    background: var(--b4u-hero-gradient);
    z-index: 0;
}
.b4u-err-card[b-09g26js7nf] {
    position: relative;
    z-index: 1;
    --err-accent: var(--b4u-primary);
    width: 100%;
    max-width: 620px;
    background: var(--b4u-bg-card);
    border-radius: var(--b4u-radius-xl);
    box-shadow: 0 24px 60px rgba(0,0,0,0.10);
    padding: 56px 40px 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.b4u-err--warning[b-09g26js7nf]  { --err-accent: var(--b4u-accent); }
.b4u-err--critical[b-09g26js7nf] { --err-accent: var(--b4u-primary); }
.b4u-err-code[b-09g26js7nf] {
    font-size: clamp(96px, 20vw, 168px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.9;
    background: linear-gradient(180deg, var(--b4u-text) 0%, var(--b4u-text-muted) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
}
.b4u-err-bar[b-09g26js7nf] { width: 48px; height: 4px; border-radius: 999px; background: var(--err-accent); opacity: 0.9; }
.b4u-err-badge[b-09g26js7nf] {
    display: inline-flex; align-items: center; gap: 6px;
    background: color-mix(in srgb, var(--err-accent) 12%, transparent);
    color: var(--err-accent);
    border: 1px solid color-mix(in srgb, var(--err-accent) 40%, transparent);
    padding: 5px 14px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.b4u-err-title[b-09g26js7nf] { font-size: 28px; font-weight: 800; color: var(--b4u-text); letter-spacing: -0.015em; line-height: 1.15; margin: 6px 0 0; }
.b4u-err-msg[b-09g26js7nf] { font-size: 15px; color: var(--b4u-text-muted); line-height: 1.6; max-width: 46ch; margin: 0; }
.b4u-err-id[b-09g26js7nf] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: var(--b4u-text-muted);
    background: var(--b4u-bg-card-hover);
    border: 1px solid color-mix(in srgb, var(--b4u-text) 12%, transparent);
    border-radius: var(--b4u-radius-sm);
    padding: 5px 10px;
}
.b4u-err-support[b-09g26js7nf] { font-size: 14px; color: var(--b4u-text-secondary); margin: 2px 0 0; }
.b4u-err-support a[b-09g26js7nf] { color: var(--b4u-primary); font-weight: 600; text-decoration: none; }
.b4u-err-support a:hover[b-09g26js7nf] { text-decoration: underline; }
.b4u-err-actions[b-09g26js7nf] { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
@media (max-width: 520px) {
    .b4u-err-card[b-09g26js7nf] { padding: 40px 22px 36px; }
}
/* /Components/Shared/EventCard.razor.rz.scp.css */
.b4u-eventcard[b-m7mkhx8634] { display: block; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.b4u-eventcard:hover[b-m7mkhx8634] { transform: translateY(-6px); border-color: var(--b4u-primary); box-shadow: 0 16px 40px rgba(224,52,64,0.12); }
.b4u-eventcard-media[b-m7mkhx8634] { position: relative; height: 168px; overflow: hidden; background: #0B0B0F; }
.b4u-eventcard-media.is-placeholder[b-m7mkhx8634] { display: flex; align-items: center; justify-content: center; background: var(--b4u-bg-elevated); }
.b4u-eventcard-media img[b-m7mkhx8634] { width: 100%; height: 100%; object-fit: cover; }
.b4u-eventcard-emoji[b-m7mkhx8634] { font-size: 64px; opacity: 0.5; }
.b4u-eventcard-overlay[b-m7mkhx8634] { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.b4u-eventcard-tags[b-m7mkhx8634] { display: flex; gap: 6px; flex-wrap: wrap; }
.b4u-eventcard-tag[b-m7mkhx8634] { background: rgba(10,10,15,0.66); color: #fff; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; border: 1px solid rgba(255,255,255,0.35); }
.b4u-eventcard-flag[b-m7mkhx8634] { background: rgba(10,10,15,0.6); border-radius: 8px; padding: 3px 6px; border: 1px solid rgba(255,255,255,0.35); }
.b4u-eventcard-body[b-m7mkhx8634] { padding: 18px 22px; }
.b4u-eventcard-title[b-m7mkhx8634] { font-size: 17px; font-weight: 700; color: var(--b4u-text); margin: 0 0 10px; line-height: 1.3; }
.b4u-eventcard-info[b-m7mkhx8634] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.b4u-eventcard-row[b-m7mkhx8634] { display: flex; align-items: center; gap: 6px; color: var(--b4u-text-secondary); font-size: 13px; }
.b4u-eventcard-row.b4u-eventcard-muted[b-m7mkhx8634] { color: var(--b4u-text-muted); }
.b4u-eventcard-row :first-child[b-m7mkhx8634] { color: var(--b4u-primary); }
.b4u-eventcard-foot[b-m7mkhx8634] { display: flex; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid var(--b4u-border); }
.b4u-eventcard-price[b-m7mkhx8634] { font-size: 18px; font-weight: 800; color: var(--b4u-text); white-space: nowrap; }
.b4u-eventcard-meter[b-m7mkhx8634] { flex: 1; }
/* /Components/Shared/EventMetricsBand.razor.rz.scp.css */
.b4u-metrics[b-24i6t8k84k] { display: flex; gap: 10px; background: var(--b4u-bg-surface); border-top: 1px solid var(--b4u-border); border-bottom: 1px solid var(--b4u-border); padding: 16px; margin: 0 -1px; }
.b4u-metric[b-24i6t8k84k] { flex: 1; min-width: 0; background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 12px; padding: 12px 14px; }
.b4u-metric-top[b-24i6t8k84k] { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; min-height: 26px; }
.b4u-metric-chip[b-24i6t8k84k] { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: var(--b4u-primary-light); display: inline-flex; align-items: center; justify-content: center; color: var(--b4u-primary); }
.b4u-metric-trend[b-24i6t8k84k] { font-size: 10.5px; font-weight: 700; color: var(--b4u-success); white-space: nowrap; }
.b4u-metric-value[b-24i6t8k84k] { font-size: 22px; font-weight: 800; color: var(--b4u-text); line-height: 1; font-variant-numeric: tabular-nums; }
.b4u-metric-label[b-24i6t8k84k] { font-size: 11.5px; font-weight: 600; color: var(--b4u-text-muted); margin-top: 4px; }
@media (max-width: 640px) {
    .b4u-metrics[b-24i6t8k84k] { gap: 0; padding: 12px; }
    .b4u-metric[b-24i6t8k84k] { border-radius: 0; border-left-width: 0; padding: 9px 4px; text-align: center; }
    .b4u-metric:first-child[b-24i6t8k84k] { border-left-width: 1px; border-radius: 12px 0 0 12px; }
    .b4u-metric:last-child[b-24i6t8k84k] { border-radius: 0 12px 12px 0; }
    .b4u-metric-top[b-24i6t8k84k] { display: none; }
    .b4u-metric-value[b-24i6t8k84k] { font-size: 17px; }
    .b4u-metric-label[b-24i6t8k84k] { font-size: 10.5px; }
}
/* /Components/Shared/EventSquadsSection.razor.rz.scp.css */
.b4u-squadday[b-fq7kykfi38] { margin-bottom: 24px; }
.b4u-squadday-head[b-fq7kykfi38] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.b4u-squadday-h[b-fq7kykfi38] { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b4u-primary); margin: 0; }
.b4u-squadday-badge[b-fq7kykfi38] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 6px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--b4u-text-muted); background: var(--b4u-bg-card-hover);
}

.b4u-sqd-filter[b-fq7kykfi38] { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; }
.b4u-sqd-pill[b-fq7kykfi38] {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap;
    padding: 7px 16px; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
    border: 1.5px solid var(--b4u-border); background: var(--b4u-bg-card); color: var(--b4u-text);
    transition: all 0.15s;
}
.b4u-sqd-pill.is-active[b-fq7kykfi38] { border-color: var(--b4u-primary); }
.b4u-sqd-pill--all.is-active[b-fq7kykfi38] { background: var(--b4u-primary); color: #fff; }
.b4u-sqd-pill:not(.b4u-sqd-pill--all).is-active[b-fq7kykfi38] { background: var(--b4u-primary-light); color: var(--b4u-primary); border-width: 2px; }
.b4u-sqd-dot[b-fq7kykfi38] { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.b4u-sqd-check[b-fq7kykfi38] { display: inline-flex; flex-shrink: 0; color: var(--b4u-text-muted); }
.b4u-sqd-dot--available[b-fq7kykfi38] { background: var(--b4u-success); }
.b4u-sqd-dot--filling[b-fq7kykfi38] { background: #F59E0B; }
.b4u-sqd-dot--full[b-fq7kykfi38] { background: var(--b4u-text-muted); }
.b4u-sqd-pill-count[b-fq7kykfi38] { font-size: 11px; color: var(--b4u-text-muted); font-weight: 500; }
.b4u-sqd-pill:not(.b4u-sqd-pill--all).is-active .b4u-sqd-pill-count[b-fq7kykfi38] { color: var(--b4u-primary); }

.b4u-sqd-trophy[b-fq7kykfi38] { display: inline-flex; flex-shrink: 0; color: var(--b4u-accent); }
.b4u-squadday-badge--vo[b-fq7kykfi38] {
    color: var(--b4u-accent);
    background: color-mix(in srgb, var(--b4u-accent) 10%, transparent);
}
/* /Components/Shared/FeaturesGrid.razor.rz.scp.css */
.b4u-fgrid-section[b-wxmq95c9v7] { padding: 48px 0 80px; overflow: hidden; }

.b4u-fgrid-head[b-wxmq95c9v7] {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 0 24px;
    text-align: center;
}

.b4u-fgrid-head h2[b-wxmq95c9v7] {
    font-size: clamp(26px, 4vw, 32px);
    font-weight: 700;
    color: var(--b4u-text);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    font-family: var(--b4u-font-display, 'Plus Jakarta Sans', sans-serif);
}

.b4u-fgrid-head p[b-wxmq95c9v7] {
    font-size: 16px;
    color: var(--b4u-text-muted);
    max-width: 500px;
    margin: 0 auto;
}

.b4u-fgrid[b-wxmq95c9v7] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.b4u-fcard[b-wxmq95c9v7] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    padding: 18px 20px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.b4u-fcard:hover[b-wxmq95c9v7] {
    transform: translateY(-2px);
    border-color: var(--b4u-border-hover, var(--b4u-primary));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--b4u-primary) 12%, transparent);
}

.b4u-fcard-icon[b-wxmq95c9v7] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--b4u-primary) 14%, transparent);
    color: var(--b4u-primary);
}

.b4u-fcard-body[b-wxmq95c9v7] { min-width: 0; }

.b4u-fcard-title[b-wxmq95c9v7] {
    font-size: 15px;
    font-weight: 600;
    color: var(--b4u-text);
    margin: 2px 0 5px;
}

.b4u-fcard-desc[b-wxmq95c9v7] {
    font-size: 13px;
    color: var(--b4u-text-muted);
    line-height: 1.55;
    margin: 0;
}
/* /Components/Shared/FormField.razor.rz.scp.css */
.b4u-field[b-nsh2b3lp5s] { margin-bottom: 16px; }
.b4u-field-label[b-nsh2b3lp5s] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
    margin-bottom: 6px;
}
.b4u-field-error[b-nsh2b3lp5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #EF4444;
    font-size: 12px;
    font-weight: 500;
}
/* /Components/Shared/Pagination.razor.rz.scp.css */
/* Pagination styles live in wwwroot/app/theme.css (global), NOT here.

   The page items are emitted via RenderTreeBuilder in Pagination.razor, and
   Blazor only stamps the scoped-CSS attribute (b-xxxxx) onto elements written
   in Razor markup — never onto builder-created ones. Scoped rules here would
   therefore miss every <button>/<a>, leaving the archives links as raw browser
   hyperlinks. Keep the rules global so they apply regardless of how the element
   is produced. See `.b4u-page*` in theme.css. */
/* /Components/Shared/Pill.razor.rz.scp.css */
.b4u-pill[b-jl0zunohh8] {
    background: var(--b4u-bg-card);
    color: var(--b4u-text-secondary);
    border: 1.5px solid var(--b4u-border);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all 0.2s;
}
.b4u-pill:hover[b-jl0zunohh8] { background: var(--b4u-bg-card-hover); }
.b4u-pill--active[b-jl0zunohh8] {
    background: var(--b4u-primary);
    color: #fff;
    border-color: var(--b4u-primary);
}
.b4u-pill--active:hover[b-jl0zunohh8] {
    background: var(--b4u-primary-hover);
    border-color: var(--b4u-primary-hover);
}
/* /Components/Shared/PinMeter.razor.rz.scp.css */
.b4u-pinmeter[b-rk7nyoti25] { width: 100%; }
.b4u-pinmeter-head[b-rk7nyoti25] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
/* Colour ramp: green (spots open) → amber (filling) → red (nearly full). The low state
   is deliberately NOT the brand red, so "plenty of room" and "full" never look alike. */
.b4u-pinmeter-pct[b-rk7nyoti25] { font-size: 12px; font-weight: 700; color: var(--b4u-meter-open-text); font-variant-numeric: tabular-nums; }
.b4u-pinmeter.is-warm .b4u-pinmeter-pct[b-rk7nyoti25] { color: var(--b4u-warning); }
.b4u-pinmeter.is-hot .b4u-pinmeter-pct[b-rk7nyoti25] { color: var(--b4u-danger); }
.b4u-pinmeter-count[b-rk7nyoti25] { font-size: 11.5px; color: var(--b4u-text-muted); font-variant-numeric: tabular-nums; }
.b4u-pinmeter-track[b-rk7nyoti25] { display: flex; gap: 3px; align-items: flex-end; height: 20px; }
.b4u-pinmeter-seg[b-rk7nyoti25] { flex: 1; height: 64%; align-self: flex-end; border-radius: 4px 4px 2px 2px; background: var(--b4u-border); transition: height 0.4s ease, background 0.3s ease; }
.b4u-pinmeter-seg.is-on[b-rk7nyoti25] { height: 100%; background: var(--b4u-meter-open); }
.b4u-pinmeter.is-warm .b4u-pinmeter-seg.is-on[b-rk7nyoti25] { background: var(--b4u-warning); }
.b4u-pinmeter.is-hot .b4u-pinmeter-seg.is-on[b-rk7nyoti25] { background: var(--b4u-danger); }

/* Fill the rack pin-by-pin when it scrolls into view (progressive enhancement). */
html.b4u-reveal-ready:not(.b4u-reveal-reduced) .b4u-pinmeter-track[data-inview] .b4u-pinmeter-seg.is-on[b-rk7nyoti25] {
    opacity: 0;
    transform: scaleY(.28);
    transform-origin: bottom;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
    transition-delay: calc(var(--i) * 55ms);
}
html.b4u-reveal-ready:not(.b4u-reveal-reduced) .b4u-pinmeter-track[data-inview].is-in .b4u-pinmeter-seg.is-on[b-rk7nyoti25] {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .b4u-pinmeter-seg.is-on[b-rk7nyoti25] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* /Components/Shared/ProgressRing.razor.rz.scp.css */
.b4u-ring[b-6082tfeuqw] { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.b4u-ring-track[b-6082tfeuqw] { stroke: var(--b4u-border); }
.b4u-ring-arc.is-ok[b-6082tfeuqw] { stroke: var(--b4u-success); }
.b4u-ring-arc.is-warn[b-6082tfeuqw] { stroke: var(--b4u-warning); }
.b4u-ring-arc.is-full[b-6082tfeuqw] { stroke: var(--b4u-danger); }
.b4u-ring-text[b-6082tfeuqw] { position: absolute; font-size: 15px; font-weight: 800; color: var(--b4u-text); letter-spacing: -0.02em; }

/* Sweep the arc from empty → its value when the ring paints (tab open, list
   render, <details> expand). The arc's resting stroke-dashoffset attribute is
   the real value, so if the animation never runs the ring shows filled — it
   can never stick empty (unlike a scroll-observer from-state). */
@keyframes b4uRingSweep-b-6082tfeuqw { from { stroke-dashoffset: var(--b4u-ring-circ); } }
.b4u-ring-arc[b-6082tfeuqw] { animation: b4uRingSweep-b-6082tfeuqw 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) { .b4u-ring-arc[b-6082tfeuqw] { animation: none; } }
/* /Components/Shared/RegisteredBadge.razor.rz.scp.css */
.b4u-regbadge[b-8ucvje23a5] {
    display: inline-flex; align-items: center; gap: 5px;
    background: #22C55E; color: #fff;
    padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
}
.b4u-regbadge.is-sm[b-8ucvje23a5] { padding: 2px 7px; font-size: 10px; gap: 4px; }
/* /Components/Shared/RollingBall.razor.rz.scp.css */
.b4u-rolling-ball[b-2zmp1bcq67] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.b4u-rb-svg[b-2zmp1bcq67] {
    display: block;
    animation: b4uRoll-b-2zmp1bcq67 0.85s linear infinite;
}

.b4u-rb-dash[b-2zmp1bcq67] {
    position: absolute;
    right: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--b4u-text-muted);
    animation: b4uDash-b-2zmp1bcq67 0.9s ease-in-out infinite;
}

.b4u-rb-dash--1[b-2zmp1bcq67] {
    top: 50%;
    margin-right: 4px;
    margin-top: -1px;
    width: calc(var(--rb-size) * 0.5);
}

.b4u-rb-dash--2[b-2zmp1bcq67] {
    top: 32%;
    margin-right: 6px;
    width: calc(var(--rb-size) * 0.34);
    animation-delay: 0.15s;
}

@keyframes b4uRoll-b-2zmp1bcq67 {
    to { transform: rotate(360deg); }
}

@keyframes b4uDash-b-2zmp1bcq67 {
    0%, 100% { opacity: 0.25; transform: translateX(4px); }
    50% { opacity: 1; transform: translateX(0); }
}
/* /Components/Shared/ScheduleRow.razor.rz.scp.css */
.b4u-schedrow[b-zqme8h5g7y] {
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-left: 3px solid var(--b4u-accent);
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 12px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.b4u-schedrow-icon[b-zqme8h5g7y] {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    background: color-mix(in srgb, var(--b4u-accent) 10%, transparent);
    color: var(--b4u-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.b4u-schedrow-name[b-zqme8h5g7y] { font-weight: 700; color: var(--b4u-text); font-size: 14px; }
.b4u-schedrow-stage[b-zqme8h5g7y] {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--b4u-accent);
    background: color-mix(in srgb, var(--b4u-accent) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--b4u-accent) 33%, transparent);
    padding: 1px 6px; border-radius: 5px; flex-shrink: 0;
}
.b4u-schedrow-when[b-zqme8h5g7y] {
    display: inline-flex; align-items: baseline; gap: 4px;
    color: var(--b4u-text-muted); font-size: 13px; font-variant-numeric: tabular-nums;
}
.b4u-schedrow-start[b-zqme8h5g7y] { color: var(--b4u-text); font-weight: 600; }
.b4u-schedrow-note[b-zqme8h5g7y] {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--b4u-text-muted); white-space: nowrap;
}
.b4u-schedrow-note[b-zqme8h5g7y]  svg { color: var(--b4u-accent); }
/* /Components/Shared/SearchInput.razor.rz.scp.css */
.b4u-search[b-uicsapd5gd] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--b4u-bg-input);
    border: 1.5px solid var(--b4u-border);
    border-radius: 14px;
    padding: 4px 6px 4px 18px;
    transition: all 0.2s;
}
.b4u-search:focus-within[b-uicsapd5gd] {
    border-color: var(--b4u-primary);
    box-shadow: 0 0 0 3px var(--b4u-primary-light);
}
.b4u-search-icon[b-uicsapd5gd] { color: var(--b4u-text-muted); display: inline-flex; }
.b4u-search-input[b-uicsapd5gd] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--b4u-text);
    font-size: 15px;
    padding: 12px 0;
    font-family: inherit;
}
.b4u-search-btn[b-uicsapd5gd] {
    background: var(--b4u-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}
.b4u-search-btn:hover[b-uicsapd5gd] { background: var(--b4u-primary-hover); }
/* /Components/Shared/Skeletons/EventCardSkeleton.razor.rz.scp.css */
/* Chrome mirrors the real EventCard (EventCard.razor.css) so swapping real cards
   in for skeletons causes no layout jump: radius 18px, media 168px, body 18px 22px,
   footer divider gap 16px / padding-top 14px. */
.b4u-skel-evcard[b-v8e4wwmpg2] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.b4u-skel-evcard-body[b-v8e4wwmpg2] { padding: 18px 22px; flex: 1; }
.b4u-skel-evcard-pills[b-v8e4wwmpg2] { display: flex; gap: 6px; margin-bottom: 14px; }
.b4u-skel-evcard-foot[b-v8e4wwmpg2] { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--b4u-border); padding-top: 14px; }
/* /Components/Shared/Skeletons/RegistrationCardSkeleton.razor.rz.scp.css */
.b4u-skel-rc[b-18urxwvw89] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; overflow: hidden; }
.b4u-skel-rc-head[b-18urxwvw89] { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.b4u-skel-rc-right[b-18urxwvw89] { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
@media (max-width: 720px) {
    .b4u-skel-rc-head[b-18urxwvw89] { padding: 14px; gap: 12px; }
}
/* /Components/Shared/Skeletons/RegistrationRowsSkeleton.razor.rz.scp.css */
.b4u-skel-rows[b-uz0vm99acl] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; overflow: hidden; }
.b4u-skel-row[b-uz0vm99acl] { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--b4u-border); }
.b4u-skel-row:first-child[b-uz0vm99acl] { border-top: none; }
/* /Components/Shared/Skeletons/SkeletonGrid.razor.rz.scp.css */
/* Matches the real events grid (.b4u-eventgrid in Events.razor.css): minmax(320px,1fr), gap 20px. */
.b4u-skel-grid[b-a7n9zhjna5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--b4u-skel-grid-min, 320px), 100%), 1fr)); gap: 20px; }
/* /Components/Shared/Skeletons/TeamCardSkeleton.razor.rz.scp.css */
.b4u-skel-tc[b-8ymotyy50j] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; padding: 18px 20px; }
.b4u-skel-tc-top[b-8ymotyy50j] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.b4u-skel-tc-head[b-8ymotyy50j] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.b4u-skel-tc-rows[b-8ymotyy50j] { border-top: 1px solid var(--b4u-border); padding-top: 6px; margin-bottom: 12px; display: flex; flex-direction: column; }
.b4u-skel-tc-row[b-8ymotyy50j] { display: flex; align-items: center; gap: 12px; padding: 9px 4px; }
.b4u-skel-tc-foot[b-8ymotyy50j] { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--b4u-border); }
/* /Components/Shared/SquadRow.razor.rz.scp.css */
/* A grid, not a flex row. Flex could only stack [info | prices | ring] side by side, which
   meant the badges — nested in the info column — were capped at that column's width. On a
   phone that column is ~120px, so a free-text category badge wrapped into a three-line
   tower and pushed the name, time and price below it out of any shared alignment. As grid
   areas the badges get their own full-width row, and the columns below stay honest. */
.b4u-squad[b-ghrnhd42ip] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "badges prices ring"
        "info   prices ring";
    align-items: center;
    column-gap: 18px;
    /* Deliberately 0: the badges block carries its own margin-bottom instead, so a squad
       with no badges collapses the row *and* its gap rather than leaving 6px of dead
       space above the name. */
    row-gap: 0;
}
.b4u-squad.is-disabled[b-ghrnhd42ip] { opacity: 0.55; }
.b4u-squad.is-live[b-ghrnhd42ip] { border-color: var(--b4u-success); }
.b4u-squad-info[b-ghrnhd42ip] { grid-area: info; min-width: 0; }
.b4u-squad-badges[b-ghrnhd42ip] { grid-area: badges; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.b4u-squad-badge[b-ghrnhd42ip] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--b4u-primary-light); color: var(--b4u-primary); }
.b4u-squad-badge.is-info[b-ghrnhd42ip] { background: var(--b4u-primary-light); color: var(--b4u-primary); }
.b4u-squad-badge.is-muted[b-ghrnhd42ip] { background: var(--b4u-bg-surface); color: var(--b4u-text-muted); }
.b4u-squad-badge.is-danger[b-ghrnhd42ip] { background: rgba(239,68,68,0.12); color: var(--b4u-danger); }
.b4u-squad-badge.is-live[b-ghrnhd42ip] { background: rgba(34,197,94,0.12); color: var(--b4u-success); }
.b4u-squad-badge.is-team[b-ghrnhd42ip] { background: rgba(59,130,246,0.1); color: #3B82F6; }
.b4u-squad-badge.is-wait[b-ghrnhd42ip] { background: rgba(245,158,11,0.12); color: #F59E0B; }
.b4u-live-dot[b-ghrnhd42ip] { width: 7px; height: 7px; border-radius: 50%; background: var(--b4u-success); box-shadow: 0 0 6px var(--b4u-success); }
.b4u-squad-name[b-ghrnhd42ip] { font-size: 15px; font-weight: 700; color: var(--b4u-text); }
.b4u-squad-when[b-ghrnhd42ip] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.b4u-squad-start[b-ghrnhd42ip] { font-size: 18px; font-weight: 700; color: var(--b4u-text); }
/* nowrap keeps "→ 19:30" whole. Without it the span broke after the arrow and dropped the
   end time onto its own line, indented to wherever the span happened to start. */
.b4u-squad-end[b-ghrnhd42ip] { font-size: 12px; color: var(--b4u-text-muted); white-space: nowrap; }
.b4u-squad-prices[b-ghrnhd42ip] { grid-area: prices; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.b4u-squad-price-row[b-ghrnhd42ip] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; justify-content: center; }
.b4u-squad-price-main[b-ghrnhd42ip] { font-size: 20px; font-weight: 800; color: var(--b4u-text); }
.b4u-squad-price-rest[b-ghrnhd42ip] { font-size: 14px; font-weight: 700; color: var(--b4u-success); }
.b4u-squad-price-label[b-ghrnhd42ip] { font-size: 11px; color: var(--b4u-text-muted); }
.b4u-squad-ring[b-ghrnhd42ip] { grid-area: ring; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.b4u-squad-waitnote[b-ghrnhd42ip] { font-size: 10.5px; font-weight: 700; color: #F59E0B; white-space: nowrap; }
.b4u-squad.is-clickable[b-ghrnhd42ip] { cursor: pointer; }
.b4u-squad.is-clickable:hover[b-ghrnhd42ip] { background: var(--b4u-bg-card-hover); border-color: var(--b4u-border-hover); }

/* Phones: three columns no longer fit. The ring keeps its column and the price drops
   under the time, left-aligned with it — one text column reading name → time → price,
   with the ring centred against the whole of it. Centred prices would have set up a
   third alignment edge inside a card that only has room for two, and the second and
   third entry fees have the full column width to sit on instead of ~90px. */
@media (max-width: 640px) {
    .b4u-squad[b-ghrnhd42ip] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "badges badges"
            "info   ring"
            "prices ring";
        column-gap: 14px;
    }
    .b4u-squad-prices[b-ghrnhd42ip] { align-items: flex-start; margin-top: 8px; }
    .b4u-squad-price-row[b-ghrnhd42ip] { justify-content: flex-start; }
}
/* /Components/Shared/StatCard.razor.rz.scp.css */
.b4u-stat[b-w3m9s5kfj2] { text-align: center; }
.b4u-stat-icon[b-w3m9s5kfj2] { color: var(--b4u-primary); margin-bottom: 8px; display: flex; justify-content: center; }
.b4u-stat-value[b-w3m9s5kfj2] { font-size: 28px; font-weight: 700; color: var(--b4u-text); letter-spacing: -0.02em; }
.b4u-stat-label[b-w3m9s5kfj2] { font-size: 14px; color: var(--b4u-text-muted); margin-top: 4px; }
/* /Components/Shared/StateBlock.razor.rz.scp.css */
.b4u-sb[b-41fkgoe6uj] { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 56px 24px; animation: b4uFloatIn .4s ease both; }
.b4u-sb.is-compact[b-41fkgoe6uj] { gap: 14px; padding: 36px 24px; }

.b4u-sb-art[b-41fkgoe6uj] { filter: drop-shadow(0 12px 28px rgba(239,68,68,.14)); }
.b4u-sb-svg[b-41fkgoe6uj] { display: block; width: 180px; height: auto; }
.b4u-sb.is-compact .b4u-sb-svg[b-41fkgoe6uj] { width: 140px; }

.b4u-sb-photo[b-41fkgoe6uj] { display: block; width: 255px; max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--b4u-border); }
.b4u-sb.is-compact .b4u-sb-photo[b-41fkgoe6uj] { width: 200px; }

.b4u-sb-inner[b-41fkgoe6uj] { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.b4u-sb-badge[b-41fkgoe6uj] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1px solid; }
.b4u-sb-badge.is-error[b-41fkgoe6uj] { color: #EF4444; background: rgba(239,68,68,.09); border-color: rgba(239,68,68,.28); }
.b4u-sb-badge.is-critical[b-41fkgoe6uj] { color: var(--b4u-primary); background: var(--b4u-primary-light); border-color: var(--b4u-primary); }
.b4u-sb-badge.is-warning[b-41fkgoe6uj] { color: #F59E0B; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.30); }
.b4u-sb-badge.is-info[b-41fkgoe6uj] { color: #3B82F6; background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.30); }
.b4u-sb-badge.is-neutral[b-41fkgoe6uj] { color: var(--b4u-text-muted); background: var(--b4u-bg-surface); border-color: var(--b4u-border); }
.b4u-sb-title[b-41fkgoe6uj] { font-size: 24px; font-weight: 800; color: var(--b4u-text); margin: 0; letter-spacing: -.01em; line-height: 1.2; }
.b4u-sb.is-compact .b4u-sb-title[b-41fkgoe6uj] { font-size: 19px; }
.b4u-sb-msg[b-41fkgoe6uj] { font-size: 14.5px; color: var(--b4u-text-muted); margin: 0; line-height: 1.6; }
.b4u-sb-actions[b-41fkgoe6uj] { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* SVG element animations (keyframes are global in theme.css). */
.b4u-sb-bob[b-41fkgoe6uj] { animation: b4uRollBob 1.6s ease-in-out infinite; transform-box: fill-box; }
.b4u-sb-wobble[b-41fkgoe6uj] { animation: b4uWobble 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 96%; }
.b4u-sb-soft[b-41fkgoe6uj] { animation: b4uPulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .b4u-sb[b-41fkgoe6uj], .b4u-sb-bob[b-41fkgoe6uj], .b4u-sb-wobble[b-41fkgoe6uj], .b4u-sb-soft[b-41fkgoe6uj] { animation: none; }
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
.b4u-theme-toggle[b-8kao55p0js] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--b4u-radius-sm);
    padding: 6px 8px;
    cursor: pointer;
    color: var(--b4u-text-secondary);
    display: inline-flex;
    align-items: center;
}
.b4u-theme-toggle:hover[b-8kao55p0js] { background: var(--b4u-bg-card-hover); }

/* Mobile burger-menu variant (Navbar's .b4u-nav-mobile). Matches .b4u-nav-mobile-link so
   it reads as one more menu row. EVERY declaration here is on the button - ThemeToggle's
   own element - so the scoped stylesheet reaches it and nothing competes with the global
   .b4u-theme-toggle-dark/-light flip rules in theme.css. The base rule above already
   supplies inline-flex, align-items, the radius and the hover wash; the icon and label
   spans are flex items of this button, which is why they need no rules of their own. */
.b4u-theme-toggle--row[b-8kao55p0js] {
    /* The base rule's 1px transparent border would inset this row 1px relative
       to the .b4u-nav-mobile-link rows it sits among, so strip it here. */
    border: 0;
    width: 100%;
    gap: 10px;
    padding: 12px 8px;
    color: var(--b4u-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
}
/* /Components/Shared/WizardResult.razor.rz.scp.css */
.b4u-wres-card[b-xc4o735kyr] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 20px;
    padding: 28px 32px;
    margin-top: 32px;
}

.b4u-wres-submitting[b-xc4o735kyr] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 22px; padding: 64px 32px; text-align: center;
}
.b4u-wres-submitting-h[b-xc4o735kyr] { font-size: 18px; font-weight: 700; color: var(--b4u-text); margin-bottom: 6px; }
.b4u-wres-submitting-sub[b-xc4o735kyr] { font-size: 14px; color: var(--b4u-text-muted); }

.b4u-wres-confirmed[b-xc4o735kyr] { text-align: center; padding: 48px 32px 40px; }
.b4u-wres-check[b-xc4o735kyr] {
    position: relative; width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--b4u-success) 12%, transparent);
    border: 2px solid var(--b4u-success); color: var(--b4u-success);
    animation: b4uPop-b-xc4o735kyr 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2);
}
.b4u-wres-check[b-xc4o735kyr]::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--b4u-success); opacity: 0.18;
    animation: b4uRingPulse-b-xc4o735kyr 1.8s ease-out 0.3s infinite;
}
@keyframes b4uPop-b-xc4o735kyr { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes b4uRingPulse-b-xc4o735kyr { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(1.6); opacity: 0; } }
.b4u-wres-confirmed-h[b-xc4o735kyr] { font-size: 26px; font-weight: 800; color: var(--b4u-text); margin: 0 0 8px; }
.b4u-wres-confirmed-msg[b-xc4o735kyr] { font-size: 15px; color: var(--b4u-text-muted); max-width: 460px; margin: 0 auto; line-height: 1.6; }
.b4u-wres-confirmed-msg strong[b-xc4o735kyr] { color: var(--b4u-text-secondary); }

/* Pending manager confirmation: same layout as the confirmed card, amber accent instead of green. */
.b4u-wres-pending[b-xc4o735kyr] { text-align: center; padding: 48px 32px 40px; }
.b4u-wres-pending .b4u-wres-check[b-xc4o735kyr] {
    background: color-mix(in srgb, var(--b4u-warning) 12%, transparent);
    border-color: var(--b4u-warning); color: var(--b4u-warning);
}
.b4u-wres-pending .b4u-wres-check[b-xc4o735kyr]::before { background: var(--b4u-warning); }

.b4u-wres-chips[b-xc4o735kyr] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.b4u-wres-chip[b-xc4o735kyr] {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 700; border: 1px solid;
}
.b4u-wres-chip-dot[b-xc4o735kyr] { width: 8px; height: 8px; border-radius: 3px; background: currentColor; }
.b4u-wres-chip.is-pick[b-xc4o735kyr] { color: var(--b4u-primary); background: color-mix(in srgb, var(--b4u-primary) 8%, transparent); border-color: color-mix(in srgb, var(--b4u-primary) 27%, transparent); }
.b4u-wres-chip.is-warning[b-xc4o735kyr] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 8%, transparent); border-color: color-mix(in srgb, var(--b4u-warning) 27%, transparent); }
.b4u-wres-chip.is-muted[b-xc4o735kyr] { color: var(--b4u-text-muted); background: color-mix(in srgb, var(--b4u-text-muted) 8%, transparent); border-color: color-mix(in srgb, var(--b4u-text-muted) 27%, transparent); }

.b4u-wres-amount[b-xc4o735kyr] {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
    background: var(--b4u-bg-card-hover); border: 1px solid var(--b4u-border); border-radius: 12px; padding: 10px 18px;
}
.b4u-wres-amount-label[b-xc4o735kyr] { font-size: 13px; color: var(--b4u-text-muted); font-weight: 600; }
.b4u-wres-amount-value[b-xc4o735kyr] { font-size: 18px; font-weight: 800; color: var(--b4u-text); }

.b4u-wres-email-note[b-xc4o735kyr] {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    margin-top: 26px; color: var(--b4u-text-muted); font-size: 13px;
}

.b4u-wres-actions[b-xc4o735kyr] {
    display: flex; gap: 12px; justify-content: center; align-items: center;
    border-top: 1px solid var(--b4u-border); margin-top: 30px; padding-top: 24px;
}
.b4u-wres-redirect-text[b-xc4o735kyr] { font-size: 13px; color: var(--b4u-text-muted); margin-top: 16px; }
.b4u-wres-redirect-text strong[b-xc4o735kyr] { color: var(--b4u-text-secondary); }
.b4u-wres-redirect-bar[b-xc4o735kyr] { width: 180px; height: 3px; border-radius: 2px; background: var(--b4u-border); margin: 12px auto 0; overflow: hidden; }
.b4u-wres-redirect-fill[b-xc4o735kyr] { height: 100%; background: var(--b4u-primary); border-radius: 2px; transition: width 1s linear; }

.b4u-wres-orgmsg[b-xc4o735kyr] {
    text-align: left; margin-top: 26px; padding: 18px 20px;
    background: var(--b4u-bg-card-hover); border: 1px solid var(--b4u-border); border-radius: 12px;
}
.b4u-wres-orgmsg-h[b-xc4o735kyr] {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--b4u-text-muted); margin-bottom: 10px;
}
.b4u-wres-orgmsg-body[b-xc4o735kyr] { font-size: 14px; line-height: 1.65; color: var(--b4u-text); }
.b4u-wres-orgmsg-body :first-child[b-xc4o735kyr] { margin-top: 0; }
.b4u-wres-orgmsg-body :last-child[b-xc4o735kyr] { margin-bottom: 0; }
.b4u-wres-orgmsg-body a[b-xc4o735kyr] { color: var(--b4u-primary); font-weight: 600; }
/* /Components/Teams/AddPlayerPanel.razor.rz.scp.css */
/* ADD PLAYER PANEL — card/popover for secure teammate search + placeholder fallback.
   Mirrors docs/design/full-project/my-teams.jsx → AddPlayerPanel. */

/* NOTE: root class is b4u-addpanel (NOT b4u-app) — the global .b4u-app shell wrapper
   in theme.css has min-height:100vh, which would stretch this panel. */
.b4u-addpanel[b-79kz60z7yj] {
    background: var(--b4u-bg-surface);
    border: 1.5px solid color-mix(in srgb, var(--b4u-primary) 33%, transparent);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}

.b4u-app-head[b-79kz60z7yj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.b4u-app-title[b-79kz60z7yj] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--b4u-text);
}

.b4u-app-close[b-79kz60z7yj] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--b4u-text-muted);
}

.b4u-app-searchwrap[b-79kz60z7yj] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.b4u-app-searchicon[b-79kz60z7yj] {
    position: absolute;
    left: 12px;
    display: flex;
    pointer-events: none;
    color: var(--b4u-text-muted);
}

.b4u-app-search[b-79kz60z7yj] {
    width: 100%;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 10px;
    padding: 10px 38px 10px 40px;
    font-size: 14px;
    font-family: inherit;
    color: var(--b4u-text);
    outline: none;
}

.b4u-app-search:focus[b-79kz60z7yj] {
    border-color: var(--b4u-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 12%, transparent);
}

.b4u-app-search[b-79kz60z7yj]::placeholder {
    color: var(--b4u-text-muted);
}

.b4u-app-clear[b-79kz60z7yj] {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--b4u-text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.b4u-app-clear:hover[b-79kz60z7yj] {
    background: color-mix(in srgb, var(--b4u-text) 8%, transparent);
    color: var(--b4u-text);
}

.b4u-app-loading[b-79kz60z7yj],
.b4u-app-empty[b-79kz60z7yj] {
    font-size: 13px;
    color: var(--b4u-text-muted);
    padding: 6px 2px 10px;
}

.b4u-app-results[b-79kz60z7yj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    max-height: 256px;          /* keep the pane compact — scroll past ~4 results */
    overflow-y: auto;
    padding-right: 2px;
}

.b4u-app-result[b-79kz60z7yj] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 11px;
    padding: 9px 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}

.b4u-app-result:hover[b-79kz60z7yj] {
    border-color: color-mix(in srgb, var(--b4u-primary) 53%, transparent);
    background: color-mix(in srgb, var(--b4u-primary) 5%, transparent);
}

.b4u-app-avatar[b-79kz60z7yj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--b4u-primary-light);
    color: var(--b4u-primary);
    font-size: 12.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b4u-app-avatarimg[b-79kz60z7yj] { object-fit: cover; background: var(--b4u-bg-card); }

/* Fallback swap — see /app/image-fallback.js. */
.b4u-app-avatar.is-hidden[b-79kz60z7yj] { display: none; }
[data-b4u-noimg] .b4u-app-avatar.is-hidden[b-79kz60z7yj] { display: flex; }

.b4u-app-meta[b-79kz60z7yj] {
    flex: 1;
    min-width: 0;
}

.b4u-app-name[b-79kz60z7yj] {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--b4u-text);
}

.b4u-app-hint[b-79kz60z7yj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--b4u-text-muted);
    margin-top: 1px;
}

.b4u-app-add[b-79kz60z7yj] {
    display: flex;
    flex-shrink: 0;
    color: var(--b4u-primary);
}

.b4u-app-placeholder[b-79kz60z7yj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1.5px dashed var(--b4u-border);
    color: var(--b4u-text-secondary);
    border-radius: 11px;
    padding: 11px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.12s;
}

.b4u-app-placeholder:hover[b-79kz60z7yj] {
    border-color: color-mix(in srgb, var(--b4u-accent) 53%, transparent);
    color: var(--b4u-accent);
}
/* /Components/Teams/EditPlayerRow.razor.rz.scp.css */
/* EDIT PLAYER ROW — desktop grid mirrors the prototype's TEAM_ROW_COLS:
   70px reorder / 30px pos / name / 48px gender / license / 98px role / 36px remove. */
.b4u-epr[b-mpru4v0w3r] {
    display: grid;
    grid-template-columns: 70px 30px minmax(0, 1fr) 48px minmax(0, 1.25fr) 98px 36px;
    gap: 9px;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid var(--b4u-border);
}

/* Reorder up/down */
.b4u-epr-reorder[b-mpru4v0w3r] { display: flex; gap: 6px; }
.b4u-epr-move[b-mpru4v0w3r] {
    width: 32px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--b4u-primary);
    background: var(--b4u-primary-light);
    border: 1px solid color-mix(in srgb, var(--b4u-primary) 33%, transparent);
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.b4u-epr-move:disabled[b-mpru4v0w3r] {
    cursor: default;
    opacity: 0.4;
    color: var(--b4u-text-muted);
    background: transparent;
    border-color: var(--b4u-border);
}
/* up button reuses the chevronDown icon flipped */
.b4u-epr-chevup[b-mpru4v0w3r] { display: flex; transform: rotate(180deg); }

/* Position chip */
.b4u-epr-pos[b-mpru4v0w3r] {
    font-size: 14px;
    font-weight: 800;
    color: var(--b4u-text-secondary);
    text-align: center;
}
.b4u-epr-pos--reserve[b-mpru4v0w3r] { color: var(--b4u-accent); }

/* Name */
.b4u-epr-name[b-mpru4v0w3r] { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.b4u-epr-fullname[b-mpru4v0w3r] {
    font-size: 14px;
    font-weight: 600;
    color: var(--b4u-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b4u-epr-namefields[b-mpru4v0w3r] { display: flex; gap: 6px; min-width: 0; }
.b4u-namein[b-mpru4v0w3r] {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    background: var(--b4u-bg-input, var(--b4u-bg-surface));
    border: 1px solid var(--b4u-border);
    border-radius: 8px;
    color: var(--b4u-text);
    font-size: 13.5px;
    font-family: inherit;
    padding: 8px 10px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.b4u-namein:focus[b-mpru4v0w3r] {
    border-color: var(--b4u-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 12%, transparent);
}
.b4u-epr-tagrow[b-mpru4v0w3r] { display: flex; align-items: center; gap: 8px; }
.b4u-epr-tag[b-mpru4v0w3r] {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b4u-accent);
}
.b4u-epr-edit[b-mpru4v0w3r] {
    font-size: 11px;
    font-weight: 700;
    color: var(--b4u-primary);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}
.b4u-epr-edit:hover[b-mpru4v0w3r] { opacity: 0.8; }

/* Gender */
.b4u-epr-gender[b-mpru4v0w3r] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--b4u-text-secondary);
    text-align: center;
}
.b4u-epr-gendersel[b-mpru4v0w3r] {
    width: 100%;
    box-sizing: border-box;
    background: var(--b4u-bg-input, var(--b4u-bg-surface));
    border: 1px solid var(--b4u-border);
    border-radius: 8px;
    color: var(--b4u-text);
    font-size: 13.5px;
    font-family: inherit;
    padding: 8px 6px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.b4u-epr-gendersel:focus[b-mpru4v0w3r] {
    border-color: var(--b4u-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 12%, transparent);
}

/* License + Role just host the composed components */
.b4u-epr-lic[b-mpru4v0w3r] { min-width: 0; }
.b4u-epr-role[b-mpru4v0w3r] { min-width: 0; }

/* Placeholder read-only license display */
.b4u-epr-licview[b-mpru4v0w3r] { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.b4u-epr-licnum[b-mpru4v0w3r] {
    font-size: 13px;
    font-family: monospace;
    color: var(--b4u-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b4u-epr-licnone[b-mpru4v0w3r] { font-size: 11px; font-weight: 700; color: var(--b4u-warning); }

/* Remove */
.b4u-epr-remove[b-mpru4v0w3r] {
    width: 36px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--b4u-border);
    color: var(--b4u-primary);
    transition: background 0.15s, border-color 0.15s;
}
.b4u-epr-remove:hover[b-mpru4v0w3r] {
    background: color-mix(in srgb, var(--b4u-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--b4u-primary) 40%, transparent);
}

/* ── Narrow / mobile card fallback ── */
@media (max-width: 720px) {
    .b4u-epr[b-mpru4v0w3r] {
        display: block;
        background: var(--b4u-bg-surface);
        border: 1px solid var(--b4u-border);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
    }
    .b4u-epr--reserve[b-mpru4v0w3r] {
        border-color: color-mix(in srgb, var(--b4u-accent) 40%, transparent);
    }
    .b4u-epr-reorder[b-mpru4v0w3r] { display: inline-flex; }
    .b4u-epr-pos[b-mpru4v0w3r] { display: inline-block; margin-left: 10px; }
    .b4u-epr-name[b-mpru4v0w3r] { margin: 10px 0; }
    .b4u-epr-gender[b-mpru4v0w3r],
    .b4u-epr-lic[b-mpru4v0w3r] { display: block; margin-bottom: 10px; text-align: left; }
    .b4u-epr-role[b-mpru4v0w3r] { display: inline-block; width: 104px; }
    .b4u-epr-remove[b-mpru4v0w3r] { display: inline-flex; float: right; }
}
/* /Components/Teams/EditTeamModal.razor.rz.scp.css */
/* EDIT TEAM MODAL — dialog chrome. Mirrors my-teams.jsx → EditTeamModal.
   Tokens keep dark mode working. */

.b4u-modal-overlay[b-go1m3soiew] {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(2, 6, 16, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
    outline: none;
}

.b4u-modal-card[b-go1m3soiew] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 20px;
    width: 100%;
    max-width: 740px;
    max-height: 90vh;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.b4u-modal-head[b-go1m3soiew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--b4u-border);
    flex-shrink: 0;
}

.b4u-modal-headtext[b-go1m3soiew] {
    min-width: 0;
}

.b4u-modal-eyebrow[b-go1m3soiew] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--b4u-primary);
    margin-bottom: 2px;
}

.b4u-modal-title[b-go1m3soiew] {
    font-size: 18px;
    font-weight: 800;
    color: var(--b4u-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b4u-modal-x[b-go1m3soiew] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    cursor: pointer;
    color: var(--b4u-text-secondary);
    transition: all 0.2s ease;
}

.b4u-modal-x:hover[b-go1m3soiew] {
    background: var(--b4u-bg-card-hover);
    color: var(--b4u-text);
}

.b4u-modal-body[b-go1m3soiew] {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.b4u-modal-foot[b-go1m3soiew] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--b4u-border);
    background: var(--b4u-bg-surface);
    flex-shrink: 0;
}
/* /Components/Teams/LicensePicker.razor.rz.scp.css */
.b4u-licpick[b-jnxa62jei4] { display: flex; align-items: center; width: 100%; min-width: 0; }
/* Manual entry stacks the number + federation vertically so they aren't squeezed
   into the narrow license column. */
.b4u-licpick--manual[b-jnxa62jei4] { flex-direction: column; align-items: stretch; gap: 6px; }

/* Saved-license dropdown is a B4uSelect (flag + number); it styles itself. */

/* Manual entry */
.b4u-licinput[b-jnxa62jei4] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--b4u-bg-input, var(--b4u-bg-surface));
    border: 1px solid var(--b4u-border);
    border-radius: 8px;
    color: var(--b4u-text);
    font-size: 13.5px;
    font-family: monospace;
    padding: 9px 10px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.b4u-licinput.is-missing[b-jnxa62jei4] { border-color: var(--b4u-warning); }
.b4u-licinput:focus[b-jnxa62jei4] { border-color: var(--b4u-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 12%, transparent); }

/* Federation B4uSelect in manual mode (full width — stacked under the number) */
.b4u-licfed[b-jnxa62jei4] { width: 100%; min-width: 0; }

.b4u-licwarn[b-jnxa62jei4] {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--b4u-warning);
    white-space: nowrap;
}
/* /Components/Teams/PlaceholderForm.razor.rz.scp.css */
.b4u-pf[b-r9adwqc3pl] {
    border: 1px dashed var(--b4u-primary);
    background: color-mix(in srgb, var(--b4u-primary) 4%, var(--b4u-bg-surface));
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

.b4u-pf-head[b-r9adwqc3pl] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.b4u-pf-title[b-r9adwqc3pl] { font-size: 14px; font-weight: 800; color: var(--b4u-text); }
.b4u-pf-close[b-r9adwqc3pl] {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; border-radius: 8px;
    background: transparent; color: var(--b4u-text-muted); cursor: pointer;
}
.b4u-pf-close:hover[b-r9adwqc3pl] { background: var(--b4u-bg-hover, color-mix(in srgb, var(--b4u-text) 8%, transparent)); }

.b4u-pf-grid[b-r9adwqc3pl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}
.b4u-pf-field[b-r9adwqc3pl] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.b4u-pf-label[b-r9adwqc3pl] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--b4u-text-muted); }

.b4u-pf-input[b-r9adwqc3pl] {
    box-sizing: border-box;
    width: 100%;
    background: var(--b4u-bg-input, #fff);
    border: 1px solid var(--b4u-border);
    border-radius: 8px;
    color: var(--b4u-text);
    font-size: 13.5px;
    font-family: inherit;
    padding: 9px 10px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.b4u-pf-input:focus[b-r9adwqc3pl] { border-color: var(--b4u-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 12%, transparent); }
.b4u-pf-select[b-r9adwqc3pl] { cursor: pointer; appearance: auto; }
.b4u-pf-date[b-r9adwqc3pl] { font-family: inherit; }

.b4u-pf-foot[b-r9adwqc3pl] {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 16px;
}

@media (max-width: 560px) {
    .b4u-pf-grid[b-r9adwqc3pl] { grid-template-columns: 1fr; }
}
/* /Components/Teams/RoleToggle.razor.rz.scp.css */
.b4u-roletoggle[b-tbwk2pydd5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}

.b4u-roletoggle[b-tbwk2pydd5]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.b4u-roletoggle.is-starter[b-tbwk2pydd5] {
    color: var(--b4u-primary);
    background: color-mix(in srgb, var(--b4u-primary) 9%, transparent);
    border-color: color-mix(in srgb, var(--b4u-primary) 33%, transparent);
}

.b4u-roletoggle.is-reserve[b-tbwk2pydd5] {
    color: var(--b4u-accent);
    background: color-mix(in srgb, var(--b4u-accent) 9%, transparent);
    border-color: color-mix(in srgb, var(--b4u-accent) 33%, transparent);
}
/* /Components/Teams/TeamCard.razor.rz.scp.css */
.b4u-tc[b-m5k273umj4] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 18px; padding: 18px 20px; }
.b4u-tc-top[b-m5k273umj4] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.b4u-tc-event[b-m5k273umj4] { display: inline-flex; align-items: center; gap: 6px; color: var(--b4u-primary); font-size: 12.5px; font-weight: 700; text-decoration: none; min-width: 0; }
.b4u-tc-event span[b-m5k273umj4] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4u-tc-badge[b-m5k273umj4] { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; padding: 3px 10px; border-radius: 999px; }
.b4u-tc-dot[b-m5k273umj4] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b4u-tc-badge--complete[b-m5k273umj4] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--b4u-success) 33%, transparent); }
.b4u-tc-badge--incomplete[b-m5k273umj4], .b4u-tc-badge--awaitingplayers[b-m5k273umj4] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--b4u-warning) 33%, transparent); }
.b4u-tc-badge--actionneeded[b-m5k273umj4] { color: var(--b4u-primary); background: var(--b4u-primary-light); border: 1px solid color-mix(in srgb, var(--b4u-primary) 33%, transparent); }
.b4u-tc-head[b-m5k273umj4] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.b4u-tc-flag[b-m5k273umj4] { width: 26px; height: 19px; border-radius: 4px; background-size: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex-shrink: 0; }
.b4u-tc-name[b-m5k273umj4] { font-size: 19px; font-weight: 800; color: var(--b4u-text); margin: 0; letter-spacing: -0.01em; flex: 1; min-width: 0; }
.b4u-tc-mode[b-m5k273umj4] { font-size: 11.5px; font-weight: 700; color: var(--b4u-text-secondary); background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); padding: 4px 12px; border-radius: 8px; white-space: nowrap; }
.b4u-tc-roster[b-m5k273umj4] { border-top: 1px solid var(--b4u-border); padding-top: 6px; margin-bottom: 12px; }
.b4u-tc-reserves-label[b-m5k273umj4] { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--b4u-text-muted); padding: 6px 4px 2px; }
.b4u-tc-empty[b-m5k273umj4] { display: flex; align-items: center; gap: 12px; padding: 9px 4px; }
.b4u-tc-emptypos[b-m5k273umj4] { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--b4u-text-muted); display: flex; align-items: center; justify-content: center; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); }
.b4u-tc-emptyicon[b-m5k273umj4] { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--b4u-border); color: var(--b4u-text-muted); }
.b4u-tc-emptytext[b-m5k273umj4] { font-size: 13.5px; color: var(--b4u-text-muted); font-style: italic; }
.b4u-tc-foot[b-m5k273umj4] { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--b4u-border); }
.b4u-tc-progress[b-m5k273umj4] { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--b4u-text-secondary); }
.b4u-tc-bars[b-m5k273umj4] { display: flex; gap: 3px; }
.b4u-tc-bar[b-m5k273umj4] { width: 18px; height: 7px; border-radius: 4px; background: var(--b4u-border); opacity: 0.6; }
.b4u-tc-bar.is-filled[b-m5k273umj4] { background: var(--b4u-success); opacity: 0.9; }
/* edit action is a <button>; reset native button chrome so the .b4u-btn--secondary look holds */
button.b4u-tc-edit[b-m5k273umj4] { appearance: none; font: inherit; }
/* /Components/Teams/TeamEditor.razor.rz.scp.css */
/* TEAM EDITOR — team details (name / country / mode) + players section.
   Mirrors docs/design/full-project/my-teams.jsx → TeamEditor. */

.b4u-te-details[b-rlh0nrlqof] {
    margin-bottom: 22px;
}

.b4u-te-grid[b-rlh0nrlqof] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .b4u-te-grid[b-rlh0nrlqof] {
        grid-template-columns: 1fr;
    }
}

.b4u-te-field[b-rlh0nrlqof] {
    min-width: 0;
}

.b4u-te-label[b-rlh0nrlqof] {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--b4u-text-muted);
    margin-bottom: 6px;
}

.b4u-te-name[b-rlh0nrlqof] {
    width: 100%;
    box-sizing: border-box;
    background: var(--b4u-bg-input, var(--b4u-bg-surface));
    border: 1px solid var(--b4u-border);
    border-radius: 10px;
    color: var(--b4u-text);
    font-size: 14px;
    font-family: inherit;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.b4u-te-name:focus[b-rlh0nrlqof] {
    border-color: var(--b4u-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--b4u-primary) 12%, transparent);
}

/* Read-only mode field (set by the event) */
.b4u-te-mode[b-rlh0nrlqof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 10px;
    color: var(--b4u-text-muted);
    font-size: 14px;
    padding: 11px 14px;
    cursor: not-allowed;
}

.b4u-te-mode-hint[b-rlh0nrlqof] {
    font-size: 12px;
    color: var(--b4u-text-muted);
}

/* Players header */
.b4u-te-playershead[b-rlh0nrlqof] {
    margin-bottom: 12px;
}

.b4u-te-playerstitle[b-rlh0nrlqof] {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--b4u-text);
    margin: 0;
}

.b4u-te-counts[b-rlh0nrlqof] {
    color: var(--b4u-text-muted);
    font-weight: 600;
}

/* Add-player affordance */
.b4u-te-add[b-rlh0nrlqof] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1.5px dashed color-mix(in srgb, var(--b4u-primary) 53%, transparent);
    color: var(--b4u-primary);
    border-radius: 12px;
    padding: 13px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    margin-bottom: 16px;
    transition: background 0.15s, border-color 0.15s;
}

.b4u-te-add:hover[b-rlh0nrlqof] {
    background: color-mix(in srgb, var(--b4u-primary) 6%, transparent);
    border-color: var(--b4u-primary);
}

/* Reserves divider */
.b4u-te-reservediv[b-rlh0nrlqof] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 4px 8px;
}

.b4u-te-reservelabel[b-rlh0nrlqof] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--b4u-accent);
}

.b4u-te-reserveline[b-rlh0nrlqof] {
    flex: 1;
    height: 1px;
    background: var(--b4u-border);
}
/* /Components/Teams/TeamPendingApprovals.razor.rz.scp.css */
.b4u-pa[b-fdmt77suy6] { background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
.b4u-pa.has-items[b-fdmt77suy6] { border-color: color-mix(in srgb, var(--b4u-warning) 40%, transparent); }
.b4u-pa-head[b-fdmt77suy6] { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; font-family: inherit; padding: 16px 18px; }
.b4u-pa-icon[b-fdmt77suy6] { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); color: var(--b4u-text-muted); }
.b4u-pa.has-items .b4u-pa-icon[b-fdmt77suy6] { background: color-mix(in srgb, var(--b4u-warning) 11%, transparent); border-color: color-mix(in srgb, var(--b4u-warning) 33%, transparent); color: var(--b4u-warning); }
.b4u-pa-titlewrap[b-fdmt77suy6] { flex: 1; min-width: 0; }
.b4u-pa-title[b-fdmt77suy6] { font-size: 15px; font-weight: 700; color: var(--b4u-text); display: flex; align-items: center; gap: 8px; }
.b4u-pa-count[b-fdmt77suy6] { font-size: 11.5px; font-weight: 800; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--b4u-bg-surface); color: var(--b4u-text-muted); text-align: center; }
.b4u-pa.has-items .b4u-pa-count[b-fdmt77suy6] { background: var(--b4u-warning); color: #fff; }
.b4u-pa-sub[b-fdmt77suy6] { display: block; font-size: 12.5px; color: var(--b4u-text-muted); margin-top: 2px; }
.b4u-pa-chev[b-fdmt77suy6] { flex-shrink: 0; color: var(--b4u-text-muted); transition: transform 0.2s; }
.b4u-pa-chev.is-open[b-fdmt77suy6] { transform: rotate(180deg); }
.b4u-pa-list[b-fdmt77suy6] { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.b4u-pa-row[b-fdmt77suy6] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); border-radius: 12px; padding: 12px 14px; }
.b4u-pa-flag[b-fdmt77suy6] { width: 22px; height: 16px; border-radius: 3px; background-size: cover; flex-shrink: 0; }
.b4u-pa-info[b-fdmt77suy6] { flex: 1; min-width: 160px; }
.b4u-pa-team[b-fdmt77suy6] { font-size: 14.5px; font-weight: 700; color: var(--b4u-text); }
.b4u-pa-mode[b-fdmt77suy6] { font-size: 12px; font-weight: 600; color: var(--b4u-text-muted); }
.b4u-pa-evt[b-fdmt77suy6] { font-size: 12.5px; color: var(--b4u-text-muted); margin-top: 1px; }
.b4u-pa-actions[b-fdmt77suy6] { display: flex; gap: 8px; }
.b4u-pa-decline[b-fdmt77suy6] { background: transparent; border: 1px solid var(--b4u-border); color: var(--b4u-text-secondary); border-radius: 9px; padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; }
.b4u-pa-decline:hover[b-fdmt77suy6] { border-color: var(--b4u-border-hover); }
/* /Components/Teams/TeamRosterRow.razor.rz.scp.css */
.b4u-tr-row[b-rb2dkff6m2] { display: flex; align-items: center; gap: 12px; padding: 9px 4px; }
.b4u-tr-pos[b-rb2dkff6m2] { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--b4u-text-secondary); display: flex; align-items: center; justify-content: center; background: var(--b4u-bg-surface); border: 1px solid var(--b4u-border); }
.b4u-tr-pos--reserve[b-rb2dkff6m2] { font-size: 11px; color: var(--b4u-accent); background: color-mix(in srgb, var(--b4u-accent) 8%, transparent); border-color: color-mix(in srgb, var(--b4u-accent) 33%, transparent); }
.b4u-tr-status[b-rb2dkff6m2] { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.b4u-tr-status--confirmed[b-rb2dkff6m2] { color: var(--b4u-success); background: color-mix(in srgb, var(--b4u-success) 11%, transparent); border: 1px solid color-mix(in srgb, var(--b4u-success) 33%, transparent); }
.b4u-tr-status--issue[b-rb2dkff6m2] { color: var(--b4u-primary); background: var(--b4u-primary-light); border: 1px solid color-mix(in srgb, var(--b4u-primary) 33%, transparent); }
.b4u-tr-status--pending[b-rb2dkff6m2] { color: var(--b4u-warning); background: color-mix(in srgb, var(--b4u-warning) 11%, transparent); border: 1px solid color-mix(in srgb, var(--b4u-warning) 33%, transparent); }
.b4u-tr-status--placeholder[b-rb2dkff6m2] { color: var(--b4u-accent); background: color-mix(in srgb, var(--b4u-accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--b4u-accent) 33%, transparent); }
.b4u-tr-name[b-rb2dkff6m2] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.b4u-tr-fullname[b-rb2dkff6m2] { font-size: 14px; font-weight: 600; color: var(--b4u-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b4u-tr-tag[b-rb2dkff6m2] { font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b4u-accent); background: color-mix(in srgb, var(--b4u-accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--b4u-accent) 33%, transparent); padding: 1px 6px; border-radius: 5px; flex-shrink: 0; }
.b4u-tr-gender[b-rb2dkff6m2] { font-size: 12.5px; color: var(--b4u-text-muted); width: 18px; text-align: center; flex-shrink: 0; }
.b4u-tr-lic[b-rb2dkff6m2] { font-size: 12.5px; color: var(--b4u-text-secondary); font-family: monospace; min-width: 64px; text-align: right; flex-shrink: 0; }
.b4u-tr-lic.is-missing[b-rb2dkff6m2] { color: var(--b4u-warning); }