:root{--brand:#0b5aab;--brand-soft:#eef6ff;--ok:#198754;--ok-soft:#eaf8f0;--warn:#b26a00;--warn-soft:#fff6df;--bad:#c93434;--bad-soft:#fff0f0;--ink:#1d2733;--muted:#687586;--line:#e5eaf0;--card:#fff;--bg:#f5f8fb}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:THICCCBOI,Arial,sans-serif}.shell{width:min(1080px,calc(100% - 32px));margin:auto}.topbar{background:#fff;border-bottom:1px solid var(--line)}.topbar-inner{min-height:82px;display:flex;align-items:center;gap:18px}.topbar-copy{display:flex;flex-direction:column;line-height:1.25}.topbar-copy strong{font-size:18px}.topbar-copy span{font-size:14px;color:var(--muted)}.page{padding:34px 0 64px}.hero-card,.wizard-shell{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(29,39,51,.06)}.hero-card{padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:30px}.eyebrow,.step-kicker{text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--brand)}h1{font-size:34px;margin:7px 0 10px;line-height:1.1}.hero-card p{color:var(--muted);margin:0;max-width:690px}.overall{min-width:210px;padding:14px 16px;border-radius:14px;background:#f4f6f8;display:flex;align-items:center;gap:12px}.overall-dot{width:13px;height:13px;border-radius:50%;background:#9aa5b1;box-shadow:0 0 0 5px rgba(154,165,177,.14)}.overall small,.overall strong{display:block}.overall small{font-size:11px;color:var(--muted);text-transform:uppercase}.overall strong{font-size:16px}.overall[data-state=ok]{background:var(--ok-soft)}.overall[data-state=ok] .overall-dot{background:var(--ok)}.overall[data-state=warn]{background:var(--warn-soft)}.overall[data-state=warn] .overall-dot{background:var(--warn)}.overall[data-state=bad]{background:var(--bad-soft)}.overall[data-state=bad] .overall-dot{background:var(--bad)}
.wizard-progress{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;align-items:center;margin:24px 16px 18px}.wizard-dot{appearance:none;border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;color:#8a96a3;font-family:inherit;font-size:12px;font-weight:700;cursor:default}.wizard-dot span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e4e9ee;color:#7c8793;font-size:14px;transition:.2s}.wizard-dot b{font-weight:800}.wizard-dot.active{color:var(--brand)}.wizard-dot.active span{background:var(--brand);color:#fff;box-shadow:0 0 0 5px rgba(11,90,171,.1)}.wizard-dot.done{color:var(--ok)}.wizard-dot.done span{background:var(--ok);color:#fff}.wizard-dot.visited{cursor:pointer}.wizard-line{height:2px;background:#e2e8ee;margin:0 10px 20px}.wizard-shell{overflow:hidden;min-height:530px;display:flex;flex-direction:column}.wizard-step{display:none;animation:fadeSlide .24s ease}.wizard-step.active{display:block}.step-head{padding:26px 30px 21px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px}.step-head>div{flex:1}.step-head h2{font-size:25px;margin:5px 0 4px}.step-head p{margin:0;color:var(--muted)}.step-body{padding:28px 30px;min-height:335px}.status-pill{padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.status-pill.idle{background:#eef1f4;color:#748190}.status-pill.running{background:var(--brand-soft);color:var(--brand)}.status-pill.ok{background:var(--ok-soft);color:var(--ok)}.status-pill.warn{background:var(--warn-soft);color:var(--warn)}.status-pill.bad{background:var(--bad-soft);color:var(--bad)}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.fact{padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:#fbfcfd}.fact span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.fact strong{font-size:15px}.permission-note,.network-thresholds{border:1px solid #dbe9f7;background:#f4f9ff;color:#35536f;padding:12px 14px;border-radius:12px;margin-bottom:18px;font-size:14px}.primary-btn,.secondary-btn,.ghost-btn{border:0;border-radius:11px;padding:12px 18px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer}.primary-btn{background:var(--brand);color:#fff}.primary-btn:hover:not(:disabled){filter:brightness(.94)}.primary-btn:disabled{opacity:.42;cursor:not-allowed}.secondary-btn{background:#edf3f8;color:var(--brand)}.ghost-btn{background:transparent;color:#516171;border:1px solid var(--line)}.center-action{text-align:center;margin-top:20px}.help-box{margin-top:18px;padding:16px 18px;border-radius:13px;font-size:14px}.help-box h3{font-size:16px;margin:0 0 7px}.help-box p:last-child,.help-box ol:last-child,.help-box ul:last-child{margin-bottom:0}.help-box.ok{background:var(--ok-soft);color:#16643f}.help-box.warn{background:var(--warn-soft);color:#744800}.help-box.bad{background:var(--bad-soft);color:#8e2929}.camera-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.75fr);gap:22px}.media-preview{position:relative;aspect-ratio:16/9;background:#101418;border-radius:15px;overflow:hidden}.media-preview video{width:100%;height:100%;object-fit:cover}.video-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#9aa6b2}.side-panel,.mic-panel{border:1px solid var(--line);border-radius:15px;padding:19px;background:#fbfcfd}.side-panel label,.mic-panel label{display:block;font-weight:800;font-size:13px}.form-select{width:100%;margin-top:7px}.mini-status{display:grid;grid-template-columns:13px 1fr auto;align-items:center;gap:9px;border-radius:11px;background:#eef1f4;padding:12px 13px;margin-top:18px}.mini-status span{width:10px;height:10px;border-radius:50%;background:#96a1ad}.mini-status b{font-size:14px}.mini-status em{font-size:12px;font-style:normal;color:var(--muted)}.mini-status.ok{background:var(--ok-soft)}.mini-status.ok span{background:var(--ok)}.mini-status.bad{background:var(--bad-soft)}.mini-status.bad span{background:var(--bad)}.mini-status.warn{background:var(--warn-soft)}.mini-status.warn span{background:var(--warn)}.microcopy{font-size:13px;color:var(--muted);margin:16px 0 0}.mic-panel{max-width:650px;margin:auto}.mic-test{margin-top:20px}.mic-test.large{padding:18px;border-radius:13px;background:#fff;border:1px solid var(--line)}.mic-row{display:flex;justify-content:space-between;gap:15px;font-size:13px}.mic-row span{color:var(--muted)}.meter-track{height:14px;background:#e5eaf0;border-radius:99px;overflow:hidden;margin-top:11px}.meter-fill{height:100%;width:0;background:linear-gradient(90deg,#51a6e8,#0b5aab);border-radius:99px;transition:width .08s linear}.network-progress{height:8px;border-radius:99px;background:#e6ebf0;overflow:hidden;margin:18px 0}.network-progress>div{height:100%;width:0;background:var(--brand);transition:width .2s}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{text-align:center;padding:20px 10px;border:1px solid var(--line);border-radius:13px;background:#fbfcfd}.metric span,.metric small{display:block;color:var(--muted)}.metric strong{font-size:28px;line-height:1.15}.metric small{font-size:11px}.wizard-nav{margin-top:auto;border-top:1px solid var(--line);padding:17px 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.wizard-nav .next-btn{justify-self:end}.wizard-counter{color:var(--muted);font-size:13px;font-weight:800}.final-panel{text-align:center;padding:45px 30px 36px}.summary-icon{margin:0 auto 15px;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#eef1f4;color:#72808d;font-size:31px;font-weight:900}.final-panel h2{font-size:28px;margin:7px 0}.final-panel>p{color:var(--muted);max-width:680px;margin:0 auto 22px}.final-panel.ok .summary-icon{background:var(--ok-soft);color:var(--ok)}.final-panel.warn .summary-icon{background:var(--warn-soft);color:var(--warn)}.final-panel.bad .summary-icon{background:var(--bad-soft);color:var(--bad)}.summary-list{max-width:680px;margin:20px auto 24px;text-align:left;display:grid;gap:8px}.summary-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fbfcfd}.summary-row strong{font-size:14px}.summary-row span{font-size:12px;font-weight:800}.summary-row .ok{color:var(--ok)}.summary-row .warn{color:var(--warn)}.summary-row .bad{color:var(--bad)}.summary-row .idle{color:var(--muted)}.privacy-copy{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 0}@keyframes fadeSlide{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(max-width:800px){.hero-card{display:block}.overall{margin-top:20px}.wizard-progress{margin-left:0;margin-right:0}.wizard-dot b{display:none}.wizard-line{margin-bottom:0}.result-grid,.metrics{grid-template-columns:repeat(2,1fr)}.camera-layout{grid-template-columns:1fr}.step-head{align-items:flex-start}.wizard-shell{min-height:auto}}
@media(max-width:520px){.shell{width:min(100% - 20px,1080px)}.topbar-copy span{display:none}.hero-card{padding:22px}.hero-card h1{font-size:27px}.step-head{padding:22px;display:block}.step-head .status-pill{display:inline-block;margin-top:12px}.step-body{padding:22px 18px}.result-grid,.metrics{grid-template-columns:1fr}.wizard-nav{padding:14px}.wizard-progress{margin-top:18px}.wizard-dot span{width:30px;height:30px}.wizard-line{margin-left:5px;margin-right:5px}.overall{min-width:0}.final-panel{padding:34px 18px}}

/* V3.1 - pulizia UX */
.overall{min-width:230px}
.overall[data-state=progress]{background:var(--brand-soft)}
.overall[data-state=progress] .overall-dot{background:var(--brand);box-shadow:0 0 0 5px rgba(11,90,171,.1)}
.mic-panel{max-width:780px}
.center-action .secondary-btn{padding:11px 17px}
.wizard-nav{display:flex;justify-content:space-between;gap:16px}
.wizard-nav .ghost-btn{min-width:120px}
.wizard-nav .next-btn{margin-left:auto}
.permission-note.is-resolved{display:none}
.help-box.ok{border:1px solid rgba(25,135,84,.12)}
.step-body.test-complete .permission-note{display:none}
@media(max-width:520px){.wizard-nav .ghost-btn{min-width:auto}.wizard-nav{gap:10px}.wizard-nav button{padding-left:14px;padding-right:14px}}

/* V4.1 - header e testata compatti */
.topbar-inner{min-height:68px;gap:14px}
.topbar-inner img{width:94px;height:auto}
.topbar-copy strong{font-size:17px}
.topbar-copy span{font-size:13px}
.page{padding:26px 0 58px}
.hero-card{padding:22px 28px 17px;display:block}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:28px}
.hero-copy{min-width:0}
.hero-copy h1{font-size:30px;margin:5px 0 7px;line-height:1.08}
.hero-copy p{font-size:15px;line-height:1.4;max-width:650px}
.overall{min-width:215px;padding:12px 14px;border:1px solid rgba(29,39,51,.04)}
.overall strong{font-size:15px}
.wizard-progress{margin:18px 0 0;padding-top:17px;border-top:1px solid var(--line)}
.wizard-line{margin-left:12px;margin-right:12px}
.wizard-shell{margin-top:18px}
.step-head{padding-top:23px;padding-bottom:19px}

@media(max-width:800px){
  .hero-top{display:block}
  .overall{margin-top:16px;width:max-content;max-width:100%}
  .wizard-progress{margin-top:18px}
}
@media(max-width:520px){
  .topbar-inner{min-height:60px;gap:10px}
  .topbar-inner img{width:80px}
  .topbar-copy strong{font-size:15px}
  .page{padding-top:18px}
  .hero-card{padding:19px 18px 15px}
  .hero-copy h1{font-size:25px}
  .hero-copy p{font-size:14px}
  .overall{width:100%;margin-top:14px}
  .wizard-progress{padding-top:14px}
}


/* V4.2 - rifiniture contenuti */
.device-body{padding-top:24px}
.device-intro{max-width:860px;margin:0 auto 22px;border:1px solid #dce8f3;background:linear-gradient(180deg,#f8fbff 0%,#fbfdff 100%);border-radius:16px;padding:20px 22px}
.device-intro-copy{text-align:center;max-width:680px;margin:0 auto 18px}
.device-intro-copy strong{display:block;font-size:17px;margin-bottom:4px}
.device-intro-copy p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.preflight-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preflight-item{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.preflight-item>span{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:900;font-size:13px}
.preflight-item b,.preflight-item small{display:block}
.preflight-item b{font-size:13px;line-height:1.2}
.preflight-item small{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.25}
.device-intro-note{text-align:center;margin:15px 0 0;color:var(--muted);font-size:12px}
.wizard-step[data-step="0"] .step-body{min-height:285px}
.wizard-step[data-step="0"] .center-action{margin-top:16px}

/* Webcam: anteprima meno dominante */
.camera-layout{grid-template-columns:minmax(0,1.55fr) minmax(250px,.7fr);align-items:stretch}
.media-preview{aspect-ratio:16/8.4;max-height:320px}

/* Microfono: pannello visibile anche prima dell'avvio */
.mic-panel-ready{display:block;opacity:.78;transition:opacity .2s,border-color .2s,box-shadow .2s}
.mic-panel-ready.is-active{opacity:1;border-color:#d5e2ee;box-shadow:0 8px 20px rgba(29,39,51,.035)}
.mic-panel-ready .form-select:disabled{background:#f2f4f6;color:#7d8996;cursor:not-allowed}
.mic-panel-ready:not(.is-active) .meter-track{background:#edf1f4}
.mic-panel-ready:not(.is-active) .meter-fill{width:0!important}
.meter-hint{display:block;color:var(--muted);font-size:11px;margin-top:9px}
.wizard-step[data-step="2"] .step-body{min-height:315px}

/* Esito più compatto */
.final-panel{padding:34px 30px 28px}
.summary-icon{width:58px;height:58px;font-size:28px;margin-bottom:11px}
.final-panel h2{font-size:27px;margin:5px 0}
.final-panel>p{margin-bottom:16px}
.summary-list{margin:16px auto 20px;gap:7px}
.summary-row{padding:10px 13px}
.wizard-step[data-step="4"]+.wizard-nav{padding-top:14px;padding-bottom:14px}

@media(max-width:800px){
  .preflight-list{grid-template-columns:1fr}
  .media-preview{max-height:none;aspect-ratio:16/9}
}
@media(max-width:520px){
  .device-intro{padding:17px 15px}
  .preflight-item{padding:11px 12px}
  .final-panel{padding:28px 18px 24px}
}

/* V4.3 refinements */
.device-intro-copy p{font-size:15px;line-height:1.55}
.device-intro-note{font-size:13px;line-height:1.5}
.preflight-item small{font-size:12.5px;line-height:1.35}
.camera-layout.camera-stack{display:flex;flex-direction:column;max-width:820px;margin:0 auto;gap:16px}
.camera-stack .camera-control{padding:16px 18px;background:#fbfcfd}
.camera-stack .camera-control .microcopy{margin-top:10px}
.camera-stack .media-preview{width:100%;max-height:390px;aspect-ratio:16/9}
#microphoneHelp.ok{background:#f2fbf6;padding:14px 18px}
#microphoneHelp.ok h3{font-size:15px;margin-bottom:5px}
#microphoneHelp.ok p{font-size:13px}
.summary-network-detail{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:600}
@media(max-width:800px){.camera-layout.camera-stack{max-width:none}.camera-stack .media-preview{max-height:none}}