.syi-cfg{
  --a:#0071e3;--a-soft:#f0f7ff;--ink:#1d1d1f;--mut:#6e6e73;--line:#d2d2d7;--bg:#f5f5f7;--ok:#1a7f37;
  --stage-1:#ffffff;--stage-2:#e6e7eb;--radius:16px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08);
  max-width:1000px;margin:2rem auto;color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
}
.syi-cfg *{box-sizing:border-box}

.syi-cfg-crumb{display:inline-block;font-size:.85rem;color:var(--mut);text-decoration:none;margin-bottom:.8rem}
.syi-cfg-crumb:hover{color:var(--a)}

.syi-cfg-bar{height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.syi-cfg-bar>i{display:block;height:100%;background:var(--a);transition:width .3s ease}
.syi-cfg-step{font-size:.85rem;color:var(--mut);margin:.5rem 0 1.2rem}
.syi-cfg-gen{display:inline-block;margin-left:.55rem;padding:.1rem .55rem;border-radius:999px;background:var(--a-soft);color:var(--a);font-weight:600;font-size:.78rem;vertical-align:.02em}
.syi-cfg h3{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin:.2rem 0 .35rem;color:var(--ink)}
.syi-cfg-qhint{font-size:.9rem;line-height:1.5;color:var(--mut);margin:0 0 1.1rem}

.syi-cfg-grid{display:grid;gap:24px}
@media(min-width:820px){.syi-cfg-grid{grid-template-columns:320px 1fr}}

/* ---- pannello sinistro: foto oppure anteprima SVG ---- */
.syi-cfg-hero{
  position:sticky;top:20px;align-self:start;
  background:radial-gradient(120% 90% at 50% 0%,var(--stage-1),var(--stage-2));
  border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;
}
@media(max-width:819px){.syi-cfg-hero{position:static}}
.syi-cfg-hero img{max-width:100%;height:auto;max-height:320px;object-fit:contain}
.syi-cfg-hero.svg-mode{padding:16px}
/* nessuna selezione: anteprima vuota */
.syi-cfg-hero.empty{display:flex;align-items:center;justify-content:center;min-height:210px}
.syi-cfg-hero.empty img{display:none}
.syi-cfg-emptymsg{display:none}
.syi-cfg-hero.empty .syi-cfg-emptymsg{display:block;color:var(--mut);font-size:.85rem;line-height:1.5;max-width:190px;text-align:center}
.syi-cfg-stage{display:flex;gap:14px;justify-content:center;align-items:flex-end}
.syi-cfg-stage figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.syi-cfg-stage svg{width:100%;height:auto;max-width:132px;overflow:visible}
/* passi 5-7 (fronte/ghiera/tasto): solo il fronte, un po' piu grande — viewBox invariato, proporzioni intatte */
.syi-cfg-stage.front-only figure:nth-of-type(2){display:none}
.syi-cfg-stage.front-only svg{max-width:184px}
/* passo 8+ (scocca posteriore/spessore/riepilogo): il retro usa la foto reale del pezzo, il fronte resta l'SVG */
.syi-cfg-stage .syi-cfg-backimg{display:none}
.syi-cfg-stage.back-photo{align-items:center}
.syi-cfg-stage.back-photo figure:nth-of-type(2) svg{display:none}
/* la foto del retro resa alla stessa altezza visibile dell'iPod nell'SVG del fronte */
.syi-cfg-stage.back-photo .syi-cfg-backimg{display:block;width:auto;height:auto;max-height:202px;max-width:150px;object-fit:contain}
.syi-cfg-stage figcaption{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.syi-cfg-stage .ipod-fill{transition:fill .18s ease,fill-opacity .18s ease}
@media(prefers-reduced-motion:reduce){.syi-cfg-stage .ipod-fill{transition:none}}
.syi-cfg-stage[data-finish="matte"] .sheen{opacity:.5}
.syi-cfg-stage[data-finish="gloss"] .sheen{opacity:1}
.syi-cfg-stage[data-finish="matte"] .streak{opacity:0}
.syi-cfg-stage[data-finish="gloss"] .streak{opacity:.5}
.syi-cfg-stage:not([data-clear="1"]) .internals{opacity:0}
.syi-cfg-stage[data-clear="1"] .internals{opacity:1}
.syi-cfg-stage[data-clear="1"] #f-housing{fill-opacity:.08}
.syi-cfg-stage[data-clear="1"] .sheen{opacity:.12}
.syi-cfg-stage[data-clear="1"] .streak{opacity:0}
.syi-cfg-stage[data-clear="1"] #f-ui{opacity:0}
/* scocca trasparente: ghiera e tasto restano del colore scelto, solo un po' traslucidi */
.syi-cfg-stage[data-clear="1"] #f-wheel{fill-opacity:.86}
.syi-cfg-stage[data-clear="1"] #f-btn{fill-opacity:.92}
.syi-cfg #b-shade{fill:var(--b-shade,rgba(0,0,0,.3))}
.syi-cfg #b-band{opacity:var(--b-band-o,.5)}
.syi-cfg #b-dark{opacity:var(--b-dark-o,.5)}
.syi-cfg #b-hot{opacity:var(--b-hot-o,.85)}
.syi-cfg #b-blob{opacity:var(--b-blob-o,.38)}
.syi-cfg #b-foot{opacity:var(--b-foot-o,.12)}
.syi-cfg #b-diag{opacity:var(--b-diag-o,.16)}

/* ---- opzioni ---- */
.syi-cfg-opts{display:flex;flex-direction:column;gap:14px}
.syi-cfg-card{
  display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;cursor:pointer;background:#fff;color:var(--ink);font:inherit;text-align:left;
  transition:border-color .15s,background .15s;
}
.syi-cfg-card:hover{border-color:var(--a);background:var(--a-soft)}
.syi-cfg-card[aria-pressed="true"]{border-color:var(--a);background:var(--a-soft)}
.syi-cfg-card img{width:76px;height:76px;object-fit:contain;flex:0 0 auto;background:#fafafa;border-radius:10px}
.syi-cfg-card .ct{display:flex;flex-direction:column;gap:5px;min-width:0}
.syi-cfg-card .t{font-weight:600;color:var(--ink);line-height:1.3}
.syi-cfg-card .d{font-size:.85rem;color:var(--mut);line-height:1.45}
.syi-cfg-card.out{opacity:.45;cursor:not-allowed}
.syi-cfg-card.out:hover{border-color:var(--line);background:#fff}
.syi-cfg-card.out .d{color:var(--mut)}

.syi-cfg-hint{text-align:center;color:var(--mut);padding:2rem 0}
.syi-cfg-need{background:#fdeaec;color:#c1121f;font-weight:500;font-size:.9rem;border-radius:10px;padding:.7rem .9rem;margin-bottom:.5rem}
.syi-cfg-thicknote{background:var(--bg);border-radius:12px;padding:1rem 1.1rem;font-size:.9rem;line-height:1.5;margin-top:.8rem}

/* ---- nav ---- */
.syi-cfg-nav{
  position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:12px;padding:.9rem 0;margin-top:1.5rem;border-top:1px solid var(--line);
}
.syi-cfg-est{margin-left:auto;text-align:right;font-size:.78rem;color:var(--mut)}
.syi-cfg-est b{display:block;font-size:1.2rem;color:var(--ink)}
.syi-cfg button.nav{border:0;border-radius:99px;padding:.7rem 1.4rem;font:inherit;font-weight:500;cursor:pointer;background:var(--a);color:#fff}
.syi-cfg button.nav.ghost{background:transparent;color:var(--a);box-shadow:inset 0 0 0 1px var(--a)}
.syi-cfg button.nav[disabled]{opacity:.4;cursor:not-allowed}
.syi-cfg button.nav:hover:not([disabled]){filter:brightness(.95)}

/* ---- riepilogo ---- */
.syi-cfg-sum{display:flex;flex-direction:column;gap:8px}
.syi-cfg-sum .r{display:flex;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:.92rem}
.syi-cfg-sum .r span:first-child{color:var(--mut)}
.syi-cfg-sum .r span:last-child{font-weight:600;text-align:right;color:var(--ink)}
.syi-cfg-sum .tot{border-color:var(--a);background:var(--a-soft)}

.syi-cfg-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1rem}
@media(max-width:560px){.syi-cfg-form{grid-template-columns:1fr}}
.syi-cfg-form label{font-size:.8rem;font-weight:600;display:block;margin-bottom:4px;color:var(--ink)}
.syi-cfg-form input,.syi-cfg-form textarea,.syi-cfg-form select{width:100%;padding:.7rem;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff}
.syi-cfg-form .full{grid-column:1/-1}
.syi-cfg-consent{grid-column:1/-1;font-size:.82rem;color:var(--mut);display:flex;gap:.5rem;align-items:flex-start}
.syi-cfg-result{border-radius:12px;padding:1rem;margin-top:1rem;font-weight:500;display:none}
.syi-cfg-result.ok{display:block;background:#e7f6ec;color:var(--ok)}
.syi-cfg-result.ko{display:block;background:#fdeaec;color:#c1121f}
.syi-cfg-note{font-size:.75rem;color:var(--mut);margin-top:1rem}
.syi-cfg input,.syi-cfg textarea,.syi-cfg select{font-size:16px}

/* ---- mobile ---- */
@media(max-width:819px){
  .syi-cfg{margin:1rem auto}
  .syi-cfg h3{font-size:1.1rem;margin:.2rem 0 .3rem}
  .syi-cfg-qhint{font-size:.85rem;margin:0 0 .9rem}
  .syi-cfg-hero{padding:14px}
  .syi-cfg-hero:not(.svg-mode) img{max-height:190px}
  .syi-cfg-stage{gap:10px}
  .syi-cfg-stage svg{max-width:118px}
  .syi-cfg-stage.front-only svg{max-width:158px}
  .syi-cfg-stage.back-photo .syi-cfg-backimg{max-height:180px;max-width:132px}
  .syi-cfg-card{padding:12px;gap:12px}
  .syi-cfg-card img{width:58px;height:58px}
  .syi-cfg-card .t{font-size:.95rem}
  .syi-cfg-thicknote{font-size:.86rem;padding:.85rem}
  /* barra azioni ancorata in basso: i tasti Avanti/Indietro sempre a portata, senza scorrere */
  .syi-cfg-nav{
    position:sticky;bottom:0;z-index:30;
    flex-wrap:wrap;gap:.35rem .6rem;margin-top:1rem;
    background:#fff;border-top:1px solid var(--line);
    padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px rgba(0,0,0,.06);
  }
  .syi-cfg-est{order:-1;width:100%;text-align:left;margin:0;font-size:.72rem}
  .syi-cfg-est b{display:inline;font-size:1rem;margin-left:.4rem}
  .syi-cfg button.nav{padding:.7rem 1.15rem;min-height:44px}
  .syi-cfg button.nav.ghost{order:0}
  .syi-cfg button.nav.b-next{order:1;margin-left:auto}
  .syi-cfg-crumb{margin-bottom:.6rem}
  .syi-cfg-form{gap:10px}
}
@media(max-width:400px){
  .syi-cfg-stage svg{max-width:104px}
  .syi-cfg-stage.front-only svg{max-width:140px}
  .syi-cfg-stage.back-photo .syi-cfg-backimg{max-height:158px;max-width:116px}
  .syi-cfg-card{flex-direction:row}
}