/* Stil comun. Mobil întâi — aplicația trăiește pe telefon. */

:root {
  --rosu: #c0392b;
  --rosu-inchis: #8e2a20;
  --auriu: #d4a24c;
  --cerneala: #1d1a17;
  --hartie: #faf7f2;
  --carte: #ffffff;      /* fundalul cardurilor, butoanelor, câmpurilor */
  --gri: #6f6a64;
  --linie: #e3ddd3;
  --verde: #2e7d52;
  --bula-mea: #fbeed3;    /* bulele mele din firul temei (auriu palid) */
  --bula-lui: #f1ece2;    /* bulele celuilalt din dialogul lecției (bej foarte discret) */
}

* { box-sizing: border-box; }
/* `hidden` bate orice `display` pus de noi (altfel insigna/câmpul ascunse din JS tot s-ar vedea) */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--hartie);
  color: var(--cerneala);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;          /* fără zoom la dublu-tap; ciupitul îl oprește comun.js */
}

.ecran { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 4rem; }

header.bara {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: var(--rosu); color: #fff;
  position: sticky; top: 0; z-index: 10;
}
header.bara h1 { font-size: 1.05rem; margin: 0; font-weight: 600; flex: 1; }
header.bara a, header.bara button {
  color: #fff; background: none; border: 0; font: inherit;
  text-decoration: none; cursor: pointer; opacity: .9;
}

/* Titlul pe mijloc (lecția, elevul, „Elevii mei"); titlurile-link nu se subliniază */
header.bara-lectie h1, header.bara.mijloc h1 { text-align: center; }
header.bara h1 a { opacity: 1; text-decoration: none; }
header.bara .fantoma { visibility: hidden; }   /* ține locul butonului din dreapta */
header.bara-lectie .sageata {
  font-size: 1.8rem; line-height: 1; width: 2.2rem; text-align: center; opacity: 1;
}

h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
p.ajutor { color: var(--gri); font-size: .9rem; margin: .25rem 0 1rem; }
p.ajutor.mijloc { text-align: center; }

/* --- formulare --- */
label { display: block; font-size: .85rem; color: var(--gri); margin: .75rem 0 .2rem; }
input, textarea, select {
  width: 100%; padding: .7rem .8rem; font: inherit;
  border: 1px solid var(--linie); border-radius: .6rem;
  background: var(--carte); color: var(--cerneala);
}
input:focus, textarea:focus { outline: 2px solid var(--auriu); outline-offset: 1px; }

.principal {
  display: block; width: 100%; margin-top: 1rem; padding: .85rem;
  font: inherit; font-weight: 600; color: #fff; text-align: center; text-decoration: none;
  background: var(--rosu); border: 0; border-radius: .6rem; cursor: pointer;
}
.principal:disabled { opacity: .5; cursor: default; }
.principal[hidden] { display: none; }   /* `display: block` bate [hidden] */
.principal.invatat { background: var(--verde); }   /* lecție validată */
.principal.invatat:disabled { opacity: 1; }        /* stare, nu buton stins */
button.mic {
  font: inherit; font-size: .85rem; padding: .35rem .7rem;
  border: 1px solid var(--linie); border-radius: .5rem;
  background: var(--carte); color: var(--cerneala); cursor: pointer;
}
/* Același buton mic, dar cu o iconiță în loc de text (alt cod, arhivare) */
button.mic.icoana {
  flex: none; width: 2.3rem; height: 2.3rem; padding: 0; color: var(--gri);
  display: inline-flex; align-items: center; justify-content: center;
}
button.mic.icoana:active { background: var(--hartie); color: var(--rosu); }

.eroare {
  margin-top: 1rem; padding: .7rem .8rem; border-radius: .6rem;
  background: #fdecea; color: var(--rosu-inchis); font-size: .9rem;
}
.atentie {
  margin-top: 1rem; padding: .7rem .8rem; border-radius: .6rem;
  background: #fff6e5; color: #7a5a1e; font-size: .85rem;
}

/* --- codul de acces --- */
input.cod {
  text-align: center; letter-spacing: .25em;
  font-size: 1.6rem; font-weight: 600; text-transform: uppercase;
  padding: .9rem;
}
code.cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; font-weight: 600; letter-spacing: .06em;
  background: var(--carte); color: var(--cerneala); border: 1px dashed var(--auriu);
  padding: .15rem .45rem; border-radius: .4rem; white-space: nowrap;
}

/* Figurina de pe pagina de intrare */
img.figurina {
  display: block; width: 13.3rem; height: auto; margin: .5rem auto 0;
}
footer.subsol a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

/* --- liste --- */
ul.lista { list-style: none; padding: 0; margin: 0; }
ul.lista li {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .2rem; border-bottom: 1px solid var(--linie);
}
ul.lista li .crestere { flex: 1; min-width: 0; }
.apasabil { cursor: pointer; }
ul.lista li.apasabil:active { background: var(--carte); }
.nume { font-weight: 600; }
.sub { font-size: .82rem; color: var(--gri); }

/* --- arhiva elevilor: sub „Adaug elev", la o palmă de el --- */
#arhiva { margin-top: 1.2rem; }
#arhiva h2 { margin: 0 0 .25rem; font-size: 1rem; color: var(--gri); }
/* Rând stins, fără chenar de cod și fără săgeată: pe elevul arhivat nu se intră */
ul.lista li.arhivat .nume { font-weight: 500; color: var(--gri); }

/* Rândul de lecție din listă — același la elev și la profesoară (din 17.09 văd aceleași
   ecrane): un link, cu semnul mare, titlul și starea. */
a.lectie {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .6rem; padding: .7rem .8rem;
  background: var(--carte); border: 1px solid var(--linie); border-radius: .9rem;
  color: inherit; text-decoration: none; font-weight: 600;
}
a.lectie .sageata { flex: none; color: var(--gri); font-size: 1.2rem; line-height: 1; }
a.lectie .han { font-size: 1.5rem; flex: none; }
a.lectie .crestere { flex: 1; min-width: 0; }
a.lectie .sub { display: block; font-weight: 400; font-size: .8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bulina roșie = mesaj de la profesoară; bifa verde = lecție validată (aici doar de citit) */
a.lectie .punct { width: .6rem; height: .6rem; border-radius: 50%; flex: none;
  background: var(--rosu); }
a.lectie .bifa.validare { width: 1.6rem; height: 1.6rem; font-size: .9rem; cursor: default; }
/* Singura culoare de fundal rămasă: discuție începută = auriu palid. Rândul „doar vizitat" (gri,
   semnul palid) a fost SCOS pe 17.09 — încurca și elevul, și profesoara. Lecția pe care s-a
   intrat arată acum exact ca una neatinsă. */
a.lectie.desfasurare { background: var(--bula-mea); }

/* --- cardul lecției --- */
.card-semn {
  position: relative;
  background: var(--carte); border: 1px solid var(--linie); border-radius: 1rem;
  /* jos rămâne loc pentru subsolul cardului: „↻ Reia animația" în stânga, scrierile în dreapta */
  padding: 1rem 1rem 1.9rem; display: flex; flex-direction: column; align-items: center;
}
/* Bifa de validare, în colțul cardului (la elev: doar de citit) */
.card-semn > .bifa { position: absolute; right: .7rem; top: .7rem; cursor: default; }
/* „↻ Reia animația": indiciu mic în colțul stâng-jos, nu un buton care să tragă ochiul */
.card-semn > .reia {
  position: absolute; left: .7rem; bottom: .6rem; padding: 0;
  font: inherit; font-size: .72rem; color: var(--gri);
  background: none; border: 0; cursor: pointer;
}
.card-semn > .reia span { font-size: .85rem; }
.card-semn > .reia.apasat { color: var(--rosu); }   /* cât se desenează semnul */
/* Câte scrieri duse până la ultima trăsătură — colțul drept-jos, la fel de discret */
.card-semn > .scrieri { position: absolute; right: .7rem; bottom: .6rem;
  font-size: .72rem; color: var(--gri); }
/* Zona semnului: locul ei e rezervat din CSS, deci ținut încă de la prima pictare — semnul,
   pinyinul și definiția vin abia după ce răspunde serverul, iar fără rezervă cardul creștea sub
   ochii elevului și săreau toate butoanele. Rezerva e cât un semn singur (220 px, ca `MARE` din
   semn.js); un cuvânt de două-trei caractere are semnele mai mici, așezate pe mijloc în aceeași
   înălțime. Așa zona arată la fel la orice lecție ȘI la trecerea lecție ↔ exerciții.
   Fără `flex-wrap`: semnele stau pe un rând, latura lor e calculată să încapă (semn.js). */
#semne {
  display: flex; gap: .75rem; justify-content: center; align-items: center;
  /* pe toată lățimea cardului: goală, cutia ar avea lățime zero și semn.js n-ar ști din ce loc
     să taie latura semnelor */
  width: 100%;
  min-height: min(220px, calc(100vw - 4rem));
  cursor: pointer;
}
.pinyin { font-size: 1.6rem; font-weight: 600; margin: 1rem 0 .1rem; text-align: center;
  min-height: 2.4rem; }
.definitie { text-align: center; font-size: 1.1rem; min-height: 3.2rem; }
.definitie .en { display: block; color: var(--gri); font-size: .9rem; margin-top: .2rem; }
.actiuni { display: flex; gap: .6rem; margin-top: 1.2rem; }
.actiuni button, .actiuni a, .actiuni label {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  white-space: nowrap;                 /* eticheta stă pe un singur rând */
  margin: 0; line-height: inherit;     /* eticheta (label) are altfel marginile de formular → altă înălțime */
  padding: .8rem .6rem; font: inherit; font-weight: 600;
  border: 1px solid var(--linie); border-radius: .6rem; cursor: pointer;
  background: var(--carte); color: var(--cerneala);
}

/* Butoanele de sub semn: doar iconițe, pătrate și mari, ca să sară în ochi */
.actiuni.icoane { justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.actiuni.icoane button {
  flex: none; width: 4.5rem; height: 4.5rem; padding: 0;
  font-size: 2.2rem; line-height: 1; border-radius: .9rem;
  border: 2px solid var(--rosu); color: var(--rosu);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.actiuni.icoane button:active { background: var(--rosu); color: #fff; }
.actiuni.icoane button svg { display: block; margin: auto; }
/* Iconița pronunției: 汉 cu undele abia ghicite cât e liniște, cu undele pline cât se aude
   (la atingere și cât ține pronunția, adică pe „apasat"). Un singur desen, undele doar se
   aprind. Șterse, nu absente (cerut 17.09): butonul să spună „aici se aude ceva". */
.unde-voce { opacity: .22; transition: opacity .12s ease; }
button:active .unde-voce, button.apasat .unde-voce { opacity: 1; }
/* Sunetul pornit de la sine, refuzat de telefon (cere o atingere, vezi `legPronuntia`): butonul
   îl cheamă pe elev — undele aprinse și câteva bătăi moi — până la prima apăsare pe el. */
.actiuni.icoane button.cheama { animation: cheama-voce 1.4s ease-in-out 4; }
.actiuni.icoane button.cheama .unde-voce { opacity: 1; }
@keyframes cheama-voce { 50% { transform: scale(1.08); } }
.actiuni.icoane button.invatat { border-color: var(--verde); color: var(--verde); }   /* lecție completată */
.actiuni.icoane button.invatat:active { background: var(--verde); color: #fff; }
/* „apasat" = butonul rămâne apăsat cât ține treaba lui (animația, pronunția). Arată ca la
   atingere, nu ca un buton stins — de-aia îi luăm înapoi opacitatea de la `:disabled`. */
.actiuni.icoane button.apasat { background: var(--rosu); color: #fff; }
.actiuni.icoane button.invatat.apasat { background: var(--verde); }
.actiuni button.apasat:disabled { opacity: 1; }
/* Rând cu butoane de lățimi egale */
.actiuni.egale > * { flex: 1 1 0; }
.actiuni.egale input[hidden] { display: none; }

/* Acțiunea principală a rândului („Tema" pe lecție); verde când lecția e validată */
.actiuni .accent { background: var(--rosu); color: #fff; border-color: var(--rosu); }
.actiuni .accent.invatat { background: var(--verde); border-color: var(--verde); }
/* Săgeată mică lângă un cuvânt: „Exerciții ›" (înainte) și „‹ Titlul categoriei" (înapoi, pe
   capul categoriei). „‹ Memorează" a folosit-o până pe 17.09, când butonul a fost scos. */
.sageata-mica { font-size: .9em; opacity: .75; line-height: 1; }
.actiuni button.verde { background: var(--verde); color: #fff; border-color: var(--verde); }   /* „Validată ✓" */
.actiuni button:disabled, .actiuni label.stins { opacity: .5; pointer-events: none; }

/* --- tema: poze cu foaia, înregistrări, răspunsurile profesorului --- */
section.tema { margin-top: 1.5rem; }
section.tema h2 { margin: 0 0 .25rem; }
section.tema .actiuni { margin-top: .6rem; }

/* Butonul de înregistrare cât timp merge: roșu, pulsează, arată secundele. Doar pe butoanele
   cu text — în bara de scris roșul e pe toată capsula și pe ✈, nu pe pictograme (vezi .scriere). */
button.merge:not(.pictograma) { background: var(--rosu) !important; color: #fff !important; border-color: var(--rosu) !important;
  animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .65; } }

/* Pozele: grilă de miniaturi; ✓ verde = foaie verificată de profesor */
.poze { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
.poze a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer;
  border-radius: .6rem; border: 1px solid var(--linie); background: var(--carte);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.poze img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Poza pe tot ecranul, în aplicație (nu în Safari). Singurul loc cu zoom: ciupitul mărește poza
   (transform în comun.js), nu pagina. Atingere pe poza nemărită sau ✕ = închide. */
.lumina { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92); overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lumina img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; will-change: transform; }
.lumina .inchide { position: absolute; top: calc(env(safe-area-inset-top) + .6rem); right: .8rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.22); color: #fff; font: inherit; font-size: 1.1rem; line-height: 1; }
.bifa {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer;
  background: var(--carte); color: var(--gri); border: 1.5px solid var(--linie);
}
.bifa.vazuta { background: var(--verde); color: #fff; border-color: var(--verde); }
.poze .bifa { position: absolute; right: .3rem; bottom: .3rem; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.poze .scot { position: absolute; left: .3rem; top: .3rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: .9rem; line-height: 1; cursor: pointer; }

/* Firul temei, ca o discuție: bule late cât conținutul, în ordinea timpului.
   „mine" = ale celui care se uită (dreapta), „lor" = ale celuilalt (stânga). */
.fir { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.fir:empty { margin-top: 0; }
.bula { max-width: 86%; padding: .5rem .7rem; border-radius: 1rem;
  background: var(--carte); border: 1px solid var(--linie); }
.bula.lor { align-self: flex-start; border-bottom-left-radius: .25rem; }
.bula.mine { align-self: flex-end; border-bottom-right-radius: .25rem;
  background: var(--bula-mea); border-color: transparent; }
/* Ora: mică, ștearsă, în colțul din dreapta-jos al bulei (fără nume și fără dată — data e pastila) */
.bula .cand { font-size: .68rem; color: var(--gri); }

/* Data, ca pastilă despărțitoare pe mijloc — deasupra pieselor din ziua aceea */
.fir .zi { align-self: center; margin: .35rem 0 .15rem; }
.fir .zi span { display: inline-block; padding: .15rem .7rem; border-radius: 1rem;
  background: var(--hartie); border: 1px solid var(--linie);
  font-size: .7rem; color: var(--gri); }

/* „Încarcă mai mult (+30)": buton mic, pe mijloc, la coada firului (piesele vechi) */
.fir .mai-mult { align-self: center; margin-top: .4rem; padding: .3rem .8rem;
  font: inherit; font-size: .78rem; color: var(--gri); cursor: pointer;
  background: var(--carte); border: 1px solid var(--linie); border-radius: 1rem; }

/* Bula cu poze: miniaturi mici, una lângă alta, cu ora dedesubt */
.fir .poze { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.fir .poze a { width: 5rem; flex: none; }
.fir .poze .cand { flex-basis: 100%; text-align: right; }

/* Bula cu înregistrare: butonul ▶ + ora (+ bifa la profesor, ✓/✕ la elev) */
.inregistrare { display: flex; align-items: center; gap: .5rem; }
.reda { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .7rem .2rem .2rem;
  border-radius: 1.3rem; border: 1px solid var(--linie); background: var(--carte); color: var(--cerneala);
  font: inherit; font-size: .95rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.reda .ic { width: 2rem; height: 2rem; border-radius: 50%; flex: none; padding-left: .15rem;
  background: var(--rosu); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; }
.reda.canta .ic { background: var(--verde); padding-left: 0; animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .5; } }
/* Varianta mică, fără etichetă: stă în colțul unui rând de citit sau al unui exemplu. */
.reda.mic { padding: 0; border: 0; background: none; }
.reda.mic .ic { width: 1.7rem; height: 1.7rem; font-size: .7rem; }

/* Bula cu text sau audio: conținutul, iar sub el subsolul (ora, bifa, ✕) lipit la dreapta-jos */
.raspuns .subsol { font-size: .68rem; color: var(--gri); margin-top: .1rem;
  display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.raspuns p { margin: 0; white-space: pre-wrap; }
.raspuns .reda { margin-top: .2rem; }


/* Despărțitorul dintre lecție și discuție: linie ondulată cu „Discuții" mic, pe mijloc */
.separator {
  display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 .4rem;
  font-size: .78rem; color: var(--gri);
}
.separator::before, .separator::after {
  content: ''; flex: 1; height: 6px; opacity: .85;
  background: repeat-x center / 16px 6px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 3q4-3 8 0t8 0' fill='none' stroke='%23d4a24c' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* Zona de scris: bara 📷 🎤 câmp ✈ */
.zona-scriere { margin-top: .8rem; }

/* Imaginea dintr-o bulă (o trimite profesorul ca răspuns) */
.bula .imagine { display: block; width: 9rem; max-width: 100%; margin-top: .25rem; }
.bula .imagine img { width: 100%; height: auto; display: block; border-radius: .5rem; }

/* Bara de scris, ca la chat: 📷 · 🎤 · câmpul · ✈, toate într-o singură capsulă */
.scriere {
  display: flex; align-items: flex-end; gap: .2rem; padding: .25rem;
  border: 1px solid var(--linie); border-radius: 1.5rem; background: var(--carte);
}
.scriere:focus-within { border-color: var(--auriu); }
.scriere textarea {
  flex: 1; min-width: 0; min-height: 0; max-height: 8rem; resize: none;
  padding: .55rem .3rem; border: 0; border-radius: 0; background: none;
}
.scriere textarea:focus { outline: none; }
.scriere [hidden] { display: none; }
.scriere .pictograma {
  flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--gri); cursor: pointer;
}
.scriere .trimit { background: var(--rosu); color: #fff; }
.scriere .pictograma:disabled { opacity: .45; pointer-events: none; }

/* --- cât merge înregistrarea ---------------------------------------------------------
   Fără buton de ■ stop: ✈ rămâne activ și el încheie și trimite, microfonul devine ✕.
   Câmpul lasă locul secundelor, iar toată capsula „respiră" în ritmul microfonului:
   bara.js pune pe formular `--nivel` (0…1 = cât de tare se aude acum). */
.scriere .cronometru {
  flex: 1; display: flex; align-items: center; gap: .4rem; padding: .55rem .3rem;
  color: var(--rosu); font-weight: 600; font-variant-numeric: tabular-nums;
}
.scriere .cronometru::before {                 /* bulina roșie de „se înregistrează" */
  content: ''; width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: var(--rosu); animation: puls 1s ease-in-out infinite;
}
.scriere.inregistreaza {
  position: relative;
  border-color: var(--rosu);
  /* haloul crește cu vocea — asta e „nivelul" pe toată bara */
  box-shadow: 0 0 0 calc(2px + var(--nivel, 0) * 6px) rgba(192, 57, 43, .15);
  transition: box-shadow .1s linear;
}
.scriere.inregistreaza::after {                /* unda care trece prin bară, de la stânga */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(192, 57, 43, .16), transparent)
    no-repeat 0 0 / 45% 100%;
  opacity: calc(.3 + var(--nivel, 0) * .7);
  transition: opacity .1s linear;
  animation: unda 1.7s linear infinite;
}
@keyframes unda { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* Butonul de validare al profesoarei, pe ecranul lecției copilului (17.09) */
.valideaza {
  display: block; width: 100%; margin-top: .8rem; padding: .6rem .8rem;
  font: inherit; font-size: .95rem; cursor: pointer;
  background: var(--carte); border: 1px solid var(--linie); border-radius: .9rem;
  color: var(--cerneala);
}
.valideaza.pusa { background: var(--verde); border-color: var(--verde); color: #fff; }
.valideaza:disabled { opacity: .5; pointer-events: none; }

/* Insigna roșie cu număr (teme de văzut), pe rândul elevului din lista profesoarei */
.insigna { min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: .7rem; flex: none;
  background: var(--rosu); color: #fff; font-size: .75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }

/* Închiderea formularului de adăugare (✕ sus-dreapta, mare — cerință: „dublu") */
form .inchide { display: block; margin: 0 0 -.6rem auto; padding: .2rem .4rem; font: inherit; font-size: 2.2rem;
  line-height: 1; background: none; border: 0; color: var(--gri); cursor: pointer; }

footer.subsol {
  text-align: center; font-size: .75rem; color: var(--gri);
  padding: 1rem 1rem 1.5rem; margin-top: -3rem;   /* intră în rezerva de jos a .ecran */
}

/* --- explicația în plus, textul de citit și lecția de bază (2.2.0) --- */

/* Capul de grupă și cartonașele categoriilor au ieșit la 17.09, odată cu gruparea: lista de
   lecții e una singură, de sus până jos. Regulile lor (h2.categorie, .categorii,
   .card-categorie) s-au șters de aici — nu le mai desenează nimeni. */

/* Pastila de pe rândul lecției: „explicat" = are o explicație în plus. („capitol" a ieșit în
   2.5.1, cu textul lung de capăt de categorie.) */
.etichete { display: flex; gap: .3rem; margin-top: .25rem; }
.eticheta {
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  padding: .05rem .4rem; border-radius: .6rem;
  background: var(--bula-mea); color: var(--gri);
  border: 1px solid var(--linie);
}

/* Comutatorul de nivel (02.11): două pastile, „HSK 1" · „HSK 2", deasupra listei — doar la cine
   are două niveluri (elevul; profesoara pe pagina lui; /ordine). Cea aleasă e plină, roșie. */
.niveluri { display: flex; justify-content: center; gap: .5rem; margin: 0 0 .8rem; }
.niveluri button {
  font: inherit; font-size: .85rem; font-weight: 600; padding: .3rem 1.1rem; cursor: pointer;
  border-radius: 1rem; border: 1px solid var(--linie); background: var(--carte); color: var(--gri);
}
.niveluri button[aria-pressed="true"] { background: var(--rosu); border-color: var(--rosu); color: #fff; }
/* Pastila nivelurilor pe rândul elevului din „Elevii mei" („1 · 2"), lângă nume. */
.nume .eticheta { margin-left: .5rem; vertical-align: .1em; }
/* Bifele „HSK 1" / „HSK 2" ale profesoarei (la elev nou și pe pagina elevului): pe un rând. */
.bife-niveluri label { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .8rem 0 0;
  font-size: .9rem; color: var(--cerneala); }
.bife-niveluri input { width: auto; padding: 0; margin: 0; }

/* Explicația semnului (pe lecție, sub butoane, vine DESFĂȘURATĂ din 17.09) și sfaturile de la
   tonuri (acolo a rămas strânsă). Amândouă se pot strânge/desface din titlu. */
details.nota {
  margin: .8rem 0 0; padding: .6rem .8rem;
  background: var(--carte); border: 1px solid var(--linie); border-radius: .9rem;
}
details.nota > summary {
  cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--rosu);
  list-style: none;
}
details.nota > summary::-webkit-details-marker { display: none; }
details.nota > summary::before { content: '？ '; font-weight: 400; }
details.nota[open] > summary::before { content: '！ '; }
details.nota p { margin: .5rem 0 .3rem; font-size: .92rem; }
details.nota ul { margin: .5rem 0 .2rem; padding-left: 1.1rem; font-size: .9rem; }
details.nota li { margin: .25rem 0; }

/* Un exemplu: semnele mari, pinyinul dedesubt, traducerea la coadă */
.exemplu { margin: .45rem 0; padding-left: .6rem; border-left: 3px solid var(--auriu); }
.exemplu .han { display: block; font-size: 1.25rem; }
.exemplu .pin { display: block; font-size: .85rem; color: var(--gri); }
.exemplu .ro { display: block; font-size: .85rem; }
/* ▶-ul exemplului stă chiar lângă pinyin — pe rândul care arată cum se citesc semnele
   (cerut 17.09), ca la textul de citit; înainte stătea în colțul din dreapta-sus. */
details.nota .exemplu .citire { display: flex; align-items: center; gap: .5rem; }
/* Traducerea exemplelor stă MEREU la vedere (cerut de profesoară, 19.09): nota e explicație,
   nu exercițiu de citire. Se vede din `.exemplu .ro` de mai sus; butonul a dispărut din notă. */

/* Textul de citit al lecției (cel mic) și cel de la capătul blocului */
section.text-lectie {
  margin: 1.2rem 0 0; padding: .9rem 1rem 1rem;
  background: var(--carte); border: 1px solid var(--linie); border-radius: 1rem;
}
section.text-lectie .cap { display: flex; align-items: center; gap: .6rem; }
section.text-lectie h2 { flex: 1; margin: 0; font-size: 1.05rem; }
section.text-lectie .rand { margin: .7rem 0; }
section.text-lectie .rand .han {
  display: block; font-size: 1.45rem; line-height: 1.7; letter-spacing: .04em;
}
/* Fiecare rând se poate asculta separat, iar ▶-ul lui stă chiar lângă pinyin — pe rândul care
   arată cum se citesc semnele (cerut 17.09). */
section.text-lectie .rand .citire { display: flex; align-items: center; gap: .5rem; }
section.text-lectie .rand .pin { font-size: .88rem; color: var(--gri); }
/* Traducerea stă ascunsă: întâi se citește, abia pe urmă se verifică înțelesul */
section.text-lectie .rand .ro { display: none; font-size: .88rem; }
section.text-lectie.cu-traducere .rand .ro { display: block; }
/* Comutatorul traducerii, la textul de citit (la explicație traducerea se vede direct) */
.traducerea {
  margin-top: .5rem; padding: .35rem .7rem; font: inherit; font-size: .85rem;
  background: none; border: 1px solid var(--linie); border-radius: .6rem;
  color: var(--gri); cursor: pointer;
}
/* Pe ecranul exercițiilor textul stă strâns, deasupra discuției: fără semne uriașe */
section.text-lectie.compact { margin-top: .8rem; padding: .7rem .8rem; }
section.text-lectie.compact .rand { margin: .45rem 0; }
section.text-lectie.compact .rand .han { font-size: 1.2rem; line-height: 1.6; }

/* Dialogul lecției (2.13.0): textul mic e o scenă între băiețelul 小明 și prietenul bucății de
   listă. Băiețelul vorbește din stânga (`.eu`, bula aurie, ca a lui din firul temei), prietenul
   din dreapta (`.tu`, bej discret) — nu e convenția firului de discuție („ale mele" în dreapta),
   fiindcă aici nicio replică nu e a celui care se uită; e o scenă privită din afară.
   Bulele sunt late cât conținutul, cel mult 85% din rând, ca pe telefonul îngust să rămână loc de
   avatar. Rândurile fără vorbitor (textele vechi) nu trec pe-aici deloc. */
section.text-lectie .rand.replica { display: flex; align-items: flex-end; gap: .45rem; margin: .55rem 0; }
section.text-lectie .rand.replica.tu { flex-direction: row-reverse; }
section.text-lectie .rand.replica .chip {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
}
section.text-lectie .rand.replica .bula-replica {
  min-width: 0; max-width: 85%; padding: .4rem .7rem .5rem;
  background: var(--bula-lui); border: 1px solid var(--linie);
  border-radius: 1rem; border-bottom-right-radius: .3rem;
}
section.text-lectie .rand.replica.eu .bula-replica {
  background: var(--bula-mea); border-color: transparent;
  border-bottom-right-radius: 1rem; border-bottom-left-radius: .3rem;
}
/* Numele vorbitorului, mic și șters, deasupra replicii: semnele întâi, pinyinul după — ca peste tot */
section.text-lectie .rand.replica .vorbitor {
  display: block; font-size: .7rem; line-height: 1.4; color: var(--gri);
}
section.text-lectie .rand.replica .vorbitor .nm { font-weight: 700; }
/* În bulă semnele stau puțin mai strâns decât într-un text curgător */
section.text-lectie .rand.replica .han { line-height: 1.5; }
section.text-lectie.compact .rand.replica { gap: .35rem; margin: .4rem 0; }
section.text-lectie.compact .rand.replica .chip { width: 30px; height: 30px; }
section.text-lectie.compact .rand.replica .bula-replica { padding: .3rem .55rem .4rem; }

/* Lecția de bază: tonurile */
.card-baza {
  position: relative;
  background: var(--carte); border: 1px solid var(--linie); border-radius: 1rem;
  padding: 1rem;
}
.card-baza .intro { margin: 0 0 .5rem; font-size: .95rem; }
.card-baza .ton {
  display: flex; align-items: center; gap: .7rem;
  margin-top: .6rem; padding: .6rem .7rem;
  border: 1px solid var(--linie); border-radius: .9rem;
}
.card-baza .ton .semn {
  flex: none; width: 2.6rem; text-align: center;
  font-size: 2rem; line-height: 1; color: var(--rosu);
}
.card-baza .ton .crestere { flex: 1; min-width: 0; }
.card-baza .ton .nume { display: block; font-weight: 600; font-size: .95rem; }
.card-baza .ton .cum { display: block; font-size: .85rem; color: var(--gri); }
.card-baza .ton .exemplu { margin: .4rem 0 0; }
.card-baza .ton .exemplu .han { display: inline; font-size: 1.2rem; }
.card-baza .ton .exemplu .pin { display: inline; margin-left: .3rem; }
.card-baza .ton .exemplu .ro { display: inline; margin-left: .3rem; color: var(--gri); }
.card-baza .ton .reda { flex: none; }
.card-baza > .bifa { position: absolute; right: .7rem; top: .7rem; cursor: default; }

/* Lecțiile speciale Introducere și Pronunția (2.16.0): paragrafe simple de citit, unul cu ▶, și
   o încheiere scoasă în evidență, pe roșu — ca să se vadă că lecția s-a terminat. */
.card-baza .paragraf { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .7rem; }
.card-baza .paragraf:last-child { margin-bottom: 0; }
.card-baza .paragraf .reda.mic { flex: none; }
.card-baza .incheiere { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.card-baza .incheiere p { margin: 0 0 .3rem; font-weight: 600; color: var(--rosu); }
.card-baza .incheiere p:last-child { margin-bottom: 0; }

/* Introducerea refăcută (2.17): antet cu steagul Chinei și numele limbii, apoi secțiuni scurte
   cu titlu + puncte, două desene (SVG, se adaptează singure la tema întunecată) și mascotele
   la încheiere. Tot doar de citit. */
.card-intro .antet-intro {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: .8rem; margin-bottom: .4rem; border-bottom: 1px solid var(--linie);
}
.card-intro .steag {
  flex: none; width: 5.4rem; height: auto; border-radius: .3rem;
  box-shadow: 0 0 0 1px var(--linie), 0 1px 3px rgba(0, 0, 0, .15);
}
.card-intro .nume-limba { display: flex; flex-direction: column; min-width: 0; }
.card-intro .nume-limba .han { font-size: 1.6rem; line-height: 1.2; font-weight: 600; color: var(--rosu); }
.card-intro .nume-limba .pin { font-size: .95rem; }
.card-intro .nume-limba .ro { font-size: .85rem; color: var(--gri); }
.card-intro .sectiune-intro { margin-top: 1rem; }
.card-intro .sectiune-intro h2 {
  font-size: 1rem; margin: 0 0 .35rem; color: var(--rosu-inchis);
  padding-left: .55rem; border-left: 3px solid var(--auriu);
}
.card-intro .sectiune-intro p { margin: 0 0 .35rem; }
.card-intro .sectiune-intro ul { margin: 0 0 .35rem; padding-left: 1.3rem; }
.card-intro .sectiune-intro li { margin: .15rem 0; }
.card-intro .sectiune-intro li::marker { color: var(--auriu); }
.card-intro .exemplu-intro { padding: .45rem .6rem; border-radius: .7rem; background: var(--bula-mea); }
.card-intro .exemplu-intro .reda.mic { vertical-align: middle; margin-left: .2rem; }
.card-intro .desen-intro { display: block; width: 100%; max-width: 22rem; height: auto; margin: .6rem auto 0; }
.card-intro .mascote-intro { display: flex; justify-content: center; gap: .6rem; margin-top: .9rem; }
.card-intro .mascote-intro img { width: 3.6rem; height: 3.6rem; }

/* Tabelul literelor de la Pronunția: se sprijină pe stilul tabelului comun (.tabel-mascote), doar
   cu rândurile mai strânse pe literă (rowspan la E, care are două exemple). */
.tabel-litere td { vertical-align: middle; }
.tabel-litere .han { font-weight: 600; margin-right: .3rem; }

/* --- posterul mascotelor nivelurilor (2.12.0, pagina /mascote) --- */

/* Singura pagină mai lată din aplicație: e un poster de privit, nu un text de citit pe o coloană. */
.ecran.poster { max-width: 56rem; }

/* Un tabel, nu cartonașe: rânduri despărțite de linii subțiri, fără fundaluri. Îl folosesc și
   mascotele nivelurilor (cu coloana „Nivel"), și prietenii de pe drum (fără ea). Avatarele sunt
   discuri pline, cu fundalul lor: n-au nevoie de chenar, se văd și pe hârtie, și pe întuneric. */
.tabel-mascote { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .9rem; }
.tabel-mascote th, .tabel-mascote td {
  text-align: left; vertical-align: top;
  padding: .7rem .5rem; border-bottom: 1px solid var(--linie);
}
.tabel-mascote th {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gri);
}
.tabel-mascote tr:last-child td { border-bottom: 0; }
.tabel-mascote td:last-child, .tabel-mascote th:last-child { padding-right: 0; }

.tabel-mascote .cel-chip { width: 72px; padding-left: 0; text-align: center; }
.tabel-mascote .cel-chip img { display: block; width: 72px; height: 72px; }
/* Pe telefon coloana „Nivel" se ascunde (rămân trei coloane, încap sub 400 px fără scroll
   orizontal) și „HSK n" se mută ca etichetă mică sub imagine. Pe ecran lat, invers. */
.tabel-mascote .cel-nivel { display: none; }
.tabel-mascote .cel-chip .nivel {
  display: block; margin-top: .3rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .06em; color: var(--gri);
}
@media (min-width: 34rem) {
  .tabel-mascote { font-size: .95rem; }
  .tabel-mascote .cel-nivel { display: table-cell; width: 4.5rem; padding-left: 0; white-space: nowrap; }
  .tabel-mascote td.cel-nivel { font-weight: 600; }
  .tabel-mascote .cel-chip { padding-left: .5rem; }
  .tabel-mascote .cel-chip .nivel { display: none; }
}

.tabel-mascote .nume { display: block; font-size: 1.05rem; font-weight: 700; color: var(--rosu); }
.tabel-mascote .nume .han { margin-left: .3rem; }
.tabel-mascote .cine { display: block; font-size: .8rem; color: var(--gri); }
.tabel-mascote .han { font-weight: 600; }

/* Rândul unei lecții speciale (Introducere, Tonurile, Pronunția) din listă: ★ în
   locul semnului, roșu — ca să se vadă dintr-o privire că nu e o lecție ca celelalte. */
a.lectie.speciala .han { color: var(--rosu); }

@media (prefers-color-scheme: dark) {
  :root {
    --hartie: #17150f; --carte: #262119; --cerneala: #f2ece1;
    --linie: #3d372f; --gri: #b3a99b; --bula-mea: #3b2f17; --bula-lui: #322c23;
  }
  a.lectie, ul.lista li { color: var(--cerneala); }
  /* Roșul de pe fundal închis e prea întunecat la text mic: îl luminăm */
  details.nota > summary, .card-baza .ton .semn, .tabel-mascote .nume,
  a.lectie.speciala .han, .card-intro .nume-limba .han, .card-intro .sectiune-intro h2,
  .card-baza .incheiere p { color: #e8705f; }
}