/* Carsult — tema "Notte EV": blu notte profondo + teal elettrico (moderno, EV-forward) */
:root {
  --bg:        #0c1a2b;
  --bg-2:      #11243a;
  --card:      #122438;
  --card-2:    #16304a;
  --line:      #25415f;
  --text:      #eaf1f8;
  --text-dim:  #9db2c8;
  --text-mut:  #88a0b8;  /* schiarito per contrasto AA (≥4.5:1) sul testo secondario delle card */
  --accent:    #2fd4c4;  /* teal elettrico */
  --accent-2:  #1fa89c;
  --accent-rgb: 47,212,196;
  --good:      #46c68a;
  --warn:      #e0b04a;
  --bad:       #e2725b;
  --radius:    16px;
  --shadow:    0 8px 30px rgba(0,0,0,.5);

  /* ── Canali "ribaltabili" dal tema chiaro (passo 2) ─────────────────── */
  --sheen-rgb: 255,255,255;
  --shade-rgb: 0,0,0;

  /* ── Testo/ink sopra fondi chiari o in accento ──────────────────────── */
  --on-accent:     #06202b;  /* inchiostro scuro sui fondi in accento (gradiente teal) */
  --on-accent-mut: #3a2c12;  /* variante attenuata, riga secondaria dentro .cta */
  --on-good:       #10210a;  /* inchiostro scuro sul badge veterano (gradiente verde) */

  /* ── Stati: varianti verdi/rosse distinte dai token good/warn/bad ───── */
  --growth-rgb:       143,191,111; /* tinta verde larga: confronto, trend su, fascia prezzo migliore, budget buono */
  --verdict-good-rgb: 120,190,100; /* tinta verde per verdetto annuncio / valore / equipaggiamento standard */
  --good-deep:         #6f9e52;    /* tappa scura del gradiente badge veterano */
  --bad-tint-rgb:     217,138,106; /* tinta ruggine: verdetto negativo, badge assente, fascia prezzo alta */
  --trend-down-rgb:   214,109,92;  /* tinta per badge trend in calo / bordo budget in allarme */
  --trend-down:        #ec8874;    /* testo del badge trend in calo (più chiaro di --bad per contrasto) */
  --danger:            #e0534f;    /* bordo/sfondo hover del chip di rimozione filtro */
  --danger-tint-rgb:  255,90,90;   /* sfondo hover del chip filtro attivo */

  /* ── Tag minori (epoche/categorie) ───────────────────────────────────── */
  --value:      #5fcf86;   /* testo tag "nuovo/economico" */
  --value-rgb:  80,200,120; /* sfondo tag "nuovo/economico" */
  --rare:       #e0a63c;   /* testo tag "raro/specialistico" */
  --rare-rgb:   230,170,60; /* sfondo tag "raro/specialistico" */
  --mode-alt:   #7fb4d9;   /* accento modalità "alt" (sovrascritto più sotto nel file, vedi referto) */
  --photo-attrib: #e8e0d4; /* testo del credito foto */
  --budget-low: #6b4b2a;   /* estremo economico del gradiente slider budget */
  --bg-glow:    #201a13;   /* bagliore radiale dietro lo sfondo pagina */
  --scrollbar-hover: #4a3c2c; /* thumb scrollbar in hover */

  /* ── Fallback dei var() esistenti (letterali di sicurezza, mai attivati
     perché il token referenziato è sempre definito) ──────────────────── */
  --card-fallback: #10233a;
  --bad-fallback:  #e0564a;
  --warn-fallback: #e8b84b;

  /* ── Veli/vetri scuri: ogni contesto ha una tinta leggermente diversa
     (deriva storica, non un'unica famiglia) — un token per contesto ──── */
  --scrim-rgb:          12,9,6;   /* velo caldo su foto hero/copertine/card in evidenza */
  --backdrop-rgb:       6,10,16;  /* sfondo lightbox e popover informativo a schermo intero */
  --chip-glass-rgb:     6,18,30;  /* sfondo vetro del bottone "rimuovi dal garage" */
  --lb-glass-rgb:       8,14,22;  /* sfondo vetro del bottone zoom della lightbox */
  --onb-backdrop-rgb:   8,6,4;    /* sfondo velo dell'onboarding al primo accesso */
  --dcta-backdrop-rgb:  34,29,21; /* sfondo vetro della CTA sticky in fondo al dettaglio */
  --topbar-glass-rgb:   21,17,13; /* sfondo vetro della topbar sticky */
  --topbar-border-rgb:  58,47,34; /* bordo inferiore della topbar */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Niente sforamenti orizzontali: il contenuto non può mai "uscire a destra" o
   essere tagliato. overflow-x:clip (non hidden) non rompe la topbar sticky. */
html, body { margin: 0; padding: 0; background: var(--bg); width: 100%; max-width: 100%; overflow-x: clip; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* I controlli di modulo NON ereditano il font: senza questa riga le card della home
   (che sono <button>) risolvono ad Arial — sul telefono Arial non c'è e ripiega su
   Roboto, quindi il font giusto si vede per caso, ma i due ambienti misurano metriche
   diverse (misurato 30/7/2026: stessa stringa 171,25px sul device contro 173,69px nel
   simulatore). Solo la famiglia: dimensioni e peso restano a chi li dichiara. */
button, input, select, textarea, optgroup { font-family: inherit; }

#app { max-width: 760px; margin: 0 auto; padding: 0 18px calc(40px + env(safe-area-inset-bottom)); }

/* ── Header ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 4px 12px;
  background: linear-gradient(var(--bg) 70%, transparent);
}
/* Il marchio cresce con lo schermo: a 26px fissi il selettore lingua usciva di 20px
   dalla topbar a 320px/font-scale 1,30 (gate layout, 1/9/2026). Il clamp tiene i 20px
   di prima sui telefoni stretti e dà i 26px dove lo spazio c'e' davvero (475px del
   Fold in poi) — il vincolo dei 284px misurato il 30/07 resta rispettato. */
.brand { font-weight: 800; letter-spacing: .3px; font-size: clamp(20px, 5.5vw, 26px);
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* Il logo accanto al nome (Renato, 4/9/2026): è anche l'unica affordance che dice
   «questo si preme» — il nome da solo non lo diceva a nessuno. */
.brand-logo { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; }
.brand-name { min-width: 0; }
.brand .dot { color: var(--accent); }
.brand small { display:block; font-weight:500; font-size:12px; color:var(--text-mut); letter-spacing:.4px; }
.topbar .spacer { flex: 1; }
/* Voci della topbar. Sono flex item: senza `flex:0 0 auto` si restringono quando il
   marchio occupa tutto (misurato il 30/07 sul telefono a font-scale 1,15: la pillola del
   garage larga 43px, il numero a capo sotto l'icona, e la topbar alta 84px invece di 60). */
.ghost-btn {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  padding: 10px 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
}
.ghost-btn:active { background: var(--card); }
/* Etichetta testuale accanto all'icona: solo dove c'è spazio. Sotto i 560px si torna
   a icona+contatore (vedi regola sotto) — il vincolo dei 284px a 320px/font-scale 1,15
   resta quello misurato il 30/07, non va riaperto aggiungendo testo lì. */
/* A 320px col font-scale di sistema a 1,15 marchio + 3 pillole + lingua non ci stanno nei
   284px del contenitore: senza questa stretta l'ultima voce finisce fuori schermo (misurato
   il 30/07, 328px con 12 preferiti e 3 confronti — l'overflow c'era già prima del nowrap). */
@media (max-width:560px){
  .topbar { gap: 6px; }
  .topbar .ghost-btn { padding: 10px 9px; gap: 3px; }
  .topbar .lang-sel { padding: 10px 7px; }
  .ghost-btn .gb-label { display: none; }
}
.lang-sel {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  padding: 10px 10px; border-radius: 999px; font-size: 13px; cursor: pointer;
  -webkit-appearance: none; appearance: none; text-align: center;
  min-width: 44px; min-height: 44px;
}
.lang-sel option { color: var(--on-accent); background: rgb(var(--sheen-rgb)); }

/* ── Progress ───────────────────────────────────────── */
.progress { height: 5px; background: var(--card); border-radius: 999px; overflow: hidden; margin: 4px 4px 22px; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .3s ease; }

/* ── Hero / intro ───────────────────────────────────── */
.hero { text-align: center; padding: 26px 8px 8px; }
.hero h1 { font-size: 30px; line-height: 1.15; margin: 14px 0 10px; }
.hero h1 b { color: var(--accent); }
.hero p { color: var(--text-dim); font-size: 16px; max-width: 460px; margin: 0 auto 22px; }
.hero .car { font-size: 56px; }
.steps-list { text-align:left; max-width: 420px; margin: 8px auto 26px; display:grid; gap:10px; }
.steps-list .s { display:flex; gap:12px; align-items:flex-start; color:var(--text-dim); font-size:14px; }
.steps-list .n { flex:none; width:26px; height:26px; border-radius:50%; background:var(--card-2); color:var(--accent);
  display:grid; place-items:center; font-weight:700; font-size:13px; border:1px solid var(--line); }

/* ── Question ───────────────────────────────────────── */
.q-step { animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform:none;} }
.q-kicker { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.q-title { font-size: 23px; font-weight: 700; margin: 6px 0 4px; }
.q-help { color: var(--text-mut); font-size: 14px; margin: 0 0 18px; }
/* Domanda a chip (es. epoca a passi di 5 anni) */
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qchip { background: var(--card); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease); }
.qchip:hover { border-color: var(--accent); }
.qchip:active { transform: scale(.97); }
.qchip.sel { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-color: transparent; }
/* Contatore live di auto compatibili */
.q-count { margin: 16px 0 4px; color: var(--text-dim); font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.q-count b { color: var(--accent); font-size: 16px; }
.q-count .ico { width: 16px; height: 16px; color: var(--accent); }
.options { display: grid; gap: 11px; }
.opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--card); border: 1.5px solid var(--line); color: var(--text);
  padding: 15px 16px; border-radius: var(--radius); cursor: pointer; width: 100%;
  font-size: 16px; transition: border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
.opt:active { transform: scale(.985); }
.opt:hover { border-color: var(--accent-2); }
.opt.sel { border-color: var(--accent); background: var(--card-2); }
.opt .ico { width: 27px; height: 27px; flex: none; color: var(--accent); }
.opt .lab { flex: 1; }
.opt .lab b { display: block; font-weight: 600; }
.opt .lab span { display: block; font-size: 13px; color: var(--text-mut); }
.opt .tick { color: var(--accent); font-weight: 800; opacity: 0; transform: scale(.75) translateX(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease); }
.opt.sel .tick { opacity: 1; transform: none; }

.nav-row { display: flex; gap: 12px; margin-top: 24px; }
.skip-row { text-align: center; margin-top: 10px; }
.btn {
  flex: 1; padding: 15px; border-radius: var(--radius); border: none; cursor: pointer;
  font-size: 16px; font-weight: 700;
}
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.btn.primary:disabled { opacity: .4; cursor: default; }
.btn.sec { background: var(--card); color: var(--text-dim); flex: 0 0 auto; padding: 15px 20px; }

/* ── Results ────────────────────────────────────────── */
.res-head { padding: 6px 2px 14px; }
.res-head h1, .res-head h2 { font-size: 24px; margin: 0 0 4px; }
.res-head p { color: var(--text-dim); margin: 0; font-size: 14px; }
.results h1 { font-size: 24px; }
.profile-chips { display:flex; flex-wrap:wrap; gap:7px; margin: 12px 0 4px; }
.chip { background: var(--card-2); border:1px solid var(--line); color: var(--text-dim);
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; }
.chip b { color: var(--accent); font-weight:600; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); cursor: pointer;
  transition: border-color .15s, transform .05s;
}
.card:active { transform: scale(.995); }
.card.top { border-color: var(--accent); }
.card .rank { display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.medal { font-size: 22px; }
.card h3 { font-size: 19px; margin: 0; flex:1; }
.matchpct { font-weight: 800; color: var(--accent); font-size: 18px; }
.bar { height: 7px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin: 4px 0 12px; }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.kv { display:flex; flex-wrap:wrap; gap: 8px 16px; font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; }
.kv b { color: var(--text); font-weight: 600; }
.stars { color: var(--accent); letter-spacing: 1px; }
.reasons { display:grid; gap: 5px; }
.reasons .r { font-size: 13.5px; color: var(--text-dim); display:flex; gap:8px; }
.reasons .r .mk { color: var(--good); flex:none; }
.reasons .r.warn .mk { color: var(--warn); }
.more { color: var(--accent); font-size: 13px; margin-top: 10px; font-weight: 600; }

/* ── Detail ─────────────────────────────────────────── */
.detail h1, .detail h2 { font-size: 24px; margin: 2px 0 2px; }
.detail .sub { color: var(--text-dim); margin: 0 0 16px; }
.sec-title { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent);
  font-weight: 700; margin: 22px 0 10px; }
.tco-total { background: var(--card-2); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px; text-align:center; }
.tco-total .big { font-size: 32px; font-weight: 800; color: var(--accent); }
.tco-total .lbl { color: var(--text-dim); font-size: 13px; }
.tco-rows { display:grid; gap: 2px; margin-top: 14px; }
.tco-rows .row { display:flex; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.tco-rows .row:last-child { border-bottom: none; }
.tco-rows .row .ico { margin-right: 8px; }
.tco-rows .row b { font-weight: 700; }
.plist { display:grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.plist li { display:flex; gap:9px; font-size: 14.5px; color: var(--text-dim); }
.plist li .m { flex:none; }
/* Figlio flex di testo senza min-width:0: a scala font 1.30 sfora il bordo (banco
   collaudo-varianti-tutte.mjs [E], 22/9/2026 — stessa classe di app.css:489). */
.plist li span:not(.m) { min-width:0; overflow-wrap:anywhere; }
.plist.pro li .m { color: var(--good); }
.plist.con li .m { color: var(--bad); }
.note { background: var(--card); border-left: 3px solid var(--accent); padding: 12px 14px;
  border-radius: 8px; font-size: 14px; color: var(--text-dim); margin-top: 10px; }
.cta {
  display:block; text-align:center; text-decoration:none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent);
  font-weight: 800; font-size: 16px; padding: 16px; border-radius: var(--radius); margin-top: 14px;
}
.cta small { display:block; font-weight:600; color:var(--on-accent-mut); opacity:.9; font-size:12px; margin-top:2px; }

.field { margin: 14px 0; }
.field label { display:block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.field select {
  width: 100%; background: var(--card); color: var(--text); border:1.5px solid var(--line);
  border-radius: 12px; padding: 13px 14px; font-size: 16px; appearance: none;
}

.disclaimer { color: var(--text-mut); font-size: 12px; text-align:center; margin: 26px 6px 0; line-height:1.5; }
.intro-pain { color: rgba(var(--sheen-rgb),.7); font-size: clamp(.82rem,.8rem + .3vw,.95rem); line-height:1.55; text-align:center; margin: 14px 8px 22px; padding: 12px 16px; background: rgba(var(--accent-rgb),.07); border-left: 3px solid rgba(var(--accent-rgb),.4); border-radius: 0 8px 8px 0; }
/* Riga posizionamento "indipendente": sobria (no box), sotto intro-pain.
   Niente flex: il testo va a capo su più righe, l'icona resta un inline-block
   nel flusso del testo (come ".ico" ovunque) invece di un item di riga a sé. */
.intro-indie { color: var(--text-dim); font-size:.82rem; line-height:1.6; text-align:center; margin: -10px 8px 22px; }
.intro-indie .ico { width:14px; height:14px; color: var(--good); margin-right:.35em; vertical-align:-2px; }
.intro-indie b { color: var(--text); }
.intro-footer-links { text-align:center; margin: 18px 0 4px; }
/* Bersaglio tattile: era alto 14px, sotto i 24px minimi di WCAG 2.5.8 (misurato
   l'1/9/2026 sul viewport del Fold). Il padding lo porta a 24 senza spostare nulla. */
.intro-footer-links a, .intro-footer-links button { color: var(--text-dim); font-size: 11.5px; text-decoration: none;
  display: inline-block; padding: 5px 8px; min-height: 24px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.intro-footer-links a:hover, .intro-footer-links button:hover { color: var(--accent); text-decoration: underline; }
/* Temi curati: una riga di chip che scorre in orizzontale sopra la lista. Sono una
   lente sul catalogo, quindi stanno con i filtri e non sembrano una navigazione. */
.cat-themes { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.cat-themes::-webkit-scrollbar { display: none; }
.cat-themes .dchip { flex: 0 0 auto; }
.trust-sm { display:flex; align-items:center; gap:.4rem; color: var(--text-dim); font-size:.82rem; }
.back-link { color: var(--text-dim); font-size:14px; background:none; border:none; cursor:pointer; padding: 10px 0; }
/* Il ritorno di schermata era testo grigio in mezzo alla pagina: in collaudo non è stato
   trovato («non riesco neanche a tornare indietro», 4/9/2026). Come pillola con bordo si
   legge come un comando, e l'area di tocco arriva ai 44px. Resta `back-link` nudo per i
   ritorni scritti DENTRO una frase (azzera i filtri, rifai il quiz). */
.back-link.nav-back {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; margin: 2px 0 10px; min-height: 44px;
  color: var(--text); background: var(--bg-2);
}
.back-link.nav-back:hover { border-color: var(--accent); color: var(--accent); }

.ghost-btn.on { border-color: var(--accent); color: var(--accent); }

/* ── Azioni su scheda / dettaglio ───────────────────── */
.card-actions, .detail-actions { display:flex; gap:8px; margin-top: 12px; flex-wrap: wrap; }
.detail-actions { margin: 4px 0 8px; }
.act {
  flex:1; min-width: 96px; background: var(--bg-2); border:1px solid var(--line); color: var(--text-dim);
  padding: 10px 8px; border-radius: 11px; font-size: 13.5px; font-weight:600; cursor:pointer;
}
.act:active { transform: scale(.98); }
.act.go { color: var(--accent); }
.act.fav { background: rgba(var(--accent-rgb),.14); border-color: var(--accent); color: var(--accent); }
.act.cmp { background: rgba(var(--growth-rgb),.14); border-color: var(--good); color: var(--good); }

/* ── Scheda tecnica ─────────────────────────────────── */
.spec-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border:1px solid var(--line); border-radius: 12px; overflow:hidden; }
.spec-grid .sp { background: var(--card); padding: 10px 12px; display:flex; flex-direction:column; gap:2px; }
.spec-grid .sp span { font-size: 11.5px; color: var(--text-mut); text-transform: capitalize; }
.spec-grid .sp b { font-size: 14.5px; font-weight: 600; }

/* ── Tabella motori ─────────────────────────────────── */
/* display:block sul <table> stesso lo rende un contenitore di scroll: su mobile
   la colonna "Traz." non viene più clippata da overflow-x:clip su html/body
   (nessun wrapper nel markup, quindi lo scroll va messo qui). */
table.eng { width:100%; max-width:100%; border-collapse: collapse; font-size: 13px; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.eng th { text-align:left; color: var(--text-mut); font-weight:600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing:.4px; padding: 6px 8px; border-bottom:1px solid var(--line); }
table.eng td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.eng tr.pick td { background: rgba(var(--accent-rgb),.07); }
table.eng .cv { color: var(--text-mut); font-size: 11px; }
table.eng .enote { color: var(--text-mut); font-size: 12px; margin-top: 3px; line-height:1.4; }
table.eng .tag { background: var(--accent); color:var(--on-accent); font-size: 12px; font-weight:700;
  padding: 1px 6px; border-radius: 999px; vertical-align: middle; }

/* ── Grafico svalutazione ───────────────────────────── */
.chart-box { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 12px; max-width: 560px; margin-left:auto; margin-right:auto; }
svg.depchart { width: 100%; height: auto; display:block; }
svg.depchart .dots circle { fill: var(--accent); }
svg.depchart circle.big { fill: var(--accent); stroke: var(--card); stroke-width: 1.6; }
svg.depchart circle.big.now { fill: var(--text); }
svg.depchart line.nowline { stroke: var(--text-mut); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
svg.depchart text.nowlbl { fill: var(--text-dim); font-size: 13px; font-weight: 700; }
svg.depchart text.xl { fill: var(--text-mut); font-size: 12.5px; }
/* pillola "oggi · valore" sul punto attuale */
svg.depchart .nowtag rect { fill: var(--text); }
svg.depchart .nowtag text { fill: var(--bg); font-size: 12.5px; font-weight: 800; }
.chart-cap { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; text-align:center; line-height:1.5; }
.chart-cap .lost { color: var(--bad); font-weight:700; }
svg.depchart .gridg line.grid { stroke: var(--line); stroke-width: 1; opacity: .5; }
svg.depchart .kmband { fill: var(--accent); opacity: .18; }
svg.depchart .chart-motion-path { fill:none; stroke:none; pointer-events:none; }
svg.depchart .chart-car { opacity:0; fill:var(--accent); stroke:var(--bg); stroke-width:1.2; pointer-events:none; transition:opacity 180ms ease-out; }
svg.depchart .chart-car circle { fill:var(--bg); stroke:var(--accent); stroke-width:1; }
.chart-motion-live svg.depchart .chart-car { opacity:1; }
@media (prefers-reduced-motion: reduce) { svg.depchart .chart-car { display:none; } }
/* legenda compatta sotto il grafico */
.chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap: 14px; margin-top: 9px; font-size: 11.5px; color: var(--text-mut); }
.chart-legend .lg { display:inline-flex; align-items:center; gap:6px; }
.chart-legend .ln { width: 16px; height: 0; border-top: 2.5px solid var(--accent); display:inline-block; }
.chart-legend .ln.past { border-top-style: dashed; border-top-color: var(--text-mut); }
.chart-legend .ln.fut { border-top-color: var(--accent); }
.chart-legend .sw.band { width: 13px; height: 11px; border-radius: 3px; background: var(--accent); opacity: .25; }
.chart-sub { font-size: 12px; color: var(--text-mut); margin-top: 6px; text-align:center; line-height:1.45; }
.chart-sub .kmgood { color: var(--good); font-weight:700; }
.chart-sub .kmbad { color: var(--bad); font-weight:700; }
.eissues { font-size: 11.5px; color: var(--warn); margin-top: 3px; line-height: 1.4; }

/* ── Risposta breve della scheda moderna ─────────────────────────────── */
.detail-simple { margin: 18px 0 16px; padding: 18px; background: linear-gradient(145deg, var(--card), var(--bg-2)); border:1px solid var(--line); border-radius: var(--radius); }
.detail-simple-k { display:flex; align-items:center; gap:7px; color:var(--accent); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.detail-simple-k .ico { width:17px; height:17px; }
.detail-simple h2 { margin:9px 0 6px; font-size:23px; line-height:1.08; }
.detail-simple > p { margin:0; color:var(--text-mut); line-height:1.5; }
.detail-simple-facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:16px 0 13px; }
.detail-simple-facts > div { min-width:0; padding:10px 8px; background:color-mix(in srgb, var(--bg) 72%, transparent); border-radius:10px; text-align:center; }
.detail-simple-facts b, .detail-simple-facts span { display:block; }
.detail-simple-facts b { color:var(--text); font-size:17px; line-height:1.15; }
.detail-simple-facts span { margin-top:4px; color:var(--text-mut); font-size:10.5px; line-height:1.2; }
.detail-simple-risk { display:flex; gap:8px; align-items:flex-start; margin:0 0 14px !important; padding:10px; border-left:3px solid var(--warn); background:color-mix(in srgb, var(--warn) 9%, transparent); font-size:13px; }
.detail-simple-risk .ico { flex:0 0 auto; width:17px; height:17px; color:var(--warn); }
.detail-simple-open { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; border:1px solid var(--accent); border-radius:10px; background:transparent; color:var(--accent); font:inherit; font-weight:800; cursor:pointer; transition:background 160ms ease-out, transform 160ms ease-out; }
.detail-simple-open:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.detail-simple-open:active { transform:scale(.98); }
@media (max-width:350px) { .detail-simple { padding:15px; } .detail-simple h2 { font-size:21px; } .detail-simple-facts { gap:5px; } .detail-simple-facts b { font-size:15px; } }

/* ── Valuta un annuncio ─────────────────────────────── */
.le-form { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.le-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-mut); flex:1; min-width:90px; }
.le-form input { background: var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 11px; color:var(--text); font-size:14px; }
.le-form input:focus { outline:none; border-color: var(--accent); }
.le-form .act.go { flex:0 0 auto; }
.field-err { color: var(--bad); font-size:11px; min-height:14px; }
.le-res { margin-top:12px; }
.le-res .le-empty { color: var(--text-mut); font-size:13px; }

/* ── Carsult Score (annuncio) ────────────────────────────────────────── */
.cscore { display:flex; gap:14px; align-items:flex-start; padding:14px;
  border:1px solid var(--line); border-radius:16px; margin-bottom:12px;
  background:var(--card); border-left-width:4px; }
.cscore.good { border-left-color: var(--good); }
.cscore.ok   { border-left-color: var(--accent); }
.cscore.mid  { border-left-color: var(--warn); }
.cscore.low  { border-left-color: var(--bad); }
.cs-ring { width:64px; height:64px; transition: --p .9s var(--ease); }
.cs-ring .ring-in { width:50px; height:50px; font-size:18px; font-weight:800; }
.cs-ring.good { background: conic-gradient(var(--good) calc(var(--p)*1%), var(--bg-2) 0); }
.cs-ring.ok   { background: conic-gradient(var(--accent) calc(var(--p)*1%), var(--bg-2) 0); }
.cs-ring.mid  { background: conic-gradient(var(--warn) calc(var(--p)*1%), var(--bg-2) 0); }
.cs-ring.low  { background: conic-gradient(var(--bad) calc(var(--p)*1%), var(--bg-2) 0); }
.cs-body { flex:1; min-width:0; }
.cs-head { font-size:12.5px; color:var(--text-mut); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cs-head b { color:var(--text); font-size:15px; text-transform:none; letter-spacing:0; }
.cs-sub { font-size:13px; color:var(--text-dim); margin:3px 0 8px; line-height:1.4; }
.cs-parts { display:flex; flex-direction:column; gap:5px; }
.cs-part { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); }
.cs-part > span { flex:0 0 118px; }
.cs-pbar { flex:1; height:6px; border-radius:999px; background:var(--bg-2); overflow:hidden; }
.cs-pbar > i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .8s var(--ease); }
.cs-pbar.muted > i { background:var(--line); }
.cs-part > b { flex:0 0 22px; text-align:right; color:var(--text); font-size:12.5px; }
.cs-part > b.cs-na { color:var(--text-mut); }
.cs-foot { font-size:11.5px; color:var(--text-mut); margin:8px 0 0; line-height:1.4; }
.le-verdict { font-weight:700; font-size:14.5px; padding:10px 12px; border-radius:12px; }
.le-verdict.good { background: rgba(var(--verdict-good-rgb),.16); color: var(--good); }
.le-verdict.ok   { background: rgba(var(--accent-rgb),.14); color: var(--accent); }
.le-verdict.bad  { background: rgba(var(--bad-tint-rgb),.16); color: var(--bad); }
.le-verdict.warn { background: rgba(var(--bad-tint-rgb),.20); color: var(--bad); }
.le-detail { font-size:13px; color: var(--text-dim); margin-top:8px; }
.le-kmflag { font-size:12.5px; color: var(--warn); margin-top:6px; line-height:1.45; }
/* Fascia di prezzo equo (stile IMV) */
.le-band { margin-top:12px; }
.le-band-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; color: var(--text-mut); }
.le-band-head b { color: var(--text); font-size:14px; }
.le-bar { position:relative; height:8px; margin:8px 0 6px; border-radius:999px;
  background: linear-gradient(90deg, rgba(var(--bad-tint-rgb),.5), rgba(var(--growth-rgb),.6) 50%, rgba(var(--bad-tint-rgb),.5)); }
.le-mark { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
  background: var(--text); border:2px solid var(--bg); box-shadow:0 0 0 2px var(--accent); }
.le-band-ends { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color: var(--text-mut); }
.le-band-ends span:nth-child(2) { color: var(--accent); font-weight:600; }

/* ── Diritti / garanzia legale ──────────────────────── */
.legal { display:flex; flex-direction:column; gap:10px; }
.legal-row { display:flex; gap:12px; align-items:flex-start; background: var(--card); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; }
.legal-art { flex:none; font-size:11px; font-weight:800; letter-spacing:.03em; color:var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); padding:4px 8px; border-radius:8px; margin-top:1px; }
.legal-row p { margin:0; font-size:13.5px; color: var(--text-dim); line-height:1.55; }
.legal-row p b { color: var(--text); }

/* ── Storia veicolo (VIN) ───────────────────────────── */
.vh-cover { background: var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 13px; }
.vh-cover .vh-h { font-size:12px; font-weight:700; color: var(--text-mut); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }

/* ── Checklist pre-acquisto / risorse ───────────────── */
.chk .chk-h, .resbox .chk-h { font-size:13px; font-weight:700; color: var(--text-mut); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 4px; }
.chk-prog { background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:6px; }
.chk-prog-h { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-dim); }
.chk-prog-h b { color:var(--accent); font-size:16px; font-variant-numeric:tabular-nums; }
.chk-print { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line);
  color:var(--text-dim); border-radius:999px; padding:10px 12px; font-size:12.5px; cursor:pointer; transition:border-color .15s, color .15s; }
.chk-print:hover { border-color:var(--accent); color:var(--text); }
.chk-print .ico { width:15px; height:15px; }
.chk-track { height:6px; background:var(--card); border-radius:999px; overflow:hidden; margin-top:9px; }
.chk-fill { height:100%; width:0; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:width .3s var(--ease); }
.chk-sec { margin-bottom:6px; }
.chk-item { display:flex; gap:11px; align-items:flex-start; padding:8px 4px; font-size:14.5px; color:var(--text-dim);
  cursor:pointer; border-bottom:1px solid var(--line); line-height:1.4; }
.chk-item:last-child { border-bottom:none; }
/* Figlio flex di testo senza min-width:0: sfora il bordo a scala font 1.30 (banco
   collaudo-varianti-tutte.mjs [E], 22/9/2026 — stessa classe di app.css:489/.plist li). */
.chk-item span { min-width:0; overflow-wrap:anywhere; }
.chk-item input { appearance:none; -webkit-appearance:none; width:24px; height:24px; flex:none; margin-top:1px;
  border:1.6px solid var(--line); border-radius:6px; background:var(--card); cursor:pointer; position:relative; transition:.15s; }
.chk-item input:hover { border-color:var(--accent-2); }
.chk-item input:checked { background:var(--accent); border-color:var(--accent); }
.chk-item input:checked::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:var(--on-accent); font-size:13px; font-weight:900; }
.chk-item input:checked + span { color:var(--text-mut); text-decoration:line-through; }
.resbox { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding:12px 14px; margin-top:14px; }
.resbox .chk-h { margin-top:0; }
.reslist { margin:0; padding-left:0; list-style:none; }
.reslist li { font-size:13px; color: var(--text-dim); line-height:1.5; padding:4px 0; border-top:1px solid var(--line); }
.reslist li:first-child { border-top:none; }
.reslist b { color: var(--text); }
.reslist a { color: var(--accent); text-decoration: none; white-space: nowrap; font-weight: 600; }
.reslist a:hover { text-decoration: underline; }

/* ── Annate consigliate ─────────────────────────────── */
.yearhint { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }
.yearhint b { color: var(--text); }
.yearbox { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.yearbox .yrow { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:4px 0; }
.yearbox .yrow .yk { color: var(--text-mut); font-size: 13px; }
.yearbox .yrow b { text-align:right; min-width:0; overflow-wrap:anywhere; }
.yearbox .yrow.best b { color: var(--accent); }
.yearbox .ynote { margin: 8px 0 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.kv .exyr { color: var(--text-mut); font-size: 11px; font-weight: 600; }

/* ── Alternative di annata / generazione ────────────── */
.gens { display:flex; flex-direction:column; gap:8px; }
.gen { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.gen.is-pick { border-color: var(--accent); }
.gen-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.gen-yr b { font-size: 15px; }
.gen-tag { font-size: 13px; color: var(--text-mut); }
.gen-price { font-size: 15px; font-weight:700; color: var(--text); white-space:nowrap; }
.gen-power { font-size: 15px; font-weight:700; color: var(--text); white-space:nowrap; }
.gen-badges { display:flex; gap:6px; margin-top:6px; }
.gb { font-size: 12px; font-weight:700; padding: 2px 8px; border-radius: 999px; }
.gb.pick { background: rgba(var(--accent-rgb),.18); color: var(--accent); }
.gb.val { background: rgba(var(--verdict-good-rgb),.16); color: var(--good); }
.gen-note { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* ── Selettore di versione/motorizzazione (classiche, Lotto 2) ───────── */
/* .gen diventa <button> quando è dentro .vsel: i due difetti classici del
   bottone-card sono text-align e width (il font eredita già, riga 83). */
.vsel .gen { display:block; width:100%; text-align:left; cursor:pointer; }
.vsel .gen[aria-pressed="true"] { border-color: var(--accent); }
.vsel-panel { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-top: 8px; }
.vsel-title { font-weight:700; font-size:14px; margin-bottom:4px; }
.vsel-hint { font-size:13px; color: var(--text-dim); margin: 0 0 10px; }
.vsel-none { font-size: 13px; color: var(--text-dim); margin: 0; }
.vsel-quote { font-size:12.5px; color: var(--text-mut); font-style: italic; margin: 8px 0 0; }
.vsel-mult { font-size:13.5px; color: var(--text-dim); margin: 10px 0 0; line-height:1.5; }
.vsel-unchanged { font-size:12px; color: var(--text-mut); margin: 10px 0 0; line-height:1.5; }
.affline { font-size: 13.5px; color: var(--text-dim); margin: 6px 0 0; }
.affline b { color: var(--text); }

/* ── Banner "stesso budget, due strade" ─────────────── */
.tradeoff { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.tradeoff .to-h { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.tradeoff .to-cols { display:flex; align-items:stretch; gap: 8px; }
/* min-width:0 + overflow-wrap: a 320px con testo 130% un nome lungo (brand + modello)
   non stava nella colonna e la spingeva 28px fuori (misurato 4/9/2026, verify-layout). */
.tradeoff .to-col { flex:1; min-width:0; overflow-wrap:anywhere; background: var(--bg); border:1px solid var(--line); border-radius: 12px; padding: 10px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition: border-color .15s; }
.tradeoff .to-col:hover { border-color: var(--accent); }
.tradeoff .to-col b { font-size: 14.5px; }
.tradeoff .to-yr { font-size: 12px; color: var(--text-mut); }
.tradeoff .to-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; align-self:flex-start; }
.tradeoff .to-tag.new { background: rgba(var(--value-rgb),.16); color:var(--value); }
.tradeoff .to-tag.qual { background: rgba(var(--accent-rgb),.16); color:var(--accent); }
.tradeoff .to-vs { align-self:center; color: var(--text-mut); font-size: 12px; font-weight:700; }
.tradeoff .to-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-dim); line-height:1.5; }

/* ── Le alternative a quello che comprano tutti ─────── */
.alts { background: var(--card); border:1px solid var(--accent); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.alts .alt-h { font-weight: 800; font-size: 15px; display:flex; align-items:center; gap:7px; }
.alts .alt-h .ico { color: var(--accent); width:18px; height:18px; }
.alts .alt-intro { margin: 6px 0 12px; font-size: 12.5px; color: var(--text-dim); line-height:1.5; }
.alts .alt-cols { display:flex; align-items:stretch; gap: 8px; flex-wrap:wrap; }
.alts .alt-col { flex:1 1 200px; background: var(--bg); border:1px solid var(--line); border-radius: 12px;
  padding: 10px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition: border-color .15s; }
.alts .alt-col:hover, .alts .alt-col:focus-visible { border-color: var(--accent); }
.alts .alt-col b { font-size: 14.5px; }
.alts .alt-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:5px; }
.alts .alt-tag .ico { width:12px; height:12px; }
.alts .alt-tag.cheap { background: rgba(var(--value-rgb),.16); color:var(--value); }
.alts .alt-tag.spec { background: rgba(var(--rare-rgb),.18); color:var(--rare); }
.alts .alt-save { font-size: 13px; font-weight:700; color: var(--accent); }
.alts .alt-keep { font-size: 12px; color: var(--text-mut); line-height:1.45; }

/* Scorciatoia dal quiz e rientro dai risultati */
.quiz-skip { display:block; width:100%; margin-top: 12px; background:none; border:none; cursor:pointer;
  color: var(--text-dim); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
.quiz-skip:hover { color: var(--accent); }
.resume-q { display:block; margin-top: 4px; }
.icons-more { display:block; margin: 10px auto 0; background:none; border:none; cursor:pointer;
  color: var(--text-dim); font-size: 13px; padding: 6px 0; }
.icons-more:hover { color: var(--accent); }

/* ── Pannello filtri avanzati ───────────────────────── */
.filters { margin-bottom: 14px; }
.filters-toggle { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px;
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  color: var(--text); font-size: 14px; font-weight:600; cursor:pointer; text-align:left; }
.filters-toggle .ft-hint { color: var(--text-mut); font-size: 11.5px; font-weight:500; }
/* Sul telefono l'elenco dei filtri va su 3 righe e spinge la prima card sotto la piega:
   il pannello si apre e li mostra comunque. */
@media (max-width:560px){ .filters-toggle .ft-hint{ display:none; } }
.filters-toggle b { color: var(--accent); }
.filters.open .filters-toggle { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.filters .fbody { background: var(--card); border:1px solid var(--line); border-top:none;
  border-radius: 0 0 var(--radius) var(--radius); padding: 4px 14px 14px; }
.frow { padding: 12px 0; border-top:1px solid var(--line); }
.frow:first-child { border-top:none; }
.flabel { font-size: 13.5px; font-weight:700; margin-bottom: 8px; }
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg button { background: var(--bg); border:1px solid var(--line); color: var(--text-dim);
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; cursor:pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease); }
.seg button:hover { border-color: var(--accent-2); }
.seg button:active { transform: scale(.97); }
.seg button.on { background: var(--accent); border-color: var(--accent); color:var(--on-accent); font-weight:700; }
.fhelp { margin: 8px 0 0; font-size: 12px; color: var(--text-mut); line-height: 1.5; }
.fhelp b { color: var(--text-dim); }
.freset { margin-top: 12px; background:none; border:1px solid var(--line); color: var(--text-dim);
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; cursor:pointer; }

/* ── Sicurezza / NCAP ───────────────────────────────── */
.ncap { color: var(--accent); letter-spacing: 1px; }
.ncy { color: var(--text-mut); font-size: 11.5px; font-weight: 500; }

/* ── Assistenti di guida ────────────────────────────── */
.adas-list { display:flex; flex-direction:column; gap:6px; }
.adas-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--card); border:1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.adas-row .ad-main { display:flex; flex-direction:column; gap:1px; }
.adas-row .ad-main b { font-size: 13.5px; }
.adas-row .ad-d { font-size: 11.5px; color: var(--text-mut); }
.ab { font-size: 11px; font-weight:700; padding: 3px 9px; border-radius: 999px; white-space:nowrap; }
.ab.std { background: rgba(var(--verdict-good-rgb),.16); color: var(--good); }
.ab.opt { background: rgba(var(--accent-rgb),.16); color: var(--accent); }
.ab.no  { background: rgba(var(--bad-tint-rgb),.14); color: var(--text-mut); }

/* ── Chilometraggio e valore ────────────────────────── */
.km-cols { display:flex; gap:8px; }
.km-col { flex:1; background: var(--card); border:1px solid var(--line); border-radius: 12px;
  padding: 10px; display:flex; flex-direction:column; gap:3px; text-align:center; }
.km-col:nth-child(3) { border-color: var(--accent-2); }
.km-lab { font-size: 11.5px; color: var(--text-mut); font-weight:700; }
.km-km { font-size: 12px; color: var(--text-dim); }
.km-val { font-size: 16px; color: var(--text); }
.km-note { font-size: 11px; color: var(--text-mut); line-height:1.35; margin-top:2px; }
.km-cap { font-size: 12px; color: var(--text-mut); margin: 8px 0 0; text-align:center; }
.km-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 12px; }
.km-box { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.km-box .km-h { font-weight:700; font-size: 13px; margin-bottom: 6px; }
.km-box .plist { margin:0; }
@media (max-width: 560px) { .km-grid { grid-template-columns: 1fr; } }

/* ── Comparatore ────────────────────────────────────── */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border:1px solid var(--line); border-radius: var(--radius); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 13.5px; }
table.cmp th { text-align:left; color: var(--text-dim); font-weight:600; padding: 11px 12px;
  border-bottom:1px solid var(--line); background: var(--bg-2); position: sticky; left:0; white-space:nowrap; }
table.cmp td { padding: 11px 12px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); text-align:center; }
table.cmp td.best { background: rgba(var(--growth-rgb),.13); color: var(--text); font-weight: 700; }
table.cmp .hcar { background: var(--card-2); text-align:center; position: relative; }
table.cmp .hcar .cmp-ph { display:block; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:var(--bg-2); margin:0 auto 6px; cursor:pointer; }
table.cmp .hcar .cmp-ph img { width:100%; height:100%; object-fit:cover; }
table.cmp .hcar .cmp-ph.ph { display:grid; place-items:center; color:var(--line); font-weight:800; font-size:22px; }
table.cmp .hcar b { display:block; font-size:15px; }
table.cmp .hcar span { display:block; font-size: 12px; color: var(--text-dim); }
table.cmp .hcar .rm { position:absolute; top:4px; right:4px; background:none; border:none; color:var(--text-mut); cursor:pointer; font-size:12px; }
table.cmp .hcar .mini { margin-top:4px; background:none; border:1px solid var(--line); color:var(--accent); font-size:11px; padding:2px 8px; border-radius:999px; cursor:pointer; }

/* Sotto i 480px la tabella (min-width 420) non ci sta: su 320 restava visibile
   una sola auto e la seconda finiva fuori schermo. Qui si impila per VOCE —
   una scheda per riga con dentro le auto una sotto l'altra — così il confronto
   resta a colpo d'occhio senza scroll orizzontale. */
@media (max-width: 480px) {
  .cmp-wrap { overflow-x: visible; border:0; border-radius:0; }
  table.cmp, table.cmp thead, table.cmp tbody, table.cmp tr, table.cmp th, table.cmp td { display:block; }
  table.cmp { min-width:0; }
  table.cmp thead tr { display:flex; gap:8px; }
  table.cmp thead th { display:none; }
  /* con 3 auto la striscia dà 86px a testa: il padding della cella tabellare
     (12px per lato) lasciava meno spazio del pulsante "dettagli". */
  table.cmp .hcar { flex:1 1 0; min-width:0; padding:8px 5px; border:1px solid var(--line); border-radius: var(--radius); }
  table.cmp .hcar .mini { font-size:10.5px; padding:2px 6px; }
  /* "Volkswagen" a 15px è più largo di una colonna da 84px e non ha punti di
     sillabazione: senza questo il marchio sfora la sua scheda. */
  table.cmp .hcar b { font-size:13px; }
  table.cmp .hcar b, table.cmp .hcar span { overflow-wrap:anywhere; }
  table.cmp tbody tr { border:1px solid var(--line); border-radius: var(--radius); margin-top:10px; overflow:hidden; }
  table.cmp tbody th { position:static; white-space:normal; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
  table.cmp tbody td { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:right; border-left:0; }
  table.cmp tbody tr td:last-child { border-bottom:0; }
  table.cmp tbody td::before { content: attr(data-car); color: var(--text-dim); font-weight:600; text-align:left;
    min-width:0; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  table.cmp tbody td.best::after { content:"✓"; color: var(--good); font-weight:700; }
}

/* ── Barra confronto fluttuante ─────────────────────── */
#cmpbar {
  position: fixed; left:50%; transform: translateX(-50%) translateY(120%);
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 50;
  background: var(--card-2); border:1px solid var(--accent); border-radius: 999px;
  display:flex; align-items:center; gap:14px; padding: 9px 9px 9px 18px; box-shadow: var(--shadow);
  transition: transform .25s ease; font-size: 14px; color: var(--text);
  visibility: hidden;
}
#cmpbar.show { transform: translateX(-50%) translateY(0); visibility: visible; }
#cmpbar button { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent);
  border:none; border-radius:999px; padding: 8px 16px; font-weight:700; cursor:pointer; }

/* ── Toast ──────────────────────────────────────────── */
#flash {
  position: fixed; left:50%; bottom: 80px; transform: translateX(-50%) translateY(20px);
  background: var(--card-2); border:1px solid var(--line); color: var(--text);
  padding: 11px 18px; border-radius: 999px; font-size: 13.5px; opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s; z-index: 60; box-shadow: var(--shadow);
}
#flash.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* ── Modalità (intro): Neofita / Appassionato ───────── */
.mode-cards { display:grid; gap:14px; margin: 8px 0 18px; }
@media (min-width:560px){ .mode-cards{ grid-template-columns:1fr 1fr; } }
.mode-card { text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 20px; cursor:pointer; transition:border-color .15s, transform .15s; color:var(--text); }
.mode-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.mode-card.alt:hover { border-color:var(--mode-alt); }
.mc-ico { font-size:30px; }
.mc-title { font-size:20px; font-weight:800; margin-top:6px; }
.mc-sub { color:var(--accent); font-size:13.5px; font-weight:600; margin-top:2px; }
.mode-card.alt .mc-sub { color:var(--mode-alt); }
.mc-desc { color:var(--text-dim); font-size:13.5px; line-height:1.5; margin-top:9px; }

/* ── Barra decenni + chip ───────────────────────────── */
.decade-bar { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; }
.dchip { background:var(--card); border:1px solid var(--line); color:var(--text-dim);
  border-radius:999px; padding:10px 15px; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; }
.dchip:hover { border-color:var(--accent); }
.dchip.on { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); border-color:transparent; }

/* ── Card classica nel catalogo ─────────────────────── */
.clist { display:grid; gap:12px; }
@media (min-width:560px){ .clist{ grid-template-columns:1fr 1fr; } }
.ccard { text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; cursor:pointer; color:var(--text); transition:border-color .15s, transform .15s; }
.ccard:hover { border-color:var(--accent); transform:translateY(-2px); }
.cc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; font-size:15.5px; font-weight:700; }
.cc-meta { color:var(--text-mut); font-size:12.5px; margin-top:4px; }
.cc-price { color:var(--accent); font-weight:700; font-size:15px; margin-top:8px; }
.cc-fun { color:var(--text-dim); font-size:12.5px; margin-top:3px; }

/* ── Badge trend ────────────────────────────────────── */
.tbadge { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.tbadge .ico { width:13px; height:13px; }
.tbadge.up { background:rgba(var(--growth-rgb),.16); color:var(--good); border:1px solid rgba(var(--growth-rgb),.4); }
.tbadge.up2 { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); border:1px solid transparent; }
.tbadge.down { background:rgba(var(--trend-down-rgb),.15); color:var(--trend-down); border:1px solid rgba(var(--trend-down-rgb),.4); } /* più chiaro di var(--bad): a 11.5px serve contrasto ≥4.5:1 sul fondo card */
.tbadge.flat { background:var(--bg-2); color:var(--text-mut); border:1px solid var(--line); }

/* ── Blocco valutazione classiche ───────────────────── */
.valbox { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.cond-title { font-weight:700; font-size:13.5px; margin:14px 0 8px; color:var(--text); }
.cond-title:first-child { margin-top:0; }
.cond-title span { color:var(--text-mut); font-weight:500; font-size:12px; }
.cond-grades { display:grid; gap:7px; }
.cg { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:10px; }
.cg-l { font-size:12.5px; color:var(--text); display:flex; flex-direction:column; line-height:1.2; }
.cg-l span { color:var(--text-mut); font-size:12px; }
.cg-bar { height:9px; background:var(--bg-2); border-radius:999px; overflow:hidden; }
.cg-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:999px; }
.cg-v { font-size:12.5px; font-weight:700; color:var(--accent); white-space:nowrap; }
.mktbox { display:grid; gap:8px; }
.mkt { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:10px;
  background:var(--bg-2); border-radius:10px; padding:9px 12px; }
.mkt-f { font-size:13px; font-weight:600; }
.mkt b { font-size:14px; color:var(--text); text-align:right; }
/* niente nowrap: col corpo a 13px, a font-scale 1,30 questa riga usciva dal bordo destro
   insieme al suo contenitore (misurato 4/8/2026: 10 elementi oltre i 320px contro 4). */
.mkt-t { font-size:13px; color:var(--text-mut); }
.vsrc { list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.vsrc li { font-size:12px; color:var(--text-dim); padding-left:16px; position:relative; line-height:1.45; }
.vsrc li::before { content:""; position:absolute; left:0; top:7px; width:8px; height:2px; background:var(--accent); border-radius:2px; }
.plist.vlist { margin-top:0; }

/* ── Catalogo Appassionato: controlli (ricerca/ordina/segmento) ─────── */
.cat-controls { display:flex; gap:8px; margin:10px 0 6px; flex-wrap:wrap; }
.cat-search { flex:1 1 160px; min-width:0; background:var(--card); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:9px 16px; font-size:14px; outline:none; }
.cat-search:focus { border-color:var(--accent); }
.cat-search::placeholder { color:var(--text-mut); }
.cat-sort { background:var(--card); border:1px solid var(--line); color:var(--text-dim);
  border-radius:999px; padding:9px 12px; font-size:13px; cursor:pointer; outline:none; }
.decade-bar.seg { margin-top:2px; }
.cat-count-row { margin:10px 0 8px; }
.cat-count { color:var(--text-mut); font-size:12.5px; font-weight:600; }
/* Paginazione: bottone "Mostra altri N" + conteggio in pagina */
.cat-more { margin:14px 0 2px; text-align:center; }
.cat-more-btn { width:100%; min-height:46px; background:var(--card); border:1px solid var(--accent);
  color:var(--text); border-radius:999px; padding:12px 18px; font-size:14.5px; font-weight:700; cursor:pointer; }
.cat-more-btn:hover { border-color:var(--accent-2); }
.cat-more-cnt { color:var(--text-mut); font-size:12px; font-weight:600; margin:7px 0 0; }

/* ── Filtri attivi (chip removibili) ─────────────────────────────────── */
.active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 2px; }
.af-lead { color:var(--text-mut); font-size:12px; font-weight:600; margin-right:2px; }
.afchip { display:inline-flex; align-items:center; gap:6px; background:var(--card);
  border:1px solid var(--accent); color:var(--text); border-radius:999px;
  padding:5px 8px 5px 11px; font-size:12.5px; font-weight:600; cursor:pointer; line-height:1; }
.afchip:hover { background:rgba(var(--danger-tint-rgb),0.08); border-color:var(--danger); }
.afx { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; background:var(--line); color:var(--text-dim); font-size:13px; font-weight:700; }
.afchip:hover .afx { background:var(--danger); color:rgb(var(--sheen-rgb)); }
.afclear { background:none; border:none; color:var(--text-mut); font-size:12px; font-weight:600;
  cursor:pointer; text-decoration:underline; padding:5px 4px; }
.afclear:hover { color:var(--text); }

/* ── Stato "nessun risultato" ────────────────────────────────────────── */
.no-results { text-align:center; padding:30px 16px 24px; background:var(--card);
  border:1px solid var(--line); border-radius:16px; margin-top:6px; }
.no-results .nr-ico { color:var(--text-mut); opacity:0.7; margin-bottom:8px; }
.no-results .nr-ico .ico { width:34px; height:34px; }
.nr-tip { font-size:15px; color:var(--text); margin:0 0 4px; }
.nr-sub { font-size:13px; color:var(--text-dim); margin:8px 0; }
.no-results .active-filters { justify-content:center; margin-top:6px; }

/* ── Evidenziazione termine cercato ──────────────────────────────────── */
mark.hl { background:linear-gradient(transparent 60%, rgba(var(--accent-rgb),0.42) 0);
  color:inherit; padding:0 1px; border-radius:2px; }

/* ── Badge fascia di prezzo ──────────────────────────────────────────── */
.ptier { display:inline-block; font-size:12px; font-weight:700; letter-spacing:-1px; padding:1px 6px;
  border-radius:6px; vertical-align:middle; margin-left:4px; }
.ptier.t1 { background:rgba(var(--growth-rgb),.18); color:var(--good); }
.ptier.t2 { background:rgba(var(--accent-rgb),.16); color:var(--accent); }
.ptier.t3 { background:rgba(var(--accent-rgb),.22); color:var(--accent); }
.ptier.t4 { background:rgba(var(--bad-tint-rgb),.18); color:var(--bad); }
.ptier.t5 { background:rgba(var(--bad-tint-rgb),.28); color:var(--bad); }

/* ── Classiche simili (dettaglio) ────────────────────────────────────── */
.simlist { display:grid; gap:8px; }
@media (min-width:560px){ .simlist{ grid-template-columns:1fr 1fr; } }
.simcard { text-align:left; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; cursor:pointer; color:var(--text); transition:border-color .15s, transform .15s; }
.simcard:hover { border-color:var(--accent); transform:translateY(-1px); }
.simcard.has-photo { padding:0; overflow:hidden; }
.sim-ph { display:block; width:100%; aspect-ratio:16/9; background:var(--bg-2); }
.sim-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.simcard.has-photo b { margin:10px 14px 0; }
.simcard.has-photo .sim-meta { margin-left:14px; margin-right:14px; }
.simcard.has-photo .sim-price { margin:5px 14px 12px; }
.simcard b { font-size:14px; display:block; }
.sim-meta { display:block; color:var(--text-mut); font-size:13px; margin-top:3px; }
.sim-price { display:block; color:var(--accent); font-weight:700; font-size:13px; margin-top:5px; }

/* ── Guida "Aiutami a scegliere" (Appassionato) ──────────────────────── */
.guide { background:var(--card); border:1px solid var(--line); border-radius:14px; margin:10px 0 6px; overflow:hidden; }
.guide.open { border-color:var(--accent); }
.guide-toggle { width:100%; background:none; border:none; color:var(--text); display:flex; justify-content:space-between;
  align-items:center; padding:13px 16px; cursor:pointer; font-size:14.5px; }
.guide-toggle b { color:var(--accent); }
.guide-on { color:var(--good); font-weight:700; font-size:12px; }
.gt-arrow { color:var(--text-mut); }
.guide-body { padding:4px 16px 16px; display:flex; flex-direction:column; gap:12px; }
.guide-body.flat { background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px; margin:8px 0 6px; }
.grow .glabel { font-size:13px; font-weight:700; margin-bottom:7px; }
.grow { display:flex; flex-wrap:wrap; gap:7px; }
.grow .glabel { width:100%; }
.glabel-x { color:var(--accent); font-weight:600; text-transform:none; letter-spacing:0; font-size:11px; opacity:.85; }

/* ── Toggle ricerca: Con guida / A mano ──────────────────────────────── */
.cat-modes { display:flex; gap:8px; margin:14px 0 4px; }
.cm { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--text-dim);
  font-size:15px; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.cm:hover { border-color:var(--accent-2); }
.cm.on { background:var(--card-2); border-color:var(--accent); color:var(--text); }
.cm .ico { width:18px; height:18px; color:var(--accent); }
.cm-dot { width:7px; height:7px; border-radius:50%; background:var(--good); display:inline-block; }
.cat-sort:disabled { opacity:.45; cursor:not-allowed; }

/* ── Tendina ricerca+filtri (Variante A, chiusa di default — 1/9/2026) ── */
.cat-filters-acc { background:var(--card); border:1px solid var(--line); border-radius:14px;
  margin:12px 0 6px; }
.cat-filters-summary { display:flex; align-items:center; gap:8px; padding:13px 16px;
  cursor:pointer; font-size:14.5px; font-weight:700; color:var(--text); list-style:none; }
.cat-filters-summary::-webkit-details-marker { display:none; }
.cat-filters-summary .ico { width:18px; height:18px; color:var(--accent); }
.cat-filters-badge { display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent);
  font-size:11.5px; font-weight:800; }
.cat-filters-arrow { margin-left:auto; color:var(--text-mut); transition:transform .15s; }
.cat-filters-acc[open] .cat-filters-arrow { transform:rotate(180deg); }
.cat-filters-body { padding:0 16px 16px; }

/* ── Riquadro lista con scroll proprio (Variante A — non attraversa tutta
   la pagina: si arriva subito ai link sotto senza scorrere ~144 card) ── */
.clist-box { max-height:55vh; overflow-y:auto; overflow-x:hidden; padding:2px 2px 2px 0; }

/* ── Match nelle card (guida attiva) ─────────────────────────────────── */
.ccard-hi { border-color:var(--accent); }
.cc-match { font-size:13px; font-weight:800; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.cc-match.hi { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); }
.cc-match.mid { background:rgba(var(--accent-rgb),.18); color:var(--accent); }
.cc-match.lo { background:var(--bg-2); color:var(--text-mut); }
.cc-why { color:var(--good); font-size:12px; margin-top:6px; line-height:1.4; }

/* ── Anello match (gauge conico) ─────────────────────────────────────── */
@property --p { syntax: "<number>"; initial-value: 0; inherits: false; }
.ring { --p:0; flex:none; border-radius:50%; display:grid; place-items:center;
  background: conic-gradient(var(--accent) calc(var(--p)*1%), var(--bg-2) 0); }
.ring-in { border-radius:50%; background:var(--card); display:grid; place-items:center;
  font-weight:800; color:var(--accent); line-height:1; }
.cc-ring { width:42px; height:42px; }
.cc-ring .ring-in { width:33px; height:33px; font-size:12.5px; }
.cc-ring.hi { background: conic-gradient(var(--accent) calc(var(--p)*1%), var(--bg-2) 0); }
.cc-ring.lo { background: conic-gradient(var(--text-mut) calc(var(--p)*1%), var(--bg-2) 0); }
.cc-ring.lo .ring-in { color:var(--text-mut); }

/* ── Card: ingresso a cascata + Top match ────────────────────────────── */
.clist.anim .ccard { animation: ccIn .42s var(--ease) both; animation-delay: calc(var(--i,0) * 34ms); }
@keyframes ccIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
.ccard { position:relative; }
.ccard-top { border-color:var(--accent); background:
  linear-gradient(180deg, rgba(var(--accent-rgb),.10), transparent 60%), var(--card); }
.cc-ribbon { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.6px; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.cc-ribbon .ico { width:13px; height:13px; }

/* ── Contatore live nel funnel ───────────────────────────────────────── */
.live-count { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:18px;
  padding:11px 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg-2);
  color:var(--text-dim); font-size:14px; }
.live-count b { color:var(--accent); font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.live-count .lc-ico { width:17px; height:17px; color:var(--accent); }

/* ── Reveal: la classica ideale ──────────────────────────────────────── */
.reveal { animation: fadeUp .35s var(--ease) both; }
.rv-kicker { display:flex; align-items:center; gap:8px; justify-content:center; color:var(--accent);
  font-size:13px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; margin:6px 0 16px; }
.rv-hero { display:flex; gap:16px; align-items:center; width:100%; text-align:left; cursor:pointer;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.12), transparent 70%), var(--card);
  border:1px solid var(--accent); border-radius:18px; padding:18px; color:var(--text);
  transition: transform .15s var(--ease), border-color .15s; }
.rv-hero:active { transform: scale(.995); }
.rv-hero.has-photo { flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; }
.rv-photo { position:relative; width:100%; aspect-ratio:16/9; background:var(--bg-2); }
.rv-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.rv-hero-body { display:flex; gap:16px; align-items:center; padding:18px; }
.rv-ring { width:88px; height:88px; transition: --p .9s var(--ease); }
.rv-ring .ring-in { width:68px; height:68px; font-size:19px; }
.rv-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.rv-name { font-size:19px; font-weight:800; line-height:1.15; }
.rv-meta { font-size:13px; color:var(--text-mut); }
.rv-price { font-size:15px; margin-top:2px; }
.rv-price b { color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; }
.rv-fun { font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.rv-why { list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:7px; }
.rv-why li { display:flex; align-items:center; gap:9px; color:var(--good); font-size:14px; }
.rv-why li .ico { width:18px; height:18px; flex:none; }
.rv-actions { margin-top:18px; }
.rv-more-h { margin:24px 0 10px; font-size:13px; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.5px; }
.rv-more { display:flex; flex-direction:column; gap:8px; }
.rv-mini { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 14px; color:var(--text);
  animation: ccIn .42s var(--ease) both; animation-delay: calc(var(--i,0) * 55ms); transition:border-color .15s, transform .15s; }
.rv-mini:hover { border-color:var(--accent); transform:translateY(-1px); }
.rv-mini-ph { width:56px; height:42px; border-radius:8px; overflow:hidden; flex:none; background:var(--bg-2);
  display:grid; place-items:center; color:var(--line); font-weight:800; }
.rv-mini-ph img { width:100%; height:100%; object-fit:cover; }
.rv-mini-score { font-weight:800; color:var(--accent); font-size:14px; min-width:34px; font-variant-numeric:tabular-nums; }
.rv-mini-score::after { content:"%"; font-size:11px; }
.rv-mini-name { flex:1; font-weight:600; font-size:14.5px; min-width:0; }
.rv-mini-meta { font-size:12.5px; color:var(--text-mut); white-space:nowrap; }
.rv-all { display:block; width:100%; text-align:center; margin-top:18px; }

/* ── Foto modello (card + dettaglio) ─────────────────────────────────── */
.cc-photo { position:relative; width:calc(100% + 32px); margin:-14px -16px 12px; aspect-ratio:16/9;
  background:var(--bg-2); border-radius:14px 14px 0 0; overflow:hidden; }
.card.has-photo { overflow:hidden; }   /* la foto a filo non sborda oltre gli angoli arrotondati */
.card.has-photo .cc-photo { width:calc(100% + 36px); margin:-18px -18px 14px; }
.cc-photo img { width:100%; height:100%; object-fit:cover; display:block; }
/* Fallback senza foto: area più bassa (non un 16:9 vuoto) + monogramma come
   badge circolare in accento, invece della lettera grigia libera nel vuoto. */
.cc-photo.ph { aspect-ratio:21/9; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--card), var(--bg-2)); }
.cc-photo.ph span { width:56px; height:56px; display:grid; place-items:center;
  border-radius:50%; font-size:22px; font-weight:800; color:var(--accent);
  background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.3); }
.ccard.has-photo { overflow:hidden; }
.ccard.has-photo .cc-ribbon { position:absolute; top:10px; left:10px; margin:0; z-index:2;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); padding:4px 9px; border-radius:999px; }
.dhero { margin:14px 0 4px; position:relative; border-radius:16px; overflow:hidden; background:var(--bg-2); }
.dhero img { width:100%; max-height:340px; object-fit:cover; display:block; }
/* Foto cliccabile → lightbox */
.lb-open { cursor:zoom-in; }
.lb-hint { position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:10px;
  background:rgba(var(--lb-glass-rgb),.55); color:rgb(var(--sheen-rgb)); border:1px solid rgba(var(--sheen-rgb),.25); font-size:15px;
  cursor:zoom-in; display:grid; place-items:center; backdrop-filter:blur(4px); transition:background .15s; }
.lb-hint:hover { background:rgba(var(--lb-glass-rgb),.8); }
.lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(var(--backdrop-rgb),.92); padding:24px; cursor:zoom-out; animation:lbIn .2s var(--ease); }
.lightbox.on { display:flex; }
.lightbox img { max-width:96vw; max-height:88vh; border-radius:12px; box-shadow:0 16px 60px rgba(var(--shade-rgb),.6); }
.lb-x { position:absolute; top:16px; right:18px; width:42px; height:42px; border-radius:50%;
  background:rgba(var(--sheen-rgb),.1); color:rgb(var(--sheen-rgb)); border:1px solid rgba(var(--sheen-rgb),.25); font-size:18px; cursor:pointer; }
.lb-x:hover { background:rgba(var(--sheen-rgb),.2); }
.lb-cap { position:absolute; left:0; right:0; bottom:18px; text-align:center; color:rgba(var(--sheen-rgb),.8);
  font-size:12.5px; padding:0 20px; }
.lb-cap a { color:var(--accent); text-decoration:none; }
@keyframes lbIn { from { opacity:0; } to { opacity:1; } }

/* ── Info-button ⓘ + popover spiegazione ─────────────────────────────── */
.ibtn { display:inline-grid; place-items:center; width:17px; height:17px; flex:none; vertical-align:middle;
  border-radius:50%; border:1px solid var(--accent); background:transparent; color:var(--accent);
  font-size:11px; font-weight:800; font-style:italic; line-height:1; cursor:pointer; padding:0;
  margin-left:5px; transition:background .15s, color .15s; position:relative; }
.ibtn::before { content:""; position:absolute; inset:-5px; }  /* area touch ~27px senza alterare il layout (WCAG 2.5.8) */
.ibtn:hover { background:var(--accent); color:var(--bg); }
/* Rimozione dal garage sulle card classiche (le moderne hanno già il toggle in card) */
.gfav-card { position:relative; display:flex; }
.gfav-card > .ccard { width:100%; }
.gfav-rm { position:absolute; top:10px; right:10px; z-index:3; width:30px; height:30px; border-radius:50%;
  border:0; background:rgba(var(--chip-glass-rgb),.78); color:rgb(var(--sheen-rgb)); font-size:15px; line-height:1; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(4px); transition:background .15s; }
.gfav-rm:hover { background:var(--bad, var(--bad-fallback)); }
.infopop { position:fixed; inset:0; z-index:1100; display:none; align-items:center; justify-content:center;
  background:rgba(var(--backdrop-rgb),.78); padding:22px; animation:lbIn .18s var(--ease); }
.infopop.on { display:flex; }
.ip-card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px;
  max-width:420px; width:100%; padding:20px 22px; box-shadow:var(--shadow); animation:introUp .25s var(--ease) both; }
.ip-card h4 { margin:0 0 8px; font-size:17px; color:var(--text); padding-right:28px; }
.ip-card p { margin:0; font-size:14px; line-height:1.5; color:var(--text-dim); }
.ip-card p b { color:var(--text); }
.ip-x { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--line); color:var(--text-dim); font-size:13px; cursor:pointer; }
.ip-x:hover { color:var(--text); }
.photo-cred { position:absolute; right:8px; bottom:8px; font-size:13px; color:var(--photo-attrib);
  background:rgba(var(--shade-rgb),.55); padding:3px 8px; border-radius:999px; text-decoration:none; backdrop-filter:blur(3px); }
.photo-cred:hover { background:rgba(var(--shade-rgb),.75); }
.cc-photo .photo-cred { right:6px; bottom:6px; font-size:12px; padding:2px 6px; }

/* ── Hero cinematografico (copertina) ────────────────────────────────── */
.dhero.cine { margin:10px 0 18px; aspect-ratio:16/10; max-height:62vh; position:relative; }
.dhero.cine img { position:absolute; inset:0; width:100%; height:115%; max-height:none; object-fit:cover;
  will-change:transform; animation:heroZoom 9s ease-out both; }
@keyframes heroZoom { from { scale:1.07; } to { scale:1; } }
.dhero.cine::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(var(--scrim-rgb),.94) 0%, rgba(var(--scrim-rgb),.55) 32%, rgba(var(--scrim-rgb),.05) 60%, transparent 100%); }
.dhero-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 22px 20px; }
.dhero-badge { margin-bottom:10px; }
.dhero-title { font-size:clamp(1.7rem, 1.2rem + 2.8vw, 3rem); font-weight:800; line-height:1.04;
  letter-spacing:-.5px; margin:0 0 8px; color:rgb(var(--sheen-rgb)); text-shadow:0 2px 24px rgba(var(--shade-rgb),.55); }
.dhero-sub { color:rgba(var(--sheen-rgb),.86); font-size:14.5px; margin:0; text-shadow:0 1px 10px rgba(var(--shade-rgb),.5); }
.dhero-sub .dots { filter:drop-shadow(0 1px 4px rgba(var(--shade-rgb),.5)); }
/* z-index:2 (non 3): resta sopra il velo ::after ma sotto .lb-hint, che
   condivide lo stesso angolo in alto a destra — a parità di z-index vinceva
   l'ordine nel DOM e il credito intercettava il click sul bottone zoom.
   right:52px: si affianca al bottone zoom (34px + margini) invece di finirci sotto. */
.dhero.cine .photo-cred { z-index:2; top:8px; bottom:auto; right:52px; }

/* ── Transizioni cinematografiche tra schermate (View Transitions) ───── */
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.36s; animation-timing-function:var(--ease); }
::view-transition-old(root) { animation-name:vtOut; }
::view-transition-new(root) { animation-name:vtIn; }
@keyframes vtIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes vtOut { from { opacity:1; } to { opacity:0; } }
/* Shared element: la foto della card si trasforma nell'hero del dettaglio */
::view-transition-group(hero-photo) { animation-duration:.5s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
::view-transition-old(hero-photo), ::view-transition-new(hero-photo) {
  height:100%; width:100%; object-fit:cover; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
  .cursor { display:none !important; }
}

/* ── Intro immersiva ─────────────────────────────────────────────────── */
.intro-hero { position:relative; border-radius:20px; overflow:hidden; margin:6px 0 22px;
  min-height:clamp(280px, 46vh, 460px); display:flex; align-items:flex-end; background:var(--bg-2); }
.intro-hero.nobg { background:linear-gradient(135deg, var(--card-2), var(--bg-2)); }
.intro-bg { position:absolute; inset:0; width:100%; height:115%; object-fit:cover;
  animation:heroZoom 12s ease-out both; }
.intro-hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(var(--scrim-rgb),.95) 0%, rgba(var(--scrim-rgb),.55) 38%, rgba(var(--scrim-rgb),.1) 70%, transparent 100%); }
.intro-hero-in { position:relative; z-index:2; padding:26px 24px; max-width:680px; }
.intro-kicker { display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:800;
  letter-spacing:1.5px; text-transform:uppercase; font-size:13px; margin-bottom:12px;
  animation:introUp .6s var(--ease) both; }
.intro-h1 { font-size:clamp(2rem, 1.4rem + 4vw, 3.6rem); font-weight:800; line-height:1.02; letter-spacing:-1px;
  margin:0 0 12px; color:rgb(var(--sheen-rgb)); text-shadow:0 2px 30px rgba(var(--shade-rgb),.5); animation:introUp .6s var(--ease) .08s both; }
.intro-h1 em { font-style:italic; color:var(--accent); }
.intro-lead { color:rgba(var(--sheen-rgb),.86); font-size:clamp(.95rem,.9rem+.4vw,1.15rem); line-height:1.5; margin:0;
  max-width:560px; animation:introUp .6s var(--ease) .16s both; }
/* Mobile: hero+pain-band spingevano la prima CTA sotto la piega (screenshot 390×844:
   "Inizia →" tagliato in fondo, seconda card invisibile). Comprimere per riportare
   la prima azione sopra la piega — vedi meta-pattern-temi.md #2 (Andrew/Plerdy,
   Timettonline: CTA above the fold, niente hero a competere con l'attenzione). */
@media (max-width: 560px) {
  .intro-hero { min-height: clamp(170px, 26vh, 260px); margin-bottom: 14px; }
  .intro-hero-in { padding: 18px 18px; }
  .intro-pain { margin: 0 8px 14px; padding: 10px 14px; }
  .intro-indie { margin: -4px 8px 14px; }
}
@keyframes introUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.mode-cards.stagger .mode-card { animation:introUp .55s var(--ease) both; }
.mode-cards.stagger .mode-card:nth-child(1) { animation-delay:.24s; }
.mode-cards.stagger .mode-card:nth-child(2) { animation-delay:.32s; }
.mc-go { display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--accent);
  font-weight:700; font-size:14px; }
.mc-go .ico { width:15px; height:15px; }

/* ── Catalogo: card "In evidenza" ───────────────────────────────────── */
.cat-feat { position:relative; display:block; width:100%; text-align:left; cursor:pointer; color:var(--text);
  border:1px solid var(--accent); border-radius:18px; overflow:hidden; margin:4px 0 8px;
  aspect-ratio:21/9; background:var(--bg-2); padding:0; transition:transform .2s var(--ease), box-shadow .2s; }
.cat-feat:hover { box-shadow:var(--shadow); }
.cat-feat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-feat::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(var(--scrim-rgb),.92), rgba(var(--scrim-rgb),.3) 55%, transparent); }
.cat-feat-cap { position:absolute; left:0; bottom:0; z-index:2; padding:16px 18px; display:flex; flex-direction:column; gap:3px; }
.cat-feat-k { display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:800;
  font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.cat-feat-k .ico { width:13px; height:13px; }
.cat-feat-t { font-size:clamp(1.2rem,1rem+1.5vw,1.9rem); font-weight:800; color:rgb(var(--sheen-rgb)); line-height:1.05;
  text-shadow:0 2px 16px rgba(var(--shade-rgb),.5); }
.cat-feat-m { color:rgba(var(--sheen-rgb),.82); font-size:13px; }

/* ── Cursore custom (desktop) + magnetic ─────────────────────────────── */
.cursor { position:fixed; left:0; top:0; width:34px; height:34px; border:1.5px solid var(--accent);
  border-radius:50%; pointer-events:none; z-index:9999; opacity:.55; mix-blend-mode:screen;
  transition:width .2s var(--ease), height .2s var(--ease), opacity .2s, background .2s; }
.cursor.on { width:52px; height:52px; opacity:.9; background:rgba(var(--accent-rgb),.12); }
.cursor.down { width:26px; height:26px; }
/* setupCursor() già si ferma su pointer:coarse, ma parte centrato sullo schermo
   finché non arriva un mousemove: su dispositivi ibridi/emulazioni che riportano
   pointer:fine anche sotto 560px resta un cerchio fermo e ingiustificato al centro. */
@media (max-width: 560px) { .cursor { display:none; } }
.magnetic { transition:transform .25s var(--ease); }

/* ── Stats band (trust) ──────────────────────────────────────────────── */
.stats-band { display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 24px; }
.stat { flex:1; min-width:130px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 14px; display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center; }
.stat b { font-size:clamp(1.8rem, 1.4rem + 1.6vw, 2.7rem); font-weight:800; color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-1px; }
.stat > span { font-size:12.5px; color:var(--text-dim); line-height:1.3; }
.stat.trust { flex-direction:row; text-align:left; align-items:center; gap:11px; flex:1.4;
  font-family:inherit; cursor:pointer; transition:border-color .15s; }
button.stat.trust:hover { border-color:var(--accent); }
.stat.trust i { color:var(--accent); }
.stat.trust .stat-ic .ico { width:26px; height:26px; color:var(--good); }
.stat.trust i { display:block; font-style:normal; font-size:11px; color:var(--text-mut); margin-top:3px; }

/* ── Vetrina "Icone da non perdere" ──────────────────────────────────── */
.icons-sec { margin:6px 0 24px; }
.icons-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.icons-h span:first-child { font-size:16px; font-weight:800; display:inline-flex; align-items:center; gap:7px; }
.icons-h .ico { color:var(--accent); width:18px; height:18px; }
.icons-hint { font-size:12px; color:var(--text-mut); }
.icons-vp { position:relative; }
/* La barra era alta 6px e quasi invisibile: qui è un comando, non una decorazione. */
.icons-row { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 10px;
  scrollbar-width:auto; scrollbar-color:var(--text-mut) var(--bg-2); }
.icons-row::-webkit-scrollbar { height:10px; }
.icons-row::-webkit-scrollbar-track { background:var(--bg-2); border-radius:999px; }
.icons-row::-webkit-scrollbar-thumb { background:var(--text-mut); border-radius:999px; }
.icons-row::-webkit-scrollbar-thumb:hover { background:var(--accent); }
/* Frecce semitrasparenti sopra i bordi della vetrina: si vedono, senza coprire le foto. */
.icons-arrow { position:absolute; top:calc(50% - 8px); transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:color-mix(in srgb, var(--bg) 72%, transparent); color:var(--text);
  font-size:20px; line-height:1; display:grid; place-items:center; padding:0;
  transition:background .15s, border-color .15s, opacity .15s; opacity:.75; }
.icons-arrow:hover { opacity:1; background:var(--card); border-color:var(--accent); color:var(--accent); }
.icons-arrow.left { left:-4px; }
.icons-arrow.right { right:-4px; }
/* Il contenuto di un <button> è centrato in verticale: con un titolo su due righe la
   foto scivolava in su rispetto alle card accanto (misurato 25px, 1/9/2026). In colonna
   parte dall'alto, e il titolo a due righe fisse tiene le card della stessa forma. */
.icard { flex:0 0 200px; scroll-snap-align:start; text-align:left; background:var(--card);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; color:var(--text);
  padding:0; display:flex; flex-direction:column; align-items:stretch;
  transition:border-color .15s, transform .15s, box-shadow .15s; }
.icard:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.icard-ph { display:block; aspect-ratio:16/10; background:var(--bg-2); flex:none; }
.icard-ph img { width:100%; height:100%; object-fit:cover; }
.icard-t { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-weight:700; font-size:14px; margin:10px 12px 2px; line-height:1.2; min-height:2.4em; }
.icard-m { display:block; font-size:12px; color:var(--text-mut); margin:auto 12px 12px; }

/* ── Barra di progresso lettura ──────────────────────────────────────── */
.scroll-prog { position:fixed; top:0; left:0; width:100%; height:3px; z-index:150; transform:scaleX(0);
  transform-origin:left; background:linear-gradient(90deg, var(--accent-2), var(--accent)); will-change:transform; }

/* ── Collezioni curate ───────────────────────────────────────────────── */
.coll-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:14px; }
.coll-card { display:flex; flex-direction:column; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; cursor:pointer; color:var(--text); padding:0;
  transition:border-color .15s, transform .15s, box-shadow .15s; }
.coll-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.coll-ph { display:block; aspect-ratio:16/9; background:var(--bg-2); }
.coll-ph img { width:100%; height:100%; object-fit:cover; }
.coll-meta { padding:13px 15px 15px; display:flex; flex-direction:column; gap:4px; }
.coll-t { font-weight:800; font-size:16px; display:inline-flex; align-items:center; gap:8px; }
.coll-t .ico { color:var(--accent); width:18px; height:18px; }
.coll-d { color:var(--text-mut); font-size:13px; line-height:1.35; }
.coll-n { color:var(--accent); font-size:12px; font-weight:700; margin-top:2px; }
.va-link2 { background:none; border:none; color:var(--accent); font:inherit; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; padding:0; }
.va-link2 .ico { width:14px; height:14px; }

/* ── 'In sintesi' (hook narrativo) ───────────────────────────────────── */
.tldr { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; padding:14px 16px; margin:0 0 16px; }
.tldr-k { display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:800;
  font-size:12px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.tldr-k .ico { width:16px; height:16px; }
.tldr p { margin:0; font-size:15px; line-height:1.5; color:var(--text-dim); }
.tldr p b { color:var(--text); }
.tldr-check { margin-top:8px !important; font-size:13.5px !important; }
.tldr-check .ico { width:15px; height:15px; color:var(--accent); vertical-align:-2px; }

/* ── Come valutiamo: trust hero + badge autorità ─────────────────────── */
.trust-hero { display:flex; gap:14px; align-items:flex-start; background:var(--card);
  border:1px solid var(--good); border-radius:14px; padding:16px; margin:6px 0 18px; }
.trust-hero .th-ic { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--growth-rgb),.16); }
.trust-hero .th-ic .ico { width:22px; height:22px; color:var(--good); }
.trust-hero b { display:block; margin-bottom:4px; }
.trust-hero span { color:var(--text-dim); font-size:14px; line-height:1.5; }
.va-auth { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line); width:100%; background:none; border-left:none; border-right:none; border-bottom:none;
  color:var(--text-mut); font-size:12px; cursor:pointer; font-family:inherit; text-align:left; }
.va-auth .ico { width:14px; height:14px; color:var(--good); }
.va-auth span { margin-left:auto; color:var(--accent); font-weight:700; }
.va-auth:hover span { text-decoration:underline; }

/* ── Anchoring sul valore ────────────────────────────────────────────── */
.val-anchor { background:linear-gradient(180deg, rgba(var(--accent-rgb),.10), transparent 70%), var(--card);
  border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.va-hi { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.va-l { font-size:12.5px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.4px; }
.va-b { font-size:clamp(1.5rem,1.2rem+1.3vw,2.1rem); font-weight:800; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.va-typ { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:13.5px; color:var(--text-dim); }
.va-typ .ico { width:15px; height:15px; color:var(--good); vertical-align:-2px; margin-right:3px; }
.va-typ b { color:var(--text); }

/* ── Foto: skeleton shimmer + blur-up ────────────────────────────────── */
.cc-photo img, .dhero img, .intro-bg, .cat-feat img, .icard-ph img,
.rv-photo img, .rv-mini-ph img, .sim-ph img, .cmp-ph img {
  opacity:0; filter:blur(8px); transition:opacity .5s var(--ease), filter .6s var(--ease); }
.img-ld { opacity:1 !important; filter:none !important; }
.dhero.cine::before, .intro-hero::before, .cat-feat::before, .rv-photo::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, var(--bg-2) 25%, var(--card-2) 50%, var(--bg-2) 75%);
  background-size:220% 100%; animation:shimmer 1.5s linear infinite; }
.img-done::before { display:none; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ── Indice di sezione (dettaglio) ───────────────────────────────────── */
.anchor { display:block; height:0; scroll-margin-top:72px; }
.detail-nav { display:flex; gap:8px; overflow-x:auto; margin:2px 0 16px; padding-bottom:4px;
  scrollbar-width:none; }
.detail-nav::-webkit-scrollbar { display:none; }
.detail-nav button { flex:none; background:var(--card); border:1px solid var(--line); color:var(--text-dim);
  border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; }
.detail-nav button:hover { border-color:var(--accent); color:var(--text); }

/* ── CTA sticky nel dettaglio ────────────────────────────────────────── */
.dcta { position:fixed; left:50%; bottom:14px; transform:translateX(-50%) translateY(160%);
  width:min(680px, calc(100% - 24px)); display:flex; align-items:center; gap:10px; z-index:80;
  background:rgba(var(--dcta-backdrop-rgb),.86); backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--line); border-radius:16px; padding:10px 10px 10px 16px; box-shadow:var(--shadow);
  transition:transform .32s var(--ease); }
.dcta.show { transform:translateX(-50%) translateY(0); }
.dcta-name { flex:1; font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcta-share { flex:none; width:42px; height:42px; display:grid; place-items:center; padding:0; }
.dcta-share .ico { width:18px; height:18px; }
/* flex:0 1 auto invece di flex:none (min-width:0 sblocca lo shrink): a scala font
   1.30 il bottone non entrava più in .dcta e sforava il bordo — trovato dal gate
   [E] di tools/verify-layout.mjs, 22/9/2026, stessa classe delle altre correzioni
   qui sopra. A scala 1.0 c'è già spazio a sufficienza: nessun cambio visibile. */
.dcta-go { flex:0 1 auto; min-width:0; display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:12px;
  border:none; cursor:pointer; font-weight:700; font-size:14.5px; color:var(--on-accent);
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); transition:transform .12s var(--ease); }
.dcta-go:active { transform:scale(.96); }
.dcta-go.saved { background:var(--card-2); color:var(--good); box-shadow:inset 0 0 0 1px var(--good); }
.dcta-go .ico { width:17px; height:17px; }
@media (max-width:560px){ .dcta-name{ display:none; } }

/* ── Glossario ───────────────────────────────────────────────────────── */
.gloss { margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.gl-item { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px 15px; }
.gl-item dt { font-weight:700; color:var(--accent); font-size:15px; margin:0 0 4px; }
.gl-item dd { margin:0; color:var(--text-dim); font-size:14px; line-height:1.5; }

/* ── Onboarding primo accesso ────────────────────────────────────────── */
.onb { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px;
  background:rgba(var(--onb-backdrop-rgb),.72); backdrop-filter:blur(6px); animation:fade .25s ease both; }
.onb-card { background:var(--card); border:1px solid var(--accent); border-radius:20px; padding:26px 24px;
  max-width:440px; width:100%; text-align:center; box-shadow:var(--shadow); animation:introUp .4s var(--ease) both; margin:auto; flex:none; }
.onb-ic { width:60px; height:60px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.16); }
.onb-ic .ico { width:32px; height:32px; color:var(--accent); }
/* Il logo vero dell'app, non un'icona qualsiasi: è la prima schermata che si vede. */
.onb-logo { display:block; width:72px; height:72px; margin:0 auto 14px; border-radius:18px; }
.onb-card h3 { font-size:24px; margin:0 0 6px; }
.onb-card > p { color:var(--text-dim); margin:0 0 16px; }
.onb-list { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.onb-list li { display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--text-dim); line-height:1.45; }
.onb-list li .ico { width:20px; height:20px; flex:none; color:var(--accent); margin-top:1px; }
.onb-list b { color:var(--text); }
.onb-card .btn.primary { width:100%; }

/* Velo di scelta lingua al primo avvio (#langgate): nessuna prosa da tradurre,
   solo gli endonimi — deve leggersi anche da chi non capisce la lingua indovinata. */
.lg-title { font-size:15px; font-weight:600; color:var(--text-dim); letter-spacing:.01em; margin:0 0 16px; }
.lg-grid { display:flex; flex-direction:column; gap:10px; }
.lg-opt { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  min-height:52px; padding:12px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--card-2); color:var(--text); font-size:17px; text-align:left; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease; }
.lg-opt:hover { border-color:var(--accent); background:var(--bg-2); }
.lg-opt:active { transform:scale(.985); }
.lg-opt.sugg { border-color:var(--accent); }
.lg-name { font-weight:600; }
.lg-code { font-size:12px; color:var(--text-mut); letter-spacing:.08em; flex:none; }

/* ── Profilo da collezionista ────────────────────────────────────────── */
.persona { display:flex; align-items:center; gap:14px; background:var(--card-2); border:1px solid var(--line);
  border-radius:16px; padding:14px 16px; margin:6px 0 12px; }
.persona-ic { flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.15); }
.persona-ic .ico { width:24px; height:24px; color:var(--accent); }
.persona-txt { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.persona-k { font-size:11px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.5px; }
.persona-txt b { font-size:18px; color:var(--accent); }
.persona-sub { font-size:13px; color:var(--text-dim); }
.persona-share { flex:none; width:40px; height:40px; display:grid; place-items:center; background:none;
  border:1px solid var(--line); border-radius:10px; color:var(--text-dim); cursor:pointer; transition:.15s; }
.persona-share:hover { border-color:var(--accent); color:var(--accent); }
.persona-share .ico { width:17px; height:17px; }

/* ── Il mio garage: hero collezione (endowment) ──────────────────────── */
.garage-hero { background:linear-gradient(180deg, rgba(var(--accent-rgb),.14), transparent 75%), var(--card);
  border:1px solid var(--accent); border-radius:18px; padding:20px; text-align:center; margin:6px 0 4px; }
.gh-label { display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:800;
  font-size:12.5px; text-transform:uppercase; letter-spacing:1px; }
.gh-label .ico { width:16px; height:16px; }
.gh-value b { display:block; margin:6px 0 8px; font-size:clamp(2.2rem,1.6rem+3vw,3.4rem); font-weight:800;
  color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-1px; line-height:1; }
.gh-sub { font-size:14px; color:var(--text-dim); }
.gh-sub b { color:var(--text); }
.gh-note { font-size:11.5px; color:var(--text-mut); margin:10px 0 0; }

/* ── Filone svizzero: veterani + import ──────────────────────────────── */
.vet-b { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:13px; font-weight:700; }
.vet-b .ico { width:15px; height:15px; }
.vet-b.ok { background:linear-gradient(135deg,var(--good),var(--good-deep)); color:var(--on-good); }
.vet-b.part { background:rgba(var(--accent-rgb),.18); color:var(--accent); }
.vet-b.no { background:var(--bg-2); color:var(--text-mut); }
.imp-form { margin-bottom:4px; }
.imp-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:14px; color:var(--text-dim); border-bottom:1px solid var(--line); }
.imp-row b { color:var(--text); font-variant-numeric:tabular-nums; }
.imp-row.tot { font-weight:700; color:var(--text); }
.imp-row.tot.big { border-bottom:none; padding-top:10px; }
.imp-row.tot.big b { color:var(--accent); font-size:18px; }
#imp-origin { min-height:24px; padding:6px 8px; }

/* ── Cosa ti compra il budget (slider → condizione) ──────────────────── */
.bcbox { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.bc-track { height:8px; border-radius:999px; margin-bottom:-16px; position:relative; top:0;
  background:linear-gradient(90deg, var(--budget-low), var(--accent-2), var(--accent)); opacity:.35; }
.bc-trackfill { height:100%; border-radius:999px; width:50%;
  background:linear-gradient(90deg, var(--accent-2), var(--accent)); }
/* height 24 (non 8): il target di tocco del native range deve arrivare a 24px
   (WCAG 2.5.8) senza spostare la barra visibile — il thumb (24px) restava già
   centrato sulla barra tramite il margin-top negativo qui sotto, quindi la
   sola area invisibile attorno cresce, nessun pixel visibile si sposta. */
.bcbox input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent;
  margin:0 0 6px; position:relative; z-index:2; cursor:pointer; }
.bcbox input[type=range]::-webkit-slider-runnable-track { height:8px; background:transparent; }
.bcbox input[type=range]::-moz-range-track { height:8px; background:transparent; }
.bcbox input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-8px;
  border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:var(--shadow); cursor:grab; }
.bcbox input[type=range]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--accent);
  border:3px solid var(--bg); box-shadow:var(--shadow); cursor:grab; }
.bc-scale { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--text-mut);
  text-transform:uppercase; letter-spacing:.3px; line-height:1.5; }
/* Figlio flex senza min-width:0: il <b> col valore CHF (unbreakable) sfora il bordo a
   scala font 1.30 (banco collaudo-varianti-tutte.mjs [E], 22/9/2026). */
.bc-scale span { min-width:0; overflow-wrap:anywhere; }
.bc-scale span:nth-child(2) { text-align:center; }
.bc-scale span:last-child { text-align:right; }
.bc-scale b { color:var(--text-dim); font-size:12.5px; }
.bc-res { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.bc-amt { font-size:22px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.bc-tier { display:inline-flex; align-items:center; gap:7px; margin-top:6px; padding:5px 12px; border-radius:999px;
  font-size:14px; border:1px solid var(--line); background:var(--bg-2); }
.bc-tier .ico { width:16px; height:16px; }
.bc-tier.t-warn { color:var(--bad); border-color:rgba(var(--trend-down-rgb),.4); }
.bc-tier.t-lo { color:var(--text-dim); }
.bc-tier.t-mid { color:var(--accent); }
.bc-tier.t-good { color:var(--good); border-color:rgba(var(--growth-rgb),.4); }
.bc-tier.t-top { color:var(--accent); background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),transparent); border-color:var(--accent); }
.bc-desc { margin:10px 0 0; font-size:14px; color:var(--text-dim); line-height:1.5; }

/* ── Confronto dimensioni: barre + ingombro ──────────────────────────── */
.sizebox { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.dbar { margin-bottom:14px; }
.dbar-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:6px; }
/* 12px, non 13: alzarla peggiorava il troncamento dell'etichetta. Il box era 78px fissi e
   troncava a font-scale alto (misurato: 92>78 a 1,30). Ciò che chiude il difetto è
   `flex-shrink:0`, NON il min-width: da flex item la label veniva compressa fino al
   min-width e tagliata, ora la sua larghezza segue il testo renderizzato e la riga va a
   capo (.dbar-h ha flex-wrap). Il min-width resta solo ad allineare le tre etichette a
   scala normale. Attenzione: un min-width in `em` NON basta — sul device il font-scale di
   sistema non rientra nel calcolo delle lunghezze em (misurato sul telefono: fontSize
   10,8px ma min-width:6.5em risolta a 78px, cioè 6,5×12). Nel simulatore sembrava
   funzionare perché lì il font-scale è scritto come style.fontSize inline. */
.dbar-lab { font-size:12px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.4px; min-width:6.5em; flex-shrink:0; }
.dbar-h b { font-size:16px; color:var(--text); font-variant-numeric:tabular-nums; }
.dbar-d { margin-left:auto; font-size:13px; color:var(--text-mut); }
.dbar-d.up { color:var(--accent); }
.dbar-d.dn { color:var(--good); }
.dbar-track { position:relative; height:12px; background:var(--bg-2); border-radius:999px; overflow:hidden; }
.dbar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.dbar-ref { position:absolute; top:-3px; width:3px; height:18px; background:var(--text-dim); border-radius:2px;
  transform:translateX(-1px); box-shadow:0 0 0 2px var(--card); }
.fp-wrap { margin:16px 0 4px; }
.fp-svg { width:100%; height:auto; display:block; }
.fp-park { fill:var(--bg-2); stroke:var(--text-mut); stroke-width:10; stroke-dasharray:30 22; }
.fp-car { fill:rgba(var(--accent-rgb),.55); stroke:var(--accent); stroke-width:8; }
.fp-t { fill:var(--text-mut); font-size:150px; font-family:inherit; }

/* ── Icone SVG line ──────────────────────────────────────────────────── */
.ico { width:1.08em; height:1.08em; display:inline-block; vertical-align:-0.16em; flex-shrink:0; stroke:currentColor; }
.ico.fill { fill:currentColor; stroke:none; }
.ico-hero { width:54px; height:54px; stroke-width:1.4; color:var(--accent); vertical-align:middle; }
.mc-ico .ico { width:30px; height:30px; }
.sec-title .ico, .yk .ico, .glabel .ico, .flabel .ico, .chk-h .ico { color:var(--accent); }

/* ── Grafico valore nel tempo (classiche) ────────────────────────────── */
.depchart .big { fill: var(--accent); }
.depchart .big.now { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.depchart .big.low { fill: var(--text-mut); }
.chart-cap .gain { color: var(--good); font-weight: 700; }

/* ── Grafico valore: etichette Y, minimo, cono d'incertezza ──────────── */
.depchart .yl { fill: var(--text-mut); font-size: 12.5px; }
.depchart .minlbl { fill: var(--text-mut); font-size: 12px; }
.cvcone { fill: var(--accent); opacity: 0.16; stroke: none; }

/* ════════════════════════════════════════════════════════════════════════
   REFINEMENT PASS — polish coeso (ambra scuro): profondità, motion, focus.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);  /* anello focus solido, contrasto ≥3:1 (WCAG 2.4.11) */
  --ease: cubic-bezier(.4,0,.2,1);
  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 8px 24px rgba(0,0,0,.42);
  --sh-3: 0 18px 48px rgba(0,0,0,.52);
  --shadow: 0 10px 34px rgba(0,0,0,.46);
}
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(125% 70% at 50% -12%, var(--bg-glow) 0%, var(--bg) 56%) no-repeat fixed var(--bg);
  text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; letter-spacing: .1px;
}
::selection { background: rgba(var(--accent-rgb),.30); color: rgb(var(--sheen-rgb)); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--ring);
}
/* Il titolo della schermata prende il focus a ogni render (annuncio per screen reader,
   `announceScreen`/`skipToContent`): l'anello gli si incolla addosso e sembra un bordo del
   testo. Qui resta visibile — serve a chi naviga da tastiera — ma staccato. */
#app h1:focus-visible, #app h2:focus-visible {
  box-shadow: none; outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px;
}
/* `.no-ring` la mette `announceScreen()` sul focus che serve solo all'annuncio, e la toglie
   `skipToContent()`: da tastiera l'anello serve, dopo un tocco è rumore. */
#app h1.no-ring:focus-visible, #app h2.no-ring:focus-visible { outline: none; }
/* Solo per screen reader: nascosto visivamente, letto dalle tecnologie assistive */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip-link: invisibile finché non riceve focus da tastiera, poi visibile sopra la topbar */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--card-2); color: var(--text); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: top .15s var(--ease);
}
.skip-link:focus-visible { top: calc(10px + env(safe-area-inset-top)); }

/* Entrata schermate */
.hero, .q-step, .results, .detail, .res-head + *, .cmp-wrap { animation: fadeUp .30s var(--ease) both; }
@keyframes fadeUp { from { opacity:0; transform: translateY(9px); } to { opacity:1; transform:none; } }

/* Header glass */
.topbar {
  background: rgba(var(--topbar-glass-rgb),.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(var(--topbar-border-rgb),.55);
}
.brand { cursor: pointer; }
.ghost-btn, .act, .dchip, .seg button, .freset, .cat-sort, .filters-toggle, .guide-toggle,
.cat-search, .field select, .le-form input, .btn, .cta, .ccard, .simcard, .mode-card, .card,
.gen, .opt, .to-col { transition: border-color .2s var(--ease), background .2s var(--ease),
  box-shadow .2s var(--ease), transform .12s var(--ease), color .2s var(--ease), filter .15s var(--ease); }

/* Tipografia: tracking stretto sui titoli grandi */
.hero h1, .q-title, .res-head h1, .res-head h2, .detail h1, .detail h2, .card h3, .mc-title { letter-spacing: -.02em; }

/* Profondità + lift su hover (desktop) */
.card:hover, .ccard:hover, .simcard:hover, .mode-card:hover, .gen:hover { box-shadow: var(--sh-2); }
.ccard:hover, .simcard:hover, .mode-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.opt:hover { border-color: var(--accent); box-shadow: var(--sh-1); }
.opt.sel { box-shadow: var(--ring); }

/* Bottoni primari: profondità ambra + feedback */
.btn.primary, .cta {
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),.20);
}
.btn.primary:not(:disabled):hover, .cta:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(var(--accent-rgb),.30); }
.btn.primary:not(:disabled):active, .cta:active { transform: translateY(0) scale(.99); }
.act:hover, .ghost-btn:hover, .freset:hover, .cat-sort:hover { border-color: var(--accent-2); color: var(--text); }
.dchip:hover, .seg button:hover { transform: translateY(-1px); }

/* Input: anello di focus coerente */
.cat-search:focus, .field select:focus, .le-form input:focus { box-shadow: var(--ring); border-color: var(--accent); }

/* Modalità: unifico sull'ambra (via icone si distinguono), glow su hover */
.mode-card.alt:hover { border-color: var(--accent); }
.mode-card.alt .mc-sub { color: var(--accent); }
.mc-ico { color: var(--accent); }

/* Sezioni: barretta-accento per struttura visiva */
.sec-title { display: flex; align-items: center; gap: 9px; }
.sec-title::before { content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent); flex: none; }

/* Medaglie risultati (①②③) e dettagli */
.medal { color: var(--accent); font-weight: 800; }
.matchpct { letter-spacing: -.02em; }

/* Chip & badge: tondeggianti e nitidi */
.chip, .tbadge, .ab, .gb, .ptier { letter-spacing: .1px; }
.cat-search { box-shadow: var(--sh-1) inset; }

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP — layout adatto a schermi larghi (mobile resta invariato)
   ════════════════════════════════════════════════════════════════════════ */
/* Griglie che riempiono la larghezza disponibile */
.clist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 282px), 1fr)); }
.rgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 332px), 1fr)); align-items: start; }
.rgrid .card { margin-bottom: 0; }

@media (min-width: 1024px) {
  #app { max-width: 1280px; padding-left: 32px; padding-right: 32px; }

  /* Schermate "di lettura": centrate e di larghezza confortevole */
  .progress, .q-step, .nav-row { max-width: 720px; margin-inline: auto; }
  .hero { max-width: 940px; margin-inline: auto; padding-top: 40px; }
  .mode-cards { max-width: 1040px; margin-inline: auto; gap: 18px; }
  .detail { max-width: 1000px; margin-inline: auto; }

  /* Home: hero ampio ma non invadente (le scelte restano visibili senza scroll) */
  .intro-hero { min-height: clamp(300px, 40vh, 420px); }
  .intro-hero-in { max-width: 840px; padding: 34px 46px; }

  .hero h1 { font-size: 40px; }
  .hero p { font-size: 17px; max-width: 560px; }
  .ico-hero { width: 64px; height: 64px; }

  /* Funnel: opzioni su due colonne */
  .options { grid-template-columns: 1fr 1fr; }

  /* Controlli catalogo un filo più ariosi */
  .cat-controls, .decade-bar { max-width: 100%; }
}

/* Contenitori a due colonne (11/10/2026): sul telefono non esistono — `display:contents`
   lascia i figli nel flusso di prima; da 1024 px diventano colonne. */
.cat-main, .detail-side, .detail-main { display: contents; }

@media (min-width: 1024px) {
  /* Catalogo: ricerca e filtri in una colonna fissa a sinistra, auto a destra.
     Prima l'11/10 a 1440×900: 0 auto sopra la piega, filtri a tutta larghezza. */
  .cat-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .cat-page > h1, .cat-page > .sub { grid-column: 1 / -1; }
  .cat-page > .cat-filters-acc { grid-column: 1; position: sticky; top: 84px; margin: 0;
    max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; }
  .cat-page > .cat-main { display: block; grid-column: 2; min-width: 0; }
  .cat-page .cat-filters-body { display: flex; flex-direction: column; }
  .cat-page .cat-controls { order: -1; margin-bottom: 12px; }
  .cat-page .cat-themes { margin-top: 0; }
  /* nella griglia i margini non collassano: titolo e sottotitolo restano vicini come sul telefono */
  .cat-page > h1 { margin-bottom: 4px; }
  /* una sola barra di scorrimento, quella della pagina */
  .cat-page .clist-box { max-height: none; overflow: visible; }

  /* Scheda: foto, azioni e indice in una colonna che resta ferma; il contenuto scorre a destra */
  .detail { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 32px; align-items: start; }
  .detail-side { display: block; position: sticky; top: 84px; }
  .detail-main { display: block; min-width: 0; }
  .detail-side .dhero.cine { margin-top: 0; max-height: none; }
  .detail-side .detail-nav { flex-wrap: wrap; overflow: visible; }
  .detail-main > .detail-simple:first-child, .detail-main > :first-child { margin-top: 0; }
}

/* Schermi larghi: allarga il contenitore così non resta una striscia centrale */
@media (min-width: 1440px) { #app { max-width: 1480px; } }
@media (min-width: 1720px) { #app { max-width: 1640px; } }

/* Richiami NHTSA + crediti fonti (integrazione fonti live) */
.recall-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.recall-list li { background: rgba(var(--sheen-rgb),.03); border: 1px solid rgba(var(--sheen-rgb),.07); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.recall-list .rc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; }
.recall-list .rc-date { font-size: 12px; opacity: .6; white-space: nowrap; }
.recall-list .rc-txt { font-size: 13px; opacity: .85; margin-top: 4px; line-height: 1.4; }
.recall-list .rc-rem { font-size: 13px; margin-top: 6px; opacity: .9; }
.credits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.credits-list li { font-size: 13px; opacity: .9; }
.credits-list a { color: inherit; }
.credits-list .cr-note { opacity: .6; }

/* Banner "match rilassato" (nessuna auto rientra in tutti i criteri) */
.relax-actions { margin-top: 10px; font-size: 13px; opacity: .85; }
.relax-actions .back-link { display: inline; }

/* Bundle "Verifica & proteggiti" (Onda 1 — reso solo se il flag è acceso) */
.trust-grid { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 720px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-card { background: rgba(var(--sheen-rgb),.03); border: 1px solid rgba(var(--sheen-rgb),.08); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.trust-card .tc-h { font-weight: 600; }
.trust-card .tc-d { font-size: 13px; opacity: .82; line-height: 1.4; flex: 1; }
.trust-card .act.go { text-align: center; text-decoration: none; }
.trust-card .tc-alt { font-size: 12px; opacity: .7; text-align: center; color: inherit; text-decoration: underline; }

/* Consumo reale vs WLTP (Onda 1 — gated) */
.rwc-rows { display: grid; gap: 6px; margin-bottom: 8px; }
.rwc-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.rwc-row span { color: var(--text-mut); }
.rwc-row.real b { color: var(--accent); }
.rwc-bar { height: 8px; background: rgba(var(--sheen-rgb),.06); border-radius: 5px; overflow: hidden; }
.rwc-bar span { display:block; height: 100%; background: var(--text-mut); border-radius: 5px; }
.fin-grid .trust-card { border-color: rgba(var(--sheen-rgb),.08); }

/* ── Guida all'acquisto (schermata + link) ───────────────────────────── */
.guide-link {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 18px 0 6px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); padding: 14px 16px; cursor: pointer; font-size: 15px; text-align: left;
}
.guide-link:hover { border-color: var(--accent-2); }
.guide-link .ico { color: var(--accent); width: 22px; height: 22px; flex: none; }
.guide-link span:nth-of-type(1) { flex: 1; }
.guide-link .gl-arrow { color: var(--accent); font-weight: 700; }
/* Ripresa quiz: sta sopra le mode-card e deve leggersi come un invito, non come
   una terza voce di menu — bordo d'accento, senza rubare la scena alla scelta. */
.guide-link.resume { border-color: var(--accent); margin: 6px 0 2px; }
.guide h1, .guide h2 { font-size: 24px; display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; }
.guide h1 .ico, .guide h2 .ico { color: var(--accent); width: 26px; height: 26px; }
.guide .sub { color: var(--text-dim); margin: 0 0 16px; }
.guide-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden; }
.guide-sec > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
  list-style: none; font-weight: 600; user-select: none;
}
.guide-sec > summary::-webkit-details-marker { display: none; }
.guide-sec .gs-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card-2);
  color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 13px; border: 1px solid var(--line); }
.guide-sec .gs-ic { color: var(--accent); display: inline-flex; }
.guide-sec .gs-ic .ico { width: 20px; height: 20px; }
.guide-sec .gs-t { flex: 1; }
.guide-sec .gs-chev { color: var(--text-mut); transition: transform .2s ease; }
.guide-sec[open] .gs-chev { transform: rotate(180deg); }
.guide-sec .gs-body { padding: 0 16px 16px; }
.guide-sec .gs-lead { color: var(--text-dim); font-size: 14px; margin: 0 0 12px; }
.guide-sec .gs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guide-sec .gs-list li { display: grid; gap: 2px; padding-left: 26px; position: relative; font-size: 14px; }
.guide-sec .gs-list li b { color: var(--text); font-weight: 600; }
.guide-sec .gs-list li span { color: var(--text-mut); line-height: 1.45; }
/* marcatori per tipo di sezione */
.guide-sec .gs-list li::before { position: absolute; left: 0; top: 1px; font-size: 14px; line-height: 1.2; }
.guide-sec .k-docs li::before, .guide-sec .k-check li::before { content: "✓"; color: var(--good); font-weight: 800; }
.guide-sec .k-ask li::before { content: "?"; color: var(--accent); font-weight: 800; }
.guide-sec .k-step li::before { content: "›"; color: var(--accent); font-weight: 800; font-size: 17px; top: -1px; }
.guide-sec .k-flag li::before { content: "!"; color: var(--bad); font-weight: 800; }
.guide-sec .gs-list li.flag b { color: var(--bad); }
.guide-sec .gs-list li.flag::before { content: "!"; color: var(--bad); }

/* Velo di caricamento dati classiche (loadClassics) */
.cls-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 60vh; color: var(--text-mut); }
.cls-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--card-2); border-top-color: var(--accent); animation: cls-spin .8s linear infinite; }
@keyframes cls-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cls-spin { animation-duration: 2s; } }

/* ── Quiz v2: selettore cantone + "come ho scelto" ── */
.q-canton { margin: 14px 0 4px; }
.canton-select { width: 100%; max-width: 420px; padding: 12px 14px; border-radius: 12px;
  background: var(--card, var(--card-fallback)); color: inherit; border: 1px solid rgba(var(--sheen-rgb),.14); font-size: 1rem; }
.q-exact { width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--card, var(--card-fallback)); color: inherit; border: 1px solid rgba(var(--sheen-rgb),.14); font-size: 1rem; }
.how-chosen { margin: 10px 0 14px; border: 1px solid rgba(var(--sheen-rgb),.10); border-radius: 12px;
  background: rgba(var(--sheen-rgb),.03); padding: 4px 12px; }
.how-chosen summary { cursor: pointer; padding: 8px 2px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.how-chosen .how-body { padding: 2px 2px 10px; font-size: .92rem; opacity: .92; }
.how-chosen .how-body p { margin: 6px 0; }
.how-chosen .how-relax { color: var(--warn, var(--warn-fallback)); }
.how-chosen .how-note { opacity: .7; font-size: .85rem; }

/* ── Sezioni a fisarmonica nella scheda auto (30/07/2026) ─────────────────────
   Misurato a 320×661: la scheda di una classica era 16'877px = 25,5 schermate,
   con 20 sezioni sempre aperte. Stesso meccanismo di .guide-sec (details/summary),
   con l'aspetto del vecchio .sec-title nel <summary> e il numero chiave (.dsec-b)
   in chiaro accanto al titolo, così chiudere non nasconde il verdetto. */
.dsec { border-bottom: 1px solid var(--line); }
.dsec > summary { display: flex; align-items: center; gap: 10px; padding: 15px 2px;
  cursor: pointer; list-style: none; user-select: none; }
.dsec > summary::-webkit-details-marker { display: none; }
.dsec-t { flex: 1; font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--accent); font-weight: 700; }
.dsec-b { font-weight: 800; font-size: 14px; color: var(--text); white-space: nowrap; }
.dsec-chev { flex: none; color: var(--text-mut); transition: transform .2s var(--ease); }
.dsec[open] > summary .dsec-chev { transform: rotate(180deg); }
.dsec-body { padding: 0 0 16px; }
.dsec-body > .sec-title { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .dsec-chev { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .qchip, .opt, .seg button { transition: none; }
  .qchip:active, .opt:active, .seg button:active { transform: none; }
}

/* Pannello impostazioni (dimensione testo + lingua). Riusa il guscio dell'onboarding. */
.setts-card { text-align: left; }
.setts-row { margin: 0 0 16px; }
.setts-row .glabel { margin-bottom: 8px; }
.setts-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-chip { min-width: 52px; min-height: 44px; font-weight: 700; }
.setts-card .lang-sel { width: 100%; text-align: left; }