/*
 * Barman PRO · fogli di stile
 *
 * Nato dall'unione dei 9 blocchi <style> che erano sparsi dentro
 * index.html, concatenati nell'ordine in cui comparivano nel documento:
 * alcuni sono additivi e sovrascrivono i precedenti, quindi l'ordine e'
 * parte del comportamento, non una preferenza.
 */

/* Font locali: Poppins per l’interfaccia, Manrope variabile per cifre tabulari.
   I sottoinsiemi latin-ext si caricano solo quando servono. */

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/poppins-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/poppins-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/poppins-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ blocco 1 di 9 (era riga 59 di index.html) ═══ */
        /* ═══════════════════════════════════════════════════════════
           TOKEN · un solo insieme di ruoli, due temi
           ═══════════════════════════════════════════════════════════
           I nomi che iniziano con --bp- sono i ruoli nuovi. Sotto, i nomi
           storici (--text-main, --accent-gold-1, --glass-bg …) restano come
           ALIAS: le regole gia' scritte continuano a funzionare e cambiano
           aspetto tutte insieme.

           Superfici della landing, inchiostro navy e accento blu.
           ═══════════════════════════════════════════════════════════ */
        :root {
            color-scheme: light dark;

            /* superfici */
            --bp-bg:        oklch(95.606947527% 0.016584345 259.418349215);
            --bp-panel:     #ffffff;
            --bp-sunken:    #f2f6fd;
            /* Superficie tenue della famiglia blu. */
            --bp-band:      #e2ecff;

            /* inchiostro */
            --bp-ink:       #172b4b;
            --bp-ink-soft:  #4f607a;
            --bp-ink-faint: #596b85;

            /* linee · due livelli, non uno
               --bp-line e' il filo che separa e delimita superfici; era cosi'
               chiaro (88%) da sparire su un fondo quasi bianco.
               --bp-line-control e' il bordo di cio' che si clicca o si scrive:
               sta a 3:1 sul fondo E sul pannello, il minimo perche' un comando
               si distingua da solo (WCAG 1.4.11). Le card grandi cliccabili
               restano sul filo sottile: le identificano dimensione e contenuto,
               un 3:1 su quelle le farebbe sembrare scatole. */
            --bp-line:         #c7d6ed;
            --bp-line-control: #7b8ba3;
            --bp-line-strong:  #91a4c0;

            /* accento · landing: pieno #2563eb, testo #1d4ed8, fondo #e2ecff
               --bp-accent-soft e' un RIEMPIMENTO: il fondo degli stati morbidi
               (selezionato, pannelli accentati). Non e' una linea. Era finito
               come border-color in una trentina di regole, eredita' del vecchio
               oro, dove faceva da filo visibile; una tinta al 95% di chiarezza
               su un fondo al 97% non fa nessun filo, e i comandi sparivano.
               Bordo di un controllo -> --bp-line-control.
               Bordo che deve reagire (hover, attivo) -> --bp-accent. */
            --bp-accent:       oklch(54.614972331% 0.215207748 262.880917141);
            --bp-accent-hover: oklch(48.819831192% 0.217165460 264.376304094);
            --bp-accent-soft:  #e2ecff;
            --bp-accent-ink:   #1d4ed8;
            --bp-on-accent:    #ffffff;

            /* semantici */
            --bp-danger: oklch(52% 0.170 27);
            --bp-on-danger: #ffffff;
            --bp-warn:   oklch(64% 0.130 70);

            /* tipografia */
            --bp-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
            --bp-font-num: 'Manrope', 'Poppins', system-ui, sans-serif;
            --t-xs: .75rem;  --t-sm: .875rem; --t-base: 1rem;  --t-md: 1.125rem;
            --t-lg: 1.375rem; --t-xl: 1.75rem; --t-2xl: 2.25rem;

            /* spaziatura */
            --s-1: 4px; --s-2: 8px;  --s-3: 12px; --s-4: 16px;
            --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

            /* forma */
            --r-sm: 8px; --r-md: 14px; --r-lg: 18px;
            --bp-shadow-color: rgb(23 43 75 / 6%);
            --bp-shadow: 0 8px 28px var(--bp-shadow-color);

            /* movimento */
            --bp-ease: ease-out;
            --bp-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
            --bp-fast: 200ms; --bp-slow: 280ms;

            /* ─── alias storici ─── */
            --bg-color:      var(--bp-bg);
            --glass-bg:      var(--bp-panel);
            --glass-border:  var(--bp-line);
            --glass-shadow:  var(--bp-shadow);
            --text-main:     var(--bp-ink);
            --text-muted:    var(--bp-ink-faint);
            --text-dark:     var(--bp-ink);
            --accent-gold-1: var(--bp-accent);
            --accent-gold-2: var(--bp-accent);
            --accent-glow:   var(--bp-accent-soft);
            --input-bg:      var(--bp-sunken);
            --input-border:  var(--bp-line-control);
            --input-focus:   var(--bp-accent);
            --danger-color:  var(--bp-danger);
            --success-color: var(--bp-accent);
            --brand-color:   var(--bp-accent);
        }

        /* Tema scuro: stessi ruoli, altri valori. Non un secondo design. */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --bp-bg:        oklch(19.322798006% 0.039053530 263.095127804);
                --bp-panel:     #17243a;
                --bp-sunken:    #101b2e;
                /* Navy scuro, superfici separate per luminosità. */
                --bp-band:      #1e304b;
                --bp-ink:       #edf3ff;
                --bp-ink-soft:  #bdcbe0;
                --bp-ink-faint: #9cacbf;
                --bp-line:         #30435e;
                --bp-line-control: #71839d;
                --bp-line-strong:  #627895;
                --bp-accent:       oklch(77.475306054% 0.113908698 265.634656017);
                --bp-accent-hover: #b3cbff;
                --bp-accent-soft:  #1c3057;
                --bp-accent-ink:   #b7ceff;
                --bp-on-accent:    #102143;
                --bp-danger: #ffb4ad;
                --bp-on-danger: #102143;
                --bp-shadow-color: oklch(6% 0.004 250 / 0.55);
            --bp-shadow: 0 8px 28px var(--bp-shadow-color);
            }
        }
        :root[data-theme="dark"] {
            --bp-band:      #1e304b;
            --bp-bg:        oklch(19.322798006% 0.039053530 263.095127804);
            --bp-panel:     #17243a;
            --bp-sunken:    #101b2e;
            --bp-ink:       #edf3ff;
            --bp-ink-soft:  #bdcbe0;
            --bp-ink-faint: #9cacbf;
            --bp-line:         #30435e;
            --bp-line-control: #71839d;
            --bp-line-strong:  #627895;
            --bp-accent:       oklch(77.475306054% 0.113908698 265.634656017);
            --bp-accent-hover: #b3cbff;
            --bp-accent-soft:  #1c3057;
            --bp-accent-ink:   #b7ceff;
            --bp-on-accent:    #102143;
            --bp-danger: #ffb4ad;
            --bp-on-danger: #102143;
            --bp-shadow-color: oklch(6% 0.004 250 / 0.55);
            --bp-shadow: 0 8px 28px var(--bp-shadow-color);
        }


        /* ─── TEMA WEDDING / DAY EVENT ──────────────────────────────
           Override estetico: sfondo avorio, testo scuro, oro metallico
           come unico accento. Nessuna funzionalità rimossa. */
        /* ─── TEMA WEDDING · fix sfondi hardcoded (overlay e azioni) ───
           Questi elementi avevano uno sfondo scuro fisso: nel tema chiaro
           restavano scuri mentre le card interne (var(--input-bg)) diventavano
           chiare → "card chiare su sfondo scuro". Qui li riallineiamo al tema. */

        /* ─── THEME SWITCHER ─── */
        .theme-switcher {
    display: inline-flex; position: relative; isolation: isolate; padding: 4px; border: none; background: var(--bp-sunken); border-radius: 12px; overflow: hidden;
        }
        .theme-switcher button {
            width: auto;
            flex: 0 0 auto;
            white-space: nowrap;
            background: transparent;
            color: var(--text-muted);
            border: none;
            border-radius: 0;
            padding: 8px 14px;
            font: 600 12px/1 var(--bp-font);
            letter-spacing: 0.02em;
            cursor: pointer;
            text-transform: none;
        }
        .theme-switcher button.active {
    background: transparent; color: var(--bp-ink);
        }

        /* ─── LANGUAGE SELECTOR (compatto, override regola globale select) ─── */
        .lang-selector {
            width: auto;
            min-width: 0;
            flex: 0 0 auto;
            padding: 9px 12px;
            font-size: 18px;
            border-radius: 10px;
            line-height: 1;
        }
        .lang-selector:focus { transform: none; }

        /* ─── SLIDER % BEVITORI ─── */
        .pct-bevitori-wrap {
            margin-top: 10px;
        }
        .pct-bevitori-wrap input[type="range"] {
            width: 100%;
            accent-color: var(--accent-gold-2);
        }
        .pct-bevitori-display {
            font-weight: 700;
            color: var(--bp-accent-ink);
        }

        /* ─── HELPER NOTE ─── */
        .helper-note {
            font-size: 12px;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 6px;
        }

        /* ─── HELP TIP (tooltip "?") ─── */
        /* ─── BANNER RECENSIONE (soglie 3/10/20 liste generate) ─── */

        .help-tip {
            display: inline-flex; align-items: center; justify-content: center;
            width: 18px; height: 18px; margin-left: 6px;
            border-radius: 50%; border: 1px solid var(--accent-gold-2);
            color: var(--bp-accent-ink); font: 700 11px/1 var(--bp-font);
            cursor: pointer; position: relative; vertical-align: middle;
            user-select: none; flex: 0 0 auto; text-transform: none; letter-spacing: 0;
        }
        .help-tip::before { content: '?'; }
        .help-bubble {
            display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
            transform: translateX(-50%);
            width: max-content; max-width: 240px;
            background: var(--bp-panel); color: var(--text-main);
            border: 1px solid var(--glass-border); border-radius: 10px;
            padding: 10px 12px; font: 400 12px/1.45 var(--bp-font);
            letter-spacing: 0; text-transform: none; text-align: left; font-style: normal;
            box-shadow: 0 8px 24px var(--bp-shadow-color); z-index: 50; white-space: normal;
        }
        .help-tip:hover .help-bubble,
        .help-tip:focus .help-bubble,
        .help-tip.active .help-bubble { display: block; }

        /* ─── SUGGERITORE MENU ─── */
        .suggeritore-row { display: flex; align-items: center; gap: 4px; margin: 4px 0 18px; flex-wrap: wrap; }
        .btn-suggerisci {
            width: auto; display: inline-flex; align-items: center; gap: 8px;
            background: var(--bp-accent);
            color: var(--bp-on-accent); border: none; border-radius: 12px;
            padding: 12px 20px; font: 700 14px/1 var(--bp-font); cursor: pointer;
        }
        .btn-suggerisci:hover { filter: brightness(1.06); }
        .suggeritore-modal {
            display: none; position: fixed; inset: 0; z-index: 1000;   /* dialogo: scala dichiarata in cima alla navigazione */
            background: rgb(7 18 38 / 44%);
            align-items: center; justify-content: center; padding: 20px;
        }
        .suggeritore-modal.show { display: flex; }
        .suggeritore-box {
            background: var(--bp-bg); border: none;
            border-radius: 24px; padding: 24px; max-width: 480px; width: 100%;
            box-shadow: var(--bp-shadow); animation: bpSheetIn 280ms var(--bp-sheet-ease);
        }
        .suggeritore-box h3 { color: var(--bp-accent-ink); font-size: 22px; margin-bottom: 8px; }
        .suggeritore-box p { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
        .suggeritore-eventi { display: flex; flex-direction: column; gap: 0; background: var(--bp-panel); border-radius: 18px; overflow: hidden; }
        .suggeritore-eventi button {
            width: 100%; min-height: 56px; justify-content: flex-start; background: none; border: none;
            color: var(--text-main); border-radius: 0; padding: 14px 16px;
            font: 500 15px/1.4 var(--bp-font); cursor: pointer; text-transform: none; letter-spacing: 0;
        }
        .suggeritore-eventi button + button::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--bp-line); }
        .suggeritore-eventi button:focus-visible { outline-offset: -3px; }
        @media (max-width: 899px) {
            .suggeritore-modal { align-items: flex-end; padding: 0; }
            .suggeritore-box { max-width: none; border-radius: 24px 24px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); animation-name: bpSheetRise; }
        }
        .suggeritore-eventi button:hover { border-color: var(--accent-gold-1); color: var(--bp-accent-ink); }
        .suggeritore-close {
            width: 100%; margin-top: 14px; background: transparent;
            border: 1px solid var(--bp-line-control); color: var(--text-muted);
            border-radius: 10px; padding: 10px; cursor: pointer;
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--bp-font);
            background-color: var(--bg-color);
            color: var(--text-main);
            padding: 0;
            margin: 0;
            min-height: 100vh;
            font-size: 16px;
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

        /* ─── MESH GRADIENT BACKGROUND ─── */

        .container {
    max-width: 1200px; margin: 0 auto; padding: 28px 16px 32px; position: relative; z-index: auto;
        }

        /* ─── TYPOGRAPHY ─── */
        h1, h2, h3 {
    font-family: var(--bp-font); font-weight: 600; margin: 0; letter-spacing: -0.025em;
        }

        /* Fascia di testata: separa il marchio dal contenuto dell'app con una
           superficie, non con dello spazio vuoto. Prima erano 60px di aria, che
           su un telefono sono uno schermo di niente prima di arrivare al
           dunque. */
        /* Ottobre 2026: la fascia grigia con il nome centrato in maiuscoletto
           e' diventata una barra di testata con il logotipo a sinistra, come
           nelle app. Il colore lo porta l'icona; la scritta torna inchiostro. */
        .header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 100; text-align: left; margin: 0; padding: 8px 16px;
    background: var(--bp-bg); border: none;
        }

        /* Ottobre 2026: il marchio comune dei progetti di raccasamuele.it, a
           destra della testata. Stessa forma del portale (peso 600, spaziatura
           stretta, ".it" in accento), ma con i token e il carattere di Barman:
           richiama la famiglia senza cambiare i colori dell'app. */
        .bp-marchio {
    display: inline-flex; align-items: center; gap: 3px; min-height: 44px; flex: 0 1 auto;
    color: var(--bp-ink-soft); font-size: 12px; font-weight: 500; letter-spacing: -.035em;
    text-decoration: none; border-radius: var(--r-sm); transition: color var(--bp-fast) var(--bp-ease);
        }
        .bp-marchio-nome span { color: var(--bp-accent-ink); }
        .bp-marchio svg { margin-left: 2px; }
        .bp-marchio:hover { color: var(--bp-ink); text-decoration: underline; text-underline-offset: 4px; }
        .bp-marchio:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 3px; }

        .header h1.bp-logo {
    display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600;
    letter-spacing: -0.035em; text-transform: none; color: var(--bp-ink); line-height: 1;
        }
        .bp-logo-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; }
        .bp-logo-pro {
    font-size: 10px; font-weight: 600; letter-spacing: .03em; padding: 4px 6px; border-radius: 6px;
    color: var(--bp-accent-ink); background: var(--bp-accent-soft);
        }

        .header .subtitle {
            font-size: 14px;
            text-transform: none;
            letter-spacing: 0.08em;
            color: var(--bp-accent-ink);
            font-weight: 500;
            opacity: 0.9;
        }

        .header .ornament {
            font-family: var(--bp-font);
            color: var(--glass-border);
            letter-spacing: 0.08em;
            font-size: 18px;
        }

        /* ─── GLASS PANELS (CARDS) ─── */
        .card {
            background: var(--glass-bg);


            border: 2px solid var(--bp-line);
            border-radius: 24px;
            padding: 40px;
            margin-bottom: 32px;
            box-shadow: var(--glass-shadow);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
            animation: fadeInUpCard 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bp-line);
            transform: translateX(-100%);
            transition: transform 0.7s ease;
            pointer-events: none;
            z-index: 0;
        }

        .card > * {
            position: relative;
            z-index: 1;
        }

        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }
        .card:nth-child(4) { animation-delay: 0.4s; }
        .card:nth-child(5) { animation-delay: 0.5s; }
        .card:nth-child(6) { animation-delay: 0.6s; }

        .card:hover {
            transform: none;
            box-shadow: 0 25px 60px var(--bp-shadow-color);
            border-color: var(--accent-gold-1);
        }

        .card:hover::before {
            transform: translateX(100%);
        }

        .section-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

        .section-title::before, .section-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--bp-line);
        }

        .section-title h2 {
            font-size: 28px;
            color: var(--text-main);
            text-shadow: 0 2px 4px var(--bp-shadow-color);
        }

        .descrizione {
            color: var(--text-muted);
            font-size: 15px;
            text-align: center;
            margin-top: -20px;
            margin-bottom: 30px;
            font-weight: 300;
        }

        /* ─── INPUTS & FORMS ─── */
        label {
    display: block; font-size: 13px; text-transform: none; letter-spacing: 0;
    color: var(--bp-ink-soft); margin-bottom: 8px; font-weight: 500;
        }

        input[type="number"], input[type="text"], input:not([type]), select {
    width: 100%; background: var(--bp-sunken); border: 1px solid var(--bp-line-control);
    border-radius: var(--r-md); color: var(--bp-ink); font-family: var(--bp-font); font-size: 16px;
    font-weight: 500; padding: 12px 14px; min-height: 44px; box-shadow: none; appearance: none;
    transition: background 200ms ease-out, border-color 200ms ease-out;
        }

        input[type="number"]:focus, input[type="text"]:focus, input:not([type]):focus, select:focus {
    border-color: var(--bp-accent); background: var(--bp-sunken); box-shadow: none;
        }

        input::placeholder {
            color: var(--bp-ink-faint);
        }

        option {
            background-color: var(--bp-panel);
            /* Era #fff: nel tema chiaro le voci dei menu a tendina erano
               bianche su bianco, dove il browser usa questi colori. */
            color: var(--bp-ink);
        }

        /* ─── BUTTONS ─── */
        button {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    background: var(--bp-accent-soft); border: none; color: var(--bp-accent-ink); padding: 14px 20px;
    border-radius: var(--r-md); font-family: var(--bp-font); font-size: 14px; font-weight: 500;
    text-transform: none; letter-spacing: 0; cursor: pointer; position: relative; touch-action: manipulation;
    transition: transform 200ms ease-out, background-color 200ms ease-out, color 200ms ease-out;
        }

        /* Qui c'era uno "shine": una banda di --bp-line larga quanto il
           bottone che lo attraversava in mezzo secondo a ogni passaggio del
           mouse. Coperchiava il testo mentre passava, e non diceva niente che
           il sollevamento qui sotto non dicesse gia'. Era anche gia' stato
           spento a mano in sei punti diversi (menu', ricettario, card della
           home): quando un effetto va disattivato caso per caso, il posto
           giusto per toglierlo e' l'origine. */

        @media (hover: hover) { button:hover { background: var(--bp-sunken); border-color: var(--bp-ink-faint); } }

        button:active {
            transform: scale(0.98);
        }

        .btn-primary-gold {
            min-height: 50px;
            background: var(--bp-accent);
            color: var(--bp-on-accent);
            border: none;
            box-shadow: none;
        }

        .btn-primary-gold:hover {
            background: var(--bp-accent);
            box-shadow: 0 12px 32px var(--bp-accent-soft);
            color: var(--bp-on-accent);
        }

        .btn-secondary {
            background: transparent;
            border: 1px solid var(--accent-gold-2);
            color: var(--bp-accent-ink);
        }
        
        .btn-secondary:hover {
            background: var(--accent-gold-2);
            color: var(--bp-on-accent);
        }

        .btn-grande {
            font-size: 18px;
            padding: 24px;
            margin-top: 40px;
            border-radius: 16px;
            letter-spacing: 0.08em;
        }

        /* ─── STEPPER (orientamento + jump nav) ─── */
        html { scroll-behavior: smooth; }

        .app-stepper {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap;
    margin: 0 auto 24px; max-width: 1080px; position: sticky; top: 60px; z-index: 60;
    padding: 8px 0; background: var(--bp-bg); border: none;
        }

        /* ─── STEP WIZARD · una sezione visibile alla volta ─── */
        .step-panel { display: none; scroll-margin-top: 152px; }
        .step-panel.active {
    display: block; animation: stepFade 220ms ease-out;
        }
        @keyframes stepFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .app-stepper .step {
            width: auto;
            background: transparent;
            border: none;
            padding: 6px 4px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: var(--text-muted);
            text-transform: none;
            letter-spacing: 0.02em;
            font-size: 13px;
            font-weight: 600;
            overflow: visible;
        }
        .app-stepper .step::before { display: none; }
        .app-stepper .step .num {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; border: none; background: var(--bp-accent-soft); color: var(--bp-ink-soft);
    font-family: var(--bp-font-num); font-weight: 600; font-size: 12px; transition: background 200ms ease-out;
        }
        .app-stepper .step .lbl-step { display: inline; }
        .app-stepper .step:hover { transform: none; background: transparent; }
        .app-stepper .step:hover .num { background: var(--bp-accent-soft); border-color: var(--accent-gold-1); }
        .app-stepper .step.active { color: var(--text-main); }
        .app-stepper .step.active .num {
            background: var(--bp-accent);
            color: var(--bp-on-accent);
            border-color: var(--accent-gold-1);
        }
        .app-stepper .step:active .num { transform: scale(0.93); }
        .app-stepper .sep {
    width: 24px; height: 1px; background: var(--bp-line); margin: 0 8px;
        }
        @media (max-width: 560px) {
            .app-stepper { padding: 12px 6px; }
            .app-stepper .sep { width: 14px; margin: 0 3px; }
            .app-stepper .step { gap: 6px; font-size: 11px; letter-spacing: 0.01em; }
            .app-stepper .step .num { width: 28px; height: 28px; font-size: 13px; }
        }

        /* ─── MENU BUILDER · TABS ─── */
        .builder-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
            padding: 8px;
            border-radius: 18px;
            background: var(--bp-panel);
            border: 1px solid var(--bp-line-control);
        }
        .builder-tab {
            flex: 1 1 130px;
            width: auto;
            min-width: 0;
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-muted);
            padding: 14px 16px;
            border-radius: 12px;
            font-size: 12.5px;
            letter-spacing: 0.02em;
            text-transform: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: transform .18s cubic-bezier(0.23,1,0.32,1), background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        .builder-tab:hover { transform: none; color: var(--bp-accent-ink); background: var(--bp-accent-soft); border-color: transparent; }
        .builder-tab.active {
            background: var(--bp-accent);
            color: var(--bp-on-accent);
            border-color: var(--accent-gold-1);
            box-shadow: none;
        }
        .builder-tab:active { transform: scale(0.97); }
        .builder-tab .tab-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px; height: 20px;
            padding: 0 6px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            background: var(--bp-accent-soft);
            color: var(--bp-accent-ink);
            font-variant-numeric: tabular-nums;
        }
        .builder-tab.active .tab-badge { background: var(--bp-shadow-color); color: var(--bp-on-accent); }
        .builder-tab .tab-badge.empty { display: none; }
        .builder-panel { display: none; }
        .builder-panel.active { display: block; animation: builderFade .35s cubic-bezier(0.23,1,0.32,1); }
        @keyframes builderFade {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        #risultati {
    display: none; margin-top: 24px; animation: stepFade 220ms ease-out;
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .builder-panel.active, .step-panel.active { animation: none; }
        }

        /* ─── GRID LAYOUTS ─── */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        .parametri-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .search-add-row {
            display: flex;
            gap: 16px;
            align-items: stretch;
        }
        .search-add-row input {
            flex-grow: 1;
            margin: 0;
        }
        .search-add-row button {
            width: auto;
            padding: 0 32px;
            white-space: nowrap;
        }

        /* ─── DYNAMIC MENU ITEMS (GENERATI DA JS) ─── */
        .menu-item {
            background: var(--bp-panel);
            border: 1px solid var(--bp-line);
            border-left: 4px solid var(--accent-gold-2);
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
            box-shadow: 0 4px 12px var(--bp-shadow-color);
        }

        .menu-item:hover {
            background: var(--bp-panel);
            border-color: var(--bp-ink-faint);
            transform: translateY(-3px);
            box-shadow: 0 8px 24px var(--bp-shadow-color);
        }

        .menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--bp-font);
            font-size: 20px;
            font-weight: 700;
            color: var(--bp-accent-ink);
        }

        .btn-rimuovi {
            background: transparent;
            border: 1px solid var(--accent-gold-1);
            color: var(--bp-accent-ink);
            padding: 6px 12px;
            font-size: 11px;
            border-radius: 6px;
            width: auto;
            min-width: unset;
            transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
        }

        .btn-rimuovi:hover {
            background: var(--danger-color);
            border-color: var(--danger-color);
            color: #fff;
            transform: none;
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .slider-container .lbl {
            font-size: 12px;
            color: var(--text-muted);
            text-transform: none;
            letter-spacing: 0.02em;
        }

        input[type="range"] {
    flex-grow: 1; appearance: none; background: transparent; height: 44px; min-width: 0; margin: 0; cursor: pointer;
        }

        input[type="range"]::-webkit-slider-runnable-track {
    width: 100%; height: 4px; cursor: pointer; background: var(--bp-accent); border-radius: 4px;
        }

        input[type="range"]::-webkit-slider-thumb {
    height: 28px; width: 28px; border-radius: 50%; background: #fff; border: none;
    cursor: pointer; appearance: none; margin-top: -12px; box-shadow: 0 2px 7px rgb(16 33 67 / 22%);
        }

.slider-value {
            background: var(--bp-sunken);
            color: var(--text-main);
            padding: 4px 12px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            min-width: 36px;
            text-align: center;
            border: 1px solid var(--glass-border);
        }

        /* ─── CREATOR ─── */
        .creator-grid {
            display: grid;
            grid-template-columns: 3fr 2fr;
            gap: 32px;
        }

        .creator-box {
            background: var(--bp-shadow-color);
            padding: 32px;
            border-radius: 16px;
            border: 1px solid var(--glass-border);
        }

        .creator-box h3 {
            margin-bottom: 24px;
            color: var(--bp-accent-ink);
            font-size: 20px;
        }

        .creator-row {
            display: grid;
            grid-template-columns: 2fr 1.2fr 0.8fr auto;
            gap: 12px;
            margin-bottom: 12px;
            align-items: center;
        }

        .btn-rimuovi-ing {
            width: 44px;
            height: 44px;
            padding: 0;
            background: var(--bp-accent-soft);
            color: var(--bp-accent-ink);
            border: 1px solid var(--bp-line-control);
            border-radius: 8px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
        }

        .btn-rimuovi-ing:hover {
            background: var(--danger-color);
            border-color: var(--danger-color);
            color: var(--bp-on-danger);
        }

        .btn-aggiungi-ing {
            background: transparent;
            border: 1px dashed var(--bp-line-control);
            color: var(--text-muted);
            margin-top: 16px;
        }

        .btn-aggiungi-ing:hover {
            border-style: solid;
            border-color: var(--accent-gold-2);
            color: var(--bp-accent-ink);
        }

        /* ─── RISULTATI ─── */
        #risultati {
            display: none;
            margin-top: 60px;
            animation: fadeInUp 0.8s ease-out forwards;
        }

        .risultati-header {
            text-align: center;
            padding: 40px 0;
            border-top: 1px solid var(--glass-border);
            border-bottom: 1px solid var(--glass-border);
            margin-bottom: 40px;
        }

        .total-drinks {
            font-family: var(--bp-font);
            font-size: 32px;
            color: var(--bp-accent-ink);
            font-weight: 800;
            margin: 0;
            letter-spacing: 0.02em;
        }

        .total-drinks strong {
            color: var(--bp-accent-ink);
            font-weight: 800;
        }

        .result-section {
            background: var(--bp-shadow-color);
            padding: 32px;
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            margin-top: 24px;
        }

        .result-section h3 {
            color: var(--bp-accent-ink);
            margin-bottom: 24px;
            font-size: 22px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .result-section h3::before {
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-gold-1);
            box-shadow: 0 0 10px var(--accent-gold-1);
        }

        /* Colori extra rimossi per uniformità in oro */

        /* Righe della lista della spesa. Circoscritte a #risultati: su
           selettori nudi (ul, li) tracimavano su ogni pagina che carica
           questo foglio — la pagina privacy mostrava gli elenchi in due
           colonne, con il testo in grassetto verde. */
        #risultati ul { list-style-type: none; padding: 0; margin: 0; }
        /* ⚠️ La griglia della lista sta QUI, su #risultati, e non su
           .result-section — dove era scritta prima e dove NON HA MAI AVUTO
           EFFETTO. `#risultati li` contiene un id, quindi vinceva con il suo
           `display: flex`, e in un contenitore flex `grid-template-columns` e
           `grid-column: 1 / -1` non significano niente. Da quell'unica riga
           sbagliata venivano tre difetti insieme:
             · le colonne non si allineavano fra righe diverse;
             · il blocco "Correggi" non andava a capo e si infilava come quarta
               colonna, perche' il suo `grid-column: 1 / -1` era inerte;
             · e schiacciava il resto: su 375px "Bitter Campari" occupava 44px
               di larghezza per 115 di altezza, a capo quasi lettera per lettera.
           Se un giorno serve cambiare la disposizione della lista, si cambia
           qui: una regola su .result-section li verrebbe di nuovo ignorata. */
        #risultati li {
            padding: 16px 8px;
            border-bottom: 1px solid var(--bp-line);
            font-size: 16px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            column-gap: 16px;
            align-items: baseline;
            transition: background 0.2s;
        }
        /* Nome a sinistra, quantita' e prezzo attaccati a destra. Le due
           colonne dei valori si dimensionano sul contenuto, quindi restano
           adiacenti invece di essere spinte agli angoli come faceva
           space-between. */
        #risultati li > strong,
        #risultati li > .costo-voce { text-align: right; }

        /* Con subgrid le colonne si allineano anche FRA righe diverse: senza,
           ogni <li> e' una griglia a se' e i numeri ballano da una riga
           all'altra. Dentro @supports perche' il ripiego (griglia per riga)
           e' gia' corretto, solo meno bello. */
        @supports (grid-template-columns: subgrid) {
            #risultati ul { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
            #risultati li { grid-column: 1 / -1; grid-template-columns: subgrid; }
        }
        #risultati li:hover {
            background: var(--bp-sunken);
            border-radius: 8px;
            padding-left: 16px;
            padding-right: 16px;
        }
        #risultati li:last-child { border-bottom: none; }
        
        #risultati li span:first-child {
            font-family: var(--bp-font);
            color: var(--text-main);
            font-size: 18px;
            font-weight: 600;
        }
        #risultati li strong {
    font-family: var(--bp-font-num); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; color: var(--bp-ink-soft);
    font-variant-numeric: tabular-nums; white-space: nowrap;
        }

        .action-buttons {
            display: flex;
            gap: 20px;
            margin-top: 40px;
        }

        /* ─── META ROW & TOAST ─── */
        .meta-row {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; font-size: 12px; color: var(--text-muted);
        }

        .btn-reset {
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--bp-line-control);
            font-size: 11px;
            padding: 8px 16px;
            width: auto;
            border-radius: 8px;
        }

        .btn-reset:hover {
            color: #fff;
            border-color: var(--bp-ink-faint);
        }

        .btn-installa {
            background: var(--bp-accent-soft);
            color: var(--bp-accent-ink);
            border: none;
            font-size: var(--t-sm);
            font-weight: 500;
            padding: 8px 16px;
            width: auto;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .meta-actions {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        .meta-actions > * { flex: 0 0 auto; }

        .toast {
    position: fixed; bottom: calc(64px + 16px + env(safe-area-inset-bottom, 0px)); left: 50%;
    width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%) translateY(12px);
    background: var(--bp-ink); border: none; color: var(--bp-bg); padding: 12px 20px; text-align: center;
    border-radius: 24px; font-family: var(--bp-font); font-size: 13px; font-weight: 500; letter-spacing: 0;
    box-shadow: var(--bp-shadow); opacity: 0; transition: transform 240ms ease-out, opacity 240ms ease-out;
    z-index: 2000; pointer-events: none;
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        /* ─── PDF MODAL ─── */
        







        .btn-link-download {
            display: inline-block;
            text-align: center;
            text-decoration: none;
            color: var(--text-muted);
            font-size: 12px;
            letter-spacing: 0.02em;
            text-transform: none;
            transition: color 0.3s;
        }
        .btn-link-download:hover { color: #fff; }

        .btn-premium {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: var(--bp-accent);
            color: var(--bp-panel) !important;
            font-family: var(--bp-font);
            font-weight: 800;
            font-size: 15px;
            padding: 14px 28px;
            border-radius: 50px;
            text-decoration: none !important;
            text-transform: none;
            letter-spacing: 0.02em;
            box-shadow: 0 4px 15px var(--bp-accent-soft), inset 0 1px 1px var(--bp-line);
            border: 1px solid var(--bp-accent);
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .btn-premium:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 20px var(--bp-accent-soft), inset 0 1px 1px var(--bp-line);
            background: var(--bp-accent);
            color: var(--bp-panel) !important;
        }

        .btn-premium::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 50%; height: 100%;
            background: var(--bp-line);
            transform: translateX(-220%);
        }

        .btn-premium .lock-icon {
            font-size: 18px;
            filter: drop-shadow(0 1px 2px var(--bp-shadow-color));
        }

        






        

        /* ─── ANIMATIONS ─── */
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUpCard {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 900px) {
            .creator-grid { grid-template-columns: 1fr; }
            .parametri-row { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 600px) {
            .container { padding: 24px 16px; }
            .card { padding: 24px; border-radius: 20px; }
            .header h1 { font-size: 20px; }
            .search-add-row { flex-direction: column; }
            .search-add-row button { width: 100%; }
            .parametri-row { grid-template-columns: 1fr; gap: 16px; }
            .creator-row {
                /* "Analcolico" usciva tagliato: la tendina prende piu' spazio
                   dei millilitri, che sono al massimo quattro cifre. */
                grid-template-columns: 1.5fr 1fr 56px;
                grid-template-areas: "nome nome nome" "tipo ml rim";
            }
            .creator-row .ing-tipo { min-width: 0; padding-left: 14px; padding-right: 30px; }
            .creator-row .ing-nome { grid-area: nome; }
            .creator-row .ing-tipo { grid-area: tipo; }
            .creator-row .ing-ml   { grid-area: ml; }
            .creator-row .btn-rimuovi-ing { grid-area: rim; width: 100%; height: auto; padding: 12px 0;}
            
            .action-buttons { flex-direction: column; }
            .meta-row { flex-direction: column; align-items: stretch; gap: 16px; }
            .meta-actions { width: 100%; justify-content: space-between; }
        }

        /* ─── MOTORE COSTI ─── */
        .parametri-row-geo {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-top: 24px;
        }

        .costo-voce {
            font-family: var(--bp-font);
            font-size: 13px;
            color: var(--bp-accent-ink);
            font-weight: 600;
            letter-spacing: 0.01em;
            opacity: 0.88;
            white-space: nowrap;
        }

        /* Qui c'erano una griglia e due allineamenti scritti su
           .result-section li: lettera morta, li teneva sotto #risultati li.
           Spostati la' sopra, dove valgono davvero. */

        .budget-box {
            background: var(--bp-panel);
            border: 1px solid var(--bp-line);
            border-radius: 20px;
            padding: 36px 48px;
            margin-bottom: 32px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .budget-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-gold-1), transparent);
            opacity: 0.55;
        }

        .budget-label {
            font-family: var(--bp-font);
            font-size: 12px;
            text-transform: none;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-bottom: 14px;
        }

        /* cifre a larghezza fissa: in una colonna di costi devono incolonnarsi */
        .budget-amount {
            font-family: var(--bp-font);
            font-size: 52px;
            font-weight: 700;
            color: var(--bp-accent-ink);
            letter-spacing: -0.01em;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            margin-bottom: 14px;
        }

        .budget-sub {
            font-size: 11px;
            text-transform: none;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            opacity: 0.65;
        }

        @media (max-width: 600px) {
            .parametri-row-geo { grid-template-columns: 1fr; gap: 16px; }
            .budget-amount { font-size: 38px; }
            .budget-box { padding: 28px 24px; }
            /* Righe risultato: il nome prende tutta la riga, quantita' e
               prezzo vanno sotto e restano appaiati a destra. */
            #risultati ul { grid-template-columns: minmax(0, 1fr) auto; }
            #risultati li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; }
            #risultati li > span:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; }
            #risultati li > strong { justify-self: end; }
        }

        /* Intestazione documento: visibile solo nel PDF/stampa */
        .print-meta { display: none; }
        .budget-perperson {
            font-variant-numeric: tabular-nums; font-family: var(--bp-font); font-size: 15px; font-weight: 600; color: var(--bp-accent-ink); margin-bottom: 12px; letter-spacing: 0.01em; }

        /* Stima costo in tempo reale (form di configurazione) */
        .stima-live {
            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
            margin-top: 26px; padding: 14px 18px; border-radius: 14px;
            background: var(--bp-accent-soft); border: 1px solid var(--bp-line);
        }
        .stima-live .sl-label { font-family: var(--bp-font); font-size: 11px; text-transform: none; letter-spacing: 0.05em; color: var(--text-muted); }
        .stima-live .sl-vals { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
        .stima-live .sl-tot { font-family: var(--bp-font-num); font-weight: 700; font-size: 24px; color: var(--bp-accent-ink); font-variant-numeric: tabular-nums; }
        .stima-live .sl-pp { font-family: var(--bp-font-num); font-size: 13px; font-weight: 600; color: var(--text-muted); }

        /* Box costo stimato nel riepilogo del wizard guidato */
        .bpc-costbox {
            margin: 18px 0 4px; padding: 16px 18px; border-radius: 14px; text-align: center;
            background: var(--bp-accent-soft);
            border: 1px solid var(--bp-line);
        }
        .bpc-costbox .cb-k { display: block; font-family: var(--bp-font); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); margin-bottom: 6px; }
        .bpc-costbox .cb-v { font-family: var(--bp-font); font-weight: 700; font-size: 30px; color: var(--bp-accent-ink); font-variant-numeric: tabular-nums; }
        .bpc-costbox .cb-pp { display: block; font-family: var(--bp-font); font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: 4px; }

        @media print {
            .print-meta {
                display: block !important; text-align: center; color: #333 !important;
                font-family: var(--bp-font); font-size: 13px; margin: 4px 0 22px;
            }
            .print-meta .pm-ev { font-weight: 700; font-size: 16px; color: #000 !important; display: block; margin-bottom: 4px; }
            .budget-perperson { color: #000 !important; }
        }

        @media print {
            /* Force background colors and gradients to render in PDF/print output */
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            body { background: #fff !important; color: #000 !important; filter: none !important; }
            /* Qui c'era una BLOCKLIST: `footer, .btn-installa { display: none }`.
               Nascondeva a mano due elementi e lasciava passare tutto il resto,
               quindi stampando usciva l'intera pagina — ed era destinata a
               peggiorare, perche' ogni elemento nuovo dell'app ci finiva da
               solo. La sostituisce l'allowlist qui sotto, che e' lo stesso
               schema gia' usato dal menu' da esporre. */
            .btn-installa { display: none !important; }
            #risultati .grid { grid-template-columns: 1fr !important; }
            .result-section { background: #fff !important; border: 1px solid #ccc; color: #000; break-inside: avoid; overflow: hidden; }
            .result-section h3 { color: #000 !important; }
            li { border-color: #eee; }
            li strong { color: #000 !important; }
            /* Prevent ingredient names from overflowing the box */
            #risultati li { grid-template-columns: minmax(0,1fr) auto auto; }
            #risultati li > span:first-child { word-break: break-word; overflow-wrap: break-word; min-width: 0; color: #000 !important; }
            .costo-voce { color: #555 !important; }
            /* Budget box: force visible dark text (gradient text trick becomes invisible at print) */
            .budget-box { background: var(--bp-panel) !important; border: 1px solid #bbb !important; }
            .budget-box::before { display: none !important; }
            .budget-label { color: #444 !important; }
            .budget-amount { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #000 !important; color: #000 !important; font-size: 36px !important; }
            .budget-sub { color: #555 !important; }
        }
    
        @keyframes fadeInOverlay {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* ════════════════════════════════════════════════════════════
           CONFIGURATORE GUIDATO (v1.4) — onboarding + flusso step-by-step
           Palette nero/oro coerente. Solo transform/opacity in animazione.
           ════════════════════════════════════════════════════════════ */
        .bpc-overlay {
    position: fixed; inset: 0; z-index: 1000; display: none;
    background: rgb(7 18 38 / 44%); overflow-y: auto; overscroll-behavior: contain;
        }
        .bpc-overlay.show { display: block; }
        .bpc-shell {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    max-width: 640px; margin: 0 auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        }
        .bpc-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
        .bpc-progress { flex: 1; height: 4px; border-radius: 4px; background: var(--bp-sunken); overflow: hidden; }
        .bpc-progress-fill {
    height: 100%; width: 0%; border-radius: 4px; background: var(--bp-accent);
    transform-origin: left center; transition: transform 280ms var(--bp-sheet-ease);
        }
        .bpc-count { font-family: var(--bp-font); font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; white-space: nowrap; }
        /* La regola base `button` impone width:100%: senza questo reset il tasto
           chiudi si allargava per tutta la topbar e la "x" finiva al centro. */
        .bpc-close {
    width: 44px; height: 44px; flex: 0 0 auto; padding: 0; background: var(--bp-sunken); border: none;
    color: var(--bp-ink-soft); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%;
    transition: color 200ms ease-out, transform 200ms ease-out;
        }
        .bpc-close:hover { color: var(--text-main); }
        .bpc-close:active { transform: scale(0.92); }

        .bpc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 2px 16px; }
        /* will-change solo durante l'animazione: evita di tenere vivo un layer GPU
           in permanenza anche quando il pannello è fermo. */
        .bpc-panel.bpc-anim {
    animation: stepFade 220ms ease-out;
        }

        .bpc-eyebrow { font-family: var(--bp-font); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--bp-accent-ink); margin-bottom: 12px; }
        .bpc-q {
    font-family: var(--bp-font); font-weight: 600; font-size: 28px; letter-spacing: -.04em;
    line-height: 1.2; color: var(--text-main); margin: 0 0 12px;
        }
        .bpc-desc { font-family: var(--bp-font); font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 22px; max-width: 46ch; }
        .bpc-more { margin: -8px 0 22px; }
        .bpc-more > summary { font-family: var(--bp-font); font-size: 13px; font-weight: 700; color: var(--bp-accent-ink); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
        .bpc-more > summary::-webkit-details-marker { display: none; }
        .bpc-more > summary::before { content: '＋'; font-size: 14px; }
        .bpc-more[open] > summary::before { content: '－'; }
        .bpc-more p { font-family: var(--bp-font); font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 10px 0 0; max-width: 48ch; }

        /* Chips (scelta singola) */
        .bpc-chips { display: flex; flex-direction: column; gap: 10px; }
        .bpc-chips.bpc-wrap { flex-direction: row; flex-wrap: wrap; }
        .bpc-chip {
            font-family: var(--bp-font); text-align: center; cursor: pointer;
            background: var(--input-bg); color: var(--text-main);
            border: 1px solid var(--bp-line-control); border-radius: 14px;
            padding: 15px 18px; font-size: 15.5px; font-weight: 600;
            display: flex; flex-direction: column; gap: 3px; min-height: 52px; justify-content: center;
            transition: transform 160ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease, background-color 160ms ease;
        }
        .bpc-wrap .bpc-chip { flex: 1 1 calc(50% - 5px); min-width: 130px; }
        .bpc-chip .bpc-chip-sub { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
        @media (hover: hover) and (pointer: fine) { .bpc-chip:hover { border-color: var(--bp-accent); } }
        .bpc-chip:active { transform: scale(0.98); }
        .bpc-chip.sel {
            background: var(--bp-accent);
            color: var(--bp-on-accent); border-color: var(--accent-gold-1);
            box-shadow: none;
        }
        .bpc-chip.sel .bpc-chip-sub { color: var(--bp-panel); }

        /* Stepper numerico */
        .bpc-stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0; }
        .bpc-stepper button {
            width: 56px; height: 56px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
            background: var(--input-bg); color: var(--bp-accent-ink); border: 1px solid var(--bp-line-control);
            display: flex; align-items: center; justify-content: center;
            transition: transform 140ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease;
        }
        .bpc-stepper button:active { transform: scale(0.92); }
        @media (hover: hover) and (pointer: fine) { .bpc-stepper button:hover { border-color: var(--bp-accent); } }
        .bpc-stepper .bpc-val { font-family: var(--bp-font); font-weight: 700; font-size: 40px; color: var(--text-main); min-width: 2.4ch; text-align: center; font-variant-numeric: tabular-nums; }
        .bpc-unit { text-align: center; font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); margin-top: 10px; }

        /* Toggle Sì/No (segmented) */
        .bpc-toggle { display: flex; gap: 10px; }
        .bpc-seg {
            flex: 1; cursor: pointer; font-family: var(--bp-font); font-weight: 700; font-size: 16px;
            padding: 18px; border-radius: 14px; background: var(--input-bg); color: var(--text-main);
            border: 1px solid var(--bp-line-control); text-align: center;
            transition: transform 160ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease, background-color 160ms ease;
        }
        .bpc-seg:active { transform: scale(0.97); }
        .bpc-seg.sel { background: var(--bp-accent); color: var(--bp-on-accent); border-color: var(--accent-gold-1); box-shadow: none; }

        /* Slider */
        .bpc-slider-display { text-align: center; font-family: var(--bp-font); font-weight: 700; font-size: 34px; color: var(--text-main); margin-bottom: 4px; }
        .bpc-slider-display .bpc-inv { font-size: 18px; color: var(--text-muted); font-family: var(--bp-font); font-weight: 600; }
        .bpc-slider-wrap input[type=range] { width: 100%; margin-top: 16px; }
        .bpc-slider-legend { display: flex; justify-content: space-between; font-family: var(--bp-font); font-size: 12px; color: var(--text-muted); margin-top: 8px; }

        /* Text input */
        .bpc-text {
            width: 100%; font-family: var(--bp-font); font-size: 17px; color: var(--text-main);
            background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 14px; padding: 16px 18px;
            transition: border-color 160ms ease, box-shadow 160ms ease;
        }
        .bpc-text:focus { outline: none; border-color: var(--input-focus); box-shadow: none; }

        /* Riepilogo */
        .bpc-summary { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; }
        .bpc-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 16px; font-family: var(--bp-font); }
        .bpc-summary-row + .bpc-summary-row { border-top: 1px solid var(--glass-border); }
        .bpc-summary-row .k { font-size: 13.5px; color: var(--text-muted); }
        .bpc-summary-row .v { font-size: 14.5px; font-weight: 700; color: var(--text-main); text-align: right; }
        .bpc-readout { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--input-bg); border: 1px solid var(--glass-border); font-family: var(--bp-font); font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
        .bpc-readout strong { color: var(--bp-accent-ink); font-weight: 700; }

        /* Navigazione */
        .bpc-nav { display: flex; gap: 12px; padding-top: 16px; margin-top: auto; }
        .bpc-back, .bpc-next {
            font-family: var(--bp-font); font-weight: 500; font-size: 15px; cursor: pointer;
            border-radius: 13px; padding: 15px 20px; min-height: 50px;
            transition: transform 150ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease, opacity 160ms ease;
        }
        .bpc-back { flex: 1; min-width: 0; background: var(--input-bg); color: var(--text-main); border: 1px solid var(--bp-line-control); }
        .bpc-back:active, .bpc-next:active { transform: scale(0.97); }
        .bpc-back[disabled] { opacity: 0.35; pointer-events: none; }
        .bpc-next { flex: 1; min-width: 0; border: none; background: var(--bp-accent); color: var(--bp-on-accent); box-shadow: none; }

        /* Selettore lingua sulla schermata di benvenuto */
        .bpc-skiprow { text-align: center; margin-top: 12px; }
        .bpc-skiprow button { background: none; border: none; color: var(--text-muted); font-family: var(--bp-font); font-size: 13px; cursor: pointer; text-decoration: underline; }

        /* Welcome chooser */
        .bpc-welcome-head { text-align: center; margin: 14px 0 26px; }
        .bpc-welcome-head .bpc-eyebrow { margin-bottom: 14px; }
        .bpc-welcome-head h2 { font-family: var(--bp-font); font-weight: 600; font-size: clamp(24px, 7vw, 32px); color: var(--text-main); margin: 0 0 12px; line-height: 1.15; }
        .bpc-welcome-head p { font-family: var(--bp-font); font-size: 15px; color: var(--text-muted); margin: 0 auto; max-width: 40ch; line-height: 1.5; }
        .bpc-choices { display: flex; flex-direction: column; gap: 0; background: var(--bp-panel); border-radius: 18px; overflow: hidden; }
        .bpc-choice {
            text-align: left; justify-content: flex-start; cursor: pointer; background: none; border: none;
            border-radius: 0; padding: 22px; display: flex; gap: 16px; align-items: flex-start;
            transition: transform 200ms ease-out, background-color 200ms ease-out;
        }
        .bpc-choice + .bpc-choice::before { content: ""; position: absolute; top: 0; left: 22px; right: 0; height: 1px; background: var(--bp-line); }
        .bpc-choice:focus-visible { outline-offset: -4px; }
        .bpc-choice:active { transform: scale(0.985); }
        @media (hover: hover) and (pointer: fine) { .bpc-choice:hover { border-color: var(--bp-accent); } }
        .bpc-choice.primary { border-color: var(--bp-accent); box-shadow: none; }
        .bpc-choice-mark { font-size: 22px; color: var(--bp-accent-ink); line-height: 1.2; flex: 0 0 auto; }
        .bpc-choice-txt h3 { font-family: var(--bp-font); font-weight: 600; font-size: 18px; color: var(--text-main); margin: 0 0 5px; }
        .bpc-choice-txt p { font-family: var(--bp-font); font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }

        /* Launcher contestuale nello step Setup */
        .guided-launch {
            display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
            background: var(--input-bg); border: 1px solid var(--bp-line); border-radius: 14px;
            padding: 14px 16px; margin-bottom: 18px;
            transition: transform 150ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease;
        }
        .guided-launch:active { transform: scale(0.99); }
        @media (hover: hover) and (pointer: fine) { .guided-launch:hover { border-color: var(--bp-accent); } }
        .guided-launch .gl-mark { font-size: 18px; color: var(--bp-accent-ink); flex: 0 0 auto; }
        .guided-launch .gl-txt { flex: 1; }
        .guided-launch .gl-txt b { font-family: var(--bp-font); font-weight: 700; font-size: 14.5px; color: var(--text-main); display: block; }
        .guided-launch .gl-txt span { font-family: var(--bp-font); font-size: 12.5px; color: var(--text-muted); }
        .guided-launch .gl-arrow { color: var(--bp-accent-ink); font-size: 18px; flex: 0 0 auto; }

        /* I componenti basati su <button> ereditano l'uppercase globale: lo annullo
           dove il testo è descrittivo (chip, scelte, launcher), mantenendolo solo
           sui pulsanti d'azione brevi (Indietro/Avanti, Sì/No). */
        .bpc-chip, .bpc-chip-sub, .bpc-choice-txt, .bpc-choice-txt h3, .bpc-choice-txt p,
        .guided-launch .gl-txt, .guided-launch .gl-txt b, .guided-launch .gl-txt span {
            text-transform: none; letter-spacing: normal;
        }

        /* ─── CTA navigazione wizard (Fase 2) ─── */
        .wizard-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-muted); font-family: var(--bp-font); font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 4px; margin-bottom: 6px; transition: color 160ms ease, transform 150ms ease; }
        .wizard-back:hover { color: var(--text-main); }
        .wizard-back:active { transform: translateX(-2px); }
        .wizard-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
        .wizard-actions button { flex: 1 1 160px; min-height: 50px; border-radius: 13px; font-family: var(--bp-font); font-weight: 700; font-size: 14.5px; cursor: pointer; padding: 14px 16px; border: 1px solid var(--bp-line-control); background: var(--input-bg); color: var(--text-main); transition: transform 150ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease; }
        .wizard-actions button:active { transform: scale(0.98); }
        .wizard-actions .wz-primary { border: none; background: var(--bp-accent); color: var(--bp-on-accent); box-shadow: none; }
        @media (hover: hover) and (pointer: fine) { .wizard-actions button:hover { border-color: var(--bp-accent); } }

        /* ─── "I miei eventi" + checklist interattiva (Fase 3) ─── */
        .btn-eventi { background: var(--input-bg); color: var(--bp-accent-ink); border: 1px solid var(--bp-line-control); border-radius: 10px; padding: 8px 12px; font-family: var(--bp-font); font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 150ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease; }
        .btn-eventi:active { transform: scale(0.97); }
        @media (hover: hover) and (pointer: fine) { .btn-eventi:hover { border-color: var(--bp-accent); } }
        .bpc-evback { flex: 0 0 auto; width: auto; background: transparent; color: var(--bp-accent-ink); border: none; border-radius: 10px; padding: 0 12px 4px 0; font-size: 34px; font-weight: 400; line-height: 1; cursor: pointer; transition: opacity 150ms ease; }
        .bpc-evback:active { opacity: .5; }
        .bpc-evhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
        .bpc-evhead h2 {
    font-family: var(--bp-font); font-weight: 600; font-size: 32px; letter-spacing: -.04em; color: var(--text-main); margin: 0;
        }
        .bpc-evhead .cnt { font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); white-space: nowrap; }
        .bpc-evlist {
    display: flex; flex-direction: column; gap: 0; border-radius: 18px; background: var(--bp-panel); box-shadow: var(--bp-shadow);
        }
        .bpc-evcard {
    position: relative; border: none; border-radius: 18px; padding: 16px 18px; background: transparent;
        }
        .bpc-evcard h3 { font-family: var(--bp-font); font-weight: 600; font-size: 16.5px; color: var(--text-main); margin: 0 0 5px; }
        .bpc-evmeta {
    font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 0;
        }
        .bpc-evmeta .tot { color: var(--bp-accent-ink); font-weight: 700; }
        .bpc-evbtns { display: flex; flex-wrap: wrap; gap: 8px; }
        .bpc-evbtns button { flex: 1 1 0; width: auto; min-width: 70px; font-family: var(--bp-font); font-weight: 700; font-size: 13px; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid var(--bp-line-control); background: var(--input-bg); color: var(--text-main); transition: transform 150ms cubic-bezier(0.23,1,0.32,1), border-color 160ms ease; }
        .bpc-evbtns button:active { transform: scale(0.97); }
        .bpc-evbtns .ev-open { border: none; background: var(--bp-accent); color: var(--bp-on-accent); }
        .bpc-evempty { text-align: center; padding: 44px 12px; }
        .bpc-evempty .mk { font-size: 36px; color: var(--bp-accent-ink); }
        .bpc-evempty h3 { font-family: var(--bp-font); font-weight: 600; letter-spacing: -.035em; color: var(--text-main); margin: 14px 0 12px; font-size: 28px; line-height: 1.25; }
        .bpc-evempty p { font-family: var(--bp-font); color: var(--text-muted); font-size: 14px; line-height: 1.5; max-width: 34ch; margin: 0 auto; }
        .bpc-chkhead h2 { font-family: var(--bp-font); font-weight: 600; font-size: clamp(20px, 5.5vw, 26px); color: var(--text-main); margin: 0 0 4px; }
        .bpc-chkhead .sub { font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); }
        .bpc-chkprog { display: flex; align-items: center; gap: 12px; margin: 14px 0 20px; }
        .bpc-chkprog .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--bp-sunken); overflow: hidden; }
        .bpc-chkprog .fill { height: 100%; width: 0%; background: var(--bp-accent); transition: none; }
        .bpc-chkprog .lbl { font-family: var(--bp-font); font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
        .bpc-chkgroup {
    margin-bottom: 24px; padding: 16px; border-radius: 18px; background: var(--bp-panel); box-shadow: var(--bp-shadow);
        }
        .bpc-chkgroup > .gt {
    display: flex; align-items: center; gap: 10px; font-family: var(--bp-font); font-weight: 500; font-size: 15px; letter-spacing: -.02em; text-transform: none; color: var(--bp-ink); margin-bottom: 8px;
        }
        .bpc-chkitem { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--glass-border); cursor: pointer; }
        .bpc-chkgroup .bpc-chkitem:first-of-type { border-top: none; }
        .bpc-chkbox { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--input-border); display: flex; align-items: center; justify-content: center; color: var(--bp-on-accent); font-size: 14px; transition: background-color 160ms ease, border-color 160ms ease; }
        .bpc-chkbox::after { content: '✓'; opacity: 0; transition: opacity 140ms ease; }
        .bpc-chkitem.done .bpc-chkbox { background: var(--bp-accent); border-color: var(--accent-gold-1); }
        .bpc-chkitem.done .bpc-chkbox::after { opacity: 1; }
        .bpc-chkitem .nm {
    flex: 1; min-width: 0; font-family: var(--bp-font); font-size: 14px; color: var(--text-main); overflow-wrap: anywhere;
        }
        .bpc-chkitem .qt {
    font-family: var(--bp-font-num); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); text-align: right;
        }
        .bpc-chkitem.done .nm, .bpc-chkitem.done .qt { color: var(--text-muted); text-decoration: line-through; }

        .bpc-evcard + .bpc-evcard::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--bp-line); }
.bp-clay { width: 40px; height: 40px; object-fit: contain; flex: none; }
.bpc-evempty .bp-clay { width: 76px; height: 76px; }
@media print { .bp-clay { display: none; } }

/* ─── Checklist: riepilogo Totale / Speso / Da spendere ─── */
        .bpc-chkstats { display: flex; gap: 10px; margin: 14px 0 20px; }
        .bpc-chkstat {
    flex: 1; min-width: 0; background: var(--bp-panel); border: none; border-radius: 14px; padding: 12px 6px; text-align: center;
        }
        .bpc-chkstat .k { font-family: var(--bp-font); font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); }
        .bpc-chkstat .v {
            font-variant-numeric: tabular-nums; font-family: var(--bp-font-num); font-size: clamp(15px, 4.6vw, 19px); font-weight: 700; color: var(--text-main); margin-top: 5px; font-variant-numeric: tabular-nums; }
        .bpc-chkstat.spent .v { color: var(--bp-accent-ink); }

        /* ─── Card evento: kebab (⋮) + menu azioni ─── */
.bpc-evcard-main { cursor: pointer; }
        .bpc-evkebab { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; background: transparent; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; transition: background-color 160ms ease, color 160ms ease, transform 140ms ease; }
        .bpc-evkebab:active { transform: scale(0.9); }
        @media (hover: hover) and (pointer: fine) { .bpc-evkebab:hover { background: var(--input-bg); color: var(--text-main); } }
        .bpc-evmenu { position: absolute; top: 48px; right: 12px; z-index: 6; min-width: 172px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--glass-shadow);  overflow: hidden; display: none; transform-origin: top right; }
        .bpc-evmenu.show { display: block; animation: bpMenuIn 180ms cubic-bezier(0.23,1,0.32,1) both; }
        @keyframes bpMenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
        .bpc-evmenu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 13px 16px; background: transparent; border: none; color: var(--text-main); font-family: var(--bp-font); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; transition: background-color 140ms ease; }
        .bpc-evmenu button + button { border-top: 1px solid var(--glass-border); }
        @media (hover: hover) and (pointer: fine) { .bpc-evmenu button:hover { background: var(--input-bg); } }
        .bpc-evmenu button .mi { color: var(--bp-accent-ink); width: 18px; text-align: center; }

        /* ─── Campo "Nome evento" nello step Setup ─── */
        .nome-evento-wrap { margin-bottom: 18px; }
        .nome-evento-wrap label { display: block; margin-bottom: 6px; }
        .nome-evento-wrap input { width: 100%; }

        /* ─── Stepper con valore digitabile + niente double-tap zoom ─── */
        .bpc-stepper button { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
        .bpc-valinput { width: 4.5ch; min-width: 76px; max-width: 150px; text-align: center; font-family: var(--bp-font); font-weight: 700; font-size: clamp(30px, 9vw, 40px); color: var(--text-main); background: transparent; border: none; border-bottom: 2px solid var(--bp-line-control); padding: 2px 4px; -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; touch-action: manipulation; }
        .bpc-valinput::-webkit-outer-spin-button, .bpc-valinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .bpc-valinput:focus { outline: none; border-bottom-color: var(--accent-gold-1); }

        /* ─── Menu a panino (hamburger) → X + overlay nav ─── */
        /* rimosso con il bottone Home flottante e il menu modale (Fase 1) */
        .bp-burger:active { transform: scale(0.92); }
        /* Il burger sparisce quando è aperto un overlay modale (resta durante il nav, che è il suo menu) */
        body:has(.bpc-overlay.show) .bp-burger { opacity: 0; pointer-events: none; transform: scale(0.8); }
        @media (hover: hover) and (pointer: fine) { .bp-burger:hover { border-color: var(--bp-line); } }
        .bp-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--accent-gold-1); transition: transform 300ms cubic-bezier(0.32,0.72,0,1), opacity 200ms ease; }
        .bp-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .bp-burger.open span:nth-child(2) { opacity: 0; }
        .bp-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
        /* rimosso con il bottone Home flottante e il menu modale (Fase 1) */
        .bp-nav.show { display: block; }
        .bp-nav-inner { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 520px; margin: 0 auto; padding: 88px 24px calc(40px + env(safe-area-inset-bottom, 0px)); }
        .bp-nav-eyebrow { font-family: var(--bp-font); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: none; color: var(--bp-accent-ink); margin-bottom: 6px; padding-left: 4px; }
        .bp-nav-item { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 20px 20px; border-radius: 20px; background: var(--input-bg); border: 1px solid var(--bp-line-control); cursor: pointer; transition: transform 220ms cubic-bezier(0.23,1,0.32,1), border-color 200ms ease; }
        .bp-nav-item:active { transform: scale(0.985); }
        @media (hover: hover) and (pointer: fine) { .bp-nav-item:hover { border-color: var(--bp-accent); } }
        .bp-nav-item .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--bp-accent-soft); color: var(--bp-accent-ink); display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .bp-nav-item .tx { flex: 1; font-family: var(--bp-font); font-weight: 600; font-size: clamp(17px, 5vw, 20px); color: var(--text-main); }
        .bp-nav-item .ar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--bp-sunken); display: flex; align-items: center; justify-content: center; color: var(--bp-accent-ink); font-size: 18px; transition: transform 240ms cubic-bezier(0.23,1,0.32,1); }
        @media (hover: hover) and (pointer: fine) { .bp-nav-item:hover .ar { transform: translateX(3px); } }
        .bp-nav.show .bp-nav-item { animation: bpNavIn 460ms cubic-bezier(0.32,0.72,0,1) both; }
        .bp-nav.show .bp-nav-item:nth-of-type(1) { animation-delay: 70ms; }
        .bp-nav.show .bp-nav-item:nth-of-type(2) { animation-delay: 130ms; }
        .bp-nav.show .bp-nav-item:nth-of-type(3) { animation-delay: 190ms; }
        @keyframes bpNavIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

        @media (prefers-reduced-motion: reduce) {
            .bp-burger span, .bp-nav.show .bp-nav-item, .bpc-evmenu.show { animation: none; transition: none; }
        }

        @media (max-width: 420px) {
            .bpc-wrap .bpc-chip { flex-basis: 100%; }
            .bpc-back { min-width: 92px; padding: 15px 14px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .bpc-panel.bpc-anim { animation: none; }
            .bpc-progress-fill { transition: none; }
            .bpc-chip, .bpc-seg, .bpc-back, .bpc-next, .bpc-choice, .bpc-stepper button, .guided-launch, .bpc-close { transition: none; }
        }

        /* ════════════════════════════════════════════════════════════
           RAFFINAMENTO UI/UX  ·  blocco additivo (override per ordine
           sorgente, nessuna regola originale rimossa). Marca/oro brand
           invariati. Vale per tema scuro e wedding (usa le variabili).
           ════════════════════════════════════════════════════════════ */

        /* — 1. Niente jitter di layout al focus degli input —
           lo scale(1.02) faceva "saltare" i campi nelle griglie e su
           mobile poteva generare scroll. Restano bordo oro + glow. */
        input[type="number"]:focus, input[type="text"]:focus,
        input:not([type]):focus, select:focus { transform: none; }

        /* — 2. Focus-visible coerente da tastiera (accessibilità) —
           anello oro che non sposta il layout (outline non occupa spazio
           e non è ritagliato da overflow:hidden dei bottoni). */
        a:focus-visible,
        button:focus-visible,
        select:focus-visible,
        input:focus-visible,
        [role="button"]:focus-visible,
        [tabindex]:not([tabindex="-1"]):focus-visible {
            outline: 2px solid var(--accent-gold-1);
            outline-offset: 3px;
            border-radius: 10px;
        }

        /* ⚠️ `tabindex="-1"` NON e' raggiungibile col tab: lo mette
           `bpFocusSezione()` sul contenitore della schermata e gli da' il fuoco
           perche' uno screen reader annunci dove sei arrivato. Chrome pero'
           considera quel fuoco "visibile" e ci disegnava intorno l'anello: alla
           prima apertura la home mostrava un grosso rettangolo blu attorno a
           "Da dove vuoi iniziare?" e alla card, cioe' due riquadri annidati.
           L'anello serve a chi naviga da tastiera per sapere dove andra' il
           prossimo tasto: su un contenitore che il tab non raggiunge non dice
           niente a nessuno. */
        [tabindex="-1"]:focus,
        [tabindex="-1"]:focus-visible { outline: none; }
        /* Nel tema chiaro l'oro chiaro sparirebbe sulla sabbia: oro profondo */

        /* — 3. Target tap ≥ comfort su elementi piccoli —
           lo stepper resta visivamente identico ma garantisce l'area. */
        .app-stepper .step { min-height: 44px; }
        /* help-tip "?": area cliccabile allargata (hit-slop trasparente),
           senza ingrandire il glifo né rubare i tap al campo sottostante. */
        .help-tip::after {
            content: ''; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 44px; height: 44px;
        }

        /* — 4. Feedback "premuto" (press) coerente su tutte le azioni — */
        .action-buttons button:active,
        .wizard-actions button:active,
        .builder-tab:active { transform: scale(0.985); }
        .bph-hero:active, .bph-card:active,
        .bph-resume-main:active, .bph-resume-reset:active { transform: scale(0.99); }

        /* — 5. Stato disabilitato leggibile e non interattivo — */
        button:disabled, button[disabled] {
            opacity: 0.45; cursor: not-allowed;
            transform: none !important; filter: grayscale(0.25);
        }
        button:disabled:hover { transform: none; background: var(--glass-bg); border-color: var(--bp-line-control); }

        /* — 6. Leggibilità testi secondari (tonalità brand invariate) — */
        .budget-sub { opacity: 0.85; }
        .descrizione { font-weight: 400; }
        .helper-note { color: var(--text-muted); opacity: 0.95; }
        @media screen { footer { color: var(--bp-ink-soft); } }

        /* — 7. Le nuove micro-interazioni rispettano reduced-motion — */
        @media (prefers-reduced-motion: reduce) {
            .action-buttons button:active, .wizard-actions button:active,
            .builder-tab:active, .bph-hero:active, .bph-card:active,
            .bph-resume-main:active, .bph-resume-reset:active { transform: none; }
        }

        /* — 8. HOME · header —
           C'erano qui le regole che rimpicciolivano in home il vecchio titolo
           editoriale. Con la barra di testata il logotipo e' uguale ovunque:
           una testata che cambia misura fra le sezioni sembra un salto. */

        /* — 9. HOME · gerarchia griglia —
           "Impostazioni" è una preferenza, non un contenuto: resa più
           sobria così l'occhio va prima alle scorciatoie ai contenuti. */

        /* — 10. EMPTY STATE del builder —
           Le schede del menu, da vuote, erano bianche: l'utente non sapeva
           cosa fare. Placeholder elegante che sparisce da solo appena il JS
           inserisce una voce nel contenitore (regola :not(:empty)+ ), quindi
           ZERO modifiche al JavaScript. */
        .bp-empty {
            display: flex; flex-direction: column; align-items: center;
            text-align: center; gap: 7px; padding: 30px 22px; margin-top: 4px;
            border: 1.5px dashed var(--bp-line); border-radius: 16px;
            background: var(--bp-sunken);
        }
        .bp-empty-ic {
            display: flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; margin-bottom: 2px; border-radius: 12px;
            background: var(--bp-accent-soft); color: var(--bp-accent-ink); font-size: 20px;
        }
        .bp-empty-title { font-family: var(--bp-font); font-weight: 600; font-size: 17px; color: var(--text-main); }
        .bp-empty-desc { font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); max-width: 340px; line-height: 1.5; }
        #drink-serata-container:not(:empty) + .bp-empty,
        #mocktail-serata-container:not(:empty) + .bp-empty,
        #shot-serata-container:not(:empty) + .bp-empty { display: none; }


/* ═══ blocco 2 di 9 (era riga 1750 di index.html) ═══ */
        body.bp-home .bph-stage { display: block; }
        
        
        
        @media (max-width: 560px) { .bph-glass-wrap { top: 56%; width: 84vw; opacity: 0.42; } }
        @media (prefers-reduced-motion: reduce) { .bph-glass-rot, .bph-sheen, .bph-liquid { animation: none; } }
        @media print { .bph-stage { display: none !important; } }

/* ═══ blocco 3 di 9 (era riga 1850 di index.html) ═══ */
        .bpm-overlay { position: fixed; inset: 0; z-index: 1000;   /* dialogo */ display: none; background: var(--bp-panel);  overflow-y: auto; -webkit-overflow-scrolling: touch; }
        .bpm-overlay.show { display: block; }
        .bpm-shell { min-height: 100%; display: flex; flex-direction: column; }
        .bpm-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 13px 18px; background: var(--bp-panel); border-bottom: 1px solid var(--glass-border); }
        .bpm-styles { display: flex; gap: 8px; flex-wrap: wrap; }
        .bpm-style-btn { font-family: var(--bp-font); font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--text-muted); background: transparent; border: 1px solid var(--bp-line-control); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; }
        .bpm-style-btn:hover { color: var(--text-main); border-color: var(--bp-accent); }
        .bpm-style-btn.active { color: var(--bp-on-accent); background: var(--accent-gold-1); border-color: var(--accent-gold-1); }
        .bpm-tools { display: flex; align-items: center; gap: 10px; }
        .bpm-tool { font-family: var(--bp-font); font-weight: 700; font-size: 13.5px; color: var(--bp-on-accent); background: var(--accent-gold-1); border: none; border-radius: 11px; padding: 10px 18px; cursor: pointer; transition: background .15s ease; }
        .bpm-tool:hover { background: var(--accent-gold-2); }
        .bpm-close { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--bp-line-control); background: transparent; color: var(--text-main); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .15s ease; }
        .bpm-close:hover { border-color: var(--bp-accent); }
        .bpm-hint { text-align: center; font-family: var(--bp-font); font-size: 12.5px; color: var(--text-muted); padding: 12px 18px 0; }
        .bpm-stage { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 22px 16px 64px; }

        .bpm-canvas { width: min(560px, 94vw); min-height: 74vh; box-sizing: border-box; border-radius: 10px; padding: 48px 42px 54px; box-shadow: 0 30px 80px -30px var(--bp-shadow-color); }
        .bpm-canvas [contenteditable]:focus { outline: 1px dashed rgba(150,150,150,0.5); outline-offset: 3px; border-radius: 3px; }
        .bpm-canvas [contenteditable]:hover { cursor: text; }
        .bpm-head { text-align: center; }
        .bpm-eyebrow { font-family: var(--bp-font); text-transform: uppercase; letter-spacing: .32em; font-size: 11.5px; }
        .bpm-title { font-family: var(--bp-font); font-weight: 700; line-height: 1.12; margin: 12px 0 8px; font-size: clamp(28px, 6vw, 40px); }
        .bpm-date { font-family: var(--bp-font); font-size: 13px; letter-spacing: .08em; }
        .bpm-headrule { margin: 18px auto 6px; font-size: 15px; letter-spacing: .4em; }
        .bpm-cat { margin-top: 32px; text-align: center; }
        .bpm-cat-title { font-family: var(--bp-font); font-weight: 600; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; }
        .bpm-cat-title::before, .bpm-cat-title::after { content: none; }
        .bpm-cat-text { display: inline-block; }
        .bpm-cat-rule { display: none; }
        .bpm-list { list-style: none; margin: 0; padding: 0; }
        .bpm-item { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 0; position: relative; border-bottom: none; }
        .bpm-item:hover { background: transparent; border-radius: 0; padding-left: 0; padding-right: 0; }
        .bpm-item .bpm-name { font-family: var(--bp-font); font-weight: 500; font-size: 16.5px; line-height: 1.5; }
        .bpm-del { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(120,120,120,0.28); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
        .bpm-item:hover .bpm-del, .bpm-del:focus { opacity: 0.9; }
        .bpm-foot { margin-top: 36px; text-align: center; font-family: var(--bp-font); font-size: 12px; letter-spacing: .06em; min-height: 14px; }

        /* ── I quattro stili del menu' da esporre ──────────────────────
           Sono quadri chiusi, con una loro direzione artistica: ognuno porta
           il PROPRIO fondo e i PROPRI colori di testo, e non tocca nessun
           token dell'interfaccia.

           Prima non era cosi', e il risultato e' stato un difetto vero, non
           una questione di gusto. Tre stili su quattro prendevano il fondo (o
           il colore del titolo) da var(--bp-panel), che nel vecchio tema notte
           era SCURO. Quando il chiaro e' diventato il default, quel token e'
           passato a quasi-bianco e i testi chiari ci sono rimasti sopra:

               Elegante · nome del drink   1.24:1
               Lavagna  · nome del drink   1.24:1
               Minimal  · titolo           1.09:1

           Crema su crema. Ecco perche' "spesso non si legge bene la lista".

           Soglie applicate qui, misurate una per una: ogni testo almeno
           4.5:1 sul proprio fondo, e i nomi dei drink — che sono il contenuto
           — almeno 7:1. I valori raggiunti stanno nel commento di ogni stile.
           Un token dell'interfaccia qui dentro non deve piu' entrare: se
           qualcuno lo rimette, questo difetto torna. */

        /* Stile 1 · Elegante — nero caldo e oro.
           nome 15.9:1 · oro 9.1:1 · secondario 5.7:1 */
        .bpm-elegant {
            --bpm-fondo: #14120f; --bpm-oro: #d4b06a; --bpm-oro-dim: #a08c62; --bpm-testo: #f2ece0;
            background: var(--bpm-fondo);
            border: 1px solid rgba(212,176,106,0.38);
        }
        .bpm-elegant .bpm-eyebrow   { color: var(--bpm-oro); }
        .bpm-elegant .bpm-title     { color: var(--bpm-oro); }
        .bpm-elegant .bpm-date      { color: var(--bpm-oro-dim); }
        .bpm-elegant .bpm-headrule  { color: var(--bpm-oro); }
        .bpm-elegant .bpm-cat-title { color: var(--bpm-oro); }
        .bpm-elegant .bpm-cat-title::before,
        .bpm-elegant .bpm-cat-title::after { content: "\2726"; color: var(--bpm-oro); font-size: 0.62em; vertical-align: middle; margin: 0 0.7em; }
        .bpm-elegant .bpm-name      { color: var(--bpm-testo); }
        .bpm-elegant .bpm-foot      { color: var(--bpm-oro-dim); }

        /* Stile 2 · Minimal — carta calda e inchiostro. Il migliore in stampa.
           nome 14.7:1 · secondario 5.4:1 */
        .bpm-minimal {
            --bpm-fondo: #f7f2e8; --bpm-inchiostro: #241f18; --bpm-dim: #6b6152; --bpm-filo: #d9cdb8;
            background: var(--bpm-fondo);
            border: 1px solid var(--bpm-filo);
            color: var(--bpm-inchiostro);
        }
        .bpm-minimal .bpm-eyebrow  { color: var(--bpm-dim); }
        .bpm-minimal .bpm-title    { color: var(--bpm-inchiostro); font-weight: 600; }
        .bpm-minimal .bpm-date     { color: var(--bpm-dim); }
        .bpm-minimal .bpm-headrule { font-size: 0; margin: 20px auto 8px; }
        .bpm-minimal .bpm-headrule::after { content: ""; display: block; width: 48px; height: 1px; background: var(--bpm-filo); margin: 0 auto; }
        .bpm-minimal .bpm-cat-title { font-family: var(--bp-font); font-weight: 700; font-size: 12.5px; letter-spacing: .26em; color: var(--bpm-dim); margin-bottom: 4px; }
        .bpm-minimal .bpm-cat-rule { display: block; width: 100%; height: 1px; background: var(--bpm-filo); margin: 0 0 14px; }
        .bpm-minimal .bpm-name     { color: var(--bpm-inchiostro); }
        .bpm-minimal .bpm-foot     { color: var(--bpm-dim); }

        /* Stile 3 · Lavagna — ardesia e gesso.
           nome 13.8:1 · secondario 8.7:1 */
        .bpm-chalk {
            --bpm-fondo: #1c2420; --bpm-gesso: #eef0ea; --bpm-gesso-dim: #b9c2b6;
            background: var(--bpm-fondo);
            border: 1px solid rgba(238,240,234,0.30);
            /* La cornice e' fatta con il fondo dello stile, non con quello
               dell'app: su tema chiaro diventava un alone bianco. */
            box-shadow: 0 0 0 6px var(--bpm-fondo), 0 0 0 7px rgba(238,240,234,0.34), 0 30px 80px -30px rgba(0,0,0,0.45);
        }
        .bpm-chalk .bpm-eyebrow   { color: var(--bpm-gesso-dim); }
        .bpm-chalk .bpm-title     { color: var(--bpm-gesso); }
        .bpm-chalk .bpm-date      { color: var(--bpm-gesso-dim); }
        .bpm-chalk .bpm-headrule  { color: var(--bpm-gesso-dim); }
        .bpm-chalk .bpm-cat-title { color: var(--bpm-gesso); }
        .bpm-chalk .bpm-cat-rule  { display: block; width: 70%; margin: 0 auto 14px; border-top: 1.5px dashed rgba(238,240,234,0.5); }
        .bpm-chalk .bpm-name      { color: var(--bpm-gesso); }
        .bpm-chalk .bpm-foot      { color: var(--bpm-gesso-dim); }

        /* Stile 4 · Festa — bacca scura e accenti caldi. Era gia' autonomo, ed
           era l'unico leggibile: nome 14.2:1 · accento 12.5:1 · secondario 8.9:1 */
        .bpm-festa {
            --bpm-fondo: #34102c; --bpm-caldo: #ffd9a0; --bpm-rosa: #f0a8c6; --bpm-testo: #f7eadf;
            background: var(--bpm-fondo);
            border: 1px solid rgba(255,217,160,0.45);
        }
        .bpm-festa .bpm-eyebrow   { color: var(--bpm-rosa); }
        .bpm-festa .bpm-title     { color: var(--bpm-caldo); }
        .bpm-festa .bpm-date      { color: var(--bpm-rosa); }
        .bpm-festa .bpm-headrule  { color: var(--bpm-caldo); }
        .bpm-festa .bpm-cat-title { color: var(--bpm-caldo); }
        .bpm-festa .bpm-cat-title::before,
        .bpm-festa .bpm-cat-title::after { content: "\2766"; color: var(--bpm-rosa); font-size: 0.66em; vertical-align: middle; margin: 0 0.7em; }
        .bpm-festa .bpm-name      { color: var(--bpm-testo); }
        .bpm-festa .bpm-foot      { color: var(--bpm-rosa); }

        /* ── Pulsante "Visualizza il menù" nel dettaglio evento salvato ── */
        .bpm-evbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; margin: 2px auto 18px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--bp-accent); background: transparent; color: var(--bp-accent-ink); font-family: var(--bp-font); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
        .bpm-evbtn:hover { background: var(--bp-accent-soft); }

        /* ── Layout adattivo: il menù resta su UNA facciata, passando a 2/3 colonne ── */
        .bpm-canvas.bpm-cols-2 { width: min(740px, 96vw); }
        .bpm-canvas.bpm-cols-3 { width: min(960px, 96vw); }
        .bpm-cols-2 .bpm-cats { column-count: 2; column-gap: 44px; }
        .bpm-cols-3 .bpm-cats { column-count: 3; column-gap: 34px; }
        .bpm-cats .bpm-cat { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
        .bpm-cols-2 .bpm-cat, .bpm-cols-3 .bpm-cat { margin-top: 0; margin-bottom: 26px; }
        @media (max-width: 560px) {
            .bpm-cols-2 .bpm-cats, .bpm-cols-3 .bpm-cats { column-count: 1; }
            .bpm-canvas.bpm-cols-2, .bpm-canvas.bpm-cols-3 { width: min(560px, 94vw); }
        }

        /* Override del reset globale button { width:100%; padding:16px 24px } */
        .bpm-style-btn, .bpm-tool { width: auto; }
        .bpm-close, .bpm-del { padding: 0; }

        @media (max-width: 560px) {
            .bpm-toolbar { justify-content: center; }
            .bpm-canvas { padding: 38px 24px 44px; }
        }

        @media print {
            body.bp-printing-menu { background: #fff !important; }
            body.bp-printing-menu > *:not(#bp-menu) { display: none !important; }
            body.bp-printing-menu #bp-menu { display: block !important; position: static !important; inset: auto !important; background: none !important; overflow: visible !important; backdrop-filter: none !important; }
            body.bp-printing-menu #bp-menu .bpm-shell { display: block !important; }
            body.bp-printing-menu #bp-menu .bpm-toolbar, body.bp-printing-menu #bp-menu .bpm-hint, body.bp-printing-menu #bp-menu .bpm-del { display: none !important; }
            body.bp-printing-menu #bp-menu .bpm-stage { display: block !important; padding: 0 !important; overflow: visible !important; }
            body.bp-printing-menu #bp-menu .bpm-canvas { width: 100% !important; min-height: auto !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
            body.bp-printing-menu #bp-menu .bpm-canvas [contenteditable]:focus { outline: none !important; }
        }

/* ═══ blocco 4 di 9 (era riga 1992 di index.html) ═══ */
        .bpl-wrap { width: 100%; max-width: 640px; margin: 0 auto; }
        .bpl-head { text-align: center; margin: 2px 0 18px; }
        .bpl-head h2 { font-family: var(--bp-font); font-weight: 600; font-size: clamp(22px, 6vw, 28px); color: var(--text-main); margin: 0 0 6px; }
        .bpl-sub { font-family: var(--bp-font); font-size: 13.5px; color: var(--text-muted); line-height: 1.5; max-width: 460px; margin: 0 auto; }
        .bpl-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
        .bpl-toolbar input { flex: 1 1 200px; }
        .bpl-count { text-align: center; font-family: var(--bp-font); font-size: 12px; color: var(--text-muted); margin-bottom: 12px; letter-spacing: .04em; }
        .bpl-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 30px; }
        .bpl-card { border: none; border-radius: 18px; padding: 16px; background: var(--bp-panel); box-shadow: var(--bp-shadow); }
        .bpl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
        .bpl-name { font-family: var(--bp-font); font-weight: 600; font-size: 16px; color: var(--text-main); line-height: 1.25; }
        .bpl-badge { display: inline-block; font-family: var(--bp-font); font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: none; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--bp-line); color: var(--bp-accent-ink); }
        .bpl-badge.analc { border-color: var(--bp-accent); color: var(--bp-accent-ink); }
        .bpl-ings { font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 8px; }
        .bpl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
        .bpl-btn { width: auto; text-transform: none; letter-spacing: 0; font-family: var(--bp-font); font-weight: 500; font-size: 13px; padding: 9px 15px; border-radius: 14px; border: none; background: var(--bp-accent-soft); color: var(--bp-accent-ink); cursor: pointer; }
        .bpl-btn:hover { border-color: var(--bp-accent); }
        .bpl-btn.primary { min-height: 50px; background: var(--accent-gold-1); color: var(--bp-on-accent); border-color: var(--accent-gold-1); }
        .bpl-btn.primary:hover { background: var(--accent-gold-2); }
        .bpl-btn.danger { color: var(--danger-color); }
        .bpl-btn.danger:hover { border-color: var(--bp-danger); }
        .bpl-empty { text-align: center; font-family: var(--bp-font); color: var(--text-muted); padding: 40px 10px; }
        .bpl-new { white-space: nowrap; }
        /* Editor */
        .bpl-editor { display: flex; flex-direction: column; gap: 14px; padding-bottom: 30px; }
        .bpl-editor .bpl-field-label { font-family: var(--bp-font); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-bottom: 6px; display: block; }
        .bpl-editor input, .bpl-editor select { border: none; background: var(--bp-panel); box-shadow: none; }
        .bpl-editor select { background: var(--bp-sunken); }
        .bpl-ing { display: flex; flex-direction: column; gap: 9px; border-radius: 18px; background: var(--bp-panel); }
        .bpl-ing > div + div { border-top: 1px solid var(--bp-line); padding-top: 9px; }
        .bpl-ing input[type="number"] { background: var(--bp-accent-soft); text-align: right; }
        .bpl-ed-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
        .bpl-ed-actions .bpl-btn { flex: 1 1 130px; padding: 13px 16px; font-size: 14px; }

/* ═══ blocco 5 di 9 (era riga 2038 di index.html) ═══ */
        .bpset-eyebrow { font-family:var(--bp-font); font-size:12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--bp-accent-ink); margin-bottom:10px; }
        .bpset-title {
    font-family: var(--bp-font); font-weight: 600; font-size: 32px; letter-spacing: -.04em; color: var(--text-main); margin: 0 0 24px;
        }
        .bpset-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 18px 16px; border: none; background: var(--bp-panel);
        }
        .bpset-row:last-child { border-bottom:none; }
        .bpset-label { font-family:var(--bp-font); font-size:15px; font-weight: 500; color:var(--text-main); }
        .bpset-desc { display:block; font-family:var(--bp-font); font-size:13px; font-weight:400; color:var(--text-muted); margin-top:3px; max-width:40ch; }
        .bpset-select { width: auto; min-width: 0; max-width: 50%; flex: 0 1 auto; text-align: right; }
        .bpset-theme { flex:0 0 auto; }
        .bpset-row-toggle .bpset-toggle-tx { flex:1 1 200px; min-width:0; }
        .bpset-switch {
    position: relative; flex: 0 0 auto; width: 51px; height: 44px; padding: 0; border-radius: 16px; border: none; background: none; cursor: pointer;
        }
        .bpset-switch::before {
    content: ""; position: absolute; inset: 7px 0 6px; border-radius: 999px; background: var(--bp-line-control);
        }
        .bpset-switch:hover { transform:none; background:var(--input-bg); border-color:var(--accent-gold-2); }
        .bpset-switch-knob {
    position: absolute; top: 10px; left: 3px; width: 25px; height: 25px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgb(7 18 38 / 24%); transition: transform 220ms ease-out;
        }
        .bpset-switch[aria-checked="true"] {
    background: none;
        }
        .bpset-switch[aria-checked="true"]:hover {
    background: none;
        }
        .bpset-switch[aria-checked="true"] .bpset-switch-knob {
    transform: translateX(20px); background: #fff;
        }

.bpset-row:has(#lang-selector) { border-radius: 18px 18px 0 0; }
.bpset-row:last-child { border-radius: 0 0 18px 18px; }
.bpset-select { background: none; border: none; color: var(--bp-accent-ink); }
.bpset-row:has(.bpset-theme) { gap: 12px; }
.bpset-row .bpset-theme { margin-left: auto; }

.bph-hero-ic .bp-clay { width: 60px; height: 60px; }

/* ═══ blocco 6 di 9 (era riga 2184 di index.html) ═══ */
        .bp-homebtn { color: var(--bp-accent-ink); }
        .bp-homebtn svg { width: 23px; height: 23px; }

        #bp-home {
    display: none; animation: stepFade 220ms ease-out;
        }
        body.bp-home #bp-home { display: block; }
        body.bp-home .app-stepper, body.bp-home .step-panel { display: none !important; }

        .bph-inner {
    max-width: 760px; margin: 0 auto;
        }
        .bph-eyebrow {
    text-align: left; font-family: var(--bp-font); text-transform: none; letter-spacing: -.02em; font-size: 22px; font-weight: 500; color: var(--bp-ink); margin: 12px 0 24px;
        }

        .bph-hero, .bph-resume, .bph-card { justify-content: flex-start; text-transform: none; letter-spacing: 0; text-align: left; cursor: pointer; }

        .bph-hero {
    display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px; border-radius: 18px;
    border: none; background: var(--bp-panel); margin-bottom: 14px; box-shadow: var(--bp-shadow);
    transition: background 200ms ease-out, transform 200ms ease-out;
        }
        .bph-hero:hover {
    background: var(--bp-panel); transform: none;
        }
        .bph-hero-ic {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 60px; height: 60px; background: none;
        }
        .bph-hero-tx { display: flex; flex-direction: column; min-width: 0; }
        .bph-hero-title {
    font-family: var(--bp-font); font-weight: 600; font-size: 26px; letter-spacing: -.04em; color: var(--text-main); line-height: 1.2;
        }
        .bph-hero-desc {
    font-family: var(--bp-font); font-size: 14px; color: var(--bp-ink-soft); margin-top: 10px; line-height: 1.6;
        }
        .bph-hero-arrow {
    margin-left: auto; flex: 0 0 auto; color: var(--bp-accent-ink); font-size: 26px; line-height: 1;
        }

        .bph-resume { display: flex; align-items: stretch; width: 100%; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--input-bg); margin-bottom: 22px; overflow: hidden; transition: border-color .2s ease; }
        .bph-resume:hover { transform: none; border-color: var(--bp-accent); }
        .bph-resume-main { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; width: auto; padding: 18px 20px; background: transparent; border: none; border-radius: 0; text-transform: none; letter-spacing: 0; text-align: left; cursor: pointer; }
        .bph-resume-main:hover { transform: none; background: transparent; border-color: transparent; }
        .bph-resume-reset { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; width: auto; min-width: 0; padding: 0 18px; background: transparent; border: none; border-left: 1px solid var(--bp-line-control); border-radius: 0; color: var(--text-muted); cursor: pointer; font: 700 11.5px/1.2 var(--bp-font); letter-spacing: 0.01em; text-transform: none; white-space: nowrap; transition: color .18s ease, background-color .18s ease; }
        .bph-resume-reset:hover { transform: none; color: var(--bp-on-danger); background: var(--danger-color); border-color: var(--danger-color); }
        .bph-reset-ic { font-size: 13px; }
        .bph-resume-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: var(--bp-accent-soft); color: var(--bp-accent-ink); font-size: 20px; }
        .bph-resume-tx { display: flex; flex-direction: column; min-width: 0; }
        .bph-resume-title { font-family: var(--bp-font); font-weight: 700; font-size: 15.5px; color: var(--text-main); }
        .bph-resume-desc { font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); margin-top: 2px; }
        .bph-resume-arrow { margin-left: auto; flex: 0 0 auto; color: var(--bp-accent-ink); font-size: 22px; }

        .bph-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 36px; }
        .bph-card { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 20px 18px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass-bg); transition: transform .2s cubic-bezier(0.16,1,0.3,1), border-color .2s ease; }
        .bph-card:hover { transform: none; border-color: var(--bp-accent); background: var(--glass-bg); }
        .bph-card-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: var(--bp-accent-soft); color: var(--bp-accent-ink); font-size: 20px; }
        .bph-card-tx { display: flex; flex-direction: column; min-width: 0; }
        .bph-card-title { font-family: var(--bp-font); font-weight: 600; font-size: 16.5px; color: var(--text-main); line-height: 1.2; }
        .bph-card-desc { font-family: var(--bp-font); font-size: 12.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }

        @media (max-width: 560px) {
            .bph-grid { grid-template-columns: 1fr; }
            .bph-hero { padding: 24px 20px; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
            .bph-hero .bph-hero-tx { flex-basis: calc(100% - 48px); order: 3; }
            .bph-hero .bph-hero-arrow { order: 4; align-self: center; }
            .bph-hero .bph-hero-ic { width: 100%; justify-content: flex-start; margin-bottom: 12px; }
            .bph-hero-ic .bp-clay { width: 64px; height: 64px; }
            .bph-hero-title { font-size: 27px; }
        }

/* ═══════════════════════════════════════════════════════════
   PAGINE DI TESTO · privacy e simili
   ═══════════════════════════════════════════════════════════
   Prosa, non interfaccia: colonna stretta (65-75 caratteri), interlinea
   generosa, gerarchia data da scala e peso. Riusa gli stessi token
   dell'app, cosi' non esiste un secondo aspetto da mantenere.
   ═══════════════════════════════════════════════════════════ */
.pagina-testo {
    background: var(--bp-bg);
    color: var(--bp-ink);
    font-family: var(--bp-font);
    font-size: var(--t-base);
    line-height: 1.65;
    margin: 0;
    padding: var(--s-6) var(--s-4) var(--s-8);
}

.testo-wrap {
    max-width: 68ch;
    margin: 0 auto;
}

.testo-torna {
    margin: 0 0 var(--s-6);
    font-size: var(--t-sm);
}

.pagina-testo h1 {
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 var(--s-3);
}

.pagina-testo h2 {
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: var(--s-6) 0 var(--s-2);
}

.pagina-testo p,
.pagina-testo ul { margin: 0 0 var(--s-4); }

.pagina-testo ul { padding-left: var(--s-5); }
.pagina-testo li { margin-bottom: var(--s-2); }

.testo-sommario {
    font-size: var(--t-md);
    color: var(--bp-ink-soft);
    line-height: 1.55;
    margin-bottom: var(--s-6);
}

.pagina-testo strong { font-weight: 600; }

.pagina-testo a {
    color: var(--bp-accent-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}
.pagina-testo a:hover { color: var(--bp-accent-hover); }
.pagina-testo a:focus-visible {
    outline: 2px solid var(--bp-accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.pagina-testo hr {
    border: 0;
    border-top: 1px solid var(--bp-line);
    margin: var(--s-8) 0;
}

.testo-piede {
    margin-top: var(--s-8);
    padding-top: var(--s-4);
    border-top: 1px solid var(--bp-line);
    font-size: var(--t-sm);
    color: var(--bp-ink-faint);
}

@media print {
    .pagina-testo { padding: 0; }
    .testo-torna, .testo-piede { display: none; }
}

/* ─── Footer dell'app ───────────────────────────────────────
   Prima era un blocco di stili inline con oro e "tutti i diritti
   riservati". Ora dice le tre cose che servono davvero a chi arriva:
   dov'e' il codice, cosa succede ai suoi dati, con che licenza. */
.bp-footer {
    max-width: 1080px; margin: 0 auto; padding: 32px 16px 40px; border-top: none; text-align: center; font-family: var(--bp-font);
}

.bp-footer-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2) var(--s-5);
    margin-bottom: var(--s-3);
}

.bp-footer-link a {
    color: var(--bp-ink-soft);
    text-decoration: none;
    padding: var(--s-1) 0;
    border-bottom: 1px solid transparent;
    transition: color var(--bp-fast) var(--bp-ease), border-color var(--bp-fast) var(--bp-ease);
}
.bp-footer-link a:hover { color: var(--bp-accent-ink); border-bottom-color: var(--bp-accent); }
.bp-footer-link a:focus-visible {
    outline: 2px solid var(--bp-accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.bp-footer-nota {
    margin: 0;
    font-size: var(--t-xs);
    color: var(--bp-ink-faint);
}

@media print { .bp-footer { display: none; } }
/* Privacy, licenza, contatti, GitHub e progetti sono righe della lista di Altro:
   qui i collegamenti non si vedono piu' (restano nel markup per i crawler, gli
   href sono veri). Del piede resta solo il copyright, sulla pagina di Altro. */
.bp-footer-link { display: none; }
body:not([data-sezione="altro"]) .bp-footer,
body[data-sotto] .bp-footer { display: none; }

/* ─── Pagine di contenuto (le guide) ────────────────────────────
   Stessi token dell'app: chi arriva da una ricerca e poi apre il
   calcolatore non deve avere l'impressione di cambiare sito. */
.pagina-testo .topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--bp-line);
}

.pagina-testo .topnav .brand {
    font-weight: 700;
    font-size: var(--t-md);
    color: var(--bp-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.pagina-testo .topnav .demo {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--bp-accent-ink);
    text-decoration: none;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--bp-line-strong);
    border-radius: var(--r-md);
    transition: border-color var(--bp-fast) var(--bp-ease), background var(--bp-fast) var(--bp-ease);
}
.pagina-testo .topnav .demo:hover {
    border-color: var(--bp-accent);
    background: var(--bp-accent-soft);
}

.pagina-testo article h2 { margin-top: var(--s-7); }
.pagina-testo article h3 { font-size: var(--t-base); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }

/* La formula: e' il cuore della guida, quindi ha una superficie propria
   invece di un bordo colorato su un lato. */
.pagina-testo .formula {
    background: var(--bp-sunken);
    border: 1px solid var(--bp-line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    margin: var(--s-5) 0;
    font-size: var(--t-sm);
    line-height: 1.8;
}
.pagina-testo .formula b { color: var(--bp-accent-ink); font-weight: 600; }

.pagina-testo table {
    width: 100%;
    table-layout: fixed;
    overflow-wrap: anywhere;
    border-collapse: collapse;
    margin: var(--s-5) 0;
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}
.pagina-testo th, .pagina-testo td {
    padding: var(--s-3) var(--s-2);
    border-bottom: 1px solid var(--bp-line);
    text-align: left;
}
.pagina-testo th { font-weight: 600; color: var(--bp-ink-soft); }

.pagina-testo .cta {
    background: var(--bp-accent-soft);
    border: 1px solid var(--bp-accent);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    margin: var(--s-7) 0;
}
.pagina-testo .cta h3 { margin-top: 0; color: var(--bp-accent-ink); }

.pagina-testo .btn {
    display: inline-block;
    margin-top: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: var(--bp-accent);
    color: var(--bp-on-accent);
    border-radius: var(--r-md);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--bp-fast) var(--bp-ease);
}
@media (hover: hover) { .pagina-testo .btn:hover { background: var(--bp-accent-hover); color: var(--bp-on-accent); } }

.pagina-testo .related {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid var(--bp-line);
}
.pagina-testo .related h4 {
    font-size: var(--t-xs);
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--bp-ink-faint);
    margin: 0 0 var(--s-3);
}
.pagina-testo .related a { display: block; margin-bottom: var(--s-2); }

.pagina-testo > .testo-wrap > footer,
.pagina-testo footer {
    margin-top: var(--s-8);
    padding-top: var(--s-4);
    border-top: 1px solid var(--bp-line);
    font-size: var(--t-sm);
    color: var(--bp-ink-faint);
}

@media print {
    .pagina-testo .topnav, .pagina-testo .cta, .pagina-testo .related { display: none; }
}


/* ─── Icone SVG nelle card della home ───────────────────────────
   I caratteri tipografici prendevano la misura da font-size; un SVG no,
   e senza una dimensione esplicita collassa o riempie il contenitore. */
.bph-card-ic svg { width: 22px; height: 22px; }
.bph-hero-ic svg { width: 26px; height: 26px; }

/* ═══════════════════════════════════════════════════════════
   NAVIGAZIONE · una <nav>, due layout
   ═══════════════════════════════════════════════════════════
   Sotto i 900px sta in fondo, dove arriva il pollice. Sopra diventa una
   colonna a sinistra: una barra in fondo a un monitor da 27" e' a 40 cm
   dallo sguardo e il pollice non c'entra niente. Stesso markup, perche'
   due componenti da tenere allineati divergono sempre.

   ── Scala z-index, dichiarata ──
   Prima convivevano 1310, 1400, 9000 e 100000 senza un ordine scritto, e
   ogni aggiunta era una scommessa. D'ora in poi:
       10   barra di navigazione
       100  intestazioni appiccicose dentro una sezione
       1000 dialoghi veri (welcome, wizard, menu' da esporre, suggeritore)
       2000 toast
   La barra sta SOTTO i dialoghi di proposito: mentre un dialogo e' aperto
   non si cambia sezione. */

.bp-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 10; display: flex; align-items: stretch;
    background: var(--bp-panel); border: none; padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 16px rgb(23 43 75 / 3%);
}

.bp-tab {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--bp-ink-faint);
    font-family: var(--bp-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    cursor: pointer;
    transition: color 160ms var(--bp-ease);
}
.bp-tab:hover { transform: none; background: none; border-color: transparent; }
.bp-tab-ic { width: 22px; height: 22px; flex: 0 0 auto; }
.bp-tab-tx {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lo stato attivo non e' solo colore: il tratto dell'icona si ingrossa e
   l'etichetta pesa di piu'. Chi non distingue i colori deve poterlo vedere
   lo stesso. */
.bp-tab[aria-current="page"] { color: var(--bp-accent-ink); }
.bp-tab[aria-current="page"] .bp-tab-ic { stroke-width: 2.4; }
.bp-tab[aria-current="page"] .bp-tab-tx { font-weight: 800; }

/* Il contenuto non deve finire sotto la barra. */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* Tastiera virtuale aperta: la barra sparisce, altrimenti copre il campo su
   cui stai scrivendo o si stacca a meta' schermo. La classe la mette il
   JavaScript guardando visualViewport; dove quell'API non c'e', la barra
   resta dov'e' — meglio una barra di troppo che una navigazione che sparisce
   per un falso positivo. */
body.bp-tastiera .bp-tabbar { display: none; }
body.bp-tastiera { padding-bottom: 0; }

/* Dialogo aperto: la barra si nasconde. La scala qui sopra la voleva
   SOTTO i dialoghi, ma i dialoghi stanno dentro .container, che fa da
   contesto di impilamento: il loro z-index 1000 vale solo li' dentro, e la
   barra (z 10, figlia del body) finiva sopra Indietro/Avanti del wizard.
   Spostare tutti i dialoghi fuori dal contenitore toccava troppo markup;
   mentre un dialogo e' aperto la barra non serve comunque, perche' non si
   cambia sezione. */
body:has(.bpc-overlay.show, .bpm-overlay.show, .suggeritore-modal.show) .bp-tabbar { display: none; }

@media (min-width: 900px) {
    .bp-tabbar {
        inset: 0 auto 0 0;
        width: 240px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        padding: 24px 12px;
        border-top: none;
        border-right: none;
    }
    .bp-tab {
        flex: 0 0 auto;
        height: 46px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 14px;
        border-radius: var(--r-md);
        font-size: 14px;
    }
    .bp-tab[aria-current="page"] { background: var(--bp-accent-soft); color: var(--bp-accent-ink); }
    body { padding-bottom: 0; padding-left: 240px; }
    body.bp-tastiera { padding-left: 240px; }
    body.bp-tastiera .bp-tabbar { display: flex; }
    /* Barra a sinistra: il toast si centra sul contenuto, non sulla finestra. */
    .toast { bottom: 32px; left: calc(50% + 120px); }
}

/* Blur is limited to the two persistent chrome surfaces. Opaque fallback above. */
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .header, .bp-tabbar { background: color-mix(in srgb, var(--bp-panel) 80%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}
/* ── L'isola: la barra sotto i 900px non tocca i bordi ──
   Galleggia sul contenuto, che scorre sotto il vetro. Solo icone: l'etichetta
   resta per gli screen reader (e per la colonna a sinistra sopra i 900px).
   Il cursore e' uno pseudo-elemento mosso dalla voce con aria-current: niente
   JavaScript, e i bottoni restano quattro e nello stesso ordine. */
@media (max-width: 899px) {
    :root {
        --bp-isola-h: 64px;
        --bp-isola-fondo: max(12px, env(safe-area-inset-bottom, 0px));
        --bp-isola-ingombro: calc(var(--bp-isola-h) + var(--bp-isola-fondo));
    }
    .bp-tabbar {
        inset: auto 16px var(--bp-isola-fondo) 16px;
        height: var(--bp-isola-h);
        padding: 5px;
        border: 1px solid color-mix(in srgb, var(--bp-line) 70%, transparent);
        border-radius: 32px;
        box-shadow: 0 10px 30px rgb(23 43 75 / 16%);
    }
    .bp-tabbar::before {
        content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px;
        width: calc((100% - 10px) / 4);
        border-radius: 26px; background: var(--bp-accent-soft);
        transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    .bp-tabbar:has(.bp-tab:nth-child(2)[aria-current="page"])::before { transform: translateX(100%); }
    .bp-tabbar:has(.bp-tab:nth-child(3)[aria-current="page"])::before { transform: translateX(200%); }
    .bp-tabbar:has(.bp-tab:nth-child(4)[aria-current="page"])::before { transform: translateX(300%); }
    .bp-tab { position: relative; height: 100%; border-radius: 26px; }
    .bp-tab-ic { width: 26px; height: 26px; }
    .bp-tab-tx {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    body { padding-bottom: calc(var(--bp-isola-ingombro) + 16px); }
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    @media (max-width: 899px) {
        .bp-tabbar {
            background: color-mix(in srgb, var(--bp-panel) 85%, transparent);
            backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
        }
    }
}
@media (min-width: 900px) {
    .header { padding-inline: 32px; }
    .bp-marchio { font-size: 14px; }
    .bp-tabbar { padding-top: 88px; }
    .container { padding-inline: 40px; }
    .bph-inner { padding-top: 32px; }
}

/* ── Sezioni: una sola autorita' sulla visibilita' ──
   Prima decidevano in due, e non erano d'accordo: body.bp-home nascondeva i
   pannelli del flusso, mentre gli overlay a schermo intero si mostravano da
   soli con .show. Adesso comanda body[data-sezione], e basta.
   Restano fuori da questo meccanismo i dialoghi VERI (welcome, wizard,
   menu' da esporre, suggeritore): quelli si sovrappongono a una sezione, non
   la sostituiscono. */
body[data-sezione] #bp-home,
body[data-sezione] .app-stepper,
body[data-sezione] .step-panel,
body[data-sezione] #bp-events,
body[data-sezione] #bp-library,
body[data-sezione] #bp-settings { display: none; }

body[data-sezione] #bp-altro { display: none; }

body[data-sezione="home"]    #bp-home      { display: block; }
body[data-sezione="evento"]  .app-stepper  { display: flex; }
body[data-sezione="evento"]  .step-panel.active { display: block; }
body[data-sezione="salvati"] #bp-events    { display: block; }

/* "Altro" ha un suo albero: la landing elenca le voci, e ogni voce e' una
   sottorotta. Senza, tre pannelli diversi dovrebbero convivere dietro la
   stessa voce senza un modo per dire a quale sei. */
body[data-sezione="altro"]                     #bp-altro    { display: block; }
body[data-sezione="altro"][data-sotto]         #bp-altro    { display: none; }
body[data-sezione="altro"][data-sotto="ricette"] #bp-library,
body[data-sezione="altro"][data-sotto="amari"] #bp-library { display: block; }
body[data-sezione="altro"][data-sotto="impostazioni"] #bp-settings { display: block; }

/* Le tre sezioni promosse non sono piu' finestre sopra la pagina: sono la
   pagina. Niente position:fixed, niente sfondo che copre, niente scroll
   bloccato sul body. */
body[data-sezione] #bp-events,
body[data-sezione] #bp-library,
body[data-sezione] #bp-settings {
    position: static;
    inset: auto;
    z-index: auto;
    background: none;
    overflow: visible;
}
body[data-sezione] #bp-events .bpc-shell,
body[data-sezione] #bp-library .bpc-shell,
body[data-sezione] #bp-settings .bpc-shell {
    min-height: 0;
    padding-top: 8px;
}
/* Stesso margine di Altro: il pannello e' gia' dentro il .container. */
@media (max-width: 899px) {
    body[data-sezione] #bp-events .bpc-shell,
    body[data-sezione] #bp-library .bpc-shell { padding-inline: 2px; }
}
/* Il tasto chiudi di una sezione non ha piu' senso: non c'e' niente da
   chiudere, si cambia voce nella barra. */
body[data-sezione] #bp-events .bpc-close,
body[data-sezione] #bp-library .bpc-close,
body[data-sezione] #bp-settings .bpc-close { display: none; }

@media print {
    .bp-tabbar { display: none !important; }
    body { padding-bottom: 0 !important; padding-left: 0 !important; }
}

/* ── "Altro": la landing ──
   Un elenco, non una griglia di card: sono voci di servizio, non azioni
   principali, e devono somigliare a un indice. */
body[data-sezione="altro"]:not([data-sotto]) > .container { padding-block: 0; }
.bp-altro { max-width: 640px; margin: 0 auto; padding: 24px 20px 40px; }
.bp-altro-tit {
    font-family: var(--bp-font); font-size: 32px; font-weight: 600; letter-spacing: -.04em; color: var(--bp-ink); margin: 0 0 24px;
}
.bp-altro-lista {
    display: flex; flex-direction: column; border: none; border-radius: 18px; overflow: hidden; background: var(--bp-panel); box-shadow: var(--bp-shadow);
}
.bp-altro-lista + .bp-altro-lista { margin-top: 20px; }
.bp-altro-voce {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 54px; padding: 14px 18px;
    background: none; border: none; border-radius: 0; text-align: left; text-decoration: none;
    color: var(--bp-ink); font-family: var(--bp-font); font-size: var(--t-base);
    font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.bp-altro-voce + .bp-altro-voce { border-top: none; }
.bp-altro-voce:hover { transform: none; background: none; border-color: transparent;}
.bp-altro-ar {
    width: 8px; height: 8px; flex: 0 0 auto; border: solid var(--bp-ink-faint); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); font-size: 0; margin-right: 3px;
}
.bp-altro-esterni .bp-altro-voce { font-weight: 500; color: var(--bp-ink-soft); }

/* ── Pannello Info (privacy, licenza, contatti) ──
   Testo da leggere, non un modulo: colonna stretta, niente card. */
.bp-info-body { max-width: 34rem; font-family: var(--bp-font); color: var(--bp-ink); }
.bp-info-body h2 { font-size: clamp(22px, 6vw, 28px); font-weight: 600; margin: 0 0 16px; color: var(--bp-ink); }
.bp-info-body p { font-size: var(--t-base); line-height: 1.6; color: var(--bp-ink-soft); margin: 0 0 14px; }
.bp-info-body .bp-info-mail {
    font-size: 17px; font-weight: 700; color: var(--bp-ink);
    user-select: all; overflow-wrap: anywhere; margin: 6px 0 4px;
}
.bp-info-azioni { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.bp-info-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 48px; padding: 12px 18px;
    border: 1px solid var(--bp-line-control); border-radius: var(--r-md);
    background: var(--bp-panel); color: var(--bp-ink);
    font-family: var(--bp-font); font-size: var(--t-base); font-weight: 600;
    text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .bp-info-btn:hover { transform: none; border-color: var(--bp-accent); background: var(--bp-panel); } }
.bp-info-btn.primario { min-height: 50px; background: var(--bp-accent); border-color: var(--bp-accent); color: var(--bp-on-accent); }
@media (hover: hover) { .bp-info-btn.primario:hover { background: var(--bp-accent-hover); border-color: var(--bp-accent-hover); } }

/* ── Home · cruscotto ──
   Non piu' un menu di card: quelle erano una seconda strada per posti che
   ora hanno la loro voce nella barra. Qui c'e' lo stato dell'evento in
   corso, che l'app sapeva e non diceva. */
.bph-cruscotto { text-align: left; }
.bph-ev-nome { font-family: var(--bp-font); font-size: var(--t-lg); font-weight: 600; color: var(--bp-ink); margin: 0 0 4px; }
.bph-ev-sub { font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); margin: 0 0 20px; }
.bph-cifre { display: flex; gap: 28px; margin-bottom: 20px; }
.bph-cifra { display: flex; flex-direction: column; gap: 2px; }
.bph-cifra-n { font-family: var(--bp-font); font-size: var(--t-xl); font-weight: 600; color: var(--bp-accent-ink); font-variant-numeric: tabular-nums; }
.bph-cifra-l { font-family: var(--bp-font); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bp-ink-faint); }
.bph-passi { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.bph-passi-p { display: inline-flex; gap: 6px; }
.bph-passi-p i { width: 9px; height: 9px; border-radius: 50%; background: var(--bp-line-strong); }
.bph-passi-p i.on { background: var(--bp-accent); }
.bph-passi-tx { font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); }
.bph-secondaria {
    width: 100%; margin-top: 10px; min-height: 50px; padding: 13px 18px; background: var(--bp-accent-soft); border: none;
    border-radius: var(--r-md); color: var(--bp-accent-ink); font-family: var(--bp-font); font-size: var(--t-sm); font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.bph-sez-tit { font-family: var(--bp-font); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--bp-ink-faint); margin: 32px 0 12px; text-align: left; }
.bph-salvati { display: flex; flex-direction: column; border: 1px solid var(--bp-line); border-radius: var(--r-lg); overflow: hidden; background: var(--bp-panel); }
.bph-salvato {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 14px 18px; background: none; border: none; border-radius: 0;
    text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.bph-salvato + .bph-salvato { border-top: none; }
@media (hover: hover) { .bph-salvato:hover { transform: none; background: var(--bp-sunken); border-color: transparent; } }
.bph-salvato-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bph-salvato-nome { font-family: var(--bp-font); font-size: var(--t-base); font-weight: 600; color: var(--bp-ink); }
.bph-salvato-meta { font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); }

/* ═══════════════════════════════════════════════════════════
   FOGLIO DI STAMPA
   ═══════════════════════════════════════════════════════════
   A schermo non esiste. In stampa e' l'unica cosa che esiste. */
.print-sheet { display: none; }

@media print {
    /* L'ALLOWLIST. Si dichiara cosa stampare e il resto sparisce, senza
       doverlo elencare: e' l'opposto della blocklist che aveva causato il
       difetto, e non peggiora quando all'app si aggiunge un elemento.
       #print-sheet DEVE essere figlio diretto del body, altrimenti questo
       selettore lo nasconde insieme al suo contenitore. */
    body.bp-stampa-lista > *:not(#print-sheet) { display: none !important; }
    body.bp-stampa-lista { padding: 0 !important; background: #fff !important; }
    body.bp-stampa-lista .print-sheet { display: block !important; }

    .print-sheet {
        color: #000;
        font-family: var(--bp-font);
        font-size: 11pt;
        line-height: 1.45;
    }
    .ps-testa { margin-bottom: 8mm; }
    .ps-titolo { font-size: 18pt; font-weight: 800; margin: 0 0 1mm; }
    .ps-meta { font-size: 10pt; color: #444; margin: 0; }

    /* Un reparto non si spezza fra due pagine se ci sta intero. */
    .ps-gruppo { margin-bottom: 6mm; break-inside: avoid; page-break-inside: avoid; }
    .ps-gruppo-tit {
        font-size: 9.5pt; font-weight: 800; letter-spacing: .08em;
        text-transform: uppercase; color: #000;
        margin: 0 0 2mm; padding-bottom: 1mm; border-bottom: 0.4mm solid #000;
    }
    .ps-voci { list-style: none; margin: 0; padding: 0; }
    .ps-voce {
        display: flex; align-items: baseline; gap: 3mm;
        padding: 1.6mm 0; border-bottom: 0.15mm solid #ddd;
        break-inside: avoid; page-break-inside: avoid;
    }

    /* Lista da spuntare: la casella e la quantita' vengono prima, perche' e'
       cio' che si guarda scorrendo uno scaffale. */
    .ps-box {
        flex: 0 0 auto; width: 4.5mm; height: 4.5mm;
        border: 0.35mm solid #000; border-radius: 0.8mm;
    }
    .ps-qta {
        flex: 0 0 auto; min-width: 16mm;
        font-weight: 800; font-size: 12pt; font-variant-numeric: tabular-nums;
    }
    .ps-nome { flex: 1 1 auto; min-width: 0; }
    .ps-unit, .ps-tot { flex: 0 0 auto; font-variant-numeric: tabular-nums; text-align: right; }
    .ps-unit { min-width: 20mm; color: #444; }
    .ps-tot  { min-width: 22mm; font-weight: 700; }

    .ps-piede { margin-top: 6mm; padding-top: 2mm; border-top: 0.4mm solid #000; break-inside: avoid; }
    .ps-stima { font-size: 10pt; color: #333; margin: 0; }
    .ps-totale { font-size: 13pt; font-weight: 800; margin: 0 0 3mm; text-align: right; }
    .ps-note { font-size: 9pt; color: #666; margin: 0; padding-top: 12mm; border-top: 0.15mm dashed #999; }

    @page { margin: 14mm 12mm; }
}

/* Dialogo di scelta del formato. */
.bp-print-dialog {
    border: none; border-radius: 24px; padding: 0; max-width: 480px; width: calc(100vw - 40px);
    background: var(--bp-panel); color: var(--bp-ink); box-shadow: var(--bp-shadow);
}
.bp-print-dialog::backdrop {
    background: rgb(7 18 38 / 44%); animation: fadeInOverlay 240ms ease-out;
}
.bp-print-form { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.bp-print-tit { font-family: var(--bp-font); font-size: var(--t-md); font-weight: 600; margin: 0 0 4px; }
.bp-print-op {
    display: flex; gap: 12px; align-items: center; padding: 16px; border: none; border-radius: 14px;
    background: var(--bp-sunken); cursor: pointer; text-transform: none; letter-spacing: 0;
}
.bp-print-op:has(input:checked) {
    background: var(--bp-accent-soft); color: var(--bp-accent-ink);
}
.bp-print-op input {
    appearance: none; width: 44px; height: 44px; min-height: 44px; margin: 0; flex: 0 0 auto;
    order: 2; margin-left: auto; background: none; border: none; position: relative;
}
.bp-print-op-tx { display: flex; flex-direction: column; gap: 2px; }
.bp-print-op-nome { font-family: var(--bp-font); font-size: var(--t-base); font-weight: 500; }
.bp-print-op-desc { font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); }
.bp-print-azioni { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.bp-print-annulla, .bp-print-ok { width: auto; padding: 11px 18px; border-radius: var(--r-md); font-family: var(--bp-font); font-size: var(--t-sm); font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.bp-print-annulla { background: none; border: 1px solid var(--bp-line-control); color: var(--bp-ink-soft); }
.bp-print-ok { min-height: 50px; background: var(--bp-accent); border: none; color: var(--bp-on-accent); }

.bp-print-op input:checked::after { content: ""; position: absolute; top: 16px; left: 17px; width: 8px; height: 13px; border: solid var(--bp-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bp-print-dialog[open] { animation: bpSheetIn 280ms var(--bp-sheet-ease); }
@keyframes bpSheetIn { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 899px) {
    .bp-print-dialog { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .bp-print-dialog[open] { animation-name: bpSheetRise; }
}
@keyframes bpSheetRise { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Correggere una voce ──
   Niente piu' modalita': la riga si tocca e sale una scheda solo per lei. */
#risultati li.voce-tocca { cursor: pointer; border-radius: var(--r-sm); transition: background-color 150ms ease; }
@media (hover: hover) { #risultati li.voce-tocca:hover { background: var(--bp-sunken); } }
#risultati li.voce-tocca:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }
/* "corretta" e' un ::after: non entra nel testo della riga, che e' quello
   che i golden fotografano e che finisce nell'evento salvato. */
#risultati li.voce-corretta > span[data-badge]::after {
    content: attr(data-badge);
    display: inline-block; margin-left: 8px; padding: 1px 7px; vertical-align: 2px;
    border-radius: 999px; background: var(--bp-accent-soft); color: var(--bp-accent-ink);
    font-size: var(--t-xs); font-weight: 700;
}
.bp-lista-tocca { margin: 6px 0 0; text-align: center; font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); }

/* Una quantita' decisa a mano si vede: sopravvive ai ricalcoli. */
.mod-qta-tua { border-color: var(--bp-accent) !important; color: var(--bp-accent-ink); font-weight: 700; }
#risultati li > strong.qta-tua { color: var(--bp-accent-ink); border-bottom: 2px solid var(--bp-accent); }

/* La scheda: in fondo allo schermo sul telefono, al centro sul desktop. */
.bp-sheet-in { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.bp-sheet-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bp-sheet-testa .bp-print-tit { margin: 4px 0 0; }
.bp-sheet-x {
    flex: none; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bp-sunken); border: none; border-radius: 50%; color: var(--bp-ink-soft); font-size: 24px; cursor: pointer;
}
.bp-voce-calc { margin: 0; font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); font-variant-numeric: tabular-nums; }
.bp-voce-campi { margin: 0;  background: var(--bp-sunken); box-shadow: none;}
.bp-voce-campi .bp-riga-lbl { font-size: var(--t-sm); text-transform: none; letter-spacing: 0; }
#bp-voce .bp-stepper .mod-prezzo { width: 7.5rem; min-height: 44px; padding: 8px 12px; border: none; border-radius: 10px; background: var(--bp-accent-soft); color: var(--bp-ink); font-family: var(--bp-font-num); text-align: right;}
.bp-voce-nota:empty { display: none; }
.bp-voce-nota { margin: 0; padding: 10px 14px; font-family: var(--bp-font); font-size: var(--t-xs); color: var(--bp-ink-faint); }
.mod-campo-inerte .bp-stepper { opacity: .5; }
.mod-campo-inerte .mod-scorta { text-decoration: line-through; }
.bp-sheet .bp-print-annulla:disabled { opacity: .4; cursor: default; }


/* Condividi: le due scelte sono bottoni grandi, non radio. */
.bp-share-op { width: 100%; text-align: left; justify-content: flex-start; background: var(--bp-sunken); color: var(--bp-ink); text-transform: none; letter-spacing: 0; }
@media (hover: hover) { .bp-share-op:hover { border-color: var(--bp-accent); background: var(--bp-accent-soft); transform: none; } }

/* La Lista: un'azione sola, nella barra in fondo come nella pagina Evento. */
.step-panel[data-stepid="risultati"] .bp-lista-azione { display: flex; }

/* ── L'evento salvato ── */
.bpe-tot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 16px; font-family: var(--bp-font); }
.bpe-tot b { font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: var(--bp-accent-ink); }
.bpe-tot span { font-size: var(--t-sm); color: var(--bp-ink-faint); }
/* Tre azioni uguali, icona sopra e scritta sotto. Nessuna e' blu pieno:
   qui il blu pieno vuol dire "dove sei", ed e' solo il cursore
   dell'interruttore qui sotto. */
.bpe-azioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.bpe-az {
    width: 100%; min-height: 64px; padding: 10px 6px; border-radius: var(--r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border: none; background: var(--bp-accent-soft); color: var(--bp-accent-ink); font-family: var(--bp-font);
    font-size: var(--t-xs); font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer;
    transition: background-color 200ms ease-out, transform 200ms ease-out;
}
.bpe-az .bpe-ic { width: 20px; height: 20px; color: var(--bp-accent-ink); }
.bpe-az span { line-height: 1.2; text-align: center; }
@media (hover: hover) { .bpe-az:hover { transform: none; border-color: var(--bp-accent); background: var(--bp-accent-soft); } }
.bpe-az:active { transform: scale(.97); }
.bpe-az:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }

/* L'interruttore Da comprare / Preventivo: una pillola con un cursore che
   scivola sotto la scheda scelta. data-tab sul contenitore decide dove sta
   il cursore; bpEventOpen lo fa partire dalla scheda di prima. */
.bpe-switch {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 22px;
    padding: 4px; border-radius: 14px; background: var(--bp-sunken); border: none;
}
.bpe-sw-cursore {
    position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
    border-radius: 11px; background: var(--bp-panel); box-shadow: 0 2px 6px rgb(23 43 75 / 10%);
    transition: transform 240ms var(--bp-sheet-ease);
}
.bpe-switch[data-tab="preventivo"] .bpe-sw-cursore { transform: translateX(100%); }
.bpe-sw-op {
    position: relative; z-index: 1; width: 100%; min-height: 52px; margin: 0; padding: 6px 10px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: none; border: none; border-radius: 999px; box-shadow: none;
    color: var(--bp-ink-soft); font-family: var(--bp-font); text-transform: none; letter-spacing: 0; cursor: pointer;
    transition: color 200ms ease;
}
.bpe-sw-op:hover { transform: none; background: none; color: var(--bp-ink); }
.bpe-sw-op.on, .bpe-sw-op.on:hover {
    color: var(--bp-accent-ink);
}
.bpe-sw-op:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 3px; }
.bpe-sw-op .bpe-ic { flex: none; width: 20px; height: 20px; }
.bpe-sw-tx { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.bpe-sw-nm { font-size: var(--t-sm); font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.bpe-sw-dato { font-size: var(--t-xs); font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .bpe-sw-cursore, .bpe-sw-op { transition: none; }
}

.bpe-prev-gr {
    margin-bottom: 24px; padding: 18px; border-radius: 18px; background: var(--bp-panel); box-shadow: var(--bp-shadow);
}
.bpe-prev-gr .gt {
    display: flex; align-items: center; gap: 8px; font-family: var(--bp-font); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: -.02em; color: var(--bp-ink); padding-bottom: 10px; border-bottom: 1px dashed var(--bp-line);
}
.bpe-prev-riga, .bpe-prev-sub {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem; gap: 10px; align-items: baseline;
    padding: 12px 0; border-bottom: 1px dashed var(--bp-line); font-family: var(--bp-font); font-size: 13px; color: var(--bp-ink);
}
.bpe-prev-riga .qt { color: var(--bp-ink-faint); text-align: right; }
.bpe-prev-riga .cs, .bpe-prev-sub .cs { text-align: right; }
.bpe-prev-sub { grid-template-columns: minmax(0, 1fr) 6.5rem; border-bottom: none; font-weight: 700; color: var(--bp-ink-soft); }
.bpe-prev-totale {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin-top: 6px; padding: 18px 0 4px; border-top: 1px dashed var(--bp-line);
    font-family: var(--bp-font); font-size: var(--t-base); font-weight: 500;
}
.bpe-prev-totale b {
    font-size: 28px; font-weight: 600; letter-spacing: -.045em; color: var(--bp-accent-ink); white-space: nowrap;
}
.bpe-prev-pp { margin: 4px 0 0; font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); text-align: right; }

/* Bozza messa da parte: e' il modo in cui la promessa "il tuo lavoro non
   viene toccato" si mantiene, invece di essere solo scritta nel messaggio. */
.bph-parcheggio {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin: 20px 0 0; padding: 14px 16px; text-align: left;
    background: var(--bp-sunken); border: 1px solid var(--bp-line); border-radius: var(--r-lg);
}
.bph-parcheggio-tx { font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-soft); }
.bph-parcheggio-az { display: flex; gap: 8px; }
.bph-parcheggio-az button {
    width: auto; padding: 8px 14px; border-radius: var(--r-md);
    background: var(--bp-accent); border: none; color: var(--bp-on-accent);
    font-family: var(--bp-font); font-size: var(--t-sm); font-weight: 700;
    text-transform: none; letter-spacing: 0; cursor: pointer;
}
.bph-parcheggio-az .bph-scarta { background: none; border: 1px solid var(--bp-line-control); color: var(--bp-ink-faint); }

/* ════════════════════════════════════════════════════════════
   PAGINA EVENTO (ottobre 2026)
   Setup e Menu insieme, righe invece di card, una barra in fondo con il
   costo. Classi nuove (bp-ev-*, bp-riga, bp-stepper) invece di ritoccare
   quelle vecchie: le regole dell'era oro sono sparse in nove blocchi e
   correggerle una a una avrebbe lasciato residui. I campi tengono gli id.
   ════════════════════════════════════════════════════════════ */

/* Setup e Menu si vedono insieme, qualunque dei due sia "attivo": il
   passo attivo resta quello che dice vaiAStep() (e che si salva), qui si
   decide solo cosa si vede. */
body[data-sezione="evento"]:has(.step-panel.active[data-stepid="step-setup"], .step-panel.active[data-stepid="step-menu"]) .step-panel[data-stepid="step-setup"],
body[data-sezione="evento"]:has(.step-panel.active[data-stepid="step-setup"], .step-panel.active[data-stepid="step-menu"]) .step-panel[data-stepid="step-menu"] {
    display: block;
    animation: none;
}

.bp-ev { max-width: 640px; margin: 0 auto 28px; font-family: var(--bp-font); color: var(--bp-ink); }
.bp-ev-testa { display: grid; gap: 4px; margin-bottom: 24px; }
.bp-ev-eyebrow { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; color: var(--bp-accent-ink); }
/* Il nome dell'evento e' il titolo della pagina: si scrive dove si legge. */
.bp-ev input.bp-ev-nome[type="text"] {
    width: 100%; padding: 4px 0 6px; margin: 0; font-size: 30px; font-weight: 600;
    letter-spacing: -.04em; color: var(--bp-ink); background: none; border: none; border-radius: 0; box-shadow: none;
}
.bp-ev input.bp-ev-nome[type="text"]:focus { border-bottom-color: var(--bp-accent); transform: none; box-shadow: none; background: none; }
.bp-ev-tit {
    font-size: var(--t-base); font-weight: 500; color: var(--bp-ink-soft); margin: 0 0 10px; letter-spacing: -.015em; text-transform: none;
}

.bp-gruppo {
    background: var(--bp-panel); border: none; border-radius: var(--r-lg); box-shadow: var(--bp-shadow);
}
.bp-riga {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px;
}
.bp-gruppo > .bp-riga + .bp-riga,
.bp-gruppo > .bp-riga + .bp-altre,
.bp-altre > .bp-riga { border-top: none; }
.bp-riga-lbl { display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; font-size: var(--t-base); font-weight: 500; color: var(--bp-ink); }
/* Le <label> globali sono in maiuscoletto (eredita' del vecchio form): qui
   no, ne' quando la riga E' la label ne' quando la contiene. */
.bp-ev label.bp-riga-lbl,
.bp-ev .bp-riga-lbl label { font: inherit; font-weight: 500; color: var(--bp-ink); margin: 0; text-transform: none; letter-spacing: 0; }
.bp-ev label.bp-ev-eyebrow { margin: 0; text-transform: none; letter-spacing: .02em; font-size: var(--t-sm); font-weight: 500; color: var(--bp-ink-soft); }
.bp-riga-col { flex-direction: column; align-items: stretch; gap: 4px; }
.bp-riga-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bp-bevitori { font-size: var(--t-base); color: var(--bp-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-bevitori b { color: var(--bp-ink); font-weight: 700; }
.bp-bevitori-pct { color: var(--bp-ink-faint); font-size: var(--t-sm); }
.bp-ev input[type="range"] { width: 100%; accent-color: var(--bp-accent); }
.bp-gruppo > .bp-riga, .bp-altre > .bp-riga, .bp-opz, .bp-voce, .bp-altro-voce, .bpset-row { position: relative; }
.bp-gruppo > .bp-riga + .bp-riga, .bp-gruppo > .bp-riga + .bp-altre, .bp-altre > .bp-riga,
.bp-gruppo > .bp-riga-col + .bp-riga-col, .bp-gruppo > .bp-riga + .bp-riga-col { border-top: none; }
.bp-gruppo > .bp-riga + .bp-riga::before, .bp-altre::before, .bp-altre > .bp-riga::before,
.bp-voce + .bp-voce::before, .bp-opz + .bp-opz::before, .bp-altro-voce + .bp-altro-voce::before, .bpset-row + .bpset-row::before {
    content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--bp-line); pointer-events: none;
}
.bp-altre { position: relative; }
.bp-opz:active, .bp-altro-voce:active, .bpc-chkitem:active, .bph-salvato:active { background: var(--bp-accent-soft); }
@media (hover: hover) { .bp-altro-voce:hover { background: var(--bp-accent-soft); } }

/* − valore + */
.bp-stepper {
    display: flex; align-items: center; gap: 0; flex: 0 0 auto; background: var(--bp-accent-soft); border-radius: 12px;
}
.bp-ev .bp-step-btn, .bp-sheet .bp-step-btn {
    width: 44px; height: 44px; padding: 0; flex: 0 0 auto; display: grid; place-items: center;
    border: none; border-radius: 12px; background: none; color: var(--bp-accent-ink);
    font-size: 22px; font-weight: 400; line-height: 1; text-transform: none; letter-spacing: 0;
}
@media (hover: hover) { .bp-ev .bp-step-btn:hover, .bp-sheet .bp-step-btn:hover { transform: none; border-color: var(--bp-accent); background: var(--bp-panel); } }
.bp-ev .bp-step-btn:active, .bp-sheet .bp-step-btn:active { transform: scale(0.94); }
.bp-ev .bp-stepper input[type="number"], .bp-sheet .bp-stepper input[type="number"] {
    width: 52px; padding: 6px 2px; margin: 0; text-align: center; font-family: var(--bp-font-num);
    font-size: var(--t-md); font-weight: 600; color: var(--bp-ink); font-variant-numeric: tabular-nums;
    background: none; border: none; border-inline: 1px solid var(--bp-line); border-radius: 0; box-shadow: none; appearance: textfield;
}
.bp-ev .bp-stepper input[type="number"]:focus, .bp-sheet .bp-stepper input[type="number"]:focus { border-color: var(--bp-accent); background: var(--bp-panel); transform: none; box-shadow: none; }
.bp-ev .bp-stepper input::-webkit-outer-spin-button,
.bp-ev .bp-stepper input::-webkit-inner-spin-button,
.bp-sheet .bp-stepper input::-webkit-outer-spin-button,
.bp-sheet .bp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bp-ev select.bp-select {
    width: auto; max-width: 62%; flex: 0 1 auto; text-overflow: ellipsis; padding: 8px 24px 8px 6px; margin: 0;
    font-size: var(--t-sm); font-weight: 500; color: var(--bp-accent-ink);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%237d8da5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;
    border: none; border-radius: var(--r-sm); box-shadow: none;
}
.bp-ev select.bp-select:focus { transform: none; border-color: var(--bp-accent); box-shadow: none; }

/* Altre opzioni: un <details> che si presenta come una riga. */
.bp-altre > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 54px; padding: 10px 14px; cursor: pointer; list-style: none;
    font-weight: 600; color: var(--bp-ink-soft);
}
.bp-altre > summary::-webkit-details-marker { display: none; }
.bp-altre-fr { font-size: 20px; line-height: 1; color: var(--bp-ink-faint); transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1); }
.bp-altre[open] .bp-altre-fr { transform: rotate(90deg); }
.bp-altre > summary:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: -2px; border-radius: var(--r-lg); }

/* Barra in fondo: costo + Genera. Appiccicata sopra la barra di
   navigazione (56px) finche' si e' nella pagina evento. */
.bp-ev-azione {
    display: none; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    align-items: center; gap: 14px; max-width: 1080px; margin: 0 auto; padding: 12px 16px;
    background: var(--bp-bg); border: none; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgb(23 43 75 / 4%);
}
body[data-sezione="evento"]:has(.step-panel.active[data-stepid="step-setup"], .step-panel.active[data-stepid="step-menu"]) .bp-ev-azione {
    display: flex;
}
@media (min-width: 900px) { .bp-ev-azione { left: 240px; bottom: 0; } }
.bp-ev-azione .stima-live {
    flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; gap: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    background: none; border: none; border-radius: 0;
}
.bp-ev-azione .stima-live .sl-tot { font-size: var(--t-md); line-height: 1.2; color: var(--bp-ink); }
.bp-ev-azione .stima-live .sl-pp { font-size: var(--t-xs); font-weight: 500; color: var(--bp-ink-faint); }
.bp-ev-azione .bp-ev-genera {
    flex: 0 0 auto; width: auto; min-height: 50px; padding: 12px 20px; margin-left: auto;
    background: var(--bp-accent); border: none; color: var(--bp-on-accent); border-radius: 14px;
    font-size: var(--t-sm); font-weight: 500; text-transform: none; letter-spacing: 0;
}
/* Senza menu non c'e' costo da mostrare: il bottone prende tutta la barra. */
.bp-ev-azione .stima-live[style*="none"] + .bp-ev-genera { flex: 1 1 auto; }
@media (hover: hover) { .bp-ev-azione .bp-ev-genera:hover { background: var(--bp-accent-hover); border-color: var(--bp-accent-hover); transform: none; } }
@media print { .bp-ev-azione { display: none !important; } }
/* Con la barra evento in vista il messaggio di conferma sale sopra di lei,
   invece di coprire il costo e il bottone. */
body[data-sezione="evento"]:has(.step-panel.active[data-stepid="step-setup"], .step-panel.active[data-stepid="step-menu"], .step-panel.active[data-stepid="risultati"]) .toast {
    bottom: calc(56px + 12px + 76px + 12px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
    body[data-sezione="evento"]:has(.step-panel.active[data-stepid="step-setup"], .step-panel.active[data-stepid="step-menu"], .step-panel.active[data-stepid="risultati"]) .toast { bottom: 108px; }
}

input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--bp-accent); }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgb(16 33 67 / 22%); }

/* The fixed action bar reserves its height in the page, including the footer. */
body[data-sezione="evento"] { padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px)); }
body[data-sezione="evento"] .container { padding-bottom: 32px; }
body.bp-tastiera .bp-ev-azione { bottom: 0; }
@media (max-width: 899px) {
    /* La barra d'azione galleggia sopra l'isola, con la stessa forma. */
    .bp-ev-azione {
        left: 16px; right: 16px; bottom: calc(var(--bp-isola-ingombro) + 8px);
        padding: 8px 8px 8px 16px; border: 1px solid color-mix(in srgb, var(--bp-line) 70%, transparent); border-radius: 24px;
        background: var(--bp-panel); box-shadow: 0 10px 30px rgb(23 43 75 / 16%);
    }
    body.bp-tastiera .bp-ev-azione { bottom: 8px; }
    body[data-sezione="evento"] { padding-bottom: calc(var(--bp-isola-ingombro) + 92px); }
    .toast { bottom: calc(var(--bp-isola-ingombro) + 12px); }
    body[data-sezione="evento"]:has(.step-panel.active[data-stepid="step-setup"], .step-panel.active[data-stepid="step-menu"], .step-panel.active[data-stepid="risultati"]) .toast {
        bottom: calc(var(--bp-isola-ingombro) + 92px);
    }
}
@media (min-width: 900px) {
    body[data-sezione="evento"] { padding-bottom: 74px; }
    .bp-ev-azione { bottom: 0; }
    body[data-sezione="evento"]:has(.step-panel.active[data-stepid="step-setup"], .step-panel.active[data-stepid="step-menu"]) .container {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 32px; padding-top: 24px;
    }
    body[data-sezione="evento"] .container > :is(.meta-row, .app-stepper) { grid-column: 1 / -1; width: 100%; }
    .step-panel { min-width: 0; }
    .bp-ev { max-width: none; }
    #step-menu { padding-top: 0; }
    .bp-ev-menu-testa { min-height: 78px; }
}

/* ── Menu dell'evento: filtri, righe, pallini ── */
.bp-ev-menu-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bp-ev-menu-testa .bp-ev-tit { margin: 0; font-variant-numeric: tabular-nums; }
.bp-ev .bp-link {
    width: auto; padding: 4px 2px; border: none; background: none; border-radius: var(--r-sm);
    color: var(--bp-accent-ink); font-size: var(--t-sm); font-weight: 700; text-transform: none; letter-spacing: 0;
}
.bp-ev .bp-link:hover { transform: none; background: none; text-decoration: underline; }

.bp-chips {
    display: flex; gap: 0; overflow-x: auto; padding: 4px; margin: 0 0 14px; scrollbar-width: none;
    position: relative; isolation: isolate; background: var(--bp-sunken); border-radius: 12px;
}
.bp-chips::-webkit-scrollbar { display: none; }
.bp-chip,
.bp-ev .bp-chip {
    flex: 1 0 auto; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 44px; padding: 7px 12px; border: none; border-radius: 9px; background: transparent;
    color: var(--bp-ink-soft); font-family: var(--bp-font); font-size: var(--t-xs); font-weight: 500; text-transform: none; letter-spacing: 0;
}
.bp-chip:hover {
    transform: none; background: transparent; color: var(--bp-accent-ink);
}
.bp-chip.on, .bp-chip.on:hover {
    background: transparent; border-color: transparent; color: var(--bp-accent-ink);
}
.bp-chip-n { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .85; }
.bp-chip-n.empty { opacity: .55; }

.bp-voce { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 6px 10px 14px; }
#bp-menu-righe > .bp-voce + .bp-voce { border-top: none; }
.bp-voce-tx { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; text-align: left; }
.bp-voce-nome { font-weight: 500; color: var(--bp-ink); overflow-wrap: anywhere; }
.bp-voce-sub { font-size: var(--t-xs); color: var(--bp-ink-faint); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Frequenza a 5 pallini: il segno resta piccolo, il bersaglio e' 44px. */
.bp-pallini { display: flex; align-items: center; flex: 0 0 auto; }
.bp-ev .bp-pallino {
    width: 44px; height: 44px; padding: 0; border: none; background: none; border-radius: 6px;
    display: grid; place-items: center;
}
.bp-ev .bp-pallino::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid var(--bp-line-control); background: transparent;
    transition: background 150ms cubic-bezier(0.25, 1, 0.5, 1), border-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
}
.bp-ev .bp-pallino.on::before { background: var(--bp-accent); border-color: var(--bp-accent); }
.bp-ev .bp-pallino:hover { transform: none; background: none; }
.bp-ev .bp-togli {
    width: 44px; height: 44px; padding: 0; flex: 0 0 auto; border: none; background: none; border-radius: 50%;
    display: grid; place-items: center; color: var(--bp-ink-faint);
}
.bp-ev .bp-togli svg { width: 18px; height: 18px; }
@media (hover: hover) { .bp-ev .bp-togli:hover { transform: none; background: var(--bp-sunken); color: var(--bp-danger); } }

.bp-ev .bp-aggiungi {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; min-height: 54px; padding: 12px 14px;
    border: none; border-top: 1px solid var(--bp-line); border-radius: 0 0 var(--r-lg) var(--r-lg); background: none;
    color: var(--bp-accent-ink); font-size: var(--t-base); font-weight: 700; text-transform: none; letter-spacing: 0;
}
#bp-menu-righe:empty + .bp-menu-vuoto[hidden] + .bp-aggiungi { border-top: none; }
@media (hover: hover) { .bp-ev .bp-aggiungi:hover { transform: none; background: var(--bp-sunken); } }
.bp-piu {
    width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
    display: grid; place-items: center; background: var(--bp-accent-soft); color: var(--bp-accent-ink);
    font-size: 18px; font-weight: 600; line-height: 1;
}
.bp-menu-vuoto { margin: 0; padding: 16px 14px 14px; color: var(--bp-ink-faint); font-size: var(--t-sm); }
.bp-nota { margin: 8px 2px 0; color: var(--bp-ink-faint); font-size: var(--t-xs); }
#fermentati-panel .bp-nota { padding: 0 14px 12px; margin: 0; }
#fermentati-panel > .bp-riga + .bp-riga { border-top: none; }

/* ── Selettore drink: schermo intero su telefono, finestra su desktop ── */
.bp-picker {
    background: rgb(7 18 38 / 44%);
}
.bp-pk-shell {
    max-width: 640px; height: 100%; margin: 0 auto;
    display: flex; flex-direction: column;
    padding: 14px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    font-family: var(--bp-font); color: var(--bp-ink);
}
.bp-picker.show { display: block; overflow: hidden; }
.bp-pk-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; }
.bp-pk-testa h2 { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--bp-ink); }
.bp-pk-cerca { position: relative; margin-bottom: 10px; }
.bp-pk-cerca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--bp-ink-faint); pointer-events: none; }
:is(.bp-picker, .bp-ev) input.bp-pk-q {
    width: 100%; margin: 0; padding: 12px 14px 12px 40px;
    font-size: 16px; font-weight: 500; color: var(--bp-ink);
    background: var(--bp-panel); border: 1px solid var(--bp-line-control); border-radius: var(--r-md); box-shadow: none;
}
:is(.bp-picker, .bp-ev) input.bp-pk-q:focus { transform: none; border-color: var(--bp-accent); box-shadow: none; background: var(--bp-panel); }
.bp-pk-chips { padding-bottom: 10px; }
/* Nella colonna flex solo l'elenco si accorcia. I filtri hanno overflow-x:
   auto, e un elemento flex con overflow puo' scendere fino a zero: senza
   questa riga venivano schiacciati a una striscia. */
.bp-pk-testa, .bp-pk-cerca, .bp-pk-chips, .bp-pk-piede { flex: 0 0 auto; }
.bp-pk-lista {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bp-panel); border: none; border-radius: var(--r-lg);
}
:is(.bp-picker, .bp-ev) .bp-pk-voce {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 9px 14px;
    border: none; border-radius: 0; background: none; text-align: left; justify-content: flex-start;
    color: var(--bp-ink); font-size: var(--t-base); font-weight: 500; text-transform: none; letter-spacing: 0;
}
:is(.bp-picker, .bp-ev) .bp-pk-voce + .bp-pk-voce { border-top: none; }
@media (hover: hover) { :is(.bp-picker, .bp-ev) .bp-pk-voce:hover { transform: none; background: var(--bp-sunken); } }
.bp-pk-cb {
    width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
    border: 1.5px solid var(--bp-line-control); display: grid; place-items: center;
}
.bp-pk-voce.on .bp-pk-cb { background: var(--bp-accent); border-color: var(--bp-accent); }
.bp-pk-voce.on .bp-pk-cb::after {
    content: ""; width: 10px; height: 6px; transform: translateY(-1px) rotate(-45deg);
    border-left: 2.5px solid var(--bp-on-accent); border-bottom: 2.5px solid var(--bp-on-accent);
}
.bp-pk-crea .bp-voce-nome { color: var(--bp-accent-ink); font-weight: 700; }
.bp-pk-piede { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.bp-pk-conto { flex: 1 1 auto; font-size: var(--t-sm); color: var(--bp-ink-soft); font-variant-numeric: tabular-nums; }
.bp-pk-conto b { font-size: var(--t-md); color: var(--bp-ink); }
.bp-picker .bp-pk-usa {
    width: auto; min-height: 50px; padding: 12px 20px;
    background: var(--bp-accent); border: 1px solid var(--bp-accent); color: var(--bp-on-accent);
    border-radius: var(--r-md); font-size: var(--t-base); font-weight: 700; text-transform: none; letter-spacing: 0;
}
@media (hover: hover) { .bp-picker .bp-pk-usa:hover { transform: none; background: var(--bp-accent-hover); border-color: var(--bp-accent-hover); } }
.bp-picker .bpc-close {
    width: 44px; height: 44px;
}

/* Sheets use the existing modal manager: focus, Escape and close commands are unchanged. */
:is(#bp-picker, #bp-info, #bp-welcome, #bp-config).show { display: flex; align-items: flex-end; }
:is(#bp-picker, #bp-info, #bp-welcome, #bp-config) > :is(.bpc-shell, .bp-pk-shell) {
    width: 100%; background: var(--bp-bg); border-radius: 24px 24px 0 0;
    min-height: 0; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
    animation: bpSheetRise 300ms var(--bp-sheet-ease);
}
#bp-picker .bp-pk-shell { height: 94dvh; }
#bp-config .bpc-shell { height: 100dvh; max-height: 100dvh; border-radius: 0; }
#bp-config .bpc-topbar { position: sticky; top: -20px; z-index: 4; padding-block: 8px; background: var(--bp-bg); }
#bp-config .bpc-panel { width: 100%; }
#bp-welcome .bpc-shell { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
    :is(#bp-picker, #bp-info, #bp-welcome, #bp-config).show { align-items: center; padding: 32px; }
    :is(#bp-picker, #bp-info, #bp-welcome, #bp-config) > :is(.bpc-shell, .bp-pk-shell) { border-radius: 24px; max-height: 88dvh; animation-name: bpSheetIn; box-shadow: var(--bp-shadow); }
    #bp-picker .bp-pk-shell { height: 82dvh; }
    #bp-config .bpc-shell { height: 88dvh; }
}

/* ── Flusso guidato a 5 passi (ottobre 2026) ──
   Il contenitore del passo ha la classe bp-ev: righe, stepper e selettore
   prendono le stesse regole della pagina evento. Qui solo cio' che e' del
   guidato: opzioni a pallino, segmenti, interruttori, riepilogo, barra. */
#bp-config .bpc-body { justify-content: flex-start; }
#bp-config .bpc-eyebrow { font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--bp-accent-ink); margin-bottom: 6px; }
#bp-config .bpc-q {
    color: var(--bp-ink); font-weight: 600; letter-spacing: -.04em;
}
#bp-config .bpc-desc { color: var(--bp-ink-soft); margin-bottom: 18px; }
.bpc-gruppo { margin-bottom: 18px; }
.bp-ev input.bpc-text[type="text"] {
    width: 100%; margin: 0 0 14px; padding: 12px 14px;
    font-size: var(--t-base); font-weight: 500; color: var(--bp-ink);
    background: var(--bp-panel); border: none; border-radius: var(--r-md); box-shadow: none;
}
.bp-ev input.bpc-text[type="text"]:focus { transform: none; border-color: var(--bp-accent); box-shadow: none; background: var(--bp-panel); }
.bp-ev .bp-opz {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 14px;
    border: none; border-radius: 0; background: none; text-align: left; justify-content: flex-start;
    color: var(--bp-ink); text-transform: none; letter-spacing: 0; font-weight: 500;
}
.bp-ev .bp-opz + .bp-opz { border-top: none; }
@media (hover: hover) { .bp-ev .bp-opz:hover { transform: none; background: var(--bp-sunken); } }
.bp-ev .bp-opz.sel {
    background: var(--bp-panel);
}
.bp-ev .bp-opz:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.bp-ev .bp-opz:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.bp-radio {
    order: 2; margin-left: auto; width: 24px; height: 24px; flex: 0 0 auto; border: none; display: grid; place-items: center;
}
.bp-opz.sel .bp-radio {
    color: var(--bp-accent-ink);
}
.bp-opz.sel .bp-radio::after {
    content: ""; width: 8px; height: 14px; border: solid var(--bp-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.bp-riga-nota { font-size: var(--t-sm); color: var(--bp-ink-faint); white-space: nowrap; }
.bp-sub-a-capo { white-space: normal; }
/* Una nota lunga ("Bicchiere grande, 60 ml negli highball") va a capo lei,
   non l'etichetta: "Come servi" spezzato su due righe non si legge. */
.bp-riga-nota.bp-nota-a-capo { white-space: normal; text-align: right; min-width: 0; }
.bp-riga-testa:has(.bp-nota-a-capo) .bp-riga-lbl { flex: none; }
.bp-gruppo > .bp-riga-col + .bp-riga-col,
.bp-gruppo > .bp-riga + .bp-riga-col { border-top: none; }

/* Segmenti: tre scelte esclusive affiancate. */
.bp-seg {
    display: flex; gap: 3px; padding: 4px; background: var(--bp-sunken); border-radius: 12px; position: relative; isolation: isolate;
}
.bp-ev .bp-seg button {
    flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; padding: 8px 6px;
    border: 1px solid transparent; border-radius: 8px; background: none;
    color: var(--bp-ink-soft); font-size: var(--t-sm); font-weight: 600; text-transform: none; letter-spacing: 0;
}
.bp-ev .bp-seg button:hover { transform: none; background: none; color: var(--bp-ink); }
.bp-ev .bp-seg button.on {
    background: transparent; border-color: transparent; color: var(--bp-ink);
}

.bp-seg::before, .bp-chips::before, .theme-switcher::before {
    content: ""; position: absolute; z-index: -1; left: 0; top: 4px; bottom: 4px; width: var(--bp-cursor-w, 0px);
    transform: translateX(var(--bp-cursor-x, 4px)); border-radius: 9px; background: var(--bp-panel);
    box-shadow: 0 2px 6px rgb(23 43 75 / 10%); pointer-events: none;
    transition: transform 240ms var(--bp-sheet-ease);
}

.bp-ev .bp-sw::before { content: ""; position: absolute; inset: 7px 0 6px; border-radius: 999px; background: var(--bp-line-control); }
.bp-ev .bp-sw[aria-checked="true"]::before, .bpset-switch[aria-checked="true"]::before { background: var(--bp-accent); }

/* Interruttore. */
.bp-ev .bp-sw {
    position: relative; width: 51px; height: 44px; flex: 0 0 auto; padding: 0; border: none; border-radius: 16px; background: none;
}
.bp-ev .bp-sw::after {
    content: ""; position: absolute; top: 10px; left: 3px; width: 25px; height: 25px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgb(7 18 38 / 24%); transition: transform 220ms ease-out;
}
.bp-ev .bp-sw[aria-checked="true"] {
    background: none;
}
.bp-ev .bp-sw[aria-checked="true"]::after {
    transform: translateX(20px);
}
.bp-ev .bp-sw:hover { transform: none; }

.bpc-sotto { margin-top: 4px; }
.bpc-conto { margin: 0 2px 8px; font-size: var(--t-sm); color: var(--bp-ink-soft); font-variant-numeric: tabular-nums; }
.bpc-conto b { color: var(--bp-ink); }
/* Nel guidato l'elenco non scorre da solo: scorre il passo, e la barra
   con Avanti resta ferma in fondo. */
.bpc-pk-lista { flex: none; overflow: visible; }
.bp-pk-tag {
    display: inline-block; margin-left: 8px; padding: 2px 6px 1px; vertical-align: 2px;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: none;
    border-radius: 5px; background: var(--bp-accent-soft); color: var(--bp-accent-ink);
}

.bp-riep { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; font-size: var(--t-sm); }
.bp-riep + .bp-riep { border-top: none; }
.bp-riep span:first-child { color: var(--bp-ink-faint); }
.bp-riep span:last-child { font-weight: 600; color: var(--bp-ink); text-align: right; }
.bpc-totale {
    display: grid; gap: 2px; margin: 4px 0 12px; padding: 16px;
    border-radius: var(--r-lg); background: var(--bp-accent-soft); color: var(--bp-accent-ink);
    font-variant-numeric: tabular-nums;
}
.bpc-totale-k { font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em; }
.bpc-totale b { font-weight: 600; font-size: var(--t-xl); color: var(--bp-ink); line-height: 1.2; }
.bpc-totale span:last-child { font-size: var(--t-sm); }
.bpc-nota { font-size: var(--t-xs); color: var(--bp-ink-faint); margin: 0; }

/* Barra in fondo al guidato: costo a sinistra, Indietro e Avanti a destra,
   ferma mentre il passo scorre. */
#bp-config .bpc-nav {
    position: sticky; bottom: 0; z-index: 3;
    align-items: center; gap: 10px;
    margin: auto -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bp-bg); border-top: none; box-shadow: 0 -8px 24px rgb(23 43 75 / 4%);
}
#bp-config .bpc-shell { padding-bottom: 0; }
.bpc-costo { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.2; font-family: var(--bp-font); font-variant-numeric: tabular-nums; }
.bpc-costo b { font-size: var(--t-md); color: var(--bp-ink); }
.bpc-costo span { font-size: var(--t-xs); color: var(--bp-ink-faint); }
#bp-config .bpc-back, #bp-config .bpc-next { flex: 0 0 auto; width: auto; min-height: 50px; padding: 12px 18px; text-transform: none; letter-spacing: 0; border-radius: var(--r-md); }
#bp-config .bpc-back { background: none; border-color: transparent; color: var(--bp-ink-soft); padding-inline: 10px; }
#bp-config .bpc-next { background: var(--bp-accent); color: var(--bp-on-accent); }
@media (hover: hover) { #bp-config .bpc-next:hover { background: var(--bp-accent-hover); } }

/* Manrope has measured tabular figures; Poppins does not. */
input[type="number"], .bp-bevitori, .pct-bevitori-display, .bp-riga-nota b, .bpc-count, .bpc-costo, .bpc-conto,
.bp-pk-conto b, .bp-chip-n, .sl-tot, .sl-pp, .bpc-valinput, .bpc-val, .bpc-slider-display,
.bpc-chkstat .v, .bpc-evmeta .tot, .bpe-prev-riga .qt, .bpe-prev-riga .cs, .bpe-prev-sub .cs,
#risultati li > strong, #risultati .costo-voce, #risultati .ris-sub > :last-child, .bpe-sw-dato,
.bp-voce-calc, .mod-prezzo, #risultati .total-drinks strong, .ps-qta, .ps-unit, .ps-tot {
    font-family: var(--bp-font-num); font-variant-numeric: tabular-nums;
}

/* ── La lista, compatta come il preventivo (ottobre 2026) ──
   Prima: titolo "Da preparare" a 30px su due righe, vetrina del prezzo a
   meta' schermo, un riquadro con pallino per reparto e ogni voce su due
   righe. Ora e' lo stesso impianto del preventivo dell'evento salvato:
   totale in testa a sinistra, reparti come intestazioni in maiuscoletto,
   una riga per voce (nome | quantita' | costo) e il subtotale.
   Solo a schermo: la stampa usa il foglio #print-sheet. Le regole hanno
   l'id davanti perche' devono vincere sulle vecchie, che ce l'hanno. */
@media screen {
    #risultati { margin-top: 28px; }
    #risultati .print-title {
    margin: 0 0 24px; padding: 0; border: none; font-family: var(--bp-font); font-weight: 600;
    font-size: 32px; letter-spacing: -.04em; line-height: 1.2; color: var(--bp-ink);
    }

    /* testa: totale grande, a persona accanto, il resto piccolo sotto */
    #budget-box.budget-box {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 0;
    border: none; border-radius: 0; background: none; box-shadow: none; text-align: left; overflow: visible;
    }
    #budget-box.budget-box::before, #budget-box.budget-box::after { display: none; }
    #budget-box .budget-label {
    order: 0; margin: 4px 0 10px; font-size: var(--t-sm); font-weight: 500; letter-spacing: -.015em; text-transform: none; color: var(--bp-ink-soft);
    }
    #budget-box .budget-amount {
    order: 1; margin: 0; font-family: var(--bp-font); font-size: 36px; line-height: 1.25; font-weight: 600; letter-spacing: -.045em; color: var(--bp-accent-ink); filter: none;
    }
    #budget-box .budget-perperson {
    order: 2; display: block; margin: 0; padding: 0; border: none; background: none; font-size: var(--t-sm); font-weight: 400; color: var(--bp-ink);
    }
    #budget-box .budget-sub {
    order: 3; margin-top: 16px; opacity: 1; font-family: var(--bp-font); font-size: var(--t-xs); text-transform: none; letter-spacing: 0; color: var(--bp-ink-soft);
    }
    #risultati .risultati-header {
    text-align: left; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--bp-line); border-bottom: none;
    }
    #risultati .total-drinks, #risultati .total-drinks strong {
        font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; color: var(--bp-ink-faint);
    }

    /* reparti: niente riquadri, un'intestazione con la riga sotto */
    #risultati .bp-lista-corpo > .grid { display: block; }
    #risultati .result-section {
    margin: 24px 0 0; padding: 18px 16px; border: none; border-radius: 18px; background: var(--bp-panel); box-shadow: var(--bp-shadow);
    }
    #risultati .result-section h3 {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: none;
    font-family: var(--bp-font); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: -.02em; color: var(--bp-ink);
    }
    #risultati .result-section h3::before { display: none; }
    #risultati .result-section .descrizione { margin: 8px 0 0; font-size: var(--t-xs); color: var(--bp-ink-faint); text-align: left; }

    /* una riga per voce, colonne allineate fra righe (subgrid sopra) */
    #risultati ul { grid-template-columns: minmax(0, 1fr) auto auto; }
    #risultati li,
    #risultati li:hover {
    grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 0;
    min-height: 48px; padding: 12px 0; border-radius: 0; border-bottom: 1px dashed var(--bp-line); font-size: var(--t-sm);
    }
    @supports (grid-template-columns: subgrid) {
        #risultati li, #risultati li:hover { grid-template-columns: subgrid; }
    }
    #risultati li:last-child { border-bottom: 1px solid var(--bp-line); }
    #risultati li.voce-tocca { border-radius: 0; }
    #risultati .result-section li:hover { background: none; }
    @media (hover: hover) { #risultati li.voce-tocca:hover { background: var(--bp-sunken); } }
    #risultati li > span:first-child,
    #risultati li span:first-child {
        grid-column: auto; overflow-wrap: anywhere;
        font-size: var(--t-sm); font-weight: 400; color: var(--bp-ink);
    }
    #risultati li strong {
        font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; color: var(--bp-ink-faint);
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    #risultati li > strong.qta-tua { color: var(--bp-accent-ink); font-weight: 700; }
    #risultati li .costo-voce {
    font-family: var(--bp-font-num); font-size: var(--t-sm); font-weight: 600; color: var(--bp-ink); opacity: 1; font-variant-numeric: tabular-nums;
    }
    #risultati li.voce-zero { display: none; }

    /* subtotale del reparto, come nel preventivo */
    #risultati .ris-sub {
        display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 2px 0;
        font-family: var(--bp-font); font-size: var(--t-sm); font-weight: 700; color: var(--bp-ink-soft);
        font-variant-numeric: tabular-nums;
    }
    #risultati .bp-lista-tocca { margin-top: 18px; }
}

@media screen {
    .bp-receipt { position: relative; padding: 20px 24px; margin-bottom: 32px; border-radius: 18px 18px 0 0; background: var(--bp-panel); box-shadow: var(--bp-shadow); }
    .bp-receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; background: var(--bp-panel); clip-path: polygon(0 0,100% 0,100% 100%,95% 35%,90% 100%,85% 35%,80% 100%,75% 35%,70% 100%,65% 35%,60% 100%,55% 35%,50% 100%,45% 35%,40% 100%,35% 35%,30% 100%,25% 35%,20% 100%,15% 35%,10% 100%,5% 35%,0 100%); }
    .bp-receipt > .bp-clay { width: 40px; height: 40px; margin-bottom: 0;}
    .bp-lista-corpo { min-width: 0; }
    .bp-reparto-testa { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--bp-line); }
    #risultati .bp-reparto-testa .bp-clay { width: 32px; height: 32px; }
    @media (min-width: 1100px) {
        .bp-lista-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; gap: 32px; }
        .bp-receipt { grid-column: 2; grid-row: 1; position: sticky; top: 144px; }
        .bp-lista-corpo { grid-column: 1; grid-row: 1; }
        #risultati .result-section:first-child { margin-top: 0; }
    }
}

/* Revisione UI · stessi componenti e stessa navigazione, bersagli reali
   da 44px, focus interno dove il contenitore ritaglia e temi coerenti. */
button, input:not([type="hidden"]), select, .help-tip { min-height: 44px; }
button { min-width: 44px; }
button:disabled, button[disabled] { opacity: 1; filter: none; color: var(--bp-ink-faint); background: var(--bp-sunken); border-color: var(--bp-line); }
@media (hover: hover) { button:disabled:hover { background: var(--bp-sunken); border-color: var(--bp-line); } }
.bpc-back[disabled], .bp-sheet .bp-print-annulla:disabled { opacity: 1; color: var(--bp-ink-faint); }


@media (hover: hover) { .bp-tab:hover { color: var(--bp-accent-ink); background: var(--bp-sunken); } }
.bp-tab:focus-visible,
.theme-switcher button:focus-visible,
.bp-altro-voce:focus-visible,
.bp-opz:focus-visible,
.bp-pk-voce:focus-visible { outline-offset: -3px; }
.theme-switcher { border-radius: var(--r-md); }
.theme-switcher button { font-size: var(--t-sm); text-transform: none; letter-spacing: 0; }
@media (hover: hover) { .theme-switcher button:hover:not(.active) { background: var(--bp-sunken); color: var(--bp-ink); transform: none; } }
.theme-switcher button.active:hover {
    background: transparent; color: var(--bp-ink); transform: none;
}
.theme-switcher button.active:focus-visible {
    outline-color: var(--bp-accent); outline-offset: -4px;
}
.bpset-label { text-transform: none; letter-spacing: 0; margin: 0; }
.bpset-select { padding: 8px 12px; color: var(--bp-accent-ink); }
.bpset-desc { line-height: 1.5; }

.help-tip { width: 44px; flex-basis: 44px; margin-left: 0; border: none; border-radius: var(--r-sm); }
.help-tip::before { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; }
.help-tip::after { content: none; }
.bp-ev .bp-riga-lbl { position: relative; }
.bp-ev .help-tip { position: static; }
.bp-ev .help-bubble { left: 0; transform: none; max-width: min(240px, calc(100vw - 64px)); }
.bp-ev .bp-riga:has(.help-tip) { flex-wrap: wrap; }
.bp-ev .bp-riga:has(.help-tip) > .bp-riga-lbl { flex-basis: 140px; }
.bp-ev .bp-riga:has(.help-tip) > .bp-stepper { margin-left: auto; }
.bp-ev input[type="range"] { padding-block: 10px; }
.bp-chip-n, .bp-chip-n.empty, .bpe-sw-dato { opacity: 1; }
body.bp-home .bph-hero-desc, .bp-opz.sel .bp-voce-sub { color: var(--bp-ink-soft); }

.bp-voce-tx, .bp-pk-voce .bp-voce-nome { min-width: 0; }
.bpc-evkebab { top: 8px; right: 8px; }
.bpc-evcard-main { min-height: 44px; padding-right: 40px; border-radius: var(--r-sm); }
@media (hover: hover) { .bpc-evcard-main:hover { background: var(--bp-sunken); } }
.bpc-chkitem { min-height: 44px; }
@media (hover: hover) { .bpc-chkitem:hover { background: var(--bp-sunken); } }
.bpc-evmenu { top: 54px; backdrop-filter: none; }
.bpc-chkbox { color: var(--bp-on-accent); }
.bp-footer-link a, .pagina-testo .topnav a, .pagina-testo .related a, .testo-torna a {
    display: inline-flex; align-items: center; min-height: 44px;
}

@media (max-width: 560px) {
    .bp-voce { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 8px; padding: 10px 8px 8px 14px; }
    .bp-voce-tx { grid-column: 1; grid-row: 1; }
    .bp-pallini { grid-column: 1 / -1; grid-row: 2; }
    .bp-voce .bp-togli { grid-column: 2; grid-row: 1; }
    .bp-ev-menu-testa { align-items: center; }
    .bpset-row-toggle { flex-wrap: nowrap; }
    #bp-config .bpc-nav { flex-wrap: wrap; }
    #bp-config .bpc-costo { flex: 1 0 100%; }
    #bp-config .bpc-back, #bp-config .bpc-next { flex: 1 1 0; min-height: 50px; }
}

@media screen {
    #risultati li.voce-tocca { min-height: 44px; }
}
/* Anche le regole storiche e i componenti definiti dopo il vecchio reset
   rispettano la preferenza. I cambi di stato restano immediati. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    button:hover, button:active, a:active { transform: none !important; }
}