[hidden] { display: none !important; }

:root {
    --hartie: #F5F3F7;
    --alb: #FFFFFF;
    --cerneala: #261C2E;
    --cerneala-2: #62586B;
    --prun: #5B2A5E;
    --prun-inchis: #43193F;
    --prun-pal: #EEE4EF;
    --linie: #DDD5E1;
    --verde: #2E7A57;
    --verde-pal: #E3F1EA;
    --rosu: #B23A48;
    --rosu-pal: #F8E4E7;
    --ambra: #8F560B;
    --ambra-pal: #F7ECDA;
    --titlu: 'Fraunces', Georgia, 'Times New Roman', serif;
    --text: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --raza: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--hartie);
    color: var(--cerneala);
    font: 16px/1.5 var(--text);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
body.fara-meniu { padding-bottom: 0; }

a { color: var(--prun); }
a:hover { color: var(--prun-inchis); }

:focus-visible { outline: 3px solid var(--prun); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--titlu); font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; }

/* ---------- bara de sus ---------- */
.bara {
    background: var(--prun);
    color: #fff;
    padding-top: env(safe-area-inset-top, 0px);
}
.bara__interior {
    max-width: 880px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 1rem;
}
.bara__nume { color: #fff; text-decoration: none; font-family: var(--titlu); font-size: 1.25rem; }
.bara__nume:hover { color: #fff; }
.meniu { display: none; gap: .25rem; }
.meniu a {
    color: #fff; text-decoration: none; padding: .4rem .8rem; border-radius: 999px; font-weight: 500;
}
.meniu a[aria-current="page"] { background: rgba(255,255,255,.18); }
.meniu a:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- meniul de jos (telefon) ---------- */
.meniu-jos {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; background: var(--alb); border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.meniu-jos a {
    flex: 1; text-align: center; padding: .95rem .25rem; text-decoration: none;
    color: var(--cerneala-2); font-weight: 600; font-size: .95rem;
}
.meniu-jos a[aria-current="page"] { color: var(--prun); box-shadow: inset 0 3px 0 var(--prun); }

@media (min-width: 760px) {
    .meniu { display: flex; }
    .meniu-jos { display: none; }
    body { padding-bottom: 2rem; }
}

/* ---------- conținut ---------- */
.continut { max-width: 880px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

.cap-pagina {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: .75rem; margin-bottom: 1rem;
}
.cap-pagina h1 { margin: 0; }
.subtitlu { color: var(--cerneala-2); margin: .15rem 0 0; }

.rezumat-luna {
    font-size: 1.05rem; color: var(--cerneala-2);
    border-left: 3px solid var(--prun); padding: .2rem 0 .2rem .8rem; margin: 0 0 1.5rem;
}
.rezumat-luna strong { color: var(--cerneala); }

/* ---------- mesaje ---------- */
.mesaj { padding: .8rem 1rem; border-radius: var(--raza); margin-bottom: 1rem; font-weight: 500; }
.mesaj--ok { background: var(--verde-pal); color: var(--verde); }
.mesaj--eroare { background: var(--rosu-pal); color: var(--rosu); }
.mesaj--info { background: var(--prun-pal); color: var(--prun-inchis); }

/* ---------- butoane ---------- */
.btn, .btn-sec {
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 1rem var(--text); padding: .7rem 1.2rem; border-radius: 999px;
    border: 2px solid var(--prun); cursor: pointer; text-decoration: none; min-height: 46px;
}
.btn { background: var(--prun); color: #fff; }
.btn:hover { background: var(--prun-inchis); border-color: var(--prun-inchis); color: #fff; }
.btn-sec { background: transparent; color: var(--prun); }
.btn-sec:hover { background: var(--prun-pal); }
.btn-pericol { border-color: var(--rosu); color: var(--rosu); }
.btn-pericol:hover { background: var(--rosu-pal); color: var(--rosu); }

.btn-mic {
    font: 600 .85rem var(--text); padding: .45rem .75rem; border-radius: 999px;
    border: 1.5px solid var(--linie); background: var(--alb); color: var(--cerneala); cursor: pointer;
    min-height: 36px;
}
.btn-mic:hover { border-color: var(--prun); color: var(--prun); }
.btn-mic--ok { border-color: var(--verde); color: var(--verde); }
.btn-mic--ok:hover { background: var(--verde-pal); color: var(--verde); border-color: var(--verde); }

.btn-text {
    background: none; border: 0; padding: .3rem .4rem; color: var(--cerneala-2);
    font: 500 .85rem var(--text); text-decoration: underline; cursor: pointer;
}

.butoane { display: flex; flex-wrap: wrap; gap: .5rem; }
.butoane-mici { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }

/* ---------- lista de lecții: ora mare, ca într-un program de concert ---------- */
.lectii { list-style: none; margin: 0; padding: 0; background: var(--alb); border-radius: var(--raza); border: 1px solid var(--linie); }
.lectie {
    display: grid; grid-template-columns: 4.2rem 1fr; gap: .15rem .75rem;
    padding: .9rem 1rem; border-top: 1px solid var(--linie);
}
.lectie:first-child { border-top: 0; }
.lectie__ora {
    font-family: var(--titlu); font-size: 1.45rem; font-weight: 500; line-height: 1.15;
    color: var(--prun); font-variant-numeric: tabular-nums; grid-row: span 2;
}
.lectie__elev { font-weight: 600; font-size: 1.05rem; color: var(--cerneala); text-decoration: none; }
.lectie__elev:hover { color: var(--prun); text-decoration: underline; }
.lectie__meta { color: var(--cerneala-2); font-size: .9rem; }
.lectie__stare { grid-column: 2; margin-top: .45rem; }
.lectie--anulata_elev .lectie__ora,
.lectie--anulata_profesoara .lectie__ora,
.lectie--absenta .lectie__ora { color: var(--cerneala-2); text-decoration: line-through; text-decoration-thickness: 1px; }

@media (min-width: 640px) {
    .lectie { grid-template-columns: 4.6rem 1fr auto; align-items: center; }
    .lectie__ora { grid-row: auto; }
    .lectie__stare { grid-column: 3; margin-top: 0; }
}

.eticheta {
    display: inline-block; font-size: .8rem; font-weight: 600; padding: .2rem .6rem;
    border-radius: 999px; background: var(--prun-pal); color: var(--prun-inchis);
}
.eticheta--tinuta { background: var(--verde-pal); color: var(--verde); }
.eticheta--absenta, .eticheta--anulata_elev { background: var(--ambra-pal); color: var(--ambra); }
.eticheta--anulata_profesoara { background: #ECEAEE; color: var(--cerneala-2); }
.eticheta--inactiv { background: #ECEAEE; color: var(--cerneala-2); }

.gol { color: var(--cerneala-2); background: var(--alb); border: 1px dashed var(--linie); border-radius: var(--raza); padding: 1rem; margin: 0; }

/* ---------- liste simple (elevi, restanțe, plăți) ---------- */
.lista { list-style: none; margin: 0; padding: 0; background: var(--alb); border-radius: var(--raza); border: 1px solid var(--linie); }
.lista > li { border-top: 1px solid var(--linie); }
.lista > li:first-child { border-top: 0; }
.lista__rand {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .85rem 1rem; color: inherit; text-decoration: none;
}
a.lista__rand:hover { background: var(--prun-pal); }
.lista__titlu { font-weight: 600; }
.lista__detaliu { color: var(--cerneala-2); font-size: .9rem; }
.lista__dreapta { text-align: right; white-space: nowrap; }

.suma { font-variant-numeric: tabular-nums; font-weight: 600; }
.suma--minus { color: var(--rosu); }
.suma--plus { color: var(--verde); }

/* ---------- căutare ---------- */
.cautare { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.cautare input[type="search"] { flex: 1 1 14rem; }
.filtre { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtre a {
    padding: .35rem .85rem; border-radius: 999px; text-decoration: none; font-weight: 500;
    border: 1.5px solid var(--linie); color: var(--cerneala-2); background: var(--alb);
}
.filtre a[aria-current="true"] { border-color: var(--prun); color: var(--prun); }

/* ---------- formulare ---------- */
.formular { background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: 1.25rem 1rem; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.formular legend { font-family: var(--titlu); font-size: 1.15rem; font-weight: 600; margin-bottom: .75rem; padding: 0; }
.camp { margin-bottom: 1rem; }
.camp label, .eticheta-camp { display: block; font-weight: 600; margin-bottom: .3rem; }
.camp small { display: block; color: var(--cerneala-2); margin-top: .25rem; }
.grila { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grila { grid-template-columns: 1fr 1fr; } }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"],
select, textarea {
    width: 100%; font: 16px var(--text); color: var(--cerneala);
    padding: .65rem .75rem; border: 1.5px solid var(--linie); border-radius: 8px; background: var(--alb);
    min-height: 46px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--prun); outline: none; box-shadow: 0 0 0 3px var(--prun-pal); }

.bifa { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin-bottom: .5rem; cursor: pointer; }
.bifa input { width: 1.2rem; height: 1.2rem; accent-color: var(--prun); }

/* ---------- fișa elevului ---------- */
.fisa-cap { margin-bottom: 1rem; }
.fisa-cap .etichete { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .8rem; }
.contacte { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.contacte a {
    padding: .45rem .9rem; border-radius: 999px; background: var(--alb); border: 1.5px solid var(--linie);
    text-decoration: none; font-weight: 600; color: var(--cerneala);
}
.contacte a:hover { border-color: var(--prun); color: var(--prun); }
.sold-linie { font-size: 1.05rem; margin: 0 0 1rem; }

.taburi {
    display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--linie);
    margin: 1.25rem 0 1rem; -webkit-overflow-scrolling: touch;
}
.taburi a {
    padding: .65rem .7rem; text-decoration: none; color: var(--cerneala-2); font-weight: 600;
    white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.taburi a[aria-current="page"] { color: var(--prun); border-bottom-color: var(--prun); }

.detalii { background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: .25rem 1rem; margin: 0; }
.detalii div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--linie); }
.detalii div:first-child { border-top: 0; }
.detalii dt { color: var(--cerneala-2); }
.detalii dd { margin: 0; white-space: pre-line; }

/* ---------- autentificare ---------- */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.cutie-login { width: 100%; max-width: 380px; }
.cutie-login h1 { text-align: center; color: var(--prun); font-size: 2.1rem; margin-bottom: 1.5rem; }
.cutie-login .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- pasul 2: plăți și pachete ---------- */
.navigare-luna { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 .75rem; }
.navigare-luna h2 { margin: 0; min-width: 11rem; text-align: center; }
.navigare-luna .btn-mic { font-size: 1.2rem; line-height: 1; padding: .35rem .8rem; text-decoration: none; }

.cap-sectiune { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .75rem; }
.cap-sectiune h2 { margin: 0; }

.bara-progres { height: 6px; background: var(--prun-pal); border-radius: 999px; overflow: hidden; margin-top: .45rem; max-width: 14rem; }
.bara-progres span { display: block; height: 100%; background: var(--prun); border-radius: 999px; }

a.btn-mic { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; }
.suma { white-space: nowrap; }
.bifa--dublu { align-items: flex-start; margin-bottom: .85rem; }
.bifa--dublu input { margin-top: .2rem; flex: none; }
.bifa--dublu small { display: block; color: var(--cerneala-2); font-weight: 400; font-size: .9rem; }

/* ---------- pasul 3: calendar ---------- */
.continut--lat { max-width: 1240px; }
a.lectie__ora { text-decoration: none; }
a.lectie__ora:hover { text-decoration: underline; }

.cal-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; font-size: .88rem; color: var(--cerneala-2); margin-bottom: 1rem; }
.cal-legenda i { display: inline-block; width: .95rem; height: .95rem; border-radius: 3px; vertical-align: -2px; margin-right: .35rem; }
.cal-legenda__lectie { background: var(--prun); }
.cal-legenda__liber { background: var(--alb); border: 1.5px dashed var(--verde); }
.cal-legenda__inchis { background: repeating-linear-gradient(135deg, #E7E2EA 0 4px, #F1EDF3 4px 8px); }

/* bara cu zilele, doar pe telefon */
.cal-zile { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; margin-bottom: .75rem; }
.cal-zile button {
    display: flex; flex-direction: column; align-items: center; gap: 0; padding: .4rem 0 .3rem;
    border: 1.5px solid var(--linie); border-radius: 10px; background: var(--alb); color: var(--cerneala-2);
    font: 500 .8rem var(--text); cursor: pointer; min-height: 60px;
}
.cal-zile button strong { font: 500 1.15rem var(--titlu); color: var(--cerneala); }
.cal-zile button small { font-size: .72rem; color: var(--prun); font-weight: 700; min-height: 1em; }
.cal-zile button.azi strong { color: var(--prun); text-decoration: underline; text-underline-offset: 3px; }
.cal-zile button.activ { background: var(--prun); border-color: var(--prun); color: #fff; }
.cal-zile button.activ strong, .cal-zile button.activ small { color: #fff; }

/* grila */
.cal { display: grid; grid-template-columns: 3.2rem 1fr; background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); overflow: hidden; }
.cal__zi { display: none; border-left: 1px solid var(--linie); min-width: 0; }
.cal__zi.activ { display: block; }
.cal__zi-cap { height: 2.6rem; display: flex; align-items: center; justify-content: center; gap: .3rem; border-bottom: 1px solid var(--linie); font-weight: 600; font-size: .9rem; color: var(--cerneala-2); }
.cal__zi-cap strong { font: 500 1.1rem var(--titlu); color: var(--cerneala); }
.cal__zi.azi .cal__zi-cap { color: var(--prun); box-shadow: inset 0 -3px 0 var(--prun); }
.cal__zi.azi .cal__zi-cap strong { color: var(--prun); }
.cal__corp {
    position: relative; height: var(--h);
    background: repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px var(--ora));
}
.cal__axa .cal__corp { background: none; }
.cal__axa span { position: absolute; right: .4rem; transform: translateY(-50%); font-size: .75rem; color: var(--cerneala-2); font-variant-numeric: tabular-nums; }
.cal__axa span:first-child { transform: none; }

.cal__inchis { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #E7E2EA 0 4px, #F1EDF3 4px 8px); display: flex; align-items: center; justify-content: center; }
.cal__inchis span { font-size: .8rem; color: var(--cerneala-2); background: var(--alb); padding: .1rem .5rem; border-radius: 999px; }
.cal__zi.trecut .cal__corp { background-color: #FAF9FB; }

.cal__liber {
    position: absolute; left: 3px; right: 3px; border: 1.5px dashed var(--verde); border-radius: 6px;
    background: rgba(227, 241, 234, .55); color: var(--verde); font-size: .78rem; font-weight: 600;
    padding: .2rem .4rem; text-decoration: none; overflow: hidden; line-height: 1.3;
}
.cal__liber span { display: block; }
.cal__liber:hover { background: var(--verde-pal); color: var(--verde); border-style: solid; }

.cal__lectie {
    position: absolute; left: 3px; right: 3px; border-radius: 6px; background: var(--prun); color: #fff;
    padding: .2rem .45rem; font-size: .78rem; line-height: 1.25; text-decoration: none; overflow: hidden;
    border-left: 4px solid var(--prun-inchis); z-index: 1;
}
.cal__lectie:hover { background: var(--prun-inchis); color: #fff; }
.cal__lectie-ora { display: block; opacity: .85; font-variant-numeric: tabular-nums; }
.cal__lectie-nume { display: block; font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__lectie-tip { display: inline-block; margin-top: .1rem; font-size: .7rem; background: rgba(255,255,255,.2); padding: 0 .35rem; border-radius: 999px; }
.cal__lectie--tinuta { background: #3E6B55; border-left-color: #2A4D3C; }
.cal__lectie--tinuta:hover { background: #2A4D3C; }
.cal__lectie--absenta { background: #9A6A2B; border-left-color: #74501F; }
.cal__lectie--special { border-left-color: #E3B7E6; }

@media (min-width: 760px) {
    .cal-zile { display: none; }
    .cal { grid-template-columns: 3.4rem repeat(7, 1fr); }
    .cal__zi { display: block; }
}

.text-libere { font: 15px/1.5 var(--text); background: var(--alb); }

/* programul de lucru */
.program-zi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 0; border-top: 1px solid var(--linie); }
.program-zi:first-of-type { border-top: 0; }
.program-zi .bifa { margin: 0; min-width: 8rem; font-weight: 600; }
.program-zi__ore { display: flex; align-items: center; gap: .5rem; }
.program-zi__ore input { width: 7.5rem; }
.program-zi.inchis .program-zi__ore { opacity: .35; pointer-events: none; }

.meniu-jos a { font-size: .88rem; }
body.lat .bara__interior { max-width: 1240px; }

/* ---------- pasul 4: mementouri și setări ---------- */
.cuprins { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.cuprins a { padding: .35rem .85rem; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--alb); text-decoration: none; font-weight: 500; color: var(--cerneala); }
.cuprins a:hover { border-color: var(--prun); color: var(--prun); }
h2[id] { scroll-margin-top: 1rem; }

.pasi { padding-left: 1.2rem; margin: .5rem 0 1rem; }
.pasi li { margin-bottom: .35rem; }
input.cod { font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--hartie); }

.memento { padding: .9rem 1rem; border-top: 1px solid var(--linie); }
.memento:first-child { border-top: 0; }
.memento__cap { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.memento__cap .lectie__ora { grid-row: auto; }
.memento__cap .lista__titlu { color: var(--cerneala); text-decoration: none; font-size: 1.05rem; }
.memento__canal { display: grid; grid-template-columns: 5.5rem 1fr; gap: .25rem .5rem; align-items: center; padding: .3rem 0; }
.memento__eticheta { color: var(--cerneala-2); font-size: .88rem; font-weight: 600; }
.memento__dest { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .92rem; word-break: break-all; grid-column: 2; }
.memento__text { margin-top: .4rem; font-size: .9rem; }
.memento__text summary { cursor: pointer; color: var(--prun); font-weight: 600; }
.memento__text p { background: var(--hartie); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0 0; }

/* ---------- pasul 5: mesaje pentru părinți ---------- */
.mesaj-parinte { background: var(--prun-pal); border-radius: var(--raza); padding: 1rem !important; margin: .5rem 0 1.5rem !important; }
.mesaj-parinte legend { float: left; width: 100%; margin-bottom: .75rem; }
.mesaj-parinte legend + * { clear: both; }
.mesaj-parinte .memento__text p { background: var(--alb); }
.trimitere { margin-top: 1rem; }
.trimitere__stare { font-weight: 600; color: var(--cerneala-2); margin: 0 0 .6rem; }
.trimitere__stare.trimis { color: var(--verde); }
.trimitere__nesalvat { display: none; }
.trimitere.nesalvat .trimitere__nesalvat { display: block; }
.trimitere.nesalvat .js-wa-mesaj, .trimitere.nesalvat .js-copiaza { display: none; }
.text-raport { font: 15px/1.55 var(--text); min-height: 22rem; }

/* ---------- faza 2A: portalul elevilor ---------- */
.meniu-jos a { font-size: .8rem; padding-left: 0; padding-right: 0; }
.btn--mare { width: 100%; min-height: 56px; font-size: 1.1rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.portal-cap { margin-bottom: 1.25rem; }
.portal-cap h1 { margin-bottom: 1rem; }
.serie { display: flex; align-items: center; gap: 1rem; background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: 1rem; margin-bottom: 1rem; }
.serie > div:last-child { flex: 1; }
.serie__numar { font-family: var(--titlu); font-size: 3.2rem; line-height: 1; color: var(--prun); min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.serie__eticheta { font-weight: 700; font-size: 1.05rem; }

.grila-rep { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 22rem; margin: 0 0 .5rem; }
.grila-rep__cap { font-size: .72rem; text-align: center; color: var(--cerneala-2); font-weight: 600; }
.grila-rep__zi { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: #ECE7EF; color: var(--cerneala-2); font-size: .75rem; }
.grila-rep__zi.da { background: var(--prun); color: #fff; font-weight: 700; }
.grila-rep__zi.azi { outline: 2px solid var(--prun); outline-offset: -2px; }
.grila-rep__zi.viitor { background: transparent; border: 1px dashed var(--linie); }

.tema { background: var(--ambra-pal); border-radius: var(--raza); padding: .85rem 1rem; margin-bottom: 1rem; }
.tema p { margin: .3rem 0 0; }

.repetitii { display: grid; gap: .75rem; }
.rep { background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: .9rem 1rem; }
.rep__cap { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin-bottom: .6rem; }
.rep__cap .lista__titlu { color: var(--cerneala); text-decoration: none; font-size: 1.05rem; }
.rep__data { color: var(--cerneala-2); font-size: .9rem; }
.rep__corp { display: flex; gap: .85rem; align-items: flex-start; }
.rep__foto img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; display: block; }
.rep__text { flex: 1; min-width: 0; }
.rep__text audio { width: 100%; height: 40px; }
.rep__notita { margin: .5rem 0 0; font-size: .95rem; }
.rep__feedback { margin-top: .75rem; background: var(--prun-pal); border-radius: 8px; padding: .6rem .8rem; }
.rep__raspuns { margin: -.4rem 0 0; padding: .75rem 1rem; background: var(--alb); border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--raza) var(--raza); }
.rep__raspuns textarea { min-height: 60px; margin-bottom: .5rem; }
.rep__pastreaza, .rep__sterge { margin: -.4rem 0 .25rem; }
.sugestii { display: flex; gap: .35rem; margin-bottom: .6rem; overflow-x: auto; padding-bottom: .2rem; -webkit-overflow-scrolling: touch; }
.sugestii .btn-mic { font-weight: 500; white-space: nowrap; font-size: .8rem; min-height: 32px; padding: .3rem .65rem; }

.rec { text-align: center; padding: .5rem 0 0; }
.rec__timp { font-family: var(--titlu); font-size: 2.6rem; color: var(--prun); font-variant-numeric: tabular-nums; }
.rec__stare { min-height: 1.5em; color: var(--cerneala-2); margin: .25rem 0 .75rem; }
.rec__stare.rec-activ { color: var(--rosu); font-weight: 700; }
.rec__stare.rec-activ::before { content: ''; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--rosu); margin-right: .4rem; animation: puls 1s infinite; }
@keyframes puls { 50% { opacity: .25; } }
.rec__butoane { justify-content: center; margin-bottom: .75rem; }
.rec__buton { min-width: 14rem; min-height: 56px; font-size: 1.05rem; }
.rec__buton--stop { background: var(--rosu); border-color: var(--rosu); }
.rec__buton--stop:hover { background: #8E2D39; border-color: #8E2D39; }
.rec audio { width: 100%; margin-bottom: .5rem; }
.rec__alternativ { margin-top: .75rem; }
.rec__alternativ summary { cursor: pointer; color: var(--prun); font-weight: 600; }
.rec__alternativ input { margin-top: .5rem; }
.foto-preview { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; margin-top: .75rem; }
.progres { height: 8px; background: var(--prun-pal); border-radius: 999px; overflow: hidden; margin-bottom: .75rem; }
.progres span { display: block; height: 100%; width: 0; background: var(--prun); transition: width .2s; }

.mesaj-portal { background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: .75rem 1rem; margin-bottom: .5rem; }
.mesaj-portal summary { cursor: pointer; font-weight: 600; }
.mesaj-portal p { margin: .6rem 0 0; }

.card-rep { display: block; background: var(--prun); color: #fff; border-radius: var(--raza); padding: .9rem 1rem; text-decoration: none; margin-bottom: 1rem; }
.card-rep:hover { background: var(--prun-inchis); color: #fff; }
.cont { padding: .85rem 1rem; border-top: 1px solid var(--linie); }
.cont:first-child { border-top: 0; }

/* ---------- pasul 7: repetiții video ---------- */
.video-cadru { position: relative; background: #1E1622; border-radius: var(--raza); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: .75rem; }
.video-cadru video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.video-live.oglinda { transform: scaleX(-1); }
.video-gol { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; color: #E9DDEB; text-align: center; }
.video-gol p { margin: 0; max-width: 18rem; }
.rep__video video { width: 100%; max-height: 70vh; border-radius: 8px; background: #000; display: block; margin-bottom: .5rem; }
.video-cadru video:not([hidden]) ~ .video-gol { display: none; }

/* ---------- acces portal: parolă și link ---------- */
.cont__acces { background: var(--hartie); border-radius: 8px; padding: .75rem; margin-top: .75rem; }
.cont__titlu { font-weight: 600; margin: 0 0 .5rem; font-size: .95rem; }
.cont__parola { margin-top: .9rem; }
.cont__parola-rand { display: flex; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.cont__parola-rand input { flex: 1; min-width: 0; }
.link-afisat { margin-top: .75rem; background: var(--alb); border: 1.5px solid var(--verde); border-radius: 8px; padding: .75rem; }
.jurnal .lista__rand { align-items: flex-start; }

/* ---------- faza 2B: motivare, progres, resurse ---------- */
.nivel { display: flex; align-items: center; gap: 1rem; background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: .9rem 1rem; margin: 1rem 0; color: inherit; text-decoration: none; }
.nivel > div:last-child { flex: 1; }
.nivel--link:hover { border-color: var(--prun); color: inherit; }
.nivel__nota { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--prun); color: #fff; display: grid; place-items: center; font: 600 1.15rem var(--titlu); flex: none; text-align: center; line-height: 1; padding: .2rem; }
.nivel__titlu { font-weight: 700; margin-bottom: .2rem; }

.felicitare { display: flex; gap: .9rem; align-items: center; background: var(--ambra-pal); border: 2px solid #E2B866; border-radius: var(--raza); padding: .9rem 1rem; margin-bottom: 1rem; }
.felicitare__simbol { font-size: 2.2rem; line-height: 1; }

.provocare { background: var(--verde-pal); border-radius: var(--raza); padding: .85rem 1rem; margin-bottom: 1rem; }
.provocare .bara-progres span { background: var(--verde); }
.provocare .bara-progres { background: #CFE6DA; margin: .45rem 0 .3rem; }

.insigne { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.insigna { background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: .75rem .6rem; text-align: center; display: flex; flex-direction: column; gap: .15rem; opacity: .5; }
.insigna.are { opacity: 1; border-color: var(--prun); box-shadow: inset 0 0 0 1px var(--prun); }
.insigna:not(.are) .insigna__simbol { filter: grayscale(1); }
.insigna__simbol { font-size: 1.9rem; line-height: 1.2; }
.insigna strong { font-size: .9rem; }
.insigna small { color: var(--cerneala-2); font-size: .78rem; }
.insigna__premiu { font-size: .75rem; font-weight: 600; color: var(--ambra); margin-top: .2rem; }

.comparatie { background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: 1rem; margin-bottom: .75rem; }
.comparatie__grila { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .comparatie__grila { grid-template-columns: 1fr 1fr; } }
.comparatie__eticheta { font-weight: 600; margin: 0 0 .35rem; color: var(--prun); }
.comparatie video, .comparatie audio { width: 100%; border-radius: 8px; }
.comparatie video { background: #000; }

.resursa { padding: .85rem 1rem; border-top: 1px solid var(--linie); }
.resursa:first-child { border-top: 0; }
.resursa__cap { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; margin-bottom: .3rem; }
.resursa audio, .resursa video { width: 100%; margin-top: .25rem; }
.resursa video { border-radius: 8px; background: #000; }
.resursa .btn-mic { margin-top: .25rem; }

.clasament { list-style: none; margin: 0; padding: 0; background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); }
.clasament li { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-top: 1px solid var(--linie); }
.clasament li:first-child { border-top: 0; }
.clasament li.eu { background: var(--prun-pal); font-weight: 700; }
.clasament__loc { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--hartie); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.clasament li:nth-child(-n+3) .clasament__loc { background: var(--prun); color: #fff; }
.clasament__zile { margin-left: auto; color: var(--cerneala-2); }

.rep__piesa { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.rep__piesa label { font-weight: 600; font-size: .9rem; }
.rep__piesa input { flex: 1; min-height: 40px; }

.recompensa-rand { display: grid; grid-template-columns: 2.2rem 1fr; gap: .25rem .75rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--linie); }
.recompensa-rand:first-of-type { border-top: 0; }
.recompensa-rand .insigna__simbol { font-size: 1.6rem; grid-row: span 2; }
.recompensa-rand input { grid-column: 2; }
@media (min-width: 640px) { .recompensa-rand { grid-template-columns: 2.2rem 1fr 1.3fr; } .recompensa-rand input { grid-column: 3; } .recompensa-rand .insigna__simbol { grid-row: auto; } }

.elevi-alesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1rem; margin-top: .5rem; }
.card-rep--premiu { background: var(--ambra); }
.card-rep--premiu:hover { background: #74470A; }

/* ---------- plățile în portal ---------- */
.card-plati { background: var(--alb); border: 1px solid var(--linie); border-left: 5px solid var(--verde); border-radius: var(--raza); padding: .9rem 1rem; margin-bottom: 1rem; }
.card-plati.restant { border-left-color: var(--rosu); background: #FFF9FA; }
.card-plati__stare { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card-plati__eticheta { font-weight: 700; }
.card-plati__suma { font: 600 1.6rem var(--titlu); color: var(--verde); font-variant-numeric: tabular-nums; }
.card-plati.restant .card-plati__suma { color: var(--rosu); }
.card-plati__suma--mic { font-size: 1.2rem; }
.card-plati__pachet { margin: .5rem 0 0; font-size: .95rem; }
.card-plati__detalii { margin-top: .6rem; }
.card-plati__detalii summary { cursor: pointer; color: var(--prun); font-weight: 600; }
.card-plati__detalii p { background: var(--hartie); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0 0; }
.extras .lista__rand { align-items: flex-start; }

/* ---------- editarea insignelor și a nivelurilor ---------- */
.insigna-edit { border: 1px solid var(--linie) !important; border-radius: var(--raza); padding: .75rem !important; margin: 0 0 .6rem !important; display: grid; gap: .45rem; background: var(--alb); }
.insigna-edit.ascunsa { opacity: .6; }
.insigna-edit__rand { display: flex; gap: .5rem; }
.insigna-edit__simbol { width: 3.4rem !important; text-align: center; font-size: 1.3rem !important; padding: .3rem !important; flex: none; }
.insigna-edit__nume { font-weight: 700 !important; }
.insigna-edit__premiu { display: flex; align-items: center; gap: .5rem; }
.insigna-edit__premiu label { font-weight: 600; font-size: .9rem; color: var(--ambra); }
.insigna-edit__premiu input { flex: 1; }
.niveluri-edit { display: grid; grid-template-columns: 8rem 1fr; gap: .45rem .75rem; align-items: center; max-width: 30rem; }
.lista__rand form .btn-mic { white-space: nowrap; }

/* ---------- zilele săptămânii: lecție, repetiție, odihnă ---------- */
.zile-sapt { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: -.4rem 0 .35rem; }
.zile-sapt__zi { display: flex; flex-direction: column; align-items: center; padding: .35rem 0; border-radius: 8px; background: #ECE7EF; font-size: .72rem; color: var(--cerneala-2); }
.zile-sapt__zi strong { font-size: 1rem; min-height: 1.3rem; line-height: 1.3rem; }
.zile-sapt__zi.da { background: var(--prun); color: #fff; }
.zile-sapt__zi.zi-lectie { background: var(--ambra-pal); color: var(--ambra); box-shadow: inset 0 0 0 1.5px #E2B866; }
.zile-sapt__zi.viitor { background: transparent; border: 1px dashed var(--linie); }
.zile-sapt__zi.azi { outline: 2px solid var(--prun); outline-offset: -2px; }
.zile-sapt__legenda { margin: 0 0 1rem; }
.grila-rep__zi.zi-lectie { background: var(--ambra-pal); color: var(--ambra); font-weight: 700; box-shadow: inset 0 0 0 1.5px #E2B866; }

/* notificarea cu repetițiile noi, pe elevi */
.card-rep--lista { padding: .9rem 1rem .6rem; }
.card-rep--lista a { color: #fff; text-decoration: none; }
.card-rep__titlu { display: block; margin-bottom: .3rem; }
.card-rep--lista ul { list-style: none; margin: .2rem 0 0; padding: 0; }
.card-rep--lista li a { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-top: 1px solid rgba(255,255,255,.2); }
.card-rep--lista li a:hover span:first-child { text-decoration: underline; }
.card-rep__cand { opacity: .8; font-size: .88rem; white-space: nowrap; }

/* ---------- aplicația pe telefon ---------- */
.instalare { display: flex; align-items: center; gap: .75rem; max-width: 880px; margin: .75rem auto 0; padding: .75rem 1rem; background: var(--alb);
             border: 1.5px solid var(--prun); border-radius: var(--raza); width: calc(100% - 2rem); flex-wrap: wrap; }
.instalare img { border-radius: 10px; flex: none; }
.instalare__text { flex: 1 1 12rem; font-size: .92rem; line-height: 1.35; }
.instalare__text > strong { display: block; font-size: 1rem; }
.instalare__butoane { display: flex; align-items: center; gap: .25rem; }
.push { background: var(--alb); border: 1px solid var(--linie); border-radius: var(--raza); padding: .9rem 1rem; }
.push--compact { border-color: var(--prun); margin-bottom: 1rem; }
.push--compact p { margin: 0 0 .5rem; }
.push__stare { margin: 0 0 .5rem; }
@media (display-mode: standalone) {
    .bara { padding-top: max(env(safe-area-inset-top, 0px), .25rem); }
}
.aplicatie-previzualizare { display: inline-flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: 1rem; font-size: .85rem; }
.aplicatie-previzualizare img { border-radius: 16px; box-shadow: 0 2px 8px rgba(38, 28, 46, .18); }