/* Snakk — interfaccia da terminale/ingegneria: scura, pannelli con bordo sottile, un solo colore d'accento.
   Colori solo da qui (:root). Tema scuro di base; chiaro con data-theme="light"; "auto" segue il sistema. */
:root{
  /* Palette "Grafite" (di base): grigi neutri, un solo accento freddo. Le altre: [data-theme="paper"] e [data-theme="midnight"]. */
  --bg:#111315; --surface:#181b1e; --surface2:#202428; --ink:#e8eaed; --muted:#8e969f; --line:#2b3036;
  --brand:#5eb8c9; --brand-soft:rgba(94,184,201,.10); --brand-ink:#e8eaed; --accent:#5eb8c9; --flag:#5eb8c9;
  --good:#5fbf8a; --good-bg:#14261d; --bad:#e8946f; --bad-bg:#2c1d18;
  --f-ui:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --f-display:var(--f-mono);
  --accent2:var(--bad); --on-accent:var(--bg); --grad:linear-gradient(var(--accent),var(--accent)); --bgfx:none;
  --r:6px;
  color-scheme:dark}
:root[data-theme="paper"]{
  --bg:#f5f1ea; --surface:#fbf9f5; --surface2:#ece6db; --ink:#25221d; --muted:#6f685d; --line:#d9d1c3;
  --brand:#2f6f73; --brand-soft:rgba(47,111,115,.09); --brand-ink:#25221d; --accent:#2f6f73; --flag:#2f6f73;
  --good:#2e7d4f; --good-bg:#e0f0e5; --bad:#b4532a; --bad-bg:#f6e4da;
  color-scheme:light}
:root[data-theme="amber"]{
  /* "Ambra": antracite caldo con giallo ambra e arancio, come nei cruscotti scuri */
  --bg:#1c1d21; --surface:#26282d; --surface2:#32353b; --ink:#f3f2ee; --muted:#9b9da4; --line:#3a3d44;
  --brand:#f7c531; --brand-soft:rgba(247,197,49,.14); --brand-ink:#f3f2ee; --accent:#f7c531; --flag:#f7c531; --accent2:#f2672c;
  --on-accent:#1d1a0f; --grad:linear-gradient(135deg,#fbd653,#f3a02a);
  --good:#7fd18b; --good-bg:#1b2b20; --bad:#f2672c; --bad-bg:#32201a;
  color-scheme:dark}
:root[data-theme="norsk"]{
  /* "Norsk": blu notte e rosso, dai colori della bandiera norvegese */
  --bg:#0a1230; --surface:#111b45; --surface2:#1b2a63; --ink:#f3f6ff; --muted:#9fb0dc; --line:#2a3b7a;
  --brand:#ff6577; --brand-soft:rgba(255,101,119,.14); --brand-ink:#f3f6ff; --accent:#ff6577; --flag:#ff6577; --accent2:#5b86ff;
  --on-accent:#fff; --grad:linear-gradient(135deg,#e5324b,#3a5fe0);
  --bgfx:radial-gradient(60% 40% at 95% 0%,rgba(58,95,224,.38),transparent 70%),radial-gradient(55% 35% at 0% 30%,rgba(229,50,75,.22),transparent 70%);
  --good:#62e0b0; --good-bg:#0f2a2e; --bad:#ff8a6b; --bad-bg:#33202a;
  color-scheme:dark}
:root[data-theme="midnight"]{
  --bg:#0f1420; --surface:#151c2b; --surface2:#1c2538; --ink:#e3e8f2; --muted:#8a96ad; --line:#2a3550;
  --brand:#8aa4d6; --brand-soft:rgba(138,164,214,.11); --brand-ink:#e3e8f2; --accent:#8aa4d6; --flag:#8aa4d6;
  --good:#5cc095; --good-bg:#122a24; --bad:#e59a7a; --bad-bg:#2d2019;
  color-scheme:dark}
@media (prefers-color-scheme:light){:root[data-theme="auto"]{
  --bg:#f5f1ea; --surface:#fbf9f5; --surface2:#ece6db; --ink:#25221d; --muted:#6f685d; --line:#d9d1c3;
  --brand:#2f6f73; --brand-soft:rgba(47,111,115,.09); --brand-ink:#25221d; --accent:#2f6f73; --flag:#2f6f73;
  --good:#2e7d4f; --good-bg:#e0f0e5; --bad:#b4532a; --bad-bg:#f6e4da;
  color-scheme:light}}

html{-webkit-text-size-adjust:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html.nozoom{touch-action:manipulation}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background-color:var(--bg);background-image:var(--bgfx);background-attachment:fixed;color:var(--ink);font:400 15px/1.5 var(--f-ui);padding-inline:16px;padding-block:0 100px}
#app{max-width:560px;margin:0 auto;min-width:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}
h1,h2,h3{font-family:var(--f-display);line-height:1.2;margin:0;font-weight:600;text-wrap:balance}
h2{font-size:1.25rem}
h3{font-size:1rem}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* testata */
.top{display:flex;align-items:center;justify-content:space-between;height:60px;padding-block:0;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:5;border-bottom:1px solid var(--line);margin-bottom:12px}
:root{--hdr:60px}
.logo{display:flex;align-items:center;gap:10px;font:600 1.1rem var(--f-mono);letter-spacing:.02em}
.cross{width:27px;height:20px;display:block;border-radius:2px}
.logo .cur{color:var(--flag);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gear{width:38px;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);display:grid;place-items:center;padding:0;color:var(--muted)}
.gear[aria-current="true"]{color:var(--accent);border-color:var(--accent)}
.gear svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}

.screen{display:none;flex-direction:column;gap:14px}
.screen.on{display:flex}

/* pannelli */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0}
.ph{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-bottom:1px solid var(--line);font:500 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pn{color:var(--accent)}
.pb{padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pad{padding:12px}

/* pulsanti */
.btn{border:1px solid var(--line);background:var(--surface2);border-radius:var(--r);padding:10px 14px;font-weight:500;min-height:44px}
.btn.primary{background:var(--brand-soft);color:var(--ink);border-color:var(--brand);font-weight:600}
.btn.big{padding:14px;font:600 1rem var(--f-mono);text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.small{padding:6px 10px;min-height:34px;font-size:.88rem}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--surface2);border-radius:var(--r);padding:7px 12px;font:500 .88rem var(--f-mono)}
.pill[aria-pressed="true"]{background:transparent;color:var(--accent);border-color:var(--accent)}
.switch{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface2);border-radius:var(--r);padding:10px 12px;min-height:44px;text-align:left}
.knob{width:34px;height:18px;border-radius:9px;background:var(--line);position:relative;flex:none;transition:background .15s}
.knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink);transition:left .15s}
.switch[aria-checked="true"] .knob{background:var(--accent)}
.switch[aria-checked="true"] .knob::after{left:18px;background:var(--bg)}

/* campi */
.field{width:100%;font:inherit;font-size:16px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);color:var(--ink);min-height:44px}
.field:focus{border-color:var(--accent);outline:none}
textarea.field{resize:vertical}
select.field{appearance:auto}
.fld{display:flex;flex-direction:column;gap:6px}
.lbl{font:500 .8rem var(--f-mono);color:var(--muted)}
.title{font-weight:600}
.stepper{display:flex;align-items:center;gap:10px}
.range{flex:1;min-width:0;accent-color:var(--accent);height:32px}
.cnt{min-width:2ch;text-align:right;font-weight:600;font-size:1.1rem}

/* numeri di stato */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.stat b{display:block;font:600 1.4rem var(--f-mono)}
.stat span{font-size:.78rem;color:var(--muted)}

/* esercizi */
.prompt{font:500 1.3rem/1.3 var(--f-display)}
.ans{min-height:60px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 10px;align-content:flex-start}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.tile{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font:500 .95rem var(--f-mono);min-height:42px}
.tile.used{visibility:hidden}
.ans .tile{border-color:var(--accent)}
.bar{height:4px;border-radius:2px;background:var(--surface2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);transition:width .3s}
.fb{border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px}
.fb.ok{background:var(--good-bg);border:1px solid var(--good)}
.fb.no{background:var(--bad-bg);border:1px solid var(--bad)}
.fb b{font-family:var(--f-mono)}
.opt{display:block;width:100%;text-align:left;padding:12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface2)}
.opt.right{background:var(--good-bg);border-color:var(--good)}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad)}
.rv p+p{font-family:var(--f-mono)}

/* liste */
.sc{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.sc b{font:600 .98rem var(--f-mono)}
/* riordino con la maniglia ≡ (grammatica, lessico) */
.sortbox{display:flex;flex-direction:column;gap:8px}
.srow{display:flex;align-items:stretch;gap:6px}
.srow .sc{flex:1;min-width:0}
.grip{touch-action:none;cursor:grab;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--ink);opacity:.7;background:none;border:0;border-radius:var(--r)}
.grip svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.grip:focus-visible{outline:2px solid var(--accent)}
.sortbox .drag{opacity:.85;box-shadow:0 6px 18px rgba(0,0,0,.28);position:relative;z-index:2}
.sortbox .gsec{margin-bottom:8px}
.msel{width:auto;max-width:46%;align-self:center;font-size:.85rem;padding:8px}
.selrow{flex-direction:row;align-items:flex-start;gap:12px;cursor:pointer}
.selrow .selbody{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.selbox{width:22px;height:22px;margin-top:2px;accent-color:var(--accent)}
.group{display:flex;flex-direction:column;gap:8px}
.wrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:0;padding-bottom:0}
.wrow:first-child{padding-top:0}
.forms{font-size:.85rem;color:var(--muted)}
.tag{font:500 .72rem var(--f-mono);padding:2px 8px;border-radius:var(--r);background:var(--surface2);color:var(--muted);border:1px solid var(--line);align-self:flex-start}
.tag.reg{color:var(--good);border-color:var(--good);background:transparent}
.tag.irr{color:var(--bad);border-color:var(--bad);background:transparent}
.lesson p+p{margin-top:8px}
.ex{font-family:var(--f-mono);font-size:.88rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;overflow-x:auto}

/* tabelle */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{border-collapse:collapse;width:100%;font-size:.85rem}
.tbl th,.tbl td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl thead th{background:var(--surface2);font:500 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tbl tbody th{font-weight:500;font-family:var(--f-mono)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}

/* note */
.blocks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 8px 8px 12px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.blk .bl{overflow-wrap:anywhere}
.blk .bl p,.md p{margin:0 0 6px}
.md ul,ul.md{margin:0 0 6px;padding-left:20px}
.md h4,.bl h4{margin:6px 0;font:600 .95rem var(--f-mono)}
.bact{display:flex;gap:6px;flex:none}
.qadd{display:flex;gap:8px;align-items:center}.qadd .field{flex:1;min-width:0}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px}
.bubble{max-width:90%;padding:10px 12px;border-radius:var(--r);display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.bubble.ai{background:var(--surface);border:1px solid var(--line);align-self:flex-start}
.bubble.me{background:var(--surface2);border:1px solid var(--line);align-self:flex-end}
.bubble small{opacity:.8}
.note{align-self:flex-end;max-width:92%;border:1px solid var(--accent);border-radius:var(--r);padding:8px 12px;font-size:.9rem;display:flex;flex-direction:column;gap:4px}
.note b{color:var(--accent);font-family:var(--f-mono)}
.act{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.composer{display:flex;gap:8px;position:sticky;bottom:calc(68px + env(safe-area-inset-bottom,0px));background:var(--bg);padding-block:8px}
.composer .field{flex:1;min-width:0}

/* barra delle schede */
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:center;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:6}
.tabs>div{display:flex;gap:2px;width:100%;max-width:560px}
.tabs button{flex:1;min-width:0;border:0;background:none;padding:6px 2px;border-radius:var(--r);font:500 .64rem var(--f-mono);display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);min-height:50px}
.tabs button.ico{flex:.6}
.tabs button[aria-current="true"]{color:var(--ink);box-shadow:inset 0 2px 0 var(--flag)}
.tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:var(--r);font:500 .85rem var(--f-mono);opacity:0;pointer-events:none;transition:opacity .2s;z-index:9;max-width:92vw;text-align:center}
.toast.on{opacity:1}
.spk{border:1px solid var(--line);background:var(--surface2);border-radius:var(--r);width:36px;height:36px;display:grid;place-items:center;flex:none;padding:0}
.spk svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.tbl th small.sub{display:block;font:400 .72rem var(--f-ui);color:var(--muted)}
.screen>.btn.small{align-self:flex-start}
.btn.sticky{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:4}
.tbl th,.tbl td{padding:6px 5px}.tbl .tag{padding:1px 5px;font-size:.68rem}.tbl{font-size:.82rem}

/* nota: testata ferma, elenco che scorre */
.notehead{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px));z-index:4;background:var(--bg);display:flex;flex-direction:column;gap:8px;padding-bottom:10px;margin-top:-12px;padding-top:8px;border-bottom:1px solid var(--line)}
.ibtn{width:40px;height:40px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);display:grid;place-items:center;padding:0;color:var(--ink)}
.ibtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trow{display:flex;gap:8px;align-items:center}
.field.ghost{background:transparent;border-color:transparent;border-bottom:1px solid var(--line);border-radius:0;padding:6px 2px;min-height:38px}
.trow .title{flex:1;min-width:0;font-size:17px}
.trow .date{flex:0 0 auto;width:8.8em;min-width:0;max-width:45%;font-family:var(--f-mono);font-size:14px;color:var(--muted);text-align:right;padding-inline:0}
.circ{width:44px;height:44px;border-radius:50%;border:1px solid var(--brand);background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;padding:0;flex:none}
.circ svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.acts{gap:8px}
.btn.hot{border-color:var(--accent);color:var(--accent)}
.btn.prog{position:relative;overflow:hidden;border-color:var(--accent);color:var(--ink);opacity:1;cursor:progress;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent) var(--p,0%),transparent var(--p,0%));transition:background .3s}
.btn.prog:disabled{opacity:1}
html[data-style="vivid"] .btn.prog{color:var(--ink)}
.btn.prog .pl{position:relative}
.nbody{display:flex;flex-direction:column;gap:12px;padding-top:2px}
/* home */
.btn.big .tl{min-width:0;overflow-wrap:anywhere}
.btn.big .sub{font-size:.72rem;opacity:.75;white-space:nowrap}
.statline{text-align:center}
.ibtn.s{width:34px;height:34px}.ibtn.s svg{width:17px;height:17px}
.trow .ibtn{flex:none}
.trow .date{width:7.6em;max-width:40%}
.btn.big.stack{flex-direction:column;align-items:flex-start;gap:4px}
.blk .tag{margin-right:2px}
.trow .date{width:9em;max-width:44%;font-size:13px;letter-spacing:-.02em}
.screen>.ibtn{align-self:flex-start}
.ibtn.on{border-color:var(--accent);color:var(--accent)}
.inv{color:var(--muted)}
.rawtxt{font-style:italic;color:var(--muted)}
.bar.thin{height:3px;margin:2px 0}
.blk.sel{border-color:var(--accent)}
.card.detail{border-color:var(--accent)}
.prompt.sm{font-size:1.1rem}
.kvs{display:flex;flex-wrap:wrap;gap:6px 18px}
.kv{display:flex;flex-direction:column}.kv .k{font:500 .68rem var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rv p+p{font-family:var(--f-mono)}

/* chat: allegati e dettato */
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.tw1{position:relative}
.thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);display:block}
.bubble .thumb{width:84px;height:84px}
.rm{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0}
.rm svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.composer{flex-direction:column;gap:8px}
.crow{display:flex;gap:6px;align-items:center}
.crow .field{flex:1;min-width:0}
.ibtn.lang{font:600 .72rem var(--f-mono);width:34px}
.composer .circ{width:42px;height:42px}
.sc .bar{display:block}

/* nota: voce espansa sul posto */
.blk{flex-direction:column;align-items:stretch;gap:6px}
.brow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brow .bl{min-width:0}
.dbody{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:8px 0 4px;border-top:1px solid var(--line)}
.dbody .tag{align-self:flex-start}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--surface)}
.opt b{display:block}
.scn .opt{flex:1;min-width:0}
.scn{flex-wrap:nowrap}
.btn.primary.sticky{background:linear-gradient(var(--brand-soft),var(--brand-soft)),var(--bg)}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipx{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--accent);color:var(--accent);border-radius:var(--r);padding:2px 4px 2px 10px;font:500 .78rem var(--f-mono)}
.chipx button{border:0;background:none;padding:0;width:24px;height:24px;display:grid;place-items:center;color:inherit}
.chipx svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.menu{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:8px}
.mi2{display:flex;flex-direction:column;text-align:left;gap:2px;padding:8px 10px;border:1px solid var(--line);background:var(--surface2);border-radius:var(--r)}
.mi2 b{font:600 .92rem var(--f-mono)}

/* Stile "Morbido": font con grazie per i titoli, sans umano per il resto, angoli grandi, icone con riempimento tenue */
html[data-style="soft"]{--f-ui:'DM Sans',system-ui,-apple-system,sans-serif;--f-mono:'DM Sans',system-ui,sans-serif;--f-display:'Fraunces',Georgia,serif;--r:12px}
html[data-style="soft"] body{font-size:15.5px}
html[data-style="soft"] h2{font-size:1.6rem;font-weight:600;letter-spacing:-.01em}
html[data-style="soft"] h3{font-weight:600}
html[data-style="soft"] .prompt{font-weight:500;letter-spacing:-.005em}
html[data-style="soft"] .ph{text-transform:none;letter-spacing:0;font:600 .86rem var(--f-ui)}
html[data-style="soft"] .pn{font-family:var(--f-display)}
html[data-style="soft"] .logo{font:600 1.35rem var(--f-display);letter-spacing:-.01em}
html[data-style="soft"] .tabs button{font:500 .7rem var(--f-ui)}
html[data-style="soft"] .btn.big{font:600 1rem var(--f-ui)}
html[data-style="soft"] .sc b,html[data-style="soft"] .mi2 b{font:600 1rem var(--f-ui)}
html[data-style="soft"] .tag,html[data-style="soft"] .pill,html[data-style="soft"] .tile{font-family:var(--f-ui)}
html[data-style="soft"] .stat b,html[data-style="soft"] .cnt{font-family:var(--f-display)}
html[data-style="soft"] .panel,html[data-style="soft"] .card{border-radius:16px}
html[data-style="soft"] .btn,html[data-style="soft"] .field,html[data-style="soft"] .opt,html[data-style="soft"] .sc,html[data-style="soft"] .blk{border-radius:12px}
html[data-style="soft"] .pill,html[data-style="soft"] .tag,html[data-style="soft"] .chipx{border-radius:999px}
html[data-style="soft"] .ibtn,html[data-style="soft"] .gear,html[data-style="soft"] .spk{border-radius:12px}
html[data-style="soft"] .tabs{border-top:0;box-shadow:0 -1px 0 var(--line)}
html[data-style="soft"] .tabs svg{width:24px;height:24px}
html[data-style="soft"] svg{fill:currentColor;fill-opacity:.16;stroke-width:1.6}
html[data-style="soft"] .tabs button[aria-current="true"] svg{fill-opacity:.32}
html[data-style="soft"] .circ svg,html[data-style="soft"] .rm svg,html[data-style="soft"] .chipx svg{fill:none}
html[data-style="soft"] .cross{fill-opacity:1}
#s-chat.on{min-height:calc(100dvh - var(--hdr) - 150px - env(safe-area-inset-bottom,0px))}
#s-chat .composer{margin-top:auto}
html[data-style="soft"] .field.ghost{border-radius:0}

/* Home: grafici (anello e barre) */
.dash{display:flex;gap:16px;align-items:center}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring .tr{stroke:var(--surface2)}
.ring .pg{stroke:var(--accent);transition:stroke-dasharray .6s}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 1.35rem var(--f-display)}
.ring b small{display:block;font:500 .62rem var(--f-ui);color:var(--muted);margin-top:-18px;text-align:center}
.cols{flex:1;min-width:0;display:flex;align-items:flex-end;gap:7px;height:104px}
.cols div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%;min-width:0}
.cols i{display:block;width:100%;min-height:4px;border-radius:5px;background:var(--surface2)}
.cols .on i{background:var(--accent)}
.cols span{font:500 .62rem var(--f-ui);color:var(--muted)}
.cols em{font:600 .6rem var(--f-ui);font-style:normal;color:var(--muted);min-height:.9em}
.cols .on em{color:var(--ink)}
.cols .today span{color:var(--accent);font-weight:700}
.legend{font-size:.78rem;color:var(--muted);margin-top:-4px}

/* Stile "Vivace": schede grandi e piene, pulsanti riempiti con sfumatura, barra delle schede fluttuante */
html[data-style="vivid"]{--f-ui:'DM Sans',system-ui,-apple-system,sans-serif;--f-mono:'DM Sans',system-ui,sans-serif;--f-display:'DM Sans',system-ui,sans-serif;--r:14px}
html[data-style="vivid"] body{font-size:15.5px}
html[data-style="vivid"] h2{font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
html[data-style="vivid"] h3{font-weight:700}
html[data-style="vivid"] .top{border-bottom:0;margin-inline:-16px;padding-inline:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-style="vivid"] .logo{font:700 1.3rem var(--f-ui);letter-spacing:-.01em}
html[data-style="vivid"] .panel,html[data-style="vivid"] .card{border:0;border-radius:22px;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.18)}
html[data-style="vivid"] .ph{border-bottom:0;text-transform:none;letter-spacing:0;font:700 .95rem var(--f-ui);color:var(--ink);padding:14px 16px 0}
html[data-style="vivid"] .pn{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:var(--grad);color:var(--on-accent);font:700 .72rem var(--f-ui)}
html[data-style="vivid"] .pb{padding:12px 16px 16px}
html[data-style="vivid"] .btn{border:0;background:var(--surface2);border-radius:14px;font-weight:600}
html[data-style="vivid"] .btn.primary,html[data-style="vivid"] .btn.primary.sticky{background:var(--grad);color:var(--on-accent);box-shadow:0 6px 18px rgba(0,0,0,.25)}
html[data-style="vivid"] .btn.primary .sub{opacity:.7}
html[data-style="vivid"] .btn.big{font:700 1rem var(--f-ui)}
html[data-style="vivid"] .btn.hot{background:var(--brand-soft);color:var(--accent)}
html[data-style="vivid"] .pill,html[data-style="vivid"] .tag,html[data-style="vivid"] .chipx{border-radius:999px;border:0;font-family:var(--f-ui)}
html[data-style="vivid"] .pill[aria-pressed="true"]{background:var(--grad);color:var(--on-accent);font-weight:700}
html[data-style="vivid"] .tag.reg,html[data-style="vivid"] .tag.irr{background:var(--surface2)}
html[data-style="vivid"] .chipx{background:var(--brand-soft)}
html[data-style="vivid"] .sc,html[data-style="vivid"] .blk,html[data-style="vivid"] .stat,html[data-style="vivid"] .menu,html[data-style="vivid"] .act{border:0;border-radius:16px;background:var(--surface2)}
html[data-style="vivid"] .sc b,html[data-style="vivid"] .mi2 b{font:700 1rem var(--f-ui)}
html[data-style="vivid"] .mi2{border:0;background:var(--surface)}
html[data-style="vivid"] .opt,html[data-style="vivid"] .tile{border:0;border-radius:14px;background:var(--surface2);font-family:var(--f-ui)}
html[data-style="vivid"] .opt[aria-pressed="true"],html[data-style="vivid"] .blk.sel{box-shadow:inset 0 0 0 2px var(--accent)}
html[data-style="vivid"] .ans .tile{box-shadow:inset 0 0 0 2px var(--accent)}
html[data-style="vivid"] .opt.right{box-shadow:inset 0 0 0 2px var(--good)}
html[data-style="vivid"] .opt.wrong{box-shadow:inset 0 0 0 2px var(--bad)}
html[data-style="vivid"] .field{border:0;background:var(--surface2);border-radius:14px}
html[data-style="vivid"] .field:focus{box-shadow:inset 0 0 0 2px var(--accent)}
html[data-style="vivid"] .field.ghost{background:transparent;border-radius:0;box-shadow:inset 0 -1px 0 var(--line)}
html[data-style="vivid"] .ibtn,html[data-style="vivid"] .gear,html[data-style="vivid"] .spk{border:0;border-radius:14px;background:var(--surface2)}
html[data-style="vivid"] .ibtn.on,html[data-style="vivid"] .gear[aria-current="true"]{background:var(--grad);color:var(--on-accent)}
html[data-style="vivid"] .circ{border:0;background:var(--grad);color:var(--on-accent)}
html[data-style="vivid"] .bar{height:8px;border-radius:4px}
html[data-style="vivid"] .bar.thin{height:6px}
html[data-style="vivid"] .bar>i{background:var(--grad);border-radius:4px}
html[data-style="vivid"] .ring .pg{stroke:url(#rg)}
html[data-style="vivid"] .cols i{border-radius:8px}
html[data-style="vivid"] .cols .on i{background:var(--grad)}
html[data-style="vivid"] .switch{border:0;background:var(--surface2);border-radius:14px}
html[data-style="vivid"] .switch[aria-checked="true"] .knob{background:var(--grad)}
html[data-style="vivid"] .bubble.ai{border:0;background:var(--surface);border-radius:18px 18px 18px 6px}
html[data-style="vivid"] .bubble.me{border:0;background:var(--grad);color:var(--on-accent);border-radius:18px 18px 6px 18px}
html[data-style="vivid"] .tw,html[data-style="vivid"] .ex{border:0;border-radius:14px;background:var(--surface2)}
html[data-style="vivid"] .tbl thead th{background:transparent}
html[data-style="vivid"] .tabs{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border:0;border-radius:26px;background:var(--surface2);padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-style="vivid"] .tabs button{font:600 .66rem var(--f-ui);border-radius:20px}
html[data-style="vivid"] .tabs button[aria-current="true"]{box-shadow:none;background:var(--grad);color:var(--on-accent)}
html[data-style="vivid"] .tabs svg{width:23px;height:23px}
html[data-style="vivid"] body{padding-block-end:110px}
html[data-style="vivid"] .composer{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
html[data-style="vivid"] .btn.sticky{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
html[data-style="vivid"] .toast{bottom:calc(100px + env(safe-area-inset-bottom,0px));border-radius:999px}
html[data-style="vivid"] svg{stroke-width:1.8}
html[data-style="vivid"] .circ svg,html[data-style="vivid"] .rm svg,html[data-style="vivid"] .chipx svg{fill:none}
html[data-style="vivid"] .cross{fill-opacity:1}
html[data-style="vivid"] .notehead{border-bottom:0;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Home: quattro barre verticali, una per abilità (esercizi fatti sul totale) */
.sk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.skc{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;min-width:0}
.skc .pc{font:600 1.15rem var(--f-display)}
.skc .tr{position:relative;width:100%;max-width:72px;height:min(46vh,320px);border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;display:block}
.skc .tr i{position:absolute;left:0;right:0;bottom:0;background:var(--accent);transition:height .6s;display:block}
.skc .lb{font:600 .8rem var(--f-ui)}
.skc .ct{font-variant-numeric:tabular-nums}
.skc.low .lb{color:var(--accent)}
html[data-style="vivid"] .skc .tr{border:0;background:var(--surface);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
html[data-style="vivid"] .skc .tr i{background:var(--grad)}
html[data-style="vivid"] .skc .pc{font-weight:700}

/* Parlare: registrazione e feedback */
.rec{display:flex;align-items:center;gap:10px;border:1px solid var(--accent);border-radius:var(--r);padding:10px 12px}
.rec .dot{width:12px;height:12px;border-radius:50%;background:var(--bad);animation:blink 1s steps(1) infinite;flex:none}
.say{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--accent);background:var(--brand-soft);border-radius:var(--r);padding:8px 12px;font-weight:600}
.say svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wch{display:flex;gap:6px;flex-wrap:wrap}
.wch button{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--bad);color:var(--bad);background:transparent;border-radius:var(--r);padding:3px 10px;font:500 .85rem var(--f-ui)}
html[data-style="vivid"] .say{border:0;background:var(--brand-soft);border-radius:14px}
html[data-style="vivid"] .wch button{border:0;background:var(--bad-bg);border-radius:999px}
html[data-style="vivid"] .rec{border:0;background:var(--surface);border-radius:16px}
.wch svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ascolto: velocità e significato */
.row.nowrap{flex-wrap:nowrap}
.speed{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.speed .range{flex:1;min-width:0}
.spd{min-width:4.2ch;text-align:right}
.mean{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r);background:var(--surface2)}
.mean .k{font:500 .68rem var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mean span:last-child{font-weight:500}
html[data-style="vivid"] .mean{border-radius:14px}
.btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-4px;margin-right:6px}
.btn.primary:has(svg){display:inline-flex;align-items:center;justify-content:center}
.row.nowrap .btn{flex:none}

/* scene: elenco con scroll visibile */
.sclist{display:flex;flex-direction:column;gap:8px;max-height:min(46vh,420px);overflow-y:auto;padding-right:6px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface2)}
.sclist::-webkit-scrollbar{width:6px}
.sclist::-webkit-scrollbar-track{background:var(--surface2);border-radius:3px}
.sclist::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}
input[type="search"].field{-webkit-appearance:none;appearance:none}
.pv{gap:8px}.pv>div{min-width:0}.pv .ibtn{flex:none}
.pv .ibtn{width:30px;height:30px}.pv .ibtn svg{width:16px;height:16px}.pv{gap:6px}

/* icone: tratto sottile e arrotondato; nelle schede ogni icona sta in un cerchio con un trattino pastello sotto */
svg{stroke-linecap:round;stroke-linejoin:round}
.tabs svg,.ibtn svg,.gear svg,.spk svg,.btn svg,.say svg{stroke-width:1.5}
.tabs .ic{position:relative;display:grid;place-items:center;width:42px;height:34px;border-radius:999px}
html[data-style="vivid"] .tabs button{min-height:54px;gap:1px}
html[data-style="vivid"] .ibtn,html[data-style="vivid"] .gear,html[data-style="vivid"] .spk{border-radius:50%}
html[data-style="vivid"] svg{stroke-width:1.5}
/* testata trasparente con effetto vetro: niente casella più scura sopra lo sfondo sfumato */
:root[data-theme="norsk"] .top,:root[data-theme="norsk"] .notehead{background:transparent;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

/* Home: data a destra, livello */
.homedate{text-align:right;margin:0}
.lvl{display:flex;gap:14px;align-items:center}
.lvbadge{flex:none;width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font:700 1.7rem var(--f-display);border:1.5px solid var(--accent);color:var(--accent);background:var(--brand-soft)}
.lvinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.lvinfo b{font-size:1.05rem}
.req{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r)}
.req .rl{font-weight:600}
.req.ok .rl{color:var(--good)}
html[data-style="vivid"] .lvbadge{border:0;background:var(--grad);color:var(--on-accent);border-radius:24px;box-shadow:0 8px 22px rgba(0,0,0,.3)}
html[data-style="vivid"] .req{border:0;border-radius:14px}
.req .bar{background:var(--bg);display:block}
.skc .tr{height:min(30vh,230px)}
.req{padding:8px 12px;gap:2px;min-height:0}.group h3{margin-top:6px}

/* testata e barra schede: superfici piene e curve, il contenuto non si vede attraverso */
html[data-style="vivid"] .top,:root[data-theme="norsk"] .top{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0 0 28px 28px;box-shadow:0 8px 24px rgba(0,0,0,.35);margin-bottom:16px}
html[data-style="vivid"] .notehead,:root[data-theme="norsk"] .notehead{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--surface);z-index:7;pointer-events:none}
html[data-style="vivid"] .tabs{left:0;right:0;bottom:0;border-radius:28px 28px 0 0;background:var(--surface);padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(0,0,0,.35)}
html[data-style="vivid"] .tabs button[aria-current="true"]{background:var(--grad)}
.gsec{display:grid;gap:8px;margin-top:6px}
.gsec h3{margin:10px 0 2px}

/* prima apertura */
.onb{position:fixed;inset:0;z-index:50;background-color:var(--bg);background-image:var(--bgfx);overflow-y:auto;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
body.onb-open{overflow:hidden}
.onbin{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:20px}
.onbbody{display:grid;gap:14px;align-content:start;flex:1}
.onbbody h1{font-size:3rem;margin:24px 0 0;letter-spacing:-.03em}
.onbbody h2{margin:8px 0 0}
.onbbody .lead{font-size:1.1rem;line-height:1.5}
.onb .dots{display:flex;gap:6px;justify-content:center}
.onb .dots i{width:8px;height:8px;border-radius:99px;background:var(--line)}
.onb .dots i.on{width:22px;background:var(--accent)}
.onb .dots i.done{background:var(--accent2,var(--accent))}
.onb.gate{background-image:none}
.gatef{display:grid;gap:18px;margin-top:6px}
.gatef .field{padding:16px 14px}
.gatef [hidden]{display:none}
.steps1{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:st}
.steps1 li{counter-increment:st;display:grid;gap:2px;background:var(--surface);border-radius:18px;padding:14px 16px 14px 56px;position:relative}
.steps1 li::before{content:counter(st);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:99px;background:var(--accent);color:var(--on-accent,var(--bg));display:grid;place-items:center;font-weight:700}
.onbtop{display:flex;justify-content:flex-end;align-items:center;gap:8px;color:var(--muted);font-size:.9rem}
.langsel{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;font-size:.9rem}
.onbnav{display:flex;gap:10px;justify-content:space-between}
.onbnav .btn{flex:1}
.ogrp{display:grid;gap:8px}
.oopt{display:grid;gap:2px;text-align:left;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:18px;padding:14px 16px;font:inherit;cursor:pointer}
.oopt.on{border-color:var(--accent);background:var(--brand-soft)}

/* Impostazioni: sezioni collassabili */
.sect>summary{list-style:none;cursor:pointer;align-items:center;font-size:.85rem}
.sect>summary::-webkit-details-marker{display:none}
.sect>summary .pt{flex:1;color:var(--ink)}
.sect .chev{font-size:1.2rem;transition:transform .15s}
.sect[open]>summary .chev{transform:rotate(90deg)}
.sect:not([open])>summary{border-bottom:0}
.big{font-size:1.3rem}
html[data-style="vivid"] .sect>summary{padding:14px 16px;align-items:center}
html[data-style="vivid"] .sect[open]>summary{padding-bottom:0}
html[data-style="vivid"] .sect .pt{font:700 .95rem var(--f-ui)}
.btn.danger{color:#ff6b6b;border-color:#ff6b6b66}
html[data-style="vivid"] .btn.danger{background:#ff6b6b22;color:#ff6b6b;box-shadow:none}
/* la barra delle schede segue la larghezza dell'app (come la testata), non tutta la pagina: su schermi larghi resta centrata */
html .tabs,html[data-style] .tabs{left:50%;right:auto;width:min(100%,592px);transform:translateX(-50%)}

/* crediti in testata */
.hright{display:flex;align-items:center;gap:8px}
.cred{display:flex;flex-direction:column;align-items:center;justify-content:center;height:38px;min-width:62px;padding:0 10px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);color:var(--ink);line-height:1.05;cursor:pointer}
.cred .cl{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cred b{font-size:14px;font-weight:700}
.cred.low b{color:var(--accent2)}.cred.zero b{color:var(--bad,#c0392b)}
.cred[hidden]{display:none}
html[data-style="soft"] .cred{border-radius:12px}
html[data-style="vivid"] .cred{border:0;border-radius:14px;background:var(--surface2)}
/* Impostazioni → Account → Avanzate: l'eliminazione dell'account sta nascosta */
details.adv{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
details.adv>summary{cursor:pointer;list-style:none;padding:4px 0}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .15s}
details.adv[open]>summary::before{transform:rotate(90deg)}
details.adv .group{margin-top:10px}