/* Fonturi self-hosted (inline in app.css, cache-busting prin ?v=) */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/caveat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/caveat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-506d0d0a5f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-119dbdffcd.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope-18326b9732.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope-c3ddfb1bc2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-5426402450.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-d7c94b4e5a.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-d25228e545.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-40a9e3a1e3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ====================================================================
   Enjoy Music — design system v4
   Schelet de aplicatie profesionist: bara laterala intunecata pe toata
   inaltimea (lipita de marginea stanga), bara de sus doar peste continut,
   dunga de brand sus, tipografie Manrope + Inter, campuri sobre.
   Brand: galben #FFCA00, albastru #1CA2DE, menta #77D1BD, negru #17181C.
   ==================================================================== */

:root {
  --galben: #FFCA00;
  --galben-hover: #F0BE00;
  --galben-pal: #FFF7DB;
  --auriu: #A98416;
  --albastru: #1CA2DE;
  --albastru-inchis: #0F6E99;
  --albastru-pal: #E9F5FB;
  --menta: #77D1BD;
  --menta-inchis: #2E7D6B;
  --menta-pal: #EAF8F4;
  --negru: #101114;
  --carbune: #17181C;
  --text: #2E323A;
  --text-2: #667085;
  --text-3: #98A2B3;
  --fundal: #F7F8FA;
  --alb: #FFFFFF;
  --bord: #E7EAEF;
  --bord-2: #D5DAE1;
  --rosu: #C03434;
  --rosu-pal: #FBEDEC;
  --verde: #237A28;
  --verde-pal: #EAF5EA;
  --ocru: #855F00;
  --violet: #6A4FB6;
  --violet-pal: #F0EBFB;
  --raza: 12px;
  --raza-m: 9px;
  --umbra: 0 1px 2px rgba(16,17,20,.04);
  --umbra-2: 0 10px 30px rgba(16,17,20,.10);
  --tranz: .15s cubic-bezier(.4,0,.2,1);
  --bara-h: 60px;
  --nav-w: 262px;
  --dunga-h: 3px;
  /* Zonele sigure ale iPhone-ului (notch / Dynamic Island / bara de jos).
     Pe web sunt 0; in aplicatia nativa iau valorile reale. */
  --sus-sigur: env(safe-area-inset-top, 0px);
  --jos-sigur: env(safe-area-inset-bottom, 0px);
  --stanga-sigur: env(safe-area-inset-left, 0px);
  --dreapta-sigur: env(safe-area-inset-right, 0px);
  --antet-h: calc(var(--sus-sigur) + var(--dunga-h));
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Aplicatia nu se mareste cu doua degete si nici cu dublu-tap: e o aplicatie, nu
   o pagina de citit. Zoomul aparea doar pe ecranele cu tabele late, si strica
   asezarea. `touch-action: manipulation` scoate dublu-tapul; restul il face
   `maximum-scale=1, user-scalable=no` din <meta name="viewport">. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  margin: 0; color: var(--text); background: var(--fundal);
  font: 15px/1.55 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-family: Manrope, Inter, sans-serif; color: var(--negru); margin: 0 0 .5em; }
h1 { font-size: clamp(1.35rem, 3vw, 1.6rem); font-weight: 800; letter-spacing: -.022em; }
h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; margin-top: 1.4em; }
h3 { font-size: .98rem; font-weight: 700; letter-spacing: -.008em; }
h3 .ic-svg, h2 .ic-svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; color: var(--text-3); }
.script { font-family: Caveat, cursive; font-weight: 600; color: var(--auriu); font-size: 1.55rem; letter-spacing: 0; }
a { color: var(--albastru-inchis); text-decoration: none; }
main a:not(.btn):not(.nav-item):hover { text-decoration: underline; }
p { margin: .3em 0 .8em; }
small, .secundar { color: var(--text-2); }
code { background: #EEF0F4; border-radius: 5px; padding: 1px 6px; font-size: .86em; overflow-wrap: anywhere; word-break: break-word; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.ic-svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- Dunga de brand (sus, pe toata latimea) ----------
   Sub ea, un bloc alb umple zona ceasului/Dynamic Island, ca sa nu se
   suprapuna continutul peste bara de stare a telefonului. */
.curcubeu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--antet-h); padding-top: var(--sus-sigur);
  background: var(--alb);
}
.curcubeu::after {
  content: ''; display: block; height: var(--dunga-h);
  background: linear-gradient(90deg, var(--galben) 0 32%, var(--albastru) 46% 66%, var(--menta) 82% 100%);
}

/* ---------- Bara laterala: meniul unic, pe toata inaltimea ---------- */
.nav-lat {
  position: fixed; z-index: 220; top: var(--antet-h); left: 0; bottom: 0; width: var(--nav-w);
  background: var(--carbune); color: #B9BEC7; display: flex; flex-direction: column;
  padding: 0 12px calc(12px + var(--jos-sigur));
  transform: translateX(-103%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Sub 1024px nu mai exista sertar: telefonul si tableta au bara de taburi
   plus foaia "Mai mult", ca intr-o aplicatie nativa. */
@media (max-width: 1023px) { .nav-lat { display: none; } }

.nav-marca {
  display: flex; align-items: center; gap: 10px; color: #fff;
  padding: 17px 10px 15px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-marca img { height: 30px; width: auto; }
.nav-marca strong { font: 800 1.04rem Manrope, Inter, sans-serif; letter-spacing: -.015em; display: block; line-height: 1.15; }
.nav-marca small { font: 500 .68rem Inter; color: #858B95; display: block; letter-spacing: .02em; }

.nav-vedere { padding: 10px 4px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-vedere-titlu { font: 700 .6rem Manrope; letter-spacing: .14em; text-transform: uppercase; color: #6A6F79; margin: 0 8px 6px; }
.nav-vedere form { display: flex; flex-direction: column; gap: 3px; }
.nav-vedere button {
  text-align: left; padding: 7px 10px; border-radius: 8px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.05); color: #C2C6CE; font: 500 .84rem Inter;
}
.nav-vedere button:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-vedere button.activ { background: var(--galben); color: var(--negru); font-weight: 700; }
.nav-lat nav { flex: 1; padding-top: 4px; }
.nav-titlu { font: 700 .62rem Manrope; letter-spacing: .14em; text-transform: uppercase; color: #6A6F79; margin: 16px 12px 5px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 1px 0;
  border-radius: 9px; color: #C2C6CE; font: 500 .9rem Inter; line-height: 1.25;
  transition: background var(--tranz), color var(--tranz);
}
.nav-item .ic-svg { width: 18px; height: 18px; color: #7C828C; transition: color var(--tranz); }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item:hover .ic-svg { color: #C2C6CE; }
.nav-item.activ { background: rgba(255,202,0,.14); color: #fff; font-weight: 600; }
.nav-item.activ .ic-svg { color: var(--galben); }
.nav-iesire { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.nav-iesire button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px;
  background: none; border: 0; border-radius: 9px; color: #98A2B3;
  font: 500 .9rem Inter; cursor: pointer; text-align: left;
}
.nav-iesire button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-iesire .ic-svg { width: 18px; height: 18px; }

/* ---------- Zona de continut: bara de sus + pagina ---------- */
.zona { min-height: 100vh; display: flex; flex-direction: column; padding-top: var(--antet-h); }
.bara {
  position: sticky; top: var(--antet-h); z-index: 120;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.bara-in { display: flex; align-items: center; gap: 8px; height: var(--bara-h);
  padding: 0 calc(16px + var(--dreapta-sigur)) 0 calc(16px + var(--stanga-sigur)); }
.bara-data { font: 500 .82rem Inter; color: var(--text-2); }
.marca { display: flex; align-items: center; gap: 9px; color: var(--negru); min-width: 0; }
.marca img { height: 26px; width: auto; flex: 0 0 auto; }
/* Pe telefon, ecranul radacina isi poarta numele lui, nu al aplicatiei — sigla ar fi
   redundanta, pictograma aplicatiei e deja pe ecranul de start al telefonului. */
@media (max-width: 1023px) { .bara-in .marca img { display: none; } }
.marca span { font: 800 1rem Manrope, Inter, sans-serif; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ecranele care nu sunt taburi arata sageata de intoarcere si titlul lor,
   nu numele aplicatiei — asa se comporta un ecran dintr-o aplicatie. */
.bara-inapoi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -8px; border: 0; border-radius: 50%;
  background: transparent; color: var(--negru); cursor: pointer; flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.bara-inapoi:active { background: #EEF0F4; }
.bara-inapoi .ic-svg { width: 20px; height: 20px; }
.bara-titlu {
  font: 700 1rem Manrope, Inter, sans-serif; letter-spacing: -.015em; color: var(--negru);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Titlul din bara apare abia cand ai derulat peste titlul mare al paginii —
   asa nu scrie de doua ori acelasi lucru, ca in aplicatiile iOS. */
@media (max-width: 1023px) {
  .bara-titlu, .bara-in .marca span {
    opacity: 0; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
  }
  body.titlu-vizibil .bara-titlu, body.titlu-vizibil .bara-in .marca span {
    opacity: 1; transform: none;
  }
  body.titlu-vizibil .bara { border-bottom-color: var(--bord-2); }
}
.spatiu { flex: 1; }
.btn-ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent;
  color: var(--text); cursor: pointer; transition: background var(--tranz);
}
.btn-ic:hover { background: #EFF1F4; }
.btn-ic .ic-svg { width: 20px; height: 20px; }
.contor {
  position: absolute; top: 3px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--rosu); color: #fff; border-radius: 99px;
  font: 700 .6rem/15px Inter; text-align: center; box-shadow: 0 0 0 2px var(--alb);
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--carbune); color: var(--galben);
  font: 800 .74rem Manrope; letter-spacing: .02em;
  transition: box-shadow var(--tranz);
}
.avatar:hover { box-shadow: 0 0 0 3px var(--galben-pal), 0 0 0 4px var(--galben); }

.pagina { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 22px calc(16px + var(--dreapta-sigur)) calc(28px + var(--jos-sigur)) calc(16px + var(--stanga-sigur));
  min-width: 0; }
.cu-taburi .pagina { padding-bottom: calc(88px + var(--jos-sigur)); }
.pagina.publica { max-width: 640px; padding-top: calc(30px + var(--antet-h)); }
.corp-public { background: var(--fundal); }

@media (min-width: 1024px) {
  .nav-lat { transform: none; }
  .scrim { display: none; }
  .doar-mobil { display: none !important; }
  .zona { margin-left: var(--nav-w); }
  .bara-in { padding: 0 30px; }
  .pagina { padding: 28px 36px 44px; }
}
@media (max-width: 1023px) {
  .doar-desktop { display: none !important; }
}

/* Ecrane medii fara bara laterala (iPad in mod iPhone, telefon in peisaj):
   continutul nu se intinde pe toata latimea — ramane lizibil. */
@media (min-width: 600px) and (max-width: 1023px) {
  .pagina { max-width: 720px; }
  .nav-jos { max-width: 720px; margin: 0 auto; border-radius: 16px 16px 0 0; }
}

/* Telefon in peisaj: inaltime mica — bara de sus si taburile se subtiaza,
   ca sa ramana loc de continut. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bara-h: 46px; }
  .pagina { padding-top: 12px; }
  .cu-taburi .pagina { padding-bottom: calc(62px + var(--jos-sigur)); }
  .nav-jos { padding-top: 3px; }
  .nav-jos a { font-size: .6rem; gap: 1px; }
  .nav-jos a .ic-svg { width: 17px; height: 17px; }
  .antet-pagina { margin-bottom: 8px; }
}

/* ---------- Taburile de jos (parinte/profesor, mobil) ---------- */
/* Bara de taburi: patru destinatii + "Mai mult". Metrici de aplicatie nativa —
   inaltime constanta, zona de atingere pe toata coloana, eticheta mereu vizibila. */
.nav-jos {
  position: fixed; z-index: 150; left: 0; right: 0; bottom: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--bord);
  padding: 4px calc(2px + var(--dreapta-sigur)) calc(4px + var(--jos-sigur)) calc(2px + var(--stanga-sigur));
}
.nav-jos a, .nav-jos button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 48px; padding: 5px 2px; border: 0; background: none; border-radius: 12px;
  color: var(--text-2); font: 500 .655rem Inter; cursor: pointer;
  text-align: center; line-height: 1.15; -webkit-tap-highlight-color: transparent;
}
.nav-jos a span, .nav-jos button span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-jos .ic-svg { width: 22px; height: 22px; transition: transform var(--tranz); }
.nav-jos a:active .ic-svg, .nav-jos button:active .ic-svg { transform: scale(.9); }
.nav-jos a.activ { color: var(--negru); font-weight: 700; }
.nav-jos a.activ .ic-svg { color: var(--auriu); stroke-width: 2.2; }
body.foaie-deschisa .tab-mai-mult { color: var(--negru); font-weight: 700; }
body.foaie-deschisa .tab-mai-mult .ic-svg { color: var(--auriu); }
@media (min-width: 1024px) { .nav-jos { display: none; } }

/* ---------- Foaia "Mai mult" (tipar nativ de bottom sheet) ---------- */
.foaie-scrim {
  position: fixed; inset: 0; z-index: 300; background: rgba(16,17,20,.42);
  opacity: 0; transition: opacity .22s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.foaie-deschisa .foaie-scrim { opacity: 1; }
.foaie {
  position: fixed; z-index: 310; left: 0; right: 0; bottom: 0;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--alb); border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 44px rgba(16,17,20,.22);
  padding-bottom: var(--jos-sigur);
  transform: translateY(101%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
body.foaie-deschisa .foaie { transform: translateY(0); }
.foaie[hidden], .foaie-scrim[hidden] { display: none; }
.foaie-maner { padding: 9px 0 3px; display: flex; justify-content: center; cursor: grab; touch-action: none; }
.foaie-maner span { display: block; width: 38px; height: 4px; border-radius: 99px; background: var(--bord-2); }
.foaie-cap { display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 8px; }
.foaie-cap h2 { margin: 0; font: 800 1.05rem Manrope; letter-spacing: -.01em; }
.foaie-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #EEF0F4; color: var(--text-2);
}
.foaie-x .ic-svg { width: 17px; height: 17px; }

.foaie-cont {
  display: flex; align-items: center; gap: 12px; margin: 0 12px 10px;
  padding: 11px 12px; border-radius: 14px; background: var(--fundal); color: inherit;
  text-decoration: none !important;
}
.foaie-cont:active { background: #EEF0F4; }
.foaie-cont .avatar { width: 40px; height: 40px; font-size: .82rem; flex: 0 0 auto; }
.foaie-cont-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.foaie-cont-text strong { font: 700 .95rem Inter; color: var(--negru); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foaie-cont-text small { color: var(--text-2); font-size: .78rem; }
.foaie-chev { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }

.foaie-vedere { margin: 0 12px 10px; }
.foaie-vedere form { display: flex; gap: 6px; background: var(--fundal); padding: 4px; border-radius: 12px; }
.foaie-vedere button {
  flex: 1; min-height: 38px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text-2); font: 600 .85rem Inter;
}
.foaie-vedere button.activ { background: var(--alb); color: var(--negru); box-shadow: var(--umbra); font-weight: 700; }

.foaie-cauta {
  display: flex; align-items: center; gap: 9px; margin: 0 12px 8px;
  padding: 0 12px; background: var(--fundal); border-radius: 12px;
}
.foaie-cauta .ic-svg { width: 17px; height: 17px; color: var(--text-3); flex: 0 0 auto; }
.foaie-cauta input {
  border: 0; background: none; padding: 11px 0; min-height: 0; box-shadow: none !important;
  font-size: 16px; /* sub 16px, iOS mareste singur pagina la focus */
}
.foaie-cauta input:focus { outline: none; }

.foaie-lista { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 6px; overscroll-behavior: contain; }
.foaie-grup { margin-bottom: 6px; }
.foaie-grup-titlu {
  font: 700 .63rem Manrope; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding: 12px 6px 5px;
}
.foaie-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px;
  border-radius: 12px; color: var(--text); text-decoration: none !important;
  min-height: 48px; -webkit-tap-highlight-color: transparent;
}
.foaie-item:active { background: var(--fundal); }
.foaie-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; background: #F2F3F6; color: var(--text-2); flex: 0 0 auto;
}
.foaie-ic .ic-svg { width: 17px; height: 17px; }
.foaie-text { flex: 1; min-width: 0; font: 500 .93rem Inter; }
.foaie-item.activ { background: var(--galben-pal); }
.foaie-item.activ .foaie-ic { background: var(--galben); color: var(--negru); }
.foaie-item.activ .foaie-text { font-weight: 700; color: var(--negru); }
.foaie-gol { padding: 26px 8px; text-align: center; color: var(--text-2); font-size: .9rem; }
/* display:flex bate regula implicita a browserului pentru [hidden] — o punem inapoi,
   altfel cautarea marcheaza randurile ca ascunse dar ele raman pe ecran. */
.foaie-item[hidden], .foaie-grup[hidden], .foaie-gol[hidden] { display: none !important; }

.foaie-iesire { border-top: 1px solid var(--bord); padding: 8px 12px 4px; margin: 0; }
.foaie-iesire button {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  min-height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--rosu); font: 600 .92rem Inter;
}
.foaie-iesire button:active { background: var(--rosu-pal); }
.foaie-iesire .ic-svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .foaie, .foaie-scrim { display: none !important; } }

/* ---------- Carduri ---------- */
.card {
  background: var(--alb); border: 1px solid var(--bord); border-radius: var(--raza);
  padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--umbra);
}
.card.interactiv { transition: box-shadow var(--tranz), transform var(--tranz), border-color var(--tranz); }
.card.interactiv:hover { box-shadow: var(--umbra-2); transform: translateY(-1px); border-color: var(--bord-2); }
.card.gol { text-align: center; padding: 38px 18px; color: var(--text-2); border-style: dashed; box-shadow: none; background: transparent; }
.card.gol .ic {
  /* flex, nu inline-flex: pictograma sta pe randul ei, deasupra textului */
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px;
  background: var(--fundal); color: var(--text-3);
}
.card.gol .ic .ic-svg { width: 22px; height: 22px; }

.antet-pagina { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 16px; }
.antet-pagina h1 { margin: 0; }
.antet-actiuni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Grile & KPI ---------- */
.grila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kpi { padding: 15px 18px; height: 100%; }
.grila > a { display: block; height: 100%; text-decoration: none; }
.grila > a:hover { text-decoration: none; }
.grila > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) { .grila > a:last-child:nth-child(odd) { grid-column: auto; } }
.kpi .numar { font: 800 clamp(1.3rem, 5vw, 1.7rem)/1.15 Manrope, Inter, sans-serif; color: var(--negru); letter-spacing: -.02em; overflow-wrap: anywhere; }
.kpi .eticheta { font: 600 .67rem Inter; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; }
.sold-mare { font: 800 2.5rem/1 Manrope; color: var(--negru); letter-spacing: -.03em; }

/* ---------- Formulare ---------- */
label { display: block; font: 600 .76rem Inter; color: #475063; margin: 13px 0 5px; letter-spacing: .005em; }
input, select, textarea {
  width: 100%; padding: 9.5px 12px; border: 1px solid var(--bord-2); border-radius: var(--raza-m);
  font: 400 .92rem Inter, system-ui, sans-serif; color: var(--negru); background: var(--alb);
  transition: border-color var(--tranz), box-shadow var(--tranz);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--albastru); box-shadow: 0 0 0 3px rgba(28,162,222,.15);
}
textarea { min-height: 88px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--carbune); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr; } }
.actiuni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.rand { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Fara asta, un copil cu text lung refuza sa se stranga si impinge pagina lateral. */
.actiuni > *, .rand > * { min-width: 0; }

/* ---------- Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9.5px 16px; border: 1px solid transparent; border-radius: var(--raza-m);
  background: var(--galben); color: var(--negru);
  font: 600 .86rem Inter, sans-serif; letter-spacing: .002em;
  cursor: pointer; text-decoration: none !important;
  /* Eticheta lunga se rupe pe randul urmator in loc sa latie pagina peste ecran. */
  white-space: normal; text-align: center; max-width: 100%;
  /* min-content = latimea celui mai lung cuvant: eticheta se rupe intre cuvinte,
     niciodata in mijlocul unui cuvant, dar butonul tot nu poate depasi ecranul. */
  min-width: min-content; overflow-wrap: break-word;
  transition: background var(--tranz), box-shadow var(--tranz), transform var(--tranz), border-color var(--tranz);
}
.btn:hover { background: var(--galben-hover); box-shadow: 0 2px 8px rgba(240,190,0,.35); }
.btn:active { transform: translateY(1px); }
.btn .ic-svg { width: 16px; height: 16px; }
.btn.albastru { background: var(--albastru); color: #fff; }
.btn.albastru:hover { background: #1793CB; box-shadow: 0 2px 8px rgba(28,162,222,.3); }
.btn.negru { background: var(--carbune); color: #fff; }
.btn.negru:hover { background: #24262B; box-shadow: 0 2px 8px rgba(16,17,20,.25); }
.btn.wa { background: #25D366; color: #fff; }
.btn.wa:hover { background: #1FBB59; box-shadow: 0 2px 8px rgba(37,211,102,.3); }
.btn.secundar { background: var(--alb); border-color: var(--bord-2); color: var(--text); }
.btn.secundar:hover { background: #F4F5F7; box-shadow: none; border-color: #C4CAD3; }
.btn.pericol { background: var(--alb); border-color: #ECC7C4; color: var(--rosu); }
.btn.pericol:hover { background: var(--rosu-pal); box-shadow: none; }
.btn.mic { padding: 6px 11px; font-size: .78rem; border-radius: 8px; }
.btn.mic .ic-svg { width: 14px; height: 14px; }
.btn.lat { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- Badge-uri ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 99px; font: 600 .71rem Inter; white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.b-prezent, .b-achitat { background: var(--verde-pal); color: var(--verde); }
.b-absent, .b-neachitat { background: var(--rosu-pal); color: var(--rosu); }
.b-motivat { background: var(--albastru-pal); color: var(--albastru-inchis); }
.b-recuperare { background: var(--menta-pal); color: var(--menta-inchis); }
.b-devansare { background: var(--violet-pal); color: var(--violet); }
.b-partial { background: var(--galben-pal); color: var(--ocru); }
.b-neutru { background: #EEF0F4; color: var(--text-2); }

/* ---------- Benzi de mesaj ---------- */
.banda { padding: 11px 14px; border-radius: var(--raza-m); margin: 0 0 14px; font-size: .9rem; border: 1px solid transparent; }
.banda.ok { background: var(--verde-pal); color: #1C5320; border-color: #CDE5CE; }
.banda.eroare { background: var(--rosu-pal); color: #8A211D; border-color: #F0CFCC; }
.banda.info { background: var(--albastru-pal); color: var(--albastru-inchis); border-color: #C9E6F5; }
.banda.avert { background: var(--galben-pal); color: var(--ocru); border-color: #EEDFA6; }
.banda a { font-weight: 600; color: inherit; text-decoration: underline; }

/* ---------- Tabele ---------- */
.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; background: var(--alb); border: 1px solid var(--bord); border-radius: var(--raza); overflow: hidden; }
th { font: 700 .66rem Manrope; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2);
  text-align: left; padding: 10px 14px; background: #FAFBFC; border-bottom: 1px solid var(--bord); }
td { padding: 11px 14px; border-bottom: 1px solid #F1F2F5; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--tranz); }
tbody tr:hover { background: #FAFBFC; }
tr.evidentiat { background: var(--galben-pal); }
tr.evidentiat:hover { background: #FFF3C4; }
@media (max-width: 720px) {
  .tabel-carduri thead { display: none; }
  .tabel-carduri, .tabel-carduri tbody, .tabel-carduri tr, .tabel-carduri td { display: block; width: 100%; }
  .tabel-carduri { border-radius: var(--raza); }
  .tabel-carduri tr { border-bottom: 1px solid var(--bord); padding: 9px 0; }
  .tabel-carduri tr:last-child { border-bottom: 0; }
  .tabel-carduri td { border: 0; padding: 4.5px 14px; }
  .tabel-carduri td[data-eticheta]::before {
    content: attr(data-eticheta); display: block;
    font: 700 .6rem Manrope; letter-spacing: .09em; color: var(--text-3); text-transform: uppercase; margin-bottom: 1px;
  }
  /* Eticheta la stanga, valoarea la dreapta, pe acelasi rand: cardul devine
     de doua ori mai scurt si se citeste ca o chitanta. */
  .tabel-carduri td[data-eticheta] {
    display: flex; flex-wrap: wrap; gap: 2px 14px;
    align-items: baseline; justify-content: space-between; text-align: right;
  }
  .tabel-carduri td[data-eticheta]::before { margin-bottom: 0; flex: 0 0 auto; text-align: left; }
  .tabel-carduri td[data-eticheta] > small { flex: 1 0 100%; text-align: right; }
  .tabel-carduri td[data-eticheta] > br { display: none; }
  /* Ultimul indicator ramas singur pe rand ocupa toata latimea, sa nu para taiat. */
  .grila > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Liste ---------- */
.lista-simpla { list-style: none; margin: 0; padding: 0; }
.lista-simpla li { padding: 11px 2px; border-bottom: 1px solid #F1F2F5; }
.lista-simpla li:last-child { border-bottom: 0; }

/* ---------- Chips (selector copii etc.) ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.chips a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 7px;
  border-radius: 99px; background: var(--alb); border: 1px solid var(--bord-2);
  color: var(--text); font: 600 .84rem Inter; transition: all var(--tranz);
}
.chips a .chip-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 50%; background: #EEF0F4;
  font: 800 .64rem Manrope; color: var(--text-2);
}
.chips a:hover { border-color: var(--carbune); }
.chips a.activ { background: var(--carbune); border-color: var(--carbune); color: #fff; }
.chips a.activ .chip-avatar { background: var(--galben); color: var(--negru); }

/* ---------- Cardul-erou (parinte: urmatoarea lectie) ---------- */
.erou {
  position: relative; overflow: hidden; border: 0; color: var(--negru);
  background: linear-gradient(115deg, #FFD84D 0%, var(--galben) 55%, #F2B900 100%);
  box-shadow: 0 8px 24px rgba(240,180,0,.25);
}
.erou h2, .erou h3 { color: var(--negru); }
.erou .eticheta-erou { font: 800 .64rem Manrope; letter-spacing: .12em; text-transform: uppercase; color: rgba(16,17,20,.6); }
.erou .btn { background: var(--carbune); color: #fff; }
.erou .btn:hover { background: #24262B; }
.erou .btn.secundar { background: rgba(255,255,255,.8); border-color: transparent; color: var(--negru); }
.erou::after {
  content: '♪'; position: absolute; right: -4px; bottom: -32px;
  font-size: 9rem; color: rgba(16,17,20,.06); font-family: Manrope; pointer-events: none;
}
.erou .secundar { color: rgba(16,17,20,.62); }

/* ---------- Disciplina (emoji din date, in chip discret) ---------- */
.emoji-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #F2F3F6; font-size: .95rem; }

/* ---------- Paginile publice: login, inregistrare, resetare ----------
   Doua panouri pe ecran mare; pe telefon, sigla sus si formularul intr-un card.
   Motivul de brand — clapele colorate care se desfac deasupra microfonului din
   sigla — e desenat in CSS, ca sa nu incarcam nicio imagine in plus. */
.scena { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--fundal); }

.scena-brand {
  position: relative; overflow: hidden;
  background: var(--carbune); color: #C2C6CE;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(38px + var(--sus-sigur)) 44px calc(30px + var(--jos-sigur));
}
/* lumina calda din spatele siglei — panoul negru nu ramane plat */
.scena-lumina {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 34%, rgba(255,202,0,.16), transparent 70%),
    radial-gradient(40% 30% at 88% 82%, rgba(28,162,222,.12), transparent 70%);
}
.scena-brand-in { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 22px; text-align: center; }
.scena-sigla { display: block; line-height: 0; }
.scena-sigla img { width: min(268px, 62%); height: auto; }
.scena-mesaj h2 {
  color: #fff; margin: 0 0 10px; font-weight: 800;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.18; letter-spacing: -.028em;
  text-wrap: balance;
}
.scena-mesaj p { color: #98A2B3; margin: 0 auto; max-width: 34ch; font-size: .95rem; line-height: 1.6; text-wrap: pretty; }
.scena-jos { position: relative; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* clapele: acelasi motiv ca in sigla, in cele trei culori ale scolii */
.clape { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.clape i { display: block; width: 6px; border-radius: 99px; background: var(--galben); opacity: .9; }
.clape i:nth-child(1) { height: 40%; background: var(--menta); }
.clape i:nth-child(2) { height: 66%; background: var(--albastru); }
.clape i:nth-child(3) { height: 88%; }
.clape i:nth-child(4) { height: 58%; background: var(--menta); }
.clape i:nth-child(5) { height: 100%; }
.clape i:nth-child(6) { height: 58%; background: var(--albastru); }
.clape i:nth-child(7) { height: 88%; }
.clape i:nth-child(8) { height: 66%; background: var(--menta); }
.clape i:nth-child(9) { height: 40%; background: var(--albastru); }

.scena-subsol { font-size: .76rem; color: #6A6F79; margin: 0; text-align: center; }
.scena-subsol a { color: inherit; text-decoration: underline; }

.scena-panou {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 40px calc(20px + var(--dreapta-sigur)) calc(34px + var(--jos-sigur)) calc(20px + var(--stanga-sigur));
}
.scena-card {
  width: 100%; max-width: 400px;
  background: var(--alb); border: 1px solid var(--bord); border-radius: 18px;
  padding: 28px 26px; box-shadow: 0 1px 2px rgba(16,17,20,.04), 0 18px 44px rgba(16,17,20,.07);
}
.scena-card.lat { max-width: 480px; }
.scena-card h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -.02em; }
.scena-card .sub { color: var(--text-2); margin: 0 0 20px; font-size: .93rem; }
.scena-card label { margin-top: 14px; }
.scena-card label:first-of-type { margin-top: 0; }
.scena-card .actiuni { margin-top: 20px; }
.doar-telefon { display: none; }

/* legaturile de sub formular */
.login-legaturi {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord);
  font-size: .875rem;
}
.login-legaturi a { font-weight: 600; }
.login-legaturi .secundar { font-weight: 500; color: var(--text-2); }

@media (min-width: 900px) {
  .scena { grid-template-columns: minmax(420px, 46%) 1fr; }
  .scena-panou { padding: 40px; }
}
@media (max-width: 899px) {
  /* Pe telefon nu mai exista panou negru gol: sigla sta pe fundalul clar,
     deasupra cardului cu formularul. */
  .scena { display: block; padding-top: var(--antet-h); }
  .scena-brand {
    background: transparent; color: var(--text-2);
    padding: 22px 20px 4px; display: block;
  }
  .scena-lumina, .scena-mesaj, .scena-jos { display: none; }
  .scena-brand-in { gap: 0; }
  .scena-sigla img { width: 138px; }
  .scena-panou { padding: 10px 18px calc(30px + var(--jos-sigur)); gap: 14px; }
  .scena-card { padding: 22px 20px; border-radius: 16px; }
  .scena-card h1 { font-size: 1.35rem; }
  .doar-telefon { display: block; }
}
@media (max-height: 620px) and (max-width: 899px) {
  .scena-sigla img { width: 84px; }
  .scena-brand { padding-top: 14px; }
}

/* ---------- Program / liste de lectii ---------- */
.zi-titlu { font: 700 .7rem Manrope; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin: 18px 0 8px; }
.lectie-rand { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 2px; border-bottom: 1px solid #F1F2F5; }
.lectie-rand > * { min-width: 0; }
.lectie-rand:last-child { border-bottom: 0; }
.ora-pastila { font: 800 .78rem Manrope; background: #F2F3F6; border-radius: 8px; padding: 5px 8px; white-space: nowrap; color: var(--negru); }

/* ---------- Cardul unei lectii/sesiuni ---------- */
.card.disciplina { border-left: 3px solid var(--galben); }

/* ---------- Selectorul de prezenta (1 tap / elev) ---------- */
.sel-status { display: flex; gap: 6px; flex-wrap: wrap; }
.sel-status button {
  flex: 1; min-width: 84px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--bord-2); background: var(--alb); color: var(--text);
  font: 600 .8rem Inter; cursor: pointer; transition: all var(--tranz);
}
.sel-status button:hover { border-color: var(--text-3); }
.sel-status button.activ { color: #fff; border-color: transparent; }
.sel-status button.activ.prezent { background: var(--verde); }
.sel-status button.activ.absent { background: var(--rosu); }
.sel-status button.activ.motivat { background: var(--albastru); }
.sel-status button.activ.recup { background: var(--menta-inchis); }

/* ---------- Stele evaluare ---------- */
.stele { display: inline-flex; gap: 2px; }
.stele input { display: none; }
.stele label { font-size: 1.3rem; color: #D5DAE1; cursor: pointer; margin: 0; }
.stele label.plina, .stele label:hover, .stele label:hover ~ label { color: var(--galben); }

.ic-disc { width: 16px; height: 16px; color: var(--text-3); vertical-align: -3px; margin-right: 1px; }

.actiuni.sticky-jos {
  position: sticky; bottom: 12px; z-index: 60; margin-top: 18px;
  background: rgba(255,255,255,.93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bord); border-radius: var(--raza); padding: 10px 14px; box-shadow: var(--umbra-2);
}

/* ---------- Utilitare ---------- */
.text-centru { text-align: center; }
.separator { border: 0; border-top: 1px solid var(--bord); margin: 16px 0; }
.avatar-mic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: #EEF0F4;
  font: 800 .72rem Manrope; color: var(--text-2); flex: 0 0 auto;
}
.eticheta-rol { font: 600 .68rem Inter; padding: 2.5px 9px; border-radius: 99px; }
.rol-admin { background: var(--carbune); color: var(--galben); }
.rol-profesor { background: var(--albastru-pal); color: var(--albastru-inchis); }
.rol-parinte { background: #EEF0F4; color: var(--text-2); }

::selection { background: var(--galben); color: var(--negru); }
:focus-visible { outline: 2.5px solid var(--albastru); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Compatibilitate cu clase mai vechi inca folosite in pagini */
.login-cutie { max-width: 420px; margin: 6vh auto 0; }
.logo-mare { display: block; margin: 0 auto 14px; height: 96px; }
.meniu-admin { display: none; }
.aspect-admin { display: block; }

/* P2: alegerea disciplinelor la inscriere */
.alegere-discipline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.disc-optiune {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 14px; border: 1px solid var(--bord-2); border-radius: 99px;
  background: var(--alb); font: 600 .88rem Inter; color: var(--text);
  transition: border-color var(--tranz), background var(--tranz);
}
.disc-optiune:hover { border-color: var(--galben); }
.disc-optiune input { margin: 0; width: 16px; height: 16px; accent-color: var(--auriu); }
.disc-optiune:has(input:checked) { background: var(--galben-pal); border-color: var(--galben); }

/* P24: calendarul profesorului (zi / saptamana / luna) */
.cal-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font: 500 .78rem Inter; color: var(--text-2); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-p { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-p.cal-grup { background: var(--galben); }
.cal-p.cal-individuala { background: var(--albastru); }
.cal-p.cal-recuperare { background: var(--menta); }
.cal-p.cal-liber { background: #DDE2E8; }
.cal-p.cal-concediu { background: var(--rosu); }
.cal-p.cal-generala { background: var(--ocru); }
.cal-p.cal-eveniment { background: #7C4DCB; }
.cal-p.cal-anulata { background: repeating-linear-gradient(45deg, var(--rosu) 0 3px, #FFF 3px 6px); }

.cal-grila { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cal-grila { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
@media (min-width: 1100px) { .cal-grila.cal-luna { grid-template-columns: repeat(7, 1fr); gap: 6px; } }
.cal-zi {
  background: var(--alb); border: 1px solid var(--bord); border-radius: var(--raza-m);
  padding: 10px; min-height: 92px; display: flex; flex-direction: column; gap: 5px;
}
.cal-zi.goala { background: #FCFCFD; }
.cal-zi.azi { border-color: var(--galben); box-shadow: 0 0 0 2px var(--galben-pal); }
.cal-zi-cap { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.cal-zi-nr { font: 800 1rem Manrope; color: var(--negru); }
.cal-zi-nume { font: 600 .68rem Inter; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.cal-liber-text { color: var(--text-3); font-size: .8rem; }
.cal-ev {
  display: block; padding: 6px 8px; border-radius: 7px; border-left: 3px solid var(--bord-2);
  background: #F6F7F9; color: var(--text); text-decoration: none; font-size: .8rem; line-height: 1.35;
}
a.cal-ev:hover { background: #EEF0F4; text-decoration: none; }
.cal-ev .cal-ora { display: block; font: 700 .72rem Inter; color: var(--text-2); }
.cal-ev .cal-titlu { display: block; font-weight: 600; overflow-wrap: anywhere; }
.cal-ev .cal-det { display: block; font-size: .72rem; color: var(--text-2); }
.cal-ev.cal-grup { border-left-color: var(--galben); background: var(--galben-pal); }
.cal-ev.cal-individuala { border-left-color: var(--albastru); background: var(--albastru-pal); }
.cal-ev.cal-recuperare { border-left-color: var(--menta); background: var(--menta-pal); }
.cal-ev.cal-liber { border-left-color: #C9CFD8; background: #F4F6F8; color: var(--text-2); }
.cal-ev.cal-concediu { border-left-color: var(--rosu); background: var(--rosu-pal); }
.cal-ev.cal-generala { border-left-color: var(--ocru); background: #FFF3E2; }
.cal-ev.cal-eveniment { border-left-color: #7C4DCB; background: #EDE6FA; }
.cal-ev.cal-anulata { border-left-color: var(--rosu); background: #FAFAFB; text-decoration: line-through; color: var(--text-2); }

/* ---------- Bara de filtre ----------
   Doua coloane pe telefon, mai multe pe ecran mare — nu un teanc de 6 selecturi. */
.filtre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; }
.filtre label { font-size: .74rem; }

/* Luna intreaga pe telefon: zilele goale se strang la un rand subtire,
   ca sa nu derulezi 31 de casete goale ca sa ajungi la ziua cu lectii. */
@media (max-width: 759px) {
  .cal-luna .cal-zi { min-height: 0; }
  .cal-luna .cal-zi.goala { padding: 7px 10px; opacity: .6; }
  .cal-luna .cal-zi.goala .cal-liber-text { display: none; }
}

/* ---------- Atingere pe telefon si tableta ----------
   Pe ecran tactil orice buton trebuie sa fie destul de mare cat sa fie nimerit
   din prima. Sub 36px degetul rateaza. Se aplica doar la dispozitivele tactile,
   ca pe desktop butoanele mici sa ramana compacte. */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .btn.mic { min-height: 36px; padding: 8px 12px; font-size: .8rem; }
  .nav-vedere button { min-height: 40px; padding: 9px 12px; }
  .btn-ic { min-width: 40px; min-height: 40px; }
  input, select, textarea { min-height: 42px; font-size: 16px; }
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 20px; height: 20px; }
  .sel-status button { min-height: 40px; }
  .nav-item { padding: 11px 12px; }
}

/* ---------- Plasa de siguranta pentru latime ----------
   Nimic nu are voie sa faca pagina mai lata decat ecranul: tabelele, blocurile
   de cod si textele foarte lungi se ocupa singure de spatiul lor. */
.pagina, .zona, .card, .panou { min-width: 0; }
.card > table, .panou > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel-scroll table { min-width: 100%; }
.lista-simpla li, .lectie-rand { overflow-wrap: break-word; }
/* Titlul lectiei nu se strange pana se rupe cuvantul: mai degraba coboara randul. */
.rand-titlu { flex: 1 1 10rem; min-width: 0; overflow-wrap: break-word; }

/* ---------- Semnătura constructorului ----------
   Apare în bara laterală (desktop), în foaia de meniu (telefon) și pe paginile
   publice — deci în orice ecran al aplicației, discret, fără să concureze cu marca. */
.semnatura {
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  padding: 10px 6px 2px; text-decoration: none !important;
  font: 500 .72rem Inter; color: #6A6F79; letter-spacing: .01em;
}
.semnatura strong { font: 700 .78rem Manrope, Inter, sans-serif; color: #9AA1AB; letter-spacing: -.01em; }
.semnatura:hover strong { color: var(--galben); }
.foaie .semnatura { color: var(--text-3); padding-bottom: 14px; }
.foaie .semnatura strong { color: var(--text-2); }
.foaie .semnatura:hover strong { color: var(--auriu); }
.scena-brand .semnatura { color: #5A5F68; margin-top: 4px; }
.scena-panou .semnatura { color: var(--text-3); }
.scena-panou .semnatura strong { color: var(--text-2); }
.scena-panou .semnatura:hover strong { color: var(--auriu); }
.despre-app a { font-weight: 600; }

/* Pastilele din „Activitate recentă" — fiecare fel de eveniment are culoarea lui,
   ca ochiul să scaneze lista fără să citească fiecare rând. */
.pastila {
  display: inline-block; font: 700 .68rem/1.5 Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; margin-right: 6px;
  vertical-align: 1px; background: #E9EDF2; color: var(--text-2);
}
.pastila-absenta { background: var(--rosu-pal); color: #8A2B2B; }
.pastila-rezervare { background: var(--menta-pal); color: #17604B; }
.pastila-plata { background: var(--galben-pal); color: #7A5A00; }
.pastila-cerere { background: var(--albastru-pal); color: #1B4B7A; }
.pastila-eveniment { background: #EDE6FA; color: #513089; }
.pastila-modificare { background: #E9EDF2; color: var(--text-2); }

/* „+ programează" din calendar: discret până se trece cu mouse-ul peste zi,
   dar mereu vizibil pe telefon, unde nu există hover. */
.cal-adauga {
  display: block; margin-top: 6px; padding: 4px 6px; border-radius: 8px;
  border: 1px dashed var(--bord); text-align: center;
  font: 600 .74rem Inter, sans-serif; color: var(--text-3); text-decoration: none;
  opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.cal-zi:hover .cal-adauga, .cal-adauga:focus-visible { opacity: 1; }
.cal-adauga:hover { color: var(--text-1); border-color: var(--text-3); text-decoration: none; }
@media (pointer: coarse) {
  .cal-adauga { opacity: 1; padding: 8px 6px; }
}

/* Devansarea: un elev care își ia lecția mai devreme apare la ora altcuiva.
   Nu e un tip de lecție separat, ci un semn pe lecția existentă — de aceea e
   o dungă în colț, nu o culoare de fundal care ar ascunde felul lecției. */
.cal-p.cal-devansare { background: var(--violet, #7C4DCB); }
.cal-ev.are-devansare { position: relative; }
.cal-ev.are-devansare::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 12px 12px 0; border-style: solid;
  border-color: transparent #7C4DCB transparent transparent;
  border-top-right-radius: 6px;
}