/* Quaderno dei kanji — 教壇 la gestione insegnante
   Un foglio suo, come il codice: qui dentro non c'è niente che riguardi
   il quaderno dello studio. Impaginazione ariosa, carte con un filo di
   ombra, il rosso solo dove serve indicare qualcosa. */

/* ---- la pagina ---- */
.teach-pagina{
  position:fixed;inset:0;z-index:2147482350;
  background:var(--paper);overflow:auto;overscroll-behavior:contain;
}
.teach-testa{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:11px clamp(14px,4vw,34px);
}
.teach-marchio{display:flex;align-items:center;gap:11px}
.teach-marchio .jp{font-family:var(--serif);font-weight:800;font-size:21px;color:var(--ink);letter-spacing:.03em}
.teach-ruolo{
  font-family:var(--serif);font-weight:700;font-size:12.5px;color:#fff;
  background:var(--shu);border-radius:7px;padding:3px 10px;letter-spacing:.02em;
}
.teach-ruolo i{font-family:var(--sans);font-style:normal;font-weight:700;font-size:11.5px}
.teach-corpo{max-width:1020px;margin:0 auto;padding:26px clamp(14px,4vw,34px) 80px}
/* nella gestione insegnante il quaderno non esiste: niente strati sotto */
body.modo-prof .wrap,
body.modo-prof .fab,
body.modo-prof .undo-bar,
body.modo-prof .diz-fab{display:none!important}
/* i pannelli (impostazioni…) si aprono SOPRA a questa pagina */
body.modo-prof .game-overlay{z-index:2147482390}

/* ---- titolo e linguette ---- */
/* ---- la testata: sigillo, titolo e l'interruttore delle sezioni ----
   Tutto su una riga: il 教壇 in un sigillo quadrato rosato, il titolo col suo
   sottotitolo accanto, e le tre sezioni in un binario a pastiglie — lo stesso
   delle linguette Kanji·Parole. Prima era un titolo grande con le tab
   sottolineate sotto: due piani per dire quello che qui sta in uno. */
.cat-testa2{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.cat-sig{
  flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--shu) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--shu) 25%,#fff);
  color:var(--shu);font-family:var(--serif);font-size:19px;font-weight:700;
}
.cat-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-tt b{font-family:var(--title);font-weight:900;font-size:19px;color:var(--ink)}
.cat-tt span{font-size:12px;color:var(--ink-soft);line-height:1.4}
.cat-seg{
  margin-left:auto;display:flex;gap:3px;padding:4px;background:#EDEBE5;
  border-radius:99px;flex:none;max-width:100%;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cat-seg::-webkit-scrollbar{display:none}
.cat-s{
  flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;
  border:none;border-radius:99px;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);
  transition:.14s;white-space:nowrap;
}
.cat-s:hover{color:var(--ink)}
.cat-s.on{background:#fff;color:var(--shu);font-weight:700;box-shadow:0 1px 3px rgba(20,20,18,.14)}
/* stretta: il binario scende sotto al titolo, a tutta riga */
@media (max-width:720px){
  .cat-seg{margin-left:0;width:100%}
  .cat-s{flex:1;justify-content:center;padding:8px 10px}
}
.cat-bollo{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:99px;background:var(--line);color:var(--ink);
  font-size:11px;font-weight:700;vertical-align:1px;
}
.cat-s.on .cat-bollo{background:var(--shu);color:#fff}
.cat-bollo.urgente{background:var(--shu);color:#fff}

/* ---- le carte ---- */
.cat-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:17px 19px 18px;margin-bottom:14px;
  box-shadow:0 2px 10px -6px rgba(0,0,0,.18);
}
.cat-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cat-card-t{
  font-family:var(--title);font-weight:900;font-size:17px;color:var(--ink);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.cat-card-riga{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.cat-dato{font-size:12.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px}
.cat-dato b{color:var(--ink);font-size:14px}
.cat-dato.attesa b,.cat-dato.attesa{color:var(--shu)}
.cat-card-azioni{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---- il codice della classe ---- */
.cat-codice{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:5px 8px 5px 11px;
}
.cat-codice span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cat-codice b{font-family:var(--serif);font-size:16px;letter-spacing:.12em;color:var(--ink)}
.cat-copia{
  border:none;background:none;color:var(--ink-soft);cursor:pointer;
  padding:3px 5px;border-radius:6px;line-height:1;
}
.cat-copia:hover{color:var(--shu);background:#fff}

/* ---- i bottoni, una famiglia sola ---- */
.cat-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;padding:8px 14px;
  font-family:var(--sans);font-size:13px;font-weight:700;transition:.12s;
}
.cat-btn:hover{border-color:var(--ai);color:var(--ai)}
.cat-btn.pieno{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-btn.pieno:hover{background:#000;border-color:#000;color:#fff}
.cat-btn.vuoto{background:transparent}
.cat-btn.pericolo{color:var(--ink-soft);padding:8px 11px}
.cat-btn.pericolo:hover{border-color:var(--shu);color:var(--shu)}
.cat-btn.mini{padding:5px 11px;font-size:12px;border-radius:8px}
.cat-btn.grande{padding:12px 20px;font-size:14px}
.cat-btn .ic{width:16px;height:16px}

/* ---- il selettore della classe: una tendina che dice dove sei ---- */
.cat-cls{position:relative;margin-bottom:16px}
.cat-cls-b{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;
  border:1.5px solid var(--line);background:#fff;border-radius:13px;
  padding:9px 14px;cursor:pointer;transition:.13s;font-family:var(--sans);
}
.cat-cls-b:hover,.cat-cls-b.on{border-color:var(--shu)}
.cat-cls-jp{font-family:var(--serif);color:var(--shu);font-size:15px;flex:none}
.cat-cls-n{font-size:14px;font-weight:800;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-cls-i{flex:none;font-size:11.5px;color:var(--ink-soft)}
.cat-cls-c{flex:none;font-size:10px;color:var(--ink-soft)}
.cat-cls-m{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:260px;max-width:min(92vw,360px);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.35);
}
.cat-cls-o{
  display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:2px 10px;align-items:center;
  width:100%;padding:9px 10px;border:none;border-radius:9px;background:none;
  cursor:pointer;text-align:left;font-family:var(--sans);
}
.cat-cls-o:hover{background:var(--paper)}
/* la ricerca in cima alla tendina: compare solo quando le voci sono tante */
.cat-cls-cerca{
  width:100%;box-sizing:border-box;margin:2px 2px 6px;padding:7px 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--paper);
  font-family:var(--sans);font-size:12.5px;color:var(--ink);
}
.cat-cls-cerca:focus{outline:none;border-color:var(--shu);background:#fff}
/* la carta del registro dei singoli: uguale alle altre — a distinguerla
   bastano il titolo e il cartellino «il tuo registro» */
.cat-nota-sing{font-size:12px;color:var(--ink-soft);margin-top:10px;line-height:1.5}
/* il livello del singolo alunno, dentro la sua riga dell'elenco */
.cat-riga-lv{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.cat-liv-l{font-size:11px;color:var(--ink-soft);margin-right:2px}
.cat-riga-lv .cat-livb{padding:2px 7px;font-size:11px}
/* il destinatario non ancora scelto: il bottone lo dice */
.cat-cls-b.vuoto{border-style:dashed;color:var(--ink-soft)}
.cat-btn[disabled]{opacity:.45;cursor:not-allowed}
.cat-btn[disabled]:hover{border-color:var(--line);color:var(--ink)}
.cat-btn.pieno[disabled]:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* il nome della classe accanto all'alunno, quando si guardano tutti */
.cat-al-cl{
  font-style:normal;font-size:10.5px;font-weight:700;margin-left:8px;
  padding:2px 9px;border-radius:99px;background:var(--paper);color:var(--ink-soft);
  vertical-align:2px;
}
.cat-al-cl.sing{background:color-mix(in srgb,var(--shu) 10%,#fff);color:var(--shu)}
/* «Sposta in…» dentro una riga: la tendina si apre sotto il bottoncino,
   allineata a destra per non sbordare dal pannello */
.cat-mv{position:relative;display:inline-block;margin:0}
.cat-mv .cat-cls-m{left:auto;right:0}
.cat-cls-o.on .cat-cls-on{font-weight:800}
.cat-cls-on{grid-column:1;font-size:13.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-cls-oi{grid-column:1;font-size:11px;color:var(--ink-soft)}
.cat-cls-oi b{color:var(--shu)}
.cat-cls-ok{grid-column:3;grid-row:1/3;color:var(--shu);font-weight:700}

/* ---- l'offerta dell'alunno singolo, sotto la creazione della classe ---- */
.cat-single{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding:10px 13px;border:1px dashed var(--line);border-radius:12px;
  font-size:12.5px;color:var(--ink-soft);
}
.cat-single-h{flex-basis:100%;font-size:11.5px;color:#A5A199}

/* ---- pastiglie di scelta (destinatario di un esercizio) ---- */
.cat-pill{
  border:1.5px solid var(--line);background:#fff;border-radius:99px;
  padding:7px 15px;cursor:pointer;transition:.12s;
  font-family:var(--sans);font-size:13px;color:var(--ink);
}
.cat-pill:hover{border-color:var(--ai)}
.cat-pill.on{background:#FBF1EF;border-color:var(--shu);color:var(--shu);font-weight:700}
.cat-pill i{font-style:normal;opacity:.6;margin-left:4px;font-size:11.5px}

/* ---- il livello JLPT della classe ---- */
.cat-liv{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-soft)}
.cat-livb{
  border:1.5px solid var(--line);background:#fff;border-radius:7px;
  padding:3px 8px;cursor:pointer;font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);
}
.cat-livb:hover{border-color:var(--ai);color:var(--ai)}
.cat-livb.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}

/* ---- righe (elenchi, consegne) ---- */
.cat-roster,.cat-consegne{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.cat-riga{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 12px;border-radius:10px;background:var(--paper);margin-bottom:6px;
}
.cat-riga.attesa{background:#FBF1EF}
.cat-riga.fatta{background:#F1F6F1}
.cat-riga-n{flex:1;min-width:130px;font-weight:700;font-size:13.5px;color:var(--ink)}
.cat-riga-d{font-size:12px;color:var(--ink-soft)}
.cat-riga-a{display:flex;gap:6px;margin-left:auto}
.cat-manca{font-style:normal;color:var(--shu)}
.cat-tag{
  font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  background:var(--line);color:var(--ink-soft);border-radius:99px;padding:2px 8px;
}
.cat-tag.solo{background:#FBF1EF;color:var(--shu);display:inline-flex;align-items:center;gap:5px}
.cat-tag.solo .ic{width:12px;height:12px}
.cat-nota{font-size:13px;color:var(--ink-soft);padding:10px 2px;line-height:1.6}
.cat-sez{margin-top:22px}
.cat-sez-t{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px;
}

/* ---- il vuoto, detto bene ---- */
.cat-vuoto{
  text-align:center;padding:46px 20px;border:2px dashed var(--line);border-radius:18px;
  background:#fff;margin-bottom:16px;
}
.cat-vuoto-jp{font-family:var(--serif);font-size:38px;color:var(--line);line-height:1;margin-bottom:12px}
.cat-vuoto-t{font-size:14px;color:var(--ink-soft);line-height:1.65;max-width:420px;margin:0 auto 14px}

/* ---- creare una classe ---- */
.cat-nuova{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.cat-nuova input{
  flex:1;min-width:220px;padding:12px 15px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font-family:var(--sans);font-size:14.5px;color:var(--ink);
}
.cat-nuova input:focus{outline:none;border-color:var(--shu);box-shadow:0 0 0 3px rgba(192,57,43,.12)}

/* ---- gli alunni e la strada verso il livello ---- */
.cat-mira{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:11px 16px;margin-bottom:16px;font-size:13px;color:var(--ink-soft);
}
.cat-mira b{color:var(--ink)}
.cat-mira-c{font-size:11.5px}
.cat-alunno{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 17px 15px;margin-bottom:11px;
}
.cat-al-top{display:flex;align-items:center;gap:11px}
.cat-al-nome{font-family:var(--title);font-weight:900;font-size:15.5px;color:var(--ink);flex:1;min-width:0}
.cat-al-perc{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.cat-al-perc b{font-family:var(--title);font-size:16px;color:var(--shu)}
/* la barra è un dato, non un titolo: sottile, senza cornice */
.cat-al-barra{
  height:5px;border-radius:99px;background:#EDEBE5;
  overflow:hidden;margin:10px 0 10px;
}
.cat-al-barra i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--jl-n5,#C97F35),var(--shu));
  transition:width .4s cubic-bezier(.2,.9,.3,1);
}
.cat-al-sotto{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cat-al-conta{font-size:12.5px;color:var(--ink-soft);margin-left:auto;white-space:nowrap}
.cat-al-conta b{color:var(--ink)}
.cat-al-lv{display:flex;gap:5px;flex-wrap:wrap}
.cat-lvq{
  font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 8px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);
}
.cat-lvq.pieno{background:rgba(88,153,95,.16);border-color:transparent;color:#3F7A46}
.cat-lvq.zero{opacity:.5}
.cat-al-azioni{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:11px;padding-top:10px;border-top:1px solid #F0EEE8}
/* «ultimo studio»: il dato che dice chi si è fermato */
.cat-al-ult{margin-left:auto;font-size:11.5px;color:var(--ink-soft)}
.cat-ult{font-size:11.5px;font-weight:700;color:var(--ink-soft)}
.cat-ult.fermo{color:#C97F35}
.cat-ult.mai{font-style:italic;font-weight:400;opacity:.8}

/* ---- il codice, in grande: è la cosa che si copia più spesso ---- */
.cat-cod2{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:12px;
  background:var(--paper);border-radius:12px;padding:10px 13px;
}
.cat-cod2-l{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.cat-cod2-v{font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:.13em;color:var(--ink)}
.cat-cod2-c{margin-left:auto}
/* i numeri della classe: pastiglie, non parole in fila */
.cat-nums{display:flex;gap:7px;flex-wrap:wrap}
.cat-num{
  font-size:12px;color:var(--ink-soft);background:var(--paper);
  border-radius:99px;padding:5px 11px;
}
.cat-num b{color:var(--ink);font-weight:800}
.cat-num.attesa{background:color-mix(in srgb,var(--shu) 10%,#fff);color:var(--shu);font-weight:700}
.cat-num.attesa b{color:var(--shu)}
.cat-card-az2{display:flex;gap:7px;flex-wrap:wrap}

/* ---- chi aspetta: un riquadro suo, in cima all'elenco ---- */
.cat-attesa-box{
  border:1px solid color-mix(in srgb,var(--shu) 30%,#fff);
  background:color-mix(in srgb,var(--shu) 4%,#fff);
  border-radius:12px;padding:11px 13px;margin-bottom:12px;
}
.cat-attesa-t{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--shu);margin-bottom:9px;
}
.cat-att-r{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:7px}
.cat-att-r:last-child{margin-bottom:0}
.cat-att-c{flex:1;min-width:130px;display:flex;flex-direction:column;gap:1px}
.cat-att-c b{font-size:14px}
.cat-att-c span{font-size:11.5px;color:var(--ink-soft)}

/* ---- la riga di un alunno nell'elenco della classe ---- */
.cat-al-r{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:#fff;margin-bottom:8px;
}
.cat-av{flex:none;line-height:0}
.cat-av .acc-img{border-width:1px}
.cat-al-c{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px}
.cat-al-n2{font-size:14px;font-weight:800;color:var(--ink)}
.cat-al-s2{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cat-al-d2{font-size:11.5px;color:var(--ink-soft)}
.cat-al-a2{display:flex;gap:6px;align-items:center}
/* il livello: una pastiglia sola, la tendina si apre toccandola */
.cat-lvp{display:inline-block}
.cat-lv-b{
  border:1px solid var(--line);background:#fff;border-radius:99px;
  padding:3px 10px;cursor:pointer;font-family:var(--sans);font-size:11px;
  font-weight:700;color:var(--ink-soft);transition:.12s;
}
.cat-lv-b:hover{border-color:var(--ink);color:var(--ink)}
.cat-lv-b.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cat-lvp .cat-cls-m,.cat-more .cat-cls-m{min-width:190px}
.cat-more{display:inline-block}
.cat-more .cat-cls-m{left:auto;right:0}
.cat-more-t{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#A5A199;padding:6px 9px 4px;
}
.cat-more-x{border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px}
.cat-more-x:hover{background:color-mix(in srgb,var(--shu) 7%,#fff)}
.cat-more-x .cat-cls-on{color:var(--shu)}
/* il vuoto: l'unica cosa da fare è mandare il codice */
.cat-vuoto-cod{
  border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center;
}
.cat-vuoto-t{font-size:12.5px;color:var(--ink-soft);margin-bottom:9px}
.cat-vuoto-c{
  font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:.14em;
  color:var(--ink);margin-bottom:10px;
}

/* ---- i compiti: barra delle consegne ---- */
.cat-hw-stato{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.cat-hw-stato b{font-family:var(--title);font-size:16px;color:var(--ink)}
.cat-hw-stato.ok b{color:#3F7A46}
.cat-hw-stato.tardi b{color:var(--shu)}
.cat-hw-barra{height:6px;border-radius:99px;background:var(--paper);border:1px solid var(--line);
  overflow:hidden;margin-top:11px}
.cat-hw-barra i{display:block;height:100%;background:var(--ink);border-radius:99px;transition:width .35s}
.cat-hw.aperta{border-color:var(--ai)}
.cat-hw-testo{font-size:13.5px;color:var(--ink);line-height:1.6;white-space:pre-wrap;margin-top:11px}
.cat-hw-parole{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cat-hw-parole span{
  border:1px solid var(--line);border-radius:99px;background:var(--paper);
  padding:4px 11px;font-size:12.5px;
}

/* ---- il modulo di assegnazione ---- */
.cat-modulo{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:19px 21px 21px;margin-bottom:20px;
  box-shadow:0 2px 10px -6px rgba(0,0,0,.18);
}
.cat-mod-t{
  display:flex;align-items:center;gap:9px;margin-bottom:15px;
  font-family:var(--title);font-weight:900;font-size:16px;color:var(--ink);
}
.cat-mod-t .ic{width:18px;height:18px;color:var(--shu)}
.cat-mod-a{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.cat-mod-lab{
  display:block;margin-top:13px;margin-bottom:5px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}
.cat-mod-a .cat-mod-lab{margin:0 4px 0 0}
.cat-mod-lab i{font-style:normal;text-transform:none;letter-spacing:.01em;opacity:.8}
.cat-modulo input:not([type=date]),.cat-modulo textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;
  background:#FBFAF7;font-family:var(--sans);font-size:14.5px;color:var(--ink);
  resize:vertical;transition:border-color .12s, box-shadow .12s;
}
.cat-modulo input:focus,.cat-modulo textarea:focus{
  outline:none;border-color:var(--shu);background:#fff;box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
.cat-mod-fine{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.cat-mod-scad{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}
.cat-mod-scad input{
  padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-family:var(--sans);font-size:14px;color:var(--ink);
}
.cat-mod-fine .cat-btn{flex:1;min-width:230px;justify-content:center}
.cat-mod-nota{font-size:12px;color:var(--ink-soft);line-height:1.6;margin-top:12px}

/* ---- le foto della consegna, viste dall'insegnante ---- */
.cat-foto-ov{
  position:fixed;inset:0;z-index:2147482700;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(30,24,22,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.cat-foto-p{
  width:min(760px,96vw);max-height:88vh;overflow:auto;
  background:var(--paper);border-radius:18px;padding:18px 20px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.cat-foto-h{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-family:var(--title);font-weight:900;font-size:15px;color:var(--ink);
}
.cat-foto-h .ic{color:var(--shu)}
.cat-foto-x{margin-left:auto;border:none;background:none;font-size:22px;line-height:1;
  color:var(--ink-soft);cursor:pointer;padding:0 4px}
.cat-foto-x:hover{color:var(--ink)}
.cat-foto-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.cat-foto-i{
  display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#fff;text-decoration:none;
}
.cat-foto-i img{display:block;width:100%;height:150px;object-fit:cover}
.cat-foto-i span{display:block;padding:6px 10px;font-size:11px;color:var(--ink-soft)}

@media (max-width:640px){
  .cat-card,.cat-modulo,.cat-alunno{padding:14px 15px 16px}
  .cat-card-h{gap:8px}
  .cat-mod-fine .cat-btn{min-width:100%}
  .cat-riga-a{margin-left:0;width:100%}
}

/* ---- la galleria: ogni foglio si apre e si corregge ---- */
.cat-foto-i{position:relative}
.cat-foto-i.corretta{border-color:#3F7A46;box-shadow:0 0 0 1px #3F7A46 inset}
.cat-foto-p2{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 9px;font-size:11px;color:var(--ink-soft);
}
.cat-foto-i.corretta .cat-foto-p2 span{color:#3F7A46;font-weight:700}
.cat-corr{font-style:normal;color:#3F7A46;font-weight:700}

/* ================= 添削 la correzione del foglio ================= */
.corr-ov{
  position:fixed;inset:0;z-index:2147482750;display:none;
  align-items:center;justify-content:center;padding:14px;
  background:rgba(24,20,18,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.corr-p{
  width:min(1000px,98vw);max-height:94vh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.corr-top{
  display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line);background:#fff;
}
.corr-tit{
  display:flex;align-items:center;gap:8px;flex:1;
  font-family:var(--title);font-weight:900;font-size:15px;color:var(--ink);
}
.corr-tit .ic{color:var(--shu)}
.corr-x{border:none;background:none;font-size:23px;line-height:1;color:var(--ink-soft);
  cursor:pointer;padding:0 5px}
.corr-x:hover{color:var(--ink)}
/* la barra degli strumenti */
.corr-barra{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);
}
.corr-gruppo{padding:3px;border-radius:11px;background:var(--paper)}
.corr-spg{
  display:inline-flex;align-items:center;gap:9px;padding:5px 11px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
/* il commento scritto per lo studente */
.corr-nota{padding:12px 16px 0;background:#fff}
.corr-nota-l{
  display:flex;align-items:center;gap:7px;margin-bottom:6px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.corr-nota-l .ic{width:15px;height:15px;color:var(--shu)}
.corr-nota textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:11px;
  background:#FBFAF7;font-family:var(--sans);font-size:14px;color:var(--ink);resize:vertical;
}
.corr-nota textarea:focus{outline:none;border-color:var(--shu);background:#fff;
  box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.corr-gruppo{display:inline-flex;align-items:center;gap:5px}
.corr-gruppo.corr-fine{margin-left:auto;gap:7px}
.corr-s{
  display:grid;place-items:center;width:36px;height:34px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;border-radius:9px;color:var(--ink-soft);
  transition:.12s;
}
.corr-s:hover{border-color:var(--ai);color:var(--ai)}
.corr-s.on{background:var(--ink);border-color:var(--ink);color:#fff}
.corr-s .ic{width:17px;height:17px}
.corr-c{
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);
  transition:.12s;
}
.corr-c:hover{transform:scale(1.12)}
.corr-c.on{box-shadow:0 0 0 2.5px var(--ink)}
.corr-sp{width:110px;accent-color:var(--shu)}
/* il foglio */
.corr-foglio{
  flex:1;overflow:auto;padding:16px;display:flex;align-items:flex-start;justify-content:center;
  background:repeating-conic-gradient(#EDE9E2 0% 25%, #F5F2EC 0% 50%) 50%/18px 18px;
}
#corr-cv{
  max-width:100%;height:auto;background:#fff;border-radius:8px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);cursor:crosshair;touch-action:none;
}
.corr-piede{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;
  padding:12px 16px;background:#fff;border-top:1px solid var(--line);
}
.corr-gia{
  margin-right:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:12px;color:#3F7A46;font-weight:700;
}
@media (max-width:640px){
  .corr-barra{gap:9px;padding:9px 12px}
  .corr-sp{width:80px}
  .corr-gruppo.corr-fine{margin-left:0;width:100%}
  .corr-piede .cat-btn{width:100%;justify-content:center}
}

/* la nota dell'insegnante dentro alla galleria */
.cat-foto-nota{
  grid-column:1/-1;background:#FBF1EF;border:1px solid #E9CFC9;border-radius:12px;
  padding:11px 14px;font-size:13px;color:var(--ink);line-height:1.6;
}
.cat-foto-nota b{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--shu);margin-bottom:4px}

/* ================================================================
   Il pannello CLASSE dello studente parla la stessa lingua della
   cattedra: era rimasto indietro e sembrava di un'altra app.
   ================================================================ */
#classe .game-panel{max-width:720px}
#classe .cl-tabs{
  display:flex;gap:4px;border-bottom:1.5px solid var(--line);margin:18px 0 20px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
}
#classe .cl-tabs::-webkit-scrollbar{display:none}
#classe .cl-tab{
  flex:none;border:none;background:none;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink-soft);
  padding:11px 16px;margin-bottom:-1.5px;border-bottom:2.5px solid transparent;
  transition:.14s;white-space:nowrap;border-radius:0;
}
#classe .cl-tab:hover{color:var(--ink)}
#classe .cl-tab.on{color:var(--shu);border-bottom-color:var(--shu);background:none}
#classe .cl-bollo{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:99px;background:var(--line);color:var(--ink);
  font-size:11px;font-weight:700;vertical-align:1px;margin-left:5px;
}
#classe .cl-tab.on .cl-bollo{background:var(--shu);color:#fff}
/* le carte dei compiti, come quelle della cattedra */
#classe .cl-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 18px 17px;margin-bottom:13px;
  box-shadow:0 2px 10px -6px rgba(0,0,0,.18);
}
#classe .cl-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
#classe .cl-name{
  font-family:var(--title);font-weight:900;font-size:16.5px;color:var(--ink);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
#classe .cl-meta{margin-top:6px;font-size:12.5px;color:var(--ink-soft)}
#classe .cl-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
#classe .hw-card.hw-fatto{opacity:1;background:#FCFDFC;border-color:#D8E6D8}
#classe .cl-sec-t{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:22px 0 9px;
}
/* la scadenza, leggibile a colpo d'occhio */
#classe .hw-av-due{
  font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);white-space:nowrap;
  background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:4px 11px;
}
#classe .hw-av-due b{color:var(--ink)}
#classe .hw-testo{font-size:13.5px;color:var(--ink);line-height:1.6;white-space:pre-wrap;margin-top:11px}
#classe .hw-parole{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
#classe .hw-parole span{
  border:1px solid var(--line);border-radius:99px;background:var(--paper);
  padding:4px 11px;font-size:12.5px;
}
/* i bottoni dello studente, stessa famiglia della cattedra */
#classe .cl-acts .btn,#classe .cl-acts .cl-ok{
  border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;
  padding:8px 15px;font-family:var(--sans);font-size:13px;font-weight:700;transition:.12s;
}
#classe .cl-acts .cl-ok{background:var(--ink);border-color:var(--ink);color:#fff}
#classe .cl-acts .cl-ok:hover{background:#000}
#classe .cl-acts .btn.ghost:hover{border-color:var(--ai);color:var(--ai)}
#classe .cl-tag.ok{
  background:#EFF5EF;border:1px solid #BFD8BF;color:#3F7A46;
  border-radius:99px;padding:5px 12px;font-size:11.5px;font-weight:700;
}

/* ---- la lente: la foto grande sul posto, un tocco e si chiude ---- */
.qk-zoom{
  position:fixed;inset:0;z-index:2147482780;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(18,15,13,.88);cursor:zoom-out;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.qk-zoom img{
  max-width:96vw;max-height:94vh;border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);background:#fff;
}
.qk-zoom-x{
  position:absolute;top:14px;right:20px;color:rgba(255,255,255,.8);
  font-size:30px;line-height:1;cursor:pointer;
}
.qk-zoom-x:hover{color:#fff}
/* le miniature dicono che si possono ingrandire */
.cat-foto-i img{cursor:zoom-in}