/* ═══════════════════════════════════════════════════════════════════════════
   AIVENA — IL TELEFONO COL DESIGN NUOVO (strato di prova, solo founder, 06/10/2026)
   Si posa sopra `web/mobile.html` quando `<html data-design="nuovo">` (lo mette il
   server, `app/sito/mobile_nuovo.py`). È il linguaggio della v3 di aivena.link,
   quella che Miki ha amato («hai fatto un design fuori di testa»): fondo piano
   #08070E, superfici piatte con un filo di luce, Manrope (niente Bricolage nei
   titoli, niente mono maiuscolo nelle etichette), lime per le azioni e gli stati,
   viola per i dati, NIENTE aloni colorati, movimento a molla.
   Molti pezzi della pagina hanno lo stile scritto a mano nel markup: qui si vince
   con gli id e con !important. Niente qui cambia cosa fa la pagina.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-design="nuovo"]{
  --ac:#C9FF4A; --fondo:#08070E; --testo:#EDEBF5; --sec:#D2CFDF; --ter:#C4C1D4;
  --fioco:#9A97AD; --spento:#9A97AD; --grigio:#8B889E; --off:#7E7B92;
  --n-carta:#0C0B14; --n-alto:#17151F; --n-campo:#100F19; --n-menu:#16151E;
  --n-linea:rgba(255,255,255,.07); --n-linea2:rgba(255,255,255,.12);
  --n-lime:#C9FF4A; --n-lime2:#B4FF29; --n-lime3:#8FE000; --n-sulime:#0A1800;
  --n-viola:#7C4DFF; --n-violac:#C6B4FF;
  --n-primario:linear-gradient(150deg,#C9FF4A,#B4FF29 48%,#8FE000);
  --n-ease:cubic-bezier(.2,.8,.2,1); --n-molla:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
html[data-design="nuovo"], html[data-design="nuovo"] body{ background:#08070E }
html[data-design="nuovo"] body{ font-family:'Manrope',system-ui,-apple-system,sans-serif }

/* ── niente nebulosa colorata: fondo piano (Miki 02/10, «niente aloni sul nero») */
html[data-design="nuovo"] #cielo{ display:none }

/* ── tipografia: titoli Manrope 800, etichette in frase normale ── */
html[data-design="nuovo"] .bric{ font-family:'Manrope',system-ui,sans-serif !important; font-weight:800 !important; letter-spacing:-.03em !important; text-shadow:none !important }
html[data-design="nuovo"] .occhio{ font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; letter-spacing:0; color:var(--fioco);
  margin:24px 2px 10px; text-transform:lowercase }
html[data-design="nuovo"] .occhio::first-letter{ text-transform:uppercase }
/* le etichette piccole in mono maiuscolo (RIFERIMENTI, MODELLO, AUDIO, MASS…) */
html[data-design="nuovo"] #corpo .mono[style*="letter-spacing:.15em"],
html[data-design="nuovo"] #corpo .mono[style*="letter-spacing:.18em"],
html[data-design="nuovo"] #boxPrompt span[style*="text-transform:uppercase"]{
  font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:600 !important; letter-spacing:0 !important;
  color:var(--fioco) !important; text-transform:lowercase !important; display:block }
html[data-design="nuovo"] #corpo .mono[style*="letter-spacing:.15em"]::first-letter,
html[data-design="nuovo"] #corpo .mono[style*="letter-spacing:.18em"]::first-letter,
html[data-design="nuovo"] #boxPrompt span[style*="text-transform:uppercase"]::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] #boxPrompt span[style*="text-transform:uppercase"]{ display:inline-block }

/* ── le testate delle viste: titolo grande come iOS ── */
html[data-design="nuovo"] .testaVista{ padding:6px 0 14px; min-height:48px }
html[data-design="nuovo"] .testaVista > .bric,
html[data-design="nuovo"] .testaVista .bric{ font-size:30px !important; line-height:1.08 }
html[data-design="nuovo"] #v-lotto > div:first-child .bric{ font-size:30px !important }
html[data-design="nuovo"] .testaVista .mono{ font-family:'Manrope',sans-serif !important; font-size:22px !important; font-weight:800 !important;
  letter-spacing:-.02em !important; text-transform:lowercase }
html[data-design="nuovo"] .testaVista .mono::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] .testaVista .mono span{ font-size:15px; font-weight:600; color:var(--fioco) }
html[data-design="nuovo"] .logoMini svg, html[data-design="nuovo"] #marchio svg{ animation:none !important; filter:none !important; color:#EDEBF5 }
html[data-design="nuovo"] .testaVista .logoMini{ display:none }

/* ── bottoni ── */
html[data-design="nuovo"] .tocca{ transition:background .2s, color .2s, box-shadow .2s, transform .3s var(--n-molla) }
html[data-design="nuovo"] .tocca:active{ transform:scale(.96); transition-duration:.12s }
/* v2: il riflesso che passa sopra Genera si anima sulla posizione dello sfondo, quindi la posizione NON è !important */
html[data-design="nuovo"] .genera{ border-radius:999px !important; min-height:52px; display:flex !important; align-items:center; justify-content:center;
  padding:0 20px !important; font-size:16px !important; font-weight:800; letter-spacing:-.01em;
  color:var(--n-sulime) !important; background-color:#B4FF29 !important;
  background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%), var(--n-primario) !important;
  background-size:260% 100%, 100% 100%; background-position:180% 0, 0 0; background-repeat:no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important }
html[data-design="nuovo"] .chiudi{ width:36px; height:36px; background:transparent; border:0; box-shadow:inset 0 0 0 1px var(--n-linea2) }
html[data-design="nuovo"] .chiudi svg{ stroke:#C4C1D4 }
html[data-design="nuovo"] .tondo{ width:38px; height:38px; background:transparent !important; border:0 !important;
  box-shadow:inset 0 0 0 1px var(--n-linea2) !important }
html[data-design="nuovo"] .tondo.io{ font-family:'Manrope',sans-serif; font-weight:800; background:var(--n-alto) !important;
  box-shadow:0 0 0 1.5px var(--n-viola) !important }
html[data-design="nuovo"] .pallino{ background:var(--n-lime); border-color:#08070E; box-shadow:none }

/* ── la testata di Esplora ── */
html[data-design="nuovo"] #testa{ padding:12px 16px 8px }
html[data-design="nuovo"] #testa .nome{ font-size:12px; letter-spacing:.14em; color:#EDEBF5 }
html[data-design="nuovo"] .ricerca .bordi, html[data-design="nuovo"] .ricerca .alone, html[data-design="nuovo"] .ricerca .anello{ display:none !important }
html[data-design="nuovo"] .ricerca .campo{ background:var(--n-campo) !important; border:0 !important; border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--n-linea2) !important }
html[data-design="nuovo"] .ricerca input{ font-size:15px }

/* ── superfici: carte piatte, righe con un filo ── */
html[data-design="nuovo"] .vetro{ background:var(--n-carta) !important; border:0 !important; border-radius:22px !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:inset 0 0 0 1px var(--n-linea) !important }
html[data-design="nuovo"] .riga{ background:var(--n-carta) !important; border:0 !important; border-radius:18px;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:inset 0 0 0 1px var(--n-linea) !important }
html[data-design="nuovo"] .riga .nome{ font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em }
html[data-design="nuovo"] .riga .q{ font-family:'Manrope',sans-serif }
html[data-design="nuovo"] .stato{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:0; border-radius:7px }
html[data-design="nuovo"] .chip{ border:0 !important; background:rgba(255,255,255,.06); color:#EDEBF5; font-size:14px; font-weight:600;
  padding:8px 14px; min-height:36px; transition:background .2s, color .2s, box-shadow .2s, transform .3s var(--n-molla) }
html[data-design="nuovo"] .chip:active{ transform:scale(.95) }
html[data-design="nuovo"] .chip.on{ background:rgba(201,255,74,.14) !important; color:var(--n-lime) !important; box-shadow:inset 0 0 0 1px rgba(201,255,74,.45) }
html[data-design="nuovo"] .chip.on svg{ stroke:currentColor }

/* ═══ ESPLORA ═══ */
html[data-design="nuovo"] #eroe{ border:0; border-radius:22px; box-shadow:inset 0 0 0 1px var(--n-linea), 0 30px 60px -34px rgba(0,0,0,.9) }
html[data-design="nuovo"] #eroe .freccia{ background:var(--n-primario); border:0; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none }
html[data-design="nuovo"] #eroe .freccia svg{ stroke:var(--n-sulime) }
html[data-design="nuovo"] #eroe .testi .bric{ font-size:26px !important }
html[data-design="nuovo"] .tagNew{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:800; letter-spacing:0; border-radius:8px;
  background:var(--n-primario); animation:none }
html[data-design="nuovo"] .tagScuro{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:0; border-radius:8px;
  background:rgba(8,7,14,.55); border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter:none; -webkit-backdrop-filter:none }
html[data-design="nuovo"] .spotCarta{ background:var(--n-carta) !important; border:0 !important; border-radius:22px;
  box-shadow:inset 0 0 0 1px var(--n-linea) !important }
html[data-design="nuovo"] .spotMedia{ background:#08070E }
html[data-design="nuovo"] .spotMedia::after{ background:linear-gradient(180deg, rgba(8,7,14,.35), rgba(8,7,14,0) 30%) }
html[data-design="nuovo"] .spotChip{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:0; color:#EDEBF5;
  border:0; border-radius:8px; background:rgba(8,7,14,.62); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); text-transform:lowercase }
html[data-design="nuovo"] .spotChip::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] .spotChip i{ box-shadow:none; animation:none }
html[data-design="nuovo"] .spotTesti .nome{ font-family:'Manrope',sans-serif; font-size:18px; letter-spacing:-.01em }
html[data-design="nuovo"] .spotTesti .sub{ font-size:13px }
html[data-design="nuovo"] .spotFreccia{ color:var(--n-sulime); background:var(--n-primario); border:0; box-shadow:none }
html[data-design="nuovo"] #prisma{ border:0; border-radius:22px; box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] #prisma .mono{ font-family:'Manrope',sans-serif !important; font-size:12px !important; letter-spacing:0 !important; color:var(--n-violac) !important }
html[data-design="nuovo"] #pianiBrevi{ border:0 !important; box-shadow:inset 0 0 0 1px var(--n-linea) !important; background:var(--n-carta) !important }

/* ═══ CREA ═══ */
html[data-design="nuovo"] #eroeCrea{ border:0 !important; border-radius:22px !important; box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] #eroeCrea span[style*="JetBrains"]{ font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:800 !important;
  letter-spacing:0 !important; border-radius:8px !important; text-transform:lowercase }
html[data-design="nuovo"] #eroeCrea span[style*="JetBrains"]::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] .mattone{ background:var(--n-carta) !important; border:0 !important; border-radius:20px;
  box-shadow:inset 0 0 0 1px var(--n-linea) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important }
html[data-design="nuovo"] .mattone .kick{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:0; text-transform:lowercase }
html[data-design="nuovo"] .mattone .kick::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] .mattone .nome{ font-family:'Manrope',sans-serif; font-size:15px }
html[data-design="nuovo"] .squircle{ animation:none !important; box-shadow:none !important; border:0 !important; border-radius:14px;
  background:rgba(255,255,255,.06) !important }

/* ═══ IL MODULO (FORM) ═══ */
html[data-design="nuovo"] #v-form .grp > div:first-child{ border:0 !important; border-radius:22px !important; box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] #v-form .sfondoBanner{ display:none !important }   /* gli aloni colorati dietro il nome del modello */
html[data-design="nuovo"] #modNome{ font-size:22px !important; color:#EDEBF5 !important }
html[data-design="nuovo"] #v-form .grp > div:first-child > .tocca{ border:0 !important; background:rgba(8,7,14,.6) !important;
  box-shadow:inset 0 0 0 1px var(--n-linea2) !important; font-size:13px !important }
html[data-design="nuovo"] #formTitolo{ font-family:'Manrope',sans-serif !important; font-size:17px !important; font-weight:800 !important;
  letter-spacing:-.01em !important; text-transform:lowercase }
html[data-design="nuovo"] #formTitolo::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] #formTitolo{ display:inline-block }
/* i segmenti Le foto / Video di riferimento: come iOS */
html[data-design="nuovo"] #tabs{ border:0 !important; background:rgba(255,255,255,.06) !important; border-radius:12px !important; padding:3px !important; gap:3px !important }
html[data-design="nuovo"] #tabs .tab{ border-radius:9px !important; color:var(--fioco); font-size:14px !important; font-weight:600 !important; padding:9px 6px !important }
html[data-design="nuovo"] #tabs .tab.on{ color:#EDEBF5 !important; background:rgba(255,255,255,.11) !important; box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 0 0 .5px rgba(255,255,255,.08) }
/* tutte le caselle del modulo: una superficie sola, piatta */
html[data-design="nuovo"] #rigaRef, html[data-design="nuovo"] #rigaRif, html[data-design="nuovo"] #rigaModVideo,
html[data-design="nuovo"] #boxPrompt, html[data-design="nuovo"] #scenaAuto, html[data-design="nuovo"] #rigaMotore,
html[data-design="nuovo"] #rigaModelle, html[data-design="nuovo"] #rigaAudioGen, html[data-design="nuovo"] #rigaMass,
html[data-design="nuovo"] #rigaBozza, html[data-design="nuovo"] #rigaLungo, html[data-design="nuovo"] #rigaQuanti{
  border:0 !important; border-radius:18px !important; background:var(--n-carta) !important;
  box-shadow:inset 0 0 0 1px var(--n-linea) !important; padding:14px 16px !important }
html[data-design="nuovo"] #rigaLungo{ box-shadow:inset 0 0 0 1px rgba(201,255,74,.25) !important }
html[data-design="nuovo"] #v-form span[style*="border:1.5px dashed"], html[data-design="nuovo"] .fanRif .vuoto{
  border:1.5px dashed rgba(255,255,255,.18) !important; background:rgba(255,255,255,.03) !important; color:var(--n-lime) !important }
html[data-design="nuovo"] .fanRif .vuoto{ font-size:22px !important; line-height:1 !important; padding:0 !important }
html[data-design="nuovo"] .contaFan{ font-family:'Manrope',sans-serif; font-size:12px; background:rgba(8,7,14,.85); border-color:var(--n-linea2) }
/* il prompt */
html[data-design="nuovo"] #prompt{ font-weight:500 !important; word-spacing:0 !important; font-size:16px !important; line-height:1.5 !important }
html[data-design="nuovo"] #prompt::placeholder{ color:var(--off) }
html[data-design="nuovo"] #btAuto, html[data-design="nuovo"] #btSpicy{ border-radius:999px !important; background:rgba(255,255,255,.06); padding:6px 11px !important }
html[data-design="nuovo"] #autoTxt, html[data-design="nuovo"] #spicyTxt{ font-family:'Manrope',sans-serif !important; font-size:12px !important; letter-spacing:0 !important; text-transform:lowercase }
html[data-design="nuovo"] #autoTxt::first-letter, html[data-design="nuovo"] #spicyTxt::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] #autoTxt, html[data-design="nuovo"] #spicyTxt{ display:inline-block }
html[data-design="nuovo"] .spicyM.on{ animation:spIgniteM .42s cubic-bezier(.34,1.56,.64,1) 1 !important }   /* niente bagliore che pulsa */
html[data-design="nuovo"] #btEspandi{ border:0 !important; box-shadow:inset 0 0 0 1px var(--n-linea2) }
html[data-design="nuovo"] #scenaAuto span[style*="border-radius:50%"]{ box-shadow:none !important }
html[data-design="nuovo"] #scenaAuto .mono{ font-family:'Manrope',sans-serif !important; font-weight:600 }
html[data-design="nuovo"] #marchioRiga, html[data-design="nuovo"] #modellaIcona{ border:0 !important; background:var(--n-alto) !important; box-shadow:inset 0 0 0 1px var(--n-linea2) }
/* durata, formato, risoluzione */
html[data-design="nuovo"] .pillP{ border:0; border-radius:12px; background:rgba(255,255,255,.06); font-size:14px; font-weight:700; padding:12px 4px; min-height:44px }
html[data-design="nuovo"] .pillP.on{ background:rgba(201,255,74,.12); box-shadow:inset 0 0 0 1px rgba(201,255,74,.45); color:var(--n-lime) }
html[data-design="nuovo"] #tendina{ background:var(--n-menu); border:0; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -20px rgba(0,0,0,.85) }
html[data-design="nuovo"] #tendina .voce{ font-size:14px; border-radius:10px; color:var(--sec) }
html[data-design="nuovo"] #tendina .voce.on{ color:var(--n-lime); background:rgba(201,255,74,.10) }
html[data-design="nuovo"] #tendina input[type=range]::-webkit-slider-thumb{ background:#fff; border:0; box-shadow:0 2px 6px rgba(0,0,0,.45) }
html[data-design="nuovo"] #tendina input[type=range]::-webkit-slider-runnable-track{ background:rgba(255,255,255,.14) }
/* gli interruttori: come iOS, lime quando sono accesi (la classe la mette lo script) */
html[data-design="nuovo"] [id$="Track"]{ width:48px !important; height:28px !important; border-radius:14px !important; transition:background .3s var(--n-ease) !important }
html[data-design="nuovo"] [id$="Track"] > [id$="Knob"]{ width:22px !important; height:22px !important; top:3px !important; transition:left .4s var(--n-molla) !important }
html[data-design="nuovo"] [id$="Track"].n-on{ background:var(--n-lime2) !important }
html[data-design="nuovo"] [id$="Track"].n-on > [id$="Knob"]{ left:23px !important }
/* quanti video */
html[data-design="nuovo"] #meno, html[data-design="nuovo"] #piu{ border:0 !important; border-radius:50% !important; width:36px !important; height:36px !important;
  background:transparent !important; box-shadow:inset 0 0 0 1px var(--n-linea2); color:#EDEBF5 !important }
html[data-design="nuovo"] #quanti{ font-family:'Manrope',sans-serif !important; font-size:17px !important; font-weight:800 !important }
/* la nuvoletta dell'audio */
html[data-design="nuovo"] .nuvolaAudio, html[data-design="nuovo"] .nuvolaAudio:after{ background:var(--n-menu); border-color:rgba(255,255,255,.12) }
/* il piede col Genera */
html[data-design="nuovo"] #piedeForm, html[data-design="nuovo"] #piedeModelli{ background:linear-gradient(180deg, rgba(8,7,14,0), #08070E 34%) }
html[data-design="nuovo"] #costo{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; color:var(--fioco) !important }
html[data-design="nuovo"] #rigaGen #genTraffico{ font-family:'Manrope',sans-serif !important }

/* ═══ RIFERIMENTI (foto, video, audio) ═══ */
html[data-design="nuovo"] .grigliaRifs .rf{ border:0; box-shadow:inset 0 0 0 1px var(--n-linea2) }
html[data-design="nuovo"] .grigliaRifs .rf.prima{ box-shadow:inset 0 0 0 2px var(--n-lime) }
html[data-design="nuovo"] .grigliaRifs .rf .n{ font-family:'Manrope',sans-serif; font-weight:800 }
html[data-design="nuovo"] .grigliaRifs .rf .cmd span{ border:0; border-radius:12px; background:rgba(8,7,14,.74); box-shadow:inset 0 0 0 1px var(--n-linea2) }
html[data-design="nuovo"] .grigliaRifs .rf .cmd span.via{ color:#FF485E; box-shadow:inset 0 0 0 1px rgba(255,72,94,.35) }
html[data-design="nuovo"] .grigliaRifs .aggiungiRif, html[data-design="nuovo"] .aggiungi{ border:1.5px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.03); color:var(--n-lime) }
html[data-design="nuovo"] .grigliaRifs .rf.aud{ background:var(--n-carta) }

/* ═══ MODELLI ═══ */
html[data-design="nuovo"] #famiglie{ border:0 !important; gap:3px !important; padding:3px !important; background:rgba(255,255,255,.06); border-radius:12px }
html[data-design="nuovo"] #famiglie > *{ border-radius:9px; padding:9px 12px !important; margin:0 !important; border-bottom:0 !important }
html[data-design="nuovo"] #famiglie > .on, html[data-design="nuovo"] #famiglie > [class*="on"]{ background:rgba(255,255,255,.11); box-shadow:0 1px 2px rgba(0,0,0,.4) }
html[data-design="nuovo"] #famiglie i, html[data-design="nuovo"] #famiglie span[style*="height:2px"], html[data-design="nuovo"] #famiglie span[style*="height:3px"]{ display:none !important }
html[data-design="nuovo"] #v-modelli .grp > div > .tocca{ box-shadow:0 0 0 2px #08070E, 0 0 0 4px var(--n-lime) !important; border:0 !important; border-radius:18px !important }
html[data-design="nuovo"] #v-modelli .grp > div > div:not(.tocca){ border:1.5px dashed rgba(255,255,255,.14) !important; border-radius:18px !important }

/* ═══ LE FOTO, IL DETTAGLIO, IL VIDEO DI RIFERIMENTO ═══ */
html[data-design="nuovo"] #griglia30 .ft{ border:0; box-shadow:inset 0 0 0 1px var(--n-linea2) }
html[data-design="nuovo"] #griglia30 .ft.sel{ box-shadow:inset 0 0 0 2px var(--n-lime) }
html[data-design="nuovo"] #griglia30 .ft .spunta{ background:var(--n-lime); box-shadow:none }
html[data-design="nuovo"] #griglia30 .ft .spunta svg{ stroke:var(--n-sulime) }
html[data-design="nuovo"] #btSeleziona{ border:0 !important; border-radius:999px !important; box-shadow:inset 0 0 0 1px var(--n-linea2) }
html[data-design="nuovo"] #barraSelOn{ background:rgba(201,255,74,.08) !important; border-color:rgba(201,255,74,.2) !important }
html[data-design="nuovo"] #nSel{ color:var(--n-lime) !important; font-family:'Manrope',sans-serif !important }
html[data-design="nuovo"] #v-mdett div[style*="aspect-ratio:9/13"], html[data-design="nuovo"] #v-mvideo div[style*="aspect-ratio:9/13"]{
  border:0 !important; border-radius:22px !important; box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] #dettInfo, html[data-design="nuovo"] #videoInfo{ border:0 !important; background:var(--n-carta) !important; box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] #v-mdett div[style*="border-radius:14px"]:not(.tocca), html[data-design="nuovo"] #v-mvideo div[style*="border-radius:14px"]:not(.tocca){
  border:0 !important; background:var(--n-carta) !important; box-shadow:inset 0 0 0 1px var(--n-linea) !important; border-radius:16px !important }
html[data-design="nuovo"] #v-mdett span[style*="box-shadow:0 0 10px"], html[data-design="nuovo"] #v-mvideo span[style*="box-shadow:0 0 10px"]{ box-shadow:none !important; animation:none !important }
html[data-design="nuovo"] #v-mdett .tocca[style*="dashed"], html[data-design="nuovo"] #btVideoRif, html[data-design="nuovo"] #btVideoPiu{
  border:0 !important; border-radius:999px !important; background:transparent !important; color:#EDEBF5 !important;
  box-shadow:inset 0 0 0 1px var(--n-linea2) !important; min-height:48px; display:flex !important; align-items:center; justify-content:center }
html[data-design="nuovo"] #btVideoVia{ border:0 !important; border-radius:999px !important; background:transparent !important; color:#FF485E !important;
  box-shadow:inset 0 0 0 1px rgba(255,72,94,.35) !important }
html[data-design="nuovo"] #dettBadge{ font-family:'Manrope',sans-serif !important; letter-spacing:0 !important }

/* ═══ MEDIA ═══ */
html[data-design="nuovo"] #v-media .testaVista > span:first-child > svg{ display:none }
html[data-design="nuovo"] #v-media .testaVista > span:last-child{ border:0 !important; background:rgba(255,255,255,.06) !important; border-radius:12px !important }
html[data-design="nuovo"] #v-media .dens{ border-radius:9px !important; color:var(--fioco) }
html[data-design="nuovo"] #v-media .dens.on{ background:rgba(255,255,255,.11) !important; color:#EDEBF5 !important }
html[data-design="nuovo"] .cella{ border:0; border-radius:12px; box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] .cella .n{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; border:0; background:rgba(8,7,14,.62) }
html[data-design="nuovo"] .cella .mono{ font-family:'Manrope',sans-serif !important; letter-spacing:0 !important }

/* ═══ LOTTO ═══ */
html[data-design="nuovo"] #lottoConta{ font-family:'Manrope',sans-serif !important; font-size:13px !important; color:var(--fioco) !important }
html[data-design="nuovo"] #lottoCorrente .mono{ font-family:'Manrope',sans-serif !important; letter-spacing:0 !important }
html[data-design="nuovo"] #lottoCorrente [style*="box-shadow:0 0"]{ box-shadow:none !important }
html[data-design="nuovo"] #lottoCorrente > div, html[data-design="nuovo"] #lottoCorrente .vetro{
  border:0 !important; background:var(--n-carta) !important; box-shadow:inset 0 0 0 1px var(--n-linea) !important; border-radius:22px !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important }

/* ═══ PROFILO: una lista raggruppata, come le Impostazioni ═══ */
html[data-design="nuovo"] #v-profilo > div[style*="border-radius:18px"]{ border:0 !important; background:var(--n-carta) !important; border-radius:22px !important;
  box-shadow:inset 0 0 0 1px var(--n-linea) !important; padding:18px !important }
html[data-design="nuovo"] #ioIniziale{ font-family:'Manrope',sans-serif !important; background:var(--n-alto) !important; box-shadow:0 0 0 1.5px var(--n-viola) !important }
html[data-design="nuovo"] #ioNome{ font-size:20px !important }
html[data-design="nuovo"] #ioGettoni{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700; color:var(--n-lime) !important }
html[data-design="nuovo"] #vociProfilo{ margin-top:14px; padding:0 16px; border-radius:22px; background:var(--n-carta); box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] #vociProfilo .vocep{ margin:0; padding:16px 0; border:0; border-radius:0; background:transparent; border-bottom:1px solid var(--n-linea) }
html[data-design="nuovo"] #vociProfilo .vocep:last-child{ border-bottom:0 }
html[data-design="nuovo"] .vocep .t{ font-size:15px; font-weight:600 }
html[data-design="nuovo"] .vocep .v{ font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:0; color:var(--fioco) }
html[data-design="nuovo"] .vocep.n-design .v{ color:var(--n-lime) }

/* ═══ INSTALLA ═══ */
html[data-design="nuovo"] #v-installa > div[style*="border-radius:16px"], html[data-design="nuovo"] #v-installa > div[style*="border-radius:14px"]{
  border:0 !important; background:var(--n-carta) !important; border-radius:22px !important; box-shadow:inset 0 0 0 1px var(--n-linea) !important }
html[data-design="nuovo"] #v-installa .mono[style*="padding:2px 7px 3px"]{ font-family:'Manrope',sans-serif !important; font-size:12px !important;
  letter-spacing:0 !important; border-radius:7px !important }

/* ═══ LA BARRA IN BASSO E LA STRISCIA DEL LOTTO VIVO ═══ */
html[data-design="nuovo"] #barra .vetrina{ background:var(--n-carta); border:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -16px rgba(0,0,0,.9) }
html[data-design="nuovo"] #barra a{ color:var(--fioco) }
html[data-design="nuovo"] #barra a.on{ color:var(--n-lime) }
html[data-design="nuovo"] #barra a span{ font-size:11px; font-weight:700; letter-spacing:0 }
html[data-design="nuovo"] #orb .palla{ background:var(--n-primario); border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -10px rgba(0,0,0,.85) }
html[data-design="nuovo"] #orb .giro, html[data-design="nuovo"] #orb .fiore{ display:none }
html[data-design="nuovo"] #orbLogo svg{ color:var(--n-sulime); filter:none }
html[data-design="nuovo"] #striscia{ border:0; background:var(--n-carta); backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--n-linea) }
html[data-design="nuovo"] #striscia .vivo{ background:var(--n-lime); box-shadow:none }
html[data-design="nuovo"] #strisciaTempo{ font-family:'Manrope',sans-serif !important }

/* ═══ LA TENDINA DEL PROFILO, I FOGLI CHE SALGONO, L'AVVISO ═══ */
html[data-design="nuovo"] #tendinaIo{ background:var(--n-menu); border:0; border-radius:18px; backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -20px rgba(0,0,0,.85) }
html[data-design="nuovo"] #tendinaIo .cima{ border-bottom-color:var(--n-linea) }
html[data-design="nuovo"] #tdRicarica{ border-radius:999px !important; min-height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--n-sulime) !important; background:var(--n-primario) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important; font-weight:800 !important }
html[data-design="nuovo"] #tdGettoni{ font-family:'Manrope',sans-serif !important }
html[data-design="nuovo"] #spicyDentro, html[data-design="nuovo"] #cassaDentro{ background:#100F18 !important; border-top:0 !important;
  border-radius:28px 28px 0 0 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10) }
html[data-design="nuovo"] #spicyDentro .bt, html[data-design="nuovo"] #cassaDentro .bt{ border-radius:999px; min-height:50px; font-size:15px; letter-spacing:0 }
html[data-design="nuovo"] #cassaDentro .bt:not(.ghost){ background:var(--n-primario); box-shadow:inset 0 1px 0 rgba(255,255,255,.45) }
html[data-design="nuovo"] #cassaDentro .bt.ghost{ border:0; box-shadow:inset 0 0 0 1px var(--n-linea2) }
html[data-design="nuovo"] #cassaDentro h3, html[data-design="nuovo"] #cassaDentro .okBig{ font-family:'Manrope',sans-serif }
html[data-design="nuovo"] #cassaDentro .pall{ box-shadow:none }
html[data-design="nuovo"] #avviso{ background:var(--n-menu); border:0; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px rgba(0,0,0,.6); font-size:14px }

/* ═══ I POSTI VUOTI ═══ */
html[data-design="nuovo"] .vuoto{ font-family:'Manrope',sans-serif; letter-spacing:0; font-size:13px; line-height:1.6; color:var(--fioco) }
html[data-design="nuovo"] .vuoto b{ font-size:15px; font-weight:700; letter-spacing:0; color:#EDEBF5; text-transform:lowercase }
html[data-design="nuovo"] .vuoto b::first-letter{ text-transform:uppercase }
html[data-design="nuovo"] .quadroVuoto{ background:transparent; border:1.5px dashed rgba(255,255,255,.12) }
html[data-design="nuovo"] .quadroVuoto b{ font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0; color:#EDEBF5; text-transform:lowercase }
html[data-design="nuovo"] .quadroVuoto b::first-letter{ text-transform:uppercase }

@media (prefers-reduced-motion: reduce){
  html[data-design="nuovo"] *{ animation:none !important; transition:none !important }
}

/* ═══ ANCHE SENZA SCHEDA VIDEO ═══
   `leggero.js` (browser senza accelerazione) spegne le sfocature e mette un velo
   scuro (box-shadow inset !important) su chi le aveva: qui quei pezzi sono già
   piatti e pieni, quindi lo strato vince con regole più precise. */
html[data-design="nuovo"] #eroe .freccia, html[data-design="nuovo"] .tagScuro, html[data-design="nuovo"] .spotChip{ box-shadow:none !important }
html[data-design="nuovo"] .tagScuro, html[data-design="nuovo"] .spotChip{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important }
html[data-design="nuovo"] #barra .vetrina{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -16px rgba(0,0,0,.9) !important }
html[data-design="nuovo"] #striscia{ box-shadow:inset 0 0 0 1px var(--n-linea) !important }
html[data-design="nuovo"] #tendinaIo{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -20px rgba(0,0,0,.85) !important }

/* ═══════════════════════════════════════════════════════════════════════════
   I PEZZI NUOVI (06/10, «una rivoluzione a 360 gradi… 100% diverso ma coerente»)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-design="nuovo"] .n-ic{ display:block; flex:0 0 auto }

/* le viste entrano, non compaiono */
html[data-design="nuovo"] .vista.on{ animation:n-entra .34s var(--n-ease) both }
@keyframes n-entra{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes n-salta{ 0%{ transform:scale(.82) } 60%{ transform:scale(1.12) } 100%{ transform:none } }

/* la barra: icone nuove che rimbalzano quando le scegli, il + al centro */
html[data-design="nuovo"] #barra a.on .n-ic{ animation:n-salta .45s var(--n-molla) }
html[data-design="nuovo"] #orbLogo{ display:flex; align-items:center; justify-content:center; position:relative; z-index:2 }
html[data-design="nuovo"] #orbLogo .n-ic{ color:var(--n-sulime) }
html[data-design="nuovo"] #orb .palla:active{ transform:scale(.92) }
html[data-design="nuovo"] #testa .nome{ display:none }

/* Esplora: il saluto */
html[data-design="nuovo"] #nSaluto{ padding:4px 2px 18px }
html[data-design="nuovo"] #nSaluto h1{ font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1.05; color:#EDEBF5 }
html[data-design="nuovo"] #nSaluto p{ margin-top:6px; font-size:15px; color:var(--fioco) }
html[data-design="nuovo"] .n-gettoni{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 10px 0 12px; border:0;
  border-radius:999px; background:rgba(201,255,74,.10); color:var(--n-lime); box-shadow:inset 0 0 0 1px rgba(201,255,74,.35);
  font:700 14px "Manrope",sans-serif; cursor:pointer; transition:transform .3s var(--n-molla) }
html[data-design="nuovo"] .n-gettoni:active{ transform:scale(.95) }
html[data-design="nuovo"] .n-gettoni i{ width:8px; height:8px; border-radius:50%; background:var(--n-lime) }

/* il foglio «Crea» che sale dal basso */
html[data-design="nuovo"] #nCrea{ position:fixed; inset:0; z-index:120; pointer-events:none }
html[data-design="nuovo"] #nCrea .n-velo{ position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s var(--n-ease) }
html[data-design="nuovo"] #nCrea .n-foglio{ position:absolute; left:0; right:0; bottom:0; max-width:640px; margin:0 auto; padding:8px 16px calc(22px + var(--safeB));
  background:#100F18; border-radius:28px 28px 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 -30px 60px -30px rgba(0,0,0,.8);
  transform:translateY(105%); transition:transform .42s var(--n-ease) }
html[data-design="nuovo"] #nCrea.n-aperto{ pointer-events:auto }
html[data-design="nuovo"] #nCrea.n-aperto .n-velo{ opacity:1 }
html[data-design="nuovo"] #nCrea.n-aperto .n-foglio{ transform:none }
html[data-design="nuovo"] .n-presa{ display:flex; justify-content:center; padding:4px 0 10px; cursor:grab; touch-action:none }
html[data-design="nuovo"] .n-presa i{ width:40px; height:5px; border-radius:3px; background:rgba(255,255,255,.28) }
html[data-design="nuovo"] .n-foglio-testa{ display:flex; align-items:center; justify-content:space-between; padding:2px 2px 14px; touch-action:none }
html[data-design="nuovo"] .n-foglio-testa h2{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:#EDEBF5 }
html[data-design="nuovo"] .n-tondo{ width:36px; height:36px; border-radius:50%; border:0; background:transparent; color:#C4C1D4; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--n-linea2); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--n-molla) }
html[data-design="nuovo"] .n-tondo:active{ transform:scale(.9) }
html[data-design="nuovo"] .n-scelte{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
html[data-design="nuovo"] .n-scelta{ text-align:left; border:0; color:#EDEBF5; background:var(--n-carta); border-radius:22px; cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--n-linea); padding:16px; min-height:156px; display:flex; flex-direction:column; gap:6px;
  font-family:"Manrope",sans-serif; transition:transform .3s var(--n-molla), background .2s }
html[data-design="nuovo"] .n-scelta:active{ transform:scale(.96) }
html[data-design="nuovo"] .n-scelta b{ margin-top:14px; font-size:18px; font-weight:800; letter-spacing:-.01em }
html[data-design="nuovo"] .n-scelta > span:last-child{ font-size:13px; line-height:1.4; color:var(--fioco) }
html[data-design="nuovo"] .n-q{ width:46px; height:46px; border-radius:15px; display:flex; align-items:center; justify-content:center }
html[data-design="nuovo"] .n-q-lime{ background:rgba(201,255,74,.12); color:var(--n-lime) }
html[data-design="nuovo"] .n-q-viola{ background:rgba(124,77,255,.18); color:var(--n-violac) }
html[data-design="nuovo"] .n-riga-link{ margin-top:10px; width:100%; display:flex; align-items:center; gap:12px; padding:0 16px; min-height:56px; border:0; cursor:pointer;
  border-radius:18px; background:var(--n-carta); box-shadow:inset 0 0 0 1px var(--n-linea); color:#EDEBF5; font:600 15px "Manrope",sans-serif;
  transition:transform .3s var(--n-molla) }
html[data-design="nuovo"] .n-riga-link:active{ transform:scale(.97) }
html[data-design="nuovo"] .n-riga-link span{ flex:1; text-align:left }
html[data-design="nuovo"] .n-riga-link .n-ic:first-child{ color:var(--n-lime) }
html[data-design="nuovo"] .n-riga-link .n-ic:last-child{ color:var(--off) }
/* le ali di Verba (Miki 24/10): argento e viola, mai lime; a filo, si riempiono al tocco (o al passaggio) */
.n-riga-link .n-ic.ali-verba:first-child{ color:#D7D9E0 }
.n-riga-link .ali-verba{ transition:fill-opacity .25s ease }
.n-riga-link:active .ali-verba{ fill-opacity:1 }
@media (hover:hover){ .n-riga-link:hover .ali-verba{ fill-opacity:1 } }
html[data-design="nuovo"] #nCrea.n-aperto .n-scelta, html[data-design="nuovo"] #nCrea.n-aperto .n-riga-link{ animation:n-entra .42s var(--n-ease) both }
html[data-design="nuovo"] #nCrea.n-aperto .n-scelta:nth-child(2){ animation-delay:.04s }
html[data-design="nuovo"] #nCrea.n-aperto .n-riga-link{ animation-delay:.08s }

/* il compositore: la testata del modello più bassa, «Impostazioni» e «Opzioni» come le Impostazioni di iOS */
html[data-design="nuovo"] #contBanner:not([style*="aspect-ratio"]){ height:92px !important }
html[data-design="nuovo"] #rigaMotore{ display:none !important }   /* doppione del «Cambia» sulla testata */
html[data-design="nuovo"] .n-gruppo-blocco{ margin-top:22px }
html[data-design="nuovo"] .n-etichetta{ font-size:13px; font-weight:600; color:var(--fioco); margin:0 4px 8px }
html[data-design="nuovo"] .n-gruppo{ border-radius:22px; background:var(--n-carta); box-shadow:inset 0 0 0 1px var(--n-linea); padding:0 16px; position:relative }
html[data-design="nuovo"] #nImpostazioni .n-gruppo > *, html[data-design="nuovo"] #nOpzioni .n-gruppo > *{ margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
  padding:14px 0 !important; border-bottom:1px solid var(--n-linea) !important }
html[data-design="nuovo"] #nImpostazioni .n-gruppo > .n-ultima, html[data-design="nuovo"] #nOpzioni .n-gruppo > .n-ultima{ border-bottom:0 !important }
html[data-design="nuovo"] .n-gruppo #pillRiga{ display:block !important; padding:0 !important }
html[data-design="nuovo"] #pillRiga .pillP{ display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-height:54px; padding:0 !important;
  background:transparent !important; border-radius:0; box-shadow:none !important; border-bottom:1px solid var(--n-linea); font-size:15px; font-weight:600; color:#EDEBF5 }
html[data-design="nuovo"] #pillRiga .pillP:last-of-type{ border-bottom:0 }
html[data-design="nuovo"] #pillRiga .pillP::before{ content:"Durata"; order:1; flex:1; text-align:left }
html[data-design="nuovo"] #pillRiga .pillP[data-p="ratio"]::before{ content:"Formato" }
html[data-design="nuovo"] #pillRiga .pillP[data-p="res"]::before{ content:"Risoluzione" }
html[data-design="nuovo"] #pillRiga .pillP .n-ic{ order:0; color:var(--fioco) }
html[data-design="nuovo"] #pillRiga .pillP b{ order:2; color:var(--fioco); font-weight:600 }
html[data-design="nuovo"] #pillRiga .pillP::after{ content:""; order:3; width:7px; height:7px; margin:0 4px 0 6px; border-right:2px solid var(--off); border-top:2px solid var(--off); transform:rotate(45deg) }
html[data-design="nuovo"] #pillRiga .pillP.on b{ color:var(--n-lime) }
html[data-design="nuovo"] #rigaQuanti{ min-height:54px; padding:8px 0 !important }
html[data-design="nuovo"] #rigaQuanti #quantiLabel{ font-size:15px !important; font-weight:600 !important }
html[data-design="nuovo"] #rigaGen{ margin-top:22px !important }

/* ═══════════════════════════════════════════════════════════════════════════
   v2 (08/10/2026) — Miki: «stessa roba falla per quello mobile, aggiornalo ancora di più con le
   nuove cose che abbiamo anche su pc… serve una rivoluzione anche qui. Molto bello invece quando
   schiacci più: foto, video e poi tutte le funzioni, quello tienilo; la parte Esplora anche, ma
   aggiornala ancora meglio, simile al pc, mantenendo ciò che è il sito e ciò che fa. Quello dello
   screen (la testata col saluto e i gettoni) mantieni».
   Dal PC arrivano: la barra con la pillola viola che scorre sotto la voce scelta, il + e Genera con
   la luce viola che insegue il lime, la carta del modello a locandina, le foto in pila che aprono
   il pannello grande, le targhette vive, l'anello dei gettoni, la barra del lotto viola→lime.
   La testata e il foglio «Crea» restano come sono.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes n-luccica{ from{ background-position:180% 0, 0 0 } to{ background-position:-80% 0, 0 0 } }
@keyframes n-nuovo{ 0%,100%{ box-shadow:0 0 0 0 rgba(180,255,41,.45), 0 1px 6px -2px rgba(180,255,41,.5) } 50%{ box-shadow:0 0 0 3px rgba(180,255,41,0), 0 2px 11px -2px rgba(180,255,41,.8) } }
@keyframes n-galleggia{ 0%{ transform:translateY(-.5px) scale(1.008) } 31%{ transform:translateY(-1.5px) scale(.988) } 58%{ transform:translateY(.2px) scale(1.026) } 81%{ transform:translateY(-.9px) scale(1.004) } 100%{ transform:translateY(-.5px) scale(1.008) } }
@keyframes n-passa{ 0%,62%{ transform:translateX(-140%) skewX(-18deg) } 100%{ transform:translateX(260%) skewX(-18deg) } }
html[data-design="nuovo"]{ --n-insegue:linear-gradient(90deg,#7C4DFF 0%,#9D74FF 40%,#C9FF4A 100%); --n-viola2:#9D74FF }

/* ── LA BARRA IN BASSO: la pillola viola che scorre sotto la voce scelta (quella della barra del PC) ──
   È una GOCCIA (Miki 08/10: «quando va veloce esce fuori dal riquadro nero… il viola si scontra coi bordi e il bordo
   si allunga come un blob morbido… ingloba la scritta… e i bordi sotto reagiscono»): la muove una molla in
   mobile-nuovo.js («barraPillola»), non una transizione. Correndo si allunga, contro il bordo si schiaccia e non esce,
   e il fondo nero della barra (#nFondo) cede verso l'esterno dove viene urtato, e trema tornando. */
html[data-design="nuovo"] #barra .vetrina{ position:relative; isolation:isolate; border-radius:999px; padding:8px 10px; background:transparent !important; box-shadow:none !important }
/* il fondo nero è un pezzo vero (#nFondo, lo mette lo script): cede e trema con la goccia, la pillola #nEv
   cresce dal suo bordo sinistro (la molla la muove con transform: posizione, allungamento, assottigliamento) */
html[data-design="nuovo"] #nFondo{ position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:#0F0E17; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -16px rgba(0,0,0,.9); will-change:transform }
html[data-design="nuovo"] #nEv{ position:absolute; left:0; top:8px; bottom:8px; width:0; border-radius:22px; pointer-events:none; z-index:0; opacity:0;
  background:linear-gradient(180deg,rgba(157,116,255,.42),rgba(124,77,255,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(198,180,255,.32);
  transform-origin:left center; transition:opacity .25s; will-change:transform }
html[data-design="nuovo"] #barra a{ position:relative; z-index:1; padding:7px 2px 6px }
html[data-design="nuovo"] #barra a.on{ color:#fff }
html[data-design="nuovo"] #barra a.on .n-ic{ color:#fff }
/* LA LUCE VIOLA CHE INSEGUE IL LIME, attorno al + e a Genera/Avanti. ⚠ Sul telefono NON con `@property`
   (Safari sull'iPhone non anima la variabile dentro il gradiente: Miki 08/10, «non vanno»): `.n-luce` è un
   anello ritagliato con la maschera, e dentro un quadrato col gradiente conico che RUOTA con transform.
   Gli elementi li mette mobile-nuovo.js («luci», «stelleGenera»). */
@keyframes n-ruota{ to{ transform:rotate(360deg) } }
html[data-design="nuovo"] .n-luce{ position:absolute; inset:-4px; border-radius:inherit; padding:2px; pointer-events:none; z-index:-1; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude }
html[data-design="nuovo"] .n-luce i{ position:absolute; left:50%; top:50%; width:220%; aspect-ratio:1; margin:-110% 0 0 -110%;
  background:conic-gradient(transparent 0 50%, #5B34E0 63%, #7C4DFF 74%, #9D74FF 84%, #C9FF4A 95%, transparent 99%); animation:n-ruota 3.2s linear infinite }
html[data-design="nuovo"] #orb .n-luce{ inset:-5px; padding:2.5px; border-radius:50%; z-index:0 }
html[data-design="nuovo"] #orb .palla{ z-index:1 }

/* ── GENERA (e «Avanti» dei modelli): IL GENERA DELLA TAVOLA A (Miki 08/10: «come sull'artefatto A, uguale»):
   58 px, lime dall'alto in basso, Manrope 800 17, la luce che lo insegue, il riflesso al tocco ── */
html[data-design="nuovo"] .genera{ position:relative; isolation:isolate; overflow:visible !important; min-height:58px !important; height:58px; gap:12px;
  font:800 17px/1 'Manrope',system-ui,sans-serif !important; letter-spacing:-.01em !important;
  background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%), linear-gradient(180deg,#DCFF7E 0%,#C4FF3F 46%,#A4EE16 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(30,60,0,.22), 0 16px 30px -14px rgba(0,0,0,.95) !important;
  transition:transform .45s var(--n-molla) }
html[data-design="nuovo"] .genera:active{ animation:n-luccica 1.1s var(--n-ease) 1; transform:scale(.97) }
html[data-design="nuovo"] #piedeForm .dentro, html[data-design="nuovo"] #piedeModelli .dentro{ padding-top:4px }

/* ── LA CARTA DEL MODELLO: una locandina viola, la scelta (come l'ispettore del PC); col video di Seedance 2.5 resta il video ── */
html[data-design="nuovo"] #v-form .grp > div:first-child{ background:linear-gradient(135deg,#33267A 0%,#21194D 46%,#130F2A 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(198,180,255,.28), inset 0 1px 0 rgba(255,255,255,.14) !important }
html[data-design="nuovo"] #v-form .grp > div:first-child::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px) }
html[data-design="nuovo"] #contBanner:not([style*="aspect-ratio"]){ height:120px !important; align-items:flex-start !important; justify-content:flex-end !important; padding:0 18px 16px }
html[data-design="nuovo"] #contBanner[style*="aspect-ratio"]{ align-items:flex-start !important; justify-content:flex-end !important; padding:0 18px 14px }
html[data-design="nuovo"] #marchioBanner{ display:none !important }
/* 18/10 I MARCHI DI WAN, KLING E MINIMAX (Miki: «metti il loro logo»): sulla locandina, in alto a
   sinistra, nella piastrella scura che hanno anche sul PC. Il nodo di casa resta nascosto. */
html[data-design="nuovo"] #marchioBanner[data-marchio]{ display:flex !important; position:absolute; top:14px; left:16px; z-index:2;
  width:40px; height:40px; border-radius:12px; align-items:center; justify-content:center;
  background:rgba(8,7,14,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
html[data-design="nuovo"] #marchioBanner[data-marchio] img,
html[data-design="nuovo"] #marchioBanner[data-marchio] svg{ width:24px !important; height:24px !important }
/* ...E ANIMATI (Miki, 18/10: «falli animati»), ognuno col suo gesto: le barre di Seedance come un
   equalizzatore, l'esagono di Wan e l'anello di Kling che girano piano, l'onda di MiniMax che pulsa */
@keyframes n-marchio-gira{ to{ transform:rotate(360deg) } }
@keyframes n-marchio-onda{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.68) } }
@keyframes n-marchio-barra{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.62) } }
html[data-design="nuovo"] img[src^="/sfondi/marchio-wan"]{ animation:n-marchio-gira 16s linear infinite }
html[data-design="nuovo"] img[src^="/sfondi/marchio-kling"]{ animation:n-marchio-gira 9s linear infinite }
html[data-design="nuovo"] img[src^="/sfondi/marchio-minimax"]{ animation:n-marchio-onda 1.6s ease-in-out infinite }
html[data-design="nuovo"] svg[viewBox="30 29.5 540 540"] polygon{ transform-box:fill-box; transform-origin:50% 50%;
  animation:n-marchio-barra 1.4s ease-in-out infinite }
html[data-design="nuovo"] svg[viewBox="30 29.5 540 540"] polygon:nth-child(2){ animation-delay:-.35s }
html[data-design="nuovo"] svg[viewBox="30 29.5 540 540"] polygon:nth-child(3){ animation-delay:-.7s }
html[data-design="nuovo"] svg[viewBox="30 29.5 540 540"] polygon:nth-child(4){ animation-delay:-1.05s }
@media (prefers-reduced-motion:reduce){
  html[data-design="nuovo"] img[src^="/sfondi/marchio-"], html[data-design="nuovo"] svg[viewBox="30 29.5 540 540"] polygon{ animation:none !important }
}
html[data-design="nuovo"] #modNome{ font-size:24px !important; letter-spacing:-.025em !important; text-shadow:none !important }
html[data-design="nuovo"] #v-form .veloBanner{ background:linear-gradient(180deg,rgba(4,4,8,.06) 30%,rgba(4,4,8,.66)) !important }

/* ── LE FOTO DI PARTENZA (Foto): in pila, come la capsula del PC; un tocco sulla pila apre tutte le foto in grande ── */
html[data-design="nuovo"] #rigaRef > div{ flex-wrap:nowrap !important; gap:12px !important }
html[data-design="nuovo"] #rigaRef > div > span:first-child{ order:2; width:44px !important; height:44px !important; border-radius:50% !important; font-size:20px !important;
  border:1.5px dashed rgba(198,180,255,.45) !important; background:rgba(124,77,255,.10) !important; color:#C6B4FF !important }
html[data-design="nuovo"] #refMini{ order:1; gap:0 !important; padding-left:14px; align-items:center }
html[data-design="nuovo"] #refMini:empty{ display:none !important }
html[data-design="nuovo"] #refMini > span{ margin-left:-14px; transition:translate .45s var(--n-molla) }
html[data-design="nuovo"] #refMini > span:nth-child(n+4){ display:none !important }
html[data-design="nuovo"] #refMini > span > img{ width:44px !important; height:44px !important; border-radius:50% !important; border:0 !important; box-shadow:0 0 0 2.5px var(--n-carta) }
html[data-design="nuovo"] #refMini > span > [data-rifvia]{ display:none !important }   /* si tolgono dal pannello grande */
html[data-design="nuovo"] #refMini[data-n-piu]::after{ content:"+" attr(data-n-piu); width:44px; height:44px; margin-left:-14px; border-radius:50%; display:grid; place-items:center;
  background:#2B2840; color:#EDEBF5; font:800 13px/1 'Manrope',system-ui,sans-serif; box-shadow:0 0 0 2.5px var(--n-carta) }
html[data-design="nuovo"] #rigaRef:active #refMini > span{ translate:0 -3px }
html[data-design="nuovo"] #refNota{ order:3; flex:1 1 auto !important; min-width:0 !important; font-size:13px !important; color:var(--fioco) !important }
html[data-design="nuovo"] #refMini:not(:empty) ~ #refNota{ color:#EDEBF5 !important; font-weight:600 }

/* ── IL PANNELLO DELLE FOTO (mrif): le foto in grande, come il pannello della capsula del PC ── */
html[data-design="nuovo"] .grigliaRifs{ gap:12px }
html[data-design="nuovo"] .grigliaRifs .rf{ border-radius:20px !important }
html[data-design="nuovo"] .grigliaRifs .rf .n{ width:auto !important; min-width:28px; padding:0 8px; height:26px !important; border-radius:999px !important; border:0 !important;
  background:rgba(12,11,18,.72) !important; font-size:12px }
html[data-design="nuovo"] .grigliaRifs .rf.prima .n{ background:var(--n-lime) !important; color:var(--n-sulime) !important }
html[data-design="nuovo"] .grigliaRifs .rf .cmd span{ border-radius:999px !important; background:rgba(12,11,18,.78) !important }
html[data-design="nuovo"] .grigliaRifs .aggiungiRif{ border-radius:20px !important; border:1.5px dashed rgba(198,180,255,.35) !important; background:rgba(124,77,255,.07) !important; color:#C6B4FF !important }

/* ── LE TARGHETTE (NEW, −10%…): vive come sul PC — l'anello lime che pulsa, il galleggiare, il riflesso che passa ── */
html[data-design="nuovo"] .tagNew{ position:relative; overflow:hidden; border-radius:999px !important; color:var(--n-sulime) !important;
  animation:n-nuovo 2.1s ease-in-out infinite, n-galleggia 6.1s ease-in-out infinite !important }
html[data-design="nuovo"] .tagNew::after{ content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:34%; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75) 50%,rgba(255,255,255,0)); animation:n-passa 3.4s cubic-bezier(.36,0,.28,1) infinite }
html[data-design="nuovo"] .tagScuro{ border-radius:999px !important }

/* ── L'ANELLO DEI GETTONI nel Profilo: il viola che insegue il lime, pieno a 20.000 (come la barra del PC) ── */
html[data-design="nuovo"] #ioIniziale{ position:relative !important; box-shadow:none !important; overflow:visible !important }
html[data-design="nuovo"] #ioIniziale::before{ content:""; position:absolute; inset:-6px; border-radius:50%; padding:3px; pointer-events:none;
  background:conic-gradient(#7C4DFF 0deg, #9D74FF calc(var(--p, 0deg) * .51), #C9FF4A var(--p, 0deg), rgba(255,255,255,.1) var(--p, 0deg) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude }

/* ── IL LOTTO: la barra del lavoro è il viola che insegue il lime; via il bagliore ── */
html[data-design="nuovo"] #lottoCorrente span[style*="#7C4DFF,#B79BFF"]{ background:var(--n-insegue) !important; box-shadow:none !important }

/* ── ESPLORA: lo sconto in lime dentro il titolo dell'eroe, come sul PC («10% in meno» lime, il modello bianco) ── */
html[data-design="nuovo"] .n-lime{ color:var(--n-lime) }
html[data-design="nuovo"] #eroe .testi .bric{ font-size:30px !important; line-height:1.02 !important }
/* lo sconto di oggi accanto al nome del modello (18/10, mobile-nuovo.js «scontiModelli»): lime su vetro, mai pieno */
html[data-design="nuovo"] #famiglie .n-sconto{ padding:2px 6px 3px; border-radius:5px; font-size:8.5px; font-weight:700; letter-spacing:.06em;
  color:var(--n-lime); background:rgba(201,255,74,.10); box-shadow:inset 0 0 0 1px rgba(201,255,74,.30) }
@media (prefers-reduced-motion: reduce){
  html[data-design="nuovo"] *::before, html[data-design="nuovo"] *::after{ animation:none !important; transition:none !important }
}

/* ── LE STELLE E I CREDITI IN GENERA, come il Genera della tavola A (Miki 08/10: «le stelle a sinistra e i crediti che spendi a
   destra» · «come sull'artefatto A, uguale»): le due stelle 20 px, il prezzo in una pillola mono 14 alta 42. Stelle (.n-stelle) e
   crediti (data-n-costo) li mette mobile-nuovo.js, «stelleGenera». Senza prezzo il bottone resta centrato. ── */
html[data-design="nuovo"] #btGenera .n-stelle{ display:inline-flex; color:var(--n-sulime); transition:transform .6s var(--n-molla) }
html[data-design="nuovo"] #btGenera:active .n-stelle{ transform:rotate(90deg) scale(1.15) }
html[data-design="nuovo"] #btGenera[data-n-costo]{ justify-content:flex-start !important; padding:0 8px 0 22px !important }
html[data-design="nuovo"] #btGenera[data-n-costo]::after{ content:attr(data-n-costo); margin-left:auto; display:inline-flex; align-items:center; height:42px; padding:0 14px;
  border-radius:999px; background:rgba(10,24,0,.12); color:var(--n-sulime); font:700 14px/1 'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:0 }

/* con «Riduci movimento» la luce di Genera e del + non si spegne (Miki la vuole viva): gira solo più piano */
@media (prefers-reduced-motion: reduce){
  html[data-design="nuovo"] .n-luce i{ animation:n-ruota 9s linear infinite !important }
}

/* ═══ CHI NON È ENTRATO (15/10) — la pagina lo segna con body.ospite ═══════════════════════════════════════
   Al posto dell'iniziale (la «M» di prova) la sagoma; nel Profilo, al posto di «— gettoni», «Entra per generare»;
   in Esplora l'invito lime a iscriversi (mobile-nuovo.js); niente «Torna al vecchio» a chi il vecchio non l'ha visto. */
html[data-design="nuovo"] body.ospite .n-design{ display:none }
html[data-design="nuovo"] body.ospite #btIo, html[data-design="nuovo"] body.ospite #ioIniziale{ font-size:0 !important; color:#EDEBF5 }
html[data-design="nuovo"] body.ospite #btIo::after, html[data-design="nuovo"] body.ospite #ioIniziale::after{ content:""; width:20px; height:20px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4.1-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4.1-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat }
html[data-design="nuovo"] body.ospite #ioIniziale::after{ width:24px; height:24px }
html[data-design="nuovo"] body.ospite #ioIniziale::before{ display:none }
html[data-design="nuovo"] body.ospite #ioGettoni{ font-size:0 !important }
html[data-design="nuovo"] body.ospite #ioGettoni::after{ content:"Entra per generare"; font:600 14px 'Manrope',sans-serif; color:var(--fioco) }
html[data-design="nuovo"] .n-gettoni.n-iscriviti{ padding:0 12px 0 16px; color:var(--n-sulime); background:var(--n-primario); box-shadow:inset 0 1px 0 rgba(255,255,255,.6) }
html[data-design="nuovo"] .n-gettoni.n-iscriviti i{ display:none }

/* ═══ LA CARTA DI FOTO E VIDEO: UNA COLONNA SOLA CHE SCORRE (19/10 notte) ═════
   Miki dall'iPhone: «si blocca se scorri giù e non riesco a risalire». Il pannello delle informazioni scorreva per
   conto suo dentro la carta e al primo scorrimento si allungava sopra la foto (82vh); per riaccorciarlo bisognava
   tirare giù partendo ESATTAMENTE dalla cima, e su iOS il gesto finiva alla pagina dei Media sotto, che scorreva.
   Ora foto e informazioni sono UNA colonna che scorre come un post: giù le informazioni, su torna la foto; la
   pagina sotto resta ferma (overscroll contain). La foto riempie la larghezza (l'anteprima da 720 si allarga finché
   arriva la piena) e non supera il 72% dell'altezza. In fondo lo spazio per la barra di Safari che galleggia.
   Dall'iPad in orizzontale («si aprono le foto in miniatura»): foto a sinistra a tutto spazio, informazioni a
   DESTRA in una colonna da 340 px che scorre da sola, come sul PC. */
html[data-design="nuovo"] #visoreCorpo > div[style*="flex-direction:column"]{ overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
html[data-design="nuovo"] #visoreCorpo > div[style*="flex-direction:column"] > div:first-child{ flex:0 0 auto !important; padding:62px 14px 10px !important }
html[data-design="nuovo"] #visFoto,
html[data-design="nuovo"] #visoreCorpo > div[style*="flex-direction:column"] > div:first-child > video{ display:block; width:100%; height:auto; max-height:72vh; max-height:72svh; object-fit:contain }
html[data-design="nuovo"] #visPannello{ flex:0 0 auto; max-height:none !important; overflow:visible !important; padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important }
html[data-design="nuovo"] #visoreCorpo > img,
html[data-design="nuovo"] #visSorg img{ width:100%; height:100%; object-fit:contain; border-radius:0 !important }
@media (min-width:900px) and (orientation:landscape){
  html[data-design="nuovo"] #visoreCorpo > div[style*="flex-direction:column"]{ flex-direction:row !important; overflow:hidden !important }
  html[data-design="nuovo"] #visoreCorpo > div[style*="flex-direction:column"] > div:first-child{ flex:1 1 auto !important; min-width:0; padding:12px !important }
  html[data-design="nuovo"] #visFoto,
  html[data-design="nuovo"] #visoreCorpo > div[style*="flex-direction:column"] > div:first-child > video{ height:100%; max-height:none }
  html[data-design="nuovo"] #visPannello{ flex:0 0 340px; width:340px; overflow:auto !important; overscroll-behavior:contain;
    border-top:0 !important; border-left:1px solid rgba(150,110,255,.25); border-radius:0 !important; padding:64px 18px 28px !important }
}

/* ═══ «COSA STO PAGANDO» (19/10 notte) ═════════════════════════════════════════
   Miki: «sotto il Genera… ti apre la tendina con tutto, come se fosse il carrello di quello che stai pagando in token; a
   fianco un punto di domanda» e poi «voglio letteralmente che si modifichi la barra, che da sotto esca questa cosa, non
   una tendina sovrapposta… animazione e feeling». Il conto è DENTRO la barra in fondo, sotto la riga: si apre in altezza
   (grid 0fr → 1fr, niente salti) e la barra cresce; le voci a scontrino entrano una dopo l'altra, il totale conta fino al
   suo numero (script), il «come si calcola» si apre allo stesso modo. Ombre neutre, niente aloni (02/10). Lo script è
   `mobile-nuovo.js` (`conto`). */
html[data-design="nuovo"] #nConto{ display:none; align-items:center; justify-content:center; gap:8px; margin-top:4px }
html[data-design="nuovo"] #nConto.on{ display:flex }
html[data-design="nuovo"] #nConto .n-conto-apri{ display:inline-flex; align-items:center; gap:5px; padding:6px 4px; font:600 12px/1 'Manrope',sans-serif;
  color:#8B889E; cursor:pointer; transition:color .25s ease }
html[data-design="nuovo"] #nConto.aperto .n-conto-apri{ color:#E8E5F4 }
html[data-design="nuovo"] #nConto .n-conto-apri svg{ transition:transform .45s cubic-bezier(.34,1.56,.64,1) }
html[data-design="nuovo"] #nConto.aperto .n-conto-apri svg{ transform:rotate(180deg) }
html[data-design="nuovo"] #nConto .n-conto-q,
html[data-design="nuovo"] #nContoCorpo .n-c-q{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; flex:0 0 auto;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); font:700 10px/1 'Manrope',sans-serif; color:#B8B5C9; cursor:pointer }
/* il contenitore: chiuso è alto zero; aperto prende l'altezza del conto e la barra cresce con lui */
html[data-design="nuovo"] #nContoCorpo{ display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1), opacity .3s ease }
html[data-design="nuovo"] #nContoCorpo.aperto{ grid-template-rows:1fr; opacity:1 }
html[data-design="nuovo"] #nContoCorpo .n-c-dentro{ min-height:0; overflow:hidden; text-align:left }   /* da chiuso alto zero: la linea sta sulla prima riga */
html[data-design="nuovo"] #nContoCorpo.aperto .n-c-dentro{ max-height:52vh; max-height:52svh; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none }
html[data-design="nuovo"] #nContoCorpo .n-c-mod{ margin:6px 0 2px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7E7B92 }
html[data-design="nuovo"] #nContoCorpo .n-c-riga{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px dashed rgba(255,255,255,.09) }
html[data-design="nuovo"] #nContoCorpo .n-c-nome{ display:flex; flex-direction:column; gap:4px; min-width:0; font:600 14px/1.3 'Manrope',sans-serif; color:#EDEBF5 }
html[data-design="nuovo"] #nContoCorpo .n-c-nome > span:first-child{ display:flex; align-items:center; gap:7px }
html[data-design="nuovo"] #nContoCorpo .n-c-sotto{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; font:500 12px/1.35 'Manrope',sans-serif; color:#8B889E }
html[data-design="nuovo"] #nContoCorpo .n-c-sotto s{ color:#6E6B82 }
html[data-design="nuovo"] #nContoCorpo .n-c-val{ flex:0 0 auto; font:700 15px/1.3 'Manrope',sans-serif; font-variant-numeric:tabular-nums; color:#EDEBF5; white-space:nowrap }
html[data-design="nuovo"] #nContoCorpo .n-c-sconto .n-c-val{ color:#C9FF4A }
html[data-design="nuovo"] #nContoCorpo .n-c-tot{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:14px 0 4px }
html[data-design="nuovo"] #nContoCorpo .n-c-tot > span:first-child{ font:700 14px/1 'Manrope',sans-serif; color:#B8B5C9 }
html[data-design="nuovo"] #nContoCorpo .n-c-num b{ font:800 27px/1 'Manrope',sans-serif; letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:#FFFFFF }
html[data-design="nuovo"] #nContoCorpo .n-c-num small{ margin-left:6px; font:600 12px/1 'Manrope',sans-serif; color:#8B889E }
html[data-design="nuovo"] #nContoCorpo .n-c-saldo{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; font:500 12.5px/1.45 'Manrope',sans-serif; color:#8B889E }
html[data-design="nuovo"] #nContoCorpo .n-c-saldo b{ color:#D9D6E8; font-weight:700 }
html[data-design="nuovo"] #nContoCorpo .n-c-saldo.no{ color:#E58CB8 }
/* «come si calcola»: si apre in altezza come il conto */
html[data-design="nuovo"] #nContoCorpo .n-c-perche{ display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1), opacity .3s ease }
html[data-design="nuovo"] #nContoCorpo .n-c-perche.on{ grid-template-rows:1fr; opacity:1 }
/* lo spazio sopra la scatola sta dentro la parte che si apre (overflow:hidden = il margine non esce) */
html[data-design="nuovo"] #nContoCorpo .n-c-perche-dentro{ min-height:0; overflow:hidden }
html[data-design="nuovo"] #nContoCorpo .n-c-perche-box{ margin-top:12px; border-radius:14px; background:rgba(124,77,255,.08);
  box-shadow:inset 0 0 0 1px rgba(157,116,255,.22) }
html[data-design="nuovo"] #nContoCorpo .n-c-perche-box b{ display:block; margin:12px 13px 6px; font:700 13px/1.3 'Manrope',sans-serif; color:#E4DAFF }
html[data-design="nuovo"] #nContoCorpo .n-c-perche-box span{ display:block; margin:0 13px 12px; font:500 12.5px/1.55 'Manrope',sans-serif; color:#B8B5C9 }
html[data-design="nuovo"] #nContoCorpo .n-c-nota{ margin:12px 0 6px; font:500 11.5px/1.5 'Manrope',sans-serif; color:#6E6B82 }
/* all'apertura le voci entrano una dopo l'altra (solo all'apertura: un prezzo che cambia non rifà la scena) */
@keyframes nContoVoce{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
html[data-design="nuovo"] #nContoCorpo .n-c-dentro.entra > *{ animation:nContoVoce .5s cubic-bezier(.22,1,.36,1) both }
html[data-design="nuovo"] #nContoCorpo .n-c-dentro.entra > *:nth-child(2){ animation-delay:.05s }
html[data-design="nuovo"] #nContoCorpo .n-c-dentro.entra > *:nth-child(3){ animation-delay:.1s }
html[data-design="nuovo"] #nContoCorpo .n-c-dentro.entra > *:nth-child(4){ animation-delay:.15s }
html[data-design="nuovo"] #nContoCorpo .n-c-dentro.entra > *:nth-child(5){ animation-delay:.2s }
html[data-design="nuovo"] #nContoCorpo .n-c-dentro.entra > *:nth-child(n+6){ animation-delay:.25s }
@media (prefers-reduced-motion: reduce){
  html[data-design="nuovo"] #nContoCorpo, html[data-design="nuovo"] #nContoCorpo .n-c-perche,
  html[data-design="nuovo"] #nConto .n-conto-apri svg{ transition:none }
  html[data-design="nuovo"] #nContoCorpo .n-c-dentro.entra > *{ animation:none }
}

/* ═══ L'AVVISO DELLA MODIFICA, versione C (20/10 notte) ══════════════════════════
   Miki dalla tela: le parole a rischio sottolineate in rosso DENTRO il prompt, sotto il prompt «Ignora oppure Passa a
   Modifica», e Genera che chiede «Sei sicuro?» col prompt sottolineato. Valori della v3 di aivena.link: fondi piani,
   Manrope, pillole, il rosso #FF485E solo per la linea e per «Ignora» (mai pieno), il lime solo su «Passa a Modifica»
   nella finestra. Movimento: transform/opacity e background-size; molla per i tocchi; reduced-motion spegne. */
html[data-design="nuovo"] .n-sotto{ position:absolute; z-index:1; pointer-events:none; overflow:hidden }
html[data-design="nuovo"] .n-sotto-t{ box-sizing:border-box; width:100%; white-space:pre-wrap; overflow-wrap:break-word; color:transparent }
html[data-design="nuovo"] .n-sotto-t .sl, html[data-design="nuovo"] #usoFoglioDentro .n-s-prompt .sl{ background:linear-gradient(#FF485E,#FF485E) left 100%/100% 2px no-repeat; padding-bottom:1px }
html[data-design="nuovo"] .n-sotto-t .sl.nuova, html[data-design="nuovo"] #usoFoglioDentro .n-s-prompt .sl.nuova{ animation:nLinea .42s cubic-bezier(.2,.8,.2,1) both }
@keyframes nLinea{ from{ background-size:0% 2px } to{ background-size:100% 2px } }
html[data-design="nuovo"] #usoVideoAvviso{ gap:10px; margin:12px 4px 0; padding:0 }
html[data-design="nuovo"] #usoVideoAvviso.entra{ animation:nAvvEntra .4s cubic-bezier(.2,.8,.2,1) both }
@keyframes nAvvEntra{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-pallino{ flex:0 0 8px; height:8px; margin-top:6px; border-radius:50%; background:#FF485E; animation:nPallino 1.6s ease-in-out 2 }
@keyframes nPallino{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.7); opacity:.55 } }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-corpo{ display:flex; flex-direction:column; gap:3px; min-width:0 }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-tit{ font:700 14.5px/1.4 'Manrope',sans-serif; color:#EDEBF5 }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-testo{ font:500 13px/1.5 'Manrope',sans-serif; color:#9A97AD }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-az{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:9px }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-o{ font:500 13px 'Manrope',sans-serif; color:#7E7B92 }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-b{ display:inline-flex; align-items:center; min-height:38px; padding:0 15px; border-radius:999px;
  font:700 14px 'Manrope',sans-serif; color:#EDEBF5; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:transform .3s cubic-bezier(.34,1.56,.64,1) }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-b:active{ transform:scale(.96) }
html[data-design="nuovo"] #usoVideoAvviso .n-avv-b.rosso{ color:#FF485E; box-shadow:inset 0 0 0 1px rgba(255,72,94,.3) }
/* la finestra «Sei sicuro?» (nel foglio che sale) */
html[data-design="nuovo"] #usoFoglioDentro .n-sicuro{ display:flex; flex-direction:column; gap:12px }
html[data-design="nuovo"] #usoFoglioDentro .n-sicuro > *{ animation:nAvvEntra .45s cubic-bezier(.2,.8,.2,1) both }
html[data-design="nuovo"] #usoFoglioDentro .n-sicuro > :nth-child(2){ animation-delay:.06s } html[data-design="nuovo"] #usoFoglioDentro .n-sicuro > :nth-child(3){ animation-delay:.12s }
html[data-design="nuovo"] #usoFoglioDentro .n-sicuro > :nth-child(4){ animation-delay:.18s } html[data-design="nuovo"] #usoFoglioDentro .n-sicuro > :nth-child(5){ animation-delay:.24s }
html[data-design="nuovo"] #usoFoglioDentro .n-s-tit{ font:800 28px/1.1 'Manrope',sans-serif; letter-spacing:-.03em; color:#FF485E; animation:nSicuro .7s cubic-bezier(.2,.8,.2,1) both !important }
@keyframes nSicuro{ 0%{ opacity:0; transform:translateY(8px) } 45%{ opacity:1; transform:none } 58%{ transform:translateX(-6px) }
  70%{ transform:translateX(5px) } 82%{ transform:translateX(-3px) } 100%{ transform:none } }
html[data-design="nuovo"] #usoFoglioDentro p.n-s-txt{ margin:0; font:500 14px/1.5 'Manrope',sans-serif; color:#9A97AD }
html[data-design="nuovo"] #usoFoglioDentro .n-s-prompt{ max-height:30vh; overflow:auto; padding:12px 14px; border-radius:14px; background:#100F19;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); font:600 14.5px/1.6 'Manrope',sans-serif; color:#EDEBF5; white-space:pre-wrap; overflow-wrap:break-word }
html[data-design="nuovo"] #usoFoglioDentro .n-s-prompt .sl.nuova{ animation-delay:.42s }
html[data-design="nuovo"] #usoFoglioDentro .n-s-riga{ display:flex; align-items:center; justify-content:space-between; padding:13px 0;
  border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); font:600 15px 'Manrope',sans-serif; color:#EDEBF5 }
html[data-design="nuovo"] #usoFoglioDentro .n-s-inter{ position:relative; flex:0 0 48px; height:28px; border-radius:14px; background:rgba(255,255,255,.12); transition:background .3s ease }
html[data-design="nuovo"] #usoFoglioDentro .n-s-inter::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35); transition:transform .4s cubic-bezier(.34,1.56,.64,1) }
html[data-design="nuovo"] #usoFoglioDentro .n-s-riga.on .n-s-inter{ background:#B4FF29 } html[data-design="nuovo"] #usoFoglioDentro .n-s-riga.on .n-s-inter::after{ transform:translateX(20px) }
html[data-design="nuovo"] #usoFoglioDentro .n-s-az{ display:flex; gap:10px; margin-top:4px }
html[data-design="nuovo"] #usoFoglioDentro .n-s-b{ flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:50px; padding:0 12px; border-radius:999px;
  font:700 15px 'Manrope',sans-serif; color:#EDEBF5; white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1) }
html[data-design="nuovo"] #usoFoglioDentro .n-s-b:active{ transform:scale(.96) }
html[data-design="nuovo"] #usoFoglioDentro .n-s-b.pri{ color:#0A1800; box-shadow:inset 0 1px 0 rgba(255,255,255,.45); background:linear-gradient(150deg,#C9FF4A,#B4FF29 48%,#8FE000) }
@media (prefers-reduced-motion: reduce){ html[data-design="nuovo"] #usoVideoAvviso.entra, html[data-design="nuovo"] #usoVideoAvviso .n-avv-pallino, html[data-design="nuovo"] .n-sotto-t .sl.nuova,
  html[data-design="nuovo"] #usoFoglioDentro .n-sicuro > *, html[data-design="nuovo"] #usoFoglioDentro .n-s-prompt .sl.nuova{ animation:none !important } }

/* ═══ LA PORTA (Entra · Crea un account · password dimenticata) COL DESIGN NUOVO — 15/10/2026 ═══════════
   Miki: «se uno non ha fatto l'accesso vede la pagina vecchia… un fail clamoroso». La finestra è quella di
   `app/porte/ingresso.py` (la stessa su PC e telefono, la apre anche il Genera dell'ospite): qui si veste e basta.
   ⚠ BLOCCO GEMELLO: identico in web/pc-nuovo.css e web/mobile-nuovo.css (il collaudo li vuole uguali).
   Niente aloni: esce il verde sotto il bottone e il viola dentro lo scudo. Il bottone è il lime a pillola del
   Genera; Google resta bianco col suo logo intatto (sono le loro regole). */
html[data-design="nuovo"] #aivPorta{ background:rgba(8,7,14,.8) }
html[data-design="nuovo"] #aivPorta .aivBox{ background:#0C0B14; border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:28px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9); animation:n-porta .5s cubic-bezier(.34,1.56,.64,1) both }
@keyframes n-porta{ from{ opacity:0; transform:translateY(16px) scale(.98) } to{ opacity:1; transform:none } }
html[data-design="nuovo"] #aivPorta .aivTit{ font-family:'Manrope',system-ui,sans-serif; font-weight:800; font-size:24px; letter-spacing:-.03em }
html[data-design="nuovo"] #aivPorta .aivX{ width:36px; height:36px; border:0; border-radius:999px; background:rgba(255,255,255,.06); color:#9A97AD }
html[data-design="nuovo"] #aivPorta .aivX:hover{ background:rgba(255,255,255,.11); color:#EDEBF5 }
html[data-design="nuovo"] #aivPorta .aivRiga:first-of-type{ margin-top:20px }
html[data-design="nuovo"] #aivPorta input[type=email], html[data-design="nuovo"] #aivPorta input[type=password], html[data-design="nuovo"] #aivPorta .aivRiga input{
  height:52px; padding:0 16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#100F19; font-size:15px; transition:border-color .2s, background .2s }
html[data-design="nuovo"] #aivPorta .aivPassRiga input{ padding-right:50px }
html[data-design="nuovo"] #aivPorta input:focus{ border-color:rgba(124,77,255,.75); background:#13121D }
html[data-design="nuovo"] #aivPorta .aivOcchio{ right:8px }
html[data-design="nuovo"] #aivPorta .aivVai{ margin-top:18px; height:56px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:999px;
  font-size:16px; font-weight:800; letter-spacing:-.01em; color:#0A1800;
  background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%), linear-gradient(150deg,#C9FF4A,#B4FF29 48%,#8FE000);
  background-size:260% 100%,100% 100%; background-position:180% 0,0 0; background-repeat:no-repeat; background-color:#B4FF29;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(30,60,0,.22), 0 16px 30px -14px rgba(0,0,0,.95);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1) }
html[data-design="nuovo"] #aivPorta .aivVai:hover{ filter:none; animation:n-luccica 1.1s cubic-bezier(.2,.8,.2,1) 1 }
html[data-design="nuovo"] #aivPorta .aivVai:active{ transform:scale(.97) }
html[data-design="nuovo"] #aivPorta .aivOppure{ margin:18px 0 14px }
html[data-design="nuovo"] #aivPorta .aivOppure i{ background:rgba(255,255,255,.07) }
html[data-design="nuovo"] #aivPorta .aivOppure span{ font-family:'Manrope',system-ui,sans-serif; font-size:12px; font-weight:600; letter-spacing:0; text-transform:lowercase; color:#7E7B92 }
html[data-design="nuovo"] #aivPorta .aivGoogle{ height:52px; padding:0 16px; border:0; border-radius:999px }
html[data-design="nuovo"] #aivPorta .aivGoogle span{ font-size:14px; letter-spacing:0 }
html[data-design="nuovo"] #aivPorta .aivGira{ margin-top:18px; font-size:14px; color:#9A97AD }
html[data-design="nuovo"] #aivPorta .aivGira span{ color:#C6B4FF; font-weight:700 }
html[data-design="nuovo"] #aivPorta .aivScordata{ margin-top:10px; font-size:13px }
html[data-design="nuovo"] #aivPorta .aivScordata span{ color:#7E7B92 }
html[data-design="nuovo"] #aivPorta .aivTos{ font-size:13px; color:#9A97AD }
html[data-design="nuovo"] #aivPorta .aivErr{ border-radius:14px }
html[data-design="nuovo"] #aivPorta .aivScudo{ background:#100F19; box-shadow:none; border-radius:18px }
html[data-design="nuovo"] #aivPorta .aivScudo.su{ border-color:rgba(255,255,255,.08) }
html[data-design="nuovo"] #aivPorta .aivScudoBollo{ background:#17151F; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
html[data-design="nuovo"] #aivPorta .aivScudo.ok .aivScudoBollo{ box-shadow:inset 0 0 0 1px rgba(201,255,74,.45) }
/* il riquadro di Cloudflare non scende sotto i 300 px: sui telefoni stretti (375-393) usciva TAGLIATO a destra
   (già prima del 15/10). Mentre chiede, la finestra si allarga sui bordi e il riquadro sborda un po' nello scudo. */
@media (max-width:440px){
  html[data-design="nuovo"] #aivPorta.chiede{ padding:10px }
  html[data-design="nuovo"] #aivPorta.chiede .aivBox{ padding:24px 16px }
  html[data-design="nuovo"] #aivPorta.chiede .aivScudoVero{ margin-left:-7px; margin-right:-7px }
}