/* /Components/Dashboard/AllDeckStatsWidget.razor.rz.scp.css */
.decks[b-oz56ibz8l5] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.decks td[b-oz56ibz8l5] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.decks tbody tr:last-child td[b-oz56ibz8l5] {
    border-bottom: none;
}

.decks tbody tr[b-oz56ibz8l5] {
    transition: background-color 0.15s ease;
}

.decks tbody tr:hover[b-oz56ibz8l5] {
    background-color: var(--table-hover-bg);
}

.decks__name[b-oz56ibz8l5] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.decks__legend[b-oz56ibz8l5] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.decks__winrate[b-oz56ibz8l5] {
    width: 30%;
    min-width: 180px;
}

.decks__num[b-oz56ibz8l5] {
    text-align: right;
    white-space: nowrap;
}

.decks__pct[b-oz56ibz8l5] {
    display: block;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.decks__sample[b-oz56ibz8l5] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.decks__empty[b-oz56ibz8l5] {
    padding: 20px;
}
/* /Components/Dashboard/BestWorstDecksWidget.razor.rz.scp.css */
.bwd[b-ethpm51az6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 640.98px) {
    .bwd[b-ethpm51az6] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Dashboard/BestWorstMatchupsWidget.razor.rz.scp.css */
.bwm[b-lbfzvrvjuc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 640.98px) {
    .bwm[b-lbfzvrvjuc] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Dashboard/DashboardConfigModal.razor.rz.scp.css */
/* Mobile-friendly layout for dashboard config modal */

/* On mobile, action buttons row takes full width */
@media (max-width: 575.98px) {
    .w-100.w-sm-auto[b-g4l1y4jago] {
        width: 100% !important;
    }
}

/* On larger screens, action buttons row is auto width */
@media (min-width: 576px) {
    .w-sm-auto[b-g4l1y4jago] {
        width: auto !important;
    }
}

/* La marge mobile de la boîte et le défilement du corps étaient posés ici à la main
   (`::deep .modal-dialog` et `::deep .modal-body { max-height: 70vh }`). ModalShell les
   porte désormais : sa marge de fond descend à 12px sous 576px, et ScrollBody plafonne la
   boîte à la hauteur réelle du viewport plutôt qu'à 70 % arbitraires. */

/* Smaller buttons on mobile for better fit */
@media (max-width: 575.98px) {
    .list-group-item .btn-group .btn[b-g4l1y4jago] {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

    .list-group-item .btn-group-sm .btn[b-g4l1y4jago] {
        padding: 0.2rem 0.35rem;
    }
}
/* /Components/Dashboard/DeckCountWidget.razor.rz.scp.css */
.deck-counts[b-4khutcq9wq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 640.98px) {
    .deck-counts[b-4khutcq9wq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.deck-counts__item[b-4khutcq9wq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color-light);
    border-radius: 10px;
    background: var(--bg-hover);
    transition: border-color 0.2s ease;
}

.deck-counts__item:hover[b-4khutcq9wq] {
    border-color: var(--accent-primary);
}

.deck-counts__legend[b-4khutcq9wq] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-counts__more[b-4khutcq9wq] {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.decks-link[b-4khutcq9wq] {
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
}
/* /Components/Dashboard/DeckMatchupsWidget.razor.rz.scp.css */
/* Constrain the deck selector so it shrinks with the card instead of overflowing the
   header. This must live here, not in WidgetCard.razor.css: the <select> is written
   inside this component's <Actions> slot, so it carries DeckMatchupsWidget's scope
   attribute, not WidgetCard's (see the comment in WidgetCard.razor.css). The card can be
   narrowed well below the old 640px viewport breakpoint via the dashboard's column-width
   configuration on any screen size, so the constraint needs to be unconditional rather
   than gated on viewport width. Without min-width: 0, flexbox's default min-width: auto
   on the select would still pin it to its intrinsic (option-driven) width. */
.widget-card__actions select[b-l341gy1jrc] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matchups[b-l341gy1jrc] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.matchups__th[b-l341gy1jrc] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.matchups__th--right[b-l341gy1jrc] {
    text-align: right;
}

.matchups td[b-l341gy1jrc] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.matchups tbody tr:last-child td[b-l341gy1jrc] {
    border-bottom: none;
}

.matchups tbody tr[b-l341gy1jrc] {
    transition: background-color 0.15s ease;
}

.matchups tbody tr:hover[b-l341gy1jrc] {
    background-color: var(--table-hover-bg);
}

.matchups__name[b-l341gy1jrc] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.matchups__winrate[b-l341gy1jrc] {
    width: 45%;
    min-width: 180px;
}

.matchups__value[b-l341gy1jrc] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.matchups__ratio[b-l341gy1jrc] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.matchups__num[b-l341gy1jrc] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.matchups__empty[b-l341gy1jrc] {
    padding: 20px;
    text-align: center;
}
/* /Components/Dashboard/LegendDistributionWidget.razor.rz.scp.css */
.dist[b-brocxni6au] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dist__row[b-brocxni6au] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2fr auto auto;
    align-items: center;
    gap: 12px;
}

.dist__name[b-brocxni6au] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dist__row--others .dist__name[b-brocxni6au] {
    color: var(--text-muted);
}

.dist__track[b-brocxni6au] {
    height: 10px;
    border-radius: 999px;
    background: var(--bar-track);
    overflow: hidden;
}

.dist__fill[b-brocxni6au] {
    height: 100%;
    background: var(--accent-primary);
    min-width: 2px;
}

.dist__fill--others[b-brocxni6au] {
    background: var(--text-muted);
}

.dist__value[b-brocxni6au] {
    min-width: 2.5ch;
    text-align: right;
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dist__pct[b-brocxni6au] {
    min-width: 4ch;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640.98px) {
    .dist__row[b-brocxni6au] {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .dist__track[b-brocxni6au] {
        grid-column: 1 / -1;
        order: 1;
    }
}
/* /Components/Dashboard/OpponentWinrateWidget.razor.rz.scp.css */
.opponents[b-40org60230] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.opponents td[b-40org60230] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.opponents tbody tr:last-child td[b-40org60230] {
    border-bottom: none;
}

.opponents tbody tr[b-40org60230] {
    transition: background-color 0.15s ease;
}

.opponents tbody tr:hover[b-40org60230] {
    background-color: var(--table-hover-bg);
}

.opponents__name[b-40org60230] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.opponents__winrate[b-40org60230] {
    width: 45%;
    min-width: 180px;
}

.opponents__num[b-40org60230] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.opponents__loading[b-40org60230],
.opponents__empty[b-40org60230] {
    padding: 20px;
    text-align: center;
}
/* /Components/Dashboard/OverviewStatsWidget.razor.rz.scp.css */
.overview[b-l6wdwuec37] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.overview__legend[b-l6wdwuec37] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.overview__key[b-l6wdwuec37] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.overview__key[b-l6wdwuec37]::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: none;
}

.overview__key--win[b-l6wdwuec37]::before { background: var(--win); }
.overview__key--loss[b-l6wdwuec37]::before { background: var(--loss); }
.overview__key--draw[b-l6wdwuec37]::before { background: var(--draw); }
/* /Components/Dashboard/PlayerLegendStatsWidget.razor.rz.scp.css */
.legends[b-y4eufkxiaf] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.legends td[b-y4eufkxiaf] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.legends tbody tr:last-child td[b-y4eufkxiaf] {
    border-bottom: none;
}

.legends tbody tr[b-y4eufkxiaf] {
    transition: background-color 0.15s ease;
}

.legends tbody tr:hover[b-y4eufkxiaf] {
    background-color: var(--table-hover-bg);
}

.legends__name[b-y4eufkxiaf] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.legends__winrate[b-y4eufkxiaf] {
    width: 40%;
    min-width: 180px;
}

.legends__value[b-y4eufkxiaf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.legends__ratio[b-y4eufkxiaf] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.legends__num[b-y4eufkxiaf] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.legends__empty[b-y4eufkxiaf] {
    padding: 20px;
}
/* /Components/Dashboard/RecentGamesWidget.razor.rz.scp.css */
.recent[b-kwswmbqijc] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.recent__th[b-kwswmbqijc] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.recent__th--right[b-kwswmbqijc] {
    text-align: right;
}

.recent td[b-kwswmbqijc] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.recent tbody tr:last-child td[b-kwswmbqijc] {
    border-bottom: none;
}

.recent tbody tr[b-kwswmbqijc] {
    transition: background-color 0.15s ease;
}

.recent tbody tr:hover[b-kwswmbqijc] {
    background-color: var(--table-hover-bg);
}

.recent__date[b-kwswmbqijc] {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}

.recent__opponent-inner[b-kwswmbqijc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recent__name[b-kwswmbqijc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent__result[b-kwswmbqijc] {
    text-align: right;
    white-space: nowrap;
}

.recent__empty[b-kwswmbqijc] {
    padding: 20px;
}

.recent__link[b-kwswmbqijc] {
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
}
/* /Components/Dashboard/SearchOpponentWidget.razor.rz.scp.css */
.search[b-06t7v8n1m8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search__result[b-06t7v8n1m8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border-color-light);
    border-radius: 10px;
    background: var(--bg-hover);
}

.search__head[b-06t7v8n1m8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.search__against[b-06t7v8n1m8] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.search__rate[b-06t7v8n1m8] {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.search__counts[b-06t7v8n1m8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* /Components/Dashboard/TeamBestWorstDecksWidget.razor.rz.scp.css */
.bwdecks[b-22qjmcmo7x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bwdecks__group[b-22qjmcmo7x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bwdecks__title[b-22qjmcmo7x] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.bwdecks__rule[b-22qjmcmo7x] {
    height: 1px;
    background-color: var(--border-color-light);
}
/* /Components/Dashboard/TeamMatchupsWidget.razor.rz.scp.css */
.matchups[b-o036fsxsc6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.matchups td[b-o036fsxsc6] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.matchups tbody tr:last-child td[b-o036fsxsc6] {
    border-bottom: none;
}

.matchups tbody tr[b-o036fsxsc6] {
    transition: background-color 0.15s ease;
}

.matchups tbody tr:hover[b-o036fsxsc6] {
    background-color: var(--table-hover-bg);
}

.matchups__legend[b-o036fsxsc6] {
    white-space: nowrap;
}

.matchups__num[b-o036fsxsc6] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.matchups__num--win[b-o036fsxsc6] {
    color: var(--win);
}

.matchups__num--loss[b-o036fsxsc6] {
    color: var(--loss);
}

.matchups__value[b-o036fsxsc6] {
    font-weight: 600;
}

.matchups__filters[b-o036fsxsc6] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color-light);
}

.matchups__field[b-o036fsxsc6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    flex: 1 1 180px;
}

.matchups__label[b-o036fsxsc6] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.matchups__select[b-o036fsxsc6] {
    padding: 7px 10px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
}

.matchups__select:focus[b-o036fsxsc6] {
    outline: 2px solid var(--accent-text);
    outline-offset: 1px;
}

.matchups__select--set[b-o036fsxsc6] {
    border-color: var(--accent-text);
}

.matchups__reset[b-o036fsxsc6] {
    padding: 4px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent-text);
    background: none;
    border: 1px solid var(--border-color-light);
    border-radius: 999px;
    cursor: pointer;
}

.matchups__reset:hover[b-o036fsxsc6] {
    background-color: var(--table-hover-bg);
}

.matchups__more[b-o036fsxsc6] {
    display: flex;
    justify-content: center;
    padding: 14px 16px;
    border-top: 1px solid var(--border-color-light);
}

.matchups__more-btn[b-o036fsxsc6] {
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent-text);
    background: none;
    border: 1px solid var(--border-color-light);
    border-radius: 999px;
    cursor: pointer;
}

.matchups__more-btn:hover[b-o036fsxsc6] {
    background-color: var(--table-hover-bg);
}

.matchups__empty[b-o036fsxsc6] {
    padding: 20px;
}
/* /Components/Dashboard/TeamMemberStatsWidget.razor.rz.scp.css */
.members[b-8p2h0l2awt] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.members__th[b-8p2h0l2awt] {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color-light);
    white-space: nowrap;
}

.members__th--right[b-8p2h0l2awt] {
    text-align: right;
}

.members td[b-8p2h0l2awt] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.members tbody tr:last-child td[b-8p2h0l2awt] {
    border-bottom: none;
}

.members tbody tr[b-8p2h0l2awt] {
    transition: background-color 0.15s ease;
}

.members tbody tr:hover[b-8p2h0l2awt] {
    background-color: var(--table-hover-bg);
}

.members__name[b-8p2h0l2awt] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.members__legend[b-8p2h0l2awt] {
    white-space: nowrap;
}

.members__num[b-8p2h0l2awt] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.members__winrate[b-8p2h0l2awt] {
    width: 38%;
    min-width: 170px;
}

.members__value[b-8p2h0l2awt] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.members__ratio[b-8p2h0l2awt] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.members__empty[b-8p2h0l2awt] {
    padding: 20px;
}
/* /Components/Dashboard/TeamRecentGamesWidget.razor.rz.scp.css */
.teamgames[b-oc8cii4n19] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.teamgames__th[b-oc8cii4n19] {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color-light);
    white-space: nowrap;
}

.teamgames__th--right[b-oc8cii4n19] {
    text-align: right;
}

.teamgames td[b-oc8cii4n19] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.teamgames tbody tr:last-child td[b-oc8cii4n19] {
    border-bottom: none;
}

.teamgames tbody tr[b-oc8cii4n19] {
    transition: background-color 0.15s ease;
}

.teamgames tbody tr:hover[b-oc8cii4n19] {
    background-color: var(--table-hover-bg);
}

.teamgames__date[b-oc8cii4n19] {
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.teamgames__player[b-oc8cii4n19] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.teamgames__deck[b-oc8cii4n19] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.teamgames__legend[b-oc8cii4n19] {
    white-space: nowrap;
}

.teamgames__result[b-oc8cii4n19] {
    text-align: right;
    white-space: nowrap;
}

.teamgames__empty[b-oc8cii4n19] {
    padding: 20px;
}
/* /Components/Dashboard/TeamTossImpactWidget.razor.rz.scp.css */
.tossimpact[b-yaqkbd6ano] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.tossimpact td[b-yaqkbd6ano] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.tossimpact tbody tr:last-child td[b-yaqkbd6ano] {
    border-bottom: none;
}

.tossimpact tbody tr[b-yaqkbd6ano] {
    transition: background-color 0.15s ease;
}

.tossimpact tbody tr:hover[b-yaqkbd6ano] {
    background-color: var(--table-hover-bg);
}

.tossimpact__legend[b-yaqkbd6ano] {
    white-space: nowrap;
}

.tossimpact__num[b-yaqkbd6ano] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
}

.tossimpact__sample[b-yaqkbd6ano] {
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.tossimpact__delta[b-yaqkbd6ano] {
    text-align: right;
    white-space: nowrap;
}

.tossimpact__empty[b-yaqkbd6ano] {
    padding: 20px;
}
/* /Components/Dashboard/TossStatsWidget.razor.rz.scp.css */
.toss[b-5k276vupm2] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.toss__group[b-5k276vupm2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toss__head[b-5k276vupm2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.toss__title[b-5k276vupm2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.toss__rule[b-5k276vupm2] {
    height: 1px;
    background: var(--border-color-light);
}
/* /Components/Dashboard/WinrateEvolutionWidget.razor.rz.scp.css */
.evolution__chart[b-8geqipk63m] {
    position: relative;
    height: 250px;
}

.evolution__axis[b-8geqipk63m] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.evolution[b-8geqipk63m] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.evolution__th[b-8geqipk63m] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}

.evolution__th--right[b-8geqipk63m] {
    text-align: right;
}

.evolution td[b-8geqipk63m] {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.evolution tbody tr:last-child td[b-8geqipk63m] {
    border-bottom: none;
}

.evolution__label[b-8geqipk63m] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    padding-right: 16px;
}

.evolution__winrate[b-8geqipk63m] {
    width: 50%;
    min-width: 180px;
}

.evolution__value[b-8geqipk63m] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.evolution__ratio[b-8geqipk63m] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.evolution__num[b-8geqipk63m] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9375rem;
    color: var(--text-primary);
    padding-left: 16px;
}
/* /Components/Decks/DeckFilters.razor.rz.scp.css */
.df[b-gk8oruuw9w] {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.df__bar[b-gk8oruuw9w] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
}

.df__count[b-gk8oruuw9w] { font-size: .8125rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.df__sep[b-gk8oruuw9w] { width: 1px; height: 16px; background: var(--border-color); }

.df__pill[b-gk8oruuw9w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--accent-text);
}

.df__pill-x[b-gk8oruuw9w] {
    border: none; background: transparent; padding: 0;
    color: inherit; opacity: .7; cursor: pointer; font-size: .75rem; line-height: 1;
}

.df__pill-x:hover[b-gk8oruuw9w] { opacity: 1; }

.df__clear[b-gk8oruuw9w] {
    border: none; background: transparent; padding: 0;
    font-size: .75rem; color: var(--text-muted);
    text-decoration: underline; cursor: pointer;
}

.df__spacer[b-gk8oruuw9w] { flex: 1; }

.df__toggle[b-gk8oruuw9w] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: .8125rem;
    cursor: pointer;
}

.df__toggle:hover[b-gk8oruuw9w] { border-color: var(--accent-primary); color: var(--accent-text); }

.df__panel[b-gk8oruuw9w] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 20px 18px;
    border-top: 1px solid var(--border-color-light);
}

.df__field[b-gk8oruuw9w] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.df__label[b-gk8oruuw9w] { font-size: .8125rem; color: var(--text-secondary); }

.df__input[b-gk8oruuw9w], .df__select[b-gk8oruuw9w] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: .8125rem;
    padding: 6px 10px;
    font-family: inherit;
}

.df__input:focus[b-gk8oruuw9w], .df__select:focus[b-gk8oruuw9w] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--bg-hover);
}

.df__input--set[b-gk8oruuw9w], .df__select--set[b-gk8oruuw9w] { border-color: var(--accent-primary); }

@media (max-width: 767.98px) {
    .df__panel[b-gk8oruuw9w] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .df__spacer[b-gk8oruuw9w] { display: none; }
    .df__toggle[b-gk8oruuw9w] { width: 100%; justify-content: center; }
}
/* /Components/Decks/DeckForm.razor.rz.scp.css */
/* L'espacement entre champs. ::deep parce que .field est écrit dans Field.razor et porte son
   scope, pas celui de DeckForm. */
.dform[b-k9x7oyrf37]  .field + .field { margin-top: 16px; }

.dform__actions[b-k9x7oyrf37] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color-light);
}
/* /Components/Decks/DeckList.razor.rz.scp.css */
.dl[b-kgzyhzidcx] {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* Les largeurs doivent correspondre exactement à .dr__cols dans DeckRow.razor.css
   (minmax(0,1.4fr) 150px minmax(0,1.2fr) 76px 132px). L'isolation CSS de Blazor empêche
   chaque composant de styler le balisage de l'autre : cette duplication est intentionnelle.
   Les tenir synchronisées. */
.dl__head[b-kgzyhzidcx] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1.2fr) 76px 132px;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.dl__empty[b-kgzyhzidcx] { padding: 20px; }

@media (max-width: 767.98px) {
    .dl[b-kgzyhzidcx] {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .dl__head[b-kgzyhzidcx] { display: none; }
    .dl__empty[b-kgzyhzidcx] { padding: 20px 0; }
}
/* /Components/Decks/DeckRow.razor.rz.scp.css */
.dr[b-ac7s8bmplh] {
    border-bottom: 1px solid var(--border-color-light);
}

.dr:last-child[b-ac7s8bmplh] { border-bottom: none; }

.dr:hover[b-ac7s8bmplh] { background: var(--table-hover-bg); }

/* Un deck désactivé n'est PAS teinté : sa ligne reste pleinement lisible, seule sa
   pastille de statut le signale. Une liste où l'on grise des lignes finit par se lire
   comme une liste d'erreurs. (Délibérément aucune classe de type "inactive" ici.) */
.dr__cols[b-ac7s8bmplh] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 150px minmax(0, 1.2fr) 76px 132px;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
}

.dr__cell[b-ac7s8bmplh] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.dr__name[b-ac7s8bmplh] {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr__set[b-ac7s8bmplh], .dr__date[b-ac7s8bmplh] { color: var(--text-primary); font-size: .875rem; }

/* Le set courant reste au ton normal ; ce sont les sets antérieurs qu'on atténue.
   L'ancien balisage faisait l'inverse et accentuait le set courant en bg-primary — mais
   la plupart des decks en sont, et accentuer la majorité ne signale rien. */
.dr__set--past[b-ac7s8bmplh] { color: var(--text-secondary); }

.dr__sub[b-ac7s8bmplh] {
    font-size: .8125rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr__perf-head[b-ac7s8bmplh] { display: flex; align-items: baseline; gap: 8px; }

.dr__pct[b-ac7s8bmplh] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.dr__none[b-ac7s8bmplh] { font-size: .8125rem; color: var(--text-muted); font-style: italic; }

.dr__actions[b-ac7s8bmplh] { flex-direction: row; align-items: center; gap: 2px; justify-content: flex-end; }

.dr__act[b-ac7s8bmplh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.dr__act:hover[b-ac7s8bmplh] { background: var(--bg-hover); color: var(--accent-text); }

.dr__act--danger:hover[b-ac7s8bmplh] { color: var(--loss); }

@media (max-width: 767.98px) {
    .dr__cols[b-ac7s8bmplh] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 14px 0;
    }

    .dr__deck[b-ac7s8bmplh] { grid-column: 1; }
    .dr__context[b-ac7s8bmplh] { grid-column: 2; align-items: flex-end; }
    .dr__perf[b-ac7s8bmplh] { grid-column: 1 / -1; }
    .dr__modified[b-ac7s8bmplh] { grid-column: 1; }
    .dr__actions[b-ac7s8bmplh] { grid-column: 2; }

    .dr__act[b-ac7s8bmplh] { width: 32px; height: 32px; }
}
/* /Components/Games/GameFilters.razor.rz.scp.css */
.gf[b-opktyynait] {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.gf__bar[b-opktyynait] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
}

.gf__count[b-opktyynait] { font-size: .8125rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.gf__sep[b-opktyynait] { width: 1px; height: 16px; background: var(--border-color); }

.gf__pill[b-opktyynait] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--accent-text);
}

.gf__pill-x[b-opktyynait] {
    border: none; background: transparent; padding: 0;
    color: inherit; opacity: .7; cursor: pointer; font-size: .75rem; line-height: 1;
}

.gf__pill-x:hover[b-opktyynait] { opacity: 1; }

.gf__clear[b-opktyynait] {
    border: none; background: transparent; padding: 0;
    font-size: .75rem; color: var(--text-muted);
    text-decoration: underline; cursor: pointer;
}

.gf__spacer[b-opktyynait] { flex: 1; }

.gf__toggle[b-opktyynait] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: .8125rem;
    cursor: pointer;
}

.gf__toggle:hover[b-opktyynait] { border-color: var(--accent-primary); color: var(--accent-text); }

.gf__panel[b-opktyynait] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 0 20px 18px;
    border-top: 1px solid var(--border-color-light);
    padding-top: 16px;
}

.gf__field[b-opktyynait] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.gf__label[b-opktyynait] { font-size: .8125rem; color: var(--text-secondary); }

.gf__select[b-opktyynait] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: .8125rem;
    padding: 6px 10px;
}

.gf__select--set[b-opktyynait] { border-color: var(--accent-primary); }

@media (max-width: 767.98px) {
    .gf__panel[b-opktyynait] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gf__spacer[b-opktyynait] { display: none; }
    .gf__toggle[b-opktyynait] { width: 100%; justify-content: center; }
}
/* /Components/Games/GameForm.razor.rz.scp.css */
.gform__warn[b-9lfbvjtjhy] {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bar-track);
    border: 1px solid var(--draw);
    color: var(--text-primary);
    font-size: .875rem;
}

.gform__group + .gform__group[b-9lfbvjtjhy] { margin-top: 22px; }

.gform__group-title[b-9lfbvjtjhy] {
    margin: 0 0 10px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.gform__grid[b-9lfbvjtjhy] {
    display: grid;
    gap: 14px;
}

.gform__grid--3[b-9lfbvjtjhy] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gform__grid--4[b-9lfbvjtjhy] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* La cellule qui porte les deux cases : centrée verticalement dans sa ligne de grille, les
   deux cases espacées. C'était .gform__field--checks ; le champ lui-même est Field. */
.gform__checks[b-9lfbvjtjhy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.gform__actions[b-9lfbvjtjhy] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color-light);
}

@media (max-width: 767.98px) {
    .gform__grid--3[b-9lfbvjtjhy],
    .gform__grid--4[b-9lfbvjtjhy] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Games/GameList.razor.rz.scp.css */
.gl[b-kon7hnoiuy] {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* Column widths must match .gr__cols in GameRow.razor.css exactly (74px minmax(0,1fr)
   minmax(0,1fr) 190px 86px 130px) — Blazor's scoped CSS keeps each component from
   styling the other's markup, so this duplication is intentional. Keep both in sync. */
.gl__head[b-kon7hnoiuy] {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr) 190px 86px 130px;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.gl__empty[b-kon7hnoiuy] { padding: 20px; }

@media (max-width: 767.98px) {
    .gl[b-kon7hnoiuy] {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .gl__head[b-kon7hnoiuy] { display: none; }
    .gl__empty[b-kon7hnoiuy] { padding: 20px 0; }
}
/* /Components/Games/GameRow.razor.rz.scp.css */
.gr[b-gmcwocpape] {
    border-bottom: 1px solid var(--border-color-light);
    transition: background-color .15s ease;
}

.gr:last-child[b-gmcwocpape] { border-bottom: none; }
.gr:hover[b-gmcwocpape] { background: var(--table-hover-bg); }

/* Column widths must match .gl__head in GameList.razor.css exactly (74px minmax(0,1fr)
   minmax(0,1fr) 190px 86px 130px) — Blazor's scoped CSS keeps each component from
   styling the other's markup, so this duplication is intentional. Keep both in sync. */
.gr__cols[b-gmcwocpape] {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr) 190px 86px 130px;
    align-items: center;
    gap: 16px;
    padding: 11px 16px 4px;
}

.gr--plain .gr__cols[b-gmcwocpape] { padding-bottom: 11px; }

.gr__p1[b-gmcwocpape] {
    font-size: .9375rem;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gr__p2[b-gmcwocpape] {
    font-size: .75rem;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gr__num[b-gmcwocpape] { font-variant-numeric: tabular-nums; }

.gr__actions[b-gmcwocpape] { display: flex; gap: 5px; justify-content: flex-end; }

.gr__act[b-gmcwocpape] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.gr__act:hover[b-gmcwocpape] { border-color: var(--accent-primary); color: var(--accent-secondary); }
.gr__act:disabled[b-gmcwocpape] { opacity: .5; cursor: default; }
.gr__act--on[b-gmcwocpape] { border-color: var(--accent-primary); color: var(--accent-secondary); }
.gr__act--del[b-gmcwocpape] { border-color: rgba(248, 113, 113, .25); color: var(--loss); }
.gr__act--del:hover[b-gmcwocpape] { border-color: var(--loss); color: var(--loss); }

.gr__peek[b-gmcwocpape] {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 16px;
    padding: 0 16px 10px;
    align-items: baseline;
    cursor: pointer;
}

.gr__peek-body[b-gmcwocpape] { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.gr__peek-txt[b-gmcwocpape] {
    font-size: .8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gr__peek-more[b-gmcwocpape] { flex: none; font-size: .75rem; color: var(--accent-text); }

.gr__who[b-gmcwocpape] {
    flex: none;
    font-size: .625rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 1px 6px; border-radius: 5px;
}

.gr__who--me[b-gmcwocpape] { color: var(--win); background: var(--win-soft); }
.gr__who--mate[b-gmcwocpape] { color: var(--accent-text); background: var(--bg-hover); }

.gr__full[b-gmcwocpape] { padding: 4px 16px 16px 106px; }

.gr__note[b-gmcwocpape] {
    border-left: 3px solid;
    padding: 4px 0 4px 14px;
    margin-bottom: 18px;
    max-width: 68ch;
}

.gr__note:last-child[b-gmcwocpape] { margin-bottom: 0; }
.gr__note--me[b-gmcwocpape] { border-color: var(--win); }
.gr__note--mate[b-gmcwocpape] { border-color: var(--accent-secondary); }

.gr__note-who[b-gmcwocpape] {
    display: block;
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; margin-bottom: 6px;
}

.gr__note--me .gr__note-who[b-gmcwocpape] { color: var(--win); }
.gr__note--mate .gr__note-who[b-gmcwocpape] { color: var(--accent-text); }

.gr__note-txt[b-gmcwocpape] {
    font-size: .9375rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    line-height: 1.65;
    text-wrap: pretty;
}

@media (max-width: 767.98px) {
    .gr[b-gmcwocpape] {
        border: 1px solid var(--border-color);
        border-radius: 14px;
        margin-bottom: 10px;
        background: var(--glass-bg);
    }

    .gr__cols[b-gmcwocpape] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
        padding: 12px 14px 8px;
    }

    .gr__cols > :nth-child(1)[b-gmcwocpape] { order: 4; }
    .gr__cols > :nth-child(2)[b-gmcwocpape] { order: 3; }
    .gr__cols > :nth-child(3)[b-gmcwocpape] { order: 1; }
    .gr__cols > :nth-child(4)[b-gmcwocpape] { order: 5; }
    .gr__cols > :nth-child(5)[b-gmcwocpape] { order: 2; justify-self: end; }
    .gr__cols > :nth-child(6)[b-gmcwocpape] { order: 6; grid-column: 1 / -1; }

    .gr__peek[b-gmcwocpape] { grid-template-columns: minmax(0, 1fr); padding: 0 14px 12px; }
    .gr__peek-body[b-gmcwocpape] { flex-wrap: wrap; }

    .gr__peek-txt[b-gmcwocpape] {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .gr__act[b-gmcwocpape] { width: 32px; height: 32px; }
    .gr__full[b-gmcwocpape] { padding: 0 14px 14px; }
}
/* /Components/Games/OpponentAutocomplete.razor.rz.scp.css */
.oa[b-qdnvg4l9zl] { position: relative; }

.oa__list[b-qdnvg4l9zl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--shadow-heavy);
}

.oa__head[b-qdnvg4l9zl] {
    position: sticky;
    top: 0;
    padding: .625rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color-light);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.oa__item[b-qdnvg4l9zl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: .25rem .5rem;
    padding: .625rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}

.oa__item:hover[b-qdnvg4l9zl] { background: var(--bg-hover); }

.oa__name[b-qdnvg4l9zl] {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Layout/DemoLayout.razor.rz.scp.css */
/* La coque occupe exactement la fenêtre de l'iframe et masque le débordement : la coupe
   est décidée par la hauteur du cadre dans /welcome, jamais par la longueur du contenu. */
.demo-shell[b-1j40wnx4lj] {
    height: 100vh;
    overflow: hidden;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
}

.demo-shell__bar[b-1j40wnx4lj] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--top-row-bg);
    border-bottom: 1px solid var(--top-row-border);
}

.demo-shell__brand[b-1j40wnx4lj] {
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.demo-shell__burger[b-1j40wnx4lj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.demo-shell__burger i[b-1j40wnx4lj] {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-secondary);
}

.demo-shell__body[b-1j40wnx4lj] {
    flex: 1;
    overflow: hidden;
    padding: 1.25rem;
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
.welcome-layout[b-u0nx90f9pf] {
    --wl-topbar-height: 56px;
    min-height: 100vh;
    background: var(--bg-body);
}

/* Opaque, jamais translucide : les captures qui défilent dessous la rendraient illisible. */
.wl-topbar[b-u0nx90f9pf] {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--wl-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    background: var(--bg-card-solid);
    border-bottom: 1px solid var(--border-color);
}

/* La marque cede la place aux boutons quand la barre est trop etroite : c'est elle qui se
   tronque, jamais l'appel a l'action. Sans min-width: 0, un element flex refuse de passer
   sous la largeur de son contenu et pousse ses voisins hors de l'ecran — a 320 px, le bouton
   d'inscription debordait de 5 px et la page defilait lateralement. */
.wl-topbar__brand[b-u0nx90f9pf] {
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sous 576 px la barre affiche la forme courte du nom : "Riftbound Training Data" ne tient
   pas a cote des deux boutons, et le tronquer donnait "Riftbound Tr...", meconnaissable.
   L'aria-label du lien porte toujours le nom complet. L'ellipsis ci-dessus reste le filet
   de securite pour les largeurs ou meme la forme courte serait a l'etroit. */
.wl-topbar__brand-short[b-u0nx90f9pf] {
    display: none;
}

.wl-topbar__actions[b-u0nx90f9pf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
}

.wl-topbar__lang[b-u0nx90f9pf] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 99px;
}

.wl-topbar__lang:hover[b-u0nx90f9pf] {
    color: var(--accent-text);
    border-color: var(--accent-primary);
}

.topbar-signin[b-u0nx90f9pf],
.topbar-signup[b-u0nx90f9pf] {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.45rem 1rem;
    border-radius: 99px;
    white-space: nowrap;
}

.topbar-signin[b-u0nx90f9pf] {
    color: var(--accent-text);
    border: 1.5px solid var(--accent-primary);
}

.topbar-signup[b-u0nx90f9pf] {
    color: var(--text-on-accent);
    background: var(--accent-gradient);
}

/* Sur téléphone la barre reste en haut : une barre du bas mangerait en permanence de la
   hauteur sur des captures déjà hautes et étroites. On resserre au lieu de déplacer. */
@media (max-width: 576px) {
    .wl-topbar[b-u0nx90f9pf] {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    .wl-topbar__lang[b-u0nx90f9pf] {
        display: none;
    }

    .wl-topbar__brand-full[b-u0nx90f9pf] {
        display: none;
    }

    .wl-topbar__brand-short[b-u0nx90f9pf] {
        display: inline;
    }

    .topbar-signin[b-u0nx90f9pf],
    .topbar-signup[b-u0nx90f9pf] {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ig1jz0364g] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ig1jz0364g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content[b-ig1jz0364g] {
    flex: 1;
}

.sidebar[b-ig1jz0364g] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

/* ==========================================
   MOBILE MENU BUTTON & BRAND
   ========================================== */
.mobile-menu-btn[b-ig1jz0364g] {
    display: none;
}

.mobile-brand[b-ig1jz0364g] {
    display: none;
}

/* ==========================================
   SIDEBAR OVERLAY
   ========================================== */
.sidebar-overlay[b-ig1jz0364g] {
    display: none;
}

.auth-links[b-ig1jz0364g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.auth-links .btn[b-ig1jz0364g] {
    font-size: 0.85rem;
    white-space: nowrap;
}

.top-row[b-ig1jz0364g] {
    background: var(--top-row-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--top-row-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

    .top-row[b-ig1jz0364g]  a, .top-row[b-ig1jz0364g]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ig1jz0364g]  a:hover, .top-row[b-ig1jz0364g]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ig1jz0364g]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    /* Ensure main content comes first visually */
    main[b-ig1jz0364g] {
        order: -1;
    }

    /* Space for bottom navigation bar (authenticated users only) */
    .authenticated main[b-ig1jz0364g] {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) * 0.5);
    }

    /* Mobile drawer sidebar */
    .sidebar[b-ig1jz0364g] {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        z-index: 1300;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    /* Sidebar open state */
    .sidebar:has(#navMenuToggle:checked)[b-ig1jz0364g] {
        transform: translateX(0);
    }

    /* Sidebar overlay */
    .sidebar-overlay[b-ig1jz0364g] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1299;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        cursor: pointer;
    }

    .sidebar:has(#navMenuToggle:checked) ~ .sidebar-overlay[b-ig1jz0364g] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Mobile menu button (hamburger) */
    .mobile-menu-btn[b-ig1jz0364g] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.2s ease;
        flex-shrink: 0;
    }

    .mobile-menu-btn:hover[b-ig1jz0364g] {
        background: var(--bg-hover, rgba(0, 0, 0, 0.1));
    }

    .hamburger-icon[b-ig1jz0364g] {
        display: block;
        width: 1.25rem;
        height: 2px;
        background: var(--text-primary, #212529);
        position: relative;
        border-radius: 2px;
        transition: background 0.2s ease;
    }

    .hamburger-icon[b-ig1jz0364g]::before,
    .hamburger-icon[b-ig1jz0364g]::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--text-primary, #212529);
        border-radius: 2px;
        transition: transform 0.3s ease;
    }

    .hamburger-icon[b-ig1jz0364g]::before {
        top: -6px;
    }

    .hamburger-icon[b-ig1jz0364g]::after {
        top: 6px;
    }

    /* Mobile brand (logo + name) */
    .mobile-brand[b-ig1jz0364g] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-primary, #212529);
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .mobile-brand span[b-ig1jz0364g] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-logo[b-ig1jz0364g] {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .top-row[b-ig1jz0364g] {
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1200;
        gap: 0.5rem;
    }

    .top-row[b-ig1jz0364g]  a, .top-row[b-ig1jz0364g]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ig1jz0364g] {
        flex-direction: row;
    }

    .sidebar[b-ig1jz0364g] {
        /* Collapsed width by default */
        width: 60px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        transition: width 0.2s ease;
        overflow: hidden;
    }

    /* Expanded sidebar when checkbox is checked */
    .sidebar:has(.navbar-toggler:checked)[b-ig1jz0364g] {
        width: 220px;
    }

    main[b-ig1jz0364g] {
        flex: 1;
        min-width: 0;
        min-height: 100vh;
    }

    .top-row[b-ig1jz0364g] {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .top-row[b-ig1jz0364g], article[b-ig1jz0364g] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* Desktop: show brand and auth-links for unauthenticated users */
    .page:not(.authenticated) .mobile-brand[b-ig1jz0364g] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-primary, #212529);
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
    }
}

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

    #blazor-error-ui .dismiss[b-ig1jz0364g] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.footer[b-ig1jz0364g] {
    border-top: 1px solid var(--top-row-border, #dee2e6);
    margin-top: auto;
    background: var(--top-row-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hide footer on mobile only for authenticated users (MobileBottomNav replaces it) */
@media (max-width: 640.98px) {
    .authenticated .footer[b-ig1jz0364g] {
        display: none;
    }
}

    .footer a[b-ig1jz0364g] {
        color: var(--text-secondary);
        transition: all 0.2s ease;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
    }

    .footer a:hover[b-ig1jz0364g] {
        color: var(--accent-primary);
        background: var(--bg-hover);
    }

    .footer .discord-icon[b-ig1jz0364g] {
        color: #5865F2;
        width: 1.2rem;
        height: 1.2rem;
        vertical-align: middle;
    }

    .footer a:hover .discord-icon[b-ig1jz0364g] {
        color: #7289da;
    }
/* /Components/Layout/MobileBottomNav.razor.rz.scp.css */
/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav[b-tg3ywznxqc] {
    display: none;
}

@media (max-width: 640.98px) {
    .mobile-bottom-nav[b-tg3ywznxqc] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Safe area for notched phones - reduced padding */
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.5);
        background: var(--top-row-bg, rgba(255, 255, 255, 0.85));
        border-top: 1px solid var(--top-row-border, rgba(148, 163, 184, 0.2));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 1200;
        justify-content: space-around;
        align-items: stretch;
    }

    .mobile-bottom-nav[b-tg3ywznxqc]  .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-height: 72px;
        padding: 10px 4px;
        color: var(--text-secondary, #64748b);
        text-decoration: none;
        font-size: 0.7rem;
        font-weight: 500;
        gap: 4px;
        transition: all 0.2s ease;
        border-radius: 0;
        margin: 0;
    }

    .mobile-bottom-nav[b-tg3ywznxqc]  .bottom-nav-item i {
        font-size: 1.4rem;
        line-height: 1;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .mobile-bottom-nav[b-tg3ywznxqc]  .bottom-nav-item span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center;
        line-height: 1.2;
    }

    .mobile-bottom-nav[b-tg3ywznxqc]  .bottom-nav-item:active {
        transform: scale(0.95);
    }

    /* Active state */
    .mobile-bottom-nav[b-tg3ywznxqc]  .bottom-nav-item.active {
        color: var(--accent-primary, #6366f1);
        background: var(--bg-hover, rgba(99, 102, 241, 0.08));
    }

    .mobile-bottom-nav[b-tg3ywznxqc]  .bottom-nav-item.active i {
        transform: scale(1.1);
    }
}

/* Hover effect only for devices with pointer/mouse capability.
   Separated from main mobile media query to prevent "stuck hover" on touch devices.
   Do NOT add :hover styles inside the @media (max-width: 640.98px) block above. */
@media (hover: hover) and (max-width: 640.98px) {
    .mobile-bottom-nav[b-tg3ywznxqc]  .bottom-nav-item:hover {
        color: var(--accent-primary, #6366f1);
        background: var(--bg-hover, rgba(99, 102, 241, 0.08));
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================
   NAVBAR TOGGLER (hidden checkbox)
   ========================================== */
.navbar-toggler[b-kravj58pyo] {
    appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================
   TOP ROW (header)
   ========================================== */
.top-row[b-kravj58pyo] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    overflow: hidden;
    gap: 0.5rem;
}

.top-row .navbar-brand[b-kravj58pyo] {
    font-size: 1rem;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.navbar-logo[b-kravj58pyo] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Menu toggle button (label for checkbox) */
.menu-toggle-btn[b-kravj58pyo] {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center;
    background-size: contain;
    border: none;
    border-radius: 4px;
}

.menu-toggle-btn:hover[b-kravj58pyo] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   ICONS
   ========================================== */
[b-kravj58pyo] .bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-size: cover;
}

[b-kravj58pyo] .bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-collection-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3zm2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-controller-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1v-1z'/%3E%3Cpath d='M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729c.14.09.266.19.373.297.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.423-.243.282-.494.576-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.394-.328-2.21.024-.826.158-1.73.364-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.34 2.34 0 0 1 .433-.335.504.504 0 0 1-.028-.079z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-graph-up-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-journal-text-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3Cpath d='M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-people-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-gear-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-stopwatch-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z'/%3E%3Cpath d='M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64a.715.715 0 0 1 .012-.013l.354-.354a.5.5 0 1 1 .707.707l-.353.354-.013.012A7 7 0 1 1 1 8a6.973 6.973 0 0 1 1.086-3.757l-.353-.354a.5.5 0 1 1 .707-.707l.354.354.012.012A6.972 6.972 0 0 1 6.5 2.071V1.5a.5.5 0 0 1-.5-.5zm1.5 2a6 6 0 1 0 0 12A6 6 0 0 0 8 3z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-info-circle-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-discord-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z'/%3E%3C/svg%3E");
}

[b-kravj58pyo] .bi-heart-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z'/%3E%3C/svg%3E");
}

/* ==========================================
   MOBILE-ONLY ITEMS (hidden by default)
   ========================================== */
.mobile-only[b-kravj58pyo] {
    display: none;
}

/* ==========================================
   NAV SCROLLABLE
   ========================================== */
.nav-scrollable[b-kravj58pyo] {
    display: none;
    overflow-x: hidden;
}

.navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo] {
    display: flex;
    flex-direction: column;
}

/* ==========================================
   NAV ITEMS
   ========================================== */
.nav-item[b-kravj58pyo] {
    font-size: 0.9rem;
}

.nav-item:first-of-type[b-kravj58pyo] {
    padding-top: 0.5rem;
}

.nav-item[b-kravj58pyo]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    width: 100%;
    white-space: nowrap;
}

.nav-item[b-kravj58pyo]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-kravj58pyo]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

[b-kravj58pyo] .nav-link-text {
    overflow: hidden;
}

/* ==========================================
   NAV FOOTER
   ========================================== */
.nav-scrollable[b-kravj58pyo]  .nav-footer {
    margin-top: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-scrollable[b-kravj58pyo]  .user-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.nav-scrollable[b-kravj58pyo]  .user-info {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.nav-scrollable[b-kravj58pyo]  .settings-btn {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.nav-scrollable[b-kravj58pyo]  .settings-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.nav-scrollable[b-kravj58pyo]  .settings-btn .bi {
    width: 1.25rem;
    height: 1.25rem;
}

.nav-scrollable[b-kravj58pyo]  .user-icon {
    width: 2rem;
    height: 2rem;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.nav-scrollable[b-kravj58pyo]  .user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-scrollable[b-kravj58pyo]  .user-details .fw-bold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-scrollable[b-kravj58pyo]  .logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nav-scrollable[b-kravj58pyo]  .logout-icon {
    font-size: 1rem;
}

/* ==========================================
   MOBILE USER HEADER (hidden by default)
   ========================================== */
.mobile-user-header[b-kravj58pyo] {
    display: none;
}

/* ==========================================
   MOBILE STYLES (default)
   ========================================== */
@media (max-width: 640.98px) {
    /* Hide the header in the drawer - logo is in MainLayout */
    .top-row[b-kravj58pyo] {
        display: none;
    }

    /* Hide the toggle button - we use MainLayout's hamburger */
    .menu-toggle-btn[b-kravj58pyo] {
        display: none;
    }

    /* Always show nav-scrollable on mobile - sidebar slides in/out */
    .nav-scrollable[b-kravj58pyo] {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }

    /* Hide items that are in bottom nav */
    .nav-item.hide-on-mobile[b-kravj58pyo] {
        display: none;
    }

    /* Show mobile-only items */
    .nav-item.mobile-only[b-kravj58pyo] {
        display: block;
    }

    /* Hide desktop-only elements */
    .desktop-only[b-kravj58pyo] {
        display: none !important;
    }

    /* Show mobile user header at top */
    .mobile-user-header[b-kravj58pyo] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .mobile-user-header .user-icon[b-kravj58pyo] {
        width: 2.5rem;
        height: 2.5rem;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .mobile-user-header .user-details[b-kravj58pyo] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-user-header .user-details .fw-bold[b-kravj58pyo] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-user-header .text-muted[b-kravj58pyo] {
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 0.75rem;
    }

    /* Push logout button up on mobile */
    .nav-scrollable[b-kravj58pyo]  .nav-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 1rem);
    }
}

/* ==========================================
   DESKTOP STYLES
   ========================================== */
@media (min-width: 641px) {
    /* Always show nav-scrollable on desktop */
    .nav-scrollable[b-kravj58pyo] {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 3.5rem);
    }

    /* COLLAPSED STATE (default on desktop) */
    .top-row[b-kravj58pyo] {
        justify-content: center;
    }

    .top-row .navbar-brand[b-kravj58pyo] {
        display: none !important;
    }

    .menu-toggle-btn[b-kravj58pyo] {
        display: block;
    }

    .nav-item[b-kravj58pyo]  .nav-link {
        justify-content: center;
        padding: 0;
    }

    [b-kravj58pyo] .nav-link-text {
        display: none;
    }

    .nav-scrollable[b-kravj58pyo]  .user-details {
        display: none;
    }

    .nav-scrollable[b-kravj58pyo]  .logout-btn {
        padding: 0.5rem;
        width: auto;
    }

    .nav-scrollable[b-kravj58pyo]  .logout-text {
        display: none;
    }

    .nav-scrollable[b-kravj58pyo]  .nav-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem 0.5rem;
    }

    .nav-scrollable[b-kravj58pyo]  .user-info {
        margin-bottom: 0;
    }

    .nav-scrollable[b-kravj58pyo]  .user-info-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-scrollable[b-kravj58pyo]  .user-info {
        justify-content: center;
    }

    .nav-scrollable[b-kravj58pyo]  .settings-btn {
        display: flex;
    }

    /* EXPANDED STATE */
    .navbar-toggler:checked ~ .top-row[b-kravj58pyo] {
        justify-content: space-between;
    }

    .navbar-toggler:checked ~ .top-row .navbar-brand[b-kravj58pyo] {
        display: block !important;
    }

    .navbar-toggler:checked ~ .nav-scrollable .nav-item[b-kravj58pyo]  .nav-link {
        justify-content: flex-start;
        padding: 0 1rem;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo]  .nav-link-text {
        display: inline;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo]  .user-details {
        display: flex;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo]  .logout-btn {
        width: 100%;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo]  .logout-text {
        display: inline;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo]  .nav-footer {
        align-items: stretch;
        padding: 1rem;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo]  .user-info-row {
        flex-direction: row;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-kravj58pyo]  .settings-btn {
        display: flex;
    }
}
/* /Components/Layout/PublicFooter.razor.rz.scp.css */
/* Discret mais lisible : bordure fine pour se détacher du contenu qui précède, texte en
   --text-secondary (jamais --text-muted, insuffisant en contraste — voir app.css) sur le fond
   de page hérité (--bg-body, posé sur html/body). Calculé à la main (pas de navigateur ici) :
   --text-secondary #5d6c81 sur --bg-body #f5f7fa donne 4,98:1 en clair ; #94a3b8 sur #0f0f1a
   donne 7,43:1 en sombre. Les deux dépassent le seuil AA de 4,5:1. */
.public-footer[b-018u52bh2q] {
    padding: 1.5rem 1rem 2rem;
    text-align: center;
    border-top: 1px solid var(--border-color-light);
}

.public-footer__notice[b-018u52bh2q] {
    margin: 0 auto;
    max-width: 40rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-95isfahbph],
.components-reconnect-repeated-attempt-visible[b-95isfahbph],
.components-reconnect-failed-visible[b-95isfahbph],
.components-pause-visible[b-95isfahbph],
.components-resume-failed-visible[b-95isfahbph],
.components-rejoining-animation[b-95isfahbph] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/WelcomeLayout.razor.rz.scp.css */
.welcome-layout[b-2dh77bft3s] {
    min-height: 100vh;
}
/* /Components/Meta/KeyCardStrip.razor.rz.scp.css */
/* The expandable card-detail panel takes focus so the browser scrolls it into
   view (see KeyCardStrip.razor.cs). focus() scrolls with `block: nearest` and
   knows nothing about this app's fixed/sticky chrome, so without these margins
   the panel's heading (or its "Voir la fiche" link) ends up hidden underneath
   it. Values come from the chrome's own CSS:
   - top: MainLayout.razor.css .top-row is `height: 3.5rem` and
     `position: sticky; top: 0` on both mobile and desktop.
   - bottom: MobileBottomNav.razor.css .bottom-nav-item is
     `min-height: 72px` inside a `position: fixed; bottom: 0` bar shown only
     under 641px, plus the safe-area inset it already pads itself with. */
.card-detail-panel[b-p3sn62i6bv] {
    scroll-margin-top: calc(3.5rem + 0.5rem);
    scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px) * 0.5 + 0.5rem);
}
/* /Components/Pages/Account/ConfirmEmail.razor.rz.scp.css */
.confirm-email-container[b-zo45rxdn0v] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-body);
}

.confirm-email-card[b-zo45rxdn0v] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    max-width: 450px;
    width: 100%;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.loading-state[b-zo45rxdn0v],
.success-state[b-zo45rxdn0v],
.error-state[b-zo45rxdn0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner[b-zo45rxdn0v] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-zo45rxdn0v 1s linear infinite;
}

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

.icon-circle[b-zo45rxdn0v] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.icon-circle.success[b-zo45rxdn0v] {
    background: var(--win-soft);
    color: var(--win);
}

.icon-circle.error[b-zo45rxdn0v] {
    background: var(--loss-soft);
    color: var(--loss);
}

h2[b-zo45rxdn0v] {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.5rem;
}

p[b-zo45rxdn0v] {
    color: var(--text-secondary);
    margin: 0.5rem 0 1.5rem;
    line-height: 1.6;
}

.btn-primary[b-zo45rxdn0v],
.btn-secondary[b-zo45rxdn0v] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Aplat plein, pas le dégradé --accent-gradient : blanc sur --accent-primary ne donne que
   4,47:1 en clair et 4,23:1 en sombre, sous le seuil AA de 4,5. --accent-strong est le token
   documenté dans app.css pour les aplats portant du texte blanc (6,29:1 clair / 5,70:1 sombre
   ici). Même choix que .closing .btn-register dans Welcome.razor.css. */
.btn-primary[b-zo45rxdn0v] {
    background: var(--accent-strong);
    color: var(--text-on-accent);
}

.btn-primary:hover[b-zo45rxdn0v] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow-heavy);
    color: var(--text-on-accent);
}

.btn-secondary[b-zo45rxdn0v] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover[b-zo45rxdn0v] {
    background: var(--bg-hover);
}

.error-actions[b-zo45rxdn0v] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 480px) {
    .confirm-email-card[b-zo45rxdn0v] {
        padding: 2rem;
    }

    .error-actions[b-zo45rxdn0v] {
        flex-direction: column;
        width: 100%;
    }

    .error-actions a[b-zo45rxdn0v] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/Account/ConfirmEmailChange.razor.rz.scp.css */
.confirm-email-container[b-61g197zfa4] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-body);
}

.confirm-email-card[b-61g197zfa4] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    max-width: 450px;
    width: 100%;
    text-align: center;
    box-shadow: var(--card-shadow);
}

.loading-state[b-61g197zfa4],
.success-state[b-61g197zfa4],
.error-state[b-61g197zfa4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner[b-61g197zfa4] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-61g197zfa4 1s linear infinite;
}

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

.icon-circle[b-61g197zfa4] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.icon-circle.success[b-61g197zfa4] {
    background: var(--win-soft);
    color: var(--win);
}

.icon-circle.error[b-61g197zfa4] {
    background: var(--loss-soft);
    color: var(--loss);
}

h2[b-61g197zfa4] {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.5rem;
}

p[b-61g197zfa4] {
    color: var(--text-secondary);
    margin: 0.5rem 0 1.5rem;
    line-height: 1.6;
}

.btn-primary[b-61g197zfa4],
.btn-secondary[b-61g197zfa4] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Aplat plein, pas le dégradé --accent-gradient : blanc sur --accent-primary ne donne que
   4,47:1 en clair et 4,23:1 en sombre, sous le seuil AA de 4,5. --accent-strong est le token
   documenté dans app.css pour les aplats portant du texte blanc (6,29:1 clair / 5,70:1 sombre
   ici). Même choix que .closing .btn-register dans Welcome.razor.css. */
.btn-primary[b-61g197zfa4] {
    background: var(--accent-strong);
    color: var(--text-on-accent);
}

.btn-primary:hover[b-61g197zfa4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow-heavy);
    color: var(--text-on-accent);
}

.btn-secondary[b-61g197zfa4] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover[b-61g197zfa4] {
    background: var(--bg-hover);
}

.error-actions[b-61g197zfa4] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 480px) {
    .confirm-email-card[b-61g197zfa4] {
        padding: 2rem;
    }

    .error-actions[b-61g197zfa4] {
        flex-direction: column;
        width: 100%;
    }

    .error-actions a[b-61g197zfa4] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/Account/ForgotPassword.razor.rz.scp.css */
.login-container[b-k0atzvncsk] {
    min-height: 100vh;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-card[b-k0atzvncsk] {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    width: 100%;
    max-width: 400px;
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
}

/* Aplat d'accent plutôt que dégradé peint en texte : voir le commentaire équivalent dans
   Login.razor.css. --accent-text donne 6,29:1 (clair) / 6,00:1 (sombre) sur --bg-card-solid. */
.login-card[b-k0atzvncsk]  h1 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--accent-text);
}

.login-subtitle[b-k0atzvncsk] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.form-group[b-k0atzvncsk] {
    margin-bottom: 1.5rem;
}

.form-group[b-k0atzvncsk]  label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.form-control[b-k0atzvncsk] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 0.3s;
}

.form-control:focus[b-k0atzvncsk] {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-input);
}

.form-control[b-k0atzvncsk]::placeholder {
    color: var(--text-secondary);
}

/* Aplat plein, pas le dégradé --accent-gradient : voir le commentaire de .btn-submit dans
   Login.razor.css (même raisonnement, mêmes chiffres). */
.btn-submit[b-k0atzvncsk] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-on-accent);
    background: var(--accent-strong);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-submit:hover:not(:disabled)[b-k0atzvncsk] {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--shadow-heavy);
}

.btn-submit:disabled[b-k0atzvncsk] {
    opacity: 0.7;
    cursor: not-allowed;
}

.alert-danger[b-k0atzvncsk] {
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    color: var(--loss);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.back-link[b-k0atzvncsk] {
    text-align: center;
    margin-top: 1.5rem;
}

.back-link[b-k0atzvncsk]  a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.back-link[b-k0atzvncsk]  a:hover {
    color: var(--accent-text);
}

[b-k0atzvncsk] .validation-message {
    color: var(--loss);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Success state */
.success-state[b-k0atzvncsk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.success-icon[b-k0atzvncsk] {
    color: var(--accent-text);
    margin-bottom: 1rem;
}

.success-state h1[b-k0atzvncsk] {
    color: var(--text-primary);
    margin: 0;
}

.success-state p[b-k0atzvncsk] {
    color: var(--text-secondary);
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* Le nom de classe vient du markup (Bootstrap) et reste inchangé ; la couleur, elle, suit
   --text-secondary et non le token --text-muted (proscrit ici, insuffisant en sombre). */
.success-state .text-muted[b-k0atzvncsk] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.spinner-border-sm[b-k0atzvncsk] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
.login-container[b-hurvpdyumt] {
    min-height: 100vh;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-card[b-hurvpdyumt] {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    width: 100%;
    max-width: 400px;
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
}

/* Titre en aplat d'accent plutôt qu'en dégradé : à cette taille (h1 global, 1.875rem, donc
   "grand texte" au sens WCAG, seuil 3:1), le dégradé --accent-gradient tiendrait, mais
   --accent-text est le token déjà documenté dans app.css pour du texte d'accent posé sur une
   carte (6,29:1 en clair, 6,00:1 en sombre sur --bg-card-solid) : plus simple à garantir qu'un
   dégradé à deux arrêts dont il faudrait vérifier les deux extrémités. */
.login-card[b-hurvpdyumt]  h1 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--accent-text);
}

.login-subtitle[b-hurvpdyumt] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.form-group[b-hurvpdyumt] {
    margin-bottom: 1.5rem;
}

.form-group[b-hurvpdyumt]  label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.form-control[b-hurvpdyumt] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 0.3s;
}

.form-control:focus[b-hurvpdyumt] {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-input);
}

.form-check[b-hurvpdyumt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input[b-hurvpdyumt] {
    width: auto;
}

.form-check-label[b-hurvpdyumt] {
    color: var(--text-primary);
}

/* Aplat plein (pas le dégradé --accent-gradient) : blanc sur --accent-primary ne donne que
   4,47:1 en clair et 4,23:1 en sombre, sous le seuil AA de 4,5 — c'est exactement pour ce cas
   qu'app.css documente --accent-strong comme « le token pour les aplats portant du texte
   blanc » (6,29:1 en clair, 5,70:1 en sombre ici). Même choix que .closing .btn-register dans
   Welcome.razor.css. */
.btn-submit[b-hurvpdyumt] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-on-accent);
    background: var(--accent-strong);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-submit:hover[b-hurvpdyumt] {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--shadow-heavy);
}

.alert-danger[b-hurvpdyumt] {
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    color: var(--loss);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.forgot-password-link[b-hurvpdyumt] {
    text-align: center;
    margin-top: 1.5rem;
}

.forgot-password-link[b-hurvpdyumt]  a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.forgot-password-link[b-hurvpdyumt]  a:hover {
    color: var(--accent-text);
}

.register-link[b-hurvpdyumt] {
    text-align: center;
    margin-top: 1rem;
    color: var(--text-secondary);
}

.register-link[b-hurvpdyumt]  a {
    color: var(--accent-text);
    text-decoration: none;
    margin-left: 0.5rem;
    font-weight: 500;
}

.register-link[b-hurvpdyumt]  a:hover {
    text-decoration: underline;
}

.back-link[b-hurvpdyumt] {
    text-align: center;
    margin-top: 1rem;
}

.back-link[b-hurvpdyumt]  a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.back-link[b-hurvpdyumt]  a:hover {
    color: var(--accent-text);
}

[b-hurvpdyumt] .validation-message {
    color: var(--loss);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
/* /Components/Pages/Account/Register.razor.rz.scp.css */
.register-container[b-vbf7unls1s] {
    min-height: 100vh;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.register-card[b-vbf7unls1s] {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
}

/* Aplat d'accent plutôt que dégradé peint en texte : voir le commentaire équivalent dans
   Login.razor.css. --accent-text donne 6,29:1 (clair) / 6,00:1 (sombre) sur --bg-card-solid. */
.register-card[b-vbf7unls1s]  h1 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--accent-text);
}

.register-subtitle[b-vbf7unls1s] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.form-group[b-vbf7unls1s] {
    margin-bottom: 1.25rem;
}

.form-group[b-vbf7unls1s]  label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-control[b-vbf7unls1s] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 0.3s;
}

.form-control:focus[b-vbf7unls1s] {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-input);
}

.form-control[b-vbf7unls1s]::placeholder {
    color: var(--text-secondary);
}

.password-hint[b-vbf7unls1s] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* La case "Je souhaite recevoir des nouvelles" et son texte d'aide n'ont pas de règle dédiée
   ici : .form-check-label suit déjà --text-primary depuis app.css (règle globale, non scopée),
   ce qui suffit maintenant que la carte est passée à --bg-card-solid. .form-text, en revanche,
   n'a pas d'équivalent clair dans app.css (seul le thème sombre le fixe, et seulement via
   --text-muted, proscrit ici) : on le fixe donc explicitement pour les deux thèmes ci-dessous.
   Idem pour le lien "politique de confidentialité" qu'il contient : un <a> nu hériterait de
   --link-color (#6366f1 en clair), qui ne tient que 4,47:1 sur une carte blanche — sous le
   seuil de 4,5. --accent-text (6,29:1 clair / 6,00:1 sombre) le remplace. */
.form-check[b-vbf7unls1s]  .form-text {
    color: var(--text-secondary);
}

.form-check[b-vbf7unls1s]  .form-text a {
    color: var(--accent-text);
}

.form-check[b-vbf7unls1s]  .form-text a:hover {
    color: var(--link-hover-color);
}

/* Aplat plein, pas le dégradé --accent-gradient : voir le commentaire de .btn-submit dans
   Login.razor.css (même raisonnement, mêmes chiffres). */
.btn-submit[b-vbf7unls1s] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-on-accent);
    background: var(--accent-strong);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-top: 0.5rem;
}

.btn-submit:hover:not(:disabled)[b-vbf7unls1s] {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--shadow-heavy);
}

.btn-submit:disabled[b-vbf7unls1s] {
    opacity: 0.7;
    cursor: not-allowed;
}

.alert[b-vbf7unls1s] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.alert-danger[b-vbf7unls1s] {
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    color: var(--loss);
}

.alert-danger ul[b-vbf7unls1s] {
    padding-left: 1.25rem;
    margin: 0;
}

.alert-danger li[b-vbf7unls1s] {
    margin-bottom: 0.25rem;
}

.alert-danger li:last-child[b-vbf7unls1s] {
    margin-bottom: 0;
}

.alert-success[b-vbf7unls1s] {
    background: var(--win-soft);
    border: 1px solid var(--win);
    color: var(--win);
}

.login-link[b-vbf7unls1s] {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary);
}

.login-link[b-vbf7unls1s]  a {
    color: var(--accent-text);
    text-decoration: none;
    margin-left: 0.5rem;
    font-weight: 500;
}

.login-link[b-vbf7unls1s]  a:hover {
    text-decoration: underline;
}

.back-link[b-vbf7unls1s] {
    text-align: center;
    margin-top: 1rem;
}

.back-link[b-vbf7unls1s]  a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.9rem;
}

.back-link[b-vbf7unls1s]  a:hover {
    color: var(--accent-text);
}

[b-vbf7unls1s] .validation-message {
    color: var(--loss);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Confirmation email styles */
.confirmation-card[b-vbf7unls1s] {
    text-align: center;
}

.confirmation-icon[b-vbf7unls1s] {
    color: var(--accent-text);
    margin-bottom: 1.5rem;
}

.confirmation-card h1[b-vbf7unls1s] {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--accent-text);
}

.confirmation-text[b-vbf7unls1s] {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.confirmation-text strong[b-vbf7unls1s] {
    color: var(--accent-text);
}

.confirmation-hint[b-vbf7unls1s] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.confirmation-actions[b-vbf7unls1s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.btn-secondary[b-vbf7unls1s] {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    max-width: 250px;
}

.btn-secondary:hover:not(:disabled)[b-vbf7unls1s] {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

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

.btn-link[b-vbf7unls1s] {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.btn-link:hover[b-vbf7unls1s] {
    color: var(--accent-text);
}

.mt-3[b-vbf7unls1s] {
    margin-top: 1rem;
}
/* /Components/Pages/Account/ResetPassword.razor.rz.scp.css */
.login-container[b-kzl161zehg] {
    min-height: 100vh;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-card[b-kzl161zehg] {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    width: 100%;
    max-width: 400px;
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
}

/* Aplat d'accent plutôt que dégradé peint en texte : voir le commentaire équivalent dans
   Login.razor.css. --accent-text donne 6,29:1 (clair) / 6,00:1 (sombre) sur --bg-card-solid. */
.login-card[b-kzl161zehg]  h1 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--accent-text);
}

.login-subtitle[b-kzl161zehg] {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.form-group[b-kzl161zehg] {
    margin-bottom: 1.5rem;
}

.form-group[b-kzl161zehg]  label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.form-control[b-kzl161zehg] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 0.3s;
}

.form-control:focus[b-kzl161zehg] {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-input);
}

.password-requirements[b-kzl161zehg] {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.password-requirements small[b-kzl161zehg] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Aplat plein, pas le dégradé --accent-gradient : voir le commentaire de .btn-submit dans
   Login.razor.css (même raisonnement, mêmes chiffres). */
.btn-submit[b-kzl161zehg] {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-on-accent);
    background: var(--accent-strong);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-submit:hover:not(:disabled)[b-kzl161zehg] {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--shadow-heavy);
}

.btn-submit:disabled[b-kzl161zehg] {
    opacity: 0.7;
    cursor: not-allowed;
}

.alert-danger[b-kzl161zehg] {
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    color: var(--loss);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.back-link[b-kzl161zehg] {
    text-align: center;
    margin-top: 1.5rem;
}

.back-link[b-kzl161zehg]  a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.back-link[b-kzl161zehg]  a:hover {
    color: var(--accent-text);
}

[b-kzl161zehg] .validation-message {
    color: var(--loss);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Loading state */
.loading-state[b-kzl161zehg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.spinner[b-kzl161zehg] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-kzl161zehg 1s linear infinite;
}

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

/* Success state */
.success-state[b-kzl161zehg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.icon-circle[b-kzl161zehg] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.icon-circle.success[b-kzl161zehg] {
    background: var(--win-soft);
    color: var(--win);
}

.icon-circle.error[b-kzl161zehg] {
    background: var(--loss-soft);
    color: var(--loss);
}

.success-state h1[b-kzl161zehg],
.error-state h1[b-kzl161zehg] {
    color: var(--text-primary);
    margin: 0;
}

.success-state p[b-kzl161zehg],
.error-state p[b-kzl161zehg] {
    color: var(--text-secondary);
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* Aplat plein, pas le dégradé --accent-gradient : voir le commentaire de .btn-submit plus
   haut (même raisonnement, mêmes chiffres). */
.btn-primary[b-kzl161zehg] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    background: var(--accent-strong);
    color: var(--text-on-accent);
    transition: all 0.2s ease;
}

.btn-primary:hover[b-kzl161zehg] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow-heavy);
    color: var(--text-on-accent);
}

/* Error state */
.error-state[b-kzl161zehg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.error-actions[b-kzl161zehg] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.spinner-border-sm[b-kzl161zehg] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

@media (max-width: 480px) {
    .login-card[b-kzl161zehg] {
        padding: 2rem;
    }

    .error-actions[b-kzl161zehg] {
        flex-direction: column;
        width: 100%;
    }

    .error-actions a[b-kzl161zehg] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/Decks.razor.rz.scp.css */
.decks-note[b-wn5bgfaf2y] {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    font-size: .8125rem;
    color: var(--text-secondary);
}

.decks-warn[b-wn5bgfaf2y] {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bar-track);
    border: 1px solid var(--draw);
    font-size: .875rem;
    color: var(--text-primary);
}

.decks-warn--danger[b-wn5bgfaf2y] {
    background: var(--loss-soft);
    border-color: var(--loss);
}

.decks-warn__list[b-wn5bgfaf2y] { margin: 8px 0 0; padding-left: 20px; }

.decks-irreversible[b-wn5bgfaf2y] {
    margin: 0;
    font-weight: 600;
    color: var(--loss);
}
/* /Components/Pages/Demo/DemoCounter.razor.rz.scp.css */
.demo-counter[b-mdm60prq12] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.demo-counter > *[b-mdm60prq12] {
    flex: 1;
}
/* /Components/Pages/Demo/DemoStats.razor.rz.scp.css */
/* Grille 2x2 fixe qui remplit exactement le corps de la coque (voir DemoLayout.razor.css :
   .demo-shell__body fait déjà 100 % de la fenêtre 1280x800 de l'iframe, moins la barre du
   haut). Un auto-fit sur une seule rangée laissait 45 % du cadre vide sous les widgets ;
   ici les deux rangées se partagent toute la hauteur disponible. */
.demo-stats[b-dgqofue0wy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    height: 100%;
}

/* WidgetCard porte un margin-bottom pensé pour un flux Bootstrap empilé (voir
   DashboardWidgetGrid) : dans cette grille à hauteur fixe, ce serait 1.5rem de trop sous
   chaque carte, qui déborderait alors de sa cellule et se ferait couper par le
   `overflow: hidden` de .demo-shell__body. */
.demo-stats[b-dgqofue0wy]  .widget-card {
    height: 100%;
    margin-bottom: 0;
}
/* /Components/Pages/Demo/DemoTeam.razor.rz.scp.css */
.demo-team[b-kwvjmj5x6a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
    align-items: start;
}
/* /Components/Pages/PointCounter.razor.rz.scp.css */
/* ── Phase de jeu ──────────────────────────────────────────────────────────
   Ces regles vivaient dans un <style> du .razor, donc injectees dans TOUTE
   l'application. Aucune de leurs classes n'etait consommee ailleurs. */

.pc-play[b-tzwqitusw6] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: var(--bg-body);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* pan-x pan-y et non none : les modales enfants (.ms) doivent pouvoir defiler au doigt ; les moities .ch gardent leur propre none. */
    touch-action: pan-x pan-y;
}

.pc-bar[b-tzwqitusw6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    padding: .5rem 1rem;
    padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
    /* En paysage sur un iPhone a encoche, le format et le score passent sous l'encoche sans ca. */
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.pc-bar__format[b-tzwqitusw6] { font-weight: 600; font-size: .875rem; }

.pc-bar__score[b-tzwqitusw6] {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pc-timer[b-tzwqitusw6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--bg-hover);
    font-family: monospace;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Le token en couleur de texte, jamais en fond sous du blanc : --draw et --loss sombres
   ne tiennent pas 3:1 sous #fff. Le principe est partage avec ToneBadge, pas le fond : --bar-track
   est le choix de cette page, la variante perte de ToneBadge utilisant --loss-soft. Mesures :
   warning 5,33:1 clair / 8,69:1 sombre (--draw-strong), overtime 4,87:1 clair / 5,24:1 sombre (--loss). */
.pc-timer.timer-warning[b-tzwqitusw6] { background: var(--bar-track); color: var(--draw-strong); }
.pc-timer.timer-overtime[b-tzwqitusw6] { background: var(--bar-track); color: var(--loss); }
.pc-timer__icon[b-tzwqitusw6] { font-size: .875rem; }

.pc-actions[b-tzwqitusw6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-shrink: 0;
    padding: .75rem 1rem;
    /* Absent jusqu'ici, alors que MainLayout, MobileBottomNav, NavMenu, KeyCardStrip et
       FloatingAction le posent tous : sur iPhone cette barre passait sous la barre d'accueil. */
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    /* Meme raison en paysage : sans ca, « Abandonner » passe sous l'encoche cote gauche. */
    padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* Vocabulaire de boutons offert aux composants enfants de la page (MatchSetupForm en est
   un) : sans ::deep, ces regles compilent en .pc-action[b-...] et ne toucheraient que le
   balisage ecrit directement dans PointCounter.razor, jamais celui d'un composant enfant. */
[b-tzwqitusw6] .pc-action {
    padding: .625rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
}

[b-tzwqitusw6] .pc-action--primary {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

/* Detruit le match : volontairement le moins appelant des trois, et il confirme. */
[b-tzwqitusw6] .pc-action--quiet {
    border-color: transparent;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Explicite, meme si .pc-action de base est deja transparent : sans regle, le modificateur
   laisse croire qu'il fait quelque chose. */
[b-tzwqitusw6] .pc-action--ghost {
    background: transparent;
    border-color: var(--border-color);
}

@media (max-width: 767.98px) {
    .pc-bar__format[b-tzwqitusw6] { font-size: .75rem; }
    /* Reecrase le padding lateral pose plus haut : on y remet le calc, base .5rem, sinon la
       marge de securite en paysage disparait sous 768px. */
    .pc-actions[b-tzwqitusw6] {
        gap: .5rem;
        padding-left: calc(.5rem + env(safe-area-inset-left, 0px));
        padding-right: calc(.5rem + env(safe-area-inset-right, 0px));
    }
    [b-tzwqitusw6] .pc-action { padding: .5rem .625rem; font-size: .8125rem; }
}

/* ── Setup, entre-manches, commentaires ───────────────────────────────────
   Ces trois ecrans partagent .pc-timer et .pc-action avec la phase de jeu. */

.pc-setup[b-tzwqitusw6],
.pc-end[b-tzwqitusw6],
.pc-notes[b-tzwqitusw6] {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
}

.pc-setup__title[b-tzwqitusw6] {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
}

/* ── Entre-manches ─────────────────────────────────────────────────────── */

.pc-end[b-tzwqitusw6] { text-align: center; }

.pc-end__title[b-tzwqitusw6] {
    margin: 1.5rem 0 .5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.pc-end__score[b-tzwqitusw6] {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pc-end__score--win[b-tzwqitusw6] { color: var(--win); }
.pc-end__score--loss[b-tzwqitusw6] { color: var(--loss); }
.pc-end__score--draw[b-tzwqitusw6] { color: var(--draw); }

.pc-end__verdict[b-tzwqitusw6] {
    margin-top: .25rem;
    font-size: 1.125rem;
    font-weight: 500;
}

.pc-end__match[b-tzwqitusw6] {
    margin: 1rem 0 1.5rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.pc-end__final[b-tzwqitusw6] { margin: 1.5rem 0; }

.pc-end__final-title[b-tzwqitusw6] {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.pc-end__actions[b-tzwqitusw6] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Le bouton principal de ces ecrans est le geste unique de la page : plus grand que ceux
   de la barre d'actions du jeu (padding, taille de police), mais sa largeur reste naturelle
   et centree par le conteneur, pas etiree. */
.pc-end__actions .pc-action[b-tzwqitusw6],
.pc-notes__actions .pc-action--primary[b-tzwqitusw6] {
    padding: .875rem 2rem;
    font-size: 1rem;
}

/* ── Qui commence ──────────────────────────────────────────────────────── */

.pc-first[b-tzwqitusw6] {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.pc-first__question[b-tzwqitusw6] {
    font-size: 1rem;
    font-weight: 600;
}

.pc-first__hint[b-tzwqitusw6] {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--text-secondary);
}

.pc-first__choices[b-tzwqitusw6] {
    display: flex;
    gap: .75rem;
    margin-top: .875rem;
}

.pc-first__choice[b-tzwqitusw6] {
    flex: 1;
    min-width: 0;
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --accent-strong et non --accent-primary : le texte est blanc. 6,29:1 en clair,
   5,70:1 en sombre. */
.pc-first__choice--on[b-tzwqitusw6] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

/* ── Commentaires ──────────────────────────────────────────────────────── */

.pc-notes__title[b-tzwqitusw6] {
    margin: 1.25rem 0 .25rem;
    font-size: 1.25rem;
}

.pc-notes__lead[b-tzwqitusw6] {
    margin: 0 0 1.25rem;
    font-size: .875rem;
    color: var(--text-secondary);
}

.pc-notes__error[b-tzwqitusw6] {
    margin-bottom: 1rem;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    color: var(--text-primary);
    font-size: .875rem;
}

.pc-notes__game + .pc-notes__game[b-tzwqitusw6] { margin-top: 1.25rem; }

/* Le badge est un enfant direct de la fente de Field, qui est un flex colonne sans
   align-items : il serait etire sur toute la largeur et perdrait sa forme de pastille.
   .tone-badge est rendu par un composant enfant, d'ou ::deep. */
.pc-notes__game[b-tzwqitusw6]  .tone-badge {
    align-self: flex-start;
}

.pc-notes__actions[b-tzwqitusw6] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* Meme forme que ::deep .modal-spinner de ModalShell (Components/Ui/ModalShell.razor.css) :
   ce bouton n'est pas dans une coque de modale, donc ce vocabulaire ne l'atteint pas. Valeurs
   et animation reprises a l'identique, keyframes redeclarees sous un nom propre a ce fichier
   pour eviter toute collision de scope. */
.pc-notes__spinner[b-tzwqitusw6] {
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pc-notes-spin-b-tzwqitusw6 .7s linear infinite;
}

@keyframes pc-notes-spin-b-tzwqitusw6 { to { transform: rotate(360deg); } }

@media (max-width: 767.98px) {
    .pc-end__score[b-tzwqitusw6] { font-size: 3rem; }
    .pc-first__choices[b-tzwqitusw6] { flex-direction: column; }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-container[b-23c532h9sp] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.settings-container h1[b-23c532h9sp] {
    margin-bottom: 2rem;
    color: #333;
}

.settings-section[b-23c532h9sp] {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.settings-section h2[b-23c532h9sp] {
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.setting-item[b-23c532h9sp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.setting-item:not(:last-child)[b-23c532h9sp] {
    border-bottom: 1px solid #f1f3f4;
}

.setting-info[b-23c532h9sp] {
    flex: 1;
}

.setting-info label[b-23c532h9sp] {
    display: block;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
}

.setting-info small[b-23c532h9sp] {
    color: #6c757d;
    font-size: 0.85rem;
}

.setting-control[b-23c532h9sp] {
    margin-left: 2rem;
}

/* Cette règle scopée bat celle d'app.css : elle posait #ced4da, #fff et #333 en dur, donc
   ces sélecteurs restaient clairs en thème sombre — texte foncé sur fond blanc au milieu
   d'une page sombre, et une bordure à 1,49:1. Passés aux tokens, ils suivent le thème et
   la bordure atteint 3,46:1 en clair, 4,20:1 en sombre. */
.form-select[b-23c532h9sp] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background-color: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 150px;
}

.form-select:focus[b-23c532h9sp] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--bg-hover);
}

/* Toggle switch */
.switch[b-23c532h9sp] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input[b-23c532h9sp] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-23c532h9sp] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.slider[b-23c532h9sp]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input:checked + .slider[b-23c532h9sp] {
    background-color: #1b6ec2;
}

input:checked + .slider[b-23c532h9sp]:before {
    transform: translateX(24px);
}

/* Save notification */
.save-notification[b-23c532h9sp] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #28a745;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-23c532h9sp 0.3s ease;
    z-index: 1000;
}

.save-notification-error[b-23c532h9sp] {
    background: #dc3545;
}

@keyframes slideIn-b-23c532h9sp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.loading[b-23c532h9sp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #6c757d;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .settings-container[b-23c532h9sp] {
        padding: 1rem;
    }

    .setting-item[b-23c532h9sp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .setting-control[b-23c532h9sp] {
        margin-left: 0;
        width: 100%;
    }

    .form-select[b-23c532h9sp] {
        width: 100%;
    }
}

/* /Components/Pages/Teams/AcceptInvitation.razor.rz.scp.css */
.ai[b-c0g3vx9qjw] {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* TeamLogo est un composant enfant : il porte son propre scope et dessine sa pastille
   lui-même. La page ne règle que son centrage. */
.ai[b-c0g3vx9qjw]  .tlogo {
    margin: 0 auto 20px;
}

.ai__title[b-c0g3vx9qjw] {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ai__message[b-c0g3vx9qjw] {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.ai__meta[b-c0g3vx9qjw] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.ai__error[b-c0g3vx9qjw] {
    margin: 18px 0 0;
    padding: 10px 12px;
    font-size: 0.875rem;
    text-align: left;
    color: var(--loss);
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    border-radius: 10px;
}

.ai__actions[b-c0g3vx9qjw] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}
/* /Components/Pages/Teams/CreateTeam.razor.rz.scp.css */
.ctform[b-h6pm5ofuta] {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.ctform__title[b-h6pm5ofuta] {
    margin: 0 0 20px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ::deep obligatoire : le contrôle est rendu par InputText, un composant enfant que
   l'attribut de scope n'atteint pas. C'est précisément le défaut de l'ancienne règle
   .trigram-input, qui compilait sans jamais matcher. */
.ctform[b-h6pm5ofuta]  .ctform__trigram {
    max-width: 150px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}

.ctform__preview[b-h6pm5ofuta] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ctform__preview-img[b-h6pm5ofuta] {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
}

.ctform__error[b-h6pm5ofuta] {
    margin: 0 0 14px;
    padding: 10px 12px;
    font-size: 0.875rem;
    color: var(--loss);
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    border-radius: 10px;
}

.ctform__actions[b-h6pm5ofuta] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}
/* /Components/Pages/Teams/JoinTeam.razor.rz.scp.css */
.jt[b-0xjk0at96c] {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* TeamLogo est un composant enfant : il porte son propre scope et dessine sa pastille
   lui-même. La page ne règle que son centrage. */
.jt[b-0xjk0at96c]  .tlogo {
    margin: 0 auto 20px;
}

.jt__title[b-0xjk0at96c] {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

.jt__message[b-0xjk0at96c] {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.jt__meta[b-0xjk0at96c] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.jt__error[b-0xjk0at96c] {
    margin: 18px 0 0;
    padding: 10px 12px;
    font-size: 0.875rem;
    text-align: left;
    color: var(--loss);
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    border-radius: 10px;
}

.jt__actions[b-0xjk0at96c] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}
/* /Components/Pages/Teams/TeamDashboard.razor.rz.scp.css */
/* Accès refusé : le ton d'avertissement du socle. Pas de --draw-soft dans le dépôt, donc
   le fond reprend --bg-hover, comme .page-btn--warning le fait déjà. */
.tdash__denied[b-9lahl3hkaf] {
    margin: 0 0 16px;
    padding: 12px 14px;
    font-size: 0.9375rem;
    color: var(--draw);
    background: var(--bg-hover);
    border: 1px solid var(--draw);
    border-radius: 10px;
}

/* Remplace le text-muted de Bootstrap sous le titre. */
.tdash__subtitle[b-9lahl3hkaf] {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.team-trigram[b-9lahl3hkaf] {
    color: var(--link-color);
    font-weight: 600;
    font-size: 0.7em;
}

/* Team header layout */
.team-header[b-9lahl3hkaf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.team-header-info[b-9lahl3hkaf] {
    display: flex;
    align-items: center;
    /* Remplace l'espacement me-3 que portait le logo avant de devenir composant */
    gap: 16px;
}

.team-title[b-9lahl3hkaf] {
    font-size: 1.5rem;
}

/* Responsive styles for mobile/PWA */
@media (max-width: 768px) {
    .team-header[b-9lahl3hkaf] {
        flex-direction: column;
        align-items: stretch;
    }

    .team-header-info[b-9lahl3hkaf] {
        margin-bottom: 0.75rem;
    }

    .team-title[b-9lahl3hkaf] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .team-title[b-9lahl3hkaf] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Teams/TeamDetails.razor.rz.scp.css */
/* Aucune règle ne cible un élément par son nom de balise. app.css est chargé AVANT le
   bundle scopé : une règle comme `.td__header button` compilerait en (0,2,1) et
   surclasserait `.page-btn--primary` (0,1,0) en silence. */

.td__notfound[b-49vjrqh1gr] {
    margin: 0 0 16px;
    padding: 12px 14px;
    font-size: 0.9375rem;
    color: var(--loss);
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    border-radius: 10px;
}

.td__header[b-49vjrqh1gr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.td__identity[b-49vjrqh1gr] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.td__title[b-49vjrqh1gr] {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.td__trigram[b-49vjrqh1gr] {
    color: var(--link-color);
    font-weight: 600;
    font-size: 0.7em;
}

.td__meta[b-49vjrqh1gr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.td__members[b-49vjrqh1gr] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.td__actions[b-49vjrqh1gr] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.td__panel[b-49vjrqh1gr] {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.td__panel-head[b-49vjrqh1gr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color-light);
}

.td__panel-title[b-49vjrqh1gr] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.td__table[b-49vjrqh1gr] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.td__th[b-49vjrqh1gr] {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color-light);
    white-space: nowrap;
}

.td__th--right[b-49vjrqh1gr] {
    text-align: right;
}

.td__name[b-49vjrqh1gr],
.td__role[b-49vjrqh1gr],
.td__joined[b-49vjrqh1gr],
.td__rowactions[b-49vjrqh1gr] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
}

.td__name[b-49vjrqh1gr] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.td__joined[b-49vjrqh1gr] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.td__rowactions[b-49vjrqh1gr] {
    text-align: right;
    white-space: nowrap;
}

.td__creator[b-49vjrqh1gr] {
    margin-left: 6px;
    padding: 0.1em 0.5em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--accent-text);
    background: var(--bg-hover);
    border-radius: 6px;
}

/* Trio d'icônes propre à cette table : petites, carrées, sans libellé. Volontairement
   scopé plutôt que global — aucun deuxième consommateur en vue. */
.td__icon[b-49vjrqh1gr] {
    padding: 4px 7px;
    margin-left: 4px;
    font-size: 0.8125rem;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
}

.td__icon:hover:not(:disabled)[b-49vjrqh1gr] {
    background: var(--bg-hover);
}

.td__icon--up:hover:not(:disabled)[b-49vjrqh1gr] {
    color: var(--win);
    border-color: var(--win);
}

.td__icon--down:hover:not(:disabled)[b-49vjrqh1gr] {
    color: var(--draw);
    border-color: var(--draw);
}

.td__icon--remove:hover:not(:disabled)[b-49vjrqh1gr] {
    color: var(--loss);
    border-color: var(--loss);
}

.td__invites[b-49vjrqh1gr] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.td__invite[b-49vjrqh1gr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-color-light);
}

.td__invites .td__invite:last-child[b-49vjrqh1gr] {
    border-bottom: none;
}

.td__invite-info[b-49vjrqh1gr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.td__invite-email[b-49vjrqh1gr] {
    font-size: 0.875rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.td__invite-expiry[b-49vjrqh1gr] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Second paragraphe de la confirmation de suppression : plus grave que la question
   qui le précède, donc marqué en couleur de perte et en graisse plus soutenue. */
.td__warning[b-49vjrqh1gr] {
    color: var(--loss);
    font-weight: 600;
}

@media (max-width: 768px) {
    .td__header[b-49vjrqh1gr] {
        flex-direction: column;
        align-items: stretch;
    }

    .td__title[b-49vjrqh1gr] {
        font-size: 1.25rem;
    }
}

/* Palier supplémentaire des plus petits téléphones — ajusté depuis la feuille originale. */
@media (max-width: 480px) {
    .td__title[b-49vjrqh1gr] {
        font-size: 1.1rem;
    }
}
/* /Components/Pages/Teams/Teams.razor.rz.scp.css */
.teams__head[b-ax86igrpn9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.teams__title[b-ax86igrpn9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.teams__create[b-ax86igrpn9] {
    padding: 7px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-on-accent);
    background: var(--accent-gradient);
    border-radius: 999px;
    white-space: nowrap;
}

.teams__create:hover[b-ax86igrpn9] {
    opacity: 0.9;
    color: var(--text-on-accent);
}
/* /Components/Pages/Welcome.razor.rz.scp.css */
.welcome-container[b-2qdirbo0c6] {
    min-height: 100vh;
    background: var(--bg-body);
}

.welcome-content[b-2qdirbo0c6] {
    max-width: 1100px;
    margin-inline: auto;
}

/* Le bandeau du hero est peint au dégradé de l'app. Ce token existe dans les deux thèmes et
   y reste foncé, mais il n'y est pas identique — le sombre en donne une variante à trois
   arrêts (app.css:154). Le léger changement de teinte selon le thème est voulu. */
.logo-section[b-2qdirbo0c6] {
    background: var(--accent-gradient);
    border-radius: var(--card-radius);
    padding: 3rem 2rem 2.5rem;
    margin-bottom: 4rem;
    text-align: center;
}

.welcome-title[b-2qdirbo0c6] {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.welcome-subtitle[b-2qdirbo0c6] {
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    color: rgba(255, 255, 255, 0.88);
}

.hero-description[b-2qdirbo0c6] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 700px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}

.pitch[b-2qdirbo0c6] {
    margin-bottom: 4rem;
}

.section-heading[b-2qdirbo0c6] {
    font-size: 1.6rem;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 2.5rem;
}

.pitch__row[b-2qdirbo0c6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.pitch__row--reverse[b-2qdirbo0c6] {
    flex-direction: row-reverse;
}

.pitch__copy[b-2qdirbo0c6] {
    max-width: 380px;
}

.pitch__copy h3[b-2qdirbo0c6] {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* --text-secondary et non --text-muted : le contraste de --text-muted est insuffisant,
   en thème sombre particulièrement, et une page publique est le pire endroit pour l'hériter. */
.pitch__copy p[b-2qdirbo0c6] {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* Le mouvement que le carrousel aurait apporté, sans cacher un mot. CSS pur : la page
   reste en rendu statique. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .pitch__row[b-2qdirbo0c6] {
            animation: pitch-in-b-2qdirbo0c6 linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 32%;
        }
    }
}

@keyframes pitch-in-b-2qdirbo0c6 {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .pitch__row[b-2qdirbo0c6],
    .pitch__row--reverse[b-2qdirbo0c6] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .pitch__copy[b-2qdirbo0c6] {
        max-width: none;
        text-align: center;
    }
}

.cta-buttons[b-2qdirbo0c6] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.btn-register[b-2qdirbo0c6] {
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-text);
    background: #ffffff;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-register:hover[b-2qdirbo0c6] {
    transform: scale(1.05);
    box-shadow: 0 5px 20px var(--shadow-heavy);
    color: var(--accent-text);
}

.btn-login[b-2qdirbo0c6] {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s, background 0.3s;
}

.btn-login:hover[b-2qdirbo0c6] {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.cta-subtext[b-2qdirbo0c6] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.75rem;
}

.hero-shot[b-2qdirbo0c6] {
    margin-top: 2rem;
}

.btn-discord[b-2qdirbo0c6] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: #5865F2;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-discord:hover[b-2qdirbo0c6] {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(88, 101, 242, 0.4);
    color: #ffffff;
}

.legends-showcase[b-2qdirbo0c6] {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 2rem;
    margin-bottom: 3rem;
}

.legends-title[b-2qdirbo0c6] {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    text-align: center;
}

.legends-set[b-2qdirbo0c6] {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: 700;
    margin: 1.25rem 0 0.5rem;
}

.legends-chips[b-2qdirbo0c6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.legends-chips li[b-2qdirbo0c6] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-light);
    border-radius: 99px;
    padding: 0.25rem 0.7rem;
}

@media (max-width: 576px) {
    /* Marge interieure resserree : le bandeau est le conteneur le plus etroit de la page, et
       c'est lui qui plafonne la largeur des vitrines. A 2rem, il n'en restait que 311 px sur un
       ecran de 375, moins que la vitrine elle-meme. */
    .logo-section[b-2qdirbo0c6] {
        padding: 2rem 1rem;
    }

    .cta-buttons[b-2qdirbo0c6] {
        flex-direction: column;
        align-items: center;
    }
}

.closing[b-2qdirbo0c6] {
    text-align: center;
    padding: 3rem 1rem 4rem;
    border-top: 1px solid var(--border-color-light);
}

.closing__heading[b-2qdirbo0c6] {
    font-size: 1.6rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.closing .cta-buttons[b-2qdirbo0c6] {
    margin-top: 0;
}

/* .cta-subtext est pensé pour le bandeau d'accent (texte blanc translucide) ; le rappel de
   bas de page l'hérite sur le fond de page ordinaire, où ce blanc serait quasi invisible.
   --text-secondary et non --text-muted, pour les mêmes raisons de contraste que plus haut. */
.closing .cta-subtext[b-2qdirbo0c6] {
    color: var(--text-secondary);
}

/* Argument chaleureux, pas une clause : posé juste au-dessus du bouton Discord, sur le même
   fond de page ordinaire que .cta-subtext ci-dessus (--text-secondary donc, jamais
   --text-muted — mêmes calculs de contraste : 4,98:1 en clair, 7,43:1 en sombre sur
   --bg-body). Le pied de page discret (PublicFooter) porte la clause complète plus bas. */
.closing__community-note[b-2qdirbo0c6] {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* .btn-register est pensé pour le hero, posé sur le bandeau d'accent (.logo-section) : un
   blanc plein sans bordure y tranche franchement. Ici, en bas de page, il hérite du fond de
   page ordinaire (.welcome-container { background: var(--bg-body) }) — le même blanc n'y
   donne que 1,07:1 de contraste, sous le seuil de 3:1 que WCAG SC 1.4.11 impose à la limite
   d'un composant d'interface (le même critère que --border-input dans app.css). On le repeint
   en aplat d'accent porteur de texte blanc, comme les boutons primaires de l'app
   (--accent-strong + --text-on-accent) : --accent-strong est justement documenté dans app.css
   comme le token « pour les aplats portant du texte blanc ». Calculé : 5,86:1 (limite du bouton
   sur --bg-body) et 6,29:1 (texte blanc dessus) en clair ; 3,34:1 et 5,70:1 en sombre — au-delà
   des seuils 3:1 / 4,5:1 dans les deux thèmes. Le survol reprend le même aplat (hérité de la
   règle .btn-register:hover ci-dessus, qui ne touche pas au fond) ; seule sa couleur de texte
   est surchargée, --accent-text y étant illisible sur ce fond. */
.closing .btn-register[b-2qdirbo0c6] {
    background: var(--accent-strong);
    color: var(--text-on-accent);
}

.closing .btn-register:hover[b-2qdirbo0c6] {
    color: var(--text-on-accent);
}

.discord-section[b-2qdirbo0c6] {
    margin-top: 2rem;
}
/* /Components/PointCounter/CounterHalf.razor.rz.scp.css */
.ch[b-dvs6f07vu8] {
    flex: 1;
    display: flex;
    align-items: stretch;
    position: relative;
    color: #ffffff;
    /* Empeche la selection de texte et le zoom au double-tap : toute la surface est une
       cible tactile, et un zoom accidentel au milieu d'une partie est ingerable. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

.ch--mine[b-dvs6f07vu8] { background-color: var(--counter-mine); }
.ch--theirs[b-dvs6f07vu8] { background-color: var(--counter-theirs); }

.ch__zone[b-dvs6f07vu8] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 3rem;
    font-weight: 700;
    /* .3 rendait les glyphes quasi invisibles. A .55 sur un aplat sature ils ne tenaient que
       3,00:1 clair / 2,76:1 sombre, sous le seuil de 3:1 pour un element graphique. A .65,
       3,59:1 clair / 3,29:1 sombre : ils se lisent sans concurrencer le chiffre, qui reste
       l'element principal. */
    opacity: .65;
    transition: opacity .1s, background-color .1s;
    touch-action: none;
}

.ch__zone:active[b-dvs6f07vu8] {
    opacity: .9;
    background: rgba(255, 255, 255, .14);
}

.ch__zone--start[b-dvs6f07vu8] { justify-content: flex-start; padding-left: 1.25rem; }
.ch__zone--end[b-dvs6f07vu8] { justify-content: flex-end; padding-right: 1.25rem; }

.ch__content[b-dvs6f07vu8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    /* Les taps traversent vers les zones ; la pastille d'annulation les recupere pour elle
       seule, plus bas. */
    pointer-events: none;
    /* Sans ca, un enfant flex ne retrecit jamais sous son contenu intrinseque : un nom sans
       espace le forcerait a deborder plutot que de laisser .ch__name le tronquer. */
    min-width: 0;
}

.ch__content--rotated[b-dvs6f07vu8] { transform: rotate(180deg); }

/* Pas d'opacite ici : sur --counter-mine sombre (#7c3aed), du blanc compose en dessous de
   100% descend sous le seuil de contraste AA (4.5:1). Le blanc reste plein ; la hierarchie
   nom/legende passe par la taille et la graisse. */
.ch__name[b-dvs6f07vu8] {
    font-size: 1.5rem;
    font-weight: 500;
    /* Un nom saisi en un seul mot (« Jean-Baptiste-de-la-Rochefoucauld ») reclame ~230px des
       375 et ecrase les deux zones tactiles sous 60px : on tronque plutot que de le laisser
       pousser la mise en page. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch__legend[b-dvs6f07vu8] {
    font-size: 1rem;
    margin-bottom: .25rem;
}

.ch__points[b-dvs6f07vu8] {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

/* Hauteur reservee en permanence : sinon l'apparition de la pastille pousse le chiffre
   vers le haut au premier tap de chaque manche. 44px, pas 34 : c'est la seule cible fine
   d'un ecran fait de deux cibles de 348px, et un pouce a bout de bras merite le minimum
   tactile d'Apple (44pt). */
.ch__undo-slot[b-dvs6f07vu8] {
    height: 44px;
    margin-top: .5rem;
    display: flex;
    align-items: center;
}

.ch__undo[b-dvs6f07vu8] {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .45);
    /* .16 ne tenait que 4,28:1 en sombre sur --counter-mine, sous AA pour le texte blanc de
       la pastille. .10 : 4,78:1. */
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
}

.ch__undo:active[b-dvs6f07vu8] { background: rgba(255, 255, 255, .3); }

@media (max-width: 767.98px) {
    .ch__points[b-dvs6f07vu8] { font-size: 5.5rem; }
    .ch__zone[b-dvs6f07vu8] { font-size: 2.25rem; }
    .ch__name[b-dvs6f07vu8] { font-size: 1.2rem; }
    .ch__legend[b-dvs6f07vu8] { font-size: .875rem; }
}

/* Telephone tenu a l'horizontale : la hauteur disponible par moitie tombe sous 200px. */
@media (max-height: 500px) {
    .ch__points[b-dvs6f07vu8] { font-size: 3.5rem; }
    .ch__name[b-dvs6f07vu8] { font-size: 1rem; }
    .ch__legend[b-dvs6f07vu8] { display: none; }
}
/* /Components/PointCounter/MatchSetupForm.razor.rz.scp.css */
/* Mise en page seulement : le look des champs vient de Field. */

.msf__warn[b-i8w1ngk8hc] {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bar-track);
    border: 1px solid var(--draw);
    color: var(--text-primary);
    font-size: .875rem;
}

.msf__grid[b-i8w1ngk8hc] {
    display: grid;
    gap: 14px;
}

.msf__grid--2[b-i8w1ngk8hc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.msf__single[b-i8w1ngk8hc] { margin-top: 14px; }

.msf__checks[b-i8w1ngk8hc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.msf__actions[b-i8w1ngk8hc] {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color-light);
}

/* Une colonne des le telephone : deux selects cote a cote sous 375px sont illisibles. */
@media (max-width: 767.98px) {
    .msf__grid--2[b-i8w1ngk8hc] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Teams/TeamCard.razor.rz.scp.css */
.tcard[b-9whe2tby2n] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tcard:hover[b-9whe2tby2n] {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.tcard__body[b-9whe2tby2n] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    flex: 1;
}

.tcard__info[b-9whe2tby2n] {
    min-width: 0;
}

.tcard__name[b-9whe2tby2n] {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tcard__trigram[b-9whe2tby2n] {
    color: var(--link-color);
    font-weight: 600;
    font-size: 0.85em;
}

.tcard__meta[b-9whe2tby2n] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tcard__members[b-9whe2tby2n] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.tcard__foot[b-9whe2tby2n] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color-light);
}

.tcard__action[b-9whe2tby2n] {
    padding: 5px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.tcard__action:hover[b-9whe2tby2n] {
    background: var(--bg-hover);
}

.tcard__action--primary[b-9whe2tby2n] {
    color: var(--accent-text);
    border-color: var(--accent-text);
}
/* /Components/Teams/TeamEditModal.razor.rz.scp.css */
/* ::deep seul ne suffit pas : le contrôle est rendu par InputText, un composant enfant
   dont aucun ancêtre ne porte l'attribut de scope de ce composant. .tem est l'élément
   que le composant écrit lui-même pour fournir cet ancrage — même mécanique que
   CreateTeam, qui ancre sa propre règle de trigramme sur .ctform. */
.tem[b-mtswcpddmi]  .tem__trigram {
    max-width: 150px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}

.tem__preview[b-mtswcpddmi] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.tem__preview-img[b-mtswcpddmi] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
}

.tem__error[b-mtswcpddmi] {
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 0.875rem;
    color: var(--loss);
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    border-radius: 10px;
}

.tem__actions[b-mtswcpddmi] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
/* /Components/Teams/TeamInviteLinkPanel.razor.rz.scp.css */
.tilp[b-ugrzen8c87] {
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.tilp__title[b-ugrzen8c87] {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tilp__hint[b-ugrzen8c87] {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.tilp__row[b-ugrzen8c87] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* Un champ de saisie prend les tokens d'input, pas ceux d'une carte : son fond est
   identique à celui de sa carte englobante, donc sa bordure est le seul indice de
   l'étendue du champ. */
.tilp__url[b-ugrzen8c87] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
}

.tilp__expiry[b-ugrzen8c87] {
    margin: 0 0 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tilp__expiry--expired[b-ugrzen8c87] {
    color: var(--loss);
}

.tilp__actions[b-ugrzen8c87] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tilp__empty[b-ugrzen8c87] {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
/* /Components/Teams/TeamInviteModal.razor.rz.scp.css */
.tim__error[b-ytwaquqvv6] {
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 0.875rem;
    color: var(--loss);
    background: var(--loss-soft);
    border: 1px solid var(--loss);
    border-radius: 10px;
}

.tim__actions[b-ytwaquqvv6] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
/* /Components/Teams/TeamLogo.razor.rz.scp.css */
.tlogo[b-3hc47n1i70] {
    position: relative;
    flex-shrink: 0;
}

.tlogo__placeholder[b-3hc47n1i70] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    color: var(--text-on-accent);
    font-weight: bold;
}

.tlogo__img[b-3hc47n1i70] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.tlogo--sm[b-3hc47n1i70] {
    width: 50px;
    height: 50px;
}

.tlogo--sm .tlogo__placeholder[b-3hc47n1i70],
.tlogo--sm .tlogo__img[b-3hc47n1i70] {
    border-radius: 8px;
}

.tlogo--sm .tlogo__placeholder[b-3hc47n1i70] {
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.tlogo--md[b-3hc47n1i70] {
    width: 80px;
    height: 80px;
}

.tlogo--md .tlogo__placeholder[b-3hc47n1i70],
.tlogo--md .tlogo__img[b-3hc47n1i70] {
    border-radius: 12px;
}

.tlogo--md .tlogo__placeholder[b-3hc47n1i70] {
    font-size: 1.25rem;
    letter-spacing: 2px;
}

.tlogo--lg[b-3hc47n1i70] {
    width: 100px;
    height: 100px;
}

.tlogo--lg .tlogo__placeholder[b-3hc47n1i70],
.tlogo--lg .tlogo__img[b-3hc47n1i70] {
    border-radius: 16px;
}

.tlogo--lg .tlogo__placeholder[b-3hc47n1i70] {
    font-size: 1.5rem;
    letter-spacing: 2px;
}

/* Les deux paliers que TeamDashboard portait sur son en-tête. Conservés ici pour que
   son adoption au lot 3 ne perde rien. */
@media (max-width: 768px) {
    .tlogo--md[b-3hc47n1i70] {
        width: 60px;
        height: 60px;
    }

    .tlogo--md .tlogo__placeholder[b-3hc47n1i70],
    .tlogo--md .tlogo__img[b-3hc47n1i70] {
        border-radius: 10px;
    }

    .tlogo--md .tlogo__placeholder[b-3hc47n1i70] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .tlogo--md[b-3hc47n1i70] {
        width: 50px;
        height: 50px;
    }

    .tlogo--md .tlogo__placeholder[b-3hc47n1i70],
    .tlogo--md .tlogo__img[b-3hc47n1i70] {
        border-radius: 8px;
    }

    .tlogo--md .tlogo__placeholder[b-3hc47n1i70] {
        font-size: 0.875rem;
    }
}
/* /Components/Teams/TeamOutcomeCard.razor.rz.scp.css */
.ocard[b-124y1t59nq] {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.ocard__icon[b-124y1t59nq] {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* Les cinq tons des onze blocs d'origine : text-danger, text-warning, text-info,
   text-success et text-secondary, traduits en tokens. */
.ocard__icon--loss[b-124y1t59nq] {
    color: var(--loss);
}

.ocard__icon--draw[b-124y1t59nq] {
    color: var(--draw);
}

.ocard__icon--win[b-124y1t59nq] {
    color: var(--win);
}

.ocard__icon--accent[b-124y1t59nq] {
    color: var(--accent-text);
}

.ocard__icon--muted[b-124y1t59nq] {
    color: var(--text-muted);
}

.ocard__title[b-124y1t59nq] {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ocard__message[b-124y1t59nq] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.ocard__action[b-124y1t59nq] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}
/* /Components/Teams/TeamRoleBadge.razor.rz.scp.css */
.rbadge[b-2t0my7i7ys] {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rbadge--admin[b-2t0my7i7ys] {
    background: var(--bg-hover);
    border-color: var(--accent-text);
    color: var(--accent-text);
}

.rbadge--manager[b-2t0my7i7ys] {
    background: var(--bar-track);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Le rôle par défaut ne réclame pas l'attention : ni fond, ni contour. */
.rbadge--member[b-2t0my7i7ys] {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
/* /Components/Ui/DeltaChip.razor.rz.scp.css */
.delta-chip[b-ncb8tofzcg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.delta-chip--favorable[b-ncb8tofzcg] {
    background: var(--win-soft);
    border-color: var(--win);
    color: var(--win);
}

.delta-chip--unfavorable[b-ncb8tofzcg] {
    background: var(--loss-soft);
    border-color: var(--loss);
    color: var(--loss);
}

.delta-chip--neutral[b-ncb8tofzcg] {
    background: var(--bar-track);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
/* /Components/Ui/EmptyState.razor.rz.scp.css */
.empty-state[b-lbzrd4jjes] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 26px 18px;
    text-align: center;
}

.empty-state__icon[b-lbzrd4jjes] {
    color: var(--text-muted);
    opacity: 0.7;
}

.empty-state__message[b-lbzrd4jjes] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.empty-state__dash[b-lbzrd4jjes] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
/* /Components/Ui/Field.razor.rz.scp.css */
.field[b-2ll26g0p5o] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.field__label[b-2ll26g0p5o] {
    font-size: .8125rem;
    color: var(--text-secondary);
}

.field__req[b-2ll26g0p5o] { color: var(--loss); }

.field__hint[b-2ll26g0p5o] { font-size: .75rem; }
.field__hint--warn[b-2ll26g0p5o] { color: var(--draw); }
/* --accent-text, pas --accent-secondary : ce dernier ne donne que 4,23:1 en thème clair. */
.field__hint--info[b-2ll26g0p5o] { color: var(--accent-text); }

.field__check[b-2ll26g0p5o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--text-primary);
    cursor: pointer;
}

/* ::deep obligatoire à partir d'ici : les contrôles sont rendus par InputSelect, InputText,
   InputTextArea, InputCheckbox, ValidationMessage — ou par un composant enfant comme
   OpponentAutocomplete — qui ne portent pas le scope de Field. C'est le vocabulaire offert
   aux fentes, exactement comme .modal-btn dans ModalShell. */
.field[b-2ll26g0p5o]  .field__input,
.field[b-2ll26g0p5o]  .field__select,
.field[b-2ll26g0p5o]  .field__textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: .875rem;
    font-family: inherit;
}

.field[b-2ll26g0p5o]  .field__input:focus,
.field[b-2ll26g0p5o]  .field__select:focus,
.field[b-2ll26g0p5o]  .field__textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--bg-hover);
}

.field[b-2ll26g0p5o]  .field__textarea {
    resize: vertical;
    min-height: 76px;
    line-height: 1.55;
}

.field[b-2ll26g0p5o]  .field__checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* Le remplissage automatique du navigateur impose son propre fond : il faut un fond opaque,
   d'où --bg-card-solid plutôt qu'un token translucide. Vivait dans OpponentAutocomplete, mais
   tout input texte y est exposé. */
.field[b-2ll26g0p5o]  .field__input:-webkit-autofill,
.field[b-2ll26g0p5o]  .field__input:-webkit-autofill:hover,
.field[b-2ll26g0p5o]  .field__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card-solid) inset;
    -webkit-text-fill-color: var(--text-primary);
    border-color: var(--border-input);
}

.field[b-2ll26g0p5o]  .validation-message {
    font-size: .75rem;
    color: var(--loss);
}
/* /Components/Ui/FloatingAction.razor.rz.scp.css */
/* Bouton d'action flottant. Il ne se montre QUE lorsque la barre de navigation basse prend
   le relais, au seuil de celle-ci — 640.98px, et non les 767.98px auxquels les listes se
   replient. Ce sont deux seuils distincts et les confondre placerait le bouton dans le vide,
   là où aucune barre ne l'attend. Voir Layout/MobileBottomNav.razor.css. */
.fab[b-gcp8xx9zs0] {
    display: none;
}

@media (max-width: 640.98px) {
    .fab[b-gcp8xx9zs0] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 16px;
        /* 16px au-dessus de la barre. Le calcul d'encoche est repris d'elle à l'identique
           plutôt que réécrit : une valeur en dur divergerait le jour où elle change. */
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) * 0.5 + 16px);
        width: 56px;
        height: 56px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--accent-strong);
        color: #ffffff;
        box-shadow: 0 6px 16px var(--shadow-heavy);
        /* Au-dessus du contenu, mais SOUS la barre (1200) et sous les modales (1300) : une
           modale ouverte doit le recouvrir, pas le laisser flotter par-dessus son fond. */
        z-index: 1100;
        cursor: pointer;
    }

    .fab:active[b-gcp8xx9zs0] {
        transform: scale(0.94);
    }
}
/* /Components/Ui/ModalShell.razor.rz.scp.css */
.ms[b-dqx9vuc8mk] {
    position: fixed;
    inset: 0;
    /* 1300 et non 1055, le z-index des modales de Bootstrap : cette application place sa barre
       de navigation mobile à 1200, et app.css relève déjà ses propres `.modal` à 1300 pour la
       même raison (commit 354c8f8). À 1055 la coque passe SOUS la barre, qui recouvre alors
       le bas de la boîte — c'est-à-dire la rangée d'actions. Le bouton d'enregistrement s'y
       trouvait non seulement masqué mais inatteignable au clic. */
    z-index: 1300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    background: var(--modal-backdrop);
}

/* Ni .ms__dialog ni .ms__body ne posent d'overflow : la liste de suggestions de
   OpponentAutocomplete est en position absolue et serait rognée. C'est .ms qui défile. */
.ms__dialog[b-dqx9vuc8mk] {
    width: 100%;
    max-width: 520px;
    margin: auto;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: 0 20px 40px var(--shadow-heavy);
}

.ms__dialog--lg[b-dqx9vuc8mk] { max-width: 820px; }

/* ScrollBody : le corps défile seul, l'en-tête et le pied restent visibles.
   `min-height: 0` sur .ms__body n'est pas décoratif — un enfant de flex a `min-height: auto`
   par défaut, refuse de se comprimer sous la taille de son contenu, et son `overflow-y`
   ne déclenche alors jamais : la boîte déborderait au lieu de défiler.
   `100dvh` suit la barre d'adresse mobile ; la ligne `100vh` la précède comme repli. */
.ms__dialog--scroll[b-dqx9vuc8mk] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
}

.ms__dialog--scroll .ms__head[b-dqx9vuc8mk],
.ms__dialog--scroll .ms__foot[b-dqx9vuc8mk] { flex: 0 0 auto; }

.ms__dialog--scroll .ms__body[b-dqx9vuc8mk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ms__head[b-dqx9vuc8mk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color-light);
}

.ms__title[b-dqx9vuc8mk] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ms__close[b-dqx9vuc8mk] {
    border: none;
    background: transparent;
    padding: 4px;
    line-height: 1;
    font-size: .875rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
}

.ms__close:hover:not(:disabled)[b-dqx9vuc8mk] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ms__close:disabled[b-dqx9vuc8mk] {
    opacity: .5;
    cursor: default;
}

.ms__body[b-dqx9vuc8mk] { padding: 20px 22px; }

.ms__body[b-dqx9vuc8mk]  p:last-child { margin-bottom: 0; }

.ms__foot[b-dqx9vuc8mk] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--border-color-light);
}

/* Vocabulaire de boutons offert aux fentes. ::deep est obligatoire : ce balisage vient
   de l'appelant et porte son scope, pas celui de ModalShell. */
[b-dqx9vuc8mk] .modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}

[b-dqx9vuc8mk] .modal-btn:disabled { opacity: .6; cursor: default; }

[b-dqx9vuc8mk] .modal-btn--ghost:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

/* --accent-strong, pas --accent-primary : le texte est blanc, et --accent-primary
   ne monte qu'à 4,47:1 en thème clair et 4,23:1 en sombre — sous le seuil AA. */
[b-dqx9vuc8mk] .modal-btn--primary {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #ffffff;
}

[b-dqx9vuc8mk] .modal-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }

[b-dqx9vuc8mk] .modal-btn--danger {
    background: var(--loss);
    border-color: var(--loss);
    color: var(--bg-card-solid);
}

[b-dqx9vuc8mk] .modal-btn--danger:hover:not(:disabled) { filter: brightness(1.08); }

[b-dqx9vuc8mk] .modal-btn--warning {
    background: var(--draw);
    border-color: var(--draw);
    color: var(--bg-card-solid);
}

[b-dqx9vuc8mk] .modal-btn--warning:hover:not(:disabled) { filter: brightness(1.08); }

[b-dqx9vuc8mk] .modal-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ms-spin-b-dqx9vuc8mk .7s linear infinite;
}

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

@media (max-width: 575.98px) {
    .ms[b-dqx9vuc8mk] { padding: 12px; }
    .ms__head[b-dqx9vuc8mk], .ms__body[b-dqx9vuc8mk], .ms__foot[b-dqx9vuc8mk] { padding-left: 16px; padding-right: 16px; }

    /* Le fond ne garde que 12px de marge ici : la hauteur disponible suit. */
    .ms__dialog--scroll[b-dqx9vuc8mk] {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}
/* /Components/Ui/SortableHeader.razor.rz.scp.css */
.sortable[b-bxl8006mkd] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sortable:hover[b-bxl8006mkd] {
    background-color: var(--table-hover-bg);
}

.sortable:focus-visible[b-bxl8006mkd] {
    outline: 2px solid var(--accent-secondary);
    outline-offset: -2px;
}

.sortable--active[b-bxl8006mkd] {
    color: var(--accent-text);
}

.sortable--left[b-bxl8006mkd] { text-align: left; }
.sortable--center[b-bxl8006mkd] { text-align: center; }
.sortable--right[b-bxl8006mkd] { text-align: right; }

.sortable__inner[b-bxl8006mkd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* /Components/Ui/StatRow.razor.rz.scp.css */
.stat-row[b-qh5wv6x72a] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-row__label[b-qh5wv6x72a] {
    width: 88px;
    flex: none;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.stat-row__value[b-qh5wv6x72a] {
    width: 62px;
    flex: none;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-row__bar[b-qh5wv6x72a] {
    flex: 1;
    min-width: 0;
}

.stat-row__sample[b-qh5wv6x72a] {
    width: 56px;
    flex: none;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
/* /Components/Ui/StatTile.razor.rz.scp.css */
.stat-tile[b-d0hb5ee0e0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-tile--boxed[b-d0hb5ee0e0] {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}

.stat-tile__label[b-d0hb5ee0e0] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.stat-tile--hero .stat-tile__label[b-d0hb5ee0e0] {
    font-size: 0.75rem;
}

.stat-tile__value[b-d0hb5ee0e0] {
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-tile--hero .stat-tile__value[b-d0hb5ee0e0] {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-tile__meta[b-d0hb5ee0e0] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.stat-tile__bar[b-d0hb5ee0e0] {
    margin-top: 10px;
}
/* /Components/Ui/ToneBadge.razor.rz.scp.css */
.tone-badge[b-pg74p0xkdo] {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tone-badge--win[b-pg74p0xkdo] {
    background: var(--win-soft);
    border-color: var(--win);
    color: var(--win);
}

.tone-badge--loss[b-pg74p0xkdo] {
    background: var(--loss-soft);
    border-color: var(--loss);
    color: var(--loss);
}

.tone-badge--draw[b-pg74p0xkdo] {
    background: var(--bar-track);
    border-color: var(--draw);
    color: var(--draw);
}

.tone-badge--neutral[b-pg74p0xkdo] {
    background: var(--bar-track);
    border-color: var(--border-color);
    color: var(--text-primary);
}
/* /Components/Ui/WidgetCard.razor.rz.scp.css */
.widget-card[b-8ailkj2wh3] {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
    height: 100%;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.widget-card:hover[b-8ailkj2wh3] {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.widget-card__head[b-8ailkj2wh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color-light);
}

.widget-card__title[b-8ailkj2wh3] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    min-width: 3.75rem;
}

.widget-card__head-end[b-8ailkj2wh3] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Lowest priority in the header: sheds space before the title or the actions control does.
   flex-shrink is deliberately disproportionate to `.widget-card__actions` (1, via the
   flex initial value) so the shrink algorithm drains this element down to zero before the
   actions control loses a single pixel; overflow+ellipsis makes that a clean truncation
   instead of a silent clip by `.widget-card` overflow: hidden. */
.widget-card__subtitle[b-8ailkj2wh3] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 999;
}

.widget-card__actions[b-8ailkj2wh3] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* No rule targeting a bare descendant selector like `select` belongs here: Blazor scopes
   CSS by rewriting the rightmost compound selector to require the scope attribute of the
   .razor.css file it's declared in, not the scope of the component that owns this markup.
   Content passed into a RenderFragment slot (e.g. <Actions>) is written by, and keeps the
   scope of, the calling component — so a `select` placed there can never carry
   WidgetCard's scope attribute, and a rule like `.widget-card__actions select { ... }`
   compiles to `.widget-card__actions select[b-xxxxxxxxxx]` and silently never matches.
   Style slot content from the calling component's own .razor.css instead (see
   DeckMatchupsWidget.razor.css for the select-width fix that belongs to this actions slot). */

.widget-card__body[b-8ailkj2wh3] {
    padding: 20px;
}

.widget-card__body--flush[b-8ailkj2wh3] {
    padding: 0;
}
/* /Components/Ui/WinrateBar.razor.rz.scp.css */
.winrate-bar[b-jwc9n3rw3t] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.winrate-bar__head[b-jwc9n3rw3t] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.winrate-bar__value[b-jwc9n3rw3t] {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.winrate-bar__record[b-jwc9n3rw3t] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.winrate-bar__track[b-jwc9n3rw3t] {
    height: 10px;
    border-radius: 999px;
    background: var(--bar-track);
    overflow: hidden;
}

.winrate-bar--compact .winrate-bar__track[b-jwc9n3rw3t] {
    height: 6px;
}

.winrate-bar__fill[b-jwc9n3rw3t] {
    display: flex;
    height: 100%;
}

/* A tiny sample (e.g. 1 game out of a 300-game MaxSample) can round down to a
   sub-pixel width, indistinguishable from "no data". Only enforce a floor once
   there is at least one game -- the true zero-game case must stay an empty rail. */
.winrate-bar__fill--has-games[b-jwc9n3rw3t] {
    min-width: 2px;
}

.winrate-bar__seg--win[b-jwc9n3rw3t] {
    background: var(--win);
}

.winrate-bar__seg--loss[b-jwc9n3rw3t] {
    background: var(--loss);
}

.winrate-bar__seg--draw[b-jwc9n3rw3t] {
    background: var(--draw);
}
/* /Components/Welcome/DemoShot.razor.rz.scp.css */
/* --shot-w est un nombre SANS unité : diviser deux longueurs est invalide en CSS, et
   l'échelle a besoin de var(--shot-w) / 1280. La largeur, elle, se reconstruit en calc(). */
/* content-box, et non le border-box par defaut du depot : --shot-w est aussi le facteur
   d'echelle de l'iframe, donc la largeur declaree doit etre celle de la BOITE DE CONTENU.
   En border-box, la bordure se soustrayait de cette largeur — l'iframe, elle, restait mise a
   --shot-w — et le trop-plein passait sous le liseré. Le cadre telephone, avec ses 8 px de
   bordure, rognait ainsi 16 px de contenu a droite. */
.shot[b-fjpptoomax] {
    box-sizing: content-box;
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow-hover);
    background: var(--bg-card-solid);
    margin-inline: auto;
}

.shot iframe[b-fjpptoomax] {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: top left;
}

/* --shot-h est la hauteur NATIVE de la page rendue, sans unite elle aussi. Chaque vitrine
   cadre sur son propre contenu : forcer les quatre pages a fabriquer 800 px de contenu
   reviendrait a inventer du remplissage, ce qui est pire qu'un cadre plus court. */
.shot--desktop[b-fjpptoomax] {
    width: calc(var(--shot-w) * 1px);
    height: calc(var(--shot-w) * 1px * var(--shot-h) / 1280);
    --shot-w: 640;
    --shot-h: 800;
}

.shot--desktop iframe[b-fjpptoomax] {
    width: 1280px;
    height: calc(var(--shot-h) * 1px);
    transform: scale(calc(var(--shot-w) / 1280));
}

.shot--phone[b-fjpptoomax] {
    width: calc(var(--shot-w) * 1px);
    height: calc(var(--shot-w) * 1px * var(--shot-h) / 375);
    --shot-w: 300;
    --shot-h: 760;
    border-radius: 26px;
    border-width: 8px;
    border-color: var(--text-primary);
}

.shot--phone iframe[b-fjpptoomax] {
    width: 375px;
    height: calc(var(--shot-h) * 1px);
    transform: scale(calc(var(--shot-w) / 375));
}

@media (max-width: 900px) {
    .shot--desktop[b-fjpptoomax] { --shot-w: 460; }
}

/* Ces largeurs doivent tenir dans le conteneur le plus etroit de la page, qui est le bandeau
   du hero — et non la largeur de la fenetre. Le bandeau garde 1rem de marge interieure de
   chaque cote sous ce point de rupture, soit 288 px disponibles sur un ecran de 320 px, le
   plus petit courant. Une vitrine plus large que son conteneur ne deborde pas seulement : son
   margin-inline: auto s'annule, elle se colle a gauche, et le vide se reporte du mauvais cote. */
@media (max-width: 576px) {
    .shot--desktop[b-fjpptoomax] { --shot-w: 280; }
    .shot--phone[b-fjpptoomax] { --shot-w: 200; }
}