/* HAVIA — stile dell'interfaccia. Palette ricavata dal logo HAVIA A. Caratteri ospitati in locale (OFL). */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:500;font-display:swap;src:url(fonts/source-serif-4-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-display:swap;src:url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2")}

:root{
  --navy-900:#0a1b33; --navy-800:#0f2a4d; --navy-700:#163b67;
  --blue-600:#0a4a9c; --blue-500:#1a63c4; --blue-100:#e3edf9;
  --cyan-500:#18a9e0; --cyan-100:#dff4fc;
  --ink:#14233a; --muted:#5b6b82; --line:#dfe6ef;
  --bg:#f5f8fc; --surface:#ffffff;
  --ok:#14744f; --alert:#b3261e; --alert-bg:#fdecea;
  --radius:14px; --shadow:0 1px 2px rgba(10,27,51,.05),0 8px 28px rgba(10,27,51,.06);
  --serif:"Source Serif 4",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 1px 1px,rgba(22,59,103,.10) 1px,transparent 0);background-size:26px 26px}
h1,h2,h3{color:var(--navy-900);margin:0}
h1{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:-.01em}
button{font:inherit}
.app{position:relative;display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* barra laterale */
.side{background:linear-gradient(180deg,var(--navy-900),var(--navy-800));color:#c9d6ea;padding:22px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px}
.brand img{width:38px;height:38px;border-radius:9px;background:#fff;object-fit:cover}
.brand b{font-size:19px;letter-spacing:.14em;color:#fff}
.brand small{display:block;font-size:10.5px;color:#8fa6c6}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#6f87a8;margin:10px 10px 6px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px}
.nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.nav button:focus-visible{outline:2px solid var(--cyan-500)}
.nav button.on{background:rgba(24,169,224,.14);color:#fff;box-shadow:inset 3px 0 0 var(--cyan-500)}
.nav svg{width:18px;height:18px;flex:none}
.side .foot{margin-top:auto;font-size:12px;color:#7f95b5;padding:10px;border-top:1px solid rgba(255,255,255,.08)}

.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:999px}
.b-exp{background:#fff4dc;color:#7a4e00}.b-clin{background:var(--alert-bg);color:var(--alert)}
.b-a{background:#e2f4ec;color:var(--ok)}.b-b{background:var(--blue-100);color:var(--blue-600)}.b-c{background:#eef0f4;color:#566275}
.b-soon{background:#eef0f4;color:#6b7686}

main{padding:28px 36px 48px;max-width:1240px;width:100%;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px}
.crumbs{font-size:13px;color:var(--muted)}
.view{display:none}.view.on{display:block}

.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 30px;box-shadow:var(--shadow);margin-bottom:26px}
.hero p{color:var(--muted);margin:10px 0 18px;max-width:52ch}
.hero .logo{justify-self:end;width:min(380px,100%)}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:600;font-size:14px}
.btn:focus-visible{outline:3px solid rgba(24,169,224,.5);outline-offset:2px}
.btn.pri{background:var(--blue-600);color:#fff}.btn.pri:hover{background:var(--blue-500)}
.btn.pri[disabled]{background:#9db3d1;cursor:not-allowed}
.btn.sec{background:var(--surface);color:var(--blue-600);border:1px solid var(--line)}.btn.sec:hover{border-color:var(--blue-500)}
.section-title{margin:6px 0 14px}.section-title p{margin:4px 0 0;color:var(--muted);font-size:13.5px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;text-align:left}
button.card{all:unset;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:transform .15s,border-color .15s}
button.card:hover{transform:translateY(-2px);border-color:#bcd0ea}
button.card:focus-visible{outline:3px solid rgba(24,169,224,.5)}
.card.soon{opacity:.72}
.card .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--blue-100);color:var(--blue-600)}
.card .ico svg{width:22px;height:22px}
.card h3{font-size:16.5px}
.card p{margin:0;color:var(--muted);font-size:13.5px;flex:1}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.card.clin .ico{background:var(--alert-bg);color:var(--alert)}

/* consenso */
.narrow{max-width:720px}
.panelbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 32px;box-shadow:var(--shadow)}
.panelbox h2{font-family:var(--serif);font-size:24px;margin-bottom:10px}
.panelbox ul{color:var(--muted);padding-left:18px}
.field{display:flex;flex-direction:column;gap:6px;margin:18px 0}
.field input[type=text]{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;max-width:260px}
.field small{color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.error{color:var(--alert);font-size:13.5px;min-height:1.2em}

/* sessione */
.session{display:grid;grid-template-columns:1fr 300px;gap:22px}
.qbox:focus{outline:none}
.qbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 34px;box-shadow:var(--shadow)}
.prog{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);margin-bottom:22px}
.bar{flex:1;height:6px;background:#e8eef6;border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-600),var(--cyan-500));border-radius:9px;transition:width .3s}
.q{font-family:var(--serif);font-size:24px;line-height:1.35;color:var(--navy-900);margin:0 0 6px}
.qhint{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.likert{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.likert.six{grid-template-columns:repeat(6,1fr);gap:8px}
.likert.two{grid-template-columns:repeat(2,minmax(0,200px))}.likert.three{grid-template-columns:repeat(3,1fr)}.likert.four{grid-template-columns:repeat(4,1fr)}
.qstem{font-size:14px;color:var(--muted);margin:0 0 8px;line-height:1.5}.q.plain{font-size:21px}
.support{margin-top:16px;padding:14px 16px;border-radius:12px;background:#edf6ef;border:1px solid #bfdfc8;color:#1b4d2c;font-size:14px;line-height:1.55}
.green{background:#edf6ef;border:1px solid #bfdfc8;border-left:6px solid #1b6b3a}.green h2,.green h3{color:#1b6b3a}
.gstamp{background:#1b6b3a;color:#fff;font-weight:700;font-size:11px;letter-spacing:.06em;padding:5px 10px;border-radius:6px}
.risk{padding:12px 14px;border-radius:10px;margin:12px 0}.risk.urgente{background:var(--alert-bg);border:1px solid var(--alert)}
.risk.positivo{background:#fff4dc;border:1px solid #b7791f}.risk.nessuno{background:#fff;border:1px solid #bfdfc8}
.b-urg{background:var(--alert);color:#fff}
.gdetail{border:1px solid #bfdfc8;border-radius:10px;padding:8px 12px;margin:8px 0;background:#fff}.gdetail summary{cursor:pointer}
.gdetail ul{margin:4px 0 6px 18px;padding:0}.follow.support{background:#edf6ef;border:1px solid #bfdfc8;border-radius:12px;padding:14px}
.evalform .row{display:flex;gap:12px;flex-wrap:wrap}.evalform textarea{width:100%}.tile.alert{border-color:var(--alert);color:var(--alert)}
.green table.mini td:nth-child(2),.green table.mini td:nth-child(3){white-space:nowrap;padding-left:10px}
.h3r{font-size:13px;margin:14px 0 4px;color:var(--navy-700)}
table.mini{width:100%;border-collapse:collapse;font-size:12.5px}table.mini td{padding:3px 0;border-bottom:1px solid var(--line)}table.mini td:last-child{text-align:right}
.likert button{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center;font-size:13px;color:var(--muted);background:#fbfcfe;transition:background .12s,border-color .12s}
.likert button b{display:block;font-size:18px;color:var(--navy-700);margin-bottom:4px}
.likert button:hover,.likert button:focus-visible{border-color:var(--blue-500);background:var(--blue-100);color:var(--blue-600)}
.likert button[aria-pressed=true]{border-color:var(--blue-500);background:var(--blue-100);color:var(--blue-600);box-shadow:0 0 0 3px rgba(26,99,196,.12)}
.follow{border-left:3px solid var(--cyan-500);background:var(--cyan-100);border-radius:0 10px 10px 0;padding:14px 16px;font-size:14.5px}
.follow textarea{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;min-height:120px;background:#fff;resize:vertical}
.qnav{display:flex;justify-content:space-between;margin-top:24px;gap:10px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);font-size:13.5px}
.panel h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.panel+.panel{margin-top:14px}
.step{display:flex;gap:10px;align-items:center;padding:6px 0;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:#d3dce8;flex:none}
.step.done .dot{background:var(--ok)}.step.now .dot{background:var(--cyan-500);box-shadow:0 0 0 4px var(--cyan-100)}
.step.now{color:var(--ink);font-weight:600}

/* report */
.rep{display:grid;grid-template-columns:1fr 320px;gap:22px}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 32px;box-shadow:var(--shadow)}
.rhead{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px;gap:16px}
.rhead img{height:86px}
.rhead .sub{margin-top:6px;font-size:13px;color:var(--muted)}
.stamp{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#7a4e00;background:#fff4dc;border:1px dashed #e5b866;padding:6px 10px;border-radius:8px;text-align:center;white-space:nowrap}
.trait{display:grid;grid-template-columns:170px 1fr 92px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px dashed #edf1f6;font-size:14px}
.scale{position:relative;height:10px;background:linear-gradient(90deg,#eef3f9,#dfe9f6);border-radius:9px}
.scale .ci{position:absolute;top:0;height:10px;border-radius:9px;background:rgba(24,169,224,.30)}
.scale .pt{position:absolute;top:-4px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--blue-600);border:3px solid #fff;box-shadow:0 1px 4px rgba(10,27,51,.3)}
.scale::after{content:"";position:absolute;left:50%;top:-5px;bottom:-5px;width:1px;background:#b7c6da}
.trait .lvl{text-align:right;font-size:12.5px;color:var(--muted)}
.trait .lvl b{display:block;color:var(--ink);font-size:13px}
details.ev{grid-column:1/-1;font-size:13px;color:var(--muted)}
details.ev summary{cursor:pointer;color:var(--blue-600)}
details.ev li{margin:2px 0}
.note{font-size:13px;color:var(--muted);margin-top:16px;padding:12px 14px;background:#f7f9fc;border-radius:10px}
.lens{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #edf1f6}
table.list{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.list th,table.list td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
table.list th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#f9fbfd}
footer.legal{margin-top:30px;font-size:12px;color:var(--muted)}

@media (max-width:1100px){.grid{grid-template-columns:1fr 1fr}.session,.rep{grid-template-columns:1fr}}
@media (max-width:760px){.app{grid-template-columns:minmax(0,1fr)}.top .badge{display:none}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:12px 16px}.nav{flex-direction:row;flex-wrap:wrap}.nav .lbl,.side .foot{display:none}
  main{padding:18px 16px}.grid{grid-template-columns:1fr}.hero{grid-template-columns:1fr}.hero .logo{justify-self:start}
  .likert,.likert.six,.likert.four,.likert.three,.likert.two{grid-template-columns:1fr}.trait{grid-template-columns:110px 1fr 70px}.qbox,.rcard,.panelbox{padding:20px}}
@media print{
  body{background:#fff}body::before,.side,.top,.no-print{display:none!important}
  .app{display:block}main{padding:0}.rep{display:block}.rcard,.panel{box-shadow:none;border:none}
  .panel{break-inside:avoid;margin-top:14px}details.ev{display:block}details.ev:not([open]) summary~*{display:block}
}

/* --- R3: modalità, ingresso, codici ------------------------------------------------------------ */
body.mode-loading .app,body.mode-loading .gate{visibility:hidden}
body.mode-gate .app{display:none}
body:not(.mode-gate) .gate{display:none}
body.mode-ex .pt-only,body.mode-pt .ex-only{display:none}
.gate{position:relative;min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(24,169,224,.10),transparent),radial-gradient(900px 500px at -10% 110%,rgba(10,74,156,.10),transparent)}
.gate-card{width:min(460px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px 32px;box-shadow:0 20px 60px rgba(10,27,51,.10)}
.gate-logo{display:block;width:min(300px,85%);margin:0 auto 22px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:#eef3f9;border-radius:11px;padding:4px;margin-bottom:18px}
.tabs button{all:unset;cursor:pointer;text-align:center;padding:9px 6px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.tabs button.on{background:#fff;color:var(--blue-600);box-shadow:0 1px 3px rgba(10,27,51,.12)}
.tabs button:focus-visible{outline:2px solid var(--cyan-500)}
.tabpane{display:none}.tabpane.on{display:block}
.gate .field input:not([type=checkbox]),.panelbox .field input:not([type=checkbox]),.panelbox select{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;width:100%;max-width:none;background:#fff}
.field input:focus,.panelbox select:focus,.follow textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(26,99,196,.14)}
.code-input{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.gate-foot{margin:18px 0 0;text-align:center;font-size:12px;color:var(--muted)}
.btn.wide{width:100%}
.muted{color:var(--muted)}.small{font-size:12.5px}.mono{font-family:ui-monospace,Consolas,monospace}
.h2s{font-size:19px}.h2r{font-size:18px;margin-bottom:6px}.legend{font-size:13px;color:var(--muted);margin-bottom:8px}
.lens.last{border:none}
.linkbtn{all:unset;cursor:pointer;color:#9fc3ef;font-size:12.5px;text-decoration:underline;margin:4px 0}
.two{display:grid;grid-template-columns:1fr 320px;gap:22px;margin-bottom:26px;align-items:start}
.panelbox fieldset{border:none;padding:0;margin:18px 0}
.panelbox legend{margin-bottom:8px}
.checks{display:flex;flex-direction:column;gap:8px}
.checks .check{align-items:center}
.check.off{color:#9aa6b6}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.row .field{margin:10px 0;min-width:160px}
.codebox{margin-top:20px;border:1px solid #bcd7f2;background:linear-gradient(180deg,#f3f8fe,#fff);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.bigcode{font-family:ui-monospace,Consolas,monospace;font-size:22px;font-weight:700;letter-spacing:.06em;color:var(--navy-900);word-break:break-all;user-select:all}
table.list td .btn{padding:6px 12px;font-size:13px}
@media (max-width:1100px){.two{grid-template-columns:1fr}}
@media (max-width:760px){.gate-card{padding:22px 18px}.bigcode{font-size:18px}table.list{display:block;overflow-x:auto}}

/* --- R4 ---------------------------------------------------------------------------------------- */
a.brand{text-decoration:none;color:inherit}
.gate-title{font-family:var(--serif);font-size:22px;margin:0 0 8px}
.gate-foot a{color:var(--blue-600)}
body.mode-pt .gate{display:none}
[hidden]{display:none!important}

/* --- R5: report PDF e messaggio del codice --- */
a.btn{text-decoration:none}
.pdf-links{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.msg-preview{margin-top:10px}.msg-preview summary{cursor:pointer;font-size:13px;color:var(--blue-600)}
.msg-preview pre{white-space:pre-wrap;font:12.5px/1.5 Inter,system-ui,sans-serif;background:#f6f9fd;border:1px solid var(--line);border-radius:10px;padding:12px;max-height:320px;overflow:auto}
table.list td > b{white-space:nowrap}
table.list td .check.rel{font-size:12.5px;white-space:nowrap;margin-right:6px}

/* --- R5: selettore della lingua --- */
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.langsw button{all:unset;cursor:pointer;padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.langsw button.on{background:var(--blue-600);color:#fff}
.langsw button:focus-visible{outline:2px solid var(--cyan-500)}
.gate-lang{display:flex;justify-content:flex-end;margin:-10px -6px 6px 0}
.top-right{display:inline-flex;align-items:center;gap:10px}
/* R6: dati facoltativi, informativa, domanda di controllo, correzione, gruppo di confronto */
.pdata{border:1px solid var(--line);border-radius:12px;padding:6px 16px 4px;margin:18px 0}
.pdata legend,.pdata summary{padding:0 6px;font-size:14px;cursor:pointer}
.pdata .row{display:flex;flex-wrap:wrap;gap:12px}.pdata .row .field{flex:1;margin:8px 0}
.pdata input,.pdata select{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;width:100%;max-width:none;background:#fff}
.privacy{background:#f3f7fc;border-radius:12px;padding:10px 16px;margin:14px 0;font-size:13.5px}
.privacy summary{cursor:pointer}.privacy ul{margin:8px 0 2px;padding-left:18px}.privacy li{margin:3px 0}
.check + .check{margin-top:8px}
.checkq{border:2px dashed var(--blue-500);background:var(--blue-100);border-radius:12px;padding:16px 18px;margin:6px 0 22px;font-size:16px;color:var(--navy-700)}
.trait .lvl small{display:block;color:var(--blue-600);font-size:11.5px}
.rhead .sub.who{font-weight:600;color:var(--ink);margin-top:2px}
.tiny{font-size:11.5px}
/* R7: profilo attitudinale */
.holland{display:flex;align-items:baseline;gap:14px;margin:6px 0 16px}.holland span{color:var(--muted);font-size:13px}
.holland b{font-family:"Source Serif 4",serif;font-size:40px;letter-spacing:4px;color:var(--navy-900,#0a1b33)}
.ibar{display:grid;grid-template-columns:130px 1fr 34px;gap:10px;align-items:center;margin:7px 0;font-size:13.5px}
.ibar .track{background:#eef2f7;border-radius:6px;height:10px;overflow:hidden}.ibar .track i{display:block;height:100%;border-radius:6px}
.ibar b{text-align:right}
ol.occ{padding-left:18px;margin:6px 0}ol.occ li{margin:6px 0;font-size:13.5px}ol.occ small{display:block;color:var(--muted);font-size:11.5px}

/* R12a: profilo cognitivo */
.cogmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:4px 0 6px}
.cogfig{display:flex;justify-content:center;margin:10px 0 14px}
.cogmatrix{display:inline-grid;gap:6px;padding:8px;background:#f6f8fc;border-radius:12px}
.cogrow{display:flex;gap:6px}
.cogseries{font-size:24px;letter-spacing:.04em;color:var(--navy-700);padding:10px 16px;background:#f6f8fc;border-radius:12px}
.cogtarget{padding:6px;background:#f6f8fc;border-radius:12px}
.cogopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cogopts.svg{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.cogopts button{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;font-size:13px;color:var(--navy-700);background:#fbfcfe;display:flex;flex-direction:column;align-items:center;gap:4px}
.cogopts button b{font-size:13px;color:var(--muted)}
.cogopts button:hover,.cogopts button:focus-visible{border-color:var(--blue-500);background:var(--blue-100)}
.cogopts button[aria-pressed=true]{border-color:var(--blue-500);background:var(--blue-100)}
.cogopts button.dk{color:var(--muted);font-size:12px}
.cogopt svg{width:84px;height:84px}
.ibar .track.cogtrack{position:relative;overflow:visible}
.cogtrack em{position:absolute;top:0;bottom:0;border-radius:6px}
.cogtrack i.dot{position:absolute;top:50%;width:12px!important;height:12px;border-radius:50%;transform:translate(-50%,-50%)}
.cogspan{font-size:64px;font-weight:700;color:var(--navy-700);text-align:center;min-height:96px;margin:18px 0}
.cogspan-in{display:flex;gap:10px;justify-content:center;margin:18px 0}
.cogspan-in input{font-size:28px;letter-spacing:.3em;text-align:center;width:min(320px,70vw);padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.cogspeed{display:flex;gap:18px;align-items:center;font-size:34px;padding:12px 20px;background:#f6f8fc;border-radius:12px}
.cogspeed i{color:var(--muted);font-style:normal}
/* C1: più test sullo stesso codice */
.transition{padding:6px 2px}.transition h2{margin:0 0 10px}
.testtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;grid-column:1/-1}
.note.warn{background:#fff6e2;border-color:#e0b25a}