/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-28690hwfxy] {
    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-28690hwfxy] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9if1nzqz1e],
.components-reconnect-repeated-attempt-visible[b-9if1nzqz1e],
.components-reconnect-failed-visible[b-9if1nzqz1e],
.components-pause-visible[b-9if1nzqz1e],
.components-resume-failed-visible[b-9if1nzqz1e],
.components-rejoining-animation[b-9if1nzqz1e] {
    display: none;
}

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


#components-reconnect-modal[b-9if1nzqz1e] {
    background-color: var(--card);
    color: var(--text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border);
    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-9if1nzqz1e 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-9if1nzqz1e] {
    border: 0;
    background-color: var(--accent);
    color: var(--accent-on);
    padding: 4px 24px;
    border-radius: 4px;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-9if1nzqz1e] {
        filter: brightness(1.08);
    }

    #components-reconnect-modal button:active[b-9if1nzqz1e] {
        filter: none;
    }

/* «Ricarica la pagina»: sempre visibile, in ogni fase (non ha le classi components-*-visible che
   il CSS base nasconde). Un link discreto: l'uscita che funziona anche a circuito morto. */
.components-reconnect-reload[b-9if1nzqz1e] {
    color: var(--accent-text);
    font-size: 0.85rem;
    text-decoration: underline;
}

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

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

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

@keyframes components-rejoining-animation-b-9if1nzqz1e {
    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/NovitaCard.razor.rz.scp.css */
/* La card «Novità» (mockup_novita_versione_webadmin.html): testa col sigillo 新, la pastiglia
   versione e la lista puntata del changelog. Il sigillo copia .avvio-sig; il resto è scoped alla
   card, colori e raggi dalle sole variabili di tema (vale anche per le skin scure). */

/* Fascia a piena larghezza sopra la dashboard, col ritmo di 1rem verso la griglia (come .avvio). */
.novita[b-wvgbo2h8k4] { margin-bottom: 1rem; }

.novita-testa[b-wvgbo2h8k4] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .2rem;
    padding-right: 1.6rem;
}

.novita-sig[b-wvgbo2h8k4] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-on);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: var(--jp);
}

.novita-testa h2[b-wvgbo2h8k4] { margin: 0; font-size: 1.05rem; }

.novita-ver[b-wvgbo2h8k4] {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 600;
    color: var(--accent-text);
    background: var(--accent-tenue);
    border-radius: 20px;
    padding: .18rem .6rem;
    white-space: nowrap;
}

.novita-data[b-wvgbo2h8k4] { color: var(--muted); font-size: .82rem; margin: .1rem 0 .8rem; }

.novita-lista[b-wvgbo2h8k4] { list-style: none; margin: 0; padding: 0; }

.novita-lista li[b-wvgbo2h8k4] {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .5rem .15rem;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text);
}
.novita-lista li + li[b-wvgbo2h8k4] { border-top: 1px solid var(--border); }

/* Il grassetto del changelog (Novita.Formatta): niente lo appiattiva, ma Inter si serve
   in 400/500/600 e il bold di default (700) non ha una faccia sua — si fissa a 600, il
   peso «voce» del sistema, invece di lasciare al browser un grassetto sintetico. */
.novita-lista strong[b-wvgbo2h8k4] { font-weight: 600; color: var(--text); }

.novita-lista .pallino[b-wvgbo2h8k4] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: .5rem;
}

/* Link allo storico completo, in coda alla card: separatore sopra, colore accento. */
.novita-tutte[b-wvgbo2h8k4] {
    display: block;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
    color: var(--accent-text);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.novita-tutte:hover[b-wvgbo2h8k4] { text-decoration: underline; }
/* /Components/Pages/ConfigurazioneEnte.razor.rz.scp.css */
/* Le tessere dell'indice «Configurazione ente» (deciso 24 ago). Sono .carta — fondo, bordo, raggio
   e ombra vengono da lì — e questo foglio aggiunge solo l'impaginazione interna e il fatto che
   l'INTERA carta è un link: colore ereditato e nessuna sottolineatura, sennò il titolo leggerebbe
   come un collegamento dentro un riquadro che non lo è.

   Solo variabili di tema, nessun colore letterale: il rail e le pagine cambiano fondo su tre skin
   e due temi, e un esadecimale qui sarebbe l'unica cosa a non seguirli. */

.conf-tessera[b-elto0i79zl] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
    /* Solo il bordo si accende: una tessera che si solleva o si ombreggia al passaggio farebbe
       muovere una griglia di cinque elementi a ogni spostamento del mouse. */
    transition: border-color .12s;
}

.conf-tessera:hover[b-elto0i79zl] {
    border-color: var(--accent);
    text-decoration: none;
}

/* L'icona sopra il titolo, alla misura di un'icona di sezione: fioca come l'occhiello di un gruppo
   — è un segno di riconoscimento, non un elemento da leggere per primo. Il tratto lo eredita da
   currentColor, come sul rail. */
.conf-ico[b-elto0i79zl] {
    display: inline-flex;
    color: var(--muted);
}

.conf-ico[b-elto0i79zl]  svg {
    width: 24px;
    height: 24px;
}

.conf-tit[b-elto0i79zl] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
}

.conf-nota[b-elto0i79zl] {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.35;
}
/* /Components/Pages/DettaglioCorso.razor.rz.scp.css */
/* Roster «essenziale» del corso (§«cluster scheda corso ↔ scheda socio», 10 ago,
   mockup_cluster_corso_socio.html). Stessa lingua visiva della carta «Corsi» della scheda socio,
   ma la riga è un bersaglio cliccabile verso la scheda allievo. Colori dalle sole variabili di
   tema, così luce/buio (e la pelle Sumi) restano validi. */
.isc-lista[b-r3fu2cngaw] { display: flex; flex-direction: column; }

.isc-riga[b-r3fu2cngaw] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .5rem;
    border-radius: var(--raggio-s);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.isc-riga:last-child[b-r3fu2cngaw] { border-bottom: none; }
.isc-riga:hover[b-r3fu2cngaw] { background: var(--page-tenue); }

/* Iscrizione in pausa: la riga si smorza (come nel mockup), le azioni restano piene. */
.isc-riga.pausa[b-r3fu2cngaw] { opacity: .72; }

/* La cintura: SegnoGrado disegna .token-svg senza vincolo di larghezza — qui lo cappo a 34px
   (come nell'elenco soci), scendendo nel componente figlio con ::deep. */
.isc-segno[b-r3fu2cngaw] { flex: 0 0 auto; }
.isc-segno[b-r3fu2cngaw]  .token-svg { width: 34px; height: auto; display: block; }

/* Pastiglia neutra (iniziali) quando manca la cintura: riuso .rp-av globale, dimensionata. */
.isc-av[b-r3fu2cngaw] { flex: 0 0 34px; width: 34px; height: 34px; }

.isc-info[b-r3fu2cngaw] { flex: 1 1 auto; min-width: 0; }
.isc-nome[b-r3fu2cngaw] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.isc-meta[b-r3fu2cngaw] { display: block; margin-top: .15rem; font-size: .78rem; color: var(--muted); }

.isc-freq[b-r3fu2cngaw] { flex: 0 0 auto; width: 5.5rem; text-align: right; }
.isc-pc[b-r3fu2cngaw] { font-size: 1rem; font-weight: 700; }
.isc-pl[b-r3fu2cngaw] { font-size: .72rem; color: var(--muted); margin-left: .3rem; }
.isc-bar[b-r3fu2cngaw] {
    height: 5px;
    border-radius: 3px;
    background: var(--page-tenue);
    margin-top: .35rem;
    overflow: hidden;
}
.isc-bar > i[b-r3fu2cngaw] { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
/* Sotto il 50% la barra vira in ambra (warn), come la frequenza per corso della scheda socio. */
.isc-bar.media > i[b-r3fu2cngaw] { background: var(--warn); }

.isc-azioni[b-r3fu2cngaw] { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }

.isc-chev[b-r3fu2cngaw] { flex: 0 0 auto; color: var(--muted); opacity: .55; font-size: 1.1rem; line-height: 1; }

/* Schermo stretto: la riga va a capo, frequenza e azioni scendono sotto nome e cintura. */
@media (max-width: 640px) {
    .isc-riga[b-r3fu2cngaw] { flex-wrap: wrap; }
    .isc-freq[b-r3fu2cngaw] { width: auto; text-align: left; flex: 1 1 auto; }
    .isc-azioni[b-r3fu2cngaw] { flex: 1 1 100%; justify-content: flex-start; }
    .isc-chev[b-r3fu2cngaw] { display: none; }
}
/* /Components/Pages/DettaglioSocio.razor.rz.scp.css */
/* Ritmo verticale fra le carte impilate: stesso passo del gap interno di .det-griglia (1rem),
   coerente con le pagine sorelle (.cru > .col, .corso-due > div, .imp-form). Senza questo le
   carte a tutta larghezza (Testata, Corsi) e la griglia si toccano (deciso 3 ago). */
.det-pila[b-85hsyss22u] { display: flex; flex-direction: column; gap: 1rem; }

/* Carta «Corsi» del socio (§2 ago): una riga per corso con chip disciplina, nome + stato,
   riga oraria, la % di frequenza per corso e le azioni. Stili scoped alla pagina, così non
   toccano il foglio globale. Colori e raggi dalle variabili di tema (chiaro/scuro). */

.corsi-lista[b-85hsyss22u] { display: flex; flex-direction: column; }

/* Riga intera cliccabile → scheda corso (pattern elenco soci): mano e alone all'hover come le
   righe apribili dell'app (.testa-carta.apribile). Il divisorio in basso resta. */
.corso-riga[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .1rem;
    border-bottom: 1px solid var(--border);
    border-radius: var(--raggio-s);
    cursor: pointer;
}
.corso-riga:last-child[b-85hsyss22u] { border-bottom: none; }
.corso-riga:hover[b-85hsyss22u] { background: var(--riga-hover); }

/* Iscrizione scaduta (rimossa): la riga resta come storia, ma smorzata e senza azioni. */
.corso-riga.spenta[b-85hsyss22u] { opacity: .55; }

.corso-chip[b-85hsyss22u] {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--raggio-s);
    background: var(--accent-tenue);
    color: var(--accent-text);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.corso-info[b-85hsyss22u] { flex: 1 1 auto; min-width: 0; }

.corso-nome[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.corso-meta[b-85hsyss22u] {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: var(--muted);
}

.corso-freq[b-85hsyss22u] {
    flex: 0 0 auto;
    width: 5.5rem;
    text-align: right;
}
.corso-pc[b-85hsyss22u] { font-size: 1rem; font-weight: 700; }
.corso-pl[b-85hsyss22u] { font-size: .72rem; color: var(--muted); margin-left: .3rem; }

.corso-bar[b-85hsyss22u] {
    height: 5px;
    border-radius: 3px;
    background: var(--page-tenue);
    margin-top: .35rem;
    overflow: hidden;
}
.corso-bar > i[b-85hsyss22u] {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ok);
}
.corso-bar.media > i[b-85hsyss22u] { background: var(--warn); }

.corso-azioni[b-85hsyss22u] {
    flex: 0 0 auto;
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

/* Il picker «Iscrivi a corso»: scelta multipla dei corsi dell'ente dove non è già iscritto. */
.corsi-picker[b-85hsyss22u] {
    margin-top: 1rem;
    border: 1px solid var(--accent-tenue);
    border-radius: var(--raggio);
    padding: .4rem .4rem .6rem;
    background: var(--page-tenue);
}
.corsi-picker-h[b-85hsyss22u] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .55rem .6rem .35rem;
}
.corsi-opt[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem;
    border-radius: var(--raggio-s);
    cursor: pointer;
}
.corsi-opt:hover[b-85hsyss22u] { background: var(--card); }
.corsi-ck[b-85hsyss22u] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 5px;
    border: 1.6px solid var(--border);
    display: grid;
    place-items: center;
    font-size: .75rem;
    color: transparent;
}
.corsi-opt.sel .corsi-ck[b-85hsyss22u] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
}
.corsi-oi[b-85hsyss22u] { flex: 1 1 auto; min-width: 0; }
.corsi-oi b[b-85hsyss22u] { display: block; font-weight: 600; }
.corsi-oi small[b-85hsyss22u] { font-size: .78rem; color: var(--muted); }
.corsi-picker-f[b-85hsyss22u] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: .55rem .5rem .1rem;
    border-top: 1px solid var(--border);
    margin-top: .35rem;
}

/* Stretto: la % e le azioni scendono sotto le info invece di comprimersi. */
@media (max-width: 640px) {
    .corso-riga[b-85hsyss22u] { flex-wrap: wrap; }
    .corso-freq[b-85hsyss22u] { width: auto; text-align: left; flex: 1 1 auto; }
    .corso-azioni[b-85hsyss22u] { flex: 1 1 100%; }
}

/* --- Note interne del socio (§«diario condiviso della gestione», 6 ago) ---
   Carta a piena larghezza: avviso di riservatezza, composer e voci datate/firmate. I colori
   pescano dalle variabili di tema (app.css), così sopravvivono anche alla pelle scura Sumi. */
.nota-avviso[b-85hsyss22u] {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .8rem;
    color: var(--muted);
    background: var(--page-tenue);
    border: 1px solid var(--border);
    border-radius: var(--raggio-s);
    padding: .55rem .75rem;
    margin-bottom: 1rem;
    line-height: 1.45;
}
.nota-avviso .occhio[b-85hsyss22u] { flex: none; margin-top: 1px; }

.nota-comp[b-85hsyss22u] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.1rem;
}
.nota-comp textarea[b-85hsyss22u] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--raggio-s);
    padding: .6rem .7rem;
    font: inherit;
    font-size: .9rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 60px;
    background: var(--card);
    color: var(--text);
}
.nota-comp .riga[b-85hsyss22u] { display: flex; justify-content: flex-end; }

.nota-voce[b-85hsyss22u] {
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
}
.nota-voce:first-of-type[b-85hsyss22u] { padding-top: .2rem; }
.nota-voce:last-child[b-85hsyss22u] { border-bottom: 0; padding-bottom: .1rem; }

.nota-firma[b-85hsyss22u] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: .35rem;
    flex-wrap: wrap;
}
.nota-firma .autore[b-85hsyss22u] { font-weight: 600; color: var(--text); }
.nota-firma .sep[b-85hsyss22u] { opacity: .5; }
.nota-firma .mod[b-85hsyss22u] { font-style: italic; }

.nota-testo[b-85hsyss22u] {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.nota-edit[b-85hsyss22u] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--raggio-s);
    padding: .6rem .7rem;
    font: inherit;
    font-size: .9rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 60px;
    background: var(--card);
    color: var(--text);
}

.nota-azioni[b-85hsyss22u] { display: flex; gap: 1rem; margin-top: .5rem; }
.nota-azioni a[b-85hsyss22u] {
    font-size: .8rem;
    color: var(--accent-text);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
}
.nota-azioni a.elim[b-85hsyss22u] { color: var(--muted); font-weight: 500; }

.nota-vuoto[b-85hsyss22u] {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.55;
    padding: .2rem 0 .1rem;
}

/* «Mostra altro»: rivelazione progressiva, centrata, separatore tratteggiato sopra */
.nota-altro[b-85hsyss22u] {
    display: flex;
    justify-content: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--border);
}
.nota-altro button[b-85hsyss22u] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 999px;
    padding: .45rem 1rem;
    font: inherit;
    font-size: .84rem;
    cursor: pointer;
}
.nota-altro button:hover[b-85hsyss22u] { background: var(--page-tenue); }
.nota-altro button .n[b-85hsyss22u] { color: var(--muted); font-size: .8rem; }

/* Rinnovo inline (tessera e quota, §17 ago): riquadro sobrio col campo data pre-compilato e le
   azioni Conferma/Annulla. Sostituisce le modali/scorciatoie di prima. */
.det-rinnovo[b-85hsyss22u] {
    margin-top: .75rem;
    padding: .8rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--raggio-s, 10px);
    background: var(--page-tenue, #fbfaf6);
}
.det-rinnovo .etichetta[b-85hsyss22u] { margin-bottom: .35rem; }
.det-rinnovo .det-azioni[b-85hsyss22u] { margin-top: .7rem; }

/* Stepper «+N mesi» del rinnovo quota: –/+ attorno al numero, poi l'etichetta «mesi». */
.quota-stepper[b-85hsyss22u] { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.stepper[b-85hsyss22u] {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card);
}
.stepper button[b-85hsyss22u] {
    width: 38px; height: 40px; border: none; background: transparent;
    color: var(--accent); font-size: 1.3rem; font-weight: 600; cursor: pointer;
}
.stepper button:hover:not(:disabled)[b-85hsyss22u] { background: var(--riga-hover); }
.stepper button:disabled[b-85hsyss22u] { opacity: .4; cursor: default; }
.stepper-n[b-85hsyss22u] { min-width: 42px; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text); }
/* /Components/Pages/NovitaStorico.razor.rz.scp.css */
/* Lo storico «Novità» (mockup_novita_storico.html): testata col sigillo 新, poi un blocco per
   rilascio separato da un filo. Colori e raggi dalle sole variabili di tema (vale sulle skin
   scure). Il sigillo riusa .novita-sig della card; la lista puntata riusa la forma di .novita-lista
   (qui ridichiarata perché lo scoped CSS non attraversa i componenti). */

.ns-testa[b-wl7bnmdcch] {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1.4rem;
}

.novita-sig[b-wl7bnmdcch] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-on);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-family: var(--jp);
}

.ns-testa h1[b-wl7bnmdcch] { margin: 0; font-size: 1.4rem; }
.ns-sotto[b-wl7bnmdcch] { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; }

.ns-rilascio[b-wl7bnmdcch] {
    max-width: 640px;
    padding: 1.1rem 0;
    border-top: 1px solid var(--border);
}
.ns-rilascio:first-of-type[b-wl7bnmdcch] { border-top: none; padding-top: .2rem; }

.ns-rilascio-testa[b-wl7bnmdcch] {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin-bottom: .3rem;
}

.ns-ver[b-wl7bnmdcch] { font-weight: 700; font-size: .98rem; color: var(--text); }
.ns-ver.cur[b-wl7bnmdcch] { color: var(--accent-text); }

.ns-data[b-wl7bnmdcch] { font-size: .78rem; color: var(--muted); }

.ns-badge-cur[b-wl7bnmdcch] {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent-text);
    background: var(--accent-tenue);
    border-radius: 20px;
    padding: .1rem .5rem;
}

.novita-lista[b-wl7bnmdcch] { list-style: none; margin: 0; padding: 0; }

.novita-lista li[b-wl7bnmdcch] {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .5rem .15rem;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text);
}
.novita-lista li + li[b-wl7bnmdcch] { border-top: 1px solid var(--border); }

/* Il grassetto del changelog (Novita.Formatta): niente lo appiattiva, ma Inter si serve
   in 400/500/600 e il bold di default (700) non ha una faccia sua — si fissa a 600, il
   peso «voce» del sistema, invece di lasciare al browser un grassetto sintetico. */
.novita-lista strong[b-wl7bnmdcch] { font-weight: 600; color: var(--text); }

.novita-lista .pallino[b-wl7bnmdcch] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: .5rem;
}
/* /Components/Pages/Soci.razor.rz.scp.css */
/* Storico dei cessati (§«Elenco soci: storico dei cessati + riattiva», 2 ago): col chip «Mostra
   cessati» acceso i disdetti tornano visibili, in coda e SMORZATI — grigi, grado in scala di
   grigi — così si distinguono a colpo d'occhio dagli attivi pur restando cliccabili. Il badge
   «Cessato · data» riusa .badge.neutro del foglio globale; qui solo la riga, il segno e il
   divisore. Stili scoped alla pagina, colori dalle variabili di tema (chiaro/scuro), niente hex
   fissi come nel mockup. */

/* Riga cessata: smorzata come l'iscrizione scaduta del dettaglio (.spenta). Resta cliccabile. */
.soci tbody tr.cessato td[b-z6atxtmswz] { opacity: .55; }

/* Il segno del grado, se c'è, va in scala di grigi: è storia, non lo stato attuale. */
.soci tbody tr.cessato .segno[b-z6atxtmswz] { filter: grayscale(1); }

/* Divisore «Cessati»: una fascia tenue che stacca la coda dei cessati dagli attivi. Non è
   cliccabile (non apre un dettaglio), e il colspan copre tutte le colonne. */
.soci tbody tr.divi td[b-z6atxtmswz] {
    background: var(--page-tenue);
    padding: .35rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: default;
}

/* Il chip «Mostra cessati» è d'altra natura dalle pastiglie di anomalia (ricarica, non filtra in
   memoria): da acceso porta un tono NEUTRO invece dell'accento, così non si confonde con esse. */
.filtro .f.cessati.on[b-z6atxtmswz] {
    background: var(--page-tenue);
    border-color: var(--border);
    color: var(--muted);
}
.filtro .f.cessati.on .spunta[b-z6atxtmswz] { color: var(--muted); }

/* Icona «account collegato» (§«Elenco soci: icona account collegato»): un telefonino accanto al
   nome — in accento se il socio ha un account Budopass collegato, tenue (colore bordo) se no.
   È informativa: niente clic, non intercetta il clic-riga. Colori dai token, non cablati. */
.acc-tel[b-z6atxtmswz] { display:inline-flex; width:16px; height:16px; margin-left:.35rem; vertical-align:-3px; }
.acc-tel svg[b-z6atxtmswz] { width:16px; height:16px; }
.acc-tel.on[b-z6atxtmswz]  { color: var(--accent); }
.acc-tel.off[b-z6atxtmswz] { color: var(--border); }   /* muta = tenue, non un errore */