/* Quaderno dei kanji — pannelli: accesso, indice, classifica, impostazioni */
  /* ===== Accesso ===== */
  .auth-panel{max-width:420px}
  .auth-form{display:flex;flex-direction:column;gap:6px;margin-top:18px}
  .auth-form label{font-size:12px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
  .auth-form input{
    padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
    font-size:16px;font-family:var(--sans);color:var(--ink);background:#fff;
  }
  .auth-form input:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 1px var(--ai) inset}
  .auth-err{color:var(--shu);font-size:13px;min-height:18px;margin-top:4px}
  .auth-alt{background:none;border:none;color:var(--ai);font-size:13px;cursor:pointer;
    text-decoration:underline;font-family:var(--sans);margin-top:10px}
  .user-chip{font-size:13px;color:var(--ink-soft);margin-right:6px;white-space:nowrap}
  .user-chip b{color:var(--ink);font-family:var(--serif)}
  .user-chip a{color:var(--ai)}
  .save-state{font-size:11.5px;margin-left:6px}
  .save-state:empty{display:none}      /* niente riga vuota quando tace */
  .save-state.save-err{color:var(--shu);font-weight:700}

  /* ===== Menu JSON ===== */
  .menu-wrap{position:relative;display:inline-block}
  /* ---- le tendine ----
     Riquadro bianco con angoli larghi e un'ombra sola; ogni voce è una riga
     con il suo kanji a sinistra, in rosso, e il nome a destra. La voce attiva
     si accende di rosso chiaro. Vale per tutte: «Studio», «Visualizza»,
     e qualunque altra ne arrivi. */
  .menu{
    display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;
    width:max-content;max-width:340px;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.14);padding:6px;
  }
  .menu.open{display:block}
  .menu button{
    display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    background:none;border:none;border-radius:8px;
    padding:10px 12px;font-size:13.5px;color:var(--ink);cursor:pointer;font-family:var(--sans);
    white-space:nowrap;
  }
  .menu button:hover{background:#F6F1EE}
  /* il kanji della voce: largo uguale per tutte, così i nomi si incolonnano */
  .menu .mj{
    flex:none;width:22px;text-align:center;color:var(--shu);
    font-family:var(--mincho);font-size:15px;line-height:1.2;
  }
  .menu button.on{background:color-mix(in srgb,var(--shu) 9%,#fff);color:var(--shu);font-weight:700}

  /* ===== Indice dei kanji ===== */
  .index-panel{max-width:900px}
  .idx-grid{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px}
  .idx-k{
    width:36px;height:36px;padding:0;line-height:1;
    font-size:21px;font-family:var(--serif);
    border:1px solid transparent;border-radius:7px;background:none;
    color:#CFCBC2;cursor:pointer;transition:.1s;
  }
  .idx-k:hover{border-color:var(--line);background:#fff;color:var(--ink-soft)}
  .idx-k.got{color:var(--ink);font-weight:600}
  .idx-k.got:hover{border-color:var(--shu);background:#FBF1EF;color:var(--ink)}
  .idx-count{font-size:12px;color:var(--ink-soft);font-family:var(--sans);font-weight:400}

  /* ===== Progressi utenti =====
     Una riga per persona: posto, faccia, nome con la barra di quanto ha fatto
     rispetto a chi ha più kanji, e i due numeri in fondo con la loro etichetta
     sotto. Non è una gara: la barra serve a vedere il proprio passo. */
  .lb-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
  .lb-row{
    display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;
    border:1px solid var(--line);background:#fff;font-size:14.5px;
    transition:border-color .14s, box-shadow .14s, transform .14s;
  }
  .lb-row:hover{border-color:#C9C4B8;box-shadow:0 6px 18px -10px rgba(0,0,0,.35)}
  .lb-row.lb-self{border-color:var(--shu);background:#FCF4F2;box-shadow:0 0 0 1px var(--shu) inset}
  .lb-rank{
    flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--title);font-weight:900;font-size:12.5px;
    background:var(--paper);color:var(--ink-soft);
  }
  .lb-row.top1 .lb-rank{background:#E8C86A;color:#4A3A0E}
  .lb-row.top2 .lb-rank{background:#D8D5CD;color:#4A4842}
  .lb-row.top3 .lb-rank{background:#E0B693;color:#4E3220}
  .lb-row .acc-img{flex:none}   /* la foto (o l'animaletto) di ogni utente */
  .lb-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  .lb-name{
    font-family:var(--title);font-weight:900;font-size:14.5px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .lb-bar{display:block;height:5px;border-radius:99px;background:var(--paper);overflow:hidden}
  .lb-bar i{display:block;height:100%;border-radius:99px;background:var(--ai);opacity:.55}
  .lb-row.lb-self .lb-bar i{background:var(--shu);opacity:.75}
  .lb-stats{flex:none;display:flex;gap:14px;text-align:right}
  .lb-val{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
  .lb-val b{font-family:var(--title);font-weight:900;font-size:17px;color:var(--ink)}
  .lb-val em{font-style:normal;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
  .lb-val.soft b{color:var(--ink-soft)}
  @media (max-width:560px){
    .lb-row{gap:9px;padding:10px 11px}
    .lb-stats{gap:10px}
    .lb-val b{font-size:15px}
    .lb-val em{font-size:9.5px;letter-spacing:.06em}
  }
  .pdf-dl{display:flex;gap:8px;align-items:center}
  .g-next{margin-top:20px;width:100%;padding:13px;border:none;border-radius:12px;background:var(--ai);color:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:var(--serif)}
  .g-over{text-align:center;padding:20px 0}
  .g-big-score{font-family:var(--serif);font-size:54px;font-weight:700;color:var(--shu);line-height:1}
  .g-over-msg{font-size:15px;color:var(--ink-soft);margin:10px 0 26px}
  .g-over-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .g-over-btns button{padding:12px 20px;border-radius:12px;font-weight:700;cursor:pointer;font-size:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-family:var(--sans)}
  .g-over-btns .primary{background:var(--shu);color:#fff;border-color:var(--shu)}
  @media(max-width:560px){
    .game-panel{--pp:18px;--pht:20px;padding:0 var(--pp) 28px}
    .g-modes{grid-template-columns:1fr}
    .g-options{grid-template-columns:1fr}
    /* titolo più contenuto: così "Inizia" gli resta accanto invece di finirci sotto */
    .g-titlerow .g-title{font-size:20px}
    .g-titlerow .g-start{padding:9px 18px;font-size:14px}
    .g-ansgrid{grid-template-columns:1fr;gap:12px}
  }

  /* ===== Parole senza kanji (単語帳) ===== */
  /* la sezione parole non è un capitolo a parte: comincia dove finisce la
     barra, come quella dei kanji (prima si apriva 46px più in basso) */
  .words-sec{margin-top:8px}
  .words-title{font-size:16px;margin-bottom:4px}
  .words-note{font-size:13px;color:var(--ink-soft);margin:2px 0 18px}
  .word-card{padding:18px 22px 20px}
  .words-empty{
    text-align:center;padding:26px 16px;color:var(--ink-soft);font-size:13.5px;
    border:2px dashed var(--line);border-radius:12px;margin-bottom:14px;
  }
  .add-word{width:100%;padding:12px;border-style:dashed}

  /* ===== Tab Kanji / Parole sotto la ricerca =====
     Sono un interruttore di vista, e devono sembrarlo: prima erano due pulsanti
     larghi tutta la pagina, in peso 900 e col contorno acceso — gridavano più
     delle schede che annunciavano. Ora è un segmentato compatto, largo quanto
     il testo, e a gridare in questa barra resta solo «Nuova scheda». */
  .view-tabs{display:flex;align-items:center;gap:8px;margin:-10px 0 16px}
  /* è il segmentato a spingere: tutto quello che viene dopo finisce a destra,
     anche quando «Collega ai kanji» non c'è. Prima la spinta stava su
     «Collega», e nella sezione dei kanji — dove quel pulsante è nascosto —
     «Visualizza» si ritrovava appiccicato alle linguette. */
  .vseg{display:inline-flex;gap:4px;padding:4px;background:#EDEBE4;border-radius:12px;
    margin-right:auto}
  .vtab{
    display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9px;
    border:none;background:transparent;font-family:var(--title);font-weight:700;font-size:14px;
    color:var(--ink-soft);cursor:pointer;transition:.12s;
    /* il nome non si spezza MAI dentro sé stesso: senza questo, appena la barra
       si stringe, «漢字» va a capo e diventa 漢 sopra e 字 sotto */
    white-space:nowrap;
  }
  .vtab:hover{color:var(--ink)}
  .vtab.on{background:#fff;color:var(--shu);box-shadow:0 1px 3px rgba(20,20,18,.12)}
  .vcount{
    font-family:var(--sans);font-weight:700;font-size:11.5px;color:#8A867C;
    background:rgba(20,20,18,.06);border-radius:99px;padding:2px 8px;min-width:22px;text-align:center;
  }
  .vtab.on .vcount{background:color-mix(in srgb,var(--shu) 12%,#fff);color:var(--shu)}
  /* «Collega ai kanji»: l'azione di servizio, in fondo a destra. Il contorno
     tratteggiato di prima la faceva sembrare spenta — in quasi tutte le
     interfacce il tratteggio vuol dire «vuoto» o «non disponibile». */
  .vtab-mass{
    flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
    border:1px solid var(--line);border-radius:99px;background:#fff;
    font-family:var(--sans);font-weight:600;font-size:12.5px;color:var(--ink-soft);
    cursor:pointer;transition:.12s;
  }
  .vtab-mass:hover{color:var(--ink);border-color:var(--ink)}
  /* l'Indice: stessa pastiglia degli altri comandi di vista. Il 索引 che
     aveva davanti è andato: era il pezzo che su telefono faceva sbordare
     la barra, e la scritta da sola dice già tutto. */
  .vtab-mass .ic{width:15px;height:15px;flex:none}
  /* l'icona di «Collega ai kanji»: due schede accavallate, il kanji sopra e la
     parola in romaji sotto. Il varco è del colore del pulsante, quindi va
     ridichiarato dove il fondo cambia (al passaggio del mouse resta bianco). */
  .ic-collega{width:16px;height:16px;flex:none}
  .ic-collega .cg-r{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
  .ic-collega .cg-vuoto{fill:#fff;stroke:none}
  .ic-collega .cg-jp{font-family:var(--mincho);font-weight:600;fill:currentColor}
  .ic-collega .cg-ro{font-family:var(--sans);font-weight:800;fill:currentColor}
  /* ---- la barra si stringe per gradi ----
     Con quattro comandi a destra, sotto gli 880 px non ci stanno più tutti
     scritti: i primi a lasciare il nome sono «Collega» e «Riordina», che
     hanno un'icona che parla da sola. Le linguette restano leggibili.
     Prima non c'era questo gradino, e a metà strada «漢字» finiva a capo
     dentro al suo stesso pulsante. */
  .vm-ok{display:flex;align-items:center}
  @media (max-width:880px){
    .vtab-mass .vm-t{display:none}
    .vtab-mass{padding:9px 12px}
    /* senza la parola accanto, la spunta si prende il rosso: è l'unico segno
       rimasto a dire che il riordino è acceso e che toccandola si chiude */
    .vtab-mass .vm-ok{color:var(--shu)}
  }
  @media (max-width:560px){
    .vtab-mass .vm-t{display:none}
    /* qui i pixel sono contati: linguette, Visualizza, riordino e Indice
       (con la sua scritta) devono starci tutti in 375 px senza che la
       pagina scorra di lato — misurato, non a occhio */
    .vtab-mass{padding:9px 8px}
    .vtab{padding:8px 9px;gap:5px;font-size:13px;white-space:nowrap}
    .vcount{padding:2px 5px;min-width:16px;font-size:10.5px}
    .vseg{gap:2px;padding:3px}
    .view-tabs{gap:3px}
  }

  /* ===== 表示 «Visualizza»: il menù delle viste =====
     Fatto come quello di Esplora file: icona a sinistra, nome a destra, e la
     voce attiva evidenziata. Le voci le mette il codice, e cambiano con la
     sezione — i kanji ne hanno una in più. */
  .vista-wrap{flex:none}
  .vista-btn{margin-left:0}
  /* «Visualizza» resta l'icona della vista più la freccetta, anche sul
     computer: il nome per esteso lo dice il menù quando lo apri, e nella barra
     era il pezzo più lungo di tutti. */
  .vista-btn .vb-t{display:none}
  .vista-btn .vb-c{font-size:10px;opacity:.6;margin-left:-2px}
  .vm-ic{display:inline-grid;place-items:center;width:16px;height:16px;flex:none}
  .vm-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round}
  /* stessa tendina delle altre: cambia solo che il posto del kanji lo prende
     l'icona della vista, e che la voce attiva c'è davvero */
  .vista-menu{left:auto;right:0;padding:6px}
  .vista-menu .vm-v{
    display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px 10px 10px;
    border-radius:8px;font-size:13.5px;color:var(--ink);white-space:nowrap;
  }
  .vista-menu .vm-v:hover{background:#F6F1EE}
  .vista-menu .vm-v.on{background:color-mix(in srgb,var(--shu) 9%,#fff);
    color:var(--shu);font-weight:700}
  .vista-menu .vm-v.on .vm-ic svg{stroke-width:1.8}
  /* i controlli non sono viste: stanno sotto una riga, con il loro titoletto */
  .vista-menu .vm-sep{
    margin:6px 4px 3px;padding-top:7px;border-top:1px solid var(--line);
    font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.11em;
    text-transform:uppercase;color:#A5A199;
  }
  .vista-menu .vm-ctrl.on{background:var(--ai-soft);color:var(--ai)}
  .vista-btn.vb-ctrl{border-color:var(--ai);color:var(--ai)}

  /* ===== 田 le tessere dei kanji ===== */
  #cards.v-tessere{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  /* l'intestazione di livello NON è una tessera: prende tutta la riga, con la
     sua linea lunga, come nelle altre viste — prima restava schiacciata in
     una cella e la linea era un trattino */
  #cards.v-tessere .kj-sez{grid-column:1 / -1;margin:10px 0 0}
  .k-tile{
    display:flex;flex-direction:column;align-items:center;gap:0;position:relative;
    padding:16px 12px 14px;background:#fff;border:1px solid rgba(20,20,18,.08);
    border-radius:16px;text-align:center;cursor:pointer;transition:.13s;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .k-tile:hover{box-shadow:0 8px 22px -14px rgba(0,0,0,.45);transform:translateY(-1px)}
  .kt-k{font-family:var(--mincho);font-weight:600;font-size:42px;line-height:1.15;color:var(--ink)}
  .kt-m{margin-top:6px;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kt-n{margin-top:5px;font-family:var(--sans);font-size:11px;color:#A5A199}
  /* la pastiglia del livello: nella tessera sta appesa all'angolo, nelle righe
     sta in fila con gli altri pezzi. Erano la stessa classe, e nelle righe
     volava in cima alla pagina — l'angolo a cui si appendeva non era il suo. */
  .kt-lv,.qk-lv{font-family:var(--sans);font-size:9.5px;font-weight:700;
    padding:2px 7px;border-radius:8px;background:#F7EAD9;color:#C97F35;line-height:1.5}
  .kt-lv{position:absolute;top:9px;right:9px}
  .qk-lv{flex:none}

  /* ===== 目 l'elenco dei kanji, con dentro le sue parole ===== */
  #cards.v-elenco,#wordCards.v-elenco{display:block}
  .k-row{
    display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;
    width:100%;text-align:left;padding:12px 16px;margin-bottom:8px;background:#fff;
    border:1px solid rgba(20,20,18,.08);border-radius:15px;cursor:pointer;transition:.13s;
  }
  .k-row:hover{box-shadow:0 6px 18px -13px rgba(0,0,0,.45)}
  .kr-k{font-family:var(--mincho);font-weight:600;font-size:34px;line-height:1;
    text-align:center;padding-top:2px;color:var(--ink)}
  .kr-c{min-width:0}
  .kr-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .kr-m{font-family:var(--sans);font-size:14px;color:var(--ink)}
  .kr-y{font-family:var(--serif);font-size:12.5px;color:#5B7C9D}
  .kr-p{display:block;margin-top:6px;font-family:var(--sans);font-size:12.5px;color:#A5A199;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kr-p b{font-family:var(--mincho);font-weight:600;color:var(--ink-soft)}
  .kr-vuota{font-style:italic}

  /* ===== 単語 solo parole: il kanji di lato, le sue parole in colonna ===== */
  #cards.v-parole{display:block}
  .k-parole{
    display:grid;grid-template-columns:76px minmax(0,1fr);gap:0;
    margin-bottom:10px;background:#fff;border:1px solid rgba(20,20,18,.08);
    border-radius:15px;overflow:hidden;
  }
  /* Il kanji è un pulsante e deve sembrarlo: sta in un riquadro suo, col
     bordo, e sotto ha scritto «apri ›». Prima era solo un fondo grigio, che
     in questa app vuol dire «intestazione», non «premimi». */
  .kp-k{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    margin:8px;padding:8px 4px;background:#fff;border:1px solid var(--line);
    border-radius:12px;cursor:pointer;transition:.13s;text-align:center;
  }
  .kp-k:hover{border-color:var(--shu);background:color-mix(in srgb,var(--shu) 5%,#fff)}
  .kp-k:hover .kp-apri{color:var(--shu)}
  .kp-kj{font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.05;color:var(--ink)}
  .kp-mn{font-family:var(--serif);font-size:10.5px;color:var(--ink-soft);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kp-apri{font-family:var(--serif);font-size:9.5px;font-weight:700;letter-spacing:.05em;
    color:#B3AFA5;margin-top:1px;transition:.13s}
  .kp-l{padding:4px 14px 4px 4px}
  .kp-r{
    display:flex;align-items:baseline;gap:10px;padding:7px 0;
    border-bottom:1px solid #EFEDE5;
  }
  .kp-r:last-child{border-bottom:none}
  /* un font solo, quello delle schede: prima la parola era in Shippori Mincho
     e la lettura in Zen Kaku, e nella stessa riga si vedevano due grafie */
  .kp-w{font-family:var(--serif);font-size:17px;flex:none;color:var(--ink)}
  .kp-y{font-family:var(--serif);font-size:12.5px;color:#5B7C9D;flex:none}
  .kp-m{font-family:var(--serif);font-size:13px;color:var(--ink-soft);flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ===== 単語 l'elenco delle parole sciolte ===== */
  .w-row{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    padding:11px 16px;margin-bottom:7px;background:#fff;
    border:1px solid rgba(20,20,18,.08);border-radius:13px;cursor:pointer;transition:.13s;
  }
  .w-row:hover{box-shadow:0 4px 14px -10px rgba(0,0,0,.45)}
  .wr-w{font-family:var(--mincho);font-weight:600;font-size:18px;flex:none;color:var(--ink)}
  .wr-r{font-family:var(--serif);font-size:13px;color:#5B7C9D;flex:none}
  .wr-m{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wr-lb{font-family:var(--sans);font-size:10.5px;font-weight:600;padding:3px 9px;
    border-radius:9px;background:#EDEBE4;color:#8A867C;flex:none}

  /* una scheda aperta dentro una vista stretta: si distende lì dov'è, e il
     «Richiudi» si prende l'angolo in alto a destra — quello che in qualunque
     interfaccia vuol dire «chiudi». Prima lì c'era la × che cancella. */
  /* «Chiudi» ha una riga sua, sopra la scheda, allineata a destra. Prima
     sbordava dal bordo (posizione assoluta) e con la PRIMA scheda dell'elenco
     finiva a galleggiare nel vuoto sotto alla barra, staccato da tutto.
     In riga non può più andare addosso a niente. */
  .sch-aperta{position:relative;grid-column:1/-1}
  .sch-chiudi{
    display:block;margin:0 0 7px auto;padding:5px 15px;border-radius:20px;
    background:#fff;border:1px solid var(--line);color:var(--ink-soft);
    font-family:var(--sans);font-size:11.5px;font-weight:600;cursor:pointer;transition:.12s;
  }
  .sch-chiudi:hover{border-color:var(--ink);color:var(--ink)}

  /* ---- eliminare una scheda ----
     In fondo, dopo tutto il resto: ci arrivi solo se hai scorso la scheda
     intera, cioè dopo aver visto cosa stai per buttare. Discreta finché non la
     tocchi: è un'azione che non deve invitare. */
  .rm-card{
    display:block;margin:14px auto 0;padding:8px 18px;border-radius:99px;
    border:1px solid transparent;background:transparent;color:#B3AFA6;
    font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:.13s;
  }
  .rm-card:hover{border-color:color-mix(in srgb,var(--shu) 35%,#fff);
    background:color-mix(in srgb,var(--shu) 7%,#fff);color:var(--shu)}

  /* ===== Gioco: bottone che apre il popup dei kanji/parole filtrate ===== */
  .g-showpick{
    display:flex;align-items:baseline;gap:10px;width:100%;margin-top:12px;
    padding:11px 14px;border:1.5px solid var(--ai);border-radius:11px;
    background:#F0F4F8;cursor:pointer;text-align:left;
    font-family:var(--serif);font-weight:700;font-size:13.5px;color:var(--ai);
    transition:.12s;
  }
  .g-showpick:hover{background:var(--ai);color:#fff}
  .g-showpick:hover .idx-count{color:#fff}
  .picker-overlay{z-index:var(--z-picker)}

  /* ===== Domande a comparsa ===== */
  .ask-overlay{z-index:var(--z-dialog)}
  .ask-q{
    font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);
    margin:18px 0 16px;line-height:1.6;
  }
  .ask-a{
    width:100%;min-height:110px;resize:vertical;
    padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
    font-family:var(--sans);font-size:14.5px;color:var(--ink);background:#fff;
    margin-bottom:18px;
  }
  .ask-a:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 1px var(--ai) inset}
  .ask-q-txt{flex:1;min-width:0;font-size:14px;color:var(--ink);padding:4px 2px}
  /* due tasti allineati, stessa altezza: «imparata» ghost a sinistra, «Salva»
     pieno che riempie il resto — niente più bottoni sfalsati */
  .ask-actions{display:flex;gap:10px;align-items:stretch;margin-top:2px}
  .ask-learned,.ask-save{
    height:46px;border-radius:12px;cursor:pointer;transition:.14s;white-space:nowrap;
    font-family:var(--serif);font-weight:700;font-size:14.5px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .ask-learned{flex:none;padding:0 18px;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft)}
  .ask-learned:hover{border-color:var(--ai);color:var(--ai)}
  .ask-save{flex:1;padding:0 24px;border:none;background:var(--shu);color:#fff}
  .ask-save:hover{filter:brightness(1.06)}
  .ask-save:active{transform:translateY(1px)}
  /* riga frequenza / ora + pulsante affiancato */
  .ask-opts{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .ask-opts label{flex:1;min-width:160px}
  .ask-opts .btn{flex:none}
  /* riepilogo delle risposte */
  .asum-day{margin-bottom:8px}
  .asum-item{padding:9px 0;border-bottom:1px dashed var(--line)}
  .asum-q{font-family:var(--serif);font-weight:700;font-size:14.5px;color:var(--ink);
    display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .asum-time{margin-left:auto;font-family:var(--sans);font-weight:400;font-size:11.5px;color:var(--ink-soft)}
  .asum-learned{font-size:10.5px;color:#0d7a3d;background:#E9F7EF;border-radius:999px;padding:1px 8px;font-weight:600}
  .asum-a{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:3px;white-space:pre-wrap}
  /* promemoria fluttuante del riepilogo */
  .asksum-banner{
    position:fixed;left:18px;bottom:20px;z-index:300;
    display:flex;align-items:center;gap:10px;
    background:var(--ai);color:#fff;border:none;border-radius:999px;cursor:pointer;
    padding:11px 8px 11px 18px;font-family:var(--sans);font-size:13.5px;font-weight:600;
    box-shadow:0 8px 22px -6px rgba(0,0,0,.45);
  }
  .asksum-banner:hover{background:#1d3a54}
  .asb-x{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
    font-size:16px;line-height:1;background:rgba(255,255,255,.18)}
  .asb-x:hover{background:rgba(255,255,255,.32)}
  @media (max-width:560px){ .asksum-banner{left:12px;right:12px;bottom:14px;justify-content:center} }

  /* ===== Gioco: parole in gioco (chip rimovibili) ===== */
  .g-subh{
    font-family:var(--title);font-weight:900;font-size:13.5px;color:var(--ink);
    margin:16px 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  }
  .g-wordlist{display:flex;flex-wrap:wrap;gap:7px}
  .g-wchip{
    padding:5px 12px;border-radius:99px;border:1.5px solid var(--line);background:#fff;
    font-family:var(--serif);font-size:14px;color:var(--ink);cursor:pointer;transition:.12s;
  }
  .g-wchip:hover{border-color:var(--shu)}
  .g-wchip.off{opacity:.4;text-decoration:line-through;background:var(--paper)}

  /* ===== Gioco: riempi la frase ===== */
  .g-sent{font-family:var(--serif);font-size:23px;line-height:1.9;color:var(--ink)}
  .g-blank{color:var(--shu);font-weight:700;letter-spacing:1px}
  .g-chip .k.small{font-size:16px;line-height:1.3;padding-top:4px}
  @media (max-width:560px){ .g-sent{font-size:18px} }

  /* --- Override mobile che devono vincere sulle regole base definite più in basso --- */
  @media (max-width:700px){
    .hint{display:none}       /* nota lunga: superflua sul telefono */
    .card{padding:18px 15px 20px}
    .word-card{padding:16px 14px 18px}
  }

/* ---- Prestazioni: le schede fuori schermo non vengono impaginate finché
   non servono (content-visibility); la stima dell'altezza evita salti di
   scroll. In stampa si torna al rendering completo. ---- */
/* il containment sta su un involucro INTERNO (.card-in): così il numero della
   scheda e la × di eliminazione, che sporgono dal bordo, non vengono tagliati */
.card .card-in{content-visibility:auto;contain-intrinsic-size:auto 680px}
@media print{
  .card .card-in{content-visibility:visible;contain-intrinsic-size:none}
}

/* ---- Profilo e privacy: intestazione account + interruttori moderni ---- */
.prof-acct{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 4px;
  padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);
}
.prof-acct-l{font-family:var(--title);font-weight:900;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.prof-acct b{font-family:var(--serif);font-size:15px;color:var(--ink)}
.prof-toggles{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
/* riga con etichetta+descrizione a sinistra e interruttore a destra */
.tgl-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;transition:.14s;
  border:1px solid var(--line);border-radius:12px;background:#fff;
}
.tgl-row:hover{border-color:var(--ai)}
.tgl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tgl-t{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink);line-height:1.25}
.tgl-d{font-size:12px;color:var(--ink-soft);line-height:1.4}
.tgl{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tgl-sw{flex:none;width:44px;height:25px;border-radius:99px;background:#D8D2CC;position:relative;transition:.18s}
.tgl-sw::after{
  content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:.18s;
}
.tgl:checked ~ .tgl-sw{background:var(--ai)}
.tgl:checked ~ .tgl-sw::after{transform:translateX(19px)}
.tgl:focus-visible ~ .tgl-sw{box-shadow:0 0 0 3px var(--ai-soft)}
/* email: indirizzo in una riga pulita con lo stato accanto */
.prof-mail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.prof-mail-a{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink);word-break:break-all}

/* ---- Controlla: la tabella prende il posto delle schede ----
   Non è una finestra sopra al quaderno: è la sezione stessa che per un po'
   diventa un elenco da spuntare. Perciò niente riquadro grigio attorno, e
   l'elenco è alto quanto serve — a limitarlo sarebbe la pagina a scorrere
   due volte, dentro e fuori. */
.qkc{background:#fff;border:1px solid rgba(20,20,18,.08);border-radius:16px;padding:14px 16px 12px}
.qkc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qkc-jp{font-family:var(--mincho);font-weight:600;font-size:18px;color:var(--shu)}
.qkc-t{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink)}
.qkc-n{font-family:var(--sans);font-size:12px;color:var(--ink-soft)}
.qkc-x{margin-left:auto;padding:6px 14px;border-radius:99px;border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);font-family:var(--sans);font-size:12px;font-weight:600;
  cursor:pointer;transition:.13s}
.qkc-x:hover{border-color:var(--ink);color:var(--ink)}
.qkc .wc-list{max-height:none;overflow:visible}
/* il kanji di casa: la colonna che nel vecchio pannello mancava, ed era la
   ragione per cui bisognava aprire la scheda per capire di chi fosse la parola */
.qkc-kj{font-family:var(--mincho);font-weight:600;font-size:20px;color:var(--ink-soft);
  text-align:center;line-height:1}
.qkc.qkc-k .wc-head,.qkc.qkc-k .wc-row{grid-template-columns:34px 1.1fr 1fr 1.4fr 56px 104px 34px}
.qkc.qkc-f .wc-head,.qkc.qkc-f .wc-row{grid-template-columns:1.2fr 1.4fr 34px}
.qkc.qkc-f.qkc-k .wc-head,.qkc.qkc-f.qkc-k .wc-row{grid-template-columns:34px 1.2fr 1.4fr 34px}
.qkc .qkc-jp-in{font-family:var(--mincho);font-size:16px}
.qkc .qkc-corto{display:none}
/* sul computer le intestazioni SONO le colonne: la parolina «ordina per» la
   direbbe una cosa che si vede già */
.qkc .qkc-ord-t{display:none}

/* ---- l'elenco: righe da leggere, non caselle da riempire ----
   Le caselle a riposo non hanno la sottolineatura: è testo finché non lo
   tocchi, come nelle schede. Chi è incompleto lo dice un filo rosso a
   sinistra — prima si tingeva di rosa la riga INTERA, e con un quarto delle
   parole incomplete la tabella sembrava un errore da cima a fondo. */
.qkc .wc-row{
  position:relative;padding:9px 2px 9px 11px;border-bottom:1px solid #EFEDE6;
  border-radius:0;background:none;
}
.qkc .wc-row:last-child{border-bottom:none}
.qkc .wc-row:hover{background:#FAF9F6}
.qkc .wc-row.bad{background:none}
.qkc .wc-row.bad::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:3px;background:var(--shu);
}
/* la casella vuota dice CHE COSA manca, in corsivo, col puntino rosso: «—»
   diceva solo che era vuota, e il rosso pieno lo diceva di tutta la riga.
   (Il contorno del campo in modifica sta nelle regole base di .wc-in, più
   sotto: qui il controllo è l'unico a usarle.) */
.qkc .wc-in.wc-miss::placeholder{color:#C9A9A2;font-style:italic;font-size:13px;opacity:1}
/* Il 分 da fermo NON c'è: su ottanta righe era la cosa che si vedeva di più.
   Compare accanto al campo quando ci passi sopra o ci stai scrivendo — fuori
   dal contorno: è un attrezzo della riga, non parte della casella. Quello
   BLU (lettura già divisa) resta sempre: lì è un'informazione. */
.qkc .rd-splitb{
  display:none;background:none;border:none;padding:0 2px;width:auto;height:auto;
  color:#B9B5AB;font-family:var(--mincho);font-size:13px;line-height:1;box-shadow:none;
}
.qkc .rd-splitb.on,
.qkc .wc-read:hover .rd-splitb,
.qkc .wc-read:focus-within .rd-splitb{display:inline-block}
.qkc .rd-splitb:hover{color:var(--ai);background:none}
.qkc .rd-splitb.on{background:none;color:var(--ai)}
/* la lettura già divisa è testo, non una casella: niente riga sotto */
.qkc .rd-derived{border-bottom-color:transparent}
.qkc .qkc-kj{color:#A5A199;font-size:18px}

@media (max-width:760px){
  /* ---- sul telefono: voci, non colonne ----
     Le celle restano quelle (stesse caselle, stessi popup), è la griglia che
     le rimette in due righe: parola e lettura sopra, significato, livello e
     label sotto. Così tornano anche le due colonne che prima, per larghezza,
     dovevo togliere del tutto. */
  /* senza colonne, le intestazioni non possono più fare da intestazioni: qui
     sono i modi di ordinare, e lo dicono */
  .qkc .wc-head{
    display:flex;flex-wrap:wrap;align-items:center;gap:5px;
    border-bottom:1px solid var(--line);padding:0 0 9px;
  }
  .qkc .qkc-ord-t{
    display:inline;font-family:var(--sans);font-size:9.5px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:#A5A199;margin-right:2px;
  }
  .qkc .wc-head .wc-h{
    padding:4px 9px;border:1px solid var(--line);border-radius:99px;
    font-size:9.5px;letter-spacing:.03em;
  }
  .qkc .wc-head .wc-h.on{background:var(--shu);border-color:var(--shu);color:#fff}
  .qkc .wc-head > span:empty{display:none}
  /* Parola e significato prendono lo spazio (colonna 1fr), lettura e pastiglie
     stanno a destra incolonnate. La lettura ha una larghezza minima sua: è un
     campo di testo, e in una colonna «auto» il suo minimo naturale è quasi
     zero — si riduceva a due caratteri tagliati.
     Le regole del computer hanno tre classi: qui ne servono altrettante, o
     restano le loro sette colonne e la parola si stringe a quattro pixel. */
  .qkc.qkc-k:not(.qkc-f) .wc-row{
    grid-template-columns:30px minmax(0,1fr) auto auto 22px;
    grid-template-areas:"kj w  r  r  go"
                        "kj m  jl lb go";
  }
  .qkc:not(.qkc-k):not(.qkc-f) .wc-row{
    grid-template-columns:minmax(0,1fr) auto auto 22px;
    grid-template-areas:"w  r  r  go"
                        "m  jl lb go";
  }
  .qkc .wc-row{gap:3px 8px;padding:9px 2px 9px 9px;align-items:baseline}
  .qkc .wc-read{min-width:92px;max-width:130px;justify-content:flex-end}
  .qkc .qkc-kj{grid-area:kj;align-self:start;padding-top:3px}
  .qkc .wc-word{grid-area:w}
  .qkc .wc-read{grid-area:r}
  .qkc .wc-mean{grid-area:m}
  .qkc .qkc-cel-jl{grid-area:jl}
  .qkc .qkc-cel-lbl{grid-area:lb}
  .qkc .wc-go{grid-area:go;align-self:center}
  .qkc .wc-word{font-size:16px}
  .qkc .wc-in.wc-mean{font-size:13px;color:var(--ink-soft)}
  .qkc .wc-read .wc-rin{font-size:12.5px}
  .qkc .wc-pk .pk-btn{padding:4px 8px;font-size:9.5px}
  /* le frasi non hanno pastiglie: restano due righe, giapponese e traduzione */
  .qkc.qkc-f.qkc-k .wc-row{
    grid-template-columns:30px minmax(0,1fr) 22px;
    grid-template-areas:"kj t  go"
                        "kj tr go";
  }
  .qkc.qkc-f:not(.qkc-k) .wc-row{
    grid-template-columns:minmax(0,1fr) 22px;
    grid-template-areas:"t  go"
                        "tr go";
  }
  .qkc.qkc-f .qkc-jp-in{grid-area:t}
  .qkc.qkc-f .wc-mean{grid-area:tr}
  .qkc{padding:12px 12px 10px}
  .qkc .qkc-cel-k .qkc-lungo{display:none}
  .qkc .qkc-cel-k .qkc-corto{display:inline;font-family:var(--mincho);font-size:13px}
}
/* ---- i due filtri ----
   Facevano lo stesso mestiere e non si somigliavano: un pulsante rosso pieno
   e una casella di sistema. Adesso «tutte / da sistemare» è l'interruttore a
   due posizioni che il quaderno usa già per Kanji·Parole, e «prima le
   incomplete» è una pastiglia che si accende — perché quella non nasconde
   niente, cambia solo l'ordine, e le due cose non vanno confuse. */
.qkc-f2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:13px 0 11px}
.qkc-seg{display:inline-flex;gap:3px;padding:3px;background:var(--paper);border-radius:99px}
.qkc-s{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:none;
  border-radius:99px;background:none;color:var(--ink-soft);cursor:pointer;
  font-family:var(--sans);font-size:12.5px;font-weight:600;transition:.13s;
}
.qkc-s:hover{color:var(--ink)}
.qkc-s.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(20,20,18,.12)}
.qkc-b{
  font-style:normal;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:99px;
  background:color-mix(in srgb,var(--shu) 13%,#fff);color:var(--shu);
}
.qkc-s.on .qkc-b{background:var(--shu);color:#fff}
.qkc-pri{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;
  font-family:var(--sans);font-size:12.5px;font-weight:600;transition:.13s;
}
.qkc-pri:hover{border-color:var(--ink);color:var(--ink)}
.qkc-pri.on{background:var(--ai);border-color:var(--ai);color:#fff}
.qkc-fr{font-size:10px;line-height:1}
@media (max-width:520px){
  .qkc-f2{gap:8px}
  .qkc-s{padding:6px 11px;font-size:12px}
  .qkc-pri{padding:7px 11px;font-size:12px}
}
.wc-ctrls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0 10px}
.wc-ctrls > label:first-child{display:flex;flex-direction:column;gap:4px;
  font-family:var(--title);font-weight:900;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.wc-ctrls .pk-btn{flex:none;height:34px;min-width:160px}
.wc-only{font-size:13px;color:var(--ink-soft)}
/* Stessa grafica delle righe parola nella scheda: stesse proporzioni di colonna,
   campi serif sottolineati e pastiglie compatte (non stirate). */
.wc-head,.wc-row{display:grid;grid-template-columns:1.1fr 1fr 1.4fr 56px 104px 34px;gap:10px;align-items:center}
.wc-pk{min-width:0;display:flex}
.wc-pk .pk-btn{flex:0 0 auto;align-self:center;padding:6px 8px;font-size:11.5px}
.wc-head{font-size:11px;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;
  padding:0 2px 6px;border-bottom:1px solid var(--line)}
.wc-list{max-height:52vh;overflow:auto;display:flex;flex-direction:column;margin-top:2px}
.wc-row{padding:5px 2px;border-bottom:1px solid var(--paper)}
.wc-row.bad{background:#FBF3EF;border-radius:8px}
.wc-c{min-width:0}
/* campi: come .ex-row input nella scheda — testo da fermi, contorno grigio
   che stringe solo il campo su cui stai scrivendo */
.wc-in{width:100%;min-width:0;font-family:var(--serif);font-size:15px;color:var(--ink);
  border:1px solid transparent;border-radius:8px;background:transparent;padding:4px 7px;
  overflow:hidden;text-overflow:ellipsis}
.wc-in:hover{border-color:#EDEAE0}
.wc-in:focus{outline:none;border-color:#CFCBC0;background:#fff;
  box-shadow:0 2px 8px -5px rgba(20,20,18,.35)}
/* incompleta: lo dice il segnaposto in corsivo, non un campo tinto di rosso */
.wc-in.wc-miss:focus{border-color:#CFCBC0;background:#fff}
.wc-word{font-size:17px}
.wc-in.wc-mean{font-family:var(--sans)}
/* cella lettura: campo + pulsante 分, identici alla scheda */
.wc-read{display:flex;align-items:center;gap:6px;min-width:0}
.wc-read .wc-rin{flex:1;min-width:0}
.wc-read .rd-derived{flex:1;min-width:0;font-family:var(--serif);font-size:15px;line-height:1.4;
  padding:5px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-jl{text-align:center;cursor:pointer;font-weight:700}
.wc-lb{cursor:pointer;font-size:12px;color:var(--ink-soft)}
.wc-go{border:none;background:none;color:var(--ink-soft);cursor:pointer;font-size:15px;padding:0;line-height:1}
.wc-go:hover{color:var(--ai)}
.wc-miss{color:var(--shu)}
.wc-badn{color:var(--shu)}

/* ---- Lavagne condivise (foglio stile appunti) ---- */
.lavagne-panel{max-width:820px}
.lv-list{display:flex;flex-direction:column;gap:8px;margin:12px 0 6px}
.lv-item{display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 13px;transition:.14s}
.lv-item:hover{border-color:var(--ai)}
.lv-it-tt{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink)}
.lv-it-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lv-it-code{font-family:monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-soft);background:var(--paper);border-radius:6px;padding:2px 8px}
.lv-it-live{font-size:11px;font-weight:700;color:#12A150}
.lv-it-mine{font-size:10px;font-weight:700;color:#fff;background:var(--ai);border-radius:5px;padding:1px 7px}
.lv-join{margin:10px 0}   /* la riga del codice respira fra elenco e «crea» */
.lv-newbox{border-top:1px dashed var(--line);padding-top:12px;margin-top:4px}
.lv-newopts{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;align-items:center}
.lv-newopts .chk{font-size:13px;color:var(--ink-soft);gap:6px}
.lv-newopts input[type=number],.lv-cfg input[type=number]{width:56px;height:30px;border:1.5px solid var(--line);border-radius:8px;padding:0 6px;font-family:var(--sans)}
.lv-hint{font-size:11px;color:var(--ink-soft)}
.lv-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lv-back{background:none;border:none;color:var(--ink-soft);font-size:13px;cursor:pointer;padding:2px 0}
.lv-back:hover{color:var(--ink)}
.lv-top-actions{display:flex;align-items:center;gap:8px}
.lv-cfg-btn{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center}
.lv-cfg-btn:hover{border-color:var(--ai);color:var(--ai)}
.lv-cfg-btn svg{width:17px;height:17px}
.lv-addnote{display:inline-flex;align-items:center;gap:7px;padding:8px 14px}
.lv-addnote svg{width:16px;height:16px}
.lv-cfg{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.lv-cfg .chk{font-size:13px;gap:6px}
/* il codice per entrare, incolonnato a destra dentro la testata del foglio */
.lv-headmeta{align-items:flex-end}
.lv-headmeta .lv-code-chip{flex:none}
/* la riga «chi è online» sta dentro al foglio, allineata al titolo */
.lv-sheet .lv-status{display:flex;align-items:center;gap:6px;margin:0;padding:2px 16px 6px;font-size:12.5px;color:var(--ink-soft)}
.lv-live{color:#12A150}.lv-solo{color:var(--line)}.lv-cap{color:var(--ink-soft)}
.lv-note{font-size:11.5px;color:var(--ink-soft);margin-top:8px}

/* ---- Foglio a tutta altezza, come negli appunti (solo con lavagna aperta) ---- */
.lavagne-panel.lv-editing{height:calc(100vh - 52px);max-width:1000px;display:flex;flex-direction:column}
.lavagne-panel.lv-editing #lavagne-body{display:flex;flex-direction:column;min-height:0;flex:1}
.lavagne-panel.lv-editing .lv-main{flex:1;min-height:0}
.lv-main{display:flex;flex-direction:column;min-height:0}
.lavagne-panel.lv-editing .lv-sheet{flex:1;min-height:0}
.lavagne-panel.lv-editing .lv-sheet .notes-ta{height:100%;min-height:0;resize:none}
@media (max-width:700px){
  .lavagne-panel.lv-editing{height:calc(100dvh - 28px);max-width:none}
}

/* ---- Cursori collaborativi: dove sta scrivendo ciascuno ---- */
.lv-caret{position:relative;display:inline-block;width:0;height:1.1em;vertical-align:text-bottom}
.lv-caret::before{content:"";position:absolute;left:-1px;bottom:-2px;width:2px;height:1.3em;
  background:var(--cc,#888);border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.6);
  animation:lvblink 1.1s steps(2,start) infinite}
.lv-caret-flag{position:absolute;left:-1px;bottom:1.25em;
  background:var(--cc,#888);color:#fff;font:600 10px/1 var(--sans);white-space:nowrap;
  padding:2px 5px;border-radius:6px 6px 6px 1px;box-shadow:0 2px 6px rgba(0,0,0,.25);
  pointer-events:none;opacity:.96}
@keyframes lvblink{50%{opacity:.3}}

/* ---- «Aggiungi ai tuoi appunti»: chiedo titolo e segnalibro ---- */
/* sotto ai popup (.rc-pop è 1300): il menù dei segnalibri deve poterci stare sopra */
.lv-savedlg{position:fixed;inset:0;z-index:var(--z-dialog);display:none;align-items:center;justify-content:center;
  background:rgba(40,30,26,.5);padding:18px}
.lv-savecat{display:block;margin-top:6px}
.lv-savecat .note-catbtn{max-width:100%}
.lv-savecard{width:min(420px,94vw);background:#fff;border-radius:16px;padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.32);font-family:var(--sans)}
.lv-savetitle{display:flex;align-items:center;gap:8px;font-family:var(--title);font-weight:800;
  font-size:17px;color:var(--ink);margin-bottom:14px}
.lv-savetitle svg{width:19px;height:19px}
.lv-savelab{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:12px}
.lv-savehint{opacity:.7}
.lv-savelab input{display:block;width:100%;box-sizing:border-box;margin-top:5px;height:40px;padding:0 12px;
  border:1.5px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px;color:var(--ink);background:#fff}
.lv-savelab input:focus{outline:none;border-color:var(--ai)}
.lv-saveacts{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;flex-wrap:wrap}
.lv-saveacts .btn{padding:9px 16px}

/* ---- Avviso offline (già loggato, senza rete) ----
   In alto come il toast nero: in basso copriva mani, tastiera e pulsanti.
   Se ci sono tutti e due, il rosso si mette un gradino sotto il nero. */
.qk-offline{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:var(--z-dialog);
  max-width:min(92vw,560px);background:#3b2b26;color:#fff;font-family:var(--sans);font-size:13px;
  padding:10px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;gap:10px}
/* col toast nero acceso, la fascia si mette un gradino sotto. Il selettore
   «fratello» non basta: vale solo se la fascia è nata DOPO il toast, e
   nascono in ordine sparso — così finivano una sopra l'altra. Si guarda
   quindi la pagina intera, non la parentela. */
.qk-toast ~ .qk-offline, #qkToast[style*="flex"] ~ .qk-offline{top:66px}
body:has(#qkToast[style*="flex"]) .qk-offline{top:66px}
.qk-offline button{flex:none;background:rgba(255,255,255,.18);border:none;color:#fff;width:24px;height:24px;
  border-radius:7px;cursor:pointer;font-size:16px;line-height:1}
.qk-offline button:hover{background:rgba(255,255,255,.3)}

/* ---- La barra di avviso: per esteso, oppure ridotta a un cuore che batte ----
   Sono avvisi che non si possono buttare: dicono che c'è del lavoro non
   ancora al sicuro. Ma restare aperti a tutta larghezza mentre si studia è
   una condanna, e coprono proprio quello che si sta scrivendo.
   La × quindi RIDUCE: resta una pastiglia col ⚠ che pulsa a 80 battiti al
   minuto (0,75s l'uno, due colpi come un cuore), sempre in alto al centro.
   Toccandola torna per esteso. */
.qk-avviso{align-items:flex-start;line-height:1.45}
.qk-avviso .qa-corpo{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:1px}
.qk-avviso .qa-txt{flex:1 1 200px;min-width:0}
.qk-avviso .qa-az{display:flex;gap:6px;flex:none}
/* i bottoni delle azioni sono scritte, non quadratini: la regola qui sopra
   li vorrebbe 24×24 e «Riprova ora» ci finirebbe dentro a forza */
.qk-avviso .qa-b{width:auto;height:auto;padding:6px 12px;font-size:12.5px;font-weight:700;
  border-radius:9px;background:rgba(255,255,255,.18)}
.qk-avviso .qa-b:hover{background:rgba(255,255,255,.32)}
/* il ⚠: davanti al testo quando è aperta, unica cosa che resta quando è ridotta */
.qk-avviso .qa-ic{width:22px;height:24px;background:none;font-size:15px;cursor:default;
  display:grid;place-items:center;flex:none}
.qk-avviso .qa-ic:hover{background:none}
.qk-avviso .qa-min{font-size:17px;opacity:.75;align-self:flex-start}
.qk-avviso .qa-min:hover{opacity:1}
.qk-avviso.qa-ridotta{padding:6px;border-radius:99px;max-width:none;width:auto;gap:0}
.qk-avviso.qa-ridotta .qa-corpo,.qk-avviso.qa-ridotta .qa-min{display:none}
.qk-avviso.qa-ridotta .qa-ic{width:34px;height:34px;font-size:19px;cursor:pointer;border-radius:99px}
/* il battito sta sull'icona, non sulla barra: la barra usa già il proprio
   transform per stare al centro, e un secondo transform glielo cancellerebbe
   (finirebbe mezza fuori schermo, a sinistra) */
.qk-avviso.qa-ridotta .qa-ic{animation:qa-batte .75s ease-in-out infinite}
@keyframes qa-batte{
  0%{transform:scale(1);opacity:.85}
  9%{transform:scale(1.18);opacity:1}
  18%{transform:scale(1);opacity:.85}
  27%{transform:scale(1.11);opacity:1}
  38%{transform:scale(1);opacity:.85}
  100%{transform:scale(1);opacity:.55}
}
/* chi non vuole animazioni non le ha: resta il colore, che basta a vedersi */
@media (prefers-reduced-motion:reduce){ .qk-avviso.qa-ridotta .qa-ic{animation:none} }
/* ---- sul telefono l'avviso è largo quanto lo schermo ----
   Con la larghezza a metà il testo si incolonnava in una striscia altissima
   che copriva mezza pagina — proprio la parte in cui si stava lavorando. */
@media (max-width:560px){
  .qk-offline{left:8px;right:8px;transform:none;max-width:none;width:auto}
  .qk-toast ~ .qk-offline, #qkToast[style*="flex"] ~ .qk-offline{top:72px}
  body:has(#qkToast[style*="flex"]) .qk-offline{top:72px}
  /* ridotta torna al centro: è una pastiglia, non una fascia */
  .qk-avviso.qa-ridotta{left:50%;right:auto;transform:translateX(-50%)}
}

/* ---- Elenco lavagne: riga con elimina e scadenza ---- */
.lv-itemrow{display:flex;align-items:stretch;gap:6px}
.lv-itemrow .lv-item{flex:1;min-width:0}
.lv-it-del{flex:none;width:38px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  border-radius:10px;cursor:pointer;display:grid;place-items:center}
.lv-it-del svg{width:16px;height:16px}
.lv-it-del:hover{border-color:var(--shu);color:var(--shu);background:color-mix(in srgb,var(--shu) 7%,#fff)}
.lv-it-exp{display:inline-flex;align-items:center;gap:3px;color:var(--ink-soft);opacity:.85}
.lv-it-exp svg{width:12px;height:12px}
.lv-gcnote{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:11.5px;color:var(--ink-soft)}
.lv-gcnote svg{width:14px;height:14px}
/* pastiglia della scadenza dentro la lavagna aperta */
.lv-exp-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-soft);margin-top:3px}
.lv-exp-chip svg{width:12px;height:12px}
.lv-delbtn{color:var(--shu);border-color:var(--shu)}
.lv-delbtn svg{width:15px;height:15px}
.lv-share-exp{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin:10px 0 4px}
.lv-share-exp svg{width:14px;height:14px}
.lv-share-exp b{color:var(--ink)}

/* ---- Condividi: link pubblico ---- */
.lv-cfg-btn svg{width:17px;height:17px}
.lv-share-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px}
.lv-share-codebig{font-size:13px;color:var(--ink-soft);margin-bottom:10px;letter-spacing:.3px}
.lv-share-codebig b{font-family:var(--title);font-size:20px;color:var(--shu);letter-spacing:2px;margin-left:4px}
.lv-share-linkin{font-size:12.5px!important;color:var(--ink-soft)!important;background:var(--paper)!important}
.lv-share-warn{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--shu);
  background:color-mix(in srgb,var(--shu) 9%,transparent);border-radius:10px;padding:9px 11px;margin-bottom:12px;line-height:1.45}
.lv-share-warn svg{width:16px;height:16px;flex:none;margin-top:1px}

/* ---- Ospite (arrivato dal link pubblico) ---- */
/* pastiglia con l'iniziale colorata: si capisce a colpo d'occhio chi sei */
.lv-guest-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans)}
.lv-guest-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--gc,#888);color:#fff;font-weight:800;font-size:14px;font-style:normal;
  box-shadow:0 2px 6px rgba(0,0,0,.18)}
.lv-guest-txt{display:flex;flex-direction:column;line-height:1.15}
.lv-guest-txt b{font-size:14px;color:var(--ink)}
.lv-guest-txt em{font-style:normal;font-size:11px;color:var(--ink-soft);letter-spacing:.3px}

/* --- schermata d'ingresso (lavagna.html) --- */
.lv-guestwelcome{max-width:420px;margin:4vh auto 0;text-align:center;padding:0 6px}
.lv-hero{text-align:center;padding:4px 0 2px}
.lv-hero-jp{font-family:var(--title);font-size:34px;font-weight:800;color:var(--shu);line-height:1.1;
  text-shadow:0 2px 0 rgba(192,57,43,.12)}
.lv-hero-t{font-family:var(--title);font-size:21px;font-weight:800;color:var(--ink);margin-top:2px}
.lv-hero-s{font-size:13px;color:var(--ink-soft);line-height:1.55;max-width:380px;margin:8px auto 0}
.lv-guest-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lv-guest-form input{flex:1;min-width:200px;max-width:320px;box-sizing:border-box;height:46px;padding:0 14px;
  border:1.5px solid var(--line);border-radius:12px;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff}
.lv-guest-form input:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 3px rgba(46,134,193,.12)}
.lv-guest-form .btn{padding:0 18px;height:46px}
/* variante in colonna (gate della pagina separata: codice + nome + entra) */
.lv-guest-form-col{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px;text-align:left}
.lv-gf-lab{display:block;font-size:11.5px;color:var(--ink-soft);letter-spacing:.3px}
.lv-gf-lab input{display:block;width:100%;max-width:none;margin-top:5px}
.lv-gf-code{text-transform:uppercase;letter-spacing:3px;font-family:var(--title)!important;
  font-size:19px!important;font-weight:700;text-align:center}
.lv-gf-go{width:100%;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.lv-gf-go svg{width:17px;height:17px}
.lv-guest-err{min-height:18px;margin-top:10px;font-size:12.5px;color:var(--shu)}
.lv-guest-alt{margin-top:18px;font-size:13px;color:var(--ink-soft)}
.lv-link-btn{background:none;border:none;color:var(--ai);cursor:pointer;font:inherit;text-decoration:underline;padding:0}

/* ---- Classe e compagni ---- */
.classe-panel{max-width:680px}
.cl-tabs{display:flex;gap:6px;margin:14px 0 10px;border-bottom:1px solid var(--line)}
.cl-tab{border:none;background:none;cursor:pointer;padding:8px 12px;margin-bottom:-1px;
  font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);border-bottom:2px solid transparent}
.cl-tab:hover{color:var(--ink)}
.cl-tab.on{color:var(--ink);font-weight:700;border-bottom-color:var(--shu)}
.cl-bollo{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--shu);color:#fff;font-size:10.5px;font-weight:700}
.cl-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 13px;margin-bottom:10px}
.cl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cl-name{font-family:var(--serif);font-weight:700;font-size:15.5px;color:var(--ink)}
.cl-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:12.5px;color:var(--ink-soft)}
.cl-attesa{color:var(--shu);font-weight:700}
.cl-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cl-acts .btn{padding:7px 12px;font-size:12.5px}
.cl-del{color:var(--shu)}
.cl-tag{font-size:10.5px;font-weight:700;color:var(--ink-soft);background:var(--paper);
  border-radius:6px;padding:2px 7px;white-space:nowrap}
.cl-tag.ok{color:#12A150;background:#EAF7EF}
.cl-roster{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.cl-ok{background:#12A150;border-color:#12A150}
.cl-no{color:var(--ink-soft)}
.cl-sec{margin-top:14px}
.cl-sec-t{font-family:var(--title);font-weight:900;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.cl-newbox{border-top:1px dashed var(--line);padding-top:12px;margin-top:6px}
.cl-hint{font-size:11.5px;color:var(--ink-soft);margin-top:7px}
.cl-ask{margin-top:16px;padding:12px 13px;border:1px dashed var(--line);border-radius:12px;
  background:var(--paper);font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.cl-ask-no{border-color:var(--shu)}
.cl-ask-b{display:block;margin-top:9px;padding:7px 12px;font-size:12.5px}
/* coda delle richieste insegnante, nel pannello di amministrazione */
.adm-teach{margin:14px 0 6px;padding:12px;border:1px solid var(--shu);border-radius:12px;background:#FDF3F1}
.adm-teach-t{font-family:var(--title);font-weight:900;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--shu);margin-bottom:7px}
.adm-teach .cl-st{border-bottom-color:#F0D9D4}

/* ---- Email del profilo e pannello di amministrazione ---- */
.auth-opt{font-weight:400;font-size:11px;color:var(--ink-soft)}
.mail-ok{color:#12A150;font-weight:700;font-size:12px}
.mail-no{color:var(--shu);font-weight:700;font-size:12px}
.set-email{margin:8px 0 4px}
.adm-list{margin-top:14px}
.adm-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:#fff;
}
.adm-row.adm-hidden{opacity:.55;background:var(--paper)}
.adm-name{font-weight:700;min-width:110px}
.adm-tag{font-size:10.5px;font-weight:700;color:#fff;background:var(--ai);border-radius:4px;padding:1px 6px;vertical-align:1px}
.adm-tag.me{background:var(--shu)}
.adm-mail{font-size:12px;color:var(--ink-soft);flex:1;min-width:150px}
.adm-none{color:var(--line)}
.adm-cnt{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.adm-btn{font-size:12px;padding:6px 10px}
.adm-del:hover{background:var(--shu);border-color:var(--shu);color:#fff}
.adm-sp{width:86px}

/* ---- Gioco: titolo con il bottone Inizia accanto ---- */
.g-titlerow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.g-titlerow .g-start{margin:0;width:auto;padding:10px 26px;flex:none}

/* versione dei file in uso: se non combacia con l'ultimo caricamento, il
   browser sta ancora servendo una copia vecchia dalla cache */
.set-ver{text-align:right;font-size:11px;opacity:.6;margin-top:6px}

/* campo con etichetta e tendina semplice (formato della data) */
.set-field{display:flex;flex-direction:column;gap:6px;margin:16px 0 4px}
.set-field label{font-size:10.5px;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase}
.set-sel{
  width:100%;height:36px;padding:0 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:#fff;
  font-family:var(--sans);font-size:14px;color:var(--ink);
}
.set-sel:focus{outline:none;border-color:var(--shu)}

/* ---- Impostazioni: elenco di voci con icona, titolo e spiegazione ---- */
.set-list{display:flex;flex-direction:column;gap:8px;margin:18px 0 4px}
.set-item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;cursor:pointer;transition:.14s;
}
.set-item:hover{border-color:var(--ai);background:#FAFCFE;transform:translateY(-1px)}
/* il pallino numerato delle richieste in attesa, come quello delle notifiche:
   rosso, col numero, appeso alla destra della voce prima della freccia */
.set-bollo{
  flex:none;display:inline-grid;place-items:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:var(--shu);color:#fff;
  font-family:var(--sans);font-size:11px;font-weight:800;
}
.set-ic{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--paper);font-size:18px;line-height:1;
}
.set-item:hover .set-ic{background:#EDF3F8}
.set-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.set-tx b{font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:700}
.set-tx span{font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.set-go{flex:none;color:var(--line);font-size:20px;line-height:1}
.set-item:hover .set-go{color:var(--ai)}
.set-backup .btn{border-radius:12px;padding:11px 12px}

/* ---- Chi sei: immagine, nome e uscita, in fondo alle impostazioni ---- */
.set-acc{
  display:flex;align-items:center;gap:12px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line);
}
.acc-pic{position:relative;background:none;border:none;padding:0;line-height:0;flex:none;cursor:pointer}
.acc-img{
  display:grid;place-items:center;border-radius:50%;object-fit:cover;
  border:2px solid var(--line);background:#fff;
}
.acc-def{
  background:var(--shu);color:#fff;border-color:var(--shu-deep);
  font-family:var(--serif);font-weight:700;line-height:1;
}
.acc-pen{
  position:absolute;right:-2px;bottom:-2px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:10px;line-height:1;
  background:var(--ink);color:#fff;border:2px solid var(--paper);
}
/* galleria delle immagini pronte */
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:16px}
.av-tile{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:1px solid transparent;border-radius:12px;padding:8px 4px;cursor:pointer;
}
.av-tile:hover{border-color:var(--line);background:var(--paper)}
.av-name{font-family:var(--sans);font-size:10.5px;color:var(--ink-soft);text-align:center;line-height:1.2}
/* il cerchio con la penna: carica un'immagine tua */
.av-plus{
  width:54px;height:54px;font-size:22px;color:var(--ink);
  background:var(--paper);border:2px dashed var(--line);
}
.av-own:hover .av-plus{border-color:var(--shu);color:var(--shu)}
.av-clear{width:100%;margin-top:16px}

/* la voce del cambio gestione, sopra al profilo: stessa forma delle voci
   dell'elenco, il kanji al posto dell'icona */
.acc-voce{margin-top:18px}
.set-jp{font-family:var(--serif);color:var(--shu);font-weight:700;font-size:15px}
.acc-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.acc-txt b{font-family:var(--serif);font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.acc-txt span{font-size:11.5px;color:var(--ink-soft)}
.acc-out{flex:none;padding:8px 16px}

/* ---- Impostazioni compatte: menu di bottoni ---- */
/* riga della lingua: etichetta a sinistra, ventaglio delle lingue a destra */
.set-lang{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.set-lang-t{font-size:13.5px;color:var(--ink)}
/* ---- Menu della lingua: bandiera + nome, la spunta su quella in uso ---- */
.lang-pick{position:relative;flex:none}
.fl{
  width:22px;height:16px;flex:none;border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.16) inset;   /* filo di contorno: le bandiere
                                                   chiare non si perdono sul bianco */
}
.lang-btn{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid var(--line);background:#fff;border-radius:10px;
  padding:0 11px;height:38px;cursor:pointer;font-family:var(--sans);
  font-size:13.5px;font-weight:600;color:var(--ink);transition:border-color .12s;
}
.lang-btn:hover,.lang-btn.on{border-color:var(--shu)}
.lang-car{color:var(--ink-soft);font-size:10px}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:100%;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.34);
}
.lang-opt{
  display:flex;align-items:center;gap:9px;width:100%;
  border:none;background:none;border-radius:8px;padding:8px 10px;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);white-space:nowrap;
}
.lang-opt:hover{background:var(--paper)}
.lang-opt.on{font-weight:700}
.lang-tick{margin-left:auto;color:var(--shu);font-weight:700}
@media (max-width:560px){
  .set-lang{flex-direction:column;align-items:stretch;gap:8px}
  .lang-btn{width:100%;justify-content:flex-start}
  .lang-car{margin-left:auto}
}
.set-menu{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.set-menu .btn{width:100%;text-align:left}


/* ---- Personalizzazioni · quali label sono verbi e quali aggettivi ---- */
.pos-field{display:block}
.pos-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.pos-lab{flex:none;width:74px;padding-top:5px;font-family:var(--sans);font-size:12px;color:var(--ink-soft)}
.pos-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.pos-esempi{margin-top:6px;font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pos-ex{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.pos-ex b{font-family:var(--title);font-size:13px;color:var(--ink)}
.pos-lab{display:flex;flex-direction:column;line-height:1.2;width:96px}
.pos-lab em{font-style:normal;font-size:10px;opacity:.75;margin-top:1px}
.pos-gen{margin:8px 0 4px;border-top:1px dashed var(--line);padding-top:8px}
.pos-gen summary{cursor:pointer;font-family:var(--sans);font-size:12px;color:var(--ai);list-style:none}
.pos-gen summary::-webkit-details-marker{display:none}
.pos-gen summary::before{content:"▸ ";font-size:10px}
.pos-gen[open] summary::before{content:"▾ "}

.pos-row .pk-btn{flex:1;min-width:0;max-width:260px}

/* Salvataggio non riuscito: la fascia è rossa, e la × non chiude — riduce
   (vedi .qk-avviso): finché il lavoro non è al sicuro l'avviso resta, magari
   piccolo e pulsante, ma resta. */
.qk-nosave{background:var(--shu-deep,#8f2c20);line-height:1.4}
.qk-nosave .qa-b{white-space:nowrap}
/* ridotta: la pastiglia rossa si vede anche con la coda dell'occhio */
.qk-nosave.qa-ridotta{box-shadow:0 8px 24px rgba(143,44,32,.5)}

/* ---- Il tuo apprendimento delle parole (dentro Progressi) ---- */
.pg-testa{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pg-grande b{font-family:var(--title);font-size:30px;font-weight:900;color:var(--ink);margin-right:8px}
.pg-grande span{font-size:13px;color:var(--ink-soft)}
.pg-dovute{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--shu);font-weight:700}
.pg-dovute svg{width:14px;height:14px}
.pg-barra{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--line);margin-bottom:14px}
.pg-barra i{display:block;height:100%}
.pg-barra i.pg-nuove{background:#D9D6CD}
.pg-barra i.pg-prime{background:var(--jl-n5,#C97F35)}
.pg-barra i.pg-medie{background:var(--jl-n3,#58995F)}
.pg-barra i.pg-sicure{background:var(--jl-n2,#5580BC)}
.pg-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
.pg-box{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.pg-box .pg-jp{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--ink-soft)}
.pg-box .pg-n{font-family:var(--title);font-size:24px;font-weight:900;color:var(--ink);line-height:1.1}
.pg-box .pg-nome{font-size:12.5px;font-weight:700;color:var(--ink)}
.pg-box .pg-desc{font-size:11px;color:var(--ink-soft);line-height:1.35;margin-top:2px}
.pg-box.pg-prime .pg-jp{color:var(--jl-n5,#C97F35)}
.pg-box.pg-medie .pg-jp{color:var(--jl-n3,#58995F)}
.pg-box.pg-sicure .pg-jp{color:var(--jl-n2,#5580BC)}
.pg-peggio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.pg-peggio-h{font-family:var(--title);font-size:10.5px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.pg-w{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:99px;
  border:1px solid var(--line);background:#fff;font-family:var(--serif);font-size:15px;color:var(--ink)}
.pg-w em{font-family:var(--sans);font-style:normal;font-size:11.5px;color:var(--ink-soft)}

/* Intestazioni cliccabili: si ordina da lì, e la freccia dice in che verso.
   Prima l'ordinamento stava in una tendina con solo alcune voci. */
.wc-head .wc-h{display:inline-flex;align-items:center;gap:4px;padding:2px 0;background:none;border:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;transition:.12s}
.wc-head .wc-h:hover{color:var(--shu)}
.wc-head .wc-h.on{color:var(--shu);font-weight:800}
.wc-head .wc-h i{font-style:normal;font-size:9px;line-height:1}
.wc-sortb{padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;
  color:var(--ink-soft);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:.12s}
.wc-sortb:hover{border-color:var(--shu);color:var(--shu)}
.wc-sortb.on{background:var(--shu);border-color:var(--shu);color:#fff}

/* ---- 辞書 Dizionario (Jisho + quello che è già tuo) ---- */
/* Finestra vera, non un pannello modale: sta sopra a tutto, si sposta dove
   vuoi e l'app sotto resta viva — puoi scrivere in una scheda col dizionario
   aperto di fianco. Il contenitore non prende i clic (pointer-events:none),
   li prende solo la finestra. */
.diz-back{position:fixed;inset:0;z-index:var(--z-diz);background:none;padding:0;
  display:block;pointer-events:none}
/* Superficie unica e bianca, angoli larghi, UN'ombra sola morbida: la finestra
   deve sembrare appoggiata sulla carta, non incorniciata. Via la striscia
   sfumata in cima e i tre strati d'ombra — erano il vestito di dieci anni fa. */
.diz-panel{position:absolute;pointer-events:auto;width:min(560px,94vw);
  left:var(--diz-x,50%);top:var(--diz-y,8vh);background:#fff;
  border:1px solid rgba(20,20,18,.07);border-radius:26px;display:flex;flex-direction:column;
  box-shadow:0 32px 64px -24px rgba(20,20,18,.34),0 2px 10px -4px rgba(20,20,18,.08);
  max-height:min(78vh,680px);overflow:hidden;animation:diz-su .2s cubic-bezier(.2,.9,.3,1)}
/* la testata è la maniglia: si trascina da lì (ma non dalla casella o dalla ×) */
.diz-top{cursor:grab;user-select:none;touch-action:none}
.diz-panel.trascino{box-shadow:0 46px 80px -28px rgba(20,20,18,.42),0 2px 10px -4px rgba(20,20,18,.1)}
.diz-panel.trascino .diz-top{cursor:grabbing}
#diz-q,.diz-x{cursor:auto}
.diz-x{cursor:pointer}
@keyframes diz-su{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
.diz-top{display:flex;align-items:center;gap:10px;padding:13px 13px 9px}
.diz-jp-t{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:13px;
  background:color-mix(in srgb,var(--shu) 10%,#fff);color:var(--shu);
  font-family:var(--serif);font-size:14px;font-weight:700}
/* la casella è un campo vero, non una riga di testo: si vede dove si scrive,
   e prendendo il fuoco si accende invece di limitarsi a lampeggiare */
#diz-q{flex:1;min-width:0;border:none;background:var(--paper);border-radius:14px;
  padding:11px 15px;font-family:var(--sans);font-size:16.5px;font-weight:500;color:var(--ink);
  transition:box-shadow .14s,background .14s}
#diz-q:focus{outline:none;background:#fff;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ai) 24%,transparent)}
#diz-q::placeholder{color:#B7B3AA;font-weight:400;font-size:15px}
.diz-x{flex:none;width:34px;height:34px;border-radius:12px;border:none;background:transparent;
  color:#A9A59C;font-size:19px;cursor:pointer;transition:.13s}
.diz-x:hover{background:color-mix(in srgb,var(--shu) 9%,#fff);color:var(--shu)}
/* i comandi: pastiglie piene e senza contorno, come si usa adesso */
.diz-tabs{display:flex;gap:6px;padding:0 13px 11px}
.diz-tab{padding:7px 15px;border-radius:99px;border:none;background:var(--paper);
  color:var(--ink-soft);font-family:var(--sans);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:.13s}
.diz-tab:hover{background:var(--ai-soft);color:var(--ai)}
.diz-tab.on{background:var(--ai);color:#fff}
.diz-res{overflow:auto;padding:2px 8px 12px;overscroll-behavior:contain;
  border-top:1px solid rgba(20,20,18,.055)}
/* i titoletti in tono minore: prima erano maiuscoletti neri spaziati, che
   gridavano più delle parole che stavano annunciando */
.diz-h{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.01em;color:#A5A199;padding:14px 12px 5px}
.diz-h::after{content:"";flex:1;height:1px;background:rgba(20,20,18,.06)}
/* Una voce è una RIGA di dizionario, non un riquadro per conto suo: un filo
   sottile la stacca dalla successiva, e passandoci sopra si solleva dal foglio
   (il filo di sopra e di sotto sparisce, se no si vedrebbe tagliare la carta). */
/* Le voci respirano e si accendono al passaggio: niente più righe di
   separazione fra l'una e l'altra, ci pensa lo spazio. */
.diz-v{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:start;
  padding:13px 12px 14px;border-radius:18px;position:relative;transition:background .13s}
.diz-v+.diz-v::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:rgba(20,20,18,.055);transition:opacity .13s}
.diz-v:hover::before,.diz-v:hover+.diz-v::before{opacity:0}
.diz-v:hover{background:var(--paper)}
/* Le parole che hai già nel quaderno: prima erano un blocco verde acceso con
   la barra di lato — l'unica macchia di colore del pannello, e per giunta un
   verde che nel quaderno vuol dire «livello N3». Adesso è una riga come le
   altre, appoggiata sulla carta, con la parola in indaco e un timbrino
   discreto: si riconosce senza gridare. */
.diz-v.mia{background:var(--paper);border-radius:14px;align-items:center;
  box-shadow:inset 2px 0 0 var(--ai)}
.diz-v.mia .diz-jp b{color:var(--ai)}
.diz-v.mia+.diz-v::before,.diz-v+.diz-v.mia::before{opacity:0}
.diz-jp{font-family:var(--serif);font-size:24px;color:var(--ink);display:flex;align-items:baseline;
  gap:10px;min-width:0;flex-wrap:wrap;line-height:1.2}
/* il lemma in 明朝: è il carattere dei dizionari stampati, e distingue al volo
   la parola cercata da tutto il resto della finestra (che è in gotico) */
.diz-jp b{font-family:var(--mincho);font-weight:600;letter-spacing:.01em}
.diz-r{font-size:13.5px;color:#5B7C9D;font-weight:500}
/* pastiglie morbide, scritte come si parla: prima erano maiuscoletti spaziati
   in grassetto nero, e pesavano più della parola a cui erano attaccati */
.diz-lv,.diz-com{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:0;
  padding:3px 9px;border-radius:9px;line-height:1.4;
  background:var(--jl-n4-bg,#FAE4E2);color:var(--jl-n4,#C96B62)}
.diz-com{background:var(--paper);color:#A5A199}
/* la categoria grammaticale, una volta sola sotto la parola */
.diz-cat{grid-column:1;font-size:11.5px;color:#A5A199;margin:3px 0 5px;line-height:1.3}
.diz-m{grid-column:1;font-size:14px;color:var(--ink-soft);line-height:1.55}
/* i numeri in colonna, così i significati partono tutti dallo stesso punto */
.diz-s{display:flex;gap:10px;align-items:baseline;padding:2px 0}
.diz-s .diz-n{flex:none;width:12px;text-align:right;font-family:var(--sans);
  font-size:11px;font-weight:600;color:#C7C3B8;font-variant-numeric:tabular-nums}
.diz-s i{font-style:normal;font-size:11px;color:#B3AFA6;white-space:nowrap}
/* l'avviso sul significato — «arcaico», «raro», «di solito in kana». Ha un
   colore suo, ambra: non è una categoria grammaticale, è un cartello. */
.diz-mk{font-style:normal;font-size:10.5px;line-height:1.4;white-space:nowrap;
  padding:2px 8px;border-radius:8px;background:#FAF0E1;color:#A5762F}
.diz-mia{grid-column:2;grid-row:1;justify-self:end;align-self:center;font-family:var(--sans);
  font-size:10px;font-weight:700;color:var(--ai);background:var(--ai-soft);
  padding:3px 9px;border-radius:9px}
/* il ＋ è un fantasma finché non lo guardi: si riempie di rosso al passaggio */
.diz-add{width:32px;height:32px;border-radius:12px;border:none;background:var(--paper);
  color:var(--shu);font-size:16px;line-height:1;cursor:pointer;transition:.13s}
.diz-add:hover{background:var(--shu);color:#fff}
/* mentre cerca: una rotellina, non una scritta che sembra un risultato */
.diz-cerco{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:34px 16px;font-size:13px;color:var(--ink-soft)}
.diz-cerco::before{content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--shu);animation:diz-gira .7s linear infinite}
@keyframes diz-gira{to{transform:rotate(360deg)}}
.diz-vuoto{padding:34px 16px;text-align:center;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.diz-vuoto .diz-big{display:block;font-family:var(--serif);font-size:40px;color:var(--grid-strong);margin-bottom:10px}
.diz-avviso{margin:10px 10px 4px;padding:10px 13px;border-radius:14px;
  background:color-mix(in srgb,var(--shu) 7%,#fff);font-size:12.5px;color:var(--shu-deep,#8f2c20)}
.diz-esempi{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:16px}
.diz-es{padding:7px 14px;border-radius:99px;border:none;background:var(--paper);
  font-family:var(--serif);font-size:13.5px;color:var(--ink);cursor:pointer;transition:.13s}
.diz-es:hover{background:color-mix(in srgb,var(--shu) 10%,#fff);color:var(--shu)}
.diz-fondo{padding:11px 16px;border-top:1px solid rgba(20,20,18,.055);background:transparent;
  font-size:11px;color:#A5A199;text-align:center}
.diz-crediti{margin-top:5px;font-size:10px;color:#A9A59C}
.diz-crediti a{color:inherit;text-decoration:underline}
.diz-crediti a:hover{color:var(--ai)}
.diz-fondo kbd{font-family:var(--sans);font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;
  background:#fff;border:1px solid var(--line);color:var(--ink)}
.diz-selbtn{position:fixed;z-index:calc(var(--z-dialog) + 20);width:40px;height:40px;border-radius:50%;
  border:none;background:var(--shu);color:#fff;font-family:var(--serif);font-size:18px;font-weight:700;
  cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.4);animation:diz-pop .16s ease-out}
@keyframes diz-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.diz-selbtn:hover{background:var(--shu-deep,#8f2c20)}
/* il pulsante, in basso al centro */
/* Sopra ai pannelli (appunti, impostazioni…): il dizionario serve soprattutto
   mentre scrivi lì dentro. Resta comunque sotto alla finestra del dizionario. */
.diz-fab{position:fixed;left:50%;transform:translateX(-50%);z-index:2147482000;
  bottom:calc(20px + var(--qk-tastiera,0px));
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:none;border-radius:99px;
  background:var(--shu);color:#fff;font-family:var(--sans);font-size:13.5px;font-weight:700;
  line-height:1;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.3);transition:.14s}
.diz-fab:hover{background:var(--shu-deep,#8f2c20);box-shadow:0 14px 34px rgba(0,0,0,.36)}
.diz-fab:active{transform:translateX(-50%) scale(.97)}
.diz-fab-jp{font-family:var(--serif);font-size:16px;font-weight:700}
/* sul telefono al posto dei due kanji ci va il libro aperto: un'icona si
   riconosce da lontano, 辞書 scritto piccolo no */
.diz-fab-ic{display:none;align-items:center;justify-content:center}
.diz-fab-ic .ic{width:23px;height:23px}
@media (max-width:560px){
  .diz-panel{width:min(560px,96vw)}
  .diz-panel{max-height:84vh;border-radius:18px}
  .diz-top{padding:14px 14px 10px;gap:10px}
  #diz-q{font-size:17px}
  /* le linguette non vanno a capo dentro sé stesse («Senza / rete» su due
     righe): restano su una riga sola e, se non ci stanno, la barra scorre */
  /* flex:none è obbligatorio: appena un elemento in colonna ha un overflow,
     la sua altezza minima automatica diventa zero e si schiaccia */
  .diz-tabs{padding:0 14px 10px;overflow-x:auto;scrollbar-width:none;flex:none}
  .diz-tabs::-webkit-scrollbar{display:none}
  .diz-tab,.diz-pennello{flex:none;white-space:nowrap}
  .diz-lingua{margin-left:4px}
  .diz-jp{font-size:18px}
  /* In fondo stanno in fila tutti e tre, sulla stessa riga e alti uguali:
     «annulla» a sinistra, il dizionario in mezzo, «+ Nuova scheda» a destra.
     Prima il dizionario stava da solo una riga più in su. */
  .diz-fab{padding:0;gap:0;width:48px;height:48px;justify-content:center}
  .diz-fab-t{display:none}
  .diz-fab-jp{display:none}
  .diz-fab-ic{display:inline-flex}
}
@media print{ .diz-fab{display:none} }
/* Sopra al quaderno degli appunti «annulla / ripristina» ci vuole: lì dentro
   si cancellano righe e parole, ed è la prima cosa che si cerca. Sono gli
   stessi due tasti di fuori, con la stessa memoria — sul telefono restavano
   sepolti sotto al pannello. */
body:has(#notes[style*="flex"]) .undo-bar.on{z-index:2147482000}
@media print{ body:has(#notes[style*="flex"]) .undo-bar{display:none!important} }
/* Nei giochi sparisce: lì si gioca, e un pulsante che copre il campo dà solo
   fastidio. Negli esercizi invece resta — serve proprio mentre studi. */
body:has(#multi[style*="flex"]) .diz-fab,
body:has(#duello[style*="flex"]) .diz-fab,
body:has(#karuta[style*="flex"]) .diz-fab,
body:has(#pioggia[style*="flex"]) .diz-fab,
body:has(#shiritori[style*="flex"]) .diz-fab{display:none}
/* i puntini che dicono «questa si sposta» */
.diz-presa{flex:none;color:#C9C5BB;font-size:15px;line-height:1;letter-spacing:-2px;cursor:grab}
.diz-panel.trascino .diz-presa{color:var(--shu)}
/* il ponte: con che parola inglese è stata fatta la ricerca, e la traduzione */
.diz-ponte{margin:10px 10px 0;padding:8px 13px;border-radius:14px;background:var(--ai-soft);
  font-size:12px;color:var(--ai)}
.diz-it{font-size:14px;font-weight:600;color:#111;margin-bottom:3px}
/* I significati numerati sono il contenuto della voce, quindi si leggono:
   prima stavano in chiaro perché sopra c'era un riassunto in neretto che
   ripeteva il primo: tolto quello, la riga 1 è il significato principale e
   deve avere il colore dell'inchiostro. Col pulsantino EN passano all'inglese. */
.diz-sd{display:block;min-width:0;color:var(--ink-soft);font-weight:400}
/* il ＋ sta in alto a destra, all'altezza della parola: è quella che aggiunge.
   Senza dirglielo la griglia lo posava accanto ai significati, a mezz'aria. */
.diz-azioni{grid-column:2;grid-row:1;display:flex;gap:6px;align-items:center}
.diz-gira{width:34px;height:26px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink-soft);font-family:var(--title);font-size:10px;font-weight:900;letter-spacing:.06em;
  cursor:pointer;transition:.13s}
.diz-gira:hover{border-color:var(--ai);color:var(--ai);background:#F0F4F8}
/* ---- 手書き: la lavagnetta del dizionario ---- */
/* i due comandi della riga sotto la ricerca: lingua a sinistra, pennello a
   destra (le linguette delle fonti non ci sono più — la risposta è una sola) */
/* La lingua dei significati: una tendina, perché di lingua se ne legge una per
   volta. Prima era un solo pulsante che diceva la lingua VERSO cui saresti
   andato — «EN» mentre stavi leggendo in italiano — e per capirlo bisognava
   già saperlo. Chiusa dice dove sei, aperta dove puoi andare. */
.diz-lingue{position:relative}
.diz-lingua{
  display:flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;
  letter-spacing:.04em;font-size:11.5px;font-weight:700;
}
.diz-lingua .fl{width:17px;height:12.5px;border-radius:2px}
.diz-lingua.on{background:var(--ai);color:#fff}
.diz-lcar{font-size:9px;opacity:.75}
.diz-lmenu{
  position:absolute;top:calc(100% + 5px);left:0;z-index:40;min-width:172px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.35);
}
.diz-lopt{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;
  border:none;border-radius:8px;background:none;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;color:var(--ink);text-align:left;
}
.diz-lopt:hover{background:var(--ai-soft);color:var(--ai)}
.diz-lopt.on{font-weight:700}
.diz-lnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diz-lsg{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--ink-soft)}
/* tradotta al momento, non scritta nel dizionario */
.diz-lauto{color:#B8B4AA;font-weight:700;cursor:help}
.diz-ltick{width:12px;text-align:center;color:var(--ai)}
.diz-pennello{margin-left:auto;padding:7px 15px;font-family:var(--sans);font-size:12.5px;
  border-radius:99px;border:none;background:var(--paper);color:var(--ink-soft);
  font-weight:600;cursor:pointer;transition:.13s}
.diz-pennello:hover{background:color-mix(in srgb,var(--shu) 9%,#fff);color:var(--shu)}
.diz-pennello.on{background:var(--shu);color:#fff}
/* due colonne vere: la lavagna a sinistra, i segni proposti a destra. Con il
   flex la colonna dei segni scappava sotto alla lavagna e sbordava. */
.diz-disegno{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.7)}
#diz-tela{flex:none;border:1.5px solid var(--grid-strong);border-radius:12px;background:#fff;
  touch-action:none;cursor:crosshair}
.diz-dis-lato{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
/* i candidati stanno nella loro colonna e, se sono tanti, scorrono lì dentro */
.diz-segni{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;
  align-content:flex-start;min-height:40px;max-height:180px;overflow:auto}
.diz-segno{width:100%;height:42px;min-width:0;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-family:var(--serif);font-size:22px;color:var(--ink);cursor:pointer;transition:.12s}
.diz-segno:hover{border-color:var(--shu);background:color-mix(in srgb,var(--shu) 8%,#fff);transform:translateY(-1px)}
.diz-nulla{font-size:12px;color:var(--ink-soft);font-style:italic}
.diz-dis-btn{display:flex;gap:6px}
.diz-dis-btn button{flex:1;padding:7px 8px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink-soft);font-family:var(--sans);font-size:11.5px;font-weight:700;cursor:pointer}
.diz-dis-btn button:hover{border-color:var(--shu);color:var(--shu)}

/* ---- Progressi: le due linguette (i miei · altri utenti) ---- */
.lb-tabs{display:flex;gap:8px;margin:2px 0 16px}
.lb-tabs button{
  flex:0 0 auto;padding:8px 18px;border-radius:99px;border:1.5px solid var(--line);
  background:#fff;font-family:var(--sans);font-size:13.5px;color:var(--ink);cursor:pointer;transition:.12s;
}
.lb-tabs button:hover{border-color:var(--ai)}
.lb-tabs button.on{border-color:var(--shu);background:#FBF1EF;box-shadow:0 0 0 1px var(--shu) inset;font-weight:700}
/* le caselle delle fasce si aprono: dentro ci sono le parole coi livelli */
.pg-box{cursor:pointer;text-align:left;font-family:var(--sans);position:relative;transition:.12s}
.pg-box:hover{border-color:var(--ai)}
.pg-box.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.pg-box .pg-apri{position:absolute;right:10px;top:8px;font-size:11px;color:var(--ink-soft)}
.pg-lista{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;margin-top:8px}
.pg-lista-h{font-family:var(--title);font-weight:900;font-size:13px;color:var(--ink);margin-bottom:9px}
.pg-lista-d{font-family:var(--sans);font-weight:400;font-size:11.5px;color:var(--ink-soft);margin-left:6px}
.pg-lista-w{display:flex;gap:7px;flex-wrap:wrap}
/* il numeretto del livello dentro alla pastiglia della parola */
.pg-liv{
  display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--line);color:var(--ink);font-size:10.5px;font-weight:700;font-style:normal;
}
.pg-w-prime .pg-liv{background:color-mix(in srgb, var(--jl-n5,#C97F35) 22%, #fff);color:var(--jl-n5,#C97F35)}
.pg-w-medie .pg-liv{background:color-mix(in srgb, var(--jl-n3,#58995F) 22%, #fff);color:var(--jl-n3,#58995F)}
.pg-w-sicure .pg-liv{background:color-mix(in srgb, var(--jl-n2,#5580BC) 22%, #fff);color:var(--jl-n2,#5580BC)}
.pg-quando{font-style:normal;font-size:10.5px;color:var(--ink-soft)}
.pg-peggio-n{flex-basis:100%;font-size:11.5px;color:var(--ink-soft)}

/* ---- Progressi: su desktop il pannello respira, e l'elenco sta in righe ---- */
#lb .game-panel{max-width:820px}
.pg-lista-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pg-sort{margin-left:auto;display:inline-flex;gap:5px}
.pg-sort button{
  border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:4px 11px;font-family:var(--sans);font-size:11px;color:var(--ink);cursor:pointer;
}
.pg-sort button.on{border-color:var(--shu);background:#FBF1EF;font-weight:700}
.pg-lista .pg-lista-d{display:block;margin:0 0 10px}
/* le parole in righe ordinate, due colonne quando c'è posto */
.pg-righe{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 10px}
.pg-riga{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.pg-liv2{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 8px;border-radius:99px;background:var(--line);color:var(--ink);
}
.pg-l-prime .pg-liv2{background:color-mix(in srgb, var(--jl-n5,#C97F35) 18%, #fff);color:var(--jl-n5,#C97F35)}
.pg-l-medie .pg-liv2{background:color-mix(in srgb, var(--jl-n3,#58995F) 18%, #fff);color:var(--jl-n3,#58995F)}
.pg-l-sicure .pg-liv2{background:color-mix(in srgb, var(--jl-n2,#5580BC) 18%, #fff);color:var(--jl-n2,#5580BC)}
.pg-rt{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
.pg-rt b{font-family:var(--serif);font-size:15.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.pg-rt span{font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-rq{flex:none;font-style:normal;font-size:10.5px;color:var(--ink-soft)}

/* la parola ancora in prova: pastiglia grigia, niente numero */
.pg-liv2.pg-prova{background:#EFEDE6;color:var(--ink-soft);font-style:italic}

/* ---- il passaggio di livello: l'avviso che scende dall'alto ----
   Sopra a tutto (duelli e esercizi compresi) ma senza fermare niente. */
.lvup{
  position:fixed;left:50%;top:-90px;transform:translateX(-50%);z-index:2147482600;
  display:flex;align-items:center;gap:12px;
  /* larghezza dichiarata: con left:50% il riquadro si restringerebbe da solo
     a mezzo schermo e il testo andrebbe a capo una parola per riga */
  width:max-content;max-width:min(500px,94vw);
  background:var(--ink);color:var(--paper);border-radius:0 0 14px 14px;
  padding:12px 20px;box-shadow:0 14px 34px rgba(0,0,0,.4);
  font-family:var(--sans);font-size:14px;line-height:1.3;
  transition:top .28s cubic-bezier(.2,.9,.3,1);
}
.lvup.su{top:0}
.lvup-t{flex:1;min-width:0}
.lvup b{font-family:var(--serif);font-size:17px;font-weight:700;white-space:nowrap}
.lvup i{font-style:normal;color:#F2C14E;font-weight:700;white-space:nowrap}
.lvup .lvup-q{font-size:11.5px;opacity:.72;white-space:nowrap}
.lvup button{
  flex:none;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  border-radius:9px;padding:6px 12px;font-family:var(--sans);font-size:12.5px;cursor:pointer;
}
.lvup button:hover{background:rgba(255,255,255,.15)}

/* anche la fascia «salvataggio non riuscito» sta sopra a tutto, dizionario
   compreso (qui in coda: la regola di base sta piu' su in questo stesso file) */
.qk-offline{z-index:2147482800}

/* mentre si cerca, i numeri sulle linguette dicono quanti RISULTATI ha
   ciascuna sezione: si vede che di là c'è altro, e ci si va con un tocco */
.vcount.cercando{
  background:color-mix(in srgb,var(--ai) 15%,#fff);color:var(--ai);
}
.vtab.on .vcount.cercando{background:color-mix(in srgb,var(--ai) 22%,#fff);color:var(--ai)}

/* ---- le voci del menu Studio: icona, nome, e il kanji piccolo in coda ----
   Prima c'era solo il kanji, grande e rosso, davanti al nome: era la cosa
   che si vedeva per prima e non diceva niente a chi non lo legge ancora.
   Adesso comanda l'icona (come nel resto dell'app) e il kanji resta come
   piccola firma a destra, per chi lo sa leggere. */
#shareMenu button{display:flex;align-items:center;gap:10px}
#shareMenu .ic{flex:none;width:17px;height:17px;opacity:.8}
#shareMenu .mv-n{flex:1;min-width:0}
#shareMenu .mj{
  order:9;margin-left:auto;width:auto;
  font-size:12px;color:var(--ink-soft);opacity:.5;font-weight:700;
}
#shareMenu button:hover .ic{opacity:1}
#shareMenu button:hover .mj{color:var(--shu);opacity:.9}

/* ---- dizionario: il ＋, la label e la spunta ---- */
.diz-azioni{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* non è più una tendina di sistema ma un pulsantino che apre l'albero:
   stessa misura di prima, così l'elenco del dizionario non si sposta */
.diz-lab{
  display:inline-flex;align-items:center;gap:5px;max-width:140px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:var(--sans);font-size:11px;color:var(--ink-soft);padding:3px 8px;cursor:pointer;
}
.diz-lab-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diz-lab-f{flex:none;font-size:8px;opacity:.7}
.diz-lab.set{font-weight:700}
.diz-lab:hover{border-color:var(--ai)}
/* già nel quaderno: niente ＋, una spunta che lo dice */
.diz-gia{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--verde,#3F7A52);font-family:var(--sans);font-size:11px;font-weight:700;
  background:color-mix(in srgb, var(--verde,#3F7A52) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--verde,#3F7A52) 26%, #fff);
  border-radius:99px;padding:3px 9px;white-space:nowrap;
}
.diz-gia .ic{width:13px;height:13px}
.diz-gia i{font-style:normal}

/* ---- il tastino che manda «Invio» sulla label nuova ----
   L'Invio da tastiera c'era già, ma su telefono non si vede nemmeno: qui è
   un pulsante, dello stesso blu delle label. */
.lbl-invio{
  flex:none;width:28px;height:28px;border-radius:8px;border:none;cursor:pointer;
  background:var(--ai);color:#fff;font-size:15px;line-height:1;display:grid;place-items:center;
  transition:.14s;
}
.lbl-invio:hover{background:color-mix(in srgb,var(--ai) 82%,#000)}
.lblpop-addrow{display:flex;align-items:center;gap:6px}
.lblpop-addrow .cat-in{flex:1;min-width:0}

/* ---- il fogliettino delle label del dizionario ----
   Nasce dentro al dizionario ma vive appeso al <body>: senza un piano suo
   restava a 1400, cioe' sotto al dizionario (2147483000), e sceglierla era
   impossibile perche' non si vedeva. */
#dizlabpop{z-index:var(--z-diz-pop)}