:root{--bg:#0a0b0d;--bg2:#121419;--bg3:#171a20;--line:#23262e;--line2:#31353f;--ink:#eef0f3;--mut:#9aa0aa;--mut2:#6b7180;--red:#e23a2e;--red2:#ff6a3d;--grad:linear-gradient(90deg,#e23a2e,#ff6a3d);--glow:rgba(226,58,46,.5);--ok:#22c55e;--warn:#f5a524;--blue:#5b8cff}
*{box-sizing:border-box;margin:0;padding:0}
/* BLOCCO orizzontale su mobile: il dito può muovere SOLO su/giù (niente swipe laterale né bordi blu) */
html{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;min-height:100vh;overflow-x:clip;overscroll-behavior-x:none;width:100%;max-width:100%}
a{color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:30;background:rgba(10,11,13,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;font-weight:800;font-size:20px;letter-spacing:.01em;color:var(--ink);text-transform:uppercase}
.brand img{width:74px;height:74px;object-fit:contain;flex:0 0 auto}
.brand b{color:var(--red);font-weight:inherit;font-size:inherit}
.brand small{display:block;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;letter-spacing:.34em;color:var(--mut);font-weight:500;margin-top:1px;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:11px 20px;font-weight:700;font-size:14px;cursor:pointer;transition:.18s;font-family:inherit}
.btn.p{background:var(--grad);color:#fff;box-shadow:0 6px 20px -8px var(--glow)}
.btn.p:hover{transform:translateY(-1px)}
.btn.g{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.g:hover{border-color:var(--red)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.sm{padding:8px 14px;font-size:13px}
.navlink{font-size:14px;color:var(--mut);cursor:pointer;font-weight:600;position:relative}
.navlink:hover,.navlink.on{color:var(--ink)}
.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;margin-left:5px;vertical-align:middle}
main{padding:30px 0 90px}
.view{display:none;animation:fade .35s}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
h1{font-size:28px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
h2{font-size:20px;font-weight:800;margin-bottom:14px}
.sub{color:var(--mut);margin-bottom:24px;max-width:62ch}
.kick{display:inline-block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:8px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:24px}
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:10px 0 24px}
.buy-card{display:flex;flex-direction:column}
.buy-ic{font-size:30px;line-height:1;margin-bottom:8px}
.buy-tag{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--red2);background:rgba(226,58,46,.12);border:1px solid rgba(255,106,61,.42);border-radius:8px;padding:6px 10px;margin:0 0 14px;line-height:1.25}
.buy-tag b{color:var(--ink);font-weight:800}
.buy-price{font-size:27px;font-weight:800;color:var(--red);margin:auto 0 14px;letter-spacing:.01em}
.buy-or{display:flex;align-items:center;text-align:center;color:var(--mut);font-size:13px;margin:2px 0 28px}
.buy-or::before,.buy-or::after{content:"";flex:1;height:1px;background:var(--line)}
.buy-or span{padding:0 14px}
@media(max-width:680px){.buy-grid{grid-template-columns:1fr}}
label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
select,input,textarea{width:100%;background:var(--bg3);border:1px solid var(--line2);border-radius:12px;color:var(--ink);padding:13px 14px;font-size:15px;font-family:inherit;outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--red)}
select:disabled{opacity:.5}
.field{margin-bottom:14px}
.muted{color:var(--mut);font-size:13px}
.hint{font-size:12px;color:var(--mut2);margin-top:10px}
.shop-soon{background:linear-gradient(135deg,rgba(245,165,36,.12),rgba(245,165,36,.04));border:1px solid rgba(245,165,36,.4);border-radius:12px;padding:12px 15px;margin:14px 0 4px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.shop-soon a{color:var(--red);font-weight:700;text-decoration:none}
#coPay.soon{background:#3a3320;border:1px solid rgba(245,165,36,.5);color:#f5a524;cursor:default;box-shadow:none}
/* ---- stepper ---- */
.stepper{display:flex;gap:6px;margin-bottom:26px;overflow-x:auto;padding-bottom:4px}
.stepper .st{flex:1;min-width:104px;display:flex;flex-direction:column;gap:7px}
.stepper .bar{height:4px;border-radius:3px;background:var(--line2);transition:.3s}
.stepper .st.done .bar,.stepper .st.cur .bar{background:var(--grad)}
.stepper .lbl{font-size:11px;color:var(--mut);font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.stepper .st.cur .lbl{color:var(--ink)}
.stepper .st.done .lbl{color:var(--ok)}
.stepper .n{width:18px;height:18px;border-radius:50%;background:var(--line2);color:var(--ink);font-size:11px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.stepper .st.cur .n{background:var(--red)}.stepper .st.done .n{background:var(--ok);color:#06250f}
.wstep{display:none;animation:fade .3s}.wstep.on{display:block}
.wnav{display:flex;gap:12px;margin-top:26px}
.wnav .sp{flex:1}
/* ---- tool grid ---- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.tool{border:1px solid var(--line2);border-radius:12px;padding:10px;cursor:pointer;background:var(--bg3);transition:.15s}
.tool:hover{border-color:var(--red2)}
.tool.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset}
.tool .plate{height:92px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:8px 8px;overflow:hidden}
.tool .plate img{max-height:76px;max-width:96%;width:auto;height:auto;object-fit:contain;image-rendering:-webkit-optimize-contrast}
.tool .plate .wm{font-weight:800;color:#16181d;font-size:13.5px;letter-spacing:.01em;text-align:center;line-height:1.15}
.tool .tname{font-size:11px;color:var(--mut);font-weight:700;text-align:center;margin-top:7px;letter-spacing:.04em}
.tool.on .tname{color:var(--ink)}
/* ---- dropzone ---- */
.dz{border:1.5px dashed var(--line2);border-radius:14px;padding:26px;text-align:center;cursor:pointer;transition:.18s;background:var(--bg3);overflow-wrap:anywhere;word-break:break-word}
.dz:hover,.dz.hot{border-color:var(--red);background:rgba(226,58,46,.06)}
.dz b{font-size:15px;overflow-wrap:anywhere;word-break:break-word}.dz .ic{font-size:30px}
#dzInfo{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.dz.has{border-style:solid;border-color:var(--ok)}
/* ---- analyzing ---- */
.analyze{text-align:center;padding:30px 10px}
.analyze .ring{width:74px;height:74px;border-radius:50%;border:5px solid var(--line2);border-top-color:var(--red);margin:0 auto 20px;animation:spin .8s linear infinite;display:flex;align-items:center;justify-content:center}
.analyze .ring.done{border-color:#22c55e;animation:none!important;background:rgba(34,197,94,.08);box-shadow:0 0 0 6px rgba(34,197,94,.18);transition:.3s}
.analyze .ring.done svg{width:48px;height:48px;animation:checkPop .5s cubic-bezier(.2,1.4,.4,1)}
.analyze .ring.done svg path{stroke-dasharray:60;stroke-dashoffset:60;animation:checkDraw .5s .15s ease forwards}
.analyze .ring.done svg circle{stroke-dasharray:140;stroke-dashoffset:140;animation:checkDraw .55s ease forwards}
@keyframes checkPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes checkDraw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.pgline{height:8px;background:var(--bg3);border:1px solid var(--line2);border-radius:6px;overflow:hidden;max-width:420px;margin:18px auto}
.pgline i{display:block;height:100%;width:0;background:var(--grad);transition:.2s}
.alog{max-width:min(420px,100%);margin:14px auto 0;text-align:left;font-size:13px;color:var(--mut);font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere;word-break:break-word}
.alog div{opacity:0;animation:fade .3s forwards}
.an-notice{display:flex;gap:12px;background:rgba(245,165,36,.06);border:1px solid rgba(245,165,36,.3);border-radius:12px;padding:14px 16px;margin:20px auto 0;max-width:560px;font-size:13px;line-height:1.55;color:#e9c27a}
.an-notice svg{width:22px;height:22px;flex:0 0 auto;color:var(--warn);margin-top:1px}
.an-notice b{color:#fff}
.an-notice.miss{background:rgba(226,58,46,.06);border-color:rgba(226,58,46,.35);color:#ffb09e}
.an-notice.miss svg{color:var(--red2)}
/* ---- vehicle top card (riepilogo come dyno) ---- */
.vehtop{display:grid;grid-template-columns:230px 1fr 1fr;gap:20px;align-items:center;background:var(--bg3);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:22px}
.vehtop .pic{text-align:center}
.vehtop .pic img.car{width:100%;height:120px;object-fit:contain;background:#fff;border-radius:10px}
.vehtop .pic img.logo{height:24px;object-fit:contain;margin:10px auto 2px;display:block;max-width:110px}
.vehtop .pic .vname{font-weight:800;font-size:16px}.vehtop .pic .vgen{font-size:11px;color:var(--mut)}
.vehtop .col{min-width:0}
.vehtop .col .r{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid var(--line)}
.vehtop .col .r:last-child{border:none}.vehtop .col .r span{color:var(--mut);flex:0 0 auto}
.vehtop .col .r b{text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}
/* ---- form 2 colonne ---- */
.form2{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.form2 .field{margin:0}
.formsec{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:22px 0 12px;font-weight:800}
label .opt{text-transform:none;letter-spacing:0;color:var(--mut2);font-weight:600}
/* ---- custom select (stile sito, niente Apple) ---- */
.csel{position:relative;font-size:15px}
.csel-field{width:100%;background:var(--bg3);border:1px solid var(--line2);border-radius:12px;color:var(--ink);padding:13px 40px 13px 14px;cursor:pointer;min-height:48px;display:flex;align-items:center;position:relative}
.csel-field.ph{color:var(--mut)}
.csel-field::after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:translateY(-70%) rotate(45deg);transition:.2s}
.csel.open .csel-field{border-color:var(--red)}
.csel.open .csel-field::after{transform:translateY(-30%) rotate(225deg);border-color:var(--red)}
.csel.dis{opacity:.45;pointer-events:none}
.csel-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 50px -12px rgba(0,0,0,.75);z-index:45;max-height:300px;overflow:auto;display:none}
.csel.open .csel-menu{display:block;animation:fade .14s}
.csel-search{position:sticky;top:0;background:var(--bg2);padding:8px;border-bottom:1px solid var(--line)}
.csel-search input{width:100%;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;padding:9px 11px;color:var(--ink);font-size:14px}
.csel-opt{padding:11px 14px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
.csel-opt:last-child{border:none}.csel-opt:hover{background:var(--bg3)}
.csel-opt.sel{color:var(--red);font-weight:700}
.csel-empty{padding:14px;color:var(--mut);font-size:13px;text-align:center}
@media(max-width:680px){.vehtop{grid-template-columns:1fr}.form2{grid-template-columns:1fr}}
/* ---- tuning cards ---- */
.tunsec{margin-bottom:20px}
.tuncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tcard{border:1px solid var(--line2);border-radius:12px;padding:13px 15px;cursor:pointer;background:var(--bg3);transition:.15s;display:flex;align-items:center;gap:10px}
.tcard:hover{border-color:var(--red2)}
.tcard.on{border-color:var(--red);background:rgba(226,58,46,.1)}
.tcard .ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px}
.tcard.on .ck{background:var(--red);border-color:var(--red);color:#fff}
.tcard .nm{font-size:13px;font-weight:600}
.tcard.auto{opacity:.85;cursor:default}
.tcard.auto .ck{background:var(--ok);border-color:var(--ok);color:#06250f}
.tcard-dis{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.tcard-dis:hover{transform:none}
.tcard{flex-wrap:wrap}
.tcard .nm{flex:1;min-width:0;word-break:break-word}
.tag-incl,.tag-extra,.tag-price{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
.tag-incl{background:rgba(34,197,94,.18);color:var(--ok);border:1px solid rgba(34,197,94,.35);text-transform:uppercase;font-size:10px}
.tag-extra{background:rgba(245,165,36,.18);color:var(--warn);border:1px solid rgba(245,165,36,.35);text-transform:uppercase;font-size:10px}
.tag-price{background:var(--bg3);color:var(--red);border:1px solid rgba(226,58,46,.4);font-family:ui-monospace,Menlo,monospace}
.tcard.on .tag-price{background:#fff;color:var(--red);border-color:#fff}
.tun-hint{margin:8px 0 4px;font-size:14px;color:var(--mut);line-height:1.55;padding:18px 20px;background:var(--bg3);border:1px dashed var(--line2);border-radius:12px;text-align:center}
.tun-hint b{color:var(--ink)}
.tun-aster{margin-top:14px;font-size:12px;color:var(--mut);line-height:1.55;padding:10px 14px;background:var(--bg3);border:1px solid var(--line);border-radius:10px}
.tun-aster b{color:var(--red);font-size:14px}
/* MODAL rischio (NON usare label per evitare la regola globale text-transform:uppercase) */
.risk-box{max-width:540px}
.risk-p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--ink);text-transform:none;letter-spacing:0}
.risk-p b{color:#fff}
.risk-accept{display:flex;gap:12px;align-items:flex-start;margin-top:18px;cursor:pointer;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--bg3);transition:.15s}
.risk-accept:hover{border-color:var(--red)}
.risk-chk{flex-shrink:0;width:20px;height:20px;border:2px solid var(--line2);border-radius:5px;display:flex;align-items:center;justify-content:center;transition:.15s;margin-top:1px}
.risk-chk.on{background:var(--red);border-color:var(--red)}
.risk-chk.on::after{content:"✓";color:#fff;font-weight:800;font-size:14px;line-height:1}
.risk-chk-txt{flex:1;font-size:13px;line-height:1.55;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500}
.risk-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
.risk-actions .btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* ---- checklist ---- */
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px;margin-top:12px}
.chk{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);border-radius:10px;padding:11px 13px;cursor:pointer;background:var(--bg3);font-size:14px}
.chk.on{border-color:var(--red);background:rgba(226,58,46,.08)}
.chk .ck{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:11px}
.chk.on .ck{background:var(--red);border-color:var(--red);color:#fff}
.tline{display:flex;align-items:flex-start;gap:10px;padding:10px 0 6px;cursor:pointer;font-size:14px}
.term-block{border-top:1px solid var(--line);padding:6px 0 10px}
.term-block:first-child{border-top:none}
.term-desc{font-size:12.5px;color:var(--mut);line-height:1.55;padding:0 0 4px 28px;margin-top:2px}
.term-block.term-missing{background:rgba(226,58,46,.08);border-radius:8px;animation:termShake .55s ease;padding-left:8px;padding-right:8px;margin:0 -8px}
.term-block.term-missing .ck{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,58,46,.2)}
@keyframes termShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tline .ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line2);flex:0 0 auto;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:12px}
.tline.on .ck{background:var(--red);border-color:var(--red);color:#fff}
.tline a{color:var(--blue)}
/* ---- summary aside ---- */
.recap{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:18px;font-size:14px}
.recap .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--mut)}
.recap .row span{flex:0 0 auto}
.recap .row b{color:var(--ink);text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.recap .row:last-child{border:none}
.promo-wrap{width:100%}
.promo-lab{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:8px}
.promo-row{display:flex;gap:6px}
.promo-row input{flex:1;background:var(--bg3);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;color:var(--ink);font-size:14px;font-family:inherit;letter-spacing:.04em;text-transform:uppercase;transition:.15s}
.promo-row input:focus{outline:none;border-color:var(--red)}
.promo-row input::placeholder{text-transform:none;letter-spacing:0;color:var(--mut2);font-weight:400}
.promo-apply{background:var(--bg3);border:1px solid var(--line2);color:var(--ink);font-weight:700;font-size:13px;padding:0 16px;border-radius:10px;cursor:pointer;transition:.15s;font-family:inherit;flex-shrink:0}
.promo-apply:hover{border-color:var(--red);color:var(--red);background:rgba(226,58,46,.06)}
.promo-apply.on{background:var(--ok);border-color:var(--ok);color:#fff}
.promo-msg{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.45}
.promo-msg.ok{color:var(--ok)}
.promo-msg.warn{color:var(--warn)}
/* Scelta documento fiscale (ricevuta o fattura) al checkout */
.doc-pick{display:grid;gap:10px}
.doc-opt{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;cursor:pointer;transition:.15s;position:relative}
.doc-opt:hover{border-color:var(--line2);background:var(--bg3)}
.doc-opt.on{border-color:var(--red);background:rgba(226,58,46,.06)}
.doc-ic{font-size:26px;line-height:1;flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg3)}
.doc-opt.on .doc-ic{background:rgba(226,58,46,.13)}
.doc-body{flex:1;min-width:0}
.doc-t{font-weight:800;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-rec{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ok);background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.35);padding:2px 7px;border-radius:999px}
.doc-s{font-size:12.5px;color:var(--mut);line-height:1.45;margin-top:3px}
.doc-rd{flex-shrink:0;width:20px;height:20px;border:2px solid var(--line2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:10px;transition:.15s}
.doc-opt.on .doc-rd{border-color:var(--red);background:var(--red)}
.doc-opt.on .doc-rd::after{content:"";width:8px;height:8px;background:#fff;border-radius:50%}
.doc-warn{margin-top:12px;padding:11px 14px;background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.4);border-radius:10px;font-size:13px;color:#e9c27a;line-height:1.5}
.doc-warn a{color:var(--warn);text-decoration:underline;cursor:pointer;font-weight:700}
.doc-warn b{color:#fff}
.price{font-size:34px;font-weight:800;letter-spacing:-.02em}
/* ---- account/owner reused ---- */
.tabs{display:flex;gap:6px;background:var(--bg3);border:1px solid var(--line2);border-radius:12px;padding:4px;margin-bottom:20px;max-width:320px}
.tab{flex:1;text-align:center;padding:9px;border-radius:9px;cursor:pointer;font-weight:700;font-size:14px;color:var(--mut)}
.tab.on{background:var(--grad);color:#fff}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.b-att{background:rgba(245,165,36,.12);color:var(--warn)}.b-lav{background:rgba(96,165,250,.14);color:#7cb0ff}.b-pr{background:rgba(34,197,94,.14);color:var(--ok)}
.olist{display:flex;flex-direction:column;gap:12px}
.oitem{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.oitem .veh{font-weight:700}.oitem .meta{font-size:13px;color:var(--mut)}
.oitem .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:60;padding:18px}
.modal.on{display:flex}
.mbox{background:var(--bg2);border:1px solid var(--line2);border-radius:20px;padding:28px;max-width:460px;width:100%;animation:pop .3s;max-height:90vh;overflow:auto}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1)}}
.mbox h3{font-size:20px;margin-bottom:6px}
.demo-tag{display:inline-block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;background:rgba(245,165,36,.15);color:var(--warn);padding:3px 9px;border-radius:6px;font-weight:700;margin-left:8px}
.email-prev{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:18px;margin:14px 0;font-size:14px}
.email-prev .from{font-size:12px;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:13px 20px;font-weight:600;opacity:0;transition:.3s;z-index:70;font-size:14px}
.toast.on{opacity:1;transform:translateX(-50%)}
.empty{text-align:center;color:var(--mut);padding:50px 20px}
/* ===== AREA CLIENTI MIGLIORATA ===== */
.acc-hero{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:22px;overflow:hidden}
.acc-hero::before{content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 65%);opacity:.4;pointer-events:none}
.acc-avatar{width:62px;height:62px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff;letter-spacing:.04em;flex-shrink:0;box-shadow:0 6px 22px -8px var(--glow);position:relative;z-index:1}
.acc-hero-info{position:relative;z-index:1}
.acc-hero-info h1{font-size:24px;letter-spacing:-.01em;margin:0}
.acc-meta{font-size:13px;color:var(--mut);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.acc-since{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut2);border:1px solid var(--line2);padding:2px 8px;border-radius:999px}
/* ---- FOTO PROFILO (header + navbar) ---- */
.acc-av-wrap{position:relative;flex-shrink:0;cursor:pointer;z-index:1;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.acc-av-wrap:hover{transform:scale(1.05)} .acc-av-wrap:active{transform:scale(.96)}
.acc-avatar{overflow:hidden;transition:box-shadow .3s}
.acc-avatar.has-img{background:#1f1f25;letter-spacing:0}
.acc-av-wrap:hover .acc-avatar{box-shadow:0 8px 30px -6px var(--glow),0 0 0 2px rgba(226,58,46,.35)}
.acc-av-cam{position:absolute;bottom:-3px;right:-3px;width:28px;height:28px;border-radius:50%;background:var(--red);border:3px solid var(--bg2);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.acc-av-cam svg{width:13px;height:13px}
.acc-av-wrap:hover .acc-av-cam{transform:scale(1.18) rotate(-6deg)}
.acc-av-rm{font-size:11px;color:var(--mut);cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.acc-av-rm:hover{color:var(--red)}
.nav-avatar{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;overflow:hidden;flex:0 0 auto;transition:transform .2s,box-shadow .2s}
.nav-avatar:hover{transform:scale(1.07);box-shadow:0 0 0 3px var(--glow)}
.nav-avatar.has-img{background:#1f1f25}
/* ---- animazioni area cliente ---- */
#v-account.on .acc-hero{animation:accIn .55s cubic-bezier(.22,1,.36,1) both}
#v-account.on .kpi{animation:accIn .55s cubic-bezier(.22,1,.36,1) both}
#v-account.on .kpi:nth-child(2){animation-delay:.06s} #v-account.on .kpi:nth-child(3){animation-delay:.12s} #v-account.on .kpi:nth-child(4){animation-delay:.18s}
@keyframes accIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.kpi{transition:transform .22s,box-shadow .22s,border-color .22s}
.kpi:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.acc-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.kpi:hover{transform:translateY(-2px);border-color:var(--line2)}
.kpi .kv{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.kpi .kl{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin-top:6px;font-weight:700}
.kpi .ki{position:absolute;top:12px;right:12px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg3)}
.kpi.k-red .kv{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi.k-ok .ki{background:rgba(34,197,94,.12);color:var(--ok)}
.kpi.k-warn .ki{background:rgba(245,165,36,.12);color:var(--warn)}
.acc-tabs{max-width:560px}
.tcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;font-size:11px;background:rgba(255,255,255,.1);border-radius:999px;padding:0 6px;margin-left:6px;font-weight:800}
.tab.on .tcount{background:rgba(255,255,255,.25)}
.prof-card{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px;transition:transform .25s,box-shadow .25s,border-color .25s}
.prof-card:hover{border-color:var(--line2);box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
#acc-tab-profile,#acc-tab-orders,#acc-tab-invoices,#acc-tab-support{animation:accIn .45s cubic-bezier(.22,1,.36,1) both}
.prof-h{font-size:17px;margin:0 0 4px;letter-spacing:-.01em}
.prof-sub{font-size:13px;color:var(--mut);margin-bottom:18px}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.prof-f{display:flex;flex-direction:column;gap:6px}
.prof-f span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);font-weight:700}
.prof-f input,.prof-f select{background:var(--bg3);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;color:var(--ink);font-size:14px;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.prof-f input:focus,.prof-f select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,58,46,.15)}
.prof-f input:disabled{opacity:.6;cursor:not-allowed}
.prof-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prof-msg{font-size:13px;color:var(--ok);font-weight:600}
.prof-msg.err{color:var(--red2)}
.sup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.sup-card{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}
.sup-card:hover{transform:translateY(-2px);border-color:var(--line2)}
.sup-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sup-t{font-weight:800;font-size:15px}
.sup-s{font-size:12px;color:var(--mut);margin-top:2px}
.sup-info{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
/* Dashboard stats Daniele */
.own-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.own-stat{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.own-stat:hover{transform:translateY(-2px);border-color:var(--line2)}
.own-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);font-weight:700;margin-bottom:8px}
.own-stat-value{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1;margin-bottom:6px}
.own-stat-sub{font-size:11px;color:var(--mut);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.own-stat-red .own-stat-value{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.own-stat-ok .own-stat-value{color:var(--ok)}
.own-stat-warn .own-stat-value{color:var(--warn)}
/* === PANNELLO DANIELE: work card semplice === */
.wk-sec-h{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.wk-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;background:var(--grad);color:#fff;border-radius:999px;font-size:13px;font-weight:800}
.wk{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:14px}
.wk-todo{border-left:4px solid var(--warn)}
.wk-done{border-left:4px solid var(--ok);opacity:.92}
.wk-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.wk-veh{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.wk-emoji{font-size:30px;line-height:1;flex-shrink:0}
.wk-veh-nm{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.wk-veh-sub{font-size:12px;color:var(--mut);margin-top:2px}
.wk-badge{font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.wk-badge.todo{background:rgba(245,165,36,.15);color:var(--warn)}
.wk-badge.ok{background:rgba(34,197,94,.15);color:var(--ok)}
.wk-data{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px 16px;padding:14px 16px;background:var(--bg3);border-radius:12px;margin-bottom:12px}
.wk-d{display:flex;flex-direction:column;gap:2px;min-width:0}
.wk-d span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut2);font-weight:700}
.wk-d b{font-size:14px;color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.wk-d b.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.wk-opts{font-size:13px;color:var(--ink);margin-bottom:6px}
.wk-opts span{color:var(--mut);font-weight:600}
.wk-note{font-size:13px;color:#e9c27a;background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.25);border-radius:8px;padding:8px 12px;margin:6px 0 0}
.wk-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:680px){.wk-steps{grid-template-columns:1fr}}
.wk-step{display:flex;gap:12px;align-items:flex-start}
.wk-n{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.wk-st-body{flex:1;min-width:0}
.wk-st-t{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.4}
.wk-drop{display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:10px 14px;border:2px dashed var(--line2);border-radius:10px;cursor:pointer;transition:.18s;background:var(--bg3)}
.wk-drop:hover{border-color:var(--red);background:rgba(226,58,46,.06)}
.wk-drop.hot{border-color:var(--red);background:rgba(226,58,46,.12)}
.wk-drop-txt{font-size:12.5px;color:var(--mut);font-weight:600;line-height:1.4}
.wk-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--mut2);font-family:ui-monospace,Menlo,monospace;display:flex;align-items:center;justify-content:space-between;gap:10px}
.wk-del{background:rgba(239,68,68,.10);color:#ef8a7a;border:1px solid rgba(239,68,68,.30);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;transition:.15s}
.wk-del:hover{background:rgba(239,68,68,.20);color:#ff6a5a;border-color:rgba(239,68,68,.55)}
/* modale doppia conferma eliminazione */
.delov{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:delin .15s ease}
@keyframes delin{from{opacity:0}to{opacity:1}}
.delbox{background:var(--bg2,#15181e);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:440px;width:100%;box-shadow:0 24px 70px -20px #000}
.delh{font-size:19px;font-weight:800;margin-bottom:8px}
.delsub{color:var(--mut,#9aa1aa);font-size:14px;margin-bottom:14px;overflow-wrap:anywhere}
.delwarn{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.28);border-radius:10px;padding:11px 13px;font-size:13px;color:#ef8a7a;margin-bottom:14px}
.delchk{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:18px;user-select:none}
.delchk input{width:18px;height:18px;cursor:pointer;accent-color:#ef4444}
.delbtns{display:flex;gap:10px;justify-content:flex-end}
.btn.ghost{background:transparent;border:1px solid var(--line2,rgba(255,255,255,.16));color:var(--ink,#f3f4f6)}
.btn.danger{background:#ef4444;color:#fff}
.btn.danger:disabled{opacity:.4;cursor:not-allowed}
.btn.danger:not(:disabled):hover{background:#dc2626}
.wk-fileblk{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.wk-fb-h{font-size:13px;margin-bottom:4px}.wk-fb-h b{color:var(--red)}
.mp-warn{grid-column:1/-1;margin-top:6px;padding:13px 16px;border:1px solid rgba(245,165,36,.5);background:rgba(245,165,36,.1);border-radius:12px;color:#f5c97a;font-size:13.5px;line-height:1.5;animation:termShake .5s ease}
.ex-note{font-size:12px;color:var(--mut);line-height:1.5;margin-top:6px}
.wk-invoice{margin-top:12px;padding:12px;border:1px dashed var(--line2);border-radius:12px;background:rgba(91,140,255,.05)}
.wk-inv-h{font-size:13px;margin-bottom:8px}
.wk-inv-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wk-inv-num{flex:1;min-width:160px;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;color:var(--ink);font-size:13px;font-family:ui-monospace,Menlo,monospace}
/* SUCCESS modal */
.success-box{max-width:540px;text-align:center;position:relative;overflow:hidden;animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.success-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti-piece{position:absolute;top:-20px;left:0;width:10px;height:14px;border-radius:2px;animation:confettiDrop var(--d) ease-in forwards;transform:translateX(var(--x)) rotate(var(--r))}
@keyframes confettiDrop{from{top:-20px;opacity:1}to{top:100vh;opacity:0;transform:translateX(var(--x)) rotate(calc(var(--r) * 4))}}
.success-check{display:flex;justify-content:center;margin-bottom:14px;position:relative;z-index:2}
.success-check .sc-ring{stroke-dasharray:226;stroke-dashoffset:226;animation:dashDraw .6s .15s forwards cubic-bezier(.65,0,.45,1)}
.success-check .sc-tick{stroke-dasharray:50;stroke-dashoffset:50;animation:dashDraw .35s .5s forwards cubic-bezier(.65,0,.45,1)}
@keyframes dashDraw{to{stroke-dashoffset:0}}
.success-title{font-size:26px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em;color:var(--ink);position:relative;z-index:2}
.success-sub{font-size:14px;color:var(--mut);margin:0 0 18px;position:relative;z-index:2}
.success-card{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:18px;position:relative;z-index:2}
.success-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--mut)}
.success-row b{color:var(--ink);font-weight:700}
.success-steps{text-align:left;display:flex;flex-direction:column;gap:14px;margin-bottom:22px;position:relative;z-index:2}
.success-step{display:flex;gap:14px;align-items:flex-start}
.ss-n{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.success-step b{color:var(--ink);font-size:14px;display:block;margin-bottom:2px}
.ss-d{font-size:12.5px;color:var(--mut);line-height:1.45}
.success-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;position:relative;z-index:2}
.success-help{font-size:12px;color:var(--mut);position:relative;z-index:2;margin:0}
.success-help a{color:var(--red);text-decoration:none;font-weight:700}

/* ===== 2FA — modale cinematografico (a tema dark + rosso) ===== */
.tf-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(820px 520px at 50% 28%,rgba(226,58,46,.12),transparent 70%),rgba(4,5,7,.8);
  backdrop-filter:blur(7px);animation:tfFade .35s ease}
@keyframes tfFade{from{opacity:0}to{opacity:1}}
.tf-box{position:relative;background:linear-gradient(180deg,var(--bg2),var(--bg));border:1px solid var(--line2);
  border-radius:22px;max-width:466px;width:100%;max-height:94vh;overflow:auto;padding:26px;
  box-shadow:0 44px 110px -28px #000,0 0 70px -22px var(--glow);animation:tfIn .6s cubic-bezier(.16,1,.3,1)}
@keyframes tfIn{from{transform:scale(.9) translateY(28px);opacity:0;filter:blur(7px)}to{transform:none;opacity:1;filter:blur(0)}}
.tf-box::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(226,58,46,.55),transparent 38%,transparent 62%,rgba(255,106,61,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;animation:tfBorder 1s .25s forwards}
@keyframes tfBorder{to{opacity:1}}
.tf-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.tf-shield{width:46px;height:46px;flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:13px;background:linear-gradient(160deg,rgba(226,58,46,.24),rgba(226,58,46,.05));border:1px solid rgba(226,58,46,.4)}
.tf-shield svg{width:24px;height:24px;position:relative;z-index:2}
.tf-shield .tf-sp{stroke-dasharray:90;stroke-dashoffset:90;animation:dashDraw .8s .25s forwards cubic-bezier(.65,0,.45,1)}
.tf-shield::after{content:"";position:absolute;inset:-1px;border-radius:13px;box-shadow:0 0 24px -2px var(--glow);animation:tfPulse 2.6s ease-in-out infinite}
@keyframes tfPulse{0%,100%{opacity:.45}50%{opacity:1}}
.tf-title{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.tf-x{margin-left:auto;width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:transparent;border:1px solid var(--line2);
  color:var(--mut);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.18s}
.tf-x:hover{border-color:var(--red);color:var(--red);transform:rotate(90deg)}
.tf-step{animation:tfStepIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes tfStepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.tf-lead{font-size:13px;color:var(--mut);line-height:1.5;margin:8px 0 16px}
.tf-lead b{color:var(--ink)}
/* QR con scanner laser + parentesi angolari */
.tf-qr-wrap{position:relative;width:206px;height:206px;flex:0 0 auto;border-radius:14px;background:#fff;padding:9px;
  box-shadow:0 0 46px -10px var(--glow);animation:tfQr .65s .15s both cubic-bezier(.16,1,.3,1)}
@keyframes tfQr{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.tf-qr-wrap svg{display:block;width:100%;height:100%}
.tf-scan{position:absolute;left:10px;right:10px;height:2px;top:10px;border-radius:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--red),transparent);box-shadow:0 0 14px 2px rgba(226,58,46,.9);animation:tfScan 2.4s ease-in-out infinite}
@keyframes tfScan{0%{top:10px}50%{top:188px}100%{top:10px}}
.tf-bk{position:absolute;width:24px;height:24px;border:3px solid var(--red);z-index:4;filter:drop-shadow(0 0 4px rgba(226,58,46,.6))}
.tf-bk.tl{top:2px;left:2px;border-right:0;border-bottom:0;border-radius:7px 0 0 0}
.tf-bk.tr{top:2px;right:2px;border-left:0;border-bottom:0;border-radius:0 7px 0 0}
.tf-bk.bl{bottom:2px;left:2px;border-right:0;border-top:0;border-radius:0 0 0 7px}
.tf-bk.br{bottom:2px;right:2px;border-left:0;border-top:0;border-radius:0 0 7px 0}
.tf-key-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut2);margin-bottom:5px}
.tf-key{font-family:ui-monospace,Menlo,monospace;font-size:14px;letter-spacing:.08em;word-break:break-all;
  background:var(--bg3);border:1px solid var(--line2);border-radius:10px;padding:11px;color:var(--ink)}
.tf-otp-in{width:100%;text-align:center;letter-spacing:.55em;font-size:30px;font-weight:800;background:var(--bg3);
  border:1.5px solid var(--line2);border-radius:14px;padding:15px 15px 15px 25px;color:var(--ink);font-family:ui-monospace,Menlo,monospace;transition:.18s}
.tf-otp-in:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(226,58,46,.16),0 0 26px -6px var(--glow)}
.tf-ring{display:flex;justify-content:center;margin:4px 0 6px}
.tf-ring .r1{stroke-dasharray:226;stroke-dashoffset:226;animation:dashDraw .6s .1s forwards cubic-bezier(.65,0,.45,1)}
.tf-ring .r2{stroke-dasharray:50;stroke-dashoffset:50;animation:dashDraw .35s .5s forwards cubic-bezier(.65,0,.45,1)}
.tf-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.tf-chip{opacity:0;background:var(--bg3);border:1px solid var(--line2);border-radius:9px;padding:9px;text-align:center;
  font-family:ui-monospace,Menlo,monospace;font-size:14px;letter-spacing:.04em;color:var(--ink);animation:tfChip .42s forwards cubic-bezier(.16,1,.3,1)}
@keyframes tfChip{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
.tf-chip:hover{border-color:rgba(226,58,46,.5)}

/* ABANDONED CART popup */
.abandoned-box{max-width:480px;position:relative;text-align:center;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
.abandoned-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid var(--line2);color:var(--mut);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.abandoned-x:hover{border-color:var(--red);color:var(--red)}
.abandoned-emoji{font-size:48px;line-height:1;margin-bottom:10px;animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes bounceIn{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.abandoned-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.abandoned-sub{font-size:14px;color:var(--mut);margin:0 0 18px;line-height:1.5}
.abandoned-sub b{color:var(--ink)}
.abandoned-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(226,58,46,.08),rgba(255,106,61,.05));border:1px solid rgba(226,58,46,.35);border-radius:12px;padding:14px 16px;margin-bottom:16px;text-align:left}
.ab-icon{font-size:24px;flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(226,58,46,.13)}
.ab-t{font-weight:800;font-size:14px;color:var(--ink)}
.ab-s{font-size:12px;color:var(--mut);margin-top:2px}
.ab-price{margin-left:auto;font-size:20px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}
.abandoned-perks{text-align:left;display:flex;flex-direction:column;gap:6px;margin-bottom:18px;padding:14px 16px;background:var(--bg3);border-radius:10px}
.ab-perk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink)}
.ab-perk span{color:var(--ok);font-weight:800;font-size:14px}
.abandoned-actions{display:flex;flex-direction:column;gap:8px}

.pending-pay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(245,165,36,.1),rgba(245,165,36,.04));border:1px solid rgba(245,165,36,.35);border-radius:12px;padding:13px 16px;margin-bottom:10px}
.pending-pay > div:first-child{flex:1;min-width:200px}
.pending-pay b{color:var(--warn);font-size:14px}
.pending-pay .btn{margin-left:auto}
@media(max-width:780px){.acc-kpi{grid-template-columns:repeat(2,1fr)}.prof-grid,.sup-grid{grid-template-columns:1fr}.acc-tabs{max-width:none;overflow-x:auto;flex-wrap:nowrap}.acc-tabs .tab{flex:0 0 auto;white-space:nowrap}}
.notice{background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.25);border-radius:12px;padding:12px 16px;font-size:13px;color:#e9c27a;margin-bottom:22px}
@media(max-width:780px){.vehgrid{grid-template-columns:1fr}.specs{grid-template-columns:1fr}}
/* ===== LOGIN ANIMATO (email + 2FA) ===== */
.auth-wrap{position:relative;max-width:440px;margin:14px auto;min-height:520px}
.auth-bg{position:absolute;inset:-40px -20px;border-radius:30px;overflow:hidden;z-index:0;pointer-events:none}
.auth-bg::before,.auth-bg::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(70px);opacity:.45;background:radial-gradient(circle,var(--red),transparent 70%)}
.auth-bg::before{top:-60px;left:-40px;animation:authA 9s ease-in-out infinite}
.auth-bg::after{bottom:-60px;right:-40px;background:radial-gradient(circle,var(--red2),transparent 70%);animation:authB 11s ease-in-out infinite}
@keyframes authA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.18)}}
@keyframes authB{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-36px,-26px) scale(.85)}}
.auth-card{position:relative;z-index:1;background:rgba(18,20,25,.82);backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:22px;padding:30px 26px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);animation:authIn .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes authIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.auth-head{text-align:center;margin-bottom:20px}
.auth-emblem{height:58px;width:auto;display:block;margin:0 auto 8px;object-fit:contain}
.auth-word{font-weight:800;font-size:17px;letter-spacing:.02em}
.auth-word b{color:var(--red)}
.auth-tag{font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.22em;color:var(--mut);margin-bottom:14px}
.auth-head h2{font-size:22px;margin-bottom:4px}
.auth-tabs{max-width:none;margin:0 0 14px}
#auth-email,#auth-phone,#auth-2fa{text-align:center}
#auth-email .field,#auth-phone .field{text-align:left}
.soc{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:12px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid var(--line2);background:#fff;color:#1a1a1a;margin-bottom:10px;transition:.18s;font-family:inherit}
.soc:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.soc.apple{background:#000;color:#fff;border-color:#000}
.soc svg{width:18px;height:18px;flex:0 0 auto}
.auth-div{display:flex;align-items:center;gap:12px;color:var(--mut2);font-size:12px;margin:16px 0}
.auth-div::before,.auth-div::after{content:"";flex:1;height:1px;background:var(--line2)}
.auth-toggle{font-size:13px;color:var(--mut);text-align:center;margin-top:12px}
.auth-toggle a{color:var(--red);cursor:pointer;font-weight:700}
.auth-back{background:none;border:none;color:var(--mut);cursor:pointer;font-size:13px;font-weight:600;margin-bottom:10px;font-family:inherit}
.otp{display:flex;gap:8px;justify-content:center;margin:18px 0}
.otp input{width:46px;height:56px;text-align:center;font-size:24px;font-weight:800;background:var(--bg3);border:1.5px solid var(--line2);border-radius:12px;color:var(--ink);padding:0}
.otp input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,58,46,.18);transform:scale(1.06)}
.auth-demo{background:rgba(245,165,36,.1);border:1px dashed rgba(245,165,36,.4);border-radius:10px;padding:9px 12px;font-size:12px;color:#e9c27a;text-align:center;margin-bottom:14px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== animazioni globali e-commerce ===== */
.btn.p:active{transform:scale(.96)}
.cart-badge{transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.cart-badge.bump{transform:scale(1.5)}
@keyframes flyCart{0%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.2)}}
.fly-dot{position:fixed;width:18px;height:18px;border-radius:50%;background:var(--grad);z-index:90;pointer-events:none;animation:flyCart .8s cubic-bezier(.4,0,.6,1) forwards;box-shadow:0 0 14px var(--glow)}
.wstep.on,.view.on{animation:fade .4s ease}
.tool,.tcard,.chk,.oitem{transition:transform .15s,border-color .15s,box-shadow .15s}
.oitem:hover{transform:translateX(3px)}
.btn{position:relative;overflow:hidden}
.btn.p::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.5),transparent 60%);opacity:0;transform:scale(0)}
.btn.p:active::after{animation:ripple .5s ease-out}
@keyframes ripple{from{opacity:.6;transform:scale(0)}to{opacity:0;transform:scale(2.5)}}
/* ===== MOBILE ===== */
@media(max-width:640px){
  .wrap{padding:0 14px}
  /* header MOBILE: brand a sinistra, i 3 controlli (lingua · menu · carrello) IN LINEA a destra, stessa misura e stesso asse */
  .hbar{height:auto;min-height:0;padding:10px 14px;gap:8px;flex-wrap:nowrap;align-items:center}
  /* NASCONDO le voci link in fila: vanno nel menu hamburger */
  .hbar .navlink, .hbar #authBtn, .hbar #nav-avatar{display:none}
  .hbar .brand{order:0;min-width:0}
  /* tutti e tre 40px, stesso asse (.hbar per battere le regole base definite più sotto nel file) */
  .hbar .langbtn{order:1;height:40px;padding:0 12px;font-size:12px;border-radius:999px}
  .hbar .langbtn .fl{font-size:14px}
  .hbar .menu-toggle{display:flex;position:static;top:auto;right:auto;width:40px;height:40px;margin:0;order:2;flex:0 0 40px}
  .hbar .brand{min-width:0;overflow:hidden}
  .hbar .cart-btn{position:relative;width:40px;height:40px;margin:0 4px 0 0;order:3}
  .hbar .cart-btn svg{width:21px;height:21px}
  .hbar .menu-toggle svg{width:20px;height:20px}
  /* badge piccolo e DENTRO al bottone (top/right positivi) -> non sfora mai dallo schermo */
  .hbar .cart-btn .cart-badge{top:0;right:0;min-width:16px;height:16px;padding:0 4px;font-size:10px;box-shadow:0 0 0 2px var(--bg)}
  /* stepper compatto: solo numeri + barre */
  .stepper{gap:5px;margin-bottom:20px;overflow:visible}
  .stepper .st{min-width:0}
  .stepper .lbl{font-size:0;justify-content:center;gap:0}
  .stepper .lbl .n{font-size:11px}
  /* griglie a 1 colonna (anche con stile inline) */
  #s6grid,#co-grid{grid-template-columns:1fr!important}
  .form2{grid-template-columns:1fr!important}
  .vehgrid{grid-template-columns:1fr!important}
  .vehtop{grid-template-columns:1fr!important}
  /* tipografia/spazi */
  h1{font-size:24px}
  .card{padding:18px 15px}
  .sub{margin-bottom:18px}
  .wnav{flex-wrap:wrap}
  .otp input{width:40px;height:50px;font-size:20px}
  .soc{font-size:13px}
  .auth-wrap{min-height:0}
  .auth-bg{inset:-20px 0}
}
/* emblema nell'header + icona carrello + tool senza logo */
header{padding:6px 0}
.hbar{min-height:84px}
/* CARRELLO: bottone rotondo grande, in alto a destra */
.langbtn{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--line2);background:var(--bg3);border-radius:999px;color:var(--ink);font-family:ui-monospace,Menlo,monospace;font-size:12px;cursor:pointer;transition:.18s;font-weight:700;flex:0 0 auto}
.langbtn:hover{border-color:var(--red);color:var(--red)}
.langbtn .fl{font-size:15px;line-height:1}
.langbtn .cv{opacity:.65}
@media(max-width:780px){.langbtn{padding:0 10px;height:34px;font-size:11px}.langbtn .fl{font-size:13px}}
.cart-btn{position:relative;width:46px;height:46px;border-radius:50%;background:var(--bg3);border:1px solid var(--line2);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.18s;font-family:inherit;margin-left:6px}
.cart-btn:hover{border-color:var(--red);transform:translateY(-1px);box-shadow:0 6px 18px -8px var(--glow)}
.cart-btn svg{width:24px;height:24px}
.cart-btn .cart-badge{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--grad);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg);transition:transform .25s cubic-bezier(.2,1.4,.4,1);line-height:1}
.cart-btn .cart-badge.bump{transform:scale(1.6)}
.cart-btn.shake{animation:cartShake .55s ease}
/* ===== CARRELLO BELLO ===== */
.cart-wrap{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.cart-head{margin-bottom:20px}
.cart-items{display:flex;flex-direction:column;gap:14px}
.ci{display:flex;flex-direction:column;gap:0;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:16px;transition:.2s;position:relative;overflow:hidden}
.ci-head{display:grid;grid-template-columns:130px 1fr auto;gap:16px;align-items:center}
.ci-row-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.ci-row-lab{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);font-weight:700}
/* Sub-items nidificati (Pack, Express) sotto la mappa */
.ci-subs{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line2);display:flex;flex-direction:column;gap:8px}
.ci-sub{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg3);border:1px solid var(--line);border-radius:10px;position:relative;margin-left:18px}
.ci-sub::before{content:"";position:absolute;left:-13px;top:50%;width:11px;height:1px;background:var(--line2)}
.ci-sub::after{content:"";position:absolute;left:-13px;top:-9px;bottom:50%;width:1px;background:var(--line2)}
.ci-sub-ic{font-size:18px;flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg2)}
.ci-sub-info{flex:1;min-width:0}
.ci-sub-nm{font-weight:700;font-size:13px;color:var(--ink)}
.ci-sub-det{font-size:11px;color:var(--mut);margin-top:1px}
.ci-sub-fee{font-weight:800;font-size:14px;color:var(--warn);white-space:nowrap}
.ci-sub.sub-pack{border-color:rgba(245,165,36,.35);background:rgba(245,165,36,.05)}
.ci-sub.sub-exp{border-color:rgba(91,140,255,.3);background:rgba(91,140,255,.05)}
.ci-sub.sub-exp .ci-sub-fee{color:#7fa3ff}
.ci-foot{margin-top:12px;padding:10px 14px;background:linear-gradient(90deg,transparent,rgba(226,58,46,.06));border-radius:10px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.ci-foot span{color:var(--mut);font-weight:600}
.ci-foot b{font-size:18px;color:var(--ink);font-weight:800}
/* freccia espandi/comprimi dettagli */
.ci-exp{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line2);border-radius:50%;color:var(--mut);cursor:pointer;transition:.2s;padding:0}
.ci-exp svg{width:16px;height:16px;transition:transform .25s}
.ci-exp:hover{border-color:var(--red);color:var(--red)}
.ci-exp.open{background:var(--red);border-color:var(--red);color:#fff}
.ci-exp.open svg{transform:rotate(180deg)}
/* dettaglio espandibile */
.ci-detail{margin-top:14px;padding:14px 16px;background:var(--bg3);border:1px solid var(--line);border-radius:12px;animation:expandDown .25s ease-out}
@keyframes expandDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.ci-det-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin-bottom:10px}
.ci-det-row{display:flex;flex-direction:column;gap:2px;min-width:0}
.ci-det-lab{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);font-weight:700}
.ci-det-val{font-size:13px;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.ci-det-val.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--bg2);padding:2px 6px;border-radius:4px;display:inline-block;width:fit-content}
.ci-det-block{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.ci-det-opts{display:flex;flex-wrap:wrap;gap:5px}
.ci:hover{border-color:var(--line2);transform:translateY(-1px);box-shadow:0 12px 32px -16px rgba(0,0,0,.6)}
.ci::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:.8}
.ci-pic{width:130px;height:90px;background:#fff;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.ci-pic img.car{max-width:100%;max-height:100%;object-fit:contain}
.ci-pic .logo{position:absolute;bottom:6px;right:6px;width:28px;height:28px;background:#fff;border-radius:50%;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.ci-pic .logo img{width:100%;height:100%;object-fit:contain}
.ci-body{min-width:0}
.ci-name{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:4px;line-height:1.2}
.ci-gen{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ci-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ci-chip{background:var(--bg3);border:1px solid var(--line);padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;color:var(--mut)}
.ci-chip.stage{background:rgba(226,58,46,.13);color:var(--red2);border-color:rgba(226,58,46,.4)}
.ci-chip.tool{background:rgba(91,140,255,.15);color:#7fa3ff;border-color:rgba(91,140,255,.4)}
.ci-chip.express{background:rgba(245,165,36,.15);color:var(--warn);border-color:rgba(245,165,36,.45);font-weight:800}
.ci-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:120px}
.ci-price{font-family:var(--disp);font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ci-rm{background:transparent;border:1px solid var(--line2);color:var(--mut);padding:6px 12px;border-radius:999px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:inherit;font-weight:600;transition:.18s}
.ci-rm:hover{border-color:var(--red);color:var(--red);background:rgba(226,58,46,.06)}
.ci-rm svg{width:13px;height:13px}
.cart-add{margin-top:18px;background:transparent;border:1.5px dashed var(--line2);width:100%;padding:18px;color:var(--mut);transition:.18s;display:flex;align-items:center;justify-content:center}
.cart-add:hover{border-color:var(--red);color:var(--ink);background:rgba(226,58,46,.04)}
.cart-side{position:sticky;top:100px}
.cart-recap{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:22px}
.cart-recap h3{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);margin-bottom:16px}
.cr-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--mut)}
.cr-row b{color:var(--ink);font-weight:700}
.cr-divider{height:1px;background:var(--line);margin:12px 0}
.cr-total{display:flex;justify-content:space-between;align-items:center;margin:6px 0 18px}
.cr-total span:first-child{font-size:14px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.cr-bigprice{font-family:var(--disp);font-size:32px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.cart-checkout{width:100%;padding:14px;font-size:15px;display:flex;align-items:center;justify-content:center}
.cr-secure{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--mut);margin-top:12px}
.cr-pay-icons{display:flex;gap:6px;justify-content:center;margin-top:10px;opacity:.8}
.cart-empty{background:var(--bg2);border:1.5px dashed var(--line2);border-radius:18px;padding:50px 20px;text-align:center}
.cart-empty .ic{font-size:54px;margin-bottom:14px;opacity:.6}
.cart-empty h3{font-size:18px;margin-bottom:6px}
.cart-empty p{color:var(--mut);margin-bottom:18px}
@media(max-width:880px){.cart-wrap{grid-template-columns:1fr}.cart-side{position:static}.ci{grid-template-columns:90px 1fr;gap:12px;padding:14px}.ci-pic{width:90px;height:70px}.ci-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;min-width:0}}
/* HAMBURGER + DRAWER */
.menu-toggle{display:none;position:absolute;top:14px;right:78px;width:46px;height:46px;border-radius:50%;background:var(--bg3);border:1px solid var(--line2);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;padding:0;font-family:inherit;transition:.18s}
.menu-toggle:hover{border-color:var(--red)}
.menu-toggle svg{width:22px;height:22px}
.drawer{position:fixed;top:0;right:0;width:78%;max-width:300px;height:100vh;background:var(--bg2);border-left:1px solid var(--line2);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.9,.3,1);z-index:80;padding:80px 22px 22px;display:flex;flex-direction:column;gap:6px}
.drawer.on{transform:translateX(0)}
.drawer a, .drawer button{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--bg3);border:1px solid var(--line);color:var(--ink);text-decoration:none;cursor:pointer;font-size:15px;font-weight:600;font-family:inherit;text-align:left;width:100%;transition:.15s}
.drawer a:hover, .drawer button:hover, .drawer a.on{border-color:var(--red);background:rgba(226,58,46,.08);color:#fff}
.drawer .close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--line2);font-size:20px;display:flex;align-items:center;justify-content:center}
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:79;opacity:0;pointer-events:none;transition:.3s}
.drawer-bg.on{opacity:1;pointer-events:auto}
/* MOBILE: i 3 controlli (lingua · menu · carrello) tutti 40px, in linea sullo stesso asse */
@media(max-width:640px){
  header .hbar .cart-btn{position:relative!important;top:auto!important;right:auto!important;width:40px!important;height:40px!important;margin:0!important;order:3}
  /* badge SEMPRE dentro il bottone (top/right positivi) -> mai fuori dallo schermo, anche su iPhone */
  header .hbar .cart-btn .cart-badge{top:0!important;right:0!important;min-width:16px!important;height:16px!important;padding:0 4px!important;font-size:10px!important;line-height:1!important;box-shadow:0 0 0 2px var(--bg)!important}
  header .hbar .cart-btn svg{width:21px!important;height:21px!important}
  header .hbar .menu-toggle{display:flex!important;position:static!important;width:40px!important;height:40px!important;order:2;flex:0 0 40px!important}
  /* margine extra a destra (safe-area iPhone) per non incollare i controlli al bordo */
  header .hbar{padding-right:max(14px, env(safe-area-inset-right, 14px))!important; padding-left:max(14px, env(safe-area-inset-left, 14px))!important}
  /* nascondo le voci a tendina su mobile: vanno nel drawer */
  header .navlink, header #authBtn, header #nav-avatar{display:none!important}
  /* brand piu piccolo su mobile */
  .brand{font-size:16px;gap:8px;min-width:0}
  .brand img{width:54px;height:54px}
  .brand span{min-width:0;white-space:nowrap}
  .brand small{font-size:7.5px;letter-spacing:.22em}
}
@keyframes cartShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg) scale(1.1)}40%{transform:rotate(10deg) scale(1.1)}60%{transform:rotate(-8deg) scale(1.05)}80%{transform:rotate(5deg) scale(1.02)}}
/* fly-to-cart animazione */
.fly-clone{position:fixed;z-index:9999;pointer-events:none;transition:transform .85s cubic-bezier(.4,0,.2,1), opacity .85s cubic-bezier(.4,0,.6,1);border-radius:14px;box-shadow:0 18px 50px -10px var(--glow), 0 0 0 2px var(--red) inset;background:#0a0b0d}
/* ---- footer legale + banner cookie + modale legale ---- */
.portale-foot{border-top:1px solid var(--line);margin-top:50px;padding:26px 20px;text-align:center}
.pf-wrap{max-width:920px;margin:0 auto}
.pf-legal a{color:var(--mut);text-decoration:none;font-size:13px;transition:color .2s;white-space:nowrap}
.pf-legal a:hover{color:var(--red)}
.pf-seller{margin-top:10px;font-size:11px;color:var(--mut2);line-height:1.6}
.cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:120;max-width:780px;margin:0 auto;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:0 16px 44px -10px rgba(0,0,0,.6);animation:ckIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes ckIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.ck-txt{font-size:12.5px;color:var(--ink);line-height:1.5;flex:1}
.ck-txt a{color:var(--red);text-decoration:none}
.lg-modal .lg-box{max-width:680px;width:100%;max-height:86vh;display:flex;flex-direction:column;padding:0;position:relative;overflow:hidden;text-align:left}
.lg-close{position:absolute;top:11px;right:13px;z-index:2;background:none;border:none;color:var(--mut);font-size:20px;cursor:pointer;line-height:1;width:32px;height:32px;border-radius:50%;transition:.2s}
.lg-close:hover{background:var(--bg3);color:var(--ink)}
.lg-tabs{display:flex;gap:2px;padding:16px 18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lg-tab{background:none;border:none;color:var(--mut);font-weight:700;font-size:13px;padding:9px 11px;cursor:pointer;border-bottom:2px solid transparent;transition:.2s;font-family:inherit}
.lg-tab:hover{color:var(--ink)} .lg-tab.on{color:var(--red);border-bottom-color:var(--red)}
.lg-body{padding:20px 24px 26px;overflow-y:auto;font-size:13.5px;line-height:1.65}
.lg-body h2{font-size:19px;margin:0 0 4px;color:var(--ink)} .lg-body h3{font-size:14px;margin:18px 0 6px;color:var(--red)}
.lg-body p{margin:0 0 10px;color:var(--mut)} .lg-body ul{margin:0 0 10px;padding-left:18px;color:var(--mut)} .lg-body li{margin-bottom:5px}
.lg-body b{color:var(--ink)} .lg-body a{color:var(--red)}
.lg-upd{font-size:11px!important;text-transform:uppercase;letter-spacing:.08em;color:var(--mut2)!important}
@media(max-width:640px){ .cookie-banner{flex-direction:column;align-items:stretch;text-align:center} }
@media(max-width:430px){
  .brand{font-size:13.5px;gap:7px}
  .brand img{width:42px;height:42px}
  .brand small{font-size:6.8px;letter-spacing:.13em}
  .hbar .langbtn{padding:0 10px}
  .langbtn .cv{display:none}
}


/* utility CSP-safe: sostituiscono gli attributi style= del markup */
[data-u="p1"]{background:#25d366}
[data-u="p2"]{background:#f5a524}
[data-u="p3"]{background:var(--grad)}
[data-u="p4"]{border-color:rgba(91,140,255,.4);background:linear-gradient(135deg,rgba(91,140,255,.06),transparent)}
[data-u="p5"]{color:#7fa3ff}
[data-u="p6"]{color:var(--ink)}
[data-u="p7"]{color:var(--mut);font-weight:400}
[data-u="p8"]{color:var(--red)}
[data-u="p9"]{color:var(--red);cursor:pointer;margin-left:6px}
[data-u="p10"]{color:var(--red);font-size:13px;min-height:18px;margin-top:10px;text-align:center}
[data-u="p11"]{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
[data-u="p12"]{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
[data-u="p13"]{display:flex;align-items:center;gap:8px}
[data-u="p14"]{display:flex;gap:10px}
[data-u="p15"]{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}
[data-u="p16"]{display:none}
[data-u="p17"]{display:none;margin-top:12px;padding:12px 14px;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.3);border-radius:12px;font-size:13px;color:var(--mut)}
[data-u="p18"]{display:none;margin:6px 0 2px}
[data-u="p19"]{flex:1}
[data-u="p20"]{flex:1;min-width:200px}
[data-u="p21"]{font-size:11px}
[data-u="p22"]{font-size:12.5px;color:var(--mut)}
[data-u="p23"]{font-size:13px;color:var(--mut);cursor:pointer}
[data-u="p24"]{font-size:16px;margin:18px 0 8px}
[data-u="p25"]{font-size:16px;margin:22px 0 10px}
[data-u="p26"]{font-size:16px;margin:22px 0 8px}
[data-u="p27"]{font-size:18px;margin-bottom:4px}
[data-u="p28"]{font-size:24px}
[data-u="p29"]{margin-bottom:0}
[data-u="p30"]{margin-bottom:10px;font-size:13px}
[data-u="p31"]{margin-bottom:14px}
[data-u="p32"]{margin-bottom:18px}
[data-u="p33"]{margin-bottom:22px}
[data-u="p34"]{margin-bottom:6px}
[data-u="p35"]{margin-bottom:8px}
[data-u="p36"]{margin-left:auto}
[data-u="p37"]{margin-top:0}
[data-u="p38"]{margin-top:10px;text-align:center}
[data-u="p39"]{margin-top:14px}
[data-u="p40"]{margin-top:16px}
[data-u="p41"]{margin-top:2px}
[data-u="p42"]{margin-top:4px}
[data-u="p43"]{margin-top:6px}
[data-u="p44"]{margin:0 0 16px;max-width:none}
[data-u="p45"]{margin:6px 0 4px}
[data-u="p46"]{padding-top:12px}
[data-u="p47"]{padding-top:12px;padding-bottom:0;border:none}
[data-u="p48"]{text-align:center;letter-spacing:.4em;font-family:ui-monospace,Menlo,monospace}
[data-u="p49"]{text-decoration:none;cursor:pointer}
[data-u="p50"]{text-transform:uppercase}
[data-u="p51"]{width:100%}
[data-u="p52"]{width:100%;margin-top:14px}
[data-u="p53"]{width:100%;margin-top:6px}
[data-u="p54"]{width:100%;margin-top:8px}
[data-u="p55"]{width:100%;text-align:center;letter-spacing:.12em;text-transform:uppercase;background:var(--bg3);border:1.5px solid var(--line2);border-radius:12px;padding:13px;color:var(--ink);font-size:16px;font-family:ui-monospace,Menlo,monospace}
[data-u="p56"]{width:14px;height:14px}
[data-u="p57"]{width:18px;height:18px}
[data-u="p58"]{width:18px;height:18px;margin-right:7px}
[data-u="p59"]{width:18px;height:18px;margin-right:8px}
[data-u="p60"]{width:34px;height:auto}


/* utility CSP-safe (markup generato da JS) */
[data-u="a1"]{cursor:pointer}
[data-u="a2"]{color:var(--mut)}
[data-u="a3"]{color:var(--warn);font-size:19px;margin:0 0 4px}
[data-u="a4"]{display:none}
[data-u="a5"]{display:none;margin-top:8px}
[data-u="a6"]{font-size:13px;color:var(--mut)}
[data-u="a7"]{font-size:12px}
[data-u="a8"]{color:var(--warn)}
[data-u="a9"]{padding-top:12px;border-bottom:none;font-size:13px}
[data-u="a10"]{color:var(--ink);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
[data-u="a11"]{width:100%;height:70%;object-fit:contain;background:#fff;border-radius:10px 10px 0 0}
[data-u="a12"]{padding:6px 10px;font-weight:800;font-size:12px;color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-u="a13"]{color:var(--red)}
[data-u="a14"]{display:flex;align-items:center;justify-content:center;font-size:34px}
[data-u="a15"]{color:var(--ok)}
[data-u="a16"]{margin-bottom:6px}
[data-u="a17"]{font-size:13px;color:var(--ink);background:var(--bg3);padding:10px 12px;border-radius:8px}
[data-u="a18"]{display:flex;gap:6px;align-items:center}
[data-u="a19"]{border:none;height:1px;background:var(--line);margin:6px 0}
[data-u="a20"]{display:block;color:var(--mut);font-size:11px;margin-top:2px}
[data-u="a21"]{padding-left:22px;border-left:2px solid rgba(226,58,46,.3);background:rgba(226,58,46,.04);border-radius:8px;margin-top:4px}
[data-u="a22"]{color:var(--ink)}
[data-u="a23"]{padding-left:22px;border-left:2px solid rgba(91,140,255,.4);background:rgba(91,140,255,.05);border-radius:8px;margin-top:4px}
[data-u="a24"]{color:#7fa3ff}
[data-u="a25"]{margin-top:8px}
[data-u="a26"]{margin-top:8px;color:var(--mut)}
[data-u="a27"]{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
[data-u="a28"]{margin-top:12px;background:rgba(226,58,46,.1);border:1px solid rgba(226,58,46,.35);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--ink)}
[data-u="a29"]{color:var(--red);font-weight:700}
[data-u="a30"]{font-size:13px}
[data-u="a31"]{color:#7fa3ff;margin-left:14px}
[data-u="a32"]{font-size:12px;margin-left:14px}
[data-u="a33"]{color:var(--mut);margin-left:14px;font-size:13px}
[data-u="a34"]{margin-bottom:20px}
[data-u="a35"]{margin-bottom:8px;font-size:13px}
[data-u="a38"]{max-width:470px}
[data-u="a39"]{font-size:34px;text-align:center;margin-bottom:4px}
[data-u="a40"]{text-align:center;margin:0 0 10px;font-size:20px}
[data-u="a41"]{font-size:14px;color:var(--mut);line-height:1.6;margin:0 0 12px}
[data-u="a42"]{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.65;margin-bottom:16px}
[data-u="a43"]{display:flex;gap:10px}
[data-u="a44"]{flex:1}
[data-u="a45"]{flex:1.5}
[data-u="a46"]{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center}
[data-u="a47"]{width:100%;height:100%;line-height:0}
[data-u="a48"]{flex:1;min-width:170px}
[data-u="a49"]{margin-top:8px;width:100%}
[data-u="a50"]{width:100%;margin-top:18px}
[data-u="a51"]{background:none;border:none;color:var(--mut);cursor:pointer;padding:0;margin-bottom:10px;font-size:13px}
[data-u="a52"]{color:var(--red);font-size:13px;min-height:18px;margin-top:8px;text-align:center}
[data-u="a53"]{width:100%;margin-top:6px}
[data-u="a54"]{text-align:center;font-size:18px;margin-bottom:6px}
[data-u="a55"]{text-align:center}
[data-u="a56"]{display:flex;gap:8px}
[data-u="a57"]{width:100%;margin-top:12px}
[data-u="a58"]{padding:30px;color:#900;font-size:12px;max-width:160px;text-align:center}
[data-u="a59"]{margin-left:8px;font-size:10px}
[data-u="a67"]{color:var(--mut);font-size:11px}
[data-u="a68"]{margin-bottom:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
[data-u="a69"]{flex:1;min-width:180px;background:var(--bg3);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;color:var(--ink);font-size:14px;font-family:inherit}
[data-u="a70"]{text-decoration:none}
[data-u="a71"]{margin:4px 0}
[data-u="a72"]{font-size:11px;opacity:.72}
[data-u="a73"]{font-size:11px;opacity:.6}
[data-u="a74"]{padding:24px}
[data-u="a75"]{margin-top:26px}
[data-u="a76"]{margin:10px auto 0;display:block}
[data-u="a77"]{margin-top:26px;opacity:.6}
[data-u="a78"]{opacity:.6}
[data-u="a79"]{background:#3a3a3a;color:#aaa}
[data-u="a80"]{color:#22c55e}
[data-u="a81"]{background:var(--bg2);border:1px solid var(--line);border-radius:16px;max-width:420px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
[data-u="a82"]{margin:0 0 6px;color:var(--ink)}
[data-u="a83"]{color:var(--mut);font-size:14px;margin:0 0 16px}
[data-u="a84"]{width:100%;box-sizing:border-box;padding:13px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:16px}
[data-u="a85"]{font-size:13px;min-height:18px;margin:8px 0 4px;color:var(--mut)}
[data-u="a86"]{width:100%}


/* stati dinamici senza style= inline */
.u-ok{color:var(--ok)}
.u-ink{color:var(--ink)}
.tf-chip[data-i="0"]{animation-delay:0ms}
.tf-chip[data-i="1"]{animation-delay:60ms}
.tf-chip[data-i="2"]{animation-delay:120ms}
.tf-chip[data-i="3"]{animation-delay:180ms}
.tf-chip[data-i="4"]{animation-delay:240ms}
.tf-chip[data-i="5"]{animation-delay:300ms}
.tf-chip[data-i="6"]{animation-delay:360ms}
.tf-chip[data-i="7"]{animation-delay:420ms}
.tf-chip[data-i="8"]{animation-delay:480ms}
.tf-chip[data-i="9"]{animation-delay:540ms}
.tf-chip[data-i="10"]{animation-delay:600ms}
.tf-chip[data-i="11"]{animation-delay:660ms}
.tf-chip[data-i="12"]{animation-delay:720ms}
.tf-chip[data-i="13"]{animation-delay:780ms}
.tf-chip[data-i="14"]{animation-delay:840ms}
.tf-chip[data-i="15"]{animation-delay:900ms}
.tf-chip[data-i="16"]{animation-delay:960ms}
.tf-chip[data-i="17"]{animation-delay:1020ms}
.tf-chip[data-i="18"]{animation-delay:1080ms}
.tf-chip[data-i="19"]{animation-delay:1140ms}
.own-grow{font-size:11px;font-weight:700}
.own-grow.up{color:var(--ok)}
.own-grow.down{color:var(--red)}