/*
 * 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.
 */

/* ═══════════════════════════════════════════════════════════════════
   TIPOGRAFIA · la dichiarazione dei font
   ═══════════════════════════════════════════════════════════════════

   ⚠️ Questo blocco MANCAVA, e la mancanza era invisibile.

   `--bp-font` chiedeva 'Manrope', sei pagine facevano il <link rel="preload">
   dei due woff2 e sw.js li precacava — ma nessuno dichiarava mai la faccia.
   Senza @font-face il nome 'Manrope' vale solo se il font e' installato nel
   sistema di chi guarda: su tutti gli altri l'app cadeva sul secondo nome
   della pila, system-ui, e scaricava ~40 KB di font a ogni prima visita per
   non usarli. Misurato in produzione: document.fonts.size === 0, e una riga
   in 'Manrope' larga esattamente quanto la stessa riga in una famiglia
   inventata.

   ⚠️ Non fidarsi di document.fonts.check('16px Manrope'): risponde true
      anche quando la faccia non c'e'. Per sapere se un font e' davvero
      caricato si MISURA una riga e la si confronta con una famiglia che non
      esiste. tests/ui-font.spec.js fa esattamente questo.

   Sono file variabili (un solo file copre l'asse dei pesi 200-800), quindi
   niente @font-face per peso. I due sottoinsiemi sono separati da
   unicode-range: latin-ext viene scaricato solo da chi scrive caratteri che
   lo richiedono.

   font-display: swap — il testo compare subito con il ripiego e passa a
   Manrope quando arriva. Su una PWA che deve restare leggibile offline e'
   preferibile a un blocco iniziale.
   ═══════════════════════════════════════════════════════════════════ */

@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.

           Neutri VERI (hue 250, croma quasi nullo): grigi che non tirano
           ne' al caldo ne' al freddo, cosi' l'unico colore della pagina e'
           l'accento. L'accento e' blu ardesia (hue 258) e resta raro.
           Mai #000 o #fff: il bianco pieno abbaglia sotto i neon di un
           supermercato, il nero pieno sbava sulla carta.
           ═══════════════════════════════════════════════════════════ */
        :root {
            color-scheme: light dark;

            /* superfici */
            --bp-bg:        oklch(97.2% 0.002 250);
            --bp-panel:     oklch(99%   0.001 250);
            --bp-sunken:    oklch(94.5% 0.003 250);
            /* La fascia di testata. Serve un gradino VISIBILE: il fondo pagina
               sta al 97,2% e --bp-sunken al 94,5%, cioe' 2,7 punti — a schermo
               quella differenza non si legge come una fascia, si legge come
               niente. Difetto riportato: "non vedo la fascia grigia in alto". */
            --bp-band:      oklch(91% 0.004 250);

            /* inchiostro */
            --bp-ink:       oklch(22%   0.004 250);
            --bp-ink-soft:  oklch(43%   0.005 250);
            --bp-ink-faint: oklch(52%   0.006 250);

            /* 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:         oklch(82% 0.005 250);
            --bp-line-control: oklch(64% 0.007 250);
            --bp-line-strong:  oklch(70% 0.006 250);

            /* accento · blu ardesia
               --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(45% 0.105 258);
            --bp-accent-hover: oklch(38% 0.108 258);
            --bp-accent-soft:  oklch(95% 0.020 258);
            --bp-accent-ink:   oklch(34% 0.090 258);
            --bp-on-accent:    oklch(99% 0.005 258);

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

            /* tipografia */
            --bp-font: 'Manrope', system-ui, -apple-system, 'Segoe 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: 6px; --r-md: 10px; --r-lg: 14px;
            --bp-shadow-color: oklch(22% 0.004 250 / 0.10);
            --bp-shadow: 0 8px 28px var(--bp-shadow-color);

            /* movimento */
            --bp-ease: cubic-bezier(0.25, 1, 0.5, 1);
            --bp-fast: 150ms; --bp-slow: 220ms;

            /* ─── 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(18%   0.003 250);
                --bp-panel:     oklch(22.5% 0.004 250);
                --bp-sunken:    oklch(14.5% 0.003 250);
                /* In scuro la fascia sale invece di scendere: piu' chiara del
                   fondo, come fa il pannello. Scendere sotto il fondo la
                   avrebbe fatta sparire in un buco nero. */
                --bp-band:      oklch(25% 0.005 250);
                --bp-ink:       oklch(93%   0.003 250);
                --bp-ink-soft:  oklch(75%   0.004 250);
                --bp-ink-faint: oklch(62%   0.005 250);
                --bp-line:         oklch(36% 0.006 250);
                --bp-line-control: oklch(52% 0.008 250);
                --bp-line-strong:  oklch(48% 0.007 250);
                --bp-accent:       oklch(72% 0.095 258);
                --bp-accent-hover: oklch(78% 0.090 258);
                --bp-accent-soft:  oklch(28% 0.045 258);
                --bp-accent-ink:   oklch(85% 0.070 258);
                --bp-on-accent:    oklch(17% 0.030 258);
                --bp-shadow-color: oklch(6% 0.004 250 / 0.55);
            --bp-shadow: 0 8px 28px var(--bp-shadow-color);
            }
        }
        :root[data-theme="dark"] {
            --bp-bg:        oklch(18%   0.003 250);
            --bp-panel:     oklch(22.5% 0.004 250);
            --bp-sunken:    oklch(14.5% 0.003 250);
            --bp-ink:       oklch(93%   0.003 250);
            --bp-ink-soft:  oklch(75%   0.004 250);
            --bp-ink-faint: oklch(62%   0.005 250);
            --bp-line:         oklch(36% 0.006 250);
            --bp-line-control: oklch(52% 0.008 250);
            --bp-line-strong:  oklch(48% 0.007 250);
            --bp-accent:       oklch(72% 0.095 258);
            --bp-accent-hover: oklch(78% 0.090 258);
            --bp-accent-soft:  oklch(28% 0.045 258);
            --bp-accent-ink:   oklch(85% 0.070 258);
            --bp-on-accent:    oklch(17% 0.030 258);
            --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;
            border: 1px solid var(--bp-line-control);
            border-radius: 999px;
            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: uppercase;
        }
        .theme-switcher button.active {
            background: var(--bp-accent);
            color: var(--bp-panel);
        }

        /* ─── 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(--accent-gold-1);
        }

        /* ─── 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(--accent-gold-1); 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-panel); 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: var(--bp-panel);
            align-items: center; justify-content: center; padding: 20px;
        }
        .suggeritore-modal.show { display: flex; }
        .suggeritore-box {
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: 20px; padding: 28px; max-width: 440px; width: 100%;
            box-shadow: 0 20px 50px var(--bp-shadow-color);
        }
        .suggeritore-box h3 { color: var(--accent-gold-1); font-size: 22px; margin-bottom: 8px; }
        .suggeritore-box p { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
        .suggeritore-eventi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .suggeritore-eventi button {
            width: 100%; background: var(--input-bg); border: 1px solid var(--input-border);
            color: var(--text-main); border-radius: 12px; padding: 14px 10px;
            font: 600 14px/1.2 var(--bp-font); cursor: pointer; text-transform: none; letter-spacing: 0;
        }
        .suggeritore-eventi button:hover { border-color: var(--accent-gold-1); color: var(--accent-gold-1); }
        .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: 40px 24px;
            position: relative;
            z-index: 1;
        }

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

        /* 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. */
        .header {
            text-align: center;
            margin: 0;
            padding: 32px 24px;
            background: var(--bp-band);
            border-bottom: 1px solid var(--bp-line);
            animation: fadeInDown 1s ease-out forwards;
        }
        
        /* L'h1 E' il nome del prodotto, e porta l'aspetto che aveva quando
           era il <div class="subtitle"> sopra il titolo: maiuscoletto spaziato,
           colore d'accento. Provato prima in nero e grande come un titolo: da
           marchio diventava intestazione, e si perdeva l'unico punto di colore
           della pagina. */
        .header h1 {
            font-size: 20px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--bp-accent);
            margin: 0;
            line-height: 1.2;
        }

        .header .subtitle {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--accent-gold-1);
            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: translateY(-6px);
            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: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 8px;
            font-weight: 600;
        }

        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: 12px;
            color: var(--accent-gold-1);
            font-family: var(--bp-font);
            font-size: 16px;
            font-weight: 600;
            padding: 22px 28px;
            transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: inset 0 2px 8px var(--bp-shadow-color);
            appearance: none;
        }

        input[type="number"]:focus, input[type="text"]:focus, input:not([type]):focus, select:focus {
            outline: none;
            border-color: var(--accent-gold-1);
            background: var(--bp-sunken);
            box-shadow: inset 0 2px 4px var(--bp-shadow-color), 0 0 15px var(--bp-accent-soft);
            transform: scale(1.02);
        }

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

        option {
            background-color: var(--bp-panel);
            color: #fff;
        }

        /* ─── BUTTONS ─── */
        button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: var(--glass-bg);
            border: 1px solid var(--bp-line-control);
            color: var(--text-main);
            padding: 16px 24px;
            border-radius: 12px;
            font-family: var(--bp-font);
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
            position: relative;
        }

        /* 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. */

        button:hover {
            background: var(--bp-sunken);
            border-color: var(--bp-ink-faint);
            transform: translateY(-2px);
        }

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

        .btn-primary-gold {
            background: var(--bp-accent);
            color: var(--text-dark);
            border: none;
            box-shadow: none;
        }

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

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

        .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: center;
            gap: 0;
            flex-wrap: wrap;
            margin: 0 0 32px;
            position: sticky;
            top: 0;
            z-index: 60;
            padding: 14px 10px;
            background: color-mix(in srgb, var(--bg-color) 88%, transparent);


            border-bottom: 1px solid var(--glass-border);
        }

        /* ─── STEP WIZARD · una sezione visibile alla volta ─── */
        .step-panel { display: none; scroll-margin-top: 96px; }
        .step-panel.active { display: block; animation: stepFade .4s cubic-bezier(0.23,1,0.32,1); }
        @keyframes stepFade {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .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: 36px; height: 36px;
            border-radius: 50%;
            border: 1px solid var(--bp-line-control);
            color: var(--accent-gold-1);
            font-family: var(--bp-font);
            font-weight: 700;
            font-size: 16px;
            transition: transform .2s cubic-bezier(0.23,1,0.32,1), background .25s ease, color .25s ease, border-color .25s ease;
        }
        .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(--text-dark);
            border-color: var(--accent-gold-1);
        }
        .app-stepper .step:active .num { transform: scale(0.93); }
        .app-stepper .sep {
            width: 40px; 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: uppercase;
            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(--accent-gold-1); background: var(--bp-accent-soft); border-color: transparent; }
        .builder-tab.active {
            background: var(--bp-accent);
            color: var(--text-dark);
            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(--accent-gold-1);
            font-variant-numeric: tabular-nums;
        }
        .builder-tab.active .tab-badge { background: var(--bp-shadow-color); color: var(--text-dark); }
        .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 { scroll-margin-top: 24px; }

        @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(--accent-gold-1);
        }

        .btn-rimuovi {
            background: transparent;
            border: 1px solid var(--accent-gold-1);
            color: var(--accent-gold-1);
            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: uppercase;
            letter-spacing: 0.02em;
        }

        input[type="range"] {
            flex-grow: 1;
            -webkit-appearance: none;
            background: transparent;
            height: 32px;
            border-radius: 2px;
            outline: none;
            cursor: pointer;
        }

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

        input[type="range"]::-webkit-slider-thumb {
            height: 24px;
            width: 24px;
            border-radius: 50%;
            background: var(--accent-gold-1);
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: -9px;
            box-shadow: none;
            transition: transform 0.2s;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        .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(--accent-gold-1);
            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(--accent-gold-1);
            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: #fff;
        }

        .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(--accent-gold-1);
        }

        /* ─── 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(--accent-gold-1);
            font-weight: 800;
            margin: 0;
            letter-spacing: 0.02em;
        }

        .total-drinks strong {
            color: var(--accent-gold-1);
            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(--accent-gold-1);
            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);
            color: var(--accent-gold-1);
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .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: 24px;
            font-size: 12px;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .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-sunken);
            color: #fff;
            border: 1px solid var(--bp-line-control);
            font-size: 11px;
            padding: 8px 16px;
            width: auto;
            border-radius: 8px;
            display: inline-flex;
            gap: 8px;
        }

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

        .toast {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%) translateY(40px);
            background: var(--bp-panel);

            border: 1px solid var(--glass-border);
            color: #fff;
            padding: 16px 32px;
            border-radius: 100px;
            font-family: var(--bp-font);
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.02em;
            box-shadow: 0 10px 30px var(--bp-shadow-color);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 2000;   /* toast: sopra ogni dialogo */
            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: uppercase;
            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: uppercase;
            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 {
                grid-template-columns: 1fr 1fr 60px;
                grid-template-areas: "nome nome nome" "tipo ml rim";
            }
            .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(--accent-gold-2);
            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-accent-soft);
            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: uppercase;
            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);
            letter-spacing: -0.01em;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            margin-bottom: 14px;
        }

        .budget-sub {
            font-size: 11px;
            text-transform: uppercase;
            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(--accent-gold-1); 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-accent-soft);
        }
        .stima-live .sl-label { font-family: var(--bp-font); font-size: 11px; text-transform: uppercase; 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); font-weight: 700; font-size: 24px; color: var(--accent-gold-1); font-variant-numeric: tabular-nums; }
        .stima-live .sl-pp { font-family: var(--bp-font); 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-accent-soft);
        }
        .bpc-costbox .cb-k { display: block; font-family: var(--bp-font); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
        .bpc-costbox .cb-v { font-family: var(--bp-font); font-weight: 700; font-size: 30px; color: var(--accent-gold-1); 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;   /* dialogo */ display: none;
            background: radial-gradient(120% 80% at 50% -10%, var(--bp-panel), var(--bp-panel));
            /* niente backdrop-filter: lo sfondo è già opaco, il blur non si vedeva
               ma costava un re-campionamento dell'intera pagina sotto al wizard. */
            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: 600px; margin: 0 auto;
            padding: 26px 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: width 320ms cubic-bezier(0.23,1,0.32,1);
        }
        .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: 40px; height: 40px; flex: 0 0 auto; padding: 0;
            background: none; border: none; color: var(--text-muted); font-size: 26px; line-height: 1;
            cursor: pointer; border-radius: 8px; transition: color 160ms ease, transform 160ms ease;
        }
        .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; }
        @keyframes bpcIn { from { opacity: 0; transform: translate3d(var(--bpc-dx, 24px), 0, 0); } to { opacity: 1; transform: translate3d(0,0,0); } }
        /* 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: bpcIn 300ms cubic-bezier(0.23,1,0.32,1) both; will-change: transform, opacity; }

        .bpc-eyebrow { font-family: var(--bp-font); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-gold-2); margin-bottom: 12px; }
        .bpc-q { font-family: var(--bp-font); font-weight: 600; font-size: clamp(22px, 6vw, 28px); line-height: 1.18; color: var(--text-main); margin: 0 0 10px; }
        .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(--accent-gold-1); 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(--text-dark); 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(--accent-gold-1); 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(--text-dark); 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(--accent-gold-1); 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: 700; 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(--text-dark); box-shadow: none; }

        /* Selettore lingua sulla schermata di benvenuto */
        .bpc-wlang { display: flex; justify-content: flex-end; margin-bottom: 2px; }
        .bpc-wlang select { background: var(--input-bg); color: var(--text-main); border: 1px solid var(--bp-line-control); border-radius: 10px; padding: 7px 10px; font-size: 16px; font-family: var(--bp-font); cursor: pointer; }
        .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: 14px; }
        .bpc-choice {
            text-align: left; cursor: pointer; background: var(--glass-bg); border: 1px solid var(--bp-line-control);
            border-radius: 18px; padding: 22px 22px; display: flex; gap: 16px; align-items: flex-start;
            transition: transform 180ms cubic-bezier(0.23,1,0.32,1), border-color 180ms ease;
        }
        .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(--accent-gold-1); 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-accent-soft); 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(--accent-gold-1); 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(--accent-gold-1); 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(--text-dark); 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(--accent-gold-1); 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: var(--input-bg); color: var(--text-main); border: 1px solid var(--bp-line-control); border-radius: 10px; padding: 8px 16px; font-size: 18px; line-height: 1; cursor: pointer; transition: transform 150ms ease; }
        .bpc-evback:active { transform: translateX(-2px); }
        .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: clamp(22px, 6vw, 28px); 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: 14px; }
        .bpc-evcard { border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px 18px; background: var(--glass-bg); }
        .bpc-evcard h3 { font-family: var(--bp-font); font-weight: 700; 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: 14px; }
        .bpc-evmeta .tot { color: var(--accent-gold-1); 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(--text-dark); }
        .bpc-evempty { text-align: center; padding: 44px 12px; }
        .bpc-evempty .mk { font-size: 36px; color: var(--accent-gold-2); }
        .bpc-evempty h3 { font-family: var(--bp-font); font-weight: 600; color: var(--text-main); margin: 14px 0 6px; font-size: 20px; }
        .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: width 260ms cubic-bezier(0.23,1,0.32,1); }
        .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: 18px; }
        .bpc-chkgroup > .gt { font-family: var(--bp-font); font-weight: 800; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent-gold-2); margin-bottom: 6px; }
        .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(--text-dark); 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; font-family: var(--bp-font); font-size: 15px; color: var(--text-main); }
        .bpc-chkitem .qt { font-family: var(--bp-font); font-size: 13px; color: var(--text-muted); white-space: nowrap; text-align: right; }
        .bpc-chkitem.done .nm, .bpc-chkitem.done .qt { color: var(--text-muted); text-decoration: line-through; }

        /* ─── Checklist: riepilogo Totale / Speso / Da spendere ─── */
        .bpc-chkstats { display: flex; gap: 10px; margin: 14px 0 20px; }
        .bpc-chkstat { flex: 1; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 8px; text-align: center; }
        .bpc-chkstat .k { font-family: var(--bp-font); font-size: 10.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); }
        .bpc-chkstat .v {
            font-variant-numeric: tabular-nums; font-family: var(--bp-font); 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(--accent-gold-1); }

        /* ─── Card evento: kebab (⋮) + menu azioni ─── */
        .bpc-evcard { position: relative; }
        .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); backdrop-filter: blur(10px); 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(--accent-gold-1); 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-accent-soft); } }
        .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: uppercase; color: var(--accent-gold-2); 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(--accent-gold-1); 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(--accent-gold-1); 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: 40px; height: 32px;
        }

        /* — 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; }
        footer { color: var(--bp-ink-soft) !important; }

        /* — 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 compatto —
           Il titolo editoriale 54px da solo riempiva tutta la prima
           schermata, spingendo l'hero "Crea nuovo evento" sotto la piega.
           In home lo rimpicciolisco e tolgo le decorazioni ridondanti
           (sotto c'è già l'eyebrow "Dove vuoi iniziare?"). Identità brand
           — subtitle + titolo + oro — mantenuta. Nel wizard resta intatto. */
        body.bp-home .header { margin: 0; }
        body.bp-home .header h1 { font-size: 20px; margin: 0; }
        body.bp-home .header > .ornament { display: none; }
        body.bp-home .header .ornament-row { display: none; }
        body.bp-home .header .subtitle { letter-spacing: 0.08em; }
        @media (max-width: 560px) {
            body.bp-home .header h1 { font-size: 17px; }
            body.bp-home .header { margin: 0; padding: 24px 20px; }
        }

        /* — 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-accent-soft); 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(--accent-gold-1); 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); backdrop-filter: blur(2px); 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(--text-dark); 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(--text-dark); 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(--accent-gold-1); 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: 1px solid var(--glass-border); border-radius: 14px; padding: 14px 16px; background: var(--input-bg); }
        .bpl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
        .bpl-name { font-family: var(--bp-font); font-weight: 700; 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: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--bp-accent-soft); color: var(--accent-gold-1); }
        .bpl-badge.analc { border-color: var(--bp-accent); color: var(--success-color); }
        .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: 600; font-size: 13px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--bp-line-control); background: var(--input-bg); color: var(--text-main); cursor: pointer; }
        .bpl-btn:hover { border-color: var(--bp-accent); }
        .bpl-btn.primary { background: var(--accent-gold-1); color: var(--text-dark); 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: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; display: block; }
        .bpl-ing { display: flex; flex-direction: column; gap: 9px; }
        .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:800; letter-spacing: 0.05em; text-transform:uppercase; color:var(--accent-gold-2); margin-bottom:10px; }
        .bpset-title { font-family:var(--bp-font); font-weight:600; font-size:clamp(22px,6vw,28px); color:var(--text-main); margin:0 0 22px; }
        .bpset-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 2px; border-bottom:1px solid var(--glass-border); }
        .bpset-row:last-child { border-bottom:none; }
        .bpset-label { font-family:var(--bp-font); font-size:15px; font-weight:700; 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:180px; flex:0 0 auto; }
        .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:54px; height:30px; min-width:0; padding:0; border-radius:999px; border:1px solid var(--bp-line-control); background:var(--input-bg); cursor:pointer; text-transform:none; letter-spacing:0; transition:background-color .2s ease, border-color .2s ease; }
        .bpset-switch::before { content:none; }
        .bpset-switch:hover { transform:none; background:var(--input-bg); border-color:var(--accent-gold-2); }
        .bpset-switch-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--text-muted); transition:transform .2s cubic-bezier(0.23,1,0.32,1), background-color .2s ease; }
        .bpset-switch[aria-checked="true"] { background: var(--bp-accent); border-color:var(--accent-gold-1); }
        .bpset-switch[aria-checked="true"]:hover { background: var(--bp-accent); }
        .bpset-switch[aria-checked="true"] .bpset-switch-knob { transform:translateX(24px); background:var(--bp-panel); }

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

        #bp-home { display: none; animation: fadeInUp 0.5s ease-out both; }
        body.bp-home #bp-home { display: block; }
        body.bp-home .app-stepper, body.bp-home .step-panel { display: none !important; }

        .bph-inner { max-width: 720px; margin: 0 auto; }
        .bph-eyebrow { text-align: center; font-family: var(--bp-font); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; color: var(--text-muted); margin: 2px 0 22px; }

        .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: 18px; width: 100%; padding: 26px; border-radius: 20px; border: 1px solid var(--bp-accent-soft); background: var(--bp-accent-soft); margin-bottom: 14px; transition: transform .2s cubic-bezier(0.16,1,0.3,1), border-color .2s ease; }
        .bph-hero:hover { transform: translateY(-2px); border-color: var(--bp-accent); background: var(--bp-accent-soft); }
        .bph-hero-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 16px; background: var(--bp-accent-soft); color: var(--accent-gold-1); font-size: 27px; }
        .bph-hero-tx { display: flex; flex-direction: column; min-width: 0; }
        .bph-hero-title { font-family: var(--bp-font); font-weight: 700; font-size: 23px; color: var(--text-main); line-height: 1.15; }
        .bph-hero-desc { font-family: var(--bp-font); font-size: 13.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
        .bph-hero-arrow { margin-left: auto; flex: 0 0 auto; color: var(--accent-gold-1); font-size: 28px; 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: uppercase; white-space: nowrap; transition: color .18s ease, background-color .18s ease; }
        .bph-resume-reset:hover { transform: none; color: #fff; 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(--accent-gold-1); 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(--accent-gold-1); 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: translateY(-2px); 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(--accent-gold-1); 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: 20px; gap: 14px; }
            .bph-hero-ic { width: 50px; height: 50px; font-size: 23px; }
            .bph-hero-title { font-size: 20px; }
        }

/* ═══ blocco 7 di 9 (era riga 2242 di index.html) ═══ */
        /* — Eyebrow come "badge live" con pallino luminoso — */
        /* Era una pillola: bordo, fondo, sfocatura, un pallino luminoso con
           due aloni, e le lettere distanziate di .28em che la facevano leggere
           come un'insegna. Cinque decorazioni per fare quello che fa una
           domanda scritta bene — e sopra un bottone che ripete la stessa cosa
           in altre parole. Ora e' una domanda, in tono normale, e la sola cosa
           che spicca nel blocco e' l'azione. */
        body.bp-home .bph-eyebrow {
            margin: 6px 0 16px;
            text-transform: none;
            letter-spacing: 0;
            font-size: 15px;
            font-weight: 500;
            color: var(--bp-ink-soft);
            text-align: left;
        }

        /* — HERO · la "vetrina": glow, bordo oro vivo, sheen, icona scolpita — */
        /* Azione principale della home.
           Aveva sopra quattro strati di decorazione: una sfumatura verde
           dall'angolo, un bordo sfumato ottenuto con una maschera, un
           riflesso che attraversava la card e un alone verde nell'ombra.
           Nessuno diceva niente all'utente. Quello che rende primaria
           un'azione e' che sia l'unica con una superficie piena e un bordo
           d'accento, non la quantita' di effetti sopra. */
        body.bp-home .bph-hero {
            gap: 18px; padding: 28px 26px; border-radius: 16px;
            border: 1px solid var(--bp-accent);
            background: var(--bp-accent-soft);
            box-shadow: none;
            transition: border-color var(--bp-slow) var(--bp-ease),
                        background var(--bp-slow) var(--bp-ease);
        }
        body.bp-home .bph-hero:hover {
            background: var(--bp-panel);
            border-color: var(--bp-accent-hover);
        }
        /* Il riquadro pieno attorno al "+" e il cerchio attorno alla freccia
           erano due contenitori che non contenevano niente. Tolti: restano il
           segno e la freccia, che e' quello che si guarda. */
        body.bp-home .bph-hero-ic {
            width: auto; height: auto; border-radius: 0;
            background: none;
            color: var(--bp-accent);
            font-size: 30px; line-height: 1;
            box-shadow: none;
        }
        body.bp-home .bph-hero-title { font-size: 26px; letter-spacing: 0.01em; }
        body.bp-home .bph-hero-desc  { font-size: 14px; margin-top: 5px; }
        body.bp-home .bph-hero-arrow {
            display: flex; align-items: center; justify-content: center;
            width: auto; height: auto; border-radius: 0; font-size: 26px; margin-left: auto;
            border: none; color: var(--bp-accent);
            transition: transform .25s ease;
        }
        body.bp-home .bph-hero:hover .bph-hero-arrow { transform: translateX(4px); }

        /* — Le quattro scorciatoie —
           Superficie piatta e bordo sottile. I gradienti che c'erano andavano
           da un colore a se stesso: erano tinte piatte travestite, e ognuna
           costava al browser un passaggio di composizione in piu' per
           disegnare esattamente lo stesso pixel. */
        body.bp-home .bph-card {
            padding: 22px 20px; border-radius: 16px;
            border: 1px solid var(--bp-line);
            background: var(--bp-panel);
            box-shadow: none;
            transition: border-color var(--bp-fast) var(--bp-ease),
                        background var(--bp-fast) var(--bp-ease);
        }
        body.bp-home .bph-card:hover {
            border-color: var(--bp-accent);
            background: var(--bp-accent-soft);
        }
        body.bp-home .bph-card-ic {
            width: 44px; height: 44px; border-radius: 12px;
            background: var(--bp-accent-soft);
            color: var(--bp-accent);
            border: none;
        }
        body.bp-home .bph-card-title { font-size: 17px; }

        /* — RESUME · accento oro caldo — */
        body.bp-home .bph-resume {
            border-color: var(--bp-line);
            background: var(--bp-accent-soft);
        }
        body.bp-home .bph-resume-ic {
            background: var(--bp-accent-soft);
            border: 1px solid var(--bp-accent-soft);
        }

        /* — Sfondo ambientale più ricco (vale ovunque, glow soft) — */

        /* ── TEMA CHIARO (wedding): hero/card su carta calda + oro,
              niente fondi scuri (che sul crema diventavano grigi) ── */
        /* Titolo header: oro leggibile sulla sabbia (fix contrasto preesistente, vale ovunque) */

        @media (max-width: 560px) {
            body.bp-home .bph-hero { padding: 24px 20px; }
            /* Niente riquadro nemmeno qui: la media query rimetteva 56x56, e
               con lo sfondo tolto restava una scatola vuota accanto al testo. */
            body.bp-home .bph-hero-ic { width: auto; height: auto; font-size: 26px; }
            body.bp-home .bph-hero-title { font-size: 22px; }
        }
        @media (prefers-reduced-motion: reduce) {
            /* .bph-hero::before/::after non esistono piu' (erano lo shine e la
               sua coda): resta il pallino pulsante dell'occhiello. */
            body.bp-home .bph-eyebrow::before { animation: none; }
        }

/* ═══ blocco 8 di 9 (era riga 2420 di index.html) ═══ */
        #risultati .total-drinks { font-size: 30px; }

        /* BUDGET · la "vetrina del prezzo" */
        #budget-box.budget-box {
            position: relative; overflow: hidden; isolation: isolate;
            padding: 46px 48px 40px; border-radius: 26px;
            border: 1px solid var(--bp-accent-soft);
            background:
                radial-gradient(95% 130% at 50% -25%, var(--bp-accent-soft), transparent 62%),
                linear-gradient(180deg, var(--bp-panel), var(--bp-panel));
            box-shadow:
                0 34px 80px -34px var(--bp-shadow-color),
                0 0 100px -34px var(--bp-accent-soft),
                inset 0 1px 0 var(--bp-line);
        }
        #budget-box.budget-box::after {
            content: ''; position: absolute; z-index: 0; left: 50%; top: 40%;
            width: 420px; height: 220px; transform: translate(-50%, -50%);
            background: radial-gradient(50% 50% at 50% 50%, var(--bp-accent-soft), transparent 70%);
            pointer-events: none;
        }
        #budget-box.budget-box > * { position: relative; z-index: 1; }
        #budget-box .budget-label { letter-spacing: 0.08em; font-size: 12px; }
        #budget-box .budget-amount {
            font-size: 64px; letter-spacing: 0.02em;
            filter: drop-shadow(0 8px 26px var(--bp-accent-soft));
        }
        #budget-box .budget-perperson {
            display: inline-block; margin: 2px auto 14px; padding: 6px 14px;
            border-radius: 999px; background: var(--bp-accent-soft);
            border: 1px solid var(--bp-accent-soft);
        }
        #budget-box .budget-sub { opacity: 0.8; }

        /* RESULT SECTIONS · card profonde */
        .result-section {
            border: 1px solid var(--bp-line);
            background: linear-gradient(165deg, var(--bp-panel), var(--bp-panel));
            border-radius: 22px; padding: 30px 32px;
            box-shadow: 0 16px 40px -28px var(--bp-shadow-color), inset 0 1px 0 var(--bp-line);
        }
        .result-section li:hover { background: linear-gradient(90deg, var(--bp-accent-soft), transparent); }

        /* Tema chiaro */

        @media (max-width: 600px) {
            #budget-box .budget-amount { font-size: 46px; }
            #budget-box.budget-box { padding: 34px 24px 30px; }
        }
        /* In stampa: niente decorazioni/ombre premium (resta pulito) */
        @media print {
            #budget-box.budget-box::after { display: none !important; }
            #budget-box.budget-box, .result-section { box-shadow: none !important; }
        }

/* ═══ blocco 9 di 9 (era riga 2492 di index.html) ═══ */
        /* Card degli step: più profondità, bordo oro raffinato (calmo, restano
           superfici di lavoro: niente glow eccessivo che disturba la lettura). */
        .step-panel .card {
            background: linear-gradient(165deg, var(--bp-panel), var(--bp-panel));
            border: 1px solid var(--bp-line);
            box-shadow: 0 24px 58px -34px var(--bp-shadow-color), inset 0 1px 0 var(--bp-line);
        }
        .step-panel .card:hover { transform: none; }   /* le card-step non "saltano" come quelle home */

        /* Input degli step: fondo incassato e bordo visibile.
           Il fondo era `linear-gradient(--bp-line, --bp-line)`, cioe' il token
           delle LINEE usato come superficie: appena la linea ha preso il
           contrasto che le serviva, i campi sono diventati blocchi grigi.
           --bp-sunken e' il ruolo giusto, esiste apposta per le aree incassate. */
        .step-panel input[type="number"], .step-panel input[type="text"],
        .step-panel input:not([type]), .step-panel select {
            background: var(--bp-sunken);
            border-color: var(--bp-line-control);
        }

        /* CTA primaria: glow + lucentezza */
        .btn-primary-gold.btn-grande {
            box-shadow: none;
        }
        .btn-primary-gold.btn-grande:hover { box-shadow: 0 22px 54px -16px var(--bp-accent-soft), inset 0 1px 0 var(--bp-line); }

        /* Tab attiva: glow oro più deciso */
        .builder-tabs { background: var(--bp-panel); border-color: var(--bp-line-control); }
        .builder-tab.active { box-shadow: none; }

        /* Stepper più "designed": barra premium + alone sullo step attivo */
        .app-stepper { border-bottom: 1px solid var(--bp-accent-soft); }
        .app-stepper .step.active .num {
            box-shadow: none;
        }

        /* Header del wizard più scenografico: alone oro dietro al titolo.
           In home l'header è compatto → niente alone. */
        .header { position: relative; }
        /* L'alone d'accento dietro al titolo non ha piu' senso: la fascia e'
           gia' una superficie, e un alone dentro una superficie grigia fa
           macchia invece che luce. */
        .header::after { content: none; }
        body.bp-home .header::after { display: none; }

        @media print { .header::after { display: none !important; } .step-panel .card { box-shadow: none !important; } }

/* ═══════════════════════════════════════════════════════════
   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);
    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 {
    margin-top: var(--s-8);
    padding: var(--s-6) var(--s-4) var(--s-5);
    border-top: 1px solid var(--bp-line);
    text-align: center;
    font-family: var(--bp-font);
    font-size: var(--t-sm);
}

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

/* ─── 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);
    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); font-weight: 600; }

.pagina-testo table {
    width: 100%;
    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);
}
.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: uppercase;
    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-top: 1px solid var(--bp-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bp-tab {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 56px;
    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); }
.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(56px + 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; }

@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: 1px solid var(--bp-line);
    }
    .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; }
}

/* ── 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  { 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;
}
/* 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. */
.bp-altro { max-width: 640px; margin: 0 auto; padding: 24px 20px 40px; }
.bp-altro-tit { font-family: var(--bp-font); font-size: var(--t-xl); font-weight: 800; color: var(--bp-ink); margin: 0 0 20px; }
.bp-altro-lista { display: flex; flex-direction: column; border: 1px solid var(--bp-line); border-radius: var(--r-lg); overflow: hidden; background: var(--bp-panel); }
.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: 600; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.bp-altro-voce + .bp-altro-voce { border-top: 1px solid var(--bp-line); }
.bp-altro-voce:hover { transform: none; background: var(--bp-sunken); border-color: transparent; }
.bp-altro-ar { color: var(--bp-ink-faint); font-size: 20px; line-height: 1; }
.bp-altro-esterni .bp-altro-voce { font-weight: 500; color: var(--bp-ink-soft); }

/* ── 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: 800; 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: 800; color: var(--bp-accent); font-variant-numeric: tabular-nums; }
.bph-cifra-l { font-family: var(--bp-font); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; 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; padding: 13px 18px;
    background: none; border: 1px solid var(--bp-line-control); border-radius: var(--r-md);
    color: var(--bp-ink-soft); font-family: var(--bp-font); font-size: var(--t-sm);
    font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.bph-sez-tit { font-family: var(--bp-font); font-size: var(--t-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; 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: 1px solid var(--bp-line); }
.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: 700; color: var(--bp-ink); }
.bph-salvato-meta { font-family: var(--bp-font); font-size: var(--t-sm); color: var(--bp-ink-faint); }

/* Conferma dopo un salvataggio verificato. Non e' un bottone fisso: esiste
   solo quando c'e' davvero qualcosa da aprire. */
.bp-post-salvataggio {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin-top: 18px; padding: 14px 18px;
    background: var(--bp-accent-soft); border: 1px solid var(--bp-accent-soft);
    border-radius: var(--r-lg);
}
.bp-post-tx { font-family: var(--bp-font); font-size: var(--t-sm); font-weight: 600; color: var(--bp-accent-ink); }
.bp-post-vai {
    width: auto; padding: 9px 16px; background: var(--bp-accent); color: var(--bp-on-accent);
    border: none; 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;
}

/* ═══════════════════════════════════════════════════════════
   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: var(--r-lg); padding: 0; max-width: 420px; width: calc(100vw - 32px); background: var(--bp-panel); color: var(--bp-ink); }
.bp-print-dialog::backdrop { background: oklch(22% 0.004 250 / 0.45); }
.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: 800; margin: 0 0 4px; }
.bp-print-op { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bp-line-control); border-radius: var(--r-md); cursor: pointer; }
.bp-print-op:has(input:checked) { border-color: var(--bp-accent); background: var(--bp-accent-soft); }
.bp-print-op input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.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: 700; }
.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 { background: var(--bp-accent); border: none; color: var(--bp-on-accent); }

/* ── Correggi la lista: "ho gia'" e "il tuo prezzo" ──
   Compaiono solo in modalita' correzione. Con la modalita' spenta questi
   elementi non esistono, ed e' voluto: la lista di default resta quella che
   i golden fotografano. */
.bp-modifica-btn {
    width: auto; margin: 0 auto 14px; display: block; padding: 9px 18px;
    background: none; border: 1px solid var(--bp-line-control); border-radius: 999px;
    color: var(--bp-ink-soft); font-family: var(--bp-font); font-size: var(--t-sm);
    font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.bp-modifica-btn[aria-pressed="true"] { background: var(--bp-accent); border-color: var(--bp-accent); color: var(--bp-on-accent); }

.riga-mod {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bp-line);
}
/* Etichetta e campo stanno insieme: erano quattro figli in fila, e a schermo
   stretto il flex-wrap poteva mandare a capo un'etichetta lasciando il suo
   campo sulla riga sopra. */
.mod-campo { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.mod-lbl { font-family: var(--bp-font); font-size: var(--t-xs); font-weight: 600; color: var(--bp-ink-faint); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }

/* Un campo che non conta piu' lo dichiara, invece di sembrare attivo. */
.mod-campo-inerte { opacity: .5; }
.mod-campo-inerte .mod-scorta { text-decoration: line-through; }

/* Una quantita' decisa a mano si vede anche a modalita' spenta: sopravvive ai
   ricalcoli, quindi deve dire di esserci. */
.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); }

.mod-qta-reset {
    flex: none; width: 30px; height: 30px; padding: 0; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--bp-line-control);
    border-radius: var(--r-sm); color: var(--bp-ink-soft);
    font-size: 15px; cursor: pointer;
}
.mod-qta-reset:hover { border-color: var(--bp-accent); color: var(--bp-accent); }
.riga-mod input {
    width: 5.5rem; min-width: 0; padding: 6px 8px; text-align: right;
    background: var(--bp-panel); border: 1px solid var(--bp-line-control);
    border-radius: var(--r-sm); color: var(--bp-ink);
    font-family: var(--bp-font); font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.riga-mod input:focus { border-color: var(--bp-accent); outline: 2px solid var(--bp-accent-soft); outline-offset: 1px; }
/* Un prezzo corretto a mano si vede: e' un dato tuo, non una stima. */
.mod-prezzo-tuo { border-color: var(--bp-accent) !important; color: var(--bp-accent-ink); font-weight: 700; }

/* Tre campi affiancati non stanno in 375px: sotto quella soglia ognuno
   prende la sua riga, con l'etichetta a sinistra e il campo a destra. */
@media (max-width: 600px) {
    .riga-mod { flex-direction: column; align-items: stretch; gap: 8px; }
    .mod-campo { justify-content: space-between; }
    .mod-campo input { flex: 0 0 auto; }
}

@media print { .bp-modifica-btn, .riga-mod { display: none !important; } }

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