/* ==========================================================================
   BasicLibraryBlocks — blb.css
   Controlli base, solo HTML e CSS (JS in blb.js solo dove serve).

   Come si configura, dal piu' generale al piu' preciso:
   1. TEMA: le variabili --blb-* su :root (o su qualsiasi contenitore: valgono
      per tutto cio' che c'e' dentro). Scuro: data-blb-theme="dark" (o il
      data-theme="dark" del sito), automatico: data-blb-theme="auto".
   2. CONTROLLO: variabili del singolo controllo, es. --blb-btn-radius,
      --blb-card-bg, --blb-input-bg (elenco nel README), anche in style="".
   3. TONO e TAGLIA: classi blb-primary | blb-neutral | blb-success |
      blb-warning | blb-danger | blb-info e blb-sm | blb-lg. Valgono SOLO
      sull'elemento che le porta (proprieta' registrate non ereditate), cosi'
      un pulsante dentro un avviso rosso non diventa rosso.
   4. CLASSI tue: nessuna regola usa !important (tranne .blb-sr e il rispetto
      di prefers-reduced-motion), quindi basta una classe in piu'.

   Indice: 0 proprieta' · 1 tema · 2 base · 3 icone · 4 pulsanti · 5 campi ·
   6 scelte · 7 cursore e file · 8 avvisi e badge · 9 card · 10 modali ·
   11 schede e accordion · 12 menu e tooltip · 13 notifiche · 14 avanzamento ·
   15 avatar, percorso, pagine · 16 tabella · 17 divisori, vuoto, numeri,
   passi · 18 impaginazione · 19 toni e taglie · 20 movimento ridotto
   ========================================================================== */

/* 0. Proprieta' registrate: tono e taglia non passano ai figli --------------- */
@property --blb-tone { syntax: "*"; inherits: false; }
@property --blb-tone-ink { syntax: "*"; inherits: false; }
@property --blb-size { syntax: "*"; inherits: false; }

/* 1. Tema ------------------------------------------------------------------- */
:root,
[data-blb-theme="light"] {
    --blb-bg: #ffffff;
    --blb-bg-subtle: #f6f7f9;
    --blb-bg-muted: #eceef2;
    --blb-text: #17181c;
    --blb-text-muted: #5d6270;
    --blb-border: #dcdfe5;
    --blb-border-strong: #b8bdc8;

    --blb-accent: #3b5bfd;
    --blb-accent-ink: #ffffff;
    --blb-neutral: #4b5160;
    --blb-neutral-ink: #ffffff;
    --blb-success: #15803d;
    --blb-success-ink: #ffffff;
    --blb-warning: #b45309;
    --blb-warning-ink: #ffffff;
    --blb-danger: #dc2626;
    --blb-danger-ink: #ffffff;
    --blb-info: #0369a1;
    --blb-info-ink: #ffffff;

    --blb-tip-bg: #17181c;
    --blb-tip-fg: #ffffff;
    --blb-backdrop: rgb(15 17 22 / .5);

    --blb-fs: 1rem;
    --blb-control-h: 2.5rem;
    --blb-radius-sm: .375rem;
    --blb-radius: .5rem;
    --blb-radius-lg: .875rem;
    --blb-shadow-sm: 0 1px 2px rgb(16 24 40 / .06);
    --blb-shadow: 0 1px 3px rgb(16 24 40 / .08), 0 4px 12px rgb(16 24 40 / .06);
    --blb-shadow-lg: 0 12px 32px rgb(16 24 40 / .16), 0 2px 6px rgb(16 24 40 / .08);
    --blb-dur: .16s;
    --blb-ease: cubic-bezier(.2, .7, .3, 1);
    --blb-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --blb-z-dropdown: 1000;
    --blb-z-tooltip: 1070;
    --blb-z-toast: 1090;
}

[data-blb-theme="light"] { color-scheme: light; }

[data-theme="dark"],
[data-blb-theme="dark"] {
    --blb-bg: #16171b;
    --blb-bg-subtle: #1d1f24;
    --blb-bg-muted: #272a31;
    --blb-text: #ececf1;
    --blb-text-muted: #a3a8b5;
    --blb-border: #32353d;
    --blb-border-strong: #4a4e59;

    --blb-accent: #7c93ff;
    --blb-accent-ink: #0b0d14;
    --blb-neutral: #a0a6b3;
    --blb-neutral-ink: #111216;
    --blb-success: #4ade80;
    --blb-success-ink: #052e14;
    --blb-warning: #fbbf24;
    --blb-warning-ink: #261a02;
    --blb-danger: #f87171;
    --blb-danger-ink: #2b0606;
    --blb-info: #38bdf8;
    --blb-info-ink: #04202e;

    --blb-tip-bg: #ececf1;
    --blb-tip-fg: #16171b;
    --blb-backdrop: rgb(0 0 0 / .62);
    --blb-shadow: 0 1px 3px rgb(0 0 0 / .4), 0 6px 16px rgb(0 0 0 / .3);
    --blb-shadow-lg: 0 16px 40px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .35);
}

[data-blb-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
    [data-blb-theme="auto"] {
        color-scheme: dark;
        --blb-bg: #16171b;
        --blb-bg-subtle: #1d1f24;
        --blb-bg-muted: #272a31;
        --blb-text: #ececf1;
        --blb-text-muted: #a3a8b5;
        --blb-border: #32353d;
        --blb-border-strong: #4a4e59;
        --blb-accent: #7c93ff;
        --blb-accent-ink: #0b0d14;
        --blb-neutral: #a0a6b3;
        --blb-neutral-ink: #111216;
        --blb-success: #4ade80;
        --blb-success-ink: #052e14;
        --blb-warning: #fbbf24;
        --blb-warning-ink: #261a02;
        --blb-danger: #f87171;
        --blb-danger-ink: #2b0606;
        --blb-info: #38bdf8;
        --blb-info-ink: #04202e;
        --blb-tip-bg: #ececf1;
        --blb-tip-fg: #16171b;
        --blb-backdrop: rgb(0 0 0 / .62);
        --blb-shadow: 0 1px 3px rgb(0 0 0 / .4), 0 6px 16px rgb(0 0 0 / .3);
        --blb-shadow-lg: 0 16px 40px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .35);
    }
}

/* Un contenitore con il tema: sfondo e testo della libreria. */
.blb-surface {
    background: var(--blb-bg);
    color: var(--blb-text);
    font-family: var(--blb-font);
}

/* 2. Base ------------------------------------------------------------------- */
[class^="blb-"],
[class*=" blb-"],
[class^="blb-"]::before,
[class*=" blb-"]::before,
[class^="blb-"]::after,
[class*=" blb-"]::after {
    box-sizing: border-box;
}

/* Solo per i lettori di schermo. */
.blb-sr {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.blb-kbd {
    display: inline-block;
    padding: .1em .45em;
    font-family: var(--blb-mono);
    font-size: .8em;
    line-height: 1.4;
    color: var(--blb-text);
    background: var(--blb-bg-subtle);
    border: 1px solid var(--blb-border);
    border-bottom-width: 2px;
    border-radius: .3em;
}

@keyframes blb-spin { to { transform: rotate(1turn); } }
@keyframes blb-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes blb-fade-out { to { opacity: 0; transform: scale(.97); } }
@keyframes blb-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes blb-stripes { to { background-position: 1rem 0; } }
@keyframes blb-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes blb-toast-in { from { opacity: 0; transform: translateY(.75rem) scale(.98); } }

.is-leaving {
    animation: blb-fade-out .18s ease forwards;
    pointer-events: none;
}

/* 3. Icone ------------------------------------------------------------------
   SVG in variabili CSS (--blb-icon-NOME, si possono sostituire) usate come
   maschera: l'icona prende il colore del testo. Grandezza: --blb-icon-size. */
.blb-icon {
    display: inline-block;
    flex: none;
    inline-size: var(--blb-icon-size, 1.15em);
    block-size: var(--blb-icon-size, 1.15em);
    vertical-align: -.2em;
    background-color: currentColor;
    -webkit-mask: var(--blb-i) center / contain no-repeat;
    mask: var(--blb-i) center / contain no-repeat;
}

.blb-icon--tone { color: var(--blb-tone, currentColor); }

/* @icons:start */
/* 62 icone: check, x, plus, minus, chevron-down, chevron-up, chevron-left, chevron-right, arrow-left, arrow-right, arrow-up, arrow-down, trend-up, trend-down, search, info, success, warning, error, help, eye, eye-off, upload, download, copy, menu, more, more-vertical, user, users, settings, sliders, trash, edit, home, mail, phone, calendar, clock, external, link, heart, star, bell, lock, unlock, filter, refresh, sun, moon, file, folder, image, grip, logout, save, send, cart, globe, map-pin, code, dot */
:root {
    --blb-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --blb-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    --blb-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --blb-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    --blb-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --blb-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
    --blb-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
    --blb-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    --blb-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    --blb-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --blb-icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
    --blb-icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
    --blb-icon-trend-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-6 4 4 6-7M15 8h5v5'/%3E%3C/svg%3E");
    --blb-icon-trend-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7l6 6 4-4 6 7M15 16h5v-5'/%3E%3C/svg%3E");
    --blb-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
    --blb-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.01'/%3E%3C/svg%3E");
    --blb-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E");
    --blb-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17v.01'/%3E%3C/svg%3E");
    --blb-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
    --blb-icon-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 0 1 4.9.7c0 1.7-2.4 2.1-2.4 3.8M12 17v.01'/%3E%3C/svg%3E");
    --blb-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --blb-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A10.8 10.8 0 0 1 12 5c6.4 0 10 7 10 7a17.7 17.7 0 0 1-3.2 4.1M6.6 6.6C3.9 8.4 2 12 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
    --blb-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
    --blb-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
    --blb-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
    --blb-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
    --blb-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h.01M12 12h.01M19 12h.01' stroke-width='3'/%3E%3C/svg%3E");
    --blb-icon-more-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v.01M12 12v.01M12 19v.01' stroke-width='3'/%3E%3C/svg%3E");
    --blb-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
    --blb-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.5 2.9-5.5 6.5-5.5s6.5 2 6.5 5.5M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c2.1.6 3.5 2.4 3.5 5.2'/%3E%3C/svg%3E");
    --blb-icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E");
    --blb-icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
    --blb-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
    --blb-icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4'/%3E%3C/svg%3E");
    --blb-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 9.5V20h5v-6h4v6h5V9.5'/%3E%3C/svg%3E");
    --blb-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
    --blb-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
    --blb-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --blb-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --blb-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
    --blb-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E");
    --blb-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
    --blb-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E");
    --blb-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l2 2H4zM10 21h4'/%3E%3C/svg%3E");
    --blb-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
    --blb-icon-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7.7-1.5'/%3E%3C/svg%3E");
    --blb-icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 8v6l-4-2v-4z'/%3E%3C/svg%3E");
    --blb-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5'/%3E%3C/svg%3E");
    --blb-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
    --blb-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");
    --blb-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v13H6zM14 3v5h5'/%3E%3C/svg%3E");
    --blb-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    --blb-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-10 9'/%3E%3C/svg%3E");
    --blb-icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01' stroke-width='3'/%3E%3C/svg%3E");
    --blb-icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E");
    --blb-icon-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zM8 4v5h7V4M8 20v-6h8v6'/%3E%3C/svg%3E");
    --blb-icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E");
    --blb-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11h11l2.1-8H6.2'/%3E%3Ccircle cx='9' cy='19.5' r='1.5'/%3E%3Ccircle cx='17' cy='19.5' r='1.5'/%3E%3C/svg%3E");
    --blb-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
    --blb-icon-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --blb-icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/%3E%3C/svg%3E");
    --blb-icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E");
}
.blb-icon--check { --blb-i: var(--blb-icon-check); }
.blb-icon--x { --blb-i: var(--blb-icon-x); }
.blb-icon--plus { --blb-i: var(--blb-icon-plus); }
.blb-icon--minus { --blb-i: var(--blb-icon-minus); }
.blb-icon--chevron-down { --blb-i: var(--blb-icon-chevron-down); }
.blb-icon--chevron-up { --blb-i: var(--blb-icon-chevron-up); }
.blb-icon--chevron-left { --blb-i: var(--blb-icon-chevron-left); }
.blb-icon--chevron-right { --blb-i: var(--blb-icon-chevron-right); }
.blb-icon--arrow-left { --blb-i: var(--blb-icon-arrow-left); }
.blb-icon--arrow-right { --blb-i: var(--blb-icon-arrow-right); }
.blb-icon--arrow-up { --blb-i: var(--blb-icon-arrow-up); }
.blb-icon--arrow-down { --blb-i: var(--blb-icon-arrow-down); }
.blb-icon--trend-up { --blb-i: var(--blb-icon-trend-up); }
.blb-icon--trend-down { --blb-i: var(--blb-icon-trend-down); }
.blb-icon--search { --blb-i: var(--blb-icon-search); }
.blb-icon--info { --blb-i: var(--blb-icon-info); }
.blb-icon--success { --blb-i: var(--blb-icon-success); }
.blb-icon--warning { --blb-i: var(--blb-icon-warning); }
.blb-icon--error { --blb-i: var(--blb-icon-error); }
.blb-icon--help { --blb-i: var(--blb-icon-help); }
.blb-icon--eye { --blb-i: var(--blb-icon-eye); }
.blb-icon--eye-off { --blb-i: var(--blb-icon-eye-off); }
.blb-icon--upload { --blb-i: var(--blb-icon-upload); }
.blb-icon--download { --blb-i: var(--blb-icon-download); }
.blb-icon--copy { --blb-i: var(--blb-icon-copy); }
.blb-icon--menu { --blb-i: var(--blb-icon-menu); }
.blb-icon--more { --blb-i: var(--blb-icon-more); }
.blb-icon--more-vertical { --blb-i: var(--blb-icon-more-vertical); }
.blb-icon--user { --blb-i: var(--blb-icon-user); }
.blb-icon--users { --blb-i: var(--blb-icon-users); }
.blb-icon--settings { --blb-i: var(--blb-icon-settings); }
.blb-icon--sliders { --blb-i: var(--blb-icon-sliders); }
.blb-icon--trash { --blb-i: var(--blb-icon-trash); }
.blb-icon--edit { --blb-i: var(--blb-icon-edit); }
.blb-icon--home { --blb-i: var(--blb-icon-home); }
.blb-icon--mail { --blb-i: var(--blb-icon-mail); }
.blb-icon--phone { --blb-i: var(--blb-icon-phone); }
.blb-icon--calendar { --blb-i: var(--blb-icon-calendar); }
.blb-icon--clock { --blb-i: var(--blb-icon-clock); }
.blb-icon--external { --blb-i: var(--blb-icon-external); }
.blb-icon--link { --blb-i: var(--blb-icon-link); }
.blb-icon--heart { --blb-i: var(--blb-icon-heart); }
.blb-icon--star { --blb-i: var(--blb-icon-star); }
.blb-icon--bell { --blb-i: var(--blb-icon-bell); }
.blb-icon--lock { --blb-i: var(--blb-icon-lock); }
.blb-icon--unlock { --blb-i: var(--blb-icon-unlock); }
.blb-icon--filter { --blb-i: var(--blb-icon-filter); }
.blb-icon--refresh { --blb-i: var(--blb-icon-refresh); }
.blb-icon--sun { --blb-i: var(--blb-icon-sun); }
.blb-icon--moon { --blb-i: var(--blb-icon-moon); }
.blb-icon--file { --blb-i: var(--blb-icon-file); }
.blb-icon--folder { --blb-i: var(--blb-icon-folder); }
.blb-icon--image { --blb-i: var(--blb-icon-image); }
.blb-icon--grip { --blb-i: var(--blb-icon-grip); }
.blb-icon--logout { --blb-i: var(--blb-icon-logout); }
.blb-icon--save { --blb-i: var(--blb-icon-save); }
.blb-icon--send { --blb-i: var(--blb-icon-send); }
.blb-icon--cart { --blb-i: var(--blb-icon-cart); }
.blb-icon--globe { --blb-i: var(--blb-icon-globe); }
.blb-icon--map-pin { --blb-i: var(--blb-icon-map-pin); }
.blb-icon--code { --blb-i: var(--blb-icon-code); }
.blb-icon--dot { --blb-i: var(--blb-icon-dot); }
/* @icons:end */

/* Pulsante "chiudi" con la crocetta (avvisi, modali, notifiche). */
.blb-close {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    margin: -.375rem -.375rem -.375rem 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--blb-radius-sm);
    opacity: .65;
    cursor: pointer;
    transition: opacity var(--blb-dur), background-color var(--blb-dur);
}

.blb-close::before {
    content: "";
    inline-size: 1rem;
    block-size: 1rem;
    background: currentColor;
    -webkit-mask: var(--blb-icon-x) center / contain no-repeat;
    mask: var(--blb-icon-x) center / contain no-repeat;
}

.blb-close:hover {
    opacity: 1;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.blb-close:focus-visible {
    opacity: 1;
    outline: 2px solid var(--blb-accent);
    outline-offset: 1px;
}

/* 4. Pulsanti ----------------------------------------------------------------
   Variabili: --blb-btn-radius, --blb-btn-weight, --blb-btn-px (padding laterale). */
.blb-btn {
    --_k: var(--blb-size, 1);
    --_c: var(--blb-tone, var(--blb-accent));
    --_ink: var(--blb-tone-ink, var(--blb-accent-ink));
    --_bg: var(--_c);
    --_fg: var(--_ink);
    --_bd: var(--_c);
    --_bg-h: color-mix(in srgb, var(--_c) 86%, black);
    --_bd-h: var(--_bg-h);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-block-size: calc(var(--blb-control-h) * var(--_k));
    margin: 0;
    padding: .375em calc(var(--blb-btn-px, 1rem) * var(--_k));
    font-family: var(--blb-font);
    font-size: calc(var(--blb-fs) * .9375 * var(--_k));
    font-weight: var(--blb-btn-weight, 600);
    line-height: 1.2;
    color: var(--_fg);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--_bg);
    border: 1px solid var(--_bd);
    border-radius: var(--blb-btn-radius, var(--blb-radius));
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--blb-dur), border-color var(--blb-dur), color var(--blb-dur), box-shadow var(--blb-dur), transform .08s;
}

.blb-btn:hover {
    color: var(--_fg);
    text-decoration: none;
    background: var(--_bg-h);
    border-color: var(--_bd-h);
}

.blb-btn:active { transform: translateY(1px); }

.blb-btn:focus-visible {
    color: var(--_fg);
    outline: 2px solid var(--_c);
    outline-offset: 2px;
}

.blb-btn--soft {
    --_bg: color-mix(in srgb, var(--_c) 14%, transparent);
    --_fg: color-mix(in srgb, var(--_c) 82%, var(--blb-text));
    --_bd: transparent;
    --_bg-h: color-mix(in srgb, var(--_c) 22%, transparent);
    --_bd-h: transparent;
}

.blb-btn--outline {
    --_bg: transparent;
    --_fg: color-mix(in srgb, var(--_c) 85%, var(--blb-text));
    --_bd: color-mix(in srgb, var(--_c) 60%, transparent);
    --_bg-h: color-mix(in srgb, var(--_c) 10%, transparent);
    --_bd-h: var(--_c);
}

.blb-btn--ghost {
    --_bg: transparent;
    --_fg: color-mix(in srgb, var(--_c) 85%, var(--blb-text));
    --_bd: transparent;
    --_bg-h: color-mix(in srgb, var(--_c) 12%, transparent);
    --_bd-h: transparent;
}

.blb-btn--link {
    --_bg: transparent;
    --_fg: var(--_c);
    --_bd: transparent;
    --_bg-h: transparent;
    --_bd-h: transparent;
    min-block-size: auto;
    padding-inline: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.blb-btn--link:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Il "secondario": superficie neutra con bordo; il tono colora solo il testo. */
.blb-btn--surface {
    --_bg: var(--blb-bg);
    --_fg: var(--blb-tone, var(--blb-text));
    --_bd: var(--blb-border-strong);
    --_bg-h: var(--blb-bg-subtle);
    --_bd-h: var(--blb-border-strong);
    box-shadow: var(--blb-shadow-sm);
}

.blb-btn--surface:focus-visible { outline-color: var(--blb-accent); }

.blb-btn--icon {
    inline-size: calc(var(--blb-control-h) * var(--_k));
    padding: 0;
}

.blb-btn--icon > .blb-icon { --blb-icon-size: 1.2em; }

.blb-btn:disabled,
.blb-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.blb-btn--loading {
    color: transparent;
    pointer-events: none;
}

.blb-btn--loading:hover { color: transparent; }

.blb-btn--loading::after {
    content: "";
    position: absolute;
    inset: 0;
    inline-size: 1.15em;
    block-size: 1.15em;
    margin: auto;
    border: 2px solid var(--_fg);
    border-right-color: transparent;
    border-radius: 50%;
    animation: blb-spin .7s linear infinite;
}

.blb-btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    vertical-align: middle;
}

.blb-btn-group > .blb-btn { box-shadow: none; }
.blb-btn-group > .blb-btn:hover,
.blb-btn-group > .blb-btn:focus-visible { z-index: 1; }
.blb-btn-group > .blb-btn + .blb-btn { margin-inline-start: -1px; }

.blb-btn-group > .blb-btn:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.blb-btn-group > .blb-btn:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* 5. Campi -------------------------------------------------------------------
   Variabili: --blb-input-bg, --blb-input-border, --blb-input-radius,
   --blb-textarea-max (altezza massima con autosize). */
.blb-field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-inline-size: 0;
    margin: 0;
}

.blb-label {
    display: block;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--blb-text);
}

.blb-label__req {
    margin-inline-start: .15em;
    color: var(--blb-danger);
}

.blb-field__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.blb-field__foot {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.blb-field__msgs {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .25rem;
    min-inline-size: 0;
}

.blb-hint,
.blb-error {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.4;
}

.blb-hint { color: var(--blb-text-muted); }

.blb-error {
    display: flex;
    align-items: flex-start;
    gap: .35em;
    color: var(--blb-danger);
}

.blb-error > .blb-icon { margin-top: .05em; }

.blb-counter {
    flex: none;
    margin-inline-start: auto;
    font-size: .75rem;
    color: var(--blb-text-muted);
    font-variant-numeric: tabular-nums;
}

.blb-counter.is-full { color: var(--blb-danger); }

.blb-input,
.blb-textarea,
.blb-select {
    --_k: var(--blb-size, 1);
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: calc(var(--blb-control-h) * var(--_k));
    margin: 0;
    padding: calc(.5rem * var(--_k)) calc(.75rem * var(--_k));
    font-family: var(--blb-font);
    font-size: calc(var(--blb-fs) * var(--_k));
    line-height: 1.4;
    color: var(--blb-text);
    background: var(--blb-input-bg, var(--blb-bg));
    border: 1px solid var(--blb-input-border, var(--blb-border-strong));
    border-radius: var(--blb-input-radius, var(--blb-radius));
    box-shadow: none;
    appearance: none;
    transition: border-color var(--blb-dur), box-shadow var(--blb-dur), background-color var(--blb-dur);
}

.blb-input::placeholder,
.blb-textarea::placeholder {
    color: var(--blb-text-muted);
    opacity: .85;
}

.blb-input:hover:not(:disabled, :focus),
.blb-textarea:hover:not(:disabled, :focus),
.blb-select:hover:not(:disabled, :focus) {
    border-color: color-mix(in srgb, var(--blb-text) 45%, var(--blb-border-strong));
}

.blb-input:focus,
.blb-textarea:focus,
.blb-select:focus {
    color: var(--blb-text);
    background: var(--blb-input-bg, var(--blb-bg));
    border-color: var(--blb-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blb-accent) 28%, transparent);
}

.blb-input[aria-invalid="true"],
.blb-textarea[aria-invalid="true"],
.blb-select[aria-invalid="true"] {
    border-color: var(--blb-danger);
}

.blb-input[aria-invalid="true"]:focus,
.blb-textarea[aria-invalid="true"]:focus,
.blb-select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blb-danger) 25%, transparent);
}

.blb-input:disabled,
.blb-textarea:disabled,
.blb-select:disabled {
    color: var(--blb-text-muted);
    background: var(--blb-bg-muted);
    border-color: var(--blb-border);
    cursor: not-allowed;
}

.blb-input[readonly],
.blb-textarea[readonly] { background: var(--blb-bg-subtle); }

.blb-input[type="color"] {
    inline-size: calc(var(--blb-control-h) * 1.6);
    padding: .25rem;
    cursor: pointer;
}

.blb-input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.blb-textarea {
    min-block-size: calc(5.5rem * var(--_k));
    resize: vertical;
}

.blb-textarea--fixed { resize: none; }

.blb-textarea[data-blb-autosize] {
    field-sizing: content;
    max-block-size: var(--blb-textarea-max, 20rem);
    resize: none;
    overflow-y: auto;
}

/* Icona dentro il campo e pulsante in fondo (mostra password). */
/* flex: niente riga vuota creata dagli spazi accanto all'icona posizionata. */
.blb-input-wrap {
    position: relative;
    display: flex;
    min-inline-size: 0;
}

.blb-input-wrap > .blb-input { flex: 1 1 auto; }

.blb-input-wrap__start {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: .75rem;
    color: var(--blb-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.blb-input-wrap:has(> .blb-input-wrap__start) > .blb-input { padding-inline-start: 2.35rem; }
.blb-input-wrap:has(> .blb-input-wrap__end) > .blb-input { padding-inline-end: 2.75rem; }

.blb-input-wrap__end {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    margin: 0;
    padding: 0;
    color: var(--blb-text-muted);
    background: transparent;
    border: 0;
    border-radius: 0 var(--blb-radius) var(--blb-radius) 0;
    cursor: pointer;
}

.blb-input-wrap__end:hover { color: var(--blb-text); }

.blb-input-wrap__end:focus-visible {
    outline: 2px solid var(--blb-accent);
    outline-offset: -4px;
}

/* Prefisso/suffisso attaccati al campo. */
.blb-input-group {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
}

.blb-input-group > .blb-input,
.blb-input-group > .blb-input-wrap { flex: 1 1 auto; min-inline-size: 0; }

.blb-input-group__addon {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    font-size: .9375rem;
    color: var(--blb-text-muted);
    white-space: nowrap;
    background: var(--blb-bg-subtle);
    border: 1px solid var(--blb-input-border, var(--blb-border-strong));
    border-radius: var(--blb-input-radius, var(--blb-radius));
}

.blb-input-group > * + * { margin-inline-start: -1px; }
.blb-input-group > .blb-input:focus,
.blb-input-group > .blb-input-wrap:focus-within { z-index: 1; }

.blb-input-group > :not(:first-child),
.blb-input-group > :not(:first-child) > .blb-input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.blb-input-group > :not(:last-child),
.blb-input-group > :not(:last-child) > .blb-input {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* Select nativa con la freccia della libreria. */
.blb-select-wrap {
    position: relative;
    display: block;
    min-inline-size: 0;
}

.blb-select {
    padding-inline-end: 2.25rem;
    cursor: pointer;
    background-image: none;
}

.blb-select[multiple] {
    padding-inline-end: .75rem;
    cursor: default;
}

.blb-select-wrap::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: .75rem;
    inline-size: 1rem;
    block-size: 1rem;
    background: var(--blb-text-muted);
    -webkit-mask: var(--blb-icon-chevron-down) center / contain no-repeat;
    mask: var(--blb-icon-chevron-down) center / contain no-repeat;
    pointer-events: none;
    transform: translateY(-50%);
}

.blb-select-wrap--multiple::after,
.blb-select-wrap:has(> [multiple])::after { display: none; }

.blb-select option { color: var(--blb-text); background: var(--blb-bg); }

/* 6. Caselle, radio, interruttori, scelte ---------------------------------- */
.blb-check,
.blb-switch {
    display: inline-flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    font-size: var(--blb-fs);
    line-height: 1.4;
    color: var(--blb-text);
    cursor: pointer;
}

.blb-check:has(:disabled),
.blb-switch:has(:disabled) {
    cursor: not-allowed;
    opacity: .55;
}

.blb-check__text {
    display: block;
    min-inline-size: 0;
}

.blb-check__text > .blb-icon { margin-inline-end: .35em; }

.blb-check--card .blb-check__text > .blb-icon {
    display: block;
    margin-block-end: .4rem;
}

.blb-check__hint {
    display: block;
    margin-top: .1rem;
    font-size: .8125rem;
    color: var(--blb-text-muted);
}

.blb-check__input,
.blb-switch__input {
    --_c: var(--blb-tone, var(--blb-accent));
    --_ink: var(--blb-tone-ink, var(--blb-accent-ink));
    flex: none;
    margin: .1em 0 0;
    cursor: inherit;
    appearance: none;
    transition: background-color var(--blb-dur), border-color var(--blb-dur), box-shadow var(--blb-dur);
}

.blb-check__input {
    display: inline-grid;
    place-content: center;
    inline-size: 1.15em;
    block-size: 1.15em;
    background: var(--blb-bg);
    border: 1.5px solid var(--blb-border-strong);
    border-radius: .3em;
}

.blb-check__input::before {
    content: "";
    inline-size: .8em;
    block-size: .8em;
    background: var(--_ink);
    -webkit-mask: var(--blb-icon-check) center / contain no-repeat;
    mask: var(--blb-icon-check) center / contain no-repeat;
    transform: scale(0);
    transition: transform .12s var(--blb-ease);
}

.blb-check__input:checked,
.blb-check__input:indeterminate {
    background: var(--_c);
    border-color: var(--_c);
}

.blb-check__input:checked::before { transform: scale(1); }

.blb-check__input:indeterminate::before {
    -webkit-mask-image: var(--blb-icon-minus);
    mask-image: var(--blb-icon-minus);
    transform: scale(1);
}

.blb-check__input[type="radio"] { border-radius: 50%; }

.blb-check__input[type="radio"]::before {
    inline-size: .45em;
    block-size: .45em;
    border-radius: 50%;
    -webkit-mask: none;
    mask: none;
}

.blb-check__input:hover:not(:checked, :disabled) { border-color: var(--_c); }

.blb-check__input:focus-visible,
.blb-switch__input:focus-visible {
    outline: 2px solid var(--_c);
    outline-offset: 2px;
}

.blb-check__input[aria-invalid="true"],
.blb-field--invalid .blb-check__input { border-color: var(--blb-danger); }

.blb-switch__input {
    position: relative;
    inline-size: 2.25em;
    block-size: 1.3em;
    margin-top: .05em;
    background: var(--blb-border-strong);
    border: 0;
    border-radius: 999px;
}

.blb-switch__input::before {
    content: "";
    position: absolute;
    inset-block-start: .15em;
    inset-inline-start: .15em;
    inline-size: 1em;
    block-size: 1em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgb(0 0 0 / .25);
    transition: transform .18s var(--blb-ease);
}

.blb-switch__input:checked { background: var(--_c); }
.blb-switch__input:checked::before { transform: translateX(.95em); }

.blb-field--check { gap: .25rem; }
.blb-field--check > .blb-field__foot { padding-inline-start: 1.8em; }

fieldset.blb-choices {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.blb-choices > legend {
    float: none;
    inline-size: auto;
    margin: 0 0 .5rem;
    padding: 0;
    font-size: .875rem;
    line-height: 1.35;
}

.blb-choices__list {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.blb-choices--inline .blb-choices__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .625rem 1.5rem;
}

.blb-choices--cards .blb-choices__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--blb-choice-min, 12rem), 100%), 1fr));
    gap: .75rem;
}

.blb-check--card {
    position: relative;
    padding: .875rem 1rem;
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius);
    transition: border-color var(--blb-dur), background-color var(--blb-dur), box-shadow var(--blb-dur);
}

.blb-check--card:hover { border-color: var(--blb-border-strong); }

.blb-check--card:has(:checked) {
    background: color-mix(in srgb, var(--blb-accent) 7%, var(--blb-bg));
    border-color: var(--blb-accent);
    box-shadow: 0 0 0 1px var(--blb-accent);
}

/* Barra a segmenti: le radio sono invisibili ma restano focalizzabili. */
.blb-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    max-inline-size: 100%;
    padding: .25rem;
    background: var(--blb-bg-muted);
    border-radius: var(--blb-radius);
}

.blb-segmented__item {
    position: relative;
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 0;
    padding: .4rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--blb-text-muted);
    white-space: nowrap;
    border-radius: calc(var(--blb-radius) - .125rem);
    cursor: pointer;
    transition: color var(--blb-dur), background-color var(--blb-dur), box-shadow var(--blb-dur);
}

.blb-segmented__input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.blb-segmented__item:hover { color: var(--blb-text); }

.blb-segmented__item:has(:checked) {
    color: var(--blb-text);
    background: var(--blb-bg);
    box-shadow: var(--blb-shadow-sm), 0 0 0 1px var(--blb-border);
}

.blb-segmented__item:has(:focus-visible) {
    outline: 2px solid var(--blb-accent);
    outline-offset: 1px;
}

.blb-segmented__item:has(:disabled) {
    opacity: .5;
    cursor: not-allowed;
}

/* 7. Cursore e caricamento file ---------------------------------------------- */
.blb-range {
    --_c: var(--blb-tone, var(--blb-accent));
    --_track: color-mix(in srgb, var(--blb-text) 14%, transparent);
    display: block;
    inline-size: 100%;
    block-size: 1.5rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
}

.blb-range::-webkit-slider-runnable-track {
    block-size: .375rem;
    background: linear-gradient(to right, var(--_c) var(--blb-range-p, 50%), var(--_track) var(--blb-range-p, 50%));
    border-radius: 999px;
}

.blb-range::-moz-range-track {
    block-size: .375rem;
    background: var(--_track);
    border-radius: 999px;
}

.blb-range::-moz-range-progress {
    block-size: .375rem;
    background: var(--_c);
    border-radius: 999px;
}

.blb-range::-webkit-slider-thumb {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-top: -.3875rem;
    background: var(--blb-bg);
    border: 2px solid var(--_c);
    border-radius: 50%;
    box-shadow: var(--blb-shadow-sm);
    appearance: none;
    transition: transform .12s;
}

.blb-range::-moz-range-thumb {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    background: var(--blb-bg);
    border: 2px solid var(--_c);
    border-radius: 50%;
    box-shadow: var(--blb-shadow-sm);
}

.blb-range:active::-webkit-slider-thumb { transform: scale(1.12); }

.blb-range:focus-visible { outline: none; }

.blb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c) 30%, transparent); }
.blb-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c) 30%, transparent); }

.blb-range:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.blb-range-value {
    font-size: .875rem;
    font-weight: 600;
    color: var(--blb-text);
    font-variant-numeric: tabular-nums;
}

.blb-file {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-block-size: 8rem;
    padding: 1.5rem 1rem;
    color: var(--blb-text-muted);
    text-align: center;
    background: var(--blb-bg-subtle);
    border: 1.5px dashed var(--blb-border-strong);
    border-radius: var(--blb-radius-lg);
    transition: border-color var(--blb-dur), background-color var(--blb-dur);
}

/* L'input copre tutta l'area: clic e trascinamento funzionano senza JS. */
.blb-file__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.blb-file:hover,
.blb-file.is-dragging {
    background: color-mix(in srgb, var(--blb-accent) 6%, var(--blb-bg-subtle));
    border-color: var(--blb-accent);
}

.blb-file:has(.blb-file__input:focus-visible) {
    outline: 2px solid var(--blb-accent);
    outline-offset: 2px;
}

.blb-file:has(.blb-file__input:disabled) { opacity: .55; }

.blb-file__icon {
    --blb-icon-size: 1.75rem;
    color: var(--blb-accent);
}

.blb-file__text {
    max-inline-size: 32ch;
    font-size: .9375rem;
}

.blb-file__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blb-file__list:empty { display: none; }

.blb-file__list > li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-inline-size: 100%;
    padding: .2rem .55rem;
    font-size: .8125rem;
    color: var(--blb-text);
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: 999px;
}

.blb-file__list small { color: var(--blb-text-muted); }

/* 8. Avvisi e badge --------------------------------------------------------- */
.blb-alert {
    --_c: var(--blb-tone, var(--blb-info));
    --_ink: var(--blb-tone-ink, var(--blb-info-ink));
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--blb-text);
    background: color-mix(in srgb, var(--_c) 9%, var(--blb-bg));
    border: 1px solid color-mix(in srgb, var(--_c) 32%, transparent);
    border-radius: var(--blb-alert-radius, var(--blb-radius));
}

.blb-alert > .blb-icon {
    --blb-icon-size: 1.25rem;
    margin-top: .1rem;
    color: var(--_c);
}

.blb-alert__body {
    flex: 1;
    min-inline-size: 0;
}

.blb-alert__body > :first-child { margin-top: 0; }
.blb-alert__body > :last-child { margin-bottom: 0; }

.blb-alert__title {
    margin: 0 0 .125rem;
    font-weight: 700;
}

.blb-alert__text { margin: 0; }

.blb-alert__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.blb-alert--solid {
    color: var(--_ink);
    background: var(--_c);
    border-color: var(--_c);
}

.blb-alert--solid > .blb-icon { color: inherit; }

.blb-alert--outline {
    background: transparent;
    border-color: var(--_c);
}

.blb-alert--accent {
    background: var(--blb-bg-subtle);
    border-color: var(--blb-border);
    border-inline-start: 4px solid var(--_c);
    border-radius: var(--blb-radius-sm);
}

.blb-badge {
    --_k: var(--blb-size, 1);
    --_c: var(--blb-tone, var(--blb-neutral));
    --_ink: var(--blb-tone-ink, var(--blb-neutral-ink));
    display: inline-flex;
    align-items: center;
    gap: .3em;
    max-inline-size: 100%;
    padding: .15em .55em;
    font-size: calc(.75rem * var(--_k));
    font-weight: 600;
    line-height: 1.4;
    color: color-mix(in srgb, var(--_c) 80%, var(--blb-text));
    white-space: nowrap;
    vertical-align: middle;
    background: color-mix(in srgb, var(--_c) 15%, transparent);
    border: 1px solid transparent;
    border-radius: var(--blb-badge-radius, var(--blb-radius-sm));
}

.blb-badge--solid {
    color: var(--_ink);
    background: var(--_c);
}

.blb-badge--outline {
    background: transparent;
    border-color: color-mix(in srgb, var(--_c) 55%, transparent);
}

.blb-badge__dot {
    inline-size: .5em;
    block-size: .5em;
    background: var(--_c);
    border-radius: 50%;
}

.blb-badge--solid > .blb-badge__dot { background: currentColor; }

.blb-badge__remove {
    display: inline-grid;
    place-items: center;
    margin: 0 -.25em 0 0;
    padding: .1em;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: .25em;
    opacity: .7;
    cursor: pointer;
}

.blb-badge__remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.blb-badge__remove:focus-visible { opacity: 1; outline: 2px solid currentColor; }
.blb-badge__remove > .blb-icon { --blb-icon-size: .9em; }

/* 9. Card -------------------------------------------------------------------
   Variabili: --blb-card-bg, --blb-card-radius, --blb-card-pad, --blb-card-ratio (immagine). */
.blb-card {
    --_pad: var(--blb-card-pad, 1.25rem);
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--blb-text);
    background: var(--blb-card-bg, var(--blb-bg));
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-card-radius, var(--blb-radius-lg));
    transition: border-color var(--blb-dur), box-shadow var(--blb-dur), transform var(--blb-dur);
}

.blb-card--elevated {
    border-color: transparent;
    box-shadow: var(--blb-shadow);
}

.blb-card--flat {
    background: var(--blb-card-bg, var(--blb-bg-subtle));
    border-color: transparent;
}

.blb-card__media {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--blb-card-ratio, 16 / 9);
    object-fit: cover;
    background: var(--blb-bg-muted);
}

.blb-card__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.blb-card__header {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: var(--_pad) var(--_pad) 0;
}

.blb-card__heading {
    flex: 1;
    min-inline-size: 0;
}

.blb-card__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.blb-card__subtitle {
    margin: .2rem 0 0;
    font-size: .875rem;
    color: var(--blb-text-muted);
}

.blb-card__body {
    flex: 1;
    padding: var(--_pad);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--blb-text-muted);
}

.blb-card__header + .blb-card__body { padding-top: .75rem; }
.blb-card__body > :first-child { margin-top: 0; }
.blb-card__body > :last-child { margin-bottom: 0; }

.blb-card__header:last-child { padding-bottom: var(--_pad); }

.blb-card__footer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding: .875rem var(--_pad);
    background: var(--blb-bg-subtle);
    border-top: 1px solid var(--blb-border);
}

.blb-card__header + .blb-card__footer { margin-top: var(--_pad); }

.blb-card__link {
    color: inherit;
    text-decoration: none;
}

.blb-card__link:hover { color: inherit; }

.blb-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blb-card--link:hover {
    border-color: var(--blb-border-strong);
    box-shadow: var(--blb-shadow);
    transform: translateY(-2px);
}

.blb-card--link:has(.blb-card__link:focus-visible) {
    outline: 2px solid var(--blb-accent);
    outline-offset: 2px;
}

.blb-card__link:focus-visible { outline: none; }

.blb-card--horizontal { flex-direction: row; }

.blb-card--horizontal > .blb-card__media {
    flex: 0 0 var(--blb-card-media-w, 38%);
    inline-size: var(--blb-card-media-w, 38%);
    block-size: auto;
    aspect-ratio: auto;
}

@media (max-width: 575.98px) {
    .blb-card--horizontal { flex-direction: column; }

    .blb-card--horizontal > .blb-card__media {
        flex: none;
        inline-size: 100%;
        aspect-ratio: var(--blb-card-ratio, 16 / 9);
    }
}

/* 10. Modali e pannelli (su <dialog>) --------------------------------------
   Variabili: --blb-modal-w (larghezza), --blb-modal-radius. Il fondo pagina
   non scorre mentre un modale e' aperto. */
html:has(dialog.blb-modal[open]) { overflow: hidden; }

.blb-modal {
    --_w: var(--blb-modal-w, 32rem);
    inline-size: min(var(--_w), 100% - 1.5rem);
    max-inline-size: none;
    max-block-size: min(90dvh, 100% - 1.5rem);
    padding: 0;
    color: var(--blb-text);
    background: var(--blb-bg);
    border: 0;
    border-radius: var(--blb-modal-radius, var(--blb-radius-lg));
    box-shadow: var(--blb-shadow-lg);
    opacity: 0;
    transform: translateY(.75rem) scale(.98);
    transition: opacity .2s var(--blb-ease), transform .2s var(--blb-ease), overlay .2s allow-discrete, display .2s allow-discrete;
}

.blb-modal[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: none;
}

@starting-style {
    .blb-modal[open] {
        opacity: 0;
        transform: translateY(.75rem) scale(.98);
    }
}

.blb-modal::backdrop {
    background: var(--blb-backdrop);
    backdrop-filter: blur(2px);
}

.blb-modal--sm { --_w: var(--blb-modal-w, 24rem); }
.blb-modal--lg { --_w: var(--blb-modal-w, 48rem); }
.blb-modal--xl { --_w: var(--blb-modal-w, 72rem); }

.blb-modal--full {
    inline-size: 100%;
    max-block-size: 100%;
    block-size: 100%;
    margin: 0;
    border-radius: 0;
}

.blb-modal__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--blb-border);
}

.blb-modal__title {
    flex: 1;
    min-inline-size: 0;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.blb-modal__header > .blb-close { margin-inline-start: auto; }

.blb-modal__body {
    flex: 1;
    min-block-size: 0;
    padding: 1.25rem;
    overflow-y: auto;
    line-height: 1.55;
    overscroll-behavior: contain;
}

.blb-modal__body > :first-child { margin-top: 0; }
.blb-modal__body > :last-child { margin-bottom: 0; }

.blb-modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    padding: .875rem 1.25rem;
    background: var(--blb-bg-subtle);
    border-top: 1px solid var(--blb-border);
}

/* Pannelli laterali e dal basso. */
.blb-modal--start,
.blb-modal--end {
    --_w: var(--blb-modal-w, 24rem);
    inline-size: min(var(--_w), 100% - 3rem);
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    border-radius: 0;
}

.blb-modal--end { margin-inline-start: auto; transform: translateX(100%); }
.blb-modal--start { margin-inline-end: auto; transform: translateX(-100%); }

.blb-modal--bottom {
    inline-size: 100%;
    max-inline-size: var(--blb-modal-w, 100%);
    max-block-size: 85dvh;
    margin: auto auto 0;
    border-radius: var(--blb-modal-radius, var(--blb-radius-lg)) var(--blb-modal-radius, var(--blb-radius-lg)) 0 0;
    transform: translateY(100%);
}

.blb-modal--start[open],
.blb-modal--end[open],
.blb-modal--bottom[open] { transform: none; }

@starting-style {
    .blb-modal--end[open] { transform: translateX(100%); }
    .blb-modal--start[open] { transform: translateX(-100%); }
    .blb-modal--bottom[open] { transform: translateY(100%); }
}

@media (max-width: 575.98px) {
    .blb-modal__footer > .blb-btn { flex: 1 1 auto; }
}

/* 11. Schede e accordion ---------------------------------------------------- */
.blb-tabs {
    --_c: var(--blb-tone, var(--blb-accent));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
}

.blb-tabs__list {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--blb-border);
    scrollbar-width: none;
}

.blb-tabs__list::-webkit-scrollbar { display: none; }

.blb-tabs__tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .45rem;
    margin: 0 0 -1px;
    padding: .625rem .875rem;
    font-family: var(--blb-font);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--blb-text-muted);
    white-space: nowrap;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--blb-radius-sm) var(--blb-radius-sm) 0 0;
    cursor: pointer;
    transition: color var(--blb-dur), border-color var(--blb-dur), background-color var(--blb-dur);
}

.blb-tabs__tab:hover { color: var(--blb-text); }

.blb-tabs__tab[aria-selected="true"] {
    color: var(--_c);
    border-bottom-color: var(--_c);
}

.blb-tabs__tab:focus-visible {
    outline: 2px solid var(--_c);
    outline-offset: -2px;
}

.blb-tabs__tab:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.blb-tabs__panel { min-inline-size: 0; }

.blb-tabs__panel:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--_c) 50%, transparent);
    outline-offset: 4px;
    border-radius: var(--blb-radius-sm);
}

.blb-tabs__panel > :first-child { margin-top: 0; }
.blb-tabs__panel > :last-child { margin-bottom: 0; }

.blb-tabs--pills .blb-tabs__list {
    gap: .25rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    padding: .25rem;
    background: var(--blb-bg-muted);
    border: 0;
    border-radius: var(--blb-radius);
}

.blb-tabs--pills .blb-tabs__tab {
    margin: 0;
    padding: .45rem .875rem;
    border: 0;
    border-radius: calc(var(--blb-radius) - .125rem);
}

.blb-tabs--pills .blb-tabs__tab[aria-selected="true"] {
    color: var(--blb-text);
    background: var(--blb-bg);
    box-shadow: var(--blb-shadow-sm), 0 0 0 1px var(--blb-border);
}

.blb-tabs--stretch .blb-tabs__list { inline-size: 100%; }
.blb-tabs--stretch .blb-tabs__tab { flex: 1 1 0; justify-content: center; }

.blb-accordion {
    interpolate-size: allow-keywords;
    overflow: hidden;
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius-lg);
}

.blb-accordion__item + .blb-accordion__item { border-top: 1px solid var(--blb-border); }

.blb-accordion__summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--blb-text);
    list-style: none;
    cursor: pointer;
    transition: background-color var(--blb-dur);
}

.blb-accordion__summary::-webkit-details-marker { display: none; }

.blb-accordion__summary::after {
    content: "";
    flex: none;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin-inline-start: auto;
    background: var(--blb-text-muted);
    -webkit-mask: var(--blb-icon-chevron-down) center / contain no-repeat;
    mask: var(--blb-icon-chevron-down) center / contain no-repeat;
    transition: transform .2s var(--blb-ease);
}

.blb-accordion__item[open] > .blb-accordion__summary::after { transform: rotate(180deg); }

.blb-accordion__summary:hover { background: var(--blb-bg-subtle); }

.blb-accordion__summary:focus-visible {
    outline: 2px solid var(--blb-accent);
    outline-offset: -2px;
}

.blb-accordion__title { flex: 1; min-inline-size: 0; }

.blb-accordion__content {
    padding: 0 1.25rem 1.125rem;
    line-height: 1.6;
    color: var(--blb-text-muted);
}

.blb-accordion__content > :first-child { margin-top: 0; }
.blb-accordion__content > :last-child { margin-bottom: 0; }

.blb-accordion__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .25s var(--blb-ease), content-visibility .25s allow-discrete;
}

.blb-accordion__item[open]::details-content { block-size: auto; }

.blb-accordion--flush {
    background: transparent;
    border-width: 1px 0;
    border-radius: 0;
}

.blb-accordion--flush .blb-accordion__summary,
.blb-accordion--flush .blb-accordion__content { padding-inline: 0; }

.blb-accordion--separated {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    overflow: visible;
    background: transparent;
    border: 0;
}

.blb-accordion--separated .blb-accordion__item {
    overflow: hidden;
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius);
}

.blb-accordion--separated .blb-accordion__item + .blb-accordion__item { border-top: 1px solid var(--blb-border); }

/* 12. Menu a tendina e tooltip --------------------------------------------- */
.blb-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.blb-dropdown__menu {
    position: absolute;
    inset-block-start: calc(100% + .375rem);
    inset-inline-start: 0;
    z-index: var(--blb-z-dropdown);
    display: none;
    min-inline-size: var(--blb-menu-w, 12rem);
    max-inline-size: min(20rem, calc(100vw - 1.5rem));
    max-block-size: min(24rem, 70vh);
    padding: .375rem;
    overflow-y: auto;
    color: var(--blb-text);
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius);
    box-shadow: var(--blb-shadow-lg);
}

.blb-dropdown.is-open > .blb-dropdown__menu {
    display: block;
    animation: blb-pop .14s var(--blb-ease);
}

.blb-dropdown--end > .blb-dropdown__menu,
.blb-dropdown.is-end > .blb-dropdown__menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.blb-dropdown--up > .blb-dropdown__menu,
.blb-dropdown.is-up > .blb-dropdown__menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + .375rem);
}

.blb-dropdown__item {
    display: flex;
    align-items: center;
    gap: .625rem;
    inline-size: 100%;
    margin: 0;
    padding: .5rem .625rem;
    font-family: var(--blb-font);
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--blb-text);
    text-align: start;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--blb-radius-sm);
    cursor: pointer;
}

.blb-dropdown__item > .blb-icon { color: var(--blb-text-muted); }

.blb-dropdown__item:hover,
.blb-dropdown__item:focus-visible {
    color: var(--blb-text);
    text-decoration: none;
    background: var(--blb-bg-muted);
    outline: none;
}

.blb-dropdown__item--danger,
.blb-dropdown__item--danger > .blb-icon { color: var(--blb-danger); }

.blb-dropdown__item--danger:hover,
.blb-dropdown__item--danger:focus-visible {
    color: var(--blb-danger);
    background: color-mix(in srgb, var(--blb-danger) 12%, transparent);
}

.blb-dropdown__item:disabled,
.blb-dropdown__item[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

.blb-dropdown__divider {
    block-size: 0;
    margin: .375rem -.375rem;
    border: 0;
    border-top: 1px solid var(--blb-border);
    opacity: 1;
}

.blb-dropdown__header {
    padding: .5rem .625rem .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--blb-text-muted);
    text-transform: uppercase;
}

/* Tooltip: qualsiasi elemento con data-blb-tip (usa ::after). */
[data-blb-tip] { position: relative; }

.blb-tooltip { display: inline-block; }

.blb-tooltip--text {
    text-decoration: underline dotted;
    text-underline-offset: .2em;
    cursor: help;
}

[data-blb-tip]::after {
    content: attr(data-blb-tip);
    position: absolute;
    inset-block-end: calc(100% + .5rem);
    inset-inline-start: 50%;
    z-index: var(--blb-z-tooltip);
    inline-size: max-content;
    max-inline-size: var(--blb-tip-w, 16rem);
    padding: .375rem .55rem;
    font-family: var(--blb-font);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--blb-tip-fg);
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    background: var(--blb-tip-bg);
    border-radius: var(--blb-radius-sm);
    box-shadow: var(--blb-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

[data-blb-tip]:hover::after,
[data-blb-tip]:focus-visible::after,
[data-blb-tip]:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

[data-blb-tip-pos="bottom"]::after {
    inset-block-start: calc(100% + .5rem);
    inset-block-end: auto;
    transform: translate(-50%, -4px);
}

[data-blb-tip-pos="start"]::after,
[data-blb-tip-pos="end"]::after {
    inset-block: 50% auto;
    transform: translate(0, -50%);
}

[data-blb-tip-pos="start"]::after {
    inset-inline: auto calc(100% + .5rem);
}

[data-blb-tip-pos="end"]::after {
    inset-inline-start: calc(100% + .5rem);
}

[data-blb-tip-pos="start"]:is(:hover, :focus-visible, :focus-within)::after,
[data-blb-tip-pos="end"]:is(:hover, :focus-visible, :focus-within)::after {
    transform: translate(0, -50%);
}

[data-blb-tip=""]::after { display: none; }

/* 13. Notifiche (create da blb.js) ----------------------------------------- */
.blb-toasts {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: var(--blb-z-toast);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    inline-size: min(var(--blb-toast-w, 22rem), calc(100vw - 2rem));
    pointer-events: none;
}

.blb-toasts--bottom-start { inset-inline: 1rem auto; }
.blb-toasts--bottom-center { inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); }
.blb-toasts--top-end { inset-block: 1rem auto; flex-direction: column-reverse; }
.blb-toasts--top-start { inset-block: 1rem auto; inset-inline: 1rem auto; flex-direction: column-reverse; }
.blb-toasts--top-center { inset-block: 1rem auto; inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); flex-direction: column-reverse; }

@media (max-width: 575.98px) {
    .blb-toasts,
    .blb-toasts[class*="--"] {
        inset-inline: .75rem;
        inline-size: auto;
        transform: none;
    }
}

.blb-toast {
    --_c: var(--blb-tone, var(--blb-neutral));
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--blb-text);
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-inline-start: 4px solid var(--_c);
    border-radius: var(--blb-radius);
    box-shadow: var(--blb-shadow-lg);
    pointer-events: auto;
    animation: blb-toast-in .22s var(--blb-ease);
}

.blb-toast > .blb-icon {
    --blb-icon-size: 1.2rem;
    margin-top: .1rem;
    color: var(--_c);
}

.blb-toast__body { flex: 1; min-inline-size: 0; }
.blb-toast__title { margin: 0; font-weight: 700; }
.blb-toast__text { margin: 0; overflow-wrap: anywhere; }
.blb-toast__title + .blb-toast__text { color: var(--blb-text-muted); }

/* 14. Avanzamento, rotellina, segnaposto ----------------------------------- */
.blb-progress {
    --_k: var(--blb-size, 1);
    --_c: var(--blb-tone, var(--blb-accent));
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-inline-size: 0;
}

.blb-progress__head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8125rem;
    color: var(--blb-text-muted);
}

.blb-progress__value {
    font-weight: 600;
    color: var(--blb-text);
    font-variant-numeric: tabular-nums;
}

.blb-progress__track {
    position: relative;
    block-size: calc(.5rem * var(--_k));
    overflow: hidden;
    background: var(--blb-bg-muted);
    border-radius: 999px;
}

.blb-progress__bar {
    block-size: 100%;
    inline-size: var(--blb-value, 0%);
    background: var(--_c);
    border-radius: inherit;
    transition: inline-size .35s var(--blb-ease);
}

.blb-progress--striped .blb-progress__bar {
    background-image: linear-gradient(45deg, rgb(255 255 255 / .22) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / .22) 50%, rgb(255 255 255 / .22) 75%, transparent 75%);
    background-size: 1rem 1rem;
    animation: blb-stripes .8s linear infinite;
}

.blb-progress--indeterminate .blb-progress__bar {
    inline-size: 40%;
    animation: blb-indeterminate 1.3s var(--blb-ease) infinite;
}

.blb-spinner {
    --_k: var(--blb-size, 1);
    --_c: var(--blb-tone, currentColor);
    position: relative;
    display: inline-block;
    flex: none;
    inline-size: calc(1.25rem * var(--_k));
    block-size: calc(1.25rem * var(--_k));
    vertical-align: middle;
    border: calc(2px * var(--_k)) solid color-mix(in srgb, var(--_c) 22%, transparent);
    border-top-color: var(--_c);
    border-radius: 50%;
    animation: blb-spin .7s linear infinite;
}

.blb-skeleton {
    display: block;
    inline-size: 100%;
    block-size: 1rem;
    background: var(--blb-bg-muted) linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--blb-bg) 55%, transparent) 50%, transparent 70%) no-repeat;
    background-size: 200% 100%;
    border-radius: var(--blb-radius-sm);
    animation: blb-shimmer 1.4s ease-in-out infinite;
}

.blb-skeleton--text { block-size: .85em; margin-block: .45em; }
.blb-skeleton-group > .blb-skeleton--text:last-child { inline-size: 60%; }

.blb-skeleton--circle {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
}

.blb-skeleton--rect { block-size: 8rem; border-radius: var(--blb-radius); }

/* 15. Avatar, percorso, pagine --------------------------------------------- */
.blb-avatar {
    --_k: var(--blb-size, 1);
    --_s: var(--blb-avatar-size, calc(2.5rem * var(--_k)));
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--_s);
    block-size: var(--_s);
    font-size: calc(var(--_s) * .38);
    font-weight: 700;
    line-height: 1;
    color: var(--blb-avatar-fg, var(--blb-text));
    vertical-align: middle;
    background: var(--blb-avatar-bg, var(--blb-bg-muted));
    border-radius: 50%;
    user-select: none;
}

.blb-avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.blb-avatar--square { border-radius: var(--blb-radius); }

.blb-avatar__status {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 30%;
    block-size: 30%;
    min-inline-size: .55rem;
    min-block-size: .55rem;
    background: var(--blb-border-strong);
    border: 2px solid var(--blb-bg);
    border-radius: 50%;
}

.blb-avatar__status--online { background: var(--blb-success); }
.blb-avatar__status--busy { background: var(--blb-danger); }
.blb-avatar__status--away { background: var(--blb-warning); }

.blb-avatar-group { display: inline-flex; align-items: center; }

.blb-avatar-group > .blb-avatar {
    box-shadow: 0 0 0 2px var(--blb-bg);
}

.blb-avatar-group > .blb-avatar + .blb-avatar { margin-inline-start: -.6rem; }

.blb-breadcrumb > ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin: 0;
    padding: 0;
    font-size: .875rem;
    color: var(--blb-text-muted);
    list-style: none;
}

.blb-breadcrumb li { display: inline-flex; align-items: center; gap: .375rem; min-inline-size: 0; }

.blb-breadcrumb li + li::before {
    content: var(--blb-breadcrumb-sep, "/");
    opacity: .55;
}

.blb-breadcrumb a {
    color: var(--blb-text-muted);
    text-decoration: none;
}

.blb-breadcrumb a:hover {
    color: var(--blb-text);
    text-decoration: underline;
}

.blb-breadcrumb [aria-current="page"] {
    font-weight: 600;
    color: var(--blb-text);
}

.blb-pagination > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blb-pagination {
    --_k: var(--blb-size, 1);
}

.blb-pagination__link {
    display: inline-grid;
    place-items: center;
    min-inline-size: calc(2.25rem * var(--_k));
    block-size: calc(2.25rem * var(--_k));
    padding: 0 .5rem;
    font-size: calc(.9375rem * var(--_k));
    font-weight: 500;
    color: var(--blb-text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    border-radius: var(--blb-radius-sm);
    transition: background-color var(--blb-dur), color var(--blb-dur);
}

a.blb-pagination__link:hover {
    color: var(--blb-text);
    background: var(--blb-bg-muted);
}

.blb-pagination__link[aria-current="page"],
.blb-pagination__link[aria-current="page"]:hover {
    color: var(--blb-accent-ink);
    background: var(--blb-accent);
}

.blb-pagination__link:focus-visible {
    outline: 2px solid var(--blb-accent);
    outline-offset: 1px;
}

.blb-pagination__link[aria-disabled="true"] { opacity: .4; }
.blb-pagination__arrow { border-color: var(--blb-border); }

.blb-pagination__gap {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.5rem;
    color: var(--blb-text-muted);
}

/* 16. Tabella ---------------------------------------------------------------
   Variabili: --blb-table-max-h (altezza massima, con intestazione ferma). */
.blb-table-wrap {
    inline-size: 100%;
    max-block-size: var(--blb-table-max-h, none);
    overflow: auto;
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius-lg);
}

.blb-table {
    inline-size: 100%;
    margin: 0;
    font-size: .9375rem;
    color: var(--blb-text);
    border-collapse: collapse;
    border-spacing: 0;
}

.blb-table > caption {
    padding: .875rem 1rem;
    font-weight: 700;
    color: var(--blb-text);
    text-align: start;
    caption-side: top;
}

.blb-table th,
.blb-table td {
    padding: .75rem 1rem;
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--blb-border);
}

.blb-table thead th {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--blb-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--blb-bg-subtle);
}

.blb-table tbody tr:last-child > td { border-bottom: 0; }

.blb-table .is-end { text-align: end; }
.blb-table .is-center { text-align: center; }

.blb-table--striped tbody tr:nth-child(even) { background: var(--blb-bg-subtle); }
.blb-table--hover tbody tr:hover { background: color-mix(in srgb, var(--blb-accent) 6%, transparent); }
.blb-table--compact :is(th, td) { padding: .45rem .75rem; }
.blb-table--bordered :is(th, td) + :is(th, td) { border-inline-start: 1px solid var(--blb-border); }

.blb-table--sticky thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
}

.blb-table__empty {
    padding: 2rem 1rem;
    color: var(--blb-text-muted);
    text-align: center;
}

@media (max-width: 640px) {
    .blb-table--stack thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .blb-table--stack tr {
        display: block;
        padding: .5rem 0;
        border-bottom: 1px solid var(--blb-border);
    }

    .blb-table--stack tbody tr:last-child { border-bottom: 0; }

    .blb-table--stack td {
        display: grid;
        grid-template-columns: minmax(6rem, 38%) 1fr;
        gap: .75rem;
        padding: .35rem 1rem;
        text-align: start;
        border: 0;
    }

    .blb-table--stack td.is-end,
    .blb-table--stack td.is-center { text-align: start; }

    .blb-table--stack td::before {
        content: attr(data-label);
        font-size: .8125rem;
        font-weight: 600;
        color: var(--blb-text-muted);
    }

    .blb-table--stack td[data-label=""]::before,
    .blb-table--stack td:not([data-label])::before { display: none; }

    .blb-table--stack td.blb-table__empty { display: block; text-align: center; }
    .blb-table--bordered.blb-table--stack td + td { border: 0; }
}

/* 17. Divisori, stato vuoto, numeri, passi ---------------------------------- */
.blb-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-block: var(--blb-divider-space, 1rem);
    font-size: .8125rem;
    color: var(--blb-text-muted);
}

.blb-divider::before,
.blb-divider::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--blb-border);
}

.blb-divider:empty { gap: 0; }
.blb-divider--start::before { flex: 0 0 1.5rem; }
.blb-divider--end::after { flex: 0 0 1.5rem; }

.blb-divider--vertical {
    display: inline-block;
    align-self: stretch;
    inline-size: 1px;
    min-block-size: 1.25em;
    margin: 0 .5rem;
    vertical-align: middle;
    background: var(--blb-border);
}

.blb-divider--vertical::before,
.blb-divider--vertical::after { display: none; }

.blb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.5rem 1.5rem;
    color: var(--blb-text-muted);
    text-align: center;
    border: 1.5px dashed var(--blb-border);
    border-radius: var(--blb-radius-lg);
}

.blb-empty--plain { border: 0; }

.blb-empty__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-bottom: .25rem;
    color: var(--blb-text);
    background: var(--blb-bg-muted);
    border-radius: 50%;
}

.blb-empty__icon > .blb-icon { --blb-icon-size: 1.4rem; }

.blb-empty__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--blb-text);
}

.blb-empty__text {
    max-inline-size: 42ch;
    margin: 0;
    line-height: 1.5;
}

.blb-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
}

.blb-stat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-inline-size: 0;
    padding: 1.125rem 1.25rem;
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius-lg);
}

.blb-stat__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--blb-text-muted);
}

.blb-stat__value {
    font-size: var(--blb-stat-size, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--blb-text);
    font-variant-numeric: tabular-nums;
}

.blb-stat__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .8125rem;
}

.blb-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-weight: 600;
    color: var(--blb-text-muted);
}

.blb-stat__delta--good { color: var(--blb-success); }
.blb-stat__delta--bad { color: var(--blb-danger); }
.blb-stat__hint { color: var(--blb-text-muted); }

.blb-steps {
    --_c: var(--blb-tone, var(--blb-accent));
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: blb-step;
}

.blb-steps__item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
    min-inline-size: 0;
    counter-increment: blb-step;
}

.blb-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 1rem;
    inset-inline: 2.5rem .5rem;
    block-size: 2px;
    background: var(--blb-border);
    border-radius: 2px;
}

.blb-steps__item.is-done:not(:last-child)::after { background: var(--_c); }

.blb-steps__marker {
    position: relative;
    z-index: 1;
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--blb-text-muted);
    background: var(--blb-bg);
    border: 2px solid var(--blb-border-strong);
    border-radius: 50%;
}

.blb-steps__marker::before { content: counter(blb-step); }

.blb-steps__item.is-done .blb-steps__marker {
    color: var(--blb-tone-ink, var(--blb-accent-ink));
    background: var(--_c);
    border-color: var(--_c);
}

.blb-steps__item.is-done .blb-steps__marker::before {
    content: "";
    inline-size: 1rem;
    block-size: 1rem;
    background: currentColor;
    -webkit-mask: var(--blb-icon-check) center / contain no-repeat;
    mask: var(--blb-icon-check) center / contain no-repeat;
}

.blb-steps__item.is-current .blb-steps__marker {
    color: var(--_c);
    border-color: var(--_c);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c) 18%, transparent);
}

.blb-steps__body {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-inline-size: 0;
}

.blb-steps__title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--blb-text);
    text-decoration: none;
}

a.blb-steps__title:hover { color: var(--_c); }
.blb-steps__item:not(.is-done, .is-current) .blb-steps__title { color: var(--blb-text-muted); }

.blb-steps__text {
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--blb-text-muted);
}

.blb-steps--vertical {
    flex-direction: column;
    gap: 0;
}

.blb-steps--vertical .blb-steps__item {
    flex-direction: row;
    gap: .875rem;
    padding-bottom: 1.25rem;
}

.blb-steps--vertical .blb-steps__item:last-child { padding-bottom: 0; }

.blb-steps--vertical .blb-steps__item:not(:last-child)::after {
    inset-block: 2.5rem .25rem;
    inset-inline: calc(1rem - 1px) auto;
    inline-size: 2px;
    block-size: auto;
}

.blb-steps--vertical .blb-steps__body { padding-top: .3rem; }

@media (max-width: 640px) {
    .blb-steps:not(.blb-steps--vertical) .blb-steps__text { display: none; }
    .blb-steps:not(.blb-steps--vertical) .blb-steps__title { font-size: .8125rem; }
}

/* 18. Impaginazione ---------------------------------------------------------
   Pila (verticale), fila che va a capo, griglia automatica, modulo, azioni.
   Variabili: --blb-gap, --blb-min (larghezza minima delle colonne della griglia). */
.blb-stack {
    display: flex;
    flex-direction: column;
    gap: var(--blb-gap, 1rem);
}

.blb-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--blb-gap, .75rem);
}

.blb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--blb-min, 16rem), 100%), 1fr));
    gap: var(--blb-gap, 1rem);
}

.blb-form {
    display: grid;
    gap: var(--blb-gap, 1.125rem);
}

.blb-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--blb-min, 14rem), 100%), 1fr));
    gap: var(--blb-gap, 1rem);
}

.blb-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.blb-actions--start { justify-content: flex-start; }
.blb-actions--between { justify-content: space-between; }

/* 19. Toni, taglie e modificatori comuni ----------------------------------- */
.blb-primary { --blb-tone: var(--blb-accent); --blb-tone-ink: var(--blb-accent-ink); }
.blb-neutral { --blb-tone: var(--blb-neutral); --blb-tone-ink: var(--blb-neutral-ink); }
.blb-success { --blb-tone: var(--blb-success); --blb-tone-ink: var(--blb-success-ink); }
.blb-warning { --blb-tone: var(--blb-warning); --blb-tone-ink: var(--blb-warning-ink); }
.blb-danger { --blb-tone: var(--blb-danger); --blb-tone-ink: var(--blb-danger-ink); }
.blb-info { --blb-tone: var(--blb-info); --blb-tone-ink: var(--blb-info-ink); }

.blb-sm { --blb-size: .85; }
.blb-lg { --blb-size: 1.15; }

.blb-block { inline-size: 100%; }
.blb-btn.blb-block { display: flex; }
.blb-pill { border-radius: 999px; }

/* 20. Animazioni ed effetti ------------------------------------------------
   Solo attributi, nessuna classe da ricordare (blb.js aggiunge .is-in quando parte):
   - d'ingresso: data-blb-anim="fade | fade-up | fade-down | fade-left | fade-right |
     zoom-in | zoom-out | rotate-in | flip-up | blur-in | slide-up | clip-up";
     data-blb-anim-trigger="view" (quando entra nello schermo, default) o "load";
     data-blb-anim-repeat la rifa' ogni volta che rientra;
     --blb-anim-dur, --blb-anim-delay, --blb-anim-ease, --blb-anim-distance;
     data-blb-stagger="80" sul contenitore: un figlio dopo l'altro.
   - al passaggio: data-blb-hover="lift | grow | shrink | glow | tilt | dim" (--blb-hover-dur);
   - continue: data-blb-loop="pulse | float | spin | wiggle | bounce | glow" (--blb-loop-dur).
   Usano translate/scale/rotate e non transform: un transform scritto da te resta valido.
   Nascosti solo con html.blb-js (lo mette blb.js): senza JavaScript si vede tutto. */
[data-blb-anim] {
    --_dur: var(--blb-anim-dur, .7s);
    --_delay: calc(var(--blb-anim-delay, 0s) + var(--blb-anim-stagger, 0ms));
    --_ease: var(--blb-anim-ease, cubic-bezier(.2, .7, .3, 1));
    --_dist: var(--blb-anim-distance, 24px);
    transition:
        opacity var(--_dur) var(--_ease) var(--_delay),
        translate var(--_dur) var(--_ease) var(--_delay),
        scale var(--_dur) var(--_ease) var(--_delay),
        rotate var(--_dur) var(--_ease) var(--_delay),
        filter var(--_dur) var(--_ease) var(--_delay),
        clip-path var(--_dur) var(--_ease) var(--_delay),
        transform var(--_dur) var(--_ease) var(--_delay);
}

.blb-js [data-blb-anim]:not(.is-in) { opacity: 0; }
.blb-js [data-blb-anim="fade-up"]:not(.is-in) { translate: 0 var(--_dist); }
.blb-js [data-blb-anim="fade-down"]:not(.is-in) { translate: 0 calc(var(--_dist) * -1); }
.blb-js [data-blb-anim="fade-left"]:not(.is-in) { translate: var(--_dist) 0; }
.blb-js [data-blb-anim="fade-right"]:not(.is-in) { translate: calc(var(--_dist) * -1) 0; }
.blb-js [data-blb-anim="zoom-in"]:not(.is-in) { scale: .88; }
.blb-js [data-blb-anim="zoom-out"]:not(.is-in) { scale: 1.12; }
.blb-js [data-blb-anim="rotate-in"]:not(.is-in) { rotate: -8deg; scale: .94; }
.blb-js [data-blb-anim="flip-up"]:not(.is-in) { transform: perspective(700px) rotateX(55deg); transform-origin: 50% 100%; }
.blb-js [data-blb-anim="blur-in"]:not(.is-in) { filter: blur(12px); scale: 1.04; }
.blb-js [data-blb-anim="slide-up"]:not(.is-in) { translate: 0 calc(var(--_dist) * 4); }
.blb-js [data-blb-anim="clip-up"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }
.blb-js [data-blb-anim="clip-up"].is-in { clip-path: inset(0 0 0 0); }

[data-blb-hover]:not([data-blb-anim]),
[data-blb-hover].is-done {
    transition:
        translate var(--blb-hover-dur, .25s) var(--blb-ease),
        scale var(--blb-hover-dur, .25s) var(--blb-ease),
        rotate var(--blb-hover-dur, .25s) var(--blb-ease),
        box-shadow var(--blb-hover-dur, .25s) var(--blb-ease),
        opacity var(--blb-hover-dur, .25s) var(--blb-ease);
}

[data-blb-hover="lift"]:hover { translate: 0 -4px; box-shadow: var(--blb-shadow-lg); }
[data-blb-hover="grow"]:hover { scale: 1.04; }
[data-blb-hover="shrink"]:hover { scale: .97; }
[data-blb-hover="glow"]:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blb-accent) 35%, transparent), 0 10px 30px color-mix(in srgb, var(--blb-accent) 30%, transparent); }
[data-blb-hover="tilt"]:hover { rotate: -1.5deg; scale: 1.02; }
[data-blb-hover="dim"]:hover { opacity: .75; }

[data-blb-loop] { animation: var(--_loop) var(--blb-loop-dur, 2.4s) ease-in-out infinite; }
[data-blb-loop="pulse"] { --_loop: blb-loop-pulse; }
[data-blb-loop="float"] { --_loop: blb-loop-float; }
[data-blb-loop="spin"] { --_loop: blb-loop-spin; animation-timing-function: linear; }
[data-blb-loop="wiggle"] { --_loop: blb-loop-wiggle; }
[data-blb-loop="bounce"] { --_loop: blb-loop-bounce; }
[data-blb-loop="glow"] { --_loop: blb-loop-glow; }

@keyframes blb-loop-pulse { 50% { scale: 1.06; } }
@keyframes blb-loop-float { 50% { translate: 0 -10px; } }
@keyframes blb-loop-spin { to { rotate: 360deg; } }
@keyframes blb-loop-wiggle { 25% { rotate: -3deg; } 75% { rotate: 3deg; } }
@keyframes blb-loop-bounce { 0%, 100% { translate: 0 0; } 40% { translate: 0 -14px; } 60% { translate: 0 -6px; } }
@keyframes blb-loop-glow { 50% { box-shadow: 0 0 24px color-mix(in srgb, var(--blb-accent) 55%, transparent); } }

/* 21. Movimento ridotto ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    [class^="blb-"],
    [class*=" blb-"],
    [class^="blb-"]::before,
    [class*=" blb-"]::before,
    [class^="blb-"]::after,
    [class*=" blb-"]::after,
    .blb-modal::backdrop {
        transition-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .blb-spinner,
    .blb-btn--loading::after { animation-duration: 1.5s !important; animation-iteration-count: infinite !important; }
    .blb-skeleton,
    .blb-progress--striped .blb-progress__bar { animation: none !important; }

    /* animazioni ed effetti: tutto fermo e visibile */
    [data-blb-anim],
    [data-blb-anim]:not(.is-in) {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        rotate: none !important;
        filter: none !important;
        clip-path: none !important;
        transform: none !important;
    }

    [data-blb-loop] { animation: none !important; }
    [data-blb-hover]:hover { translate: none !important; scale: none !important; rotate: none !important; }
}

/* 22. Testo ricco ed editor di testo ----------------------------------------
   .blb-prose: la tipografia di un testo formattato (RichText, articoli, l'area dell'editor):
   titoli, paragrafi, elenchi, citazioni, codice, link, immagini. --blb-prose-measure = la
   larghezza con .blb-prose--narrow.
   .blb-rte: l'editor (RichEditor + blb-rte.js): barra, area di scrittura, tavolozze,
   faccine, link, schermo intero (.blb-rte--full). --blb-rte-min = altezza minima. */
.blb-prose {
    font-size: calc(var(--blb-fs, 1rem) * var(--blb-size, 1) * 1.0625);
    line-height: 1.7;
    color: var(--blb-text);
    overflow-wrap: break-word;
}

.blb-prose--narrow { max-inline-size: var(--blb-prose-measure, 68ch); }

.blb-prose > :first-child { margin-block-start: 0; }
.blb-prose > :last-child { margin-block-end: 0; }

.blb-prose :is(p, ul, ol, blockquote, pre, figure) { margin-block: 0 1em; }

.blb-prose :is(h2, h3, h4) {
    margin-block: 1.6em .55em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--blb-text);
}

.blb-prose h2 { font-size: 1.6em; }
.blb-prose h3 { font-size: 1.3em; }
.blb-prose h4 { font-size: 1.1em; }

.blb-prose :is(ul, ol) { padding-inline-start: 1.4em; }
.blb-prose li { margin-block: .3em; }
.blb-prose li::marker { color: var(--blb-accent); }

.blb-prose a {
    color: var(--blb-accent);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: .18em;
}

.blb-prose blockquote {
    padding: .25em 0 .25em 1em;
    font-style: italic;
    color: var(--blb-text-muted);
    border-inline-start: 3px solid var(--blb-accent);
}

.blb-prose :is(code, pre) {
    font-family: var(--blb-mono);
    font-size: .88em;
}

.blb-prose code {
    padding: .1em .35em;
    background: var(--blb-bg-subtle);
    border-radius: var(--blb-radius-sm);
}

.blb-prose pre {
    padding: .9em 1em;
    overflow-x: auto;
    white-space: pre-wrap;
    background: var(--blb-bg-subtle);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius);
}

.blb-prose pre code { padding: 0; background: none; }

.blb-prose hr {
    margin-block: 2em;
    border: 0;
    border-block-start: 1px solid var(--blb-border);
}

.blb-prose img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--blb-radius);
}

.blb-prose mark {
    padding: 0 .15em;
    color: inherit;
    background: color-mix(in srgb, var(--blb-warning) 35%, transparent);
    border-radius: .2em;
}

/* --- l'editor --- */
.blb-rte {
    --_k: var(--blb-size, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background: var(--blb-input-bg, var(--blb-bg));
    border: 1px solid var(--blb-input-border, var(--blb-border-strong));
    border-radius: var(--blb-input-radius, var(--blb-radius));
    transition: border-color var(--blb-dur), box-shadow var(--blb-dur);
}

.blb-rte:focus-within {
    border-color: var(--blb-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blb-accent) 22%, transparent);
}

.blb-field--invalid .blb-rte { border-color: var(--blb-danger); }

/* senza JavaScript: si scrive l'HTML nel textarea, l'area non c'e' */
.blb-rte__area { display: none; }
.blb-rte .blb-rte__source { border: 0; border-radius: inherit; }

.blb-rte.is-ready .blb-rte__source { display: none; }

.blb-rte.is-ready .blb-rte__area {
    display: block;
    min-block-size: var(--blb-rte-min, 12rem);
    padding: .85rem 1rem;
    outline: none;
    overflow-y: auto;
    cursor: text;
}

.blb-rte.is-empty .blb-rte__area::before {
    content: attr(data-placeholder);
    position: absolute;
    color: var(--blb-text-muted);
    opacity: .85;
    pointer-events: none;
}

.blb-rte__bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding: .4rem;
    background: var(--blb-bg-subtle);
    border-block-end: 1px solid var(--blb-border);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
}

.blb-rte__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .125rem;
}

.blb-rte__group--end { margin-inline-start: auto; }

.blb-rte__btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    padding: 0;
    color: var(--blb-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--blb-radius-sm);
    cursor: pointer;
}

.blb-rte__btn:hover { background: var(--blb-bg-muted); }

.blb-rte__btn[aria-pressed="true"] {
    color: var(--blb-accent);
    background: color-mix(in srgb, var(--blb-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--blb-accent) 35%, transparent);
}

.blb-rte__btn:focus-visible,
.blb-rte__select select:focus-visible {
    outline: 2px solid var(--blb-accent);
    outline-offset: 1px;
}

.blb-rte__ico,
.blb-rte__ico svg {
    display: block;
    inline-size: 1.15rem;
    block-size: 1.15rem;
}

.blb-rte__select select {
    block-size: 2.1rem;
    max-inline-size: 9.5rem;
    padding: 0 1.6rem 0 .55rem;
    font: inherit;
    font-size: .85rem;
    color: var(--blb-text);
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius-sm);
    appearance: none;
    cursor: pointer;
}

.blb-rte__select { position: relative; }

.blb-rte__select::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: .45rem;
    inline-size: .85rem;
    block-size: .85rem;
    translate: 0 -50%;
    background: var(--blb-text-muted);
    mask: var(--blb-icon-chevron-down) center / contain no-repeat;
    pointer-events: none;
}

.blb-rte__pop-wrap { position: relative; }

.blb-rte__pop {
    position: absolute;
    inset-block-start: calc(100% + .35rem);
    inset-inline-start: 0;
    z-index: var(--blb-z-dropdown);
    padding: .5rem;
    background: var(--blb-bg);
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius);
    box-shadow: var(--blb-shadow-lg);
}

.blb-rte__pop[hidden] { display: none; }

.blb-rte__swatches {
    display: grid;
    grid-template-columns: repeat(5, 1.75rem);
    gap: .35rem;
}

.blb-rte__swatch {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 1px solid var(--blb-border-strong);
    border-radius: 50%;
    cursor: pointer;
}

.blb-rte__swatch--none {
    background: linear-gradient(135deg, transparent 45%, var(--blb-danger) 45% 55%, transparent 55%), var(--blb-bg);
}

.blb-rte__custom {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 1px solid var(--blb-border-strong);
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

.blb-rte__emoji {
    inline-size: min(20rem, calc(100vw - 2rem));
}

.blb-rte__emoji-tabs {
    display: flex;
    gap: .15rem;
    padding-block-end: .35rem;
    margin-block-end: .35rem;
    overflow-x: auto;
    border-block-end: 1px solid var(--blb-border);
}

.blb-rte__emoji-tab,
.blb-rte__emoji-btn {
    flex: none;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: var(--blb-radius-sm);
    cursor: pointer;
}

.blb-rte__emoji-tab.is-active { background: var(--blb-bg-muted); }
.blb-rte__emoji-btn:hover { background: var(--blb-bg-muted); }

.blb-rte__emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr));
    max-block-size: 13rem;
    overflow-y: auto;
}

.blb-rte__linkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    background: var(--blb-bg-subtle);
    border-block-end: 1px solid var(--blb-border);
}

.blb-rte__linkbox .blb-input { flex: 1 1 14rem; }

.blb-rte__linktab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
}

.blb-rte__count {
    padding: .25rem .75rem .45rem;
    font-size: .78rem;
    text-align: end;
    color: var(--blb-text-muted);
}

.blb-rte.is-over .blb-rte__count { color: var(--blb-danger); font-weight: 600; }

/* schermo intero: l'editor copre la pagina */
.blb-rte--full {
    position: fixed;
    inset: 0;
    z-index: calc(var(--blb-z-toast) - 1);
    border-radius: 0;
    box-shadow: none;
}

.blb-rte--full .blb-rte__area {
    flex: 1;
    inline-size: min(100%, 52rem);
    margin-inline: auto;
    padding: 2rem 1.25rem 4rem;
}

html.blb-rte-lock { overflow: hidden; }

@media (max-width: 575.98px) {
    .blb-rte__select select { max-inline-size: 7.5rem; }
    .blb-rte__group--end { margin-inline-start: 0; }
}

/* 23. Media: video d'apertura, carosello, modello 3D -------------------------
   Comportamento in blb-media.js (blb.js lo carica solo se in pagina ce n'e' uno).
   Variabili: --blb-hero-h (altezza, 100svh), --blb-hero-overlay (velo, 45%),
   --blb-carousel-per / -per-md / -per-sm (quanti elementi si vedono), --blb-carousel-gap,
   --blb-carousel-media-h, --blb-model-h (altezza del modello, 20rem). */

/* video d'apertura */
.blb-hero-video {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-block-size: var(--blb-hero-h, 100svh);
    padding: clamp(5rem, 12vh, 8rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 10vh, 6rem);
    overflow: hidden;
    background: #050506;
    color: #fff;
    text-align: center;
}

.blb-hero-video--start { place-items: end start; text-align: start; }
.blb-hero-video--end { place-items: end center; }

.blb-hero-video__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    scale: 1.02;
    transition: scale 1.1s cubic-bezier(.7, 0, .2, 1), opacity .9s ease, filter .9s ease;
}

.blb-hero-video__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 0%, rgb(0 0 0 / calc(var(--blb-hero-overlay, 45%) * .6)) 70%),
        linear-gradient(to bottom, rgb(0 0 0 / calc(var(--blb-hero-overlay, 45%) * .7)) 0%, transparent 30%, transparent 55%, rgb(0 0 0 / var(--blb-hero-overlay, 45%)) 100%),
        rgb(0 0 0 / calc(var(--blb-hero-overlay, 45%) * .5));
    transition: background-color .9s ease;
}

.blb-hero-video__content {
    display: grid;
    justify-items: inherit;
    gap: 1.25rem;
    max-inline-size: 52rem;
    transition: opacity .6s ease, translate .9s cubic-bezier(.7, 0, .2, 1);
}

.blb-hero-video:not(.blb-hero-video--start) .blb-hero-video__content { justify-items: center; }

.blb-hero-video__kicker {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 78%, var(--blb-accent));
}

.blb-hero-video__title {
    margin: 0;
    font-size: clamp(2.6rem, 8vw, 6.5rem);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.02em;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgb(0 0 0 / .35);
}

.blb-hero-video__text {
    margin: 0;
    max-inline-size: 38rem;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: rgb(255 255 255 / .82);
    text-wrap: pretty;
}

/* il pulsante "entra": pillola di vetro, bordo d'accento, cerchio con la freccia e un anello che respira */
.blb-hero-video__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: .75rem;
    padding: .5rem .5rem .5rem 1.6rem;
    border: 1px solid color-mix(in srgb, var(--blb-accent) 70%, #fff);
    border-radius: 999px;
    background: rgb(255 255 255 / .06);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 40px rgb(0 0 0 / .35);
    transition: background-color .35s var(--blb-ease), color .35s var(--blb-ease), box-shadow .35s var(--blb-ease), scale .35s var(--blb-ease);
}

.blb-hero-video__cta::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--blb-accent);
    opacity: 0;
    animation: blb-hero-ring 2.8s ease-out infinite;
    pointer-events: none;
}

.blb-hero-video__cta-icon {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--blb-accent);
    color: var(--blb-accent-ink);
    transition: translate .35s var(--blb-ease), background-color .35s var(--blb-ease);
}

.blb-hero-video__cta-icon::before {
    content: "";
    inline-size: 1.15rem;
    block-size: 1.15rem;
    background: currentColor;
    -webkit-mask: var(--blb-icon-arrow-right) center / contain no-repeat;
    mask: var(--blb-icon-arrow-right) center / contain no-repeat;
}

.blb-hero-video__cta:hover,
.blb-hero-video__cta:focus-visible {
    background: var(--blb-accent);
    color: var(--blb-accent-ink);
    box-shadow: 0 14px 50px color-mix(in srgb, var(--blb-accent) 45%, transparent);
    scale: 1.03;
}

.blb-hero-video__cta:hover .blb-hero-video__cta-icon,
.blb-hero-video__cta:focus-visible .blb-hero-video__cta-icon {
    background: var(--blb-accent-ink);
    color: var(--blb-accent);
    translate: .2rem 0;
}

.blb-hero-video__cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@keyframes blb-hero-ring {
    0% { opacity: .7; scale: 1; }
    70%, 100% { opacity: 0; scale: 1.18 1.45; }
}

.blb-hero-video__toggle {
    position: absolute;
    inset-block-end: clamp(1rem, 3vh, 1.75rem);
    inset-inline-end: clamp(1rem, 3vw, 1.75rem);
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 50%;
    background: rgb(0 0 0 / .3);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.blb-hero-video__toggle::before {
    content: "";
    inline-size: .7rem;
    block-size: .8rem;
    border-inline: .22rem solid currentColor;
}

.blb-hero-video__toggle[aria-pressed="true"]::before {
    inline-size: 0;
    block-size: 0;
    border-block: .45rem solid transparent;
    border-inline: .72rem solid currentColor;
    border-inline-end-width: 0;
    margin-inline-start: .2rem;
}

.blb-hero-video__toggle:hover { background: rgb(0 0 0 / .55); border-color: var(--blb-accent); }
.blb-hero-video__toggle:focus-visible { outline: 2px solid var(--blb-accent); outline-offset: 3px; }

/* uscita: il video si avvicina e sfuma nel nero, il testo sale e sparisce */
.blb-hero-video.is-leaving .blb-hero-video__media { scale: 1.25; opacity: 0; filter: blur(6px); }
.blb-hero-video.is-leaving .blb-hero-video__veil { background-color: #000; }
.blb-hero-video.is-leaving .blb-hero-video__content { opacity: 0; translate: 0 -2.5rem; }
.blb-hero-video.is-leaving .blb-hero-video__cta::before { animation: none; }

/* carosello */
.blb-carousel {
    --blb-carousel-gap-v: var(--blb-carousel-gap, 1.25rem);
    --blb-carousel-n: var(--blb-carousel-per, 3);
    position: relative;
    display: grid;
    gap: 1.25rem;
    min-inline-size: 0;
}

.blb-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--blb-carousel-n) - 1) * var(--blb-carousel-gap-v)) / var(--blb-carousel-n));
    gap: var(--blb-carousel-gap-v);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block: .25rem 1rem;
    border-radius: var(--blb-radius-lg);
}

.blb-carousel__track::-webkit-scrollbar { display: none; }
.blb-carousel__track:focus-visible { outline: 2px solid var(--blb-accent); outline-offset: 4px; }
.blb-carousel__track > * { scroll-snap-align: start; min-inline-size: 0; }

@media (max-width: 991.98px) {
    .blb-carousel { --blb-carousel-n: var(--blb-carousel-per-md, 2); }
}

@media (max-width: 575.98px) {
    /* uno (o quelli scelti) e un pezzo del successivo: si capisce che si scorre */
    .blb-carousel { --blb-carousel-n: calc(var(--blb-carousel-per-sm, 1) + .15); }
}

.blb-carousel__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--blb-border);
    border-radius: var(--blb-radius-lg);
    background: var(--blb-bg-subtle);
    color: var(--blb-text);
    transition: border-color .3s var(--blb-ease), translate .3s var(--blb-ease), box-shadow .3s var(--blb-ease);
}

.blb-carousel__card:hover {
    border-color: color-mix(in srgb, var(--blb-accent) 55%, var(--blb-border));
    translate: 0 -4px;
    box-shadow: var(--blb-shadow-lg);
}

.blb-carousel__media {
    inline-size: 100%;
    block-size: var(--blb-carousel-media-h, 18rem);
    object-fit: cover;
    background: radial-gradient(80% 70% at 50% 35%, color-mix(in srgb, var(--blb-accent) 12%, var(--blb-bg-muted)), var(--blb-bg-subtle) 75%);
}

.blb-carousel__media.blb-model3d { --blb-model-h: var(--blb-carousel-media-h, 18rem); border-radius: 0; }

.blb-carousel__body { display: grid; gap: .5rem; padding: 1.1rem 1.25rem 1.35rem; }

.blb-carousel__kicker {
    margin: 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blb-accent);
}

.blb-carousel__title { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.blb-carousel__text { margin: 0; color: var(--blb-text-muted); line-height: 1.55; }

.blb-carousel__link { color: inherit; text-decoration: none; }
.blb-carousel__card--link .blb-carousel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blb-carousel__card--link .blb-model3d { z-index: 2; }
.blb-carousel__link:focus-visible { outline: none; }
.blb-carousel__card--link:has(.blb-carousel__link:focus-visible) { outline: 2px solid var(--blb-accent); outline-offset: 2px; }

.blb-carousel__more {
    justify-self: start;
    color: var(--blb-accent);
    font-weight: 600;
    text-decoration: none;
}

.blb-carousel__more:hover { text-decoration: underline; }

.blb-carousel__nav {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    order: -1;
}

.blb-carousel__arrow {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--blb-border-strong);
    border-radius: 50%;
    background: var(--blb-bg);
    color: var(--blb-text);
    cursor: pointer;
    transition: background-color .2s var(--blb-ease), color .2s var(--blb-ease), border-color .2s var(--blb-ease), opacity .2s;
}

.blb-carousel__arrow:hover:not(:disabled) { background: var(--blb-accent); border-color: var(--blb-accent); color: var(--blb-accent-ink); }
.blb-carousel__arrow:focus-visible { outline: 2px solid var(--blb-accent); outline-offset: 2px; }
.blb-carousel__arrow:disabled { opacity: .35; cursor: default; }

.blb-carousel__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.blb-carousel__dot {
    inline-size: .55rem;
    block-size: .55rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--blb-border-strong);
    cursor: pointer;
    transition: inline-size .3s var(--blb-ease), background-color .3s var(--blb-ease);
}

/* area di tocco piu' grande del puntino */
.blb-carousel__dot { position: relative; }
.blb-carousel__dot::after { content: ""; position: absolute; inset: -.6rem -.3rem; }
.blb-carousel__dot[aria-current="true"] { inline-size: 1.75rem; background: var(--blb-accent); }
.blb-carousel__dot:focus-visible { outline: 2px solid var(--blb-accent); outline-offset: 3px; }

/* una alla volta, grande, testo sopra l'immagine */
.blb-carousel--full { --blb-carousel-n: 1; }

.blb-carousel--full .blb-carousel__card { min-block-size: clamp(22rem, 70vh, 40rem); justify-content: flex-end; border: 0; }
.blb-carousel--full .blb-carousel__card:hover { translate: none; }
.blb-carousel--full .blb-carousel__media { position: absolute; inset: 0; block-size: 100%; }
.blb-carousel--full .blb-carousel__body {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(to top, rgb(0 0 0 / .75), transparent);
    color: #fff;
}
.blb-carousel--full .blb-carousel__text { color: rgb(255 255 255 / .85); }
.blb-carousel--full .blb-carousel__title { font-size: clamp(1.5rem, 3vw, 2.4rem); }

/* modello 3D */
.blb-model3d {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: var(--blb-model-h, 20rem);
    border-radius: var(--blb-radius-lg);
    overflow: hidden;
    touch-action: pan-y;
}

.blb-model3d > canvas { display: block; inline-size: 100%; block-size: 100%; outline: none; }
.blb-model3d.has-controls > canvas { cursor: grab; }
.blb-model3d.has-controls > canvas:active { cursor: grabbing; }

.blb-model3d__status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--blb-text-muted);
    font-size: .85rem;
    text-align: center;
    padding: 1rem;
    pointer-events: none;
    transition: opacity .4s ease;
}

.blb-model3d.is-loaded .blb-model3d__status { opacity: 0; }

.blb-model3d > canvas { opacity: 0; transition: opacity .6s ease; }
.blb-model3d.is-loaded > canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .blb-hero-video__cta::before { animation: none !important; }
    .blb-carousel__track { scroll-behavior: auto; }
}

/* 24. Lista di passi (Blb.checklist) ------------------------------------------
   Comportamento in blb-checklist.js (blb.js lo scarica quando il codice lo chiede).
   Maniglia, casella, testo con nota e dettagli, matita e cestino; sotto, il campo per
   aggiungerne uno. Matita e cestino non rubano spazio al testo: col mouse compaiono
   sopra la fine della riga al passaggio; col dito, in una lista stretta, vanno sotto. */
.blb-checklist {
    container-type: inline-size;
    display: grid;
    gap: .625rem;
    min-inline-size: 0;
}

.blb-checklist [hidden] { display: none; }

.blb-checklist__head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
    color: var(--blb-text-muted);
}

.blb-checklist__count { font-variant-numeric: tabular-nums; }

.blb-checklist__list {
    display: grid;
    gap: .125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blb-checklist__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    padding: .3rem .25rem;
    border-radius: var(--blb-radius-sm);
    transition: background-color var(--blb-dur);
}

.blb-checklist__item:hover { background: var(--blb-bg-subtle); }

.blb-checklist__check {
    flex: 1;
    min-inline-size: 0;
    padding-block: .3rem;
}

/* casella spenta (solo lettura): il testo resta leggibile, sbiadisce solo la casella */
.blb-checklist__check:has(:disabled) {
    cursor: default;
    opacity: 1;
}

.blb-checklist__check .blb-check__input:disabled { opacity: .55; }

.blb-checklist__body {
    display: grid;
    gap: .15rem;
    overflow-wrap: anywhere;
}

.blb-checklist__item.is-done .blb-checklist__text {
    color: var(--blb-text-muted);
    text-decoration: line-through;
}

.blb-checklist__note {
    font-size: .8125rem;
    color: var(--blb-text-muted);
    white-space: pre-wrap;
}

.blb-checklist__meta {
    font-size: .75rem;
    color: var(--blb-text-muted);
}

.blb-checklist__actions {
    flex: none;
    display: flex;
    gap: .125rem;
}

/* col mouse: al passaggio, sopra la fine della riga (sfumando nel fondo) */
@media (hover: hover) and (pointer: fine) {
    .blb-checklist__actions {
        position: absolute;
        inset-block-start: .3rem;
        inset-inline-end: .25rem;
        padding-inline-start: 1rem;
        background: linear-gradient(to right, transparent, var(--blb-bg) 1rem);
        border-radius: var(--blb-radius-sm);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--blb-dur);
    }

    .blb-checklist__item:hover .blb-checklist__actions,
    .blb-checklist__item:focus-within .blb-checklist__actions {
        opacity: 1;
        pointer-events: auto;
    }
}

/* col dito, in una lista stretta: sotto il testo, a destra */
@media not ((hover: hover) and (pointer: fine)) {
    @container (max-width: 24rem) {
        .blb-checklist__item { flex-wrap: wrap; }
        .blb-checklist__check { flex-basis: calc(100% - 3rem); }
        .blb-checklist__actions { margin-inline-start: auto; }
    }
}

.blb-checklist__handle {
    flex: none;
    cursor: grab;
    touch-action: none;
    color: var(--blb-text-muted);
}

.blb-checklist.is-sorting,
.blb-checklist.is-sorting .blb-checklist__handle {
    cursor: grabbing;
    user-select: none;
}

.blb-checklist__item.is-dragging {
    position: relative;
    z-index: 2;
    background: var(--blb-bg);
    box-shadow: var(--blb-shadow);
}

.blb-checklist__item.is-editing {
    display: block;
    padding: .5rem;
    background: var(--blb-bg-subtle);
}

.blb-checklist__edit {
    display: grid;
    gap: .5rem;
}

.blb-checklist__add {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.blb-checklist__add > .blb-input {
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.blb-checklist__add > .blb-checklist__full { flex-basis: 100%; }