/* RenderAI — i TASTI che mandano avanti, indietro o generano, coi movimenti dei tasti della home (2026-10-10 sera,
   richiesta dell'utente: «moderno e coerente con le animazioni dei tasti della home, il punto centrale del restyling»).
   Riferimento: home.html (`.hm-go`, `.hm-row`, `.hm-ar`) e la finestra «crediti esauriti» (`.ce-cta`).
     · tasto d'ORO (Avanti, Genera, Conferma): un oro più chiaro lo riempie da sinistra;
     · tasto NEUTRO (Indietro, azioni secondarie della pianta): l'oro lo riempie da sinistra e il testo diventa scuro;
     · la freccia esce dalla sua parte e rientra dall'altra (indietro: verso sinistra); il fulmine di Genera dà un colpo.
   È una PELLE: misure, colori a riposo e disposizione restano quelli di ogni pagina (provati sui telefoni veri) — qui si
   aggiunge solo il movimento. Da telefono non c'è il passaggio del mouse: lo fa /tasti.js al tocco (classe .rt-go).
   L'ELENCO DEI TASTI STA SOLO QUI: un tasto nuovo che manda avanti o genera si aggiunge alla lista giusta.
   Caricato nel <head> di advanced.html e wizard.html. */

:root {
    --rt-sweep-oro:linear-gradient(110deg,#f2d88a,#fff3cc 55%,#f5dc90);
    --rt-sweep:linear-gradient(110deg,#b8922a,#e8c96d 60%,#d9b85a);
    /* Indietro e i secondari NON si riempiono d'oro (l'utente, 10/10 sera: «un altro colore rispetto ad Avanti»): avorio
       chiaro, lo stesso tono dei testi della pagina, con testo scuro. L'oro resta solo a chi manda avanti. */
    --rt-sweep-indietro:linear-gradient(110deg,#d8d2c6,#f6f2ea 55%,#e4ded2);
    --rt-ink:#3a2808;
    --rt-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── chi è chi ── */
#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-btn-generate, #zp-mat-confirm-btn, .pr-btn.pr-btn-oro,
#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona) {
    position:relative; isolation:isolate; overflow:hidden;
    -webkit-tap-highlight-color:transparent;
}

/* LE SCRITTE come i tasti della home (seconda richiesta dell'utente, 10/10 sera): Inter in grassetto 700, in tondo, niente
   maiuscolo e niente spaziatura larga. Le misure restano quelle di ogni pagina: cambia solo il carattere. */
#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-btn-generate, #zp-mat-confirm-btn, .pr-btn,
#wiz-btn-back, #btn-panel-prev, #panel-back-btn,
#wiz-nav-bar .wiz-btn-gold, #wiz-nav-bar .wiz-btn-outline, #wiz-nav-bar .wiz-btn-next {
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
    font-weight:700 !important;
    text-transform:none !important;
    letter-spacing:-.01em !important;
    -webkit-font-smoothing:antialiased;
}
#btn-render, #wiz-btn-fwd, #wiz-btn-back, #btn-panel-next, #btn-panel-prev { font-size:15px !important; }
#btn-render :is(span, b), #wiz-btn-fwd :is(span:not(.wpr-costo):not(#wiz-cost-badge)), #wiz-btn-back span { font-weight:700 !important; letter-spacing:inherit !important; }
/* il costo sul tasto resta il cartellino di sempre: numeri più compatti */
#wiz-cost-badge, #adv-cost-badge, .wpr-costo, .pr-costo { letter-spacing:0 !important; font-variant-numeric:tabular-nums; }
/* il cartellino del costo sui tasti d'oro (11/10, «scritte bianche e l'evidenziazione dello stesso colore»): era nero al 45%
   con la scritta bianca, cioè marrone sull'oro (contrasto 6) ma grigio medio quando l'oro chiaro riempie il tasto (3,7).
   Pieno, del caffè dei cerchietti delle frecce: leggibile in tutti e due i momenti. */
:is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #pl-btn-gen, .pr-btn-oro) :is(#wiz-cost-badge, #adv-cost-badge, .pr-costo) {
    background:#3a2808 !important; color:#fbf3df !important; border-color:rgba(255,236,190,.18) !important;
}

/* ── IL VESTITO A RIPOSO (terza richiesta dell'utente, 10/10 sera: «modernizza i tasti di avanti, indietro e conferma») ──
   Come la finestra «crediti esauriti» e la home: il tasto che manda AVANTI è d'oro pieno, angoli 14px, ombra calda; quello
   che torna INDIETRO e i secondari sono scuri con bordo sottile (regola del marchio: grigio a sinistra, oro a destra). Le
   frecce stanno in un cerchietto (scuro sull'oro, oro sullo scuro), come `.hm-ar`. Spento = un tono pieno, mai l'oro
   sbiadito (testi pieni: regola delle trasparenze). Le pagine scrivono sfondi e opacità in linea: qui servono gli !important.
   Le misure (altezze, larghezze, padding) restano quelle di ogni pagina. */
:is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-btn-generate, #zp-mat-confirm-btn, .pr-btn.pr-btn-oro) {
    background:linear-gradient(135deg,#b8923e 0%,#c9a84c 35%,#f0d070 65%,#d4a840 100%) !important;
    background-size:100% 100% !important;
    color:#3a2808 !important;
    border:0 !important;
    border-radius:14px !important;
    box-shadow:0 10px 28px rgba(201,168,76,.26), inset 0 1px 0 rgba(255,255,255,.35) !important;
    opacity:1 !important;
    text-shadow:none !important;
    transition:box-shadow .35s, transform .12s !important;
}
:is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona)) {
    background:#16151b !important;
    color:#f1ece3 !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:14px !important;
    box-shadow:none !important;
    opacity:1 !important;
}
@media (hover:hover) {
    :is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-btn-generate, #zp-mat-confirm-btn, .pr-btn.pr-btn-oro):not(:disabled):hover {
        box-shadow:0 16px 40px rgba(201,168,76,.40), inset 0 1px 0 rgba(255,255,255,.35) !important;
    }
}
/* spenti: pieni, leggibili, senza ombra né movimento */
:is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-btn-generate, #zp-mat-confirm-btn, .pr-btn.pr-btn-oro):disabled {
    background:#2a2620 !important; color:#b9ae98 !important; box-shadow:none !important; cursor:not-allowed !important;
}
:is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona)):disabled {
    background:#141318 !important; color:#8f887c !important; cursor:not-allowed !important;
}

/* le frecce nel cerchietto: lo stesso <svg> di lucide, vestito da cerchio (nessun cambio al markup delle pagine) */
:is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-mat-confirm-btn, .pr-btn, #wiz-btn-back, #btn-panel-prev, #panel-back-btn)
    :is(svg.lucide-arrow-right, svg.lucide-arrow-left) {
    width:24px !important; height:24px !important; padding:5px; box-sizing:border-box; flex:none; margin:-2px 0;
    border-radius:50%; overflow:hidden; stroke-width:2.6;
}
:is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-mat-confirm-btn, .pr-btn.pr-btn-oro) :is(svg.lucide-arrow-right, svg.lucide-arrow-left) {
    background:#3a2808; color:#f0d070;
}
:is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro)) :is(svg.lucide-arrow-right, svg.lucide-arrow-left) {
    background:#2a241c; color:#e8c96d; transition:background .35s, color .35s;
}
:is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro)):is(.rt-go, :focus-visible) :is(svg.lucide-arrow-right, svg.lucide-arrow-left) { background:#3a2808; }
@media (hover:hover) {
    :is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro)):not(:disabled):hover :is(svg.lucide-arrow-right, svg.lucide-arrow-left) { background:#3a2808; }
}
:is(#btn-render, #wiz-btn-fwd, #zp-btn-generate, #btn-panel-next):disabled :is(svg.lucide-arrow-right, svg.lucide-arrow-left) { background:#3a342a; color:#b9ae98; }

/* lo sweep: sotto il testo, sopra lo sfondo del tasto (anche quello scritto in linea dalla guidata) */
#btn-render::before, #wiz-btn-fwd::before, #btn-panel-next::before, #zp-btn-generate::before, #zp-mat-confirm-btn::before, .pr-btn.pr-btn-oro::before,
#wiz-btn-back::before, #btn-panel-prev::before, #panel-back-btn::before, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona)::before {
    content:""; display:block; position:absolute; inset:0; left:0; top:0; width:auto; height:auto; z-index:-1;
    border-radius:inherit; pointer-events:none; animation:none;
    background:var(--rt-sweep-oro); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--rt-ease);
}
#wiz-btn-back::before, #btn-panel-prev::before, #panel-back-btn::before, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona)::before {
    background:var(--rt-sweep-indietro);
}
/* (il riflesso che scorreva sempre su .btn-render lascia il posto allo sweep: un movimento solo, quando serve) */
#btn-render:disabled::before, #wiz-btn-fwd:disabled::before, #zp-btn-generate:disabled::before, .pr-btn:disabled::before { display:none; }
#wiz-btn-back > *, #wiz-btn-fwd > *, #btn-render > *, .pr-btn > * { position:relative; }

/* il testo dei tasti neutri cambia colore insieme allo sweep */
#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona) { transition:color .35s, border-color .35s, background-color .2s; }

/* ── il movimento: col mouse al passaggio, da telefono al tocco (.rt-go) ── */
@media (hover:hover) {
    #btn-render:not(:disabled):hover::before, #wiz-btn-fwd:not(:disabled):hover::before, #btn-panel-next:hover::before,
    #zp-btn-generate:not(:disabled):hover::before, #zp-mat-confirm-btn:hover::before, .pr-btn.pr-btn-oro:not(:disabled):hover::before,
    #wiz-btn-back:hover::before, #btn-panel-prev:hover::before, #panel-back-btn:hover::before,
    .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona):not(:disabled):hover::before { transform:scaleX(1); }
    /* (13/10, l'utente: «il tasto evidenziato fa sparire il testo che rimane bianco come l'evidenziazione»): la regola a riposo
       sta dentro un :is() con degli id, e un :is() pesa quanto il suo argomento piu' forte — anche per i .pr-btn, che un id non
       ce l'hanno. Scritta come «.pr-btn…:hover» perdeva: sweep d'avorio con la scritta ancora avorio. Stesso :is() della regola
       a riposo, piu' :hover, come quella del tocco qui sotto */
    :is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona)):not(:disabled):hover { color:var(--rt-ink) !important; border-color:transparent !important; }
    /* niente salto in su: i tasti della home restano fermi e si riempiono */
    #btn-render:hover, #wiz-btn-fwd:hover, #btn-panel-next:hover, .pr-btn.pr-btn-oro:hover { transform:none !important; }
}
:is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-btn-generate, #zp-mat-confirm-btn, .pr-btn.pr-btn-oro,
    #wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona)):is(:focus-visible, .rt-go):not(:disabled)::before { transform:scaleX(1); }
:is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-oro):not(.pr-btn-icona)):is(:focus-visible, .rt-go):not(:disabled) { color:var(--rt-ink) !important; border-color:transparent !important; }

/* la pressione: un filo più piccolo, come un tasto vero */
:is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-btn-generate, #zp-mat-confirm-btn, .pr-btn.pr-btn-oro,
    #wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn:not(.pr-btn-icona)):not(:disabled):active { transform:scale(.975) !important; transition:transform .1s; }

/* la freccia avanti esce a destra e rientra da sinistra; quella indietro il contrario; il fulmine dà un colpo */
@keyframes rtFrecciaAvanti { 0% { transform:none; opacity:1; } 42% { transform:translateX(16px); opacity:0; } 43% { transform:translateX(-16px); opacity:0; } 100% { transform:none; opacity:1; } }
@keyframes rtFrecciaIndietro { 0% { transform:none; opacity:1; } 42% { transform:translateX(-16px); opacity:0; } 43% { transform:translateX(16px); opacity:0; } 100% { transform:none; opacity:1; } }
@keyframes rtFulmine { 0%, 100% { transform:none; } 35% { transform:scale(1.28) rotate(-10deg); } 65% { transform:scale(.94) rotate(4deg); } }
@media (hover:hover) {
    :is(#btn-render, #wiz-btn-fwd, #btn-panel-next, #zp-mat-confirm-btn, .pr-btn):not(:disabled):hover :is(.lucide-arrow-right, .lucide-chevron-right, [data-rt="avanti"]) :is(path, line, polyline) { animation:rtFrecciaAvanti .55s var(--rt-ease); }
    :is(#wiz-btn-back, #btn-panel-prev, #panel-back-btn, .pr-btn):not(:disabled):hover :is(.lucide-arrow-left, .lucide-chevron-left, [data-rt="indietro"]) :is(path, line, polyline) { animation:rtFrecciaIndietro .55s var(--rt-ease); }
    :is(#btn-render, #wiz-btn-fwd, #zp-btn-generate, #btn-panel-next):not(:disabled):hover :is(.lucide-zap, .lucide-sparkles, .lucide-wand-sparkles) { animation:rtFulmine .6s var(--rt-ease); }
}
.rt-go :is(.lucide-arrow-right, .lucide-chevron-right, [data-rt="avanti"]) :is(path, line, polyline) { animation:rtFrecciaAvanti .55s var(--rt-ease); }
.rt-go :is(.lucide-arrow-left, .lucide-chevron-left, [data-rt="indietro"]) :is(path, line, polyline) { animation:rtFrecciaIndietro .55s var(--rt-ease); }
.rt-go :is(.lucide-zap, .lucide-sparkles, .lucide-wand-sparkles) { animation:rtFulmine .6s var(--rt-ease); }

@media (prefers-reduced-motion:reduce) {
    #btn-render::before, #wiz-btn-fwd::before, #btn-panel-next::before, #zp-btn-generate::before, #zp-mat-confirm-btn::before, .pr-btn::before,
    #wiz-btn-back::before, #btn-panel-prev::before, #panel-back-btn::before { transition:none; }
    .lucide-arrow-right, .lucide-arrow-left, .lucide-chevron-right, .lucide-chevron-left, .lucide-zap, [data-rt], :is(.lucide-arrow-right, .lucide-arrow-left) * { animation:none !important; }
}

/* ═════════ LE SCHEDE DELLE CATEGORIE (Materiali e Arredi della guidata, 10/10 sera) ═════════
   L'utente: «più moderna, con le nuove animazioni, e precisa al bordo delle categorie». Da computer la barra abbraccia le
   schede (niente vuoto ai lati) e sotto la scheda scelta scivola un indicatore d'oro (/tasti.js lo mette e lo sposta);
   la scritta scelta diventa caffè. Da telefono resta la griglia a tre per riga, con lo stesso indicatore.
   Senza lo script (classe .rt-ind-on assente) la scheda scelta si colora da sola, come prima. */
#wiz-mat-tabs, #wiz-arr-tabs { position:relative !important; isolation:isolate; }
.rt-tab-ind { position:absolute; left:0; top:0; z-index:0; pointer-events:none; border-radius:12px;
    background:linear-gradient(135deg,#b8923e 0%,#c9a84c 35%,#f0d070 65%,#d4a840 100%);
    box-shadow:0 8px 22px rgba(201,168,76,.30), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1), opacity .25s; }
:is(#wiz-mat-tabs, #wiz-arr-tabs) .wiz-mat-tab { position:relative; z-index:1; transition:color .3s, background-color .25s, border-color .25s !important; }
:is(#wiz-mat-tabs, #wiz-arr-tabs).rt-ind-on .wiz-mat-tab.active { background:transparent !important; box-shadow:none !important; color:#3a2808 !important; font-weight:700 !important; }
:is(#wiz-mat-tabs, #wiz-arr-tabs).rt-ind-on .wiz-mat-tab.active i, :is(#wiz-mat-tabs, #wiz-arr-tabs).rt-ind-on .wiz-mat-tab.active svg { opacity:1 !important; color:#3a2808 !important; }
@media (min-width:769px) {
    #wiz-mat-tabs, #wiz-arr-tabs {
        width:fit-content !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important;
        padding:5px !important; gap:2px !important; border-radius:17px !important;
        background:#100e0b !important; border:1px solid #2f2922 !important; box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03) !important;
    }
    :is(#wiz-mat-tabs, #wiz-arr-tabs) .wiz-mat-tab { padding:9px 15px !important; border-radius:12px !important; color:#d2cabd !important; font-size:13.5px !important; font-weight:600 !important; letter-spacing:0 !important; background:transparent !important; box-shadow:none !important; }
    :is(#wiz-mat-tabs, #wiz-arr-tabs) .wiz-mat-tab:not(.active):hover { color:#f3efe7 !important; background:rgba(255,255,255,.06) !important; }
    :is(#wiz-mat-tabs, #wiz-arr-tabs) .wiz-mat-tab i, :is(#wiz-mat-tabs, #wiz-arr-tabs) .wiz-mat-tab svg { color:#e8c96d; opacity:.9 !important; }
}
@media (max-width:768px) {
    :is(#wiz-mat-tabs, #wiz-arr-tabs).rt-ind-on .wiz-mat-tab.active { border-color:transparent !important; }
    .rt-tab-ind { border-radius:10px; }
}
@media (prefers-reduced-motion:reduce) { .rt-tab-ind { transition:none; } }

/* ═════════ I TASTI DI CONFERMA E DI RESET RIMASTI INDIETRO (11/10, l'utente: «aggiorna anche tutti i tasti di conferma e
   reset che non sono stati aggiornati al nuovo design») ═════════
   Stessa pelle dei tasti sopra (oro che si riempie d'oro chiaro; neutro scuro che si riempie d'avorio col testo che diventa
   caffè) più il ROSSO delle finestre (finestre.css, .rai-dlg-btn-danger) per il reset che cancella tutto. Misure e posizione
   restano quelle di ogni pagina. Elenco, inventariato dal vivo pagina per pagina (le finestre sono già in finestre.css):
     oro    — Genera del Plastico 3D (#pl-btn-gen), Conferma del materiale di zona (#zp-mat-ok), Applica della tonalità
              (.tl-ok), Salva modifiche e Salva foto delle Impostazioni, Usa come bozzetto e Applica (riempimento) di Sketch;
     neutro — RESET della Pro Suite e del Plastico 3D, Annulla e Indietro delle Zone, Annulla della tonalità, Reset dei punti
              di fuga di Sketch;
     rosso  — Reset tutto delle Zone.
   I tasti senza id si agganciano col loro onclick / data-act: chi li rinomina li toglie da qui. Un tasto nuovo di questo tipo
   va in queste liste (e in /tasti.js). */
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply,
    #btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista,
    [onclick^="zpReset("]) {
    position:relative; isolation:isolate; overflow:hidden; -webkit-tap-highlight-color:transparent;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important; font-weight:700 !important;
    text-transform:none !important; letter-spacing:-.01em !important; -webkit-font-smoothing:antialiased;
    border-radius:14px !important; opacity:1 !important; filter:none !important; text-shadow:none !important;
    transition:color .35s, border-color .35s, box-shadow .35s, transform .12s !important;
}
/* a riposo */
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply) {
    background:linear-gradient(135deg,#b8923e 0%,#c9a84c 35%,#f0d070 65%,#d4a840 100%) !important; background-size:100% 100% !important;
    color:#3a2808 !important; border:0 !important;
    box-shadow:0 10px 28px rgba(201,168,76,.26), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply) svg { stroke:currentColor; }
:is(#btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista) {
    background:#16151b !important; color:#f1ece3 !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:none !important;
}
[onclick^="zpReset("] { background:rgba(220,50,50,.12) !important; color:#fca5a5 !important; border:1px solid rgba(240,90,90,.45) !important; box-shadow:none !important; }
/* spenti: pieni, leggibili, senza ombra né movimento */
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply):disabled {
    background:#2a2620 !important; color:#b9ae98 !important; box-shadow:none !important; cursor:not-allowed !important;
}
:is(#btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista, [onclick^="zpReset("]):disabled {
    background:#141318 !important; color:#8f887c !important; cursor:not-allowed !important;
}
/* lo sweep, sotto il testo */
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply,
    #btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista,
    [onclick^="zpReset("])::before {
    content:""; display:block; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; animation:none;
    background:var(--rt-sweep-oro); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--rt-ease);
}
:is(#btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista)::before { background:var(--rt-sweep-indietro); }
/* (!important: la regola dello sweep sopra contiene degli id dentro :is() e vincerebbe sul solo attributo) */
[onclick^="zpReset("]::before { background:linear-gradient(110deg,#e05252,#f87171 60%,#e86060) !important; }
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply):disabled::before { display:none; }
/* il movimento: col mouse al passaggio, da telefono al tocco (.rt-go), da tastiera col focus */
@media (hover:hover) {
    :is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply,
        #btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista,
        [onclick^="zpReset("]):not(:disabled):hover::before { transform:scaleX(1); }
    :is(#btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista):not(:disabled):hover { color:var(--rt-ink) !important; border-color:transparent !important; }
    [onclick^="zpReset("]:not(:disabled):hover { color:#1a0505 !important; border-color:transparent !important; }
    :is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply):not(:disabled):hover {
        transform:none !important; box-shadow:0 16px 40px rgba(201,168,76,.40), inset 0 1px 0 rgba(255,255,255,.35) !important; }
}
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply,
    #btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista,
    [onclick^="zpReset("]):is(:focus-visible, .rt-go):not(:disabled)::before { transform:scaleX(1); }
:is(#btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista):is(:focus-visible, .rt-go):not(:disabled) { color:var(--rt-ink) !important; border-color:transparent !important; }
[onclick^="zpReset("]:is(:focus-visible, .rt-go):not(:disabled) { color:#1a0505 !important; border-color:transparent !important; }
:is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply,
    #btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista,
    [onclick^="zpReset("]):not(:disabled):active { transform:scale(.975) !important; transition:transform .1s; }
@media (prefers-reduced-motion:reduce) {
    :is(#pl-btn-gen, #zp-mat-ok, .tl-ok, #btn-save-profile, #btn-avatar-save, #b-send-sketch, #fp-apply,
        #btn-global-reset, #pl-btn-reset, [onclick^="zpCancelMatPick("], [onclick^="zpBackToEditor("], .tl-b:not(.tl-ok), [data-act="vpReset()"], #b-torna-vista,
        [onclick^="zpReset("])::before { transition:none; }
}

/* ═════════ LE CLASSI PER OGNI TASTO NUOVO (28/10, l'utente: «per il futuro ogni tasto che verrà aggiunto, qualunque sia il
   contesto, avrà grafica nuova e coerente») ═════════
   Un tasto nuovo NON si stila in linea e non si aggiunge agli elenchi di id qui sopra: prende una classe e basta.
     .rt-oro     — chi manda avanti, conferma, genera, compra (uno solo per gruppo di tasti);
     .rt-neutro  — indietro e secondari; con .rt-contorno tiene il bordo d'oro (la Service dei piani).
   Stessa pelle dei tasti sopra: misure e posizione restano quelle della pagina (padding, larghezza, altezza). La freccia
   a destra (svg.lucide-arrow-right, anche scritto a mano con quella classe) va nel cerchietto e esce e rientra.
   Una pagina che usa queste classi carica /tasti.css (DOPO i suoi fogli: alcuni mettono raggi con !important) e /tasti.js.
   Prima usata sulla landing (Inizia a renderizzare, piani, ricariche, invito finale) e sul rimando alla guidata della Pro
   Suite da telefono.
   :not(#rt-n) non toglie niente: alza il peso a quello di un id, così la classe vince anche sui fogli delle pagine che
   scrivono le pillole con selettori a due classi e !important (landing-scena.css: «.pi-cta-row .ls-cta-btn»). */
:is(.rt-oro, .rt-neutro):not(#rt-n) {
    position:relative; isolation:isolate; overflow:hidden; -webkit-tap-highlight-color:transparent;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important; font-weight:700 !important;
    text-transform:none !important; letter-spacing:-.01em !important; -webkit-font-smoothing:antialiased;
    border-radius:14px !important; opacity:1 !important; filter:none !important; text-shadow:none !important;
    text-decoration:none !important;
    transition:color .35s, border-color .35s, box-shadow .35s, transform .12s !important;
}
.rt-oro:not(#rt-n) {
    background:linear-gradient(135deg,#b8923e 0%,#c9a84c 35%,#f0d070 65%,#d4a840 100%) !important; background-size:100% 100% !important;
    color:#3a2808 !important; border:0 !important;
    box-shadow:0 10px 28px rgba(201,168,76,.26), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.rt-neutro:not(#rt-n) { background:#16151b !important; color:#f1ece3 !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:none !important; }
.rt-neutro.rt-contorno:not(#rt-n) { border:1.5px solid #c9a84c !important; color:#f0d070 !important; }
.rt-oro:not(#rt-n):disabled { background:#2a2620 !important; color:#b9ae98 !important; box-shadow:none !important; cursor:not-allowed !important; }
.rt-neutro:not(#rt-n):disabled { background:#141318 !important; color:#8f887c !important; cursor:not-allowed !important; }
:is(.rt-oro, .rt-neutro) > * { position:relative; }
:is(.rt-oro, .rt-neutro)::before {
    content:""; display:block; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; animation:none;
    background:var(--rt-sweep-oro); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--rt-ease);
}
.rt-neutro::before { background:var(--rt-sweep-indietro); }
:is(.rt-oro, .rt-neutro):disabled::before { display:none; }
/* la freccia nel cerchietto */
:is(.rt-oro, .rt-neutro) :is(svg.lucide-arrow-right, svg.lucide-arrow-left) {
    width:24px !important; height:24px !important; padding:5px; box-sizing:border-box; flex:none; margin:-2px 0;
    border-radius:50%; overflow:hidden; stroke-width:2.6;
}
.rt-oro :is(svg.lucide-arrow-right, svg.lucide-arrow-left) { background:#3a2808; color:#f0d070; }
.rt-neutro :is(svg.lucide-arrow-right, svg.lucide-arrow-left) { background:#2a241c; color:#e8c96d; transition:background .35s, color .35s; }
/* il movimento: col mouse al passaggio, da telefono al tocco (.rt-go), da tastiera col focus */
@media (hover:hover) {
    :is(.rt-oro, .rt-neutro):not(:disabled):hover::before { transform:scaleX(1); }
    .rt-neutro:not(#rt-n):not(:disabled):hover { color:var(--rt-ink) !important; border-color:transparent !important; }
    .rt-neutro:not(:disabled):hover :is(svg.lucide-arrow-right, svg.lucide-arrow-left) { background:#3a2808; }
    .rt-oro:not(#rt-n):not(:disabled):hover { transform:none !important; box-shadow:0 16px 40px rgba(201,168,76,.40), inset 0 1px 0 rgba(255,255,255,.35) !important; }
    :is(.rt-oro, .rt-neutro):not(:disabled):hover :is(.lucide-arrow-right, .lucide-chevron-right, [data-rt="avanti"]) :is(path, line, polyline) { animation:rtFrecciaAvanti .55s var(--rt-ease); }
    :is(.rt-oro, .rt-neutro):not(:disabled):hover :is(.lucide-zap, .lucide-sparkles, .lucide-wand-sparkles) { animation:rtFulmine .6s var(--rt-ease); }
}
:is(.rt-oro, .rt-neutro):is(:focus-visible, .rt-go):not(:disabled)::before { transform:scaleX(1); }
.rt-neutro:not(#rt-n):is(:focus-visible, .rt-go):not(:disabled) { color:var(--rt-ink) !important; border-color:transparent !important; }
.rt-neutro:is(:focus-visible, .rt-go):not(:disabled) :is(svg.lucide-arrow-right, svg.lucide-arrow-left) { background:#3a2808; }
:is(.rt-oro, .rt-neutro):not(#rt-n):not(:disabled):active { transform:scale(.975) !important; transition:transform .1s !important; }
@media (prefers-reduced-motion:reduce) { :is(.rt-oro, .rt-neutro)::before { transition:none; } }