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

/* Ready branch: Register + the "you're eligible" caption stacked as one unit. align-items:stretch
   so the button keeps the full column width the ≤880px event-page rule gives it. */
.b4u-eligcta-ready[b-pcg8jo8v66] { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
/* Matches .b4u-ed-fullnote on the event page (same size/weight/centering), in success green. The
   negative top margin pulls it back against the button — the flex gap above is for the button's
   shadow, not for the caption. */
.b4u-eligcta-ok[b-pcg8jo8v66] {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--b4u-success); margin-top: -4px;
}
/* /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: center; gap: 14px; text-align: left;
    padding: 14px 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; }
.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);
}
/* Outcome sentence: first thing in the expanded body (see the .razor comment), so it carries the
   body's side padding and the divider the grid used to draw. */
.b4u-elig-msg[b-dts0xakipb] { margin: 0; padding: 14px 20px 0; font-size: 13px; color: var(--b4u-text-secondary); line-height: 1.5; border-top: 1px solid var(--b4u-border); }
.b4u-elig-msg + .b4u-elig-grid[b-dts0xakipb] { border-top: none; padding-top: 12px; }
.b4u-elig-chev[b-dts0xakipb] { flex-shrink: 0; color: var(--b4u-text-muted); display: inline-flex; 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; }
}

/* The "open in file manager" affordance is an <a>, not a <button>: it has to survive static SSR
   with no circuit. Undo the anchor defaults so it sits flush with its sibling buttons. */
a.b4u-flm-upload-btn[b-cccn4047dx] {
    text-decoration: none;
}

a.b4u-flm-upload-btn:hover[b-cccn4047dx] {
    text-decoration: none;
}
/* /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; }
/* .b4u-pl-loadmore (the mobile accumulate control) is styled in theme.css — shared with the
   teams tab, same unscoped reasoning as .b4u-pl-pager. */
/* /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 */
/* nowrap + basis 0: the three steps NEVER stack — a podium only means anything side by side
   (stacked, the 2-1-3 arrangement read "second place first"; user-flagged). The ≤640px block
   below shrinks the steps so all three fit a phone. */
.b4u-rw-podium[b-r8seot5uhx] { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: nowrap; }
.b4u-rw-pod[b-r8seot5uhx] { flex: 1 1 0; min-width: 0; max-width: 220px; display: flex; flex-direction: column; align-items: center; }
/* DOM is semantic (1,2,3 — champion first for screen readers); the classic visual podium
   order comes from here. */
.b4u-rw-pod-1[b-r8seot5uhx] { order: 2; }
.b4u-rw-pod-2[b-r8seot5uhx] { order: 1; }
.b4u-rw-pod-3[b-r8seot5uhx] { order: 3; }
.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; }

    /* Compact podium: all three steps side by side on a phone (user decision) — smaller
       medals, amounts and step blocks instead of stacking. */
    .b4u-rw-podium[b-r8seot5uhx] { gap: 8px; }
    .b4u-rw-pod-top[b-r8seot5uhx] { gap: 3px; margin-bottom: 8px; }
    .b4u-rw-medal[b-r8seot5uhx] { width: 26px; height: 26px; font-size: 12px; }
    .b4u-rw-medal-1[b-r8seot5uhx] { width: 32px; height: 32px; font-size: 14px; }
    .b4u-rw-pod-amt[b-r8seot5uhx], .b4u-rw-pod .b4u-rw-pod-amt[b-r8seot5uhx] { font-size: 14.5px; }
    .b4u-rw-pod-lbl[b-r8seot5uhx] { font-size: 9.5px; }
    .b4u-rw-pod-block span[b-r8seot5uhx] { font-size: 22px; }
    .b4u-rw-block-1[b-r8seot5uhx] { height: 96px; }
    .b4u-rw-block-2[b-r8seot5uhx] { height: 72px; }
    .b4u-rw-block-3[b-r8seot5uhx] { height: 56px; }
}
/* /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;                                       /* fallback for engines without env() */
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 24px;
    z-index: 80;
    /* --fed-primary tints the FAB on a federation page; every other host gets the fallback. */
    background: var(--fed-primary, 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(--fed-primary, 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(--fed-primary, 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; }

/* Compact tail index — two quiet link rows (archives, run-your-own) that replaced the big
   archives band, the live ticker and the organiser band: the LIST owns this page (user +
   reviewer decision, 2026-08-19). */
.b4u-evt-more[b-ul12kvw57l] { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.b4u-evt-more-row[b-ul12kvw57l] {
    display: flex; align-items: center; gap: 14px;
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 12px;
    padding: 12px 14px; text-decoration: none; color: var(--b4u-text-muted);
    transition: border-color 0.15s, background 0.15s;
}
.b4u-evt-more-row:hover[b-ul12kvw57l] { background: var(--b4u-bg-card-hover); border-color: var(--b4u-border-hover); }
.b4u-evt-more-icon[b-ul12kvw57l] {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--b4u-bg-surface); color: var(--b4u-text-secondary);
}
.b4u-evt-more-icon.is-accent[b-ul12kvw57l] { background: var(--b4u-primary-light); color: var(--b4u-primary); }
.b4u-evt-more-text[b-ul12kvw57l] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.b4u-evt-more-text strong[b-ul12kvw57l] { font-size: 14px; font-weight: 700; color: var(--b4u-text); }
.b4u-evt-more-text span[b-ul12kvw57l] { font-size: 12.5px; color: var(--b4u-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* min(320px, 100%): the bare 320px floor overflowed viewports narrower than
   320 + the container gutters (e.g. 360px phones scrolled sideways). */
.b4u-eventgrid[b-ul12kvw57l] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 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.
   On phones the scroll sentinel (load-more-observer.js) advances the list automatically and
   the button doubles as the fallback, full-width so it cannot be missed (user feedback). */
.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); }
/* End-of-list marker — terminal punctuation for the infinite scroll. */
.b4u-evt-alldone[b-ul12kvw57l] { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    color: var(--b4u-text-muted); }
.b4u-evt-alldone[b-ul12kvw57l]  svg { color: var(--b4u-success); }
.b4u-evt-sentinel[b-ul12kvw57l] { width: 100%; height: 1px; }
@media (max-width: 640px) {
    .b4u-evt-loadmore[b-ul12kvw57l] { align-items: stretch; }
    .b4u-evt-loadmore-count[b-ul12kvw57l] { text-align: center; }
    .b4u-evt-loadmore[b-ul12kvw57l]  .b4u-btn { width: 100%; justify-content: center; }
}

/* 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.
   Centering uses auto margins on the first/last tab, NOT justify-content: center: a centered
   flex container that overflows (e.g. 8 tabs at 641px) clips its START edge past scrollLeft 0,
   leaving the first tab ("Accueil" → "eil") permanently unreachable (critique P2). Auto margins
   center when everything fits and collapse to a plain scrollable row when it doesn't. */
.b4u-ed-tabs[b-k0hq4drj1b] { display: flex; gap: 4px; border-bottom: 1px solid var(--b4u-border); padding: 0 8px; overflow-x: auto; }
.b4u-ed-tabs > :first-child[b-k0hq4drj1b] { margin-left: auto; }
.b4u-ed-tabs > :last-child[b-k0hq4drj1b] { margin-right: 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); }
/* --fed-ink, not --fed-primary: this is text and a border on a page surface, so it needs the
   theme-aware variant (see theme.css). Off a federation page it resolves to Bowl4U primary,
   which is what every other host had before. */
.b4u-ed-tab.is-active[b-k0hq4drj1b] { color: var(--fed-ink); border-bottom-color: var(--fed-ink); }
.b4u-ed-tab.is-disabled[b-k0hq4drj1b] { color: var(--b4u-text-muted); opacity: 0.45; cursor: default; pointer-events: none; }

/* An item that leaves the site. It shares .b4u-ed-tab wholesale — that shared box is the point, so
   it reads as a peer of the real sections rather than a differently-shaped pill. Only two things
   are added: the ↗ glyph riding with the label, and a hover tint, since it can never be is-active
   and would otherwise be the one item in the strip with no pressed/selected state at all. */
.b4u-ed-tab-extlabel[b-k0hq4drj1b] { display: inline-flex; align-items: center; gap: 4px; }
.b4u-ed-tab-extlabel > svg[b-k0hq4drj1b] { opacity: 0.55; flex-shrink: 0; }
.b4u-ed-tab--external:hover[b-k0hq4drj1b] { color: var(--fed-ink); }
.b4u-ed-tab--external:hover .b4u-ed-tab-extlabel > svg[b-k0hq4drj1b] { opacity: 1; }

/* A standalone strip carrying three items overflows a 390px phone in French: "Événements" +
   "Résultats" + "Listing officiel" measured 371px inside a 347px box, so the strip scrolled and
   showed a scrollbar track under the tabs. 18px of side padding per tab spends 108px of a 390px
   viewport on whitespace; 10px buys back 48px and clears it with room to spare.
   Scoped to --standalone because the ordinary strip is display:none at this width — only a host
   that opted out of the fixed bottom bar renders tabs on a phone at all. */
@media (max-width: 640px) {
    .b4u-ed-tabs--standalone .b4u-ed-tab[b-k0hq4drj1b] { padding-left: 10px; padding-right: 10px; }
}

/* ---------------------------------------------------------------------------
   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) {
    /* The strip hides on phones because the fixed bottom bar replaces it. A host that opted out
       of that bar (ShowBottomBar="false") has no replacement, so hiding the strip would leave it
       with no navigation at all below 640px — the extra class beats this rule on specificity.
       It must stay INSIDE this media block and AFTER the plain rule: same-specificity source
       order is what the base/override pair above depends on, and this pair follows the same law. */
    .b4u-ed-tabs[b-k0hq4drj1b] { display: none; }
    .b4u-ed-tabs.b4u-ed-tabs--standalone[b-k0hq4drj1b] { display: flex; }

    .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);
    }
    /* max-width + ellipsis: at 360px a long label ("Récompenses", 73px) otherwise overflows
       its ~57px cell into the neighbours (critique P2). The cell already sets min-width: 0. */
    .b4u-ed-bnlabel[b-k0hq4drj1b] { font-size: 10.5px; font-weight: 600; white-space: nowrap; color: var(--b4u-text-secondary);
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
    .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); }

/* Organiser-reserved capacity (BlockSpotCommand): no team/player behind it, so it reads as a muted
   placeholder rather than a participant, and the team variant never gets the expand affordance. */
.b4u-sd-avatar.is-blocked[b-11790gp8l3] { background: var(--b4u-bg-surface); color: var(--b4u-text-muted); border: 1px dashed var(--b4u-border); }
.b4u-sd-blocked[b-11790gp8l3] { font-style: italic; font-weight: 400; color: var(--b4u-text-muted); }
.b4u-sd-tmrow.is-blocked[b-11790gp8l3] { cursor: default; }
.b4u-sd-tmrow.is-blocked:hover td[b-11790gp8l3] { background: inherit; }
.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; }


/* Selection squad: the organiser picks who plays. Sits under the title, above the summary bar. */
.b4u-sd-selnote[b-11790gp8l3] { display: flex; align-items: center; gap: 6px; margin: -12px 0 16px; font-size: 13px; font-weight: 600; color: var(--b4u-text-secondary); }
/* /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(--fed-ink); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.b4u-fchips-clear:hover[b-jjy5jcxtm2] { text-decoration: underline; }

/* Phones/tablets reach the filters through the Filters FAB, so the idle "No filters applied"
   line explains nothing they can act on — it just costs a row above the list. Only the empty
   state is hidden; as soon as there are chips to clear the row comes back. Shared by the Events
   and Results pages, deliberately. */
@media (max-width: 899px) {
    .b4u-fchips.is-empty[b-jjy5jcxtm2] { display: none; }
}
/* /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); }
/* Marks an option off from the ones below it — see FilterOption.DividerAfter. The extra
   padding keeps the rule clear of the label rather than hugging it. */
.b4u-fcl-row--divide[b-v4p1ed9pwb] { border-bottom: 1px solid var(--b4u-border); padding-bottom: 12px; margin-bottom: 5px; }

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

/* Every row already carries a hairline, so a group break has to be more than another line:
   a darker rule plus a gap. See FilterOption.DividerAfter. */
.b4u-msheet-opt--divide[b-3c1zn9alhe] { border-bottom-color: var(--b4u-border-hover); margin-bottom: 10px; }

.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/GuestMenu.razor.rz.scp.css */
/* The whole component is a phone affordance: above 820px the bar shows the inline
   Login / Sign up pair instead (.b4u-nav-auth, hidden below that width in Navbar.razor.css).
   Owning the breakpoint here rather than in the navbar keeps it out of ::deep. */
.b4u-guest[b-69f6egh1hx] { display: none; position: relative; }

@media (max-width: 820px) {
    .b4u-guest[b-69f6egh1hx] { display: block; }
}

/* Matches the ProfileMenu trigger's pill geometry so the slot does not shift when a
   visitor signs in, but sized for a bare icon instead of a 32px avatar. */
.b4u-guest-trigger[b-69f6egh1hx] {
    display: flex; align-items: center; gap: 4px;
    background: transparent; border: 1px solid transparent;
    border-radius: 999px; padding: 8px 8px 8px 10px; cursor: pointer;
    color: var(--b4u-text-secondary);
}
.b4u-pm.is-open .b4u-guest-trigger[b-69f6egh1hx] { background: var(--b4u-bg-elevated); border-color: var(--b4u-border); }

/* Panel shell restated from ProfileMenu: scoped CSS means .b4u-pm-panel[b-profilemenu]
   would never match this component's markup. Kept deliberately identical so the two
   header menus sit in the same place and cast the same shadow. */
.b4u-guest-panel[b-69f6egh1hx] {
    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: 12px; min-width: 248px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.b4u-pm.is-open .b4u-guest-panel[b-69f6egh1hx] { display: block; }

.b4u-guest-head[b-69f6egh1hx] { padding: 2px 4px 12px; }
.b4u-guest-title[b-69f6egh1hx] { font-size: 15px; font-weight: 700; color: var(--b4u-text); }
.b4u-guest-sub[b-69f6egh1hx] { font-size: 12px; color: var(--b4u-text-muted); margin-top: 3px; line-height: 1.4; }

/* Full width and stacked: the invite is the point of the panel, so both actions are
   buttons - Login is never a bare link here. */
.b4u-guest-cta[b-69f6egh1hx] { width: 100%; justify-content: center; }
.b4u-guest-cta + .b4u-guest-cta[b-69f6egh1hx] { margin-top: 8px; }
/* .b4u-btn--secondary fills with --b4u-bg-card, which is exactly the panel's own
   background - the Login button would read as a bare outline. Drop it onto the surface
   tone so it is visibly a button in both themes. Its text stays --b4u-text. */
.b4u-guest-cta.b4u-btn--secondary[b-69f6egh1hx] { background: var(--b4u-bg-surface); }
.b4u-guest-cta.b4u-btn--secondary:hover[b-69f6egh1hx] { background: var(--b4u-bg-card-hover); }
/* /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. Below 820px the bar shows the
       compact <GuestMenu /> in its place (which owns that breakpoint itself), and
       the same pair also lives in the dropdown (see .b4u-nav-mobile-auth). */
    .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-authbtn[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; }
}

/* Compact inbox rows: one-line title, then one muted line "event · time". Unread = dot + bold,
   no tinted background (a list of unread rows used to read as one solid pink block). The
   manager-request rows above keep the roomier .b4u-notif-row layout. */
.b4u-notif-row--inbox[b-nz89jsdnl6] { gap: 8px; padding: 8px 16px 8px 10px; border-radius: 10px; }
.b4u-notif-dotcol[b-nz89jsdnl6] { flex: 0 0 8px; display: flex; justify-content: center; padding-top: 6px; }
.b4u-notif-dot[b-nz89jsdnl6] { width: 8px; height: 8px; border-radius: 999px; background: var(--b4u-primary, #E03440); }
.b4u-notif-row--inbox .b4u-notif-title[b-nz89jsdnl6] {
    font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b4u-notif-row--inbox.is-unread .b4u-notif-title[b-nz89jsdnl6] { font-weight: 700; }
.b4u-notif-meta[b-nz89jsdnl6] { display: flex; min-width: 0; font-size: 12px; color: var(--b4u-text-muted); }
/* The event name gives way first; the time always stays readable. */
.b4u-notif-event[b-nz89jsdnl6] { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b4u-notif-event[b-nz89jsdnl6]::after { content: "·"; padding: 0 5px; }
.b4u-notif-meta .b4u-notif-time[b-nz89jsdnl6] { flex: 0 0 auto; }
.b4u-notif-viewall[b-nz89jsdnl6] {
    display: block; padding: 10px 14px; text-align: center; font-size: 13px; font-weight: 600;
    color: var(--b4u-primary, #E03440); border-top: 1px solid var(--b4u-border); text-decoration: none;
}
.b4u-notif-viewall:hover[b-nz89jsdnl6] { background: var(--b4u-bg-elevated); }
/* /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); }

/* The EZ Id is meant to be read and re-typed — same monospace treatment as /profile. */
.b4u-pm-ezid[b-qxxnvxgjji] {
    font-family: var(--b4u-font-mono);
    font-variant-numeric: slashed-zero tabular-nums;
    font-feature-settings: "zero" 1, "ss01" 1;
    letter-spacing: 0.04em;
    color: var(--b4u-text-secondary);
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Sticky footer. <main> takes whatever height the page's own content doesn't, so a short or
   still-loading page can't leave <Footer/> floating mid-screen with blank space beneath it.
   .b4u-app already carries min-height:100vh (theme.css); .b4u-nav is position:fixed, so it has
   no flow height and is not a flex item. */
.b4u-app[b-99fw8bp70z] { display: flex; flex-direction: column; }

main[b-99fw8bp70z] { display: block; flex: 1 0 auto; }
/* /Components/Layout/PushAskCard.razor.rz.scp.css */
/* Floating soft prompt for Web Push. Same card treatment as .b4u-toast / .b4u-reconnect-card in
   theme.css. Rendered after </nav>, never inside it: .b4u-nav.b4u-scrolled has a backdrop-filter,
   which would make this position:fixed card position against the nav instead of the viewport. */
.b4u-pushask[b-skslptewvg] {
    position: fixed; right: 20px; bottom: 20px; max-width: 380px;
    /* Above the mobile event tab bar (70), below the cookie consent bar (1000) and the toast stack
       (9999): it must never cover the cookie consent. */
    z-index: 900;
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-left: 4px solid var(--b4u-primary);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    backdrop-filter: blur(12px);
    animation: b4u-pushask-in-b-skslptewvg .25s cubic-bezier(.4,0,.2,1);
}

/* The UA's [hidden] { display: none } loses to the display:flex above, so without this rule the card
   (and push.js's hide) would be always visible. */
.b4u-pushask[hidden][b-skslptewvg],
.b4u-pushask-error[hidden][b-skslptewvg] { display: none; }

.b4u-pushask-icon[b-skslptewvg] {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--b4u-primary) 15%, transparent);
    color: var(--b4u-primary);
}
.b4u-pushask-body[b-skslptewvg] { flex: 1; min-width: 0; }
.b4u-pushask-title[b-skslptewvg] { font-weight: 600; font-size: 14px; color: var(--b4u-text); margin-bottom: 4px; }
.b4u-pushask-text[b-skslptewvg] { font-size: 14px; font-weight: 500; color: var(--b4u-text-secondary); line-height: 1.5; margin: 0 0 12px; }
.b4u-pushask-error[b-skslptewvg] { font-size: 13px; font-weight: 500; color: #EF4444; line-height: 1.4; margin: 0 0 10px; }
.b4u-pushask-actions[b-skslptewvg] { display: flex; flex-wrap: wrap; gap: 8px; }

@keyframes b4u-pushask-in-b-skslptewvg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes b4u-pushask-fade-in-b-skslptewvg { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .b4u-pushask[b-skslptewvg] { animation: b4u-pushask-fade-in-b-skslptewvg .25s ease; }
}

/* Clears the 60px mobile event tab bar at the bottom of event pages. */
@media (max-width: 640px) {
    .b4u-pushask[b-skslptewvg] { left: 12px; right: 12px; max-width: none; bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* /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; }
/* DIRECT children only: the date item nests .b4u-ed-v-full/.b4u-ed-v-compact spans, and the
   old descendant form (`.b4u-ed-meta span`, 0-1-1) out-ranked their single-class display:none
   (0-1-0) — display:flex won and BOTH date wordings rendered at once (user-flagged). */
.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; }
/* Ended pill — quiet and informational, deliberately NOT a button. Centers itself when the
   ≤880px block stretches the CTA column. */
.b4u-ed-ended[b-u5v6hvut23] { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 999px; background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border); color: var(--b4u-text-muted);
    font-size: 13.5px; font-weight: 600; }
/* Full-event note under the Register CTA ("Full · Waiting List"). */
.b4u-ed-fullnote[b-u5v6hvut23] { font-size: 12.5px; font-weight: 600; color: var(--b4u-text-muted); text-align: center; }
.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; }
/* The entry fee is the meta line's one accented fact (the key-facts grid it lived in was
   removed as duplication — user decision, 2026-08-19). */
.b4u-ed-meta-fee[b-u5v6hvut23] { color: var(--b4u-primary); font-weight: 700; }
/* Compact/full date wording in the meta line: the compact span shows only on phones (see the
   640px block below). Scoped under .b4u-ed-meta (0-2-0) so no class+type row rule can ever
   out-rank the hide again. NOTE: this base rule MUST also precede that media block — equal
   specificity there, so source order decides. */
.b4u-ed-meta .b4u-ed-v-compact[b-u5v6hvut23] { display: none; }
.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; }
/* The About text now runs ABOVE the venue/map block, and .b4u-ed-desc only carries an 8px
   bottom margin (it was the last thing on the tab). Adjacent-sibling so the extra breathing
   room only appears when a description actually precedes the map. */
.b4u-ed-desc + .b4u-ed-locwrap[b-u5v6hvut23] { margin-top: 24px; }
.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) — and compress the whole header.
   At desktop values ~600px of hero sat above the first content pixel on a 390×844
   phone (user feedback: "the screen is all header and no detail"). Every trim here
   pulls the tab panel toward the first viewport; the tab-switch scroll in theme.js
   covers whatever remains. */
@media (max-width: 640px) {
    .b4u-ed-cta[b-u5v6hvut23] { max-width: none; gap: 8px; }
    .b4u-ed-hero[b-u5v6hvut23] { padding: 76px 0 0; }   /* fixed nav is ~64px; 100px was decorative */
    /* Breadcrumb on ONE line: "Events › <long event name>" wrapped to two or three rows on a
       390px phone. The trailing name span is the only shrinkable item (min-width:0 defeats the
       flex-item auto minimum size, without which it refuses to go below its text width). */
    .b4u-ed-crumb[b-u5v6hvut23] { padding: 0 0 12px; white-space: nowrap; }
    .b4u-ed-crumb > span:last-child[b-u5v6hvut23] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .b4u-ed-card[b-u5v6hvut23] { padding: 16px 14px; gap: 12px; border-radius: 16px 16px 0 0; }
    .b4u-ed-panel[b-u5v6hvut23] { border-radius: 0 0 16px 16px; }
    .b4u-ed-titlerow[b-u5v6hvut23] { margin-bottom: 8px; }
    .b4u-ed-title[b-u5v6hvut23] { font-size: 20px; }
    .b4u-ed-meta[b-u5v6hvut23] { gap: 6px 14px; font-size: 13.5px; }
    .b4u-ed-tags[b-u5v6hvut23] { margin-top: 8px; }
    .b4u-ed-tabcontent[b-u5v6hvut23] { padding: 16px 14px; }
    /* A 320px-tall map ate most of a phone viewport on its own. */
    .b4u-ed-map[b-u5v6hvut23] { height: 220px; }

    /* Secondary actions collapse to ONE row of equal-width compact buttons when there are one or
       two of them (Results + Live Scoring is the common pair). grid-auto-flow:column +
       grid-auto-columns:1fr sizes N columns from whatever is rendered, so no markup has to count
       the buttons. grid-template-columns MUST be reset to none — the 880px block sets an explicit
       1fr track, and explicit tracks would still win over the auto ones. The selector repeats the
       880px rule's `:not(.has-two-live)` (0-2-0) so specificity ties and source order decides.
       THREE buttons (Results + both live links) keep the 880px shape — Results spanning, the two
       live buttons under it — because "Live Scoring" / "Live Stream" do not fit a 100px column on
       a 390px phone (measured: the labels clipped). They only get the compact sizing below. */
    .b4u-ed-cta-actions:not(.has-two-live)[b-u5v6hvut23] {
        display: grid; grid-template-columns: none;
        grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    }
    /* ~40px tall: enough for a comfortable tap target while two fit side by side. The label is
       an anonymous flex item after the icon; min-width:0 lets it shrink and the nowrap/overflow
       pair keeps a long label ("Live Scoring") inside its column instead of widening it. */
    .b4u-ed-cta-actions[b-u5v6hvut23]  .b4u-btn {
        padding: 9px 10px; font-size: 13.5px; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Phones swap the meta line's full date wording for the compact one ("19 → 27 sept. 2026").
       Same .b4u-ed-meta scoping as the base rule above — the hide/show pair must out-rank any
       class+type row rule (see the specificity note there). */
    .b4u-ed-meta .b4u-ed-v-full[b-u5v6hvut23] { display: none; }
    .b4u-ed-meta .b4u-ed-v-compact[b-u5v6hvut23] { display: inline; }
}
/* /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; }
/* Longhands on purpose: the element is the .b4u-container, whose 0 24px / 0 14px gutters a padding shorthand would wipe (scoped selector wins on specificity). */
.b4u-eligp-body[b-t262xy548w] { padding-top: 28px; padding-bottom: 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 ============
   Card padding ate 32px each side on phones — trim it. The container's own
   mobile gutter is global now (theme.css .b4u-container @640px). */
@media (max-width: 640px) {
    .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) — the container's
   own mobile gutter is global now (theme.css .b4u-container @640px). */
@media (max-width: 640px) {
    .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); }

/* Phones: the map canvas ate ~46vh of a screen whose job is scrolling a date-ordered
   list (user feedback: "of no use, just wasting space"). Collapse the hero to a compact
   gradient band holding just the search box; the map layers (SVG, flight arc, scrims,
   nav band, OSM credit — credit is only owed while the map is shown) all hide together.
   Tablet/desktop keep the full canvas. min-height:0 beats the base clamp() so height is
   content-driven again. */
@media (max-width: 640px) {
    .b4u-evt-hero[b-g5dl69z8la] { min-height: 0; padding: 84px 14px 16px; }
    .b4u-evt-hero[b-g5dl69z8la]  .b4u-evt-map,
    .b4u-evt-hero[b-g5dl69z8la]  .b4u-evt-flight,
    .b4u-evt-hero[b-g5dl69z8la]  .b4u-evt-map-scrim,
    .b4u-evt-hero[b-g5dl69z8la]  .b4u-evt-map-navband,
    .b4u-evt-hero[b-g5dl69z8la]  .b4u-evt-map-vscrim,
    .b4u-evt-hero[b-g5dl69z8la]  .b4u-evt-map-attrib { display: none; }
}
/* /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* removed: the members-listing CTA moved out of the hero into the
   section bar (FederationSections.razor.css) to buy back vertical space on phones. */
/* /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; }
/* min(320px, 100%): a bare 320px floor overflows viewports narrower than 320 + gutters. */
.b4u-eventgrid[b-gltrnj74y8] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 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/Notifications.razor.rz.scp.css */
/* 108px of top padding is what clears the fixed navbar, and the gradient is the dark backdrop the
   transparent-at-top navbar needs. Matches .b4u-rg-hero on MyRegistrations. */
.b4u-nf-hero[b-vz1g2j6oq8] { background: var(--b4u-hero-gradient); padding: 108px 24px 40px; }
.b4u-nf-hero-inner[b-vz1g2j6oq8] { max-width: 760px; margin: 0 auto; }
.b4u-nf-crumb[b-vz1g2j6oq8] { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: rgba(255,255,255,0.55); }
.b4u-nf-crumb a[b-vz1g2j6oq8] { color: rgba(255,255,255,0.45); text-decoration: none; }
.b4u-nf-crumb a:hover[b-vz1g2j6oq8] { color: rgba(255,255,255,0.75); }
.b4u-nf-title[b-vz1g2j6oq8] { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #fff; letter-spacing: -0.02em; margin: 0; }

.b4u-nf[b-vz1g2j6oq8] { max-width: 760px; margin: 0 auto; padding: 24px 16px 72px; }
.b4u-nf-head[b-vz1g2j6oq8] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.b4u-nf-confirm-text[b-vz1g2j6oq8] { font-size: 14px; font-weight: 600; margin-right: 4px; }
.b4u-nf-list[b-vz1g2j6oq8] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.b4u-nf-row[b-vz1g2j6oq8] { position: relative; }
/* Right padding keeps the title clear of the delete button laid over the card's corner. */
.b4u-nf-row a[b-vz1g2j6oq8] {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 52px 14px 16px; text-decoration: none; color: inherit;
    background: var(--b4u-bg-card); border: 1px solid var(--b4u-border); border-radius: 12px;
}
.b4u-nf-row a:hover[b-vz1g2j6oq8] { background: var(--b4u-bg-elevated); }
.b4u-nf-row.is-unread a[b-vz1g2j6oq8] { border-left: 4px solid var(--b4u-primary, #E03440); }
.b4u-nf-row.is-unread .b4u-nf-row-title[b-vz1g2j6oq8] { font-weight: 700; }
.b4u-nf-row-title[b-vz1g2j6oq8] { font-size: 15px; font-weight: 600; }
.b4u-nf-row-body[b-vz1g2j6oq8] { font-size: 14px; color: var(--b4u-text-secondary, #475569); white-space: pre-line; }
.b4u-nf-row-meta[b-vz1g2j6oq8] { font-size: 12px; color: var(--b4u-text-secondary, #475569); display: flex; gap: 6px; }
.b4u-nf-delete[b-vz1g2j6oq8] {
    position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--b4u-text-muted, #94a3b8);
}
.b4u-nf-delete:hover[b-vz1g2j6oq8], .b4u-nf-delete:focus-visible[b-vz1g2j6oq8] { color: var(--b4u-primary, #E03440); background: var(--b4u-bg-elevated); }
.b4u-nf-delete:disabled[b-vz1g2j6oq8] { cursor: default; opacity: 0.5; }
.b4u-nf-more[b-vz1g2j6oq8] { display: flex; justify-content: center; margin-top: 20px; }
.b4u-nf-alldone[b-vz1g2j6oq8] { font-size: 13px; color: var(--b4u-text-secondary, #475569); display: inline-flex; align-items: center; gap: 6px; }
.b4u-nf-loading[b-vz1g2j6oq8] { height: 160px; border-radius: 12px; background: var(--b4u-bg-elevated); }
/* /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);
}

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

.b4u-privacy-body a[b-1558ctct3q],
.b4u-privacy-contact-sub a[b-1558ctct3q] {
    color: var(--b4u-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.b4u-privacy-body a:hover[b-1558ctct3q],
.b4u-privacy-contact-sub a:hover[b-1558ctct3q] {
    color: var(--b4u-primary-light);
}

.b4u-privacy-body code[b-1558ctct3q] {
    font-size: 13px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    color: var(--b4u-text);
}

/* Unfilled placeholders in the policy draft. Deliberately loud: nothing here may
   reach production. Delete this rule once the last [TODO] is gone. */
.b4u-privacy-todo[b-1558ctct3q] {
    background: #ffec8b;
    color: #4a3200;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #d4302f inset;
}

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

/* Identity + bowling + photo share one Save, so the bar belongs to the page, not a card. */
.b4u-pf-savebar[b-giitig1in7] { display: flex; justify-content: flex-end; margin-top: 4px; }
/* /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; }
}
/* Phone: the hero was ~340px of pure chrome before the first result. Trim it to the title, the
   search box and a minimal EZLexer badge — the full EzLexerPromo block still sits at the bottom
   of the list, so the badge here only has to credit, not sell. */
@media (max-width: 640px) {
    .b4u-evt-hero[b-57ij5z6af0] { padding: 76px 16px 28px; }   /* fixed nav is ~64px; 120px was decorative */
    .b4u-evt-h1[b-57ij5z6af0] { font-size: 26px; margin-bottom: 8px; }
    .b4u-evt-sub[b-57ij5z6af0] { display: none; }              /* the h1 already says what the page is */
    .b4u-res-badge[b-57ij5z6af0] { margin-top: 14px; padding: 6px 12px 6px 8px; gap: 8px; }
    .b4u-res-badge img[b-57ij5z6af0] { width: 22px; height: 22px; }
    /* Wraps rather than ellipsises: in French/Dutch/... the brand name comes LAST in the sentence,
       so a one-line clip cut off exactly the "EZ Lexer" the badge exists to credit (seen at 390px). */
    .b4u-res-badge span[b-57ij5z6af0] { font-size: 12px; line-height: 1.35; }
}
/* /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; }

/* 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-input[readonly][b-fhjmlcay8j] { background: var(--b4u-bg-surface); }
.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; }

/* --- EZ Id: read-only identifier + copy ------------------------------------------------ */
/* Monospaced and letter-spaced on purpose: this is the one field a player reads off the
   screen and types somewhere else, so 0/O and 1/l have to be told apart at a glance.
   (The generator's alphabet already drops the worst offenders, but the value is also shown
   to people transcribing it from a screenshot or a phone.) */
.b4u-pf-ezid[b-fhjmlcay8j] {
    font-family: var(--b4u-font-mono);
    font-variant-numeric: slashed-zero tabular-nums;
    font-feature-settings: "zero" 1, "ss01" 1;
    letter-spacing: 0.06em;
    font-size: 14px;
    font-weight: 500;
    /* Disabled inputs are muted site-wide; the EZ Id is read-only, not inactive, so it keeps
       full-contrast text. */
    color: var(--b4u-text);
}
.b4u-pf-ezid[readonly][b-fhjmlcay8j] { color: var(--b4u-text); }

.b4u-pf-ezid-row[b-fhjmlcay8j] { display: flex; align-items: stretch; gap: 8px; }
.b4u-pf-ezid-row .b4u-pf-inputwrap[b-fhjmlcay8j] { flex: 1; min-width: 0; }

.b4u-pf-copy[b-fhjmlcay8j] {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px;
    background: var(--b4u-bg-input); border: 1px solid var(--b4u-border);
    border-radius: 10px; color: var(--b4u-text-secondary);
    cursor: pointer; font: inherit; transition: color 0.15s, border-color 0.15s;
}
.b4u-pf-copy:hover:not(:disabled)[b-fhjmlcay8j] { color: var(--b4u-primary); border-color: var(--b4u-primary); }
.b4u-pf-copy:disabled[b-fhjmlcay8j] { opacity: 0.5; cursor: not-allowed; }
.b4u-pf-copy.is-copied[b-fhjmlcay8j] { color: #16A34A; border-color: #16A34A; }
/* /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-number.is-invalid[b-a951r6wqce] { border-color: var(--b4u-danger, #d33); }

.b4u-pf-lic-error[b-a951r6wqce] {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--b4u-danger, #d33);
}

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

/* --- line 3 (conditional): the two-state advisory (§7.1) ---
   Verified is the positive/visible outcome: green wash. Unconfirmed is deliberately NEUTRAL —
   no danger/red styling — since it covers "absent from the listing" as much as any real problem,
   and must never look more alarming for one underlying cause than the other. */
.b4u-pf-lic-badge[b-a951r6wqce] {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 12px; font-weight: 600; line-height: 1.4;
    padding: 7px 10px; border-radius: 8px;
}
.b4u-pf-lic-badge[b-a951r6wqce]  svg { flex-shrink: 0; margin-top: 1px; }
.b4u-pf-lic-badge--verified[b-a951r6wqce] {
    color: var(--b4u-success);
    background: color-mix(in srgb, var(--b4u-success) 10%, transparent);
}
.b4u-pf-lic-badge--unconfirmed[b-a951r6wqce] {
    color: var(--b4u-text-muted);
    font-weight: 500;
    background: var(--b4u-bg-input);
}

.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/Profile/ProfileSectionNotifications.razor.rz.scp.css */
.b4u-pf-push[b-7rmlxezpqq] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.b4u-pf-push-state[b-7rmlxezpqq] { margin: 0; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.b4u-pf-push-state.is-on[b-7rmlxezpqq] { color: #17864a; }
.b4u-pf-push-hint[b-7rmlxezpqq] { margin: 0; font-size: 13px; color: var(--b4u-text-secondary, #475569); flex-basis: 100%; }
.b4u-pf-switch[b-7rmlxezpqq] { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--b4u-border); cursor: pointer; }
.b4u-pf-switch input[b-7rmlxezpqq] { width: 18px; height: 18px; accent-color: var(--b4u-primary, #E03440); }
.b4u-pf-switch-label[b-7rmlxezpqq] { font-size: 15px; font-weight: 500; }
/* Frequency choice under the Event Manager alerts switch. The 30px indent is the switch's 18px
   checkbox + 12px gap, so the select lines up with the switch label above it. */
.b4u-pf-freq[b-7rmlxezpqq] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 10px 30px; }
.b4u-pf-freq-label[b-7rmlxezpqq] { font-size: 14px; color: var(--b4u-text-secondary, #475569); }
.b4u-pf-freq-select[b-7rmlxezpqq] { min-width: 10rem; padding: 6px 12px; font-size: 14px; font-family: inherit; color: var(--b4u-text); background: var(--b4u-bg-input, var(--b4u-bg-surface)); border: 1px solid var(--b4u-border); border-radius: 10px; cursor: pointer; }
.b4u-pf-freq-select:disabled[b-7rmlxezpqq] { cursor: default; opacity: 0.6; }
/* /Components/Registration/RegistrationRulesModal.razor.rz.scp.css */
/* REGISTRATION RULES MODAL — dialog chrome. Mirrors EditTeamModal's b4u-modal-* overlay/card
   pattern under a b4u-rulesmodal-* prefix (this component isn't a child of EditTeamModal, so its
   own scoped stylesheet needs its own selectors). Tokens keep dark mode working. */

.b4u-rulesmodal-backdrop[b-5gp1moq2h5] {
    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-rulesmodal[b-5gp1moq2h5] {
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.b4u-rulesmodal-head[b-5gp1moq2h5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--b4u-border);
    flex-shrink: 0;
}

.b4u-rulesmodal-head h3[b-5gp1moq2h5] {
    font-size: 17px;
    font-weight: 800;
    color: var(--b4u-text);
    margin: 0;
}

.b4u-rulesmodal-close[b-5gp1moq2h5] {
    width: 34px;
    height: 34px;
    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-rulesmodal-close:hover[b-5gp1moq2h5] {
    background: var(--b4u-bg-card-hover);
    color: var(--b4u-text);
}

.b4u-rulesmodal-body[b-5gp1moq2h5] {
    padding: 18px 22px 22px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.b4u-rulesmodal-rule[b-5gp1moq2h5] {
    padding: 14px 16px;
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 12px;
}

.b4u-rulesmodal-rule-h[b-5gp1moq2h5] {
    font-size: 14px;
    font-weight: 700;
    color: var(--b4u-text);
    margin-bottom: 8px;
}

.b4u-rulesmodal-facts[b-5gp1moq2h5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.b4u-rulesmodal-facts li[b-5gp1moq2h5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--b4u-text-secondary);
}

.b4u-rulesmodal-facts .b4u-icon[b-5gp1moq2h5] {
    color: var(--b4u-primary);
    flex-shrink: 0;
}

.b4u-rulesmodal-window[b-5gp1moq2h5] {
    color: var(--b4u-text-muted);
}

/* Collapsible squad-scope: "N squads" toggle + the expandable comma list */
.b4u-rulesmodal-scope[b-5gp1moq2h5] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--b4u-primary);
    cursor: pointer;
}

.b4u-rulesmodal-scope:hover[b-5gp1moq2h5] {
    text-decoration: underline;
}

.b4u-rulesmodal-scope .b4u-icon[b-5gp1moq2h5] {
    color: var(--b4u-primary);
}

.b4u-rulesmodal-facts li.b4u-rulesmodal-scopelist[b-5gp1moq2h5] {
    display: block;
    padding-left: 20px;
    color: var(--b4u-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
/* /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;
}

.b4u-reg-fee[b-8zqnho0lus] {
    margin-left: .4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /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;
}

/* receipt — rows and total share one card, so the total's weight/size carry the emphasis
   instead of a filled box that has to outweigh everything around it. */
.b4u-ov-receipt[b-hkh93zzw57] {
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    padding: 16px 20px;
}

.b4u-ov-receipt-row[b-hkh93zzw57] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--b4u-text-muted);
}

.b4u-ov-receipt-label[b-hkh93zzw57] {
    min-width: 0;
}

.b4u-ov-receipt-amount[b-hkh93zzw57] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.b4u-ov-receipt-total[b-hkh93zzw57] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--b4u-border);
}

/* The common case — a first-time registration, nothing to itemise — renders the total alone.
   Without this reset it would still carry the rule meant to separate it from rows above,
   leaving a stray hairline under the card's own top padding where no rule renders at all. */
.b4u-ov-receipt-total:first-child[b-hkh93zzw57] {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

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

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

/* mixed-currency note replaces the total row when priced squads carry more than one currency */
.b4u-ov-receipt-note[b-hkh93zzw57] {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--b4u-border);
    font-size: 13px;
    line-height: 1.4;
    color: var(--b4u-text-muted);
}

.b4u-ov-receipt-note:first-child[b-hkh93zzw57] {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.b4u-ov-receipt-sub[b-hkh93zzw57] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--b4u-text-muted);
}

.b4u-ov-receipt-sub .b4u-ov-receipt-amount[b-hkh93zzw57] {
    font-variant-numeric: tabular-nums;
}

/* 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 — every configured tier, the one in force emphasised. RegistrationWizardModel.PriceTiersOf
   decides which; see docs/superpowers/specs/2026-08-11-wizard-price-tier-strip-design.md. */
.b4u-srow-price[b-aa7hl88m2h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.b4u-srow-price-row[b-aa7hl88m2h] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}

.b4u-srow-price-cur[b-aa7hl88m2h] {
    font-size: 13px;
    font-weight: 700;
    color: var(--b4u-text-muted);
}

.b4u-srow-tier[b-aa7hl88m2h] {
    font-size: 13px;
    font-weight: 700;
    color: var(--b4u-text-muted);
    white-space: nowrap;
    transition: font-size 140ms ease, color 140ms ease;
}

.b4u-srow-tier.is-active[b-aa7hl88m2h] {
    font-size: 17px;
    font-weight: 800;
    color: var(--b4u-text);
}

/* Was a leaf span; now the container for the per-tier words. The 11px/muted stays as the
   inherited default that the spans below override. */
.b4u-srow-price-label[b-aa7hl88m2h] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
    color: var(--b4u-text-muted);
}

.b4u-srow-tierlabel[b-aa7hl88m2h] {
    font-size: 10.5px;
    color: var(--b4u-text-muted);
    white-space: nowrap;
    transition: color 140ms ease;
}

.b4u-srow-tierlabel.is-active[b-aa7hl88m2h] {
    font-size: 11px;
    font-weight: 700;
    color: var(--b4u-text);
}

/* Separators live in CSS so no punctuation ships through the translation files. */
.b4u-srow-tier + .b4u-srow-tier[b-aa7hl88m2h]::before,
.b4u-srow-tierlabel + .b4u-srow-tierlabel[b-aa7hl88m2h]::before {
    content: "/";
    margin-right: 4px;
    font-size: 11px;
    font-weight: 400;
    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;
}

/* constraint-blocked (cap reached / ineligible): an otherwise-open squad the player/team can't pick
   right now. Greyed out like the other disabled controls, with a not-allowed cursor so it doesn't
   read as clickable — title carries the full reason for a mouse hover. */
.b4u-srow-control--blocked[b-aa7hl88m2h] {
    color: var(--b4u-text-muted);
    border: 1.5px solid var(--b4u-border);
    background: var(--b4u-bg-card);
    cursor: not-allowed;
}

/* inline reason line, shown next to the squad time when the row above is blocked */
.b4u-srow-blockmsg[b-aa7hl88m2h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--b4u-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.b4u-srow-blockmsg :global(svg)[b-aa7hl88m2h] {
    color: var(--b4u-warning);
    flex-shrink: 0;
}

/* ============ 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],
.b4u-srow.is-openselection .b4u-srow-control--pick[b-aa7hl88m2h] {
    /* unselected waiting-list (or selection) 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;
}

/* "Not sent yet" — the one line that has to survive a glance at a row whose badge and
   border still (correctly) read "Registered". Deliberately NOT muted: the reason line
   above it is small print, and this is the instruction the player must act on. Follows
   the .b4u-srow-blockmsg house pattern — amber marker, text in the normal ink — so it
   holds contrast in both themes without inventing a warning-text colour. */
.b4u-srow-cancelled-todo[b-aa7hl88m2h],
.b4u-srow-moved-todo[b-aa7hl88m2h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--b4u-text);
    line-height: 1.5;
}

.b4u-srow-cancelled-todo[b-aa7hl88m2h]::before,
.b4u-srow-moved-todo[b-aa7hl88m2h]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b4u-warning);
    flex-shrink: 0;
}

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

/* Move / Cancel carry their intent colour at rest (not only on hover) so they read as actions,
   not as muted metadata; hover underlines instead of recolouring. */
.b4u-srow-foot-link--move[b-aa7hl88m2h],
.b4u-srow-foot-link--move:hover[b-aa7hl88m2h] {
    color: var(--b4u-info, #2563EB);
}

.b4u-srow-foot-link--cancel[b-aa7hl88m2h],
.b4u-srow-foot-link--cancel:hover[b-aa7hl88m2h] {
    color: var(--b4u-danger, #EF4444);
}

.b4u-srow-foot-link--move:hover[b-aa7hl88m2h],
.b4u-srow-foot-link--cancel:hover[b-aa7hl88m2h] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.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;
    /* Was a plain block with a single span; the "not sent yet" line beside it needs the
       same column stacking the cancelled body already uses. */
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.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. The numbers group and the words group are two
       independent flex containers competing for one narrow track, and .b4u-srow-tierlabel is
       nowrap — three tiers with a long first word (fi: "ilmoittautuminen", 16 chars) would push the
       words onto two or three lines while the numbers stay on one. Wrapping HERE drops the whole
       words group to its own line instead, keeping the two halves legible as a pair. */
    .b4u-srow-price[b-aa7hl88m2h] {
        grid-area: price;
        flex-direction: row;
        flex-wrap: wrap;
        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;
    }
}

/* Tier labels: full word on desktop, compact ordinal (1re/2e/3e) on mobile. Base hides the
   short form; the media query swaps them. Base precedes the override so the scoped-CSS cascade
   resolves correctly (see the scoped-css cascade trap). */
.b4u-srow-tierlabel-short[b-aa7hl88m2h] {
    display: none;
}

@media (max-width: 640px) {
    .b4u-srow-tierlabel-full[b-aa7hl88m2h] {
        display: none;
    }

    .b4u-srow-tierlabel-short[b-aa7hl88m2h] {
        display: inline;
    }
}
/* /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-rulesbtn[b-y22smvylo8] {
    margin-top: 10px;
}

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

/* receipt — rows and total share one card, so the total's weight/size carry the emphasis
   instead of a filled box that has to outweigh everything around it. */
.b4u-ov-receipt[b-7v9zbr95tq] {
    background: var(--b4u-bg-surface);
    border: 1px solid var(--b4u-border);
    border-radius: 14px;
    padding: 16px 20px;
    margin-top: 18px;
}

.b4u-ov-receipt-row[b-7v9zbr95tq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--b4u-text-muted);
}

.b4u-ov-receipt-label[b-7v9zbr95tq] {
    min-width: 0;
}

.b4u-ov-receipt-amount[b-7v9zbr95tq] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.b4u-ov-receipt-total[b-7v9zbr95tq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--b4u-border);
}

/* The common case — a first-time registration, nothing to itemise — renders the total alone.
   Without this reset it would still carry the rule meant to separate it from rows above,
   leaving a stray hairline under the card's own top padding where no rule renders at all. */
.b4u-ov-receipt-total:first-child[b-7v9zbr95tq] {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.b4u-ov-receipt-total .b4u-ov-receipt-label[b-7v9zbr95tq] {
    font-weight: 700;
    font-size: 16px;
    color: var(--b4u-text);
}

.b4u-ov-receipt-total .b4u-ov-receipt-amount[b-7v9zbr95tq] {
    font-weight: 800;
    font-size: 22px;
    color: var(--b4u-pick, #3B82F6);
}

/* mixed-currency note replaces the total row when priced squads carry more than one currency */
.b4u-ov-receipt-note[b-7v9zbr95tq] {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--b4u-border);
    font-size: 13px;
    line-height: 1.4;
    color: var(--b4u-text-muted);
}

.b4u-ov-receipt-note:first-child[b-7v9zbr95tq] {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.b4u-ov-receipt-sub[b-7v9zbr95tq] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--b4u-text-muted);
}

.b4u-ov-receipt-sub .b4u-ov-receipt-amount[b-7v9zbr95tq] {
    font-variant-numeric: tabular-nums;
}

.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 — every configured tier, the one in force emphasised. TeamRegistrationWizardModel.PriceTiersOf
   decides which; see docs/superpowers/specs/2026-08-11-wizard-price-tier-strip-design.md. */
.b4u-srow-price[b-q3gewq7fce] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.b4u-srow-price-row[b-q3gewq7fce] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}

.b4u-srow-price-cur[b-q3gewq7fce] {
    font-size: 13px;
    font-weight: 700;
    color: var(--b4u-text-muted);
}

.b4u-srow-tier[b-q3gewq7fce] {
    font-size: 13px;
    font-weight: 700;
    color: var(--b4u-text-muted);
    white-space: nowrap;
    transition: font-size 140ms ease, color 140ms ease;
}

.b4u-srow-tier.is-active[b-q3gewq7fce] {
    font-size: 17px;
    font-weight: 800;
    color: var(--b4u-text);
}

/* Was a leaf span; now the container for the per-tier words. The 11px/muted stays as the
   inherited default that the spans below override. */
.b4u-srow-price-label[b-q3gewq7fce] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
    color: var(--b4u-text-muted);
}

.b4u-srow-tierlabel[b-q3gewq7fce] {
    font-size: 10.5px;
    color: var(--b4u-text-muted);
    white-space: nowrap;
    transition: color 140ms ease;
}

.b4u-srow-tierlabel.is-active[b-q3gewq7fce] {
    font-size: 11px;
    font-weight: 700;
    color: var(--b4u-text);
}

/* Separators live in CSS so no punctuation ships through the translation files. */
.b4u-srow-tier + .b4u-srow-tier[b-q3gewq7fce]::before,
.b4u-srow-tierlabel + .b4u-srow-tierlabel[b-q3gewq7fce]::before {
    content: "/";
    margin-right: 4px;
    font-size: 11px;
    font-weight: 400;
    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;
}

/* constraint-blocked (cap reached / ineligible): an otherwise-open squad the team can't pick right
   now. Greyed out like the other disabled controls, with a not-allowed cursor so it doesn't read as
   clickable — title carries the full reason for a mouse hover. */
.b4u-srow-control--blocked[b-q3gewq7fce] {
    color: var(--b4u-text-muted);
    border: 1.5px solid var(--b4u-border);
    background: var(--b4u-bg-card);
    cursor: not-allowed;
}

/* inline reason line, shown next to the squad time when the row above is blocked */
.b4u-srow-blockmsg[b-q3gewq7fce] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--b4u-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.b4u-srow-blockmsg :global(svg)[b-q3gewq7fce] {
    color: var(--b4u-warning);
    flex-shrink: 0;
}

/* ============ 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],
.b4u-srow.is-openselection .b4u-srow-control--pick[b-q3gewq7fce] {
    /* unselected waiting-list (or selection) 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;
}

/* "Not sent yet" — see RegSquadSelectRow.razor.css for why this is not muted. */
.b4u-srow-cancelled-todo[b-q3gewq7fce],
.b4u-srow-moved-todo[b-q3gewq7fce] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--b4u-text);
    line-height: 1.5;
}

.b4u-srow-cancelled-todo[b-q3gewq7fce]::before,
.b4u-srow-moved-todo[b-q3gewq7fce]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b4u-warning);
    flex-shrink: 0;
}

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

/* Move / Cancel carry their intent colour at rest — see RegSquadSelectRow.razor.css. */
.b4u-srow-foot-link--move[b-q3gewq7fce],
.b4u-srow-foot-link--move:hover[b-q3gewq7fce] {
    color: var(--b4u-info, #2563EB);
}

.b4u-srow-foot-link--cancel[b-q3gewq7fce],
.b4u-srow-foot-link--cancel:hover[b-q3gewq7fce] {
    color: var(--b4u-danger, #EF4444);
}

.b4u-srow-foot-link--move:hover[b-q3gewq7fce],
.b4u-srow-foot-link--cancel:hover[b-q3gewq7fce] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.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;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

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

    /* The numbers group and the words group are two independent flex containers competing for one
       narrow track, and .b4u-srow-tierlabel is nowrap — three tiers with a long first word
       (fi: "ilmoittautuminen", 16 chars) would push the words onto two or three lines while the
       numbers stay on one. Wrapping HERE drops the whole words group to its own line instead,
       keeping the two halves legible as a pair. */
    .b4u-srow-price[b-q3gewq7fce] {
        grid-area: price;
        flex-direction: row;
        flex-wrap: wrap;
        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);
}

/* Tier labels: full word on desktop, compact ordinal (1re/2e/3e) on mobile. Base hides the
   short form; the media query swaps them. Base precedes the override so the scoped-CSS cascade
   resolves correctly (see the scoped-css cascade trap). */
.b4u-srow-tierlabel-short[b-q3gewq7fce] {
    display: none;
}

@media (max-width: 640px) {
    .b4u-srow-tierlabel-full[b-q3gewq7fce] {
        display: none;
    }

    .b4u-srow-tierlabel-short[b-q3gewq7fce] {
        display: inline;
    }
}
/* /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-rulesbtn[b-c9u4tj95kr] { margin: -12px 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.
   That decision stands: this stays an outline. What changed (2026-08-23) is that the outline is
   now TINTED rather than grey. Grey-on-grey read as disabled, and on a federation page it was the
   one control that ignored the federation's colour while the chrome around it carried it.
   --fed-ink is the theme-aware text/border variant of the federation colour (see theme.css);
   off a federation page it resolves to Bowl4U primary. */
.b4u-rcard-results[b-e394jg0wiy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--fed-ink);
    border: 1px solid color-mix(in srgb, var(--fed-ink) 45%, transparent);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}

/* Hover fills faintly rather than solid — enough to feel pressable, still not a primary CTA. */
.b4u-rcard-results:hover[b-e394jg0wiy] {
    border-color: var(--fed-ink);
    background: color-mix(in srgb, var(--fed-ink) 10%, transparent);
    color: var(--fed-ink);
    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(--fed-ink); }
.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(--fed-primary, 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/ResultsListing.razor.rz.scp.css */
/* Listing layout — moved here from Results.razor.css when this component was extracted, so the
   styles travel with the markup (used by both /results and the federation Results tab). The hero
   + search styling stays on the host page (Results.razor); Blazor CSS isolation is per-component,
   so a rule left behind would no longer match this markup. */

/* Section spacing for the two <section class="b4u-section"> wrappers that moved here. */
.b4u-section[b-xs48f09mwb] { padding-top: 16px; padding-bottom: 56px; }

/* Results bar + list */
.b4u-res-bar[b-xs48f09mwb] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.b4u-res-count[b-xs48f09mwb] { 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-xs48f09mwb] { display: flex; align-items: stretch; border: 1px solid var(--b4u-border); border-radius: 10px; overflow: hidden; }
.b4u-res-sort[b-xs48f09mwb] { 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-xs48f09mwb] { 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-xs48f09mwb] { color: var(--b4u-text); background: var(--b4u-bg-card-hover); }
.b4u-res-actions[b-xs48f09mwb] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b4u-res-prefs[b-xs48f09mwb] { 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-xs48f09mwb] { display: none; }
}
.b4u-res-share[b-xs48f09mwb] { 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-xs48f09mwb] { background: var(--b4u-bg-surface); color: var(--b4u-text); }
.b4u-res-share.is-copied[b-xs48f09mwb] { background: var(--b4u-primary); color: #fff; border-color: var(--b4u-primary); }
.b4u-res-list[b-xs48f09mwb] { 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-xs48f09mwb] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.b4u-res-pagebar[b-xs48f09mwb] { 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-xs48f09mwb]  .b4u-pagination { margin-top: 0; }
/* /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(--fed-primary, var(--b4u-primary)); color: #fff; }
/* /Components/Results/ResultsViewToggle.razor.rz.scp.css */
/* --fed-primary lets a federation page tint this control (FederationDetail sets it on a
   wrapper around the whole page); the fallback is what /results and every other host keeps. */
.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(--fed-primary, 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;
}
.b4u-field-hint[b-nsh2b3lp5s] {
    margin-top: 6px;
    color: var(--b4u-text-muted);
    font-size: 12px;
    line-height: 1.4;
}
/* /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/PushEnableBanner.razor.rz.scp.css */
/* In-flow banner: the same card treatment as the floating PushAskCard, laid out as one row with the
   button at the end, so it sits at the top of a list without floating over it. */
.b4u-pushbar[b-614bguoi0a] {
    display: flex; align-items: center; gap: 12px;
    background: var(--b4u-bg-card);
    border: 1px solid var(--b4u-border);
    border-left: 4px solid var(--b4u-primary);
    border-radius: 14px; padding: 12px 16px;
    margin-bottom: 16px;
}
.b4u-pushbar-icon[b-614bguoi0a] {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--b4u-primary) 15%, transparent);
    color: var(--b4u-primary);
}
.b4u-pushbar-body[b-614bguoi0a] { flex: 1; min-width: 0; }
.b4u-pushbar-title[b-614bguoi0a] { font-weight: 600; font-size: 14px; color: var(--b4u-text); margin-bottom: 2px; }
.b4u-pushbar-text[b-614bguoi0a] { font-size: 13px; font-weight: 500; color: var(--b4u-text-secondary); line-height: 1.45; margin: 0; }
.b4u-pushbar-error[b-614bguoi0a] { font-size: 13px; font-weight: 500; color: #EF4444; line-height: 1.4; margin: 6px 0 0; }
.b4u-pushbar-btn[b-614bguoi0a] { flex-shrink: 0; }

@media (max-width: 520px) {
    .b4u-pushbar[b-614bguoi0a] { flex-wrap: wrap; }
    .b4u-pushbar-btn[b-614bguoi0a] { margin-left: 44px; }
}
/* /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] {
    /* Pushed to the right of the row when it fits; when the row wraps it drops onto
       its own line and must be able to shrink and wrap, hence min-width/overflow-wrap. */
    margin-left: auto; display: inline-flex; align-items: flex-start; gap: 5px;
    min-width: 0; overflow-wrap: anywhere;
    font-size: 12px; font-weight: 600; color: var(--b4u-text-muted);
}
.b4u-schedrow-note[b-zqme8h5g7y]  svg { color: var(--b4u-accent); flex-shrink: 0; margin-top: 3px; }
/* /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); }

/* Account members: the row is tinted when the typed license fails the federation's format. */
.b4u-epr--invalid[b-mpru4v0w3r] {
    background: color-mix(in srgb, var(--b4u-danger, #d33) 6%, transparent);
    border-bottom-color: color-mix(in srgb, var(--b4u-danger, #d33) 45%, var(--b4u-border));
}

/* 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--invalid[b-mpru4v0w3r] {
        border-color: color-mix(in srgb, var(--b4u-danger, #d33) 45%, 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.is-invalid[b-jnxa62jei4] { border-color: var(--b4u-danger, #d33); }
.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-input.is-invalid[b-r9adwqc3pl] { border-color: var(--b4u-danger, #d33); }
.b4u-pf-select[b-r9adwqc3pl] { cursor: pointer; appearance: auto; }
.b4u-pf-date[b-r9adwqc3pl] { font-family: inherit; }

.b4u-pf-lic-error[b-r9adwqc3pl] {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--b4u-danger, #d33);
}

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