:root{
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --bg:#f3efe7; --paper:#fffdf8; --line:#e0d8c9; --txt:#26221b; --muted:#6e6555;
  --accent:#8a4b7c; --accent-soft:rgba(138,75,124,.13); --accent2:#a5702a;
  --ok:#3f9d6b; --ok-soft:rgba(63,157,107,.14); --no:#c8392b; --no-soft:rgba(200,57,43,.13);
  --header-bg:#2b1c2a; --header-text:#fdf6ee;
  --tone0:#7c7280; --tone1:#c8392b; --tone2:#b8791f; --tone3:#2f8f5f; --tone4:#3768ad;
  --shadow:0 1px 3px rgba(40,20,40,.08),0 1px 2px rgba(40,20,40,.04);
  --radius:16px;
}
html[data-theme="dark"]{
  --bg:#18131a; --paper:#231b24; --line:#382c38; --txt:#ece7da; --muted:#a89bc0;
  --accent:#c48fb6; --accent-soft:rgba(196,143,182,.16); --accent2:#c99e4f;
  --ok:#4fae78; --ok-soft:rgba(79,174,120,.16); --no:#e0645a; --no-soft:rgba(224,100,90,.16);
  --header-bg:#150f16; --header-text:#f3e9f0;
  --tone0:#9a90ad; --tone1:#e8615a; --tone2:#e0a23f; --tone3:#57c17a; --tone4:#5b9fe0;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--txt);line-height:1.5}

header{display:flex;align-items:center;gap:10px;background:var(--header-bg);color:var(--header-text);
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
header .logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent2));flex:none}
header h1{font-size:1.05em;font-weight:800}
header .hd-meta{font-size:.72em;opacity:.7}
.hd-spacer{flex:1}
.hd-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--header-text);
  width:34px;height:34px;border-radius:10px;font-size:15px;cursor:pointer}

nav.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 4px;max-width:640px;margin:0 auto}
nav.tabs button{flex:1 0 auto;background:var(--paper);border:1.5px solid var(--line);border-radius:99px;
  padding:9px 14px;cursor:pointer;color:var(--muted);justify-content:center;
  font-family:var(--font);font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
nav.tabs button .ico{font-size:15px;line-height:1}
nav.tabs button.on{background:var(--accent);border-color:var(--accent);color:#fff}

main{max-width:640px;margin:0 auto;padding:14px 14px 24px}

.modtitle{font-size:.75em;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:2px 0 10px}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card.center{text-align:center}

.stat-row{display:flex;gap:10px;flex-wrap:wrap}
.stat{flex:1 1 90px;text-align:center}
.stat b{display:block;font-size:1.4em;color:var(--accent)}
.stat span{display:block;font-size:.7em;color:var(--muted);margin-top:2px}

.hint{font-size:.85em;color:var(--muted)}
.rule-text{font-size:.92em}
.colloq{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:.85em;color:var(--txt)}
.colloq b{color:var(--accent2)}

.patrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{font-size:.82em;font-weight:700;padding:7px 12px;border-radius:16px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);cursor:pointer}
.chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chip.done::after{content:' ✓';color:var(--ok)}
.chip.opt{font-size:1.3em;padding:10px 16px}
.chip.opt.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.chip.opt.no{border-color:var(--no);color:var(--no);background:var(--no-soft)}

.pat-head{font-weight:800;margin-bottom:8px}

.excard{border-top:1px dashed var(--line);padding:12px 0}
.excard:first-of-type{border-top:none;padding-top:0}

.hzrow{display:flex;align-items:center;gap:8px}
.hanzi{font-size:1.6em;font-weight:700;letter-spacing:.02em;margin-bottom:4px}
.hanzi.big{font-size:3.2em;margin:14px 0}
.pinyin{font-size:1em;color:var(--muted);margin-bottom:8px}
.pyword{margin-right:6px;display:inline-block}
.ton{font-weight:700}
.ton.t0{color:var(--tone0);font-weight:500}
.ton.t1{color:var(--tone1)}
.ton.t2{color:var(--tone2)}
.ton.t3{color:var(--tone3)}
.ton.t4{color:var(--tone4)}

.spk{background:var(--accent-soft);border:1px solid var(--line);color:var(--accent);border-radius:10px;
  width:34px;height:34px;font-size:1em;cursor:pointer;flex:none}
.spk.playing{animation:pulse .6s infinite alternate}
@keyframes pulse{from{opacity:.5}to{opacity:1}}

.it-reveal{font-size:.95em;font-style:italic;color:var(--txt);background:var(--bg);
  border-radius:10px;padding:8px 10px;margin-top:6px}

.btn{display:inline-block;font-size:.9em;font-weight:700;padding:10px 16px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--paper);color:var(--txt);cursor:pointer;width:100%;text-align:center;
  font-family:var(--font)}
.btn.small{width:auto;padding:6px 12px;font-size:.8em}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:none;color:var(--accent);border-color:var(--accent)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.no{background:var(--no);border-color:var(--no);color:#fff}
.row2{display:flex;gap:8px;margin-top:10px}
.row2 .btn{flex:1}

.result{border-radius:12px;padding:12px;margin:10px 0}
.result.ok{background:var(--ok-soft)}
.result.no{background:var(--no-soft)}
.corr-note{font-size:.78em;color:var(--no);margin-top:4px;font-weight:700}

.optrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}

.cnt-line{font-size:.78em;color:var(--muted);text-align:center;margin-bottom:8px}

.catrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.catchip{font-size:.78em;font-weight:700;padding:6px 12px;border-radius:16px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);cursor:pointer}
.catchip.active{border-color:var(--accent2);color:var(--accent2);background:rgba(165,112,42,.13)}

.parts-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.partchip{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 12px;text-align:center;min-width:64px}
.partchip .pc-hz{font-size:1.4em;font-weight:700}
.partchip .pc-it{font-size:.68em;color:var(--muted);margin-top:2px}

.buildmark{text-align:center;font-size:.68em;color:var(--muted);padding:8px 0 30px;opacity:.6;max-width:640px;margin:0 auto}

@media(min-width:900px){
  main{max-width:900px}
  nav.tabs{max-width:900px}
}

/* ---------- obiettivo giornaliero ---------- */
.goalcard{padding:14px 16px}
.goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:.9em}
.goal-top b{font-size:1.25em;color:var(--accent)}
.goal-sub{font-size:.82em;color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}

/* ---------- item dello studio ---------- */
.itemtag{font-size:.68em;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.lbl{display:block;font-size:.75em;font-weight:700;color:var(--muted);margin:12px 0 5px}
/* 16px minimo: sotto, Safari iOS zooma la pagina al focus */
.ansinput{width:100%;font-size:16px;padding:12px 13px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--txt);outline:none;font-family:var(--font)}
.ansinput:focus{border-color:var(--accent)}
.ansinput.short{max-width:120px}
.ansinput:disabled{opacity:.6}
.skipline{margin-top:8px;font-size:.8em;padding:8px 12px}
.small-line{margin:10px 0 4px;font-size:.82em;padding:8px 12px}

/* ---------- suggerimenti progressivi ---------- */
.hintbox{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin:10px 0}
.hint-lbl{font-size:.68em;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent2);margin-bottom:6px}
.segrow{display:flex;flex-wrap:wrap;gap:6px}
.segchip{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 9px;text-align:center;min-width:52px}
.segchip .sc-hz{font-size:1.15em;font-weight:700}
.segchip .sc-it{font-size:.64em;color:var(--muted);margin-top:2px;max-width:110px}
.res-lbl{font-size:.78em;font-weight:800;margin-bottom:6px}
.exline{font-size:.82em;color:var(--muted);margin-top:10px;text-align:center}
.exline .ex-it{font-style:italic}

/* ---------- comprensione: opzioni a colonna ---------- */
.optcol{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.optbtn{width:100%;text-align:left;font-size:.92em;font-weight:600;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--bg);color:var(--txt);cursor:pointer;font-family:var(--font)}
.optbtn.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok);font-weight:800}
.optbtn.no{border-color:var(--no);background:var(--no-soft);color:var(--no)}
.optbtn:disabled{cursor:default}
.hanzi.blurred{filter:blur(11px);user-select:none}
.spk.big{width:44px;height:44px;font-size:1.15em;margin-top:6px}

/* ---------- regole con esempi ---------- */
.rule-ex{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.rex{padding:7px 0}
.rex + .rex{border-top:1px solid var(--line)}
.hanzi.sm{font-size:1.25em;margin-bottom:2px}
.rex-it{font-size:.85em;font-style:italic;color:var(--muted)}

/* ---------- impostazioni ---------- */
.settings{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-top:16px;overflow:hidden}
.settings summary{cursor:pointer;padding:13px 16px;font-size:.85em;font-weight:700;color:var(--muted);list-style:none}
.settings summary::-webkit-details-marker{display:none}
.settings-body{padding:0 16px 16px}

/* ---------- ottimizzazione iPhone / iPad (26/07/2026) ---------- */
/* niente flash grigio al tocco, niente zoom da doppio tap, niente selezione accidentale sui controlli */
*{-webkit-tap-highlight-color:transparent}
button,.catchip,.chip,.optbtn,.segchip,.partchip,summary{touch-action:manipulation;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
body{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
main{-webkit-overflow-scrolling:touch}
/* area di tocco minima 44px (linea guida Apple) sui controlli piccoli */
.spk{min-width:38px;min-height:38px}
.btn,.optbtn,.catchip{min-height:38px}
.hd-btn{min-width:36px;min-height:36px}
/* safe-area: notch in alto, barra gesti in basso, e i bordi in landscape */
header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
nav.tabs,main,.buildmark{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.buildmark{padding-bottom:max(30px,calc(20px + env(safe-area-inset-bottom)))}

/* iPad: due colonne per le liste lunghe (frasario, regole) e testo un filo più grande */
@media(min-width:768px){
  main{max-width:900px}
  nav.tabs{max-width:900px}
  .hanzi{font-size:1.8em}
  .hanzi.big{font-size:3.6em}
}
/* da iPad in su (anche in verticale) il frasario va su due colonne: a una colonna sprecherebbe
   metà schermo. Le card non si devono spezzare a metà tra una colonna e l'altra. */
@media(min-width:720px){
  .frasario-list{column-count:2;column-gap:16px}
  .frasario-list .card{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%}
  .settings-body .rulecard{break-inside:avoid}
}
@media(min-width:1024px){
  main,nav.tabs{max-width:1100px}
  .frasario-list{column-count:3}
}
/* iPad in orizzontale: la scheda esercizio non deve diventare larghissima e illeggibile */
@media(min-width:1024px) and (orientation:landscape){
  .studio-wrap{max-width:720px;margin:0 auto}
}

/* ---------- scheda "i caratteri di questa frase" (Comprensione) ---------- */
.breakdown{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.bd-row{display:flex;gap:12px;padding:9px 0;align-items:flex-start}
.bd-row + .bd-row{border-top:1px solid var(--line)}
.bd-hz{font-size:2em;font-weight:700;line-height:1;flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}
.bd-hz .spk{width:32px;height:32px;min-width:32px;min-height:32px;font-size:.85em}
.bd-body{flex:1;min-width:0}
.bd-it{font-weight:700;font-size:.92em}
.bd-it .muted{font-weight:400;color:var(--muted);font-style:italic}
.bd-parts{font-size:.78em;color:var(--muted);margin-top:3px}
.bd-seen{font-size:.78em;color:var(--muted);margin-top:5px;line-height:1.7}
.bd-ex{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:2px 7px;margin:0 5px 4px 0}
.bd-ex b{font-size:1.15em;margin-right:3px}

/* lezione: chip più piccoli sotto gli esempi */
.segrow.small .segchip{padding:4px 7px;min-width:44px}
.segrow.small .sc-hz{font-size:1em}
.segrow.small .sc-it{font-size:.58em}
.rulecard{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.hint.dirty{margin-top:10px;color:var(--accent2);font-weight:600}

/* ---------- velocità di ascolto ---------- */
.raterow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.rate-lbl{font-size:.7em;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ratechip{font-size:.78em;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--bg);
  border:1px solid var(--line);color:var(--muted);cursor:pointer;min-height:34px}
.ratechip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ---------- ricerca frasario ---------- */
.searchbar{display:flex;gap:8px;margin-bottom:12px}
.searchbar #q{flex:1;font-size:16px;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--txt);outline:none;font-family:var(--font)}
.searchbar #q:focus{border-color:var(--accent)}
.clearbtn{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:0 14px;
  cursor:pointer;font-size:1em;color:var(--muted);min-height:38px}
.dove{font-size:.76em;color:var(--muted);margin-bottom:6px}
.hint.nota{margin-top:6px;color:var(--accent2);font-size:.8em}

/* ---------- sincronizzazione ---------- */
.synccode{font-family:ui-monospace,Menlo,monospace;font-size:1.05em;font-weight:700;letter-spacing:.12em;
  background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:11px;text-align:center;
  margin:6px 0;word-break:break-all;-webkit-user-select:all;user-select:all}


/* ══ Dita invece del mouse: iPhone e iPad, a qualsiasi larghezza (08/09/2026) ═══════════════════
   Verificato sul simulatore iOS 26.5 (iPhone 17 Pro e iPad Air). Le regole per il tocco erano
   scritte sulla LARGHEZZA dello schermo, quindi su iPad — largo come un desktop ma usato col dito —
   restavano i bersagli da mouse. `pointer:coarse` guarda invece con che cosa si tocca: sul Mac non
   cambia niente. Minimo 44 px, la misura consigliata da Apple. */
@media (hover:none) and (pointer:coarse){
  .btn, .chip, .pill, nav.tabs button, .spk, .card-btn { min-height:44px; }
  .btn.sm, .chip.sm { min-height:40px; }
  .icon-btn, .hd-btn, .mini, .row-act { min-width:44px; min-height:44px; }
  input, select, textarea { font-size:16px; min-height:42px; }
  .row-actions, .hover-actions { opacity:1 !important; }
}
/* iPhone: spazio in fondo per la barra di Safari e per la tacca inferiore */
@media (max-width:600px){
  main, .wrap, .container { padding-bottom:calc(env(safe-area-inset-bottom) + 18px); }
}


/* ===== Comandi in basso su iPhone e iPad (24/09/2026) — vedi tbar in fondo al codice ===== */
.tbar{display:none}
body.tbar-on .tbar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:stretch;gap:6px;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
body.tbar-on .tbar > nav, body.tbar-on .tbar > nav *{margin:0}
body.tbar-on .tbar > nav{flex:1 1 auto;display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:0!important;max-width:none!important;border:0!important;background:transparent!important;position:static!important}
body.tbar-on .tbar > nav > *{min-height:56px!important;min-width:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px!important;padding:4px 2px!important;border-radius:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar-more{flex:0 0 64px;min-height:56px;border:0;border-radius:14px;background:var(--accent);color:#fff;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.tbar.tbar-solo{justify-content:flex-end;background:transparent!important;border:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.tbar.tbar-solo .tbar-more{pointer-events:auto;flex:0 0 auto;width:64px;height:64px;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.tbar-ico{font-size:22px;line-height:1}.tbar-lbl{font-size:11px;font-weight:800}
.tbar.tbar-solo .tbar-lbl{display:none}
body.tbar-on{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;padding-top:calc(env(safe-area-inset-top) + 8px)}
@media (display-mode: standalone){ body.tbar-on{padding-top:calc(env(safe-area-inset-top) + 44px)} }
body.tbar-on > header, body.tbar-on :not(.tbar-slot) > header{display:none!important}
.tbar-sheet{position:fixed;inset:0;z-index:1000}
.tbar-sheet[hidden]{display:none}
.tbar-back{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.tbar-panel{position:absolute;left:0;right:0;bottom:0;max-height:85vh;overflow:auto;background:var(--paper);border-radius:20px 20px 0 0;padding:10px 14px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.tbar-grip{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.tbar-slot > *{display:flex!important;flex-wrap:wrap!important;position:static!important;height:auto!important;padding:0!important;margin:0 0 10px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:inherit!important}
.tbar-slot *{visibility:visible}
.tbar-slot > * *:not(svg):not(path){max-width:100%}
.tbar-slot button, .tbar-slot a{min-height:52px!important;min-width:52px!important;font-size:15px!important}
.tbar-slot [hidden]{display:none!important}
.tbar-close{width:100%;min-height:52px;border-radius:14px;border:1.5px solid var(--line);background:transparent;color:inherit;font:inherit;font-weight:800;font-size:16px;cursor:pointer}
/* pannello Comandi: colori propri, leggibili su chiaro e scuro (la testata aveva testo chiaro su fondo scuro) */
.tbar-slot, .tbar-slot *{color:var(--txt)!important}
.tbar-slot button, .tbar-slot a, .tbar-slot select{background:transparent!important;border:1.5px solid var(--line)!important;border-radius:14px!important;opacity:1!important}
.tbar-slot > *{gap:8px!important}