/* Limbajul vizual al Atelierului de Circuite, pentru platformă.
   Valorile NU sunt reinventate: sunt copiate din :root-ul simulatorului
   (index.html), ca ecranele platformei și planșa să pară același produs.
   Când simulatorul își schimbă paleta, fișierul ăsta se actualizează după el. */

:root{
  --paper:#ECEDE7; --paper-2:#F5F4EE; --card:#FBFBF7; --board:#E9DFC9; --board-edge:#C9B98F;
  --ink:#16202B; --ink-soft:#586470; --ink-faint:#6E7885;
  --line:#D4D8D0; --line-strong:#C2C7BD; --hole:#B4A882; --hole-hi:#8E845F;
  --accent:#E8632A; --accent-ink:#B8461A; --live:#0F9E8C; --pos:#D64545; --neg:#3B6FB0;
  /* Scara accentului, 50…900, generată din --accent. Filament are nevoie de
     nuanțe, nu de o singură culoare; treapta 700 e --accent-ink de mai sus,
     ca cele două să nu poată diverge. */
  --accent-50:#FDEDE4;  --accent-100:#FBD9C7; --accent-200:#F7B694;
  --accent-300:#F18F5D; --accent-400:#EC7540; --accent-500:#E8632A;
  --accent-600:#CC5220; --accent-700:#B8461A; --accent-800:#8C3413;
  --accent-900:#5E220C;
  --accent-rgb:232,99,42;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* pasul real al găurilor de pe breadboard-ul simulatorului */
  --pas-gauri:28px;
}
@media (prefers-color-scheme:dark){:root{--paper:#0F151C;--paper-2:#141C25;--card:#182230;--board:#20303B;--board-edge:#13232C;--ink:#ECEFEA;--ink-soft:#9AA6AE;--ink-faint:#8A97A2;--line:#232D38;--line-strong:#2E3B47;--hole:#0C161D;--hole-hi:#3F5563;--accent:#FF7A3D;--accent-ink:#FF9866;--live:#2FD0B8;--pos:#F1615F;--neg:#5B8FD6;}}
:root[data-theme="light"]{--paper:#ECEDE7;--paper-2:#F5F4EE;--card:#FBFBF7;--board:#E9DFC9;--board-edge:#C9B98F;--ink:#16202B;--ink-soft:#586470;--ink-faint:#6E7885;--line:#D4D8D0;--line-strong:#C2C7BD;--hole:#B4A882;--hole-hi:#8E845F;--accent:#E8632A;--accent-ink:#B8461A;--live:#0F9E8C;--pos:#D64545;--neg:#3B6FB0;--accent-50:#FDEDE4;--accent-100:#FBD9C7;--accent-200:#F7B694;--accent-300:#F18F5D;--accent-400:#EC7540;--accent-500:#E8632A;--accent-600:#CC5220;--accent-700:#B8461A;--accent-800:#8C3413;--accent-900:#5E220C;--accent-rgb:232,99,42;}
:root[data-theme="dark"]{--paper:#0F151C;--paper-2:#141C25;--card:#182230;--board:#20303B;--board-edge:#13232C;--ink:#ECEFEA;--ink-soft:#9AA6AE;--ink-faint:#8A97A2;--line:#232D38;--line-strong:#2E3B47;--hole:#0C161D;--hole-hi:#3F5563;--accent:#FF7A3D;--accent-ink:#FF9866;--live:#2FD0B8;--pos:#F1615F;--neg:#5B8FD6;}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---- semnătura: cardul stă pe breadboard ----
   Găurile sunt desenate cu pasul real din simulator (HS=28). E singurul
   element decorativ din pagină; restul rămâne liniștit. */
.plansa{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:
    radial-gradient(circle at center, var(--hole) 1.6px, transparent 1.7px)
      0 0 / var(--pas-gauri) var(--pas-gauri),
    var(--board);
  background-blend-mode:normal;
}
@media (prefers-reduced-motion:no-preference){
  .plansa > *{animation:urca .28s ease-out both}
}
@keyframes urca{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- cardul, identic cu .modalcard din simulator ---- */
.card-atelier{
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:16px;
  width:100%;
  max-width:440px;
  padding:24px 26px 26px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.card-atelier.lat{max-width:560px}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-ink);
  font-weight:600;
  margin:0 0 2px;
}
.card-atelier h1{
  font-size:clamp(24px,3.2vw,31px);
  line-height:1.05;
  margin:.1em 0 .3em;
  font-weight:800;
  letter-spacing:-.026em;
  text-wrap:balance;
}
.lead{font-size:15px;color:var(--ink-soft);margin:0 0 18px;max-width:64ch}

/* ---- câmpuri ----
   Simulatorul n-are formulare, deci astea sunt noi — dar derivate din
   .tool: același fundal, aceeași linie, același radius, aceeași tranziție. */
.camp{margin-bottom:14px}
.camp label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:5px;
}
.camp .ajutor{font-size:12.5px;color:var(--ink-faint);font-weight:400}
/* Textul de sub un câmp, în /elev/intrare („E scris pe bilețelul primit…").
   Clasa era scrisă în șablon dar definită NICIODATĂ — exista doar ca `.rand .sub`,
   care nu ajunge acolo — deci explicația se randa la mărimea textului principal și
   arăta ca un paragraf, nu ca un ajutor. Aceleași valori ca `.ajutor` de deasupra. */
.camp .sub{margin:5px 0 0;font-size:12.5px;color:var(--ink-faint);font-weight:400}
.camp input{
  width:100%;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 12px;
  transition:border-color .12s,box-shadow .12s;
}
.camp input:hover{border-color:var(--line-strong)}
.camp input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.camp input.cod{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:17px;
  font-weight:600;
}
.camp input.pin{
  font-family:var(--font-mono);
  letter-spacing:.5em;
  font-size:19px;
  text-align:center;
  max-width:9ch;
}
.eroare{margin:5px 0 0;font-size:13px;font-weight:600;color:var(--pos)}
.camp input[aria-invalid="true"]{border-color:var(--pos)}

/* ---- butoane, copiate din .tool / .tool.act ---- */
.tool{
  cursor:pointer;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  transition:border-color .12s,background .12s,transform .06s;
  touch-action:manipulation;
}
.tool:hover{border-color:var(--line-strong)}
.tool:active{transform:translateY(1px)}
.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool.act{color:#fff;background:var(--accent);border-color:var(--accent)}
.tool.act:hover{filter:brightness(1.05)}
.tool.learn{color:#fff;background:var(--live);border-color:var(--live);font-weight:700}
.tool.learn:hover{filter:brightness(1.06)}
.tool.mare{font-size:15px;padding:11px 18px;font-weight:700;width:100%;justify-content:center}
.tool.ghost{color:var(--ink-soft);background:transparent}
/* display:inline-flex de mai sus calcă atributul `hidden`, care altfel n-ar
   ascunde nimic. Capcană clasică; verificată cu ochii, nu de teste. */
.tool[hidden]{display:none}

.subsol{margin:16px 0 0;font-size:13.5px;color:var(--ink-soft)}
.subsol a{color:var(--accent-ink);font-weight:700;text-decoration:none}
.subsol a:hover{text-decoration:underline}

/* ---- rând de listă, ca .lvl din traseul de învățare ---- */
.rand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:8px;
  background:var(--paper-2);
}
.rand .nume{font-weight:700}
.rand .sub{font-size:13px;color:var(--ink-soft)}

/* ---- link spre portalul Stripe, din /cont ----
   Aceleași cărămizi ca .comutator-ritm și .tool.ghost: pastilă cu bordură,
   fond neutru — o a doua acțiune, nu una care concurează cu „Vezi elevii". */
.buton-secundar{
  display:inline-flex;align-items:center;margin-top:4px;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--ink-soft);background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;text-decoration:none;
  transition:border-color .12s,color .12s;
}
.buton-secundar:hover{border-color:var(--line-strong);color:var(--ink)}

/* ---- bara de deasupra planșei ----
   Aceleași componente ca restul: card, linie, .tool. Subțire, ca planșa să
   păstreze aproape toată fereastra. */
.bara{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:7px 12px;
  background:var(--card);
  border-bottom:1px solid var(--line-strong);
}
.bara .cine{font-weight:800;letter-spacing:-.01em;margin-right:2px}
.bara .cine .porecla{font-weight:600;color:var(--ink-soft);font-size:13px}
.bara .impinge{margin-left:auto}
.bara select{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:7px 9px;
  max-width:200px;
}
.bara select:hover{border-color:var(--line-strong)}
/* Starea salvării, în atelier: bara platformei nu mai există acolo (controalele
   ei stau în pilula simulatorului), deci mesajul n-are pe ce sta. Plutește peste
   cadru, aproape de butonul care l-a stârnit, și pleacă singur. Gol, nu se vede
   deloc — `:empty`, nu un `hidden` de întreținut din JS. */
.stare-plutitoare{
  position:fixed;top:84px;right:24px;z-index:30;margin:0;
  max-width:320px;padding:9px 13px;border-radius:11px;
  font-size:13px;font-weight:700;line-height:1.35;
  color:var(--ink-soft);background:var(--card);
  border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.14);
}
.stare-plutitoare:empty{display:none}
.stare-plutitoare.bine{color:var(--live);border-color:var(--live)}
.stare-plutitoare.rau{color:var(--pos);border-color:var(--pos)}

.bara .stare{font-size:12.5px;color:var(--ink-soft);min-width:1px}
.bara .stare.bine{color:var(--live);font-weight:700}
.bara .stare.rau{color:var(--pos);font-weight:700}

/* ---- pagină de lucru pentru adult ---- */
.pagina{max-width:1000px;margin:0 auto;padding:26px 20px 60px}
/* O pagină cu două coloane are nevoie de mai mult decât una cu o singură
   coloană de text: la 1000px, șina laterală ar fi mâncat din grila de
   circuite până la trei pe rând. */
.pagina-lata{max-width:1180px}
.pagina h1{font-size:clamp(24px,3.2vw,33px);line-height:1.05;margin:.1em 0 .3em;font-weight:800;letter-spacing:-.026em}
.anunt{
  margin:0 0 16px;padding:10px 13px;font-size:14px;font-weight:600;
  color:var(--live);background:color-mix(in srgb,var(--live) 9%,var(--card));
  border:1px solid var(--live);border-radius:11px;
}
/* Cutia care ține tabelul de șapte coloane: plasa de siguranță, NU prima
   linie de apărare. Cauza reală a strâmtorării (șina stângă de 236px care
   rămânea prea mult timp) e reparată la sursă în pragul de la 1080px, mai
   jos — după reparația aia, banda pe două coloane e doar 1081–1180px, unde
   panoul are 753–852px, cu mult peste cei ~600px necesari. Cutia rămâne
   totuși: un ecran neobișnuit de îngust (zoom, font mărit de-un cititor de
   ecran) tot poate strânge panoul sub necesar, iar atunci tabelul glisează
   DOAR el, nu împinge toată pagina în lateral. */
.tabel-glisant{
  overflow-x:auto;
  /* Spațiu sub tabel, ca inelul de focus de pe ultimul buton dintr-un rând
     de jos să nu se taie la marginea cutiei care glisează. */
  padding-bottom:6px;
}
/* `overflow-x:auto` de mai sus face ca, din specificația CSS, `overflow-y`
   efectiv să devină tot `auto` (un ax nevizibil trage și celălalt după el) —
   iar meniul „⋯" al unui rând (`.meniu-rand[open] > .continut`, poziționat
   absolut) sau chiar butoanele de acțiune din ultima coloană puteau ieși din
   cutia vizibilă fără nicio cale de-a fi văzute, doar glisate orbește.
   Cât timp un meniu de rând e deschis, cutia nu mai taie nimic — se pierde
   scrollul orizontal al tabelului pentru durata aia, dar utilizatorul
   operează un meniu, nu scanează coloane, deci schimbul e bun. `:has()` nu e
   o unealtă nouă aici: fișierul îl mai folosește de două ori
   (`.card-circuit:has(.card-link:hover)`, `.pastila-bifa:has(input:checked)`),
   deci e un tipar deja stabilit, nu o dependență adăugată pentru cazul ăsta. */
.tabel-glisant:has(.meniu-rand[open]){overflow:visible}
.tabel{width:100%;border-collapse:collapse;margin-top:6px}
.tabel th{
  text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-faint);padding:8px 10px;
  border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
.tabel td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabel tr.arhivat td{opacity:.5}
.tabel .elev{font-weight:700}
.tabel .elev small{display:block;font-weight:600;color:var(--ink-soft);font-size:12.5px}
/* Focul zilelor, lângă numele elevului. Pastilă, nu coloană nouă: tabelul are
   deja opt coloane, iar cel din panoul grupei s-a dovedit măsurat că umple
   cutia la fix la 1280px. `inline-block` cu `tabular-nums`, ca de la 9 la 10
   zile numele să nu se mai miște. */
.tabel .elev .foc{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-ink);background:rgba(var(--accent-rgb),.12);vertical-align:middle}
.tabel .actiuni{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.gol{padding:22px;text-align:center;color:var(--ink-soft);border:1px dashed var(--line-strong);border-radius:12px}

/* ---- câmpuri Breeze, aduse în limbajul atelierului ----
   Vederile de autentificare vin din Breeze și folosesc componentele lui.
   În loc să le rescriem pe toate, le dăm componentelor clasele noastre. */
.camp-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px}
.camp-input{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;transition:border-color .12s,box-shadow .12s;
}
.camp-input:hover{border-color:var(--line-strong)}
.camp-input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}

/* ---- cele trei drumuri de pe pagina de intrare ---- */
.drumuri{display:flex;flex-direction:column;gap:9px;margin-top:20px}

/* ---- avatarul, prieteni, profil ---- */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--paper-2);border:1px solid var(--line-strong);flex:0 0 auto;
}
.avatar svg{width:22px;height:22px;display:block}
.avatar.mare{width:72px;height:72px}
.avatar.mare svg{width:46px;height:46px}
.avatar-accent{background:color-mix(in srgb,var(--accent) 16%,var(--card));border-color:var(--accent)}
.avatar-live{background:color-mix(in srgb,var(--live) 16%,var(--card));border-color:var(--live)}
.avatar-pos{background:color-mix(in srgb,var(--pos) 16%,var(--card));border-color:var(--pos)}
.avatar-neg{background:color-mix(in srgb,var(--neg) 16%,var(--card));border-color:var(--neg)}
.avatar-board{background:var(--board);border-color:var(--board-edge)}
.avatar-ink{background:color-mix(in srgb,var(--ink) 12%,var(--card));border-color:var(--ink-soft)}

.eu{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.eu-nume{font-weight:800;letter-spacing:-.01em;font-size:14px}
.eu:hover .avatar{border-color:var(--accent)}

.pastila{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:800;
}

/* ── Raftul de insigne ────────────────────────────────────────────────────
   GRILĂ, nu rând care se rupe. Cu 21 de insigne de lățimi diferite, rândul
   ieșea ragged: ultimul rând rămânea scurt, cardurile nu se aliniau pe
   coloane, și ochiul citea o grămadă, nu o colecție. Celule egale se pot
   număra din privire — iar numărul e chiar ce caută copilul aici.

   Insigna neluată NU se ascunde. Era pe opacity .35 și se topea în hârtie,
   așa că raftul plin arăta gol și trist. Acum se stinge cât să se citească
   drept LOC, nu gol: e ce urmează, nu ce lipsește. */
.raft{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:6px;margin:4px 0 18px;
}
.insigna{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  padding:9px 5px 8px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper-2);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.insigna .fata{font-size:19px;line-height:1;filter:grayscale(1);opacity:.5}
.insigna .lbl{font-size:10px;font-weight:800;color:var(--ink-soft);text-align:center;line-height:1.2}

/* Câștigată: culoarea vine ÎNAPOI în emoji, cardul se ridică de pe hârtie și
   primește bulina de confirmare. Ridicarea la hover e numai a ei — un loc gol
   n-are ce sărbători. */
.insigna.castigata{
  border-color:color-mix(in srgb,var(--live) 40%,var(--line));
  background:color-mix(in srgb,var(--live) 7%,var(--card));
}
.insigna.castigata .fata{filter:none;opacity:1}
.insigna.castigata .lbl{color:var(--ink)}
.insigna.castigata::after{
  content:"✓";position:absolute;top:4px;right:5px;
  width:12px;height:12px;border-radius:50%;display:grid;place-items:center;
  background:var(--live);color:#fff;font-size:7.5px;font-weight:900;line-height:1;
}
.insigna.castigata:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.07)}

/* Numai profilul propriu arată NUMELE insignei (poate lung, ex. „Bateria din
   grădină"); raftul unui prieten și fișa tipărită arată doar numărul lecției
   și n-au nevoie de mai mult loc — .raft singur rămâne pe coloane înguste. */
.raft-nume{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.raft-nume .insigna{padding:10px 7px 9px}
.raft-nume .insigna .lbl{font-size:10.5px;line-height:1.2}
.raft-nume .insigna .cum{
  display:block;font-size:9px;font-weight:700;letter-spacing:.02em;
  color:var(--ink-faint);text-align:center;
}

/* Câte, din câte — deasupra raftului. Bara e o citire, nu o decorație: e
   singurul loc de pe pagină de unde se vede cât a mai rămas. */
.raft-cap{display:flex;align-items:center;gap:12px;margin:2px 0 12px;flex-wrap:wrap}
.raft-cifra{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap}
.raft-cifra small{font-size:12.5px;font-weight:700;color:var(--ink-faint)}
.raft-rail{
  flex:1;min-width:130px;max-width:320px;height:6px;
  border-radius:999px;background:var(--line);overflow:hidden;
}
.raft-rail i{display:block;height:100%;border-radius:999px;background:var(--live)}

@media (prefers-reduced-motion:reduce){
  .insigna{transition:none}
  .insigna.castigata:hover{transform:none}
}

.alegere-piesa{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 4px}
.alegere-piesa button{cursor:pointer;background:none;border:none;padding:0}
.alegere-piesa .avatar{width:42px;height:42px}
.alegere-piesa .avatar svg{width:26px;height:26px}
.alegere-piesa button[aria-pressed="true"] .avatar{box-shadow:0 0 0 2px var(--accent)}

.cod-prieten{
  font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:.22em;
  color:var(--accent-ink);background:var(--paper-2);
  border:1px dashed var(--line-strong);border-radius:11px;
  padding:11px 14px;display:inline-block;
}
.sectiune{margin:0 0 26px}
.sectiune h2{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}

/* ---- comutatorul lunar/anual din vitrina de pachete ----
   Aceleasi carămizi ca .tool / .tool.act: pastilă cu bordură, iar ritmul ales
   capătă fondul accent — acelasi limbaj ca orice control de-o-singură-alegere
   din restul paginii, nu un pattern nou. */
.comutator-ritm{display:flex;gap:8px;margin:0 0 18px}
.comutator-ritm a{
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;text-decoration:none;
  transition:border-color .12s,background .12s,color .12s;
}
.comutator-ritm a:hover{border-color:var(--line-strong)}
.comutator-ritm a.ales{color:#fff;background:var(--accent);border-color:var(--accent)}
.comutator-ritm small{font-weight:400;opacity:.85}

/* Intervalul stă lângă preț fără să-l concureze: mai mic, mai palid — ca o
   etichetă, nu ca o a doua cifră. */
.pe-interval{font-size:11.5px;color:var(--ink-faint)}

/* ---- marca din bara, tablou de bord ---- */
.bara .marca{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);margin-right:4px}
.bara .marca-punct{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.bara .marca-text{font-weight:800;letter-spacing:-.01em;font-size:14px}
.bara.subtire{padding:5px 12px}
.bara-eu{display:flex;align-items:center;gap:8px}
.anunt.rau{color:var(--pos);border-color:var(--pos);background:color-mix(in srgb,var(--pos) 8%,var(--card))}

.continua{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border-radius:14px;
  background:color-mix(in srgb,var(--live) 8%,var(--card));
  border:1px solid var(--live);
}
.continua .eticheta{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)}
.continua .mare{margin:2px 0 0;font-size:20px;font-weight:800;letter-spacing:-.02em}
/* Butonul barei de lecție își capătă mărimea AICI, nu din `.tool.mare`:
   aceea are `width:100%` și e folosită pe butoane de formular, unde lățimea
   plină chiar se vrea. Înainte, butonul o împrumuta și apoi o anula cu un
   `style="width:auto"` inline — semnul că folosea clasa nepotrivită. */
.continua .tool{font-size:15.5px;padding:12px 16px;font-weight:800}
/* Scoped pe `.continua`, NU global: `.impinge` mai apare în șase locuri
   (prieteni, cont, licență) unde regula `.bara .impinge` e la fel de moartă
   ca era aici. Globalizată, ar muta butoane pe ecrane din afara lucrării. */
.continua .impinge{margin-left:auto}

/* ── Acasă la elev: două coloane ───────────────────────────────────────────
   Biblioteca la stânga, cifrele și mementoul la dreapta. Pragul e 1000px, nu
   un breakpoint rotund luat de undeva: sub el, șina de 296px ar lăsa grilei
   sub 600px, adică două circuite pe rând — mai puțin decât o singură coloană.
   Șina se lipește sus, ca mementoul să rămână citibil cât derulezi prin
   circuite. */
.acasa{display:grid;gap:20px}
.acasa > .continua{grid-column:1 / -1}
.acasa-main{min-width:0}
.acasa-main > .sectiune:last-child{margin-bottom:0}
.acasa-cifre .cifre{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.acasa-cifre .cifra{flex:none}
/* Mementoul și cardul de profil sunt două cărți diferite, nu un bloc: fără
   distanță între ele, cardul se citea ca subsolul mementoului. */
.acasa-memento{display:flex;flex-direction:column;gap:18px}

/* Pe lat, cele două blocuri din dreapta se AȘAZĂ, nu se reordonează: rândurile
   sunt numite explicit, iar biblioteca ține coloana stângă peste amândouă.
   Ordinea din sursă (cifre, bibliotecă, memento) rămâne cea bună pe telefon. */
@media (min-width:1000px){
  /* `auto auto 1fr`, nu rânduri implicite: biblioteca se întinde pe rândurile
     2-3, iar fără înălțimi declarate surplusul ei se împărțea între ele —
     rândul cifrelor creștea la jumătate de bibliotecă și mementoul aluneca
     tocmai la mijlocul paginii, cu o gaură deasupra. */
  .acasa{
    grid-template-columns:minmax(0,1fr) 296px;
    grid-template-rows:auto auto 1fr;
    align-items:start;
  }
  .acasa-cifre{grid-column:2;grid-row:2}
  .acasa-main{grid-column:1;grid-row:2 / -1}
  .acasa-memento{grid-column:2;grid-row:3}
}

/* ── Cardul de profil din șina laterală ───────────────────────────────────
   Un card, nu un link: aceleași cărămizi ca restul șinei (hârtie, chenar
   subțire, colț de 14px), ca ochiul să nu-l citească drept text rătăcit în
   colț — ce era, de fapt. */
.card-profil{
  display:block;text-decoration:none;color:inherit;
  padding:13px 14px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--line);
  transition:border-color .14s ease,transform .14s ease;
}
.card-profil:hover{border-color:var(--accent);transform:translateY(-1px)}
.card-profil:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-profil-cap{display:flex;align-items:center;gap:10px}
.card-profil-text{display:flex;flex-direction:column;min-width:0}
.card-profil-text b{font-size:13px;font-weight:800;letter-spacing:-.01em}
.card-profil-text > span{font-size:11.5px;font-weight:600;color:var(--ink-faint)}
.card-profil-raft{display:flex;align-items:center;gap:5px;margin-top:11px;flex-wrap:wrap}
.card-profil-insigna{
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:var(--card);border:1px solid var(--line);
}
/* Fără nicio insignă câștigată, raftul arată ce VINE — deci stins, ca pe raftul
   mare din profil, unde aceleași fețe stau la .5. */
.card-profil-raft.necastigate .card-profil-insigna{filter:grayscale(1);opacity:.45}
.card-profil-rest{font-size:11px;font-weight:800;color:var(--ink-faint)}
.card-profil-indemn{display:block;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--ink-faint)}

/* ── Mementoul makerului (elev/partiale/memento.blade.php) ────────────────
   Singurul lucru cald de pe o pagină altfel numerică. Culoarea vine tot din
   accentul atelierului, nu din pastelurile de pe learning.eaea.ro: aici ar fi
   fost al șaptelea ton pe ecran. Emoji-urile de pe pastile duc singure
   culoarea, deci pastilele rămân toate la fel. */
.memento{
  padding:15px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
}
.memento .eticheta{
  margin:0;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent-ink);
}
.memento .eticheta-2{margin-top:14px;color:var(--ink-faint)}
.memento .vorba{margin:7px 0 0;font-size:13.5px;line-height:1.5;font-weight:600;color:var(--ink)}
.super{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0;padding:0;list-style:none}
.super li{
  font-size:11.5px;font-weight:700;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px 9px;
}

.cifre{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.cifra{
  flex:1 1 130px;padding:13px 15px;border-radius:12px;
  background:var(--paper-2);border:1px solid var(--line);
}
.cifra b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.cifra b small{font-size:15px;font-weight:700;color:var(--ink-faint)}
.cifra span{font-size:12.5px;color:var(--ink-soft);font-weight:600}

/* Varianta de pe /elev: cifrele nu mai sunt panoul principal al paginii —
   biblioteca de circuite e — deci stau subțiate, sub bara de lecție, nu ca
   un bloc greu care concurează cu grila de dedesubt. */
/* Flacăra stinsă de pe pagina copilului: același loc, aceeași mărime, doar
   fără foc în ea. Opacitate, nu altă emoji — o flacără gri nu există în toate
   fonturile de sistem, iar un simbol schimbat ar rupe legătura cu ce vede în
   simulator. */
.cifra b.foc-stins{opacity:.3}
.cifre-subtiat{margin-top:14px}
.cifre-subtiat .cifra{flex:1 1 100px;padding:8px 12px;border-radius:10px}
.cifre-subtiat .cifra b{font-size:19px}
.cifre-subtiat .cifra b small{font-size:12px}
.cifre-subtiat .cifra span{font-size:11px}
/* ---- Streak-ul din pagina copilului: o fâșie de breadboard ----

   Materialul e al produsului, nu unul inventat: aceeași placă crem cu găuri pe
   care copilul o are pe ecran în simulator și pe masă în atelier. O zi în care a
   învățat e o gaură LIPITĂ — pastilă în portocaliul firelor, cu o urmă de
   lumină sus, ca o lipitură adevărată. O zi ratată rămâne gaură goală.
   Găurile poartă informație pe care cifra n-o are: CARE zile. De-aia există. */
.streak-placa{
  position:relative;padding:14px 16px 12px;border-radius:14px;
  background:var(--board);border:1px solid var(--board-edge);
  /* Textura de placă stă mult sub cele șapte găuri care poartă informația:
     puncte de 1,2px, translucide. Prima versiune le-a făcut la fel de mari și de
     închise ca zilele, și zilele s-au pierdut în fond — placa trebuie să fie
     material, nu conținut. */
  background-image:radial-gradient(circle at 1.2px 1.2px, rgba(142,132,95,.32) 1.2px, transparent 1.3px);
  background-size:13px 13px;background-position:7px 7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.streak-eyebrow{
  margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);
}
/* Eticheta ferestrei: aceeași linie, deci zero înălțime în plus. Discretă —
   spune ce e fâșia, nu concurează cu cifra. */
.streak-fereastra{font-weight:700;letter-spacing:.06em;text-transform:none;color:var(--ink-faint)}
.streak-cifra{
  margin:2px 0 10px;display:flex;align-items:baseline;gap:7px;
  font-size:40px;font-weight:800;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.streak-flacara{font-size:28px;line-height:1;letter-spacing:0}
.streak-unitate{font-size:13px;font-weight:700;letter-spacing:0;color:var(--ink-soft)}
/* Stins: aceeași cutie, aceeași înălțime, ca așezarea să nu sară de la o zi la
   alta. Doar placa se răcește și invitația ia locul cifrei. */
.streak-rece{background-color:var(--paper-2);border-color:var(--line)}
.streak-invitatie{font-size:21px;letter-spacing:-.02em}

/* Canalul: banda deschisă pe care stau cele șapte zile. E și autentic (placa are
   un canal la mijloc) și necesar — fără el, găurile zilelor se citesc ca parte
   din textură. */
.streak-fasie{
  display:flex;gap:0;justify-content:space-between;
  padding:7px 9px 5px;border-radius:9px;
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07),0 1px 0 rgba(255,255,255,.6);
}
.streak-zi{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 0}
/* Gaura: cerc înfundat în placă. `i` e gaura, `em` e inițiala zilei. */
.streak-zi i{
  width:14px;height:14px;border-radius:50%;
  background:var(--hole);box-shadow:inset 0 1px 1.5px rgba(0,0,0,.35);
}
.streak-zi em{
  font-size:9px;font-style:normal;font-weight:700;letter-spacing:.04em;
  color:var(--hole-hi);
}
/* Lipită: pastila de fir, cu lumina în stânga-sus ca la o lipitură bună. */
.streak-zi.lipit i{
  background:radial-gradient(circle at 34% 30%, #F5A06E 0 22%, var(--accent) 55%, var(--accent-ink) 100%);
  box-shadow:0 1px 3px rgba(184,70,26,.45);
}
.streak-zi.lipit em{color:var(--accent-ink)}
/* Azi, cât timp e neatins: un inel care respiră — singura mișcare din secțiune,
   și e o invitație, nu un ornament. */
.streak-zi.azi:not(.lipit) i{
  box-shadow:inset 0 1px 1.5px rgba(0,0,0,.35),0 0 0 2px rgba(var(--accent-rgb),.55);
  animation:streak-puls 2.4s ease-in-out infinite;
}
.streak-zi.azi em{color:var(--ink)}
@keyframes streak-puls{
  0%,100%{box-shadow:inset 0 1px 1.5px rgba(0,0,0,.35),0 0 0 2px rgba(var(--accent-rgb),.5)}
  50%{box-shadow:inset 0 1px 1.5px rgba(0,0,0,.35),0 0 0 5px rgba(var(--accent-rgb),0)}
}
@media (prefers-reduced-motion:reduce){
  .streak-zi.azi:not(.lipit) i{animation:none}
}

/* Cele patru cifre își pierd cutiile: dacă și ele ar fi carduri, n-ar mai exista
   nicio ierarhie și streak-ul s-ar pierde între ele. Rămân cifră + etichetă,
   despărțite de linii de un pixel — două coloane, ca înainte. */
.cifre-plate{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin:12px 0 0;
  border-top:1px solid var(--line);
}
.cifre-plate>div{padding:9px 2px 8px;border-bottom:1px solid var(--line)}
.cifre-plate>div:nth-child(odd){border-right:1px solid var(--line);padding-right:10px}
.cifre-plate>div:nth-child(even){padding-left:12px}
.cifre-plate dt{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1px;
}
.cifre-plate dd{
  margin:0;font-size:22px;font-weight:800;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.cifre-plate dd small{font-size:13px;font-weight:700;color:var(--ink-faint)}

.prieteni-scurt{display:flex;flex-wrap:wrap;gap:10px}
.prieten-mic{
  display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:99px;
  background:var(--paper-2);font-weight:700;font-size:13.5px;
}
.prieten-mic:hover{border-color:var(--accent)}

/* LED-ul mărcii: aprins, ca o piesă alimentată pe planșă. */
.bara .marca-punct{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 9px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:box-shadow .18s;
}
.bara .marca:hover .marca-punct{
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 15px color-mix(in srgb, var(--accent) 75%, transparent);
}

/* Buton doar cu pictogramă. Aceeași ramă și același radius ca .tool, ca să
   nu pară un corp străin lângă butoanele cu text. */
.ic-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:34px;
  color:var(--ink-soft);
  background:var(--card);
  border:1px solid var(--line);border-radius:10px;
  text-decoration:none;
  transition:border-color .12s,color .12s,transform .06s;
  touch-action:manipulation;
}
.ic-btn svg{width:20px;height:20px;display:block}
.ic-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.ic-btn:active{transform:translateY(1px)}
.ic-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ic-btn.are-vesti{color:var(--accent-ink);border-color:var(--accent)}

/* Pastila stă în colț, ca un martor aprins pe o piesă. */
.ic-btn .pastila{
  position:absolute;top:-6px;right:-6px;
  border:2px solid var(--card);
  min-width:20px;height:20px;border-radius:10px;
}

/* ---- biblioteca de circuite ---- */
.cap-biblioteca{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.cauta input{
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;min-width:220px;
}
.cauta input:focus{outline:none;border-color:var(--accent)}

/* ── Filtrul pe piese al tabului „Exemple" ─────────────────────────────
   Panoul e închis implicit: 28 de chip-uri desfășurate ar fi patru rânduri
   de perete deasupra grilei. `.piese-alese` rămâne în afara lui <details>,
   ca selecția să se vadă și cu panoul strâns. */
.filtru-piese{margin:0 0 16px}
.piese-alese{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.piese-alese .eticheta{color:var(--ink-soft);font-size:.86rem}
.panou-piese>summary{
  cursor:pointer;display:inline-block;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);font-size:.9rem;
}
.panou-piese>summary:hover{border-color:var(--line-strong)}
.panou-piese[open]>summary{margin-bottom:10px}
.panou-piese .pcat{margin:12px 0 6px;color:var(--ink-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.chipuri{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--line);border-radius:999px;text-decoration:none;
  color:var(--ink);font-size:.88rem;background:var(--card);
}
.chip:hover{border-color:var(--line-strong)}
.chip svg{width:20px;height:20px;flex:0 0 20px}
.chip b{font-weight:600}
.chip-nr{color:var(--ink-soft);font-size:.8rem}
.chip-ales{background:var(--accent);border-color:var(--accent);color:#fff}
.chip-ales .chip-x{font-size:1rem;line-height:1;opacity:.8}
.chip-goleste{color:var(--ink-soft);font-size:.86rem;text-decoration:underline}

/* O linie, NU un chenar: apare doar când grila ARE rezultate dar nicio piesă
   n-ar mai restrânge selecția — nu-i o eroare, deci nu ia forma lui `.gol`
   (chenar punctat). Când grila e goală, mesajul ei e singurul care apare;
   un al doilea `.gol` aici s-ar citi ca pagină stricată, două chenare la
   rând cu aceeași veste. */
.fara-mai-multe{margin:6px 0 0;color:var(--ink-soft);font-size:.86rem}

@media (max-width:560px){
  /* Chip-urile își păstrează desenul, dar rândul nu mai trebuie să împingă
     pagina lateral. */
  .chipuri{gap:5px}
  .chip{padding:4px 8px;font-size:.82rem}
}

.tab-uri{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}
.tab{
  text-decoration:none;font-size:13.5px;font-weight:700;color:var(--ink-soft);
  padding:7px 14px;border-radius:999px;border:1px solid transparent;
}
.tab:hover{border-color:var(--line-strong)}
.tab.act{color:#fff;background:var(--accent);border-color:var(--accent)}

.grila{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}

/* ---- paginarea bibliotecii (resources/views/paginare.blade.php) ----
   Împrumută formele care există deja: săgețile arată ca `.tool`, numerele ca
   `.tab`. Nu inventează nici culori, nici raze — două forme noi pe ecranul
   copilului ar fi fost două lucruri de învățat degeaba. */
.paginare{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.pag-sageata{
  text-decoration:none;font-size:13.5px;font-weight:700;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;
  white-space:nowrap;
}
.pag-sageata:hover{border-color:var(--line-strong)}
.pag-sageata:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Capătul drumului rămâne pe loc, ca rândul să nu-și schimbe lățimea între
   pagini — dar nu mai arată apăsabil. */
.pag-sageata.stins{color:var(--ink-faint);background:transparent;border-color:transparent}
.pag-numere{display:flex;align-items:center;gap:4px}
.pag-nr{
  text-decoration:none;font-size:13.5px;font-weight:700;color:var(--ink-soft);
  min-width:32px;padding:6px 9px;border-radius:999px;border:1px solid transparent;text-align:center;
}
.pag-nr:hover{border-color:var(--line-strong)}
.pag-nr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pag-nr.act{color:#fff;background:var(--accent);border-color:var(--accent)}
.pag-puncte{color:var(--ink-faint);padding:0 2px}
.pag-cate{margin:8px 0 0;text-align:center;font-size:12.5px;color:var(--ink-faint)}

/* Cardul NU e un link: e un container simplu, cu un <a> „întins" peste tot
   (stretched-link) drept z-index 1, ca fundal clicabil, și un buton adevărat
   (lacătul, z-index 2) care stă deasupra lui pe propriul colț — vezi
   comentariul din card.blade.php pentru DE CE. */
.card-circuit{
  position:relative;
  display:flex;flex-direction:column;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .12s,transform .12s;
}
.card-circuit:has(.card-link:hover),.card-circuit:has(.card-link:focus-visible){
  border-color:var(--accent);transform:translateY(-2px);
}
.card-link{position:absolute;inset:0;z-index:1;text-decoration:none}
.card-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.card-poza{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  /* 16:9, nu 4:3 — placa e 812×418, adică ~1.9:1, iar într-o ramă mai înaltă
     ar rămâne benzi mari de fundal sus și jos. */
  aspect-ratio:16/9;
  /* --paper-2, NU --board: fundalul avea exact culoarea plăcii, deci silueta
     plăcii se topea în el și imaginea arăta ca un petic de textură retezat,
     nu ca un obiect așezat pe masă. */
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
/* Cele două straturi ocupă exact aceeași cutie. Marginea vine din inset, nu
   din padding pe părinte: pentru un element absolut poziționat, blocul
   conținător e caseta de padding, deci un padding pe părinte s-ar aduna la
   inset în loc să-l înlocuiască. */
.card-poza img{
  position:absolute;inset:12px;
  width:calc(100% - 24px);height:calc(100% - 24px);
  object-fit:contain;display:block;
}
/* Umbra stă pe placă, nu pe piese: piesele sunt PE placă, nu plutesc peste ea. */
.card-placa{filter:drop-shadow(0 3px 6px rgba(22,32,43,.20)) drop-shadow(0 1px 2px rgba(22,32,43,.12))}
.card-fara-poza{
  font-weight:800;font-size:15px;color:var(--board-edge);text-align:center;
  padding:0 10px;line-height:1.2;
}

.card-jos{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 10px 10px 12px}
.card-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.card-info b{font-size:14px;font-weight:800;letter-spacing:-.01em}
.card-info small{font-size:12px;color:var(--ink-soft)}

.card-stare{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center}
.card-stare .inima{font-size:13px;color:var(--pos);font-weight:700}

/* Inima autorului stă lângă lacăt, nu în locul lui: sunt două lucruri diferite
   — câți te-au apreciat și cine îți poate vedea circuitul. */
.card-stare .inima-mea{margin-right:6px}

/* Zona de apăsat e un pătrat de 34px, nu o pictogramă de 14px — un deget de
   copil ratează o țintă mai mică. Fiecare stare are propriul contur, ca
   „prieteni" să nu se piardă lângă „privat"/"public" doar pentru că 👥
   randează mai palid decât 🔒 și 🌍 pe unele telefoane. */
.lacat-btn{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;font-size:17px;line-height:1;
  font-family:var(--font-body);color:var(--ink-soft);
  background:var(--paper-2);border:1.5px solid var(--line-strong);border-radius:10px;
  cursor:pointer;touch-action:manipulation;
  transition:border-color .12s,transform .06s;
}
.lacat-btn:hover{border-color:var(--accent)}
.lacat-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lacat-btn:active{transform:translateY(1px)}
.lacat-btn[data-stare="prieteni"]{border-color:var(--live);color:var(--live)}
.lacat-btn[data-stare="public"]{border-color:var(--accent);color:var(--accent-ink)}

@media (max-width:520px){
  .grila{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* ---- pagina unui circuit ----
   Planșa în stânga, acțiunile în dreapta. `align-items:start` ca panoul să nu
   se întindă pe toată înălțimea planșei — ar rămâne cu un gol mare sub el.
   `minmax(0,1fr)`, NU `1fr`: `.pagina` are `max-width:1000px` cu
   `padding:26px 20px`, deci lățimea utilă e `min(1000,vw) − 40`. Fără
   `minmax(0,…)`, coloana planșei nu se poate strânge sub conținutul ei minim
   — un nume foarte lung de circuit din `.card-fara-poza` ar putea împinge
   panoul de 400px peste marginea paginii. */
.circuit-doua{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
/* Pragul e 980px, nu 820px: sub 1000px lățimea utilă a paginii scade sub
   1000 − 40 = 960px, deci la 821px planșei nu-i mai rămân decât ~361px lângă
   un panou de 400px — panoul devine mai lat decât obiectul paginii. Sub
   980px, planșa coborâtă sub panou e mai bună decât o planșă strivită. */
@media (max-width:980px){.circuit-doua{grid-template-columns:1fr}}
/* Aceeași mecanică de două straturi ca .card-poza mai sus: placa dedesubt,
   piesele deasupra, în aceeași cutie, fără calcul de aliniere. Fără
   aspect-ratio explicit, un părinte cu imagini poziționate absolut n-ar avea
   după ce să-și ia înălțimea — copiii abs. nu contribuie la layout. */
.circuit-mare{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;min-height:220px;
  /* --paper-2, NU --board — același motiv ca la .card-poza: fundalul avea
     exact culoarea plăcii, deci silueta ei se topea în el. */
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  margin-bottom:12px;
}
/* Marginea vine din inset, nu din padding pe părinte: pentru un element
   absolut poziționat, blocul conținător e caseta de padding a părintelui,
   deci un padding s-ar aduna la inset în loc să-l înlocuiască. */
.circuit-mare img{
  position:absolute;inset:22px;
  width:calc(100% - 44px);height:calc(100% - 44px);
  object-fit:contain;display:block;
}
/* Umbra stă pe placă, nu pe piese: piesele sunt PE placă, nu plutesc peste ea. */
.circuit-placa{filter:drop-shadow(0 3px 6px rgba(22,32,43,.20)) drop-shadow(0 1px 2px rgba(22,32,43,.12))}
.circuit-autor{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:8px}
/* Rândurile de oameni din coloana din stânga, sub autor. Se învăluie pe mai
   multe rânduri la nevoie: 12 chipuri nu încap pe un telefon, iar tăierea lor
   ar ascunde exact semnalul pentru care există rândul. */
.oameni{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
.oameni-titlu{font-weight:800;color:var(--ink)}
.om{display:flex;align-items:center;gap:6px;font-weight:600}
.om-restul{font-style:italic}
/* Panou, nu rând: butoanele stau unul sub altul, cel principal deasupra, iar
   cel ireversibil în capătul opus. Clasa rămâne `circuit-actiuni` fiindcă
   public/js/circuit-pagina.js o caută pe ea — vezi comentariul din șablon. */
.circuit-actiuni{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;
}
.circuit-actiuni .panou-sus{display:flex;justify-content:flex-end;margin-bottom:4px}
.circuit-actiuni .panou-principal{font-size:15.5px;padding:12px 16px;font-weight:800}
/* `align-items:stretch` de mai sus întinde fiecare buton pe toată lățimea
   panoului (366px), dar `.tool` e inline-flex FĂRĂ `justify-content` — fără
   centrarea de-aici, un buton lat arată ca o bară goală cu textul lipit de
   marginea stângă. E exact boala reparată la butonul din bara de lecție
   (task 2), mutată pe butonul principal al paginii. „Șterge" n-are nevoie:
   `align-self:flex-start` îl strânge la conținutul lui. */
.circuit-actiuni .panou-principal,
.circuit-actiuni #raft,
.circuit-actiuni #vizibilitate{justify-content:center}
.circuit-actiuni .panou-linie{border:0;border-top:1px solid var(--line);margin:5px 0;width:100%}
.circuit-actiuni .panou-meta{margin:0;font-size:12.5px;color:var(--ink-faint);line-height:1.7}
.circuit-actiuni .inima{font-size:14px;color:var(--pos);font-weight:700}
.circuit-actiuni .inima-btn{border-radius:999px;color:var(--ink-soft)}
.circuit-actiuni [aria-pressed="true"]{border-color:var(--accent);color:var(--accent-ink)}

/* Comutatorul de vizibilitate: control de confidențialitate, nu buton
   secundar oarecare — culoarea stării curente pe contur ȘI pe fond, aceeași
   logică pe `data-stare` ca .lacat-btn de pe cardul din grilă (elev/partiale
   card.blade.php), ca cele două locuri unde copilul schimbă vizibilitatea
   să vorbească aceeași limbă. Fără culoare pentru „privat": neutru, ca pe
   card, tocmai fiindcă e starea implicită, „nimic de arătat". */
.circuit-actiuni .viz-btn{font-weight:700;border-color:var(--line-strong)}
.circuit-actiuni .viz-btn[data-stare="prieteni"]{
  border-color:var(--live);color:var(--live);
  background:color-mix(in srgb,var(--live) 12%,var(--card));
}
.circuit-actiuni .viz-btn[data-stare="public"]{
  border-color:var(--accent);color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 12%,var(--card));
}

/* În rândul de dinainte, `margin-left:auto` îl arunca în celălalt capăt. În
   panou distanța o dau linia de despărțire și istoria dintre ele, deci
   marginea automată n-ar face decât să-l lipească de dreapta. */
.circuit-actiuni .sterge-btn{align-self:flex-start}
.circuit-actiuni .stare{font-size:12.5px;color:var(--ink-soft)}
/* Gol, ca element de flex-COLOANĂ, `#stare` adaugă cei 9px de `gap` sub
   ultimul buton — acceptat intenționat, nu o scăpare. `#stare` e regiune vie
   (`role="status" aria-live="polite"`), iar public/js/circuit-pagina.js
   scrie sincron în ea; un `:empty{display:none}` ar deveni vizibil exact în
   clipa în care primește text, iar cititoarele de ecran pot rata anunțul
   pentru o regiune vie care tocmai a apărut — e chiar tehnica pe care
   ghidurile de accesibilitate o descurajează. Nouă pixeli de spațiu sunt mai
   ieftini decât o confirmare pe care un copil n-o aude. */
.circuit-actiuni .stare.bine{color:var(--live);font-weight:700}
.circuit-actiuni .stare.rau{color:var(--pos);font-weight:700}

/* ---- panoul instituției: /coordonator ----
   Aceleași cărămizi ca /cont — .sectiune, .rand, .tabel, .tool — plus ce n-a
   avut cine să ceară până acum: un formular pe un rând, o zonă de text și
   bilețelele de tipărit. */

/* Era folosit în ecranele elevului, dar nu fusese definit niciodată: eticheta
   ajungea pe ecran, lângă un câmp care avea deja placeholder. Îl scriem acum,
   fiindcă select-ul de mutare și zona de prenume chiar au nevoie de nume
   citite de cititorul de ecran, nu văzute. */
.sr-doar{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* `.impinge` avea regulă doar înăuntrul barei și al benzii „continuă", deci în
   restul locurilor unde e scris în șabloane — /cont, licența, prietenii — nu
   făcea nimic: butoanele stăteau lipite de text în loc să fie împinse la
   dreapta. Acum e globală, cum a fost scrisă mereu în markup.

   Regula de mai jos, mai veche, o preceda pentru panoul instituției; rămâne
   inofensivă, dar nu mai e singura. */
.impinge{margin-left:auto}

/* `.actiuni` există doar ca `.tabel .actiuni`, deci un rând de butoane în
   afara unui tabel n-avea nicio așezare — butoanele cădeau unul sub altul.
   Nici `.tool.mare` nu e de folosit aici: are `width:100%`, fiindcă e croit
   pentru butonul singur de pe ecranele de intrare ale elevului. */
.actiuni-rand{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 22px}

.rand-formular{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.rand-formular input[type=text]{
  flex:1 1 200px;
  font:inherit;font-size:15px;
  padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);
}
.rand-formular input[type=text]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

textarea[name=prenume]{
  width:100%;
  font:inherit;font-size:16px;line-height:1.7;
  padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);
  resize:vertical;
}
textarea[name=prenume]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.actiuni .mutare select{
  font:inherit;font-size:13px;
  padding:6px 8px;
  border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);
}

/* ---- bilețelele ----
   Două coloane pe hârtie, ca să iasă zece pe o pagină A4 și să se taie drept. */
.biletele{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.biletel{
  border:1px dashed var(--line);
  border-radius:12px;
  padding:14px 16px;
  background:var(--card);
}
.biletel-nume{display:block;font-size:19px;font-weight:800;margin-bottom:8px}
.biletel-rand{display:block;font-family:var(--font-mono);font-size:17px;font-weight:700;letter-spacing:.06em}
.biletel-rand small{
  display:block;
  font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);letter-spacing:.08em;
}
.biletel-unde{display:block;margin-top:10px;font-size:11px;color:var(--ink-soft)}

@media print{
  /* Butonul de tipărit n-are ce căuta pe hârtie. */
  .doar-ecran{display:none}
  .tipar{padding:0;max-width:none}
  /* Un bilețel tăiat în două de sfârșitul paginii nu se poate da nimănui. */
  .biletel{break-inside:avoid;page-break-inside:avoid}
}

@media (max-width:520px){
  .biletele{grid-template-columns:1fr}
}

/* Grupele date unui profesor: bifele stau ca niște pastile, ca lista să se
   citească dintr-o privire când sunt zece grupe. */
.grupe-alese{border:0;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* `:not(.sr-doar)` nu e podoabă: `.grupe-alese legend` are specificitate mai
   mare decât `.sr-doar`, deci `width:100%` de aici o bătea pe `width:1px` de
   acolo. O etichetă care trebuia să fie invizibilă căpăta lățimea ferestrei și
   împingea pagina în lateral cu o sută de pixeli. */
.grupe-alese legend:not(.sr-doar){
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:0;margin-bottom:6px;width:100%;
}
.pastila-bifa{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--card);
  font-size:14px;font-weight:600;
  cursor:pointer;
}
.pastila-bifa:has(input:checked){border-color:var(--accent);color:var(--accent)}
.pastila-bifa:focus-within{outline:2px solid var(--accent);outline-offset:1px}

/* ---- panoul afterschool: status licență, ștergere, fișă bogată ----
   Cărămizi noi cerute de deschiderea panoului: o pastilă de status pe antetul
   licenței, un rând de ștergere cu confirmare, și galeria de ședințe din fișă. */

/* Status de licență, lângă numărul ei. Verde = în vigoare, roșu = oprită sau
   expirată — aceleași două culori ca martorul din bara de lucru (.stare.bine /
   .stare.rau), ca semnalul să fie citit la fel peste tot. */
.pastila-stare{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.01em;
  border:1px solid;
}
.pastila-stare.activa{
  color:var(--live);border-color:var(--live);
  background:color-mix(in srgb,var(--live) 10%,var(--card));
}
.pastila-stare.inactiva{
  color:var(--pos);border-color:var(--pos);
  background:color-mix(in srgb,var(--pos) 10%,var(--card));
}

/* Ștergerea, strânsă: colapsat e doar un buton mic „Șterge", cât celelalte
   acțiuni ale rândului, nu o bară roșie cât toată lățimea. Cutia de confirmare
   apare abia deschis. */
.zona-stergere{margin-top:8px}
/* În rândul de acțiuni al tabelului „Șterge" stă lângă celelalte butoane, fără
   marginea de sus; când se deschide, cutia de confirmare sare pe propriul rând,
   la dreapta, ca să nu întindă butoanele din linie. */
.actiuni .zona-stergere{margin-top:0}
.actiuni .zona-stergere[open]{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-end}
.zona-stergere summary{
  display:inline-block;width:auto;cursor:pointer;list-style:none;
  font-size:12px;font-weight:700;color:var(--pos);
  padding:4px 10px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--pos) 35%,var(--line));
}
.zona-stergere summary::-webkit-details-marker{display:none}
.zona-stergere summary:hover{background:color-mix(in srgb,var(--pos) 8%,var(--card))}
.zona-stergere[open] summary{margin-bottom:8px}
.zona-stergere .continut{
  padding:11px 13px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--pos) 40%,var(--line));
  background:color-mix(in srgb,var(--pos) 5%,var(--card));
  max-width:360px;
}
.zona-stergere p{margin:0 0 8px;font-size:12.5px;color:var(--ink-soft)}
.tool.pericol{
  color:#fff;background:var(--pos);border-color:var(--pos);font-weight:800;
  font-size:13px;padding:7px 12px;
}
.tool.pericol:hover{filter:brightness(.94)}

/* ---- Fișa ca RAPORT: antet cu brand + mascotă, corp pe două coloane ----
   Fresh și profi (panouri-card, o dungă de brand, cifre curate) dar jucăuș
   (mascota trage cu ochiul din colț). Circuitele poartă exact cardul din
   biblioteca elevului, la mărimea la care se vede placa. */
.raport{max-width:1000px}

/* Antetul: logo-ul brandului sus, mascota peste colț, o dungă teal ca semnătură. */
.raport-antet{
  position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--live) 5%,var(--card));
  border:1px solid var(--line);border-top:5px solid var(--live);
  border-radius:18px;padding:20px 24px 22px;margin-bottom:18px;
  print-color-adjust:exact;-webkit-print-color-adjust:exact;
}
.raport-antet .eyebrow{color:var(--live);margin:0}
.raport-antet h1{margin:.06em 0 .28em;font-size:clamp(26px,3.4vw,36px)}
.raport-sub{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0}
.raport-sub span{
  font-size:12.5px;font-weight:700;color:var(--ink-soft);
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;
}
/* Mascota trage cu ochiul din colțul de sus-dreapta — ușor înclinată, ca un
   personaj care se uită peste umărul raportului. */
.raport-mascota{
  position:absolute;top:14px;right:20px;width:88px;height:auto;
  transform:rotate(7deg);opacity:.96;pointer-events:none;
}

/* Cifrele, curate, cu numărul în teal-ul brandului. */
.cifre-raport{margin-bottom:18px}
/* Șapte cifre, nu șase, de când fișa arată și focul zilelor. Măsurat: containerul
   e fix la 960px, iar la baza implicită de 130px șapte cer 970 — lipseau exact
   10 pixeli, iar „prieteni" cădea singură pe al doilea rând. Baza coboară DOAR
   aici, nu global: aceeași clasă `.cifra` e folosită și pe alte pagini, cu alt
   număr de cifre. La 120px încap toate șapte (7×120+6×10=900), iar flex le
   crește apoi la ~129px fiecare. */
.cifre-raport .cifra{flex-basis:120px}
.cifre-raport .cifra b{color:var(--live)}

/* Corpul pe două coloane — nu una sub alta. Stânga: ce a învățat + ultimul
   circuit; dreapta: ședințele. Pe ecran mic, cad una sub alta. */
.raport-corp{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:18px;align-items:start}

/* Fiecare secțiune e un panou-card: margine subțire, colț rotund, umbră fină. */
.card-sectiune{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px 18px 17px;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(22,32,43,.05);
}
.card-sectiune:last-child{margin-bottom:0}
.card-sectiune h2{margin:0 0 10px}

/* Cardurile circuitelor: grila bibliotecii, minim ceva mai mare ca placa să se
   vadă. Fără hover — nu e un card de apăsat. */
.grila-fisa{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.grila-fisa .card-circuit{transition:none}

/* O zi de atelier: data cu ora intrării, apoi grila circuitelor. */
.sedinta-zi{margin:0 0 16px}
.sedinta-zi:last-child{margin-bottom:0}
.sedinta-zi .cand{font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.sedinta-zi .cand small{font-weight:600;color:var(--ink-faint);letter-spacing:0}

.raport-subsol{
  margin:18px 0 0;text-align:center;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
}

@media (max-width:720px){
  .raport-corp{grid-template-columns:1fr}
}

/* La tipar: A4, margini strânse, culorile de brand păstrate, iar un card, o zi
   sau un panou nu se rup în două. */
@media print{
  @page{size:A4 portrait;margin:8mm}
  .raport-antet{margin-bottom:12px}
  .cifre-raport,.card-sectiune{margin-bottom:12px}
  .raport-corp{gap:12px}
  /* Panourile mari (.card-sectiune) TREBUIE să se poată rupe între pagini —
     altfel un panou mai înalt decât spațiul rămas sare cu totul pe pagina
     următoare și lasă în urmă o pagină aproape goală. Ferim de rupere doar
     bucățile mici: un card de circuit sau o zi de ședință. */
  .sedinta-zi,.card-circuit{break-inside:avoid;page-break-inside:avoid}
  .cifra{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* ---- contractul de licență (admin) ----
   Un document sobru, printabil pe A4: coloane pentru părți, articole
   numerotate, blocuri de semnătură. Aceleași cărămizi de tipar ca fișa. */
.contract{max-width:820px;margin:0 auto}
.contract-cap{text-align:center;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
.contract-cap .eyebrow{color:var(--ink-soft)}
.contract-cap h1{font-size:clamp(24px,3.2vw,32px);margin:.15em 0 .1em}
.contract-nr{margin:0;font-size:13px;font-weight:700;color:var(--ink-soft);font-family:var(--font-mono)}

/* Părțile, una lângă alta. */
.contract-parti{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px}
.contract-parti .parte{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper-2);
}
.contract-parti h2{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--live);margin:0 0 8px;
}
.contract-parti p{margin:0 0 4px;font-size:13.5px;line-height:1.4}

/* Rândul cu termenii acceptați, între părți și articole: dovada de pe cerere,
   mică și la vedere — nu un articol, ci o constatare. */
.contract-termeni{margin:-8px 0 20px;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}

/* Corpul, articolele. Justificat, ca un contract adevărat. */
.contract-corp h3{font-size:14.5px;font-weight:800;margin:16px 0 5px}
.contract-corp p{margin:0 0 6px;font-size:13.5px;line-height:1.55;text-align:justify}

/* Placeholderele nescrise se văd, ca să sară în ochi ce mai e de completat. */
.gol-camp{
  color:var(--pos);font-weight:700;font-family:var(--font-mono);font-size:.92em;
  background:color-mix(in srgb,var(--pos) 8%,transparent);padding:0 3px;border-radius:4px;
}

/* Semnăturile, la sfârșit, cu loc de iscălit. */
.contract-semnaturi{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:38px}
.contract-semnaturi .semnatura{text-align:center}
.contract-semnaturi .rol{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 4px;
}
.contract-semnaturi .nume{font-weight:800;margin:0 0 34px}
.contract-semnaturi .linie{
  margin:0;border-top:1px solid var(--ink-soft);padding-top:6px;
  font-size:11px;color:var(--ink-faint);
}

@media print{
  @page{size:A4 portrait;margin:14mm}
  .contract-corp h3{break-after:avoid}
  .contract-semnaturi{break-inside:avoid}
}

/* Cutia în care se cere numele circuitului. Înlocuiește `prompt()`, deci
   trebuie să arate a atelier, nu a browser: aceleași câmpuri și aceleași
   butoane ca în restul paginilor. */
.dialog-atelier{
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  background:var(--card);
  color:var(--ink);
  min-width:min(340px,90vw);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.dialog-atelier::backdrop{background:rgba(22,32,43,.35)}
.dialog-atelier .camp-input{width:100%;margin:8px 0 14px}
.dialog-atelier .drumuri{margin:0}

/* ---- marca pe planșa de intrare ----
   Stă deasupra supratitlului, la aceeași lățime cu el. 44px e înălțimea de
   referință a lockup-ului; sub 24px semnul ar avea nevoie de varianta mică. */
.marca-intrare{display:block;margin-bottom:14px}
.marca-intrare svg{width:44px;height:44px;display:block}

/* ── Inițialele, în loc de un username gri de 12px ──────────────────────
   Trei nume identice într-o grupă („Andrei", „Andrei", „Andrei") se disting
   mai repede după o pastilă colorată decât după text mic. Culoarea vine din
   nume, deterministic, ca același copil să aibă aceeași pastilă mereu. */
.elev-info { display:flex; align-items:center; gap:11px; }
.initiale {
  width:32px; height:32px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  background:rgba(var(--accent-rgb),.14); color:var(--accent-ink);
}
.initiale.i-live { background:rgba(15,158,140,.14); color:#0B7466; }
.initiale.i-neg  { background:rgba(59,111,176,.14); color:var(--neg); }
.initiale.i-pos  { background:rgba(214,69,69,.14);  color:var(--pos); }
.initiale.i-ink  { background:rgba(88,100,112,.14); color:var(--ink-soft); }

/* ── Bara de umplere: „14 / 30" spune cifra, bara spune proporția ────── */
.bara-umplere {
  height:5px; width:74px; margin-top:5px;
  border-radius:999px; background:var(--line); overflow:hidden;
}
.bara-umplere i { display:block; height:100%; border-radius:999px; background:var(--accent); }

/* ── Rândul care n-a început încă: se stinge, nu se ascunde ───────────── */
.rand-stins td { color:var(--ink-faint); }
.rand-stins .elev { color:var(--ink-soft); }

/* ── Meniul „⋯" de pe rând ─────────────────────────────────────────────
   Un <details>, nu un dropdown din JS: pagina n-are framework. Elementul
   nativ se deschide fără o linie de JS și se citește la screen reader, dar
   NU se închide singur la Escape — asta face <dialog>, nu <details>. Dacă
   închiderea la Escape ajunge să conteze, cere JS; nu e o scăpare de aici. */
.meniu-rand { position:relative; display:inline-block; }
.meniu-rand > summary {
  list-style:none; cursor:pointer; user-select:none;
  padding:6px 10px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--ink-soft); font-weight:700; line-height:1;
}
.meniu-rand > summary::-webkit-details-marker { display:none; }
.meniu-rand > summary:hover { background:var(--paper-2); color:var(--ink); }
.meniu-rand[open] > .continut {
  position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:20;
  min-width:190px; display:flex; flex-direction:column; gap:7px;
  padding:11px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); box-shadow:0 10px 28px rgba(22,32,43,.13);
}

/* ── Căutarea din grupă: câmpul poartă .cauta direct pe el, nu pe un
   wrapper ca la biblioteca de circuite (unde `.cauta input` țintește un
   descendent) — de-aia stilul de-aici, deși seamănă, e o regulă separată. */
.cauta[type=search] {
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; min-width:220px;
}
.cauta[type=search]:focus { outline:none; border-color:var(--accent); }

/* ── Capetele sortabile: butoane fără chenar, ca să pară text de titlu,
   dar rămân butoane reale pentru tastatură și cititor de ecran. Săgeata
   anunță vizual ce spune deja aria-sort. */
.sortare {
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:inherit; letter-spacing:inherit; text-transform:inherit;
}
.sortare:hover { color:var(--ink); }
.sortare[aria-sort]::after { content:' ▲'; font-size:9px; }
.sortare[aria-sort="descending"]::after { content:' ▼'; }

/* ── Garderoba mascotei: previzualizarea stă lângă sloturile de ales,
   nu deasupra — copilul vede simultan ce poartă și ce mai poate alege. */
.garderoba { display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.garderoba-piese { flex:1; min-width:280px; }

/* ── Oglinda de probă ──────────────────────────────────────────────────────
   Rămâne lipită sus cât se derulează prin piese: proba n-are niciun rost dacă
   mascota a ieșit de pe ecran până ajungi la ce te interesa. Sub 720px nu se
   lipește — acolo stă oricum deasupra listei, la o palmă distanță. */
.mascota-prev {
  width:186px; flex:none; padding:14px;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  transition:border-color .16s ease;
}
@media (min-width:720px){ .mascota-prev{ position:sticky; top:16px; } }

/* Straturile se suprapun: PNG-ul dă mărimea, SVG-urile stau peste el în
   aceeași cutie. `position:relative` pe cadru + `inset:0` pe fiecare strat —
   pe CADRU, nu pe panou, ca legenda de dedesubt să nu intre sub desen.

   `padding-top:16%` e ALINIEREA, nu aer decorativ. ViewBox-ul accesoriilor
   e `0 -24 150 163`: începe cu 24 de unități DEASUPRA PNG-ului (150 lat), ca
   piesele de cap să poată sta pe dom. Cu SVG-ul lipit de marginea de sus a
   imaginii, y=−24 cădea pe creștet și TOATE accesoriile coborau cu 24 de
   unități — ochelarii sub ochi, cravata sub gât, casca peste dom. Padding-ul
   de 24/150 din lățime (procentele de padding se raportează la lățime, deci
   16% e exact) coboară imaginea cât trebuie ca y=0 al SVG-ului să cadă pe
   marginea ei de sus — același calcul pe care simulatorul îl face cu
   `top:-10.6px` la .mascot-glasses. Aici padding, nu top negativ, fiindcă
   cadrul are overflow:hidden și piesele de deasupra creștetului s-ar tăia. */
.mascota-cadru { position:relative; padding-top:16%; background:#F4F1E7; border-radius:10px; overflow:hidden; }
.mascota-prev img { display:block; width:100%; height:auto; }
.mascota-prev .strat { position:absolute; inset:0; pointer-events:none; }
.mascota-prev .strat svg { position:absolute; inset:0; width:100%; height:auto; }

/* Cât ține proba, rama spune că ce se vede nu e (încă) adevărat. */
.mascota-prev.proba { border-color:var(--accent); border-style:dashed; }
.mascota-prev .strat.fantoma { opacity:.5; }

.mascota-cine {
  margin:10px 0 0; min-height:2.4em;
  font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ink-soft); text-align:center;
}

/* ── Sloturile garderobei ──────────────────────────────────────────────── */
.slot { margin:0 0 18px; }
.slot-cap { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 6px; }
.slot-cap h3 { margin:0; font-size:14px; font-weight:800; letter-spacing:-.01em; }
.slot-acum { font-size:12px; font-weight:700; color:var(--accent-ink); }
/* `slot-nimic`, nu `gol`: `.gol` e cutia de stare goală a bibliotecii
   (padding 22px, chenar punctat), iar un cuvânt de trei litere lângă un titlu
   se trezea într-o casetă cât un card. */
.slot-acum.slot-nimic { color:var(--ink-faint); font-weight:600; }
.slot-cate { margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-faint); }

/* Grilă cu celule EGALE. Butoanele erau `width:auto`, iar condiția de
   deblocare („30 de reparații rezolvate — ești maistru pe șantier.") le
   întindea cât propoziția: iconițele pluteau în cutii late, iar condițiile
   se citeau ca un paragraf continuu sub un rând de simboluri. Lățimea o dă
   acum coloana, iar textul se taie la două rânduri. */
.acc-raft {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:8px; margin:0;
}
.acc {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 7px 9px; border-radius:12px;
  border:1px solid transparent; background:none; cursor:pointer;
  font:inherit; color:inherit; text-align:center;
  transition:background-color .14s ease, border-color .14s ease;
}
.acc:hover { border-color:var(--line); background:var(--paper-2); }
.acc:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Hârtia de sub cerneală NU se întoarce pe tema închisă, dinadins. Accesoriile
   și mascota sunt desene în tuș negru: pe un disc devenit bleumarin, „Cravata"
   și „Papionul" dispăreau cu totul. Un fundal deschis constant e același gest
   ca la fișa tipărită — desenul stă pe hârtie, oricum ar fi lumina din cameră. */
.acc .disc {
  position:relative; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#F4F1E7; border:1px solid var(--line);
}
.acc .disc svg { width:42px; height:42px; }
.acc-nume { font-size:11.5px; font-weight:800; line-height:1.2; color:var(--ink); }
.acc-fara .fara-semn { font-size:20px; font-weight:800; color:var(--ink-faint); line-height:1; }

/* Purtată: o linie de accent și un halou moale. Inelul plin de 3px (bordură
   plus umbră, amândouă pline) era singurul lucru saturat din toată grila, și
   cădea tocmai pe „Fără" — cea mai puțin interesantă alegere de pe ecran. */
.acc[aria-pressed="true"] .disc {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.acc[aria-pressed="true"] .acc-nume { color:var(--accent-ink); }

/* Blocată: se vede, dar se vede că nu e a ta. Discul punctat spune „loc
   rezervat", lacătul spune de ce. Nu mai e opacity .35 pe tot butonul, care
   ștergea și numele — adică tocmai lucrul pentru care merită să te întorci. */
.acc.blocat .disc { border-style:dashed; }
.acc.blocat .disc svg { opacity:.45; }
.acc.blocat .acc-nume { color:var(--ink-soft); }
.acc .lacat {
  position:absolute; right:-2px; bottom:-2px;
  width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper-2); border:1px solid var(--line); font-size:9px; line-height:1;
}
/* Condiția rămâne pe placă, nu doar în oglindă — dar tăiată la două rânduri:
   un copil nu descoperă un `title`, iar pe telefon hover-ul nu există deloc. */
.acc-cum {
  font-size:10px; font-weight:600; line-height:1.25; color:var(--ink-faint);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (prefers-reduced-motion:reduce){
  .acc, .mascota-prev { transition:none; }
}

/* Selectorul de avatar/culoare de mai sus n-are etichete sub piese, deci
   rămâne pe rândul lui — `width:auto` era pentru garderobă, care acum are
   grila ei. */
.alegere-piesa button { width:auto; }

/* ═══ Cadrul de trei șine: panoul coordonatorului ═══════════════════════
   Așezarea e împrumutată din șablonul Disum — panouri-card cu colț mare, o
   șină de navigație la stânga, o șină de context la dreapta, elemente de
   meniu despărțite de linii subțiri. Culorile NU sunt împrumutate: fiecare
   valoare de mai jos vine din tokenurile de sus.

   De ce trei coloane și nu una lată: pagina avea 1000px lipiți la stânga pe
   un ecran de 1440, iar informația care contează (starea licenței, locurile
   rămase, ce face de obicei coordonatorul) era împrăștiată în text. */
.cadru{
  display:grid;
  grid-template-columns:236px minmax(0,1fr) 296px;
  gap:16px;align-items:start;
  max-width:1400px;margin:0 auto;padding:16px;
  min-height:100dvh;
}
/* O pagină fără șină de context nu lasă o coloană fantomă în urmă. */
.cadru.fara-context{grid-template-columns:236px minmax(0,1fr);max-width:1100px}

.panou{
  background:var(--card);border:1px solid var(--line);
  border-radius:22px;padding:20px 22px;
}

/* ── Șina din stânga ─────────────────────────────────────────────────
   `sticky`, ca navigația să rămână la îndemână pe un tabel de 30 de rânduri. */
.sina{position:sticky;top:16px;padding:18px 16px 16px}
.sina-marca{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  padding:0 6px 15px;border-bottom:1px solid var(--line);
}
.sina-marca img{width:30px;height:30px;display:block}
.sina-marca b{font-size:15px;font-weight:800;letter-spacing:-.02em}

/* Liniile subțiri dintre elemente sunt semnătura împrumutată: lista se
   citește ca un cuprins, nu ca un rând de butoane. Punctul din fața
   elementului activ e același LED aprins ca marca din bara elevului. */
.meniu{display:flex;flex-direction:column;margin:4px 0 0}
.meniu a{
  display:flex;align-items:center;gap:9px;
  padding:12px 6px;text-decoration:none;color:var(--ink-soft);
  font-size:14.5px;font-weight:600;
  border-bottom:1px solid var(--line);
  transition:color .12s,padding-left .12s;
}
.meniu a:last-child{border-bottom:0}
.meniu a:hover{color:var(--ink);padding-left:10px}
.meniu a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.meniu a::before{content:'';width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.meniu a.act{color:var(--accent-ink);font-weight:800}
.meniu a.act::before{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}
/* Grupa curentă, cuibărită sub „Grupele mele": mai mică, retrasă, cu o
   liniuță în loc de punct — un copil al elementului de deasupra, nu un al
   doilea element de rang egal. */
.meniu a.sub{font-size:13.5px;padding-left:20px}
/* Deplasarea la hover, păstrată și pentru elementul cuibărit: `.meniu a:hover`
   pune `padding-left:10px`, dar `.meniu a.sub` (specificitate mai mare) o bătea
   cu cei 20px de retragere, deci singurul element din meniu care NU reacționa la
   cursor era exact cel adăugat ultimul. Aceeași deplasare de 4px ca la ceilalți. */
.meniu a.sub:hover{padding-left:24px}
.meniu a.sub::before{content:'└';width:auto;height:auto;border-radius:0;
  font-size:11px;color:var(--ink-faint)}
/* Cuibărit ȘI activ: `.act::before` dă fundal portocaliu și inel de lumină,
   iar `.sub::before` schimbă doar glifa — combinate, dădeau un dreptunghi
   portocaliu strălucitor cu un „└" desenat peste el. Punctul plin e semnul
   unui element de rang egal; copilul lui își spune starea prin culoarea
   glifei, nu printr-o a doua pastilă. */
.meniu a.sub.act::before{background:none;box-shadow:none;color:var(--accent)}

.sina-jos{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sina-cine{display:block;font-size:13px;font-weight:800;padding:0 6px 3px}
.sina-rol{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 6px 11px;
}
.sina-iesi{width:100%;justify-content:center}

/* ── Scena din centru ────────────────────────────────────────────────
   `.pagina` avea max-width și margini proprii; în cadru, panoul le dă. */
.scena h1{
  font-size:clamp(26px,3vw,34px);line-height:1.04;margin:.08em 0 .3em;
  font-weight:800;letter-spacing:-.028em;
}
.scena .lead{margin-bottom:22px}
/* `>` e obligatoriu, nu decorativ: fără el, regula are aceeași specificitate
   ca `.sectiune h2` și câștigă doar prin ordinea din fișier — exact ce
   făcea numele unui profesor să iasă ca etichetă minusculă cu MAJUSCULE.
   Etichetele adevărate (ex. „Elevi fără grupă") sunt copii DIRECȚI ai
   `.scena`; titlurile din `.sectiune` sunt cuibărite un nivel mai jos și
   trebuie să rămână la stilul lor de titlu, din `.sectiune h2`. Nu
   „simplifica" înapoi la descendent — se strică din nou. */
.scena > h2{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;
}
.desp{border:0;border-top:1px solid var(--line);margin:26px 0 20px}

/* ── Șina din dreapta: contextul ─────────────────────────────────────
   Aici stă ce e adevărat despre pagină și ce faci de obicei — nu o repetare
   a conținutului din centru. */
.context{position:sticky;top:16px;padding:20px}
.context-et{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 8px;
}
.context .desp{margin:16px 0 14px}
.context-nota{margin:14px 0 0;font-size:11.5px;color:var(--ink-faint);line-height:1.6}
.act-rapide{display:flex;flex-direction:column;gap:8px}
/* `.tool` e inline-flex fără `justify-content`, deci un buton întins pe
   lățimea șinei ar avea textul lipit de marginea stângă. Aceeași capcană
   reparată la butonul din bara de lecție, mutată în șină. */
.act-rapide .tool{justify-content:flex-start;font-size:13.5px;padding:10px 13px}
/* Ce nu se poate lua înapoi stă jos, despărțit — nu sub degetul care voia
   butonul de deasupra. */
.act-rapide-jos{margin-top:2px}

/* Cifra conturată: citatul cel mai direct din Disum — numărul devine obiect
   grafic. `color` rămâne setat ȘI sub stroke: dacă `-webkit-text-stroke`
   lipsește, cifra se randează plină, nu transparentă. O cifră ștearsă e mai
   rea decât o cifră fără contur. */
.numar-mare{
  font-size:64px;line-height:.92;font-weight:800;letter-spacing:-.04em;
  color:var(--accent-ink);margin:14px 0 2px;
}
/* Numitorul („/ 30") stă lângă numărător fără să-l concureze: mai mic, mai
   palid. Culoarea plină e AICI, în varianta de rezervă. */
.numar-mare span{font-size:26px;color:var(--ink-faint)}
/* Conturul, doar dacă motorul îl are. `color:transparent` trăiește NUMAI
   înăuntru — scris pe regula de bază, o cifră fără suport pentru stroke ar
   dispărea complet, iar o cifră absentă e mai rea decât una fără contur.
   Blocul stă DUPĂ regula de span de mai sus, altfel `color` de acolo ar
   învinge transparența de aici și numitorul s-ar randa plin. */
@supports (-webkit-text-stroke:2px currentColor){
  .numar-mare{color:transparent;-webkit-text-stroke:2px var(--accent)}
  .numar-mare span{color:transparent;-webkit-text-stroke:1.5px var(--line-strong)}
}
.numar-et{font-size:12px;font-weight:700;color:var(--ink-soft);margin:0 0 10px}
.context .bara-umplere{width:100%;height:6px;margin:0 0 18px}

/* Definită cu height/width dar fără `display`, deci se prăbușea pe orice
   element inline. Până acum era folosită doar ca <div> (tabelul Filament al
   licențelor), unde block e implicit — de-aia n-a sărit în ochi. */
.bara-umplere{display:block}

/* ── Praguri ────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  /* Contextul coboară sub conținut, pe toată lățimea; navigația rămâne. */
  .cadru{grid-template-columns:236px minmax(0,1fr)}
  .context{grid-column:1/-1;position:static}
}
/* Pragul e 1080px, NU 820px — nu-l „curăța" înapoi la o cifră rotundă fără
   să recitești aritmetica de mai jos.

   Formula lățimii utile a panoului central, cu șina stângă încă la 236px și
   contextul deja coborât (deci un singur gap de 16px): fereastră − 32
   (padding .cadru) − 236 (șină) − 16 (gap) − 44 (padding .panou) =
   fereastră − 328.

   Cu pragul VECHI (820px), banda 821–1180px rămânea pe două coloane:
     900px → 572px, 1000px → 672px, 1080px → 753px, 1180px → 852px.
   Sub ~928px (fereastră − 328 = 600, cifra minimă pe care o cer cele șapte
   antete cu white-space:nowrap), panoul era STRÂNS — exact banda unde
   tabelul ieșea peste colțul rotunjit înainte de `.tabel-glisant`.

   Cu pragul NOU (1080px), banda 821–1080px trece direct pe o coloană: șina
   se strânge la un rând de pastile, iar panoul central primește aproape
   toată lățimea ferestrei (fereastră − 24 padding − 44 padding panou =
   fereastră − 68): 900px → 832px, 821px → 753px — cu mult peste cei 600px
   necesari. Rămâne pe DOUĂ coloane doar banda 1081–1180px, unde panoul are
   753–852px — tot peste prag, deci nu mai există nicio bandă strânsă între
   cele două praguri. */
@media (max-width:1080px){
  .cadru,.cadru.fara-context{grid-template-columns:1fr;padding:12px;gap:12px}
  .sina{position:static}
  /* Meniul devine un rând de pastile: pe telefon, o coloană verticală de
     navigație ar împinge conținutul sub prima îndoitură. */
  .meniu{flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:4px}
  .meniu a{
    border-bottom:0;border:1px solid var(--line);border-radius:999px;
    padding:8px 13px;font-size:13.5px;
  }
  /* Aceeași capcană de specificitate care a mai lovit ramura asta de două ori
     (vezi `.meniu a.sub.act::before`): regula de bază `.meniu
     a:last-child{border-bottom:0}` (înainte de media query) are (0,2,1) și
     bate `.meniu a` de mai sus, (0,1,1), indiferent de ordine — ultima
     pastilă rămânea deschisă la bază, pe telefon, pe toate paginile.
     Rescriem `:last-child` AICI, cu aceeași specificitate ca regula de bază:
     la specificitate egală câștigă ordinea din fișier, iar asta e mai jos. */
  .meniu a:last-child{border-bottom:1px solid var(--line)}
  .meniu a:hover{padding-left:13px}
  .meniu a.sub{padding-left:13px}
  .sina-iesi{width:auto}
}

/* ── Pagina „Grupele mele" ────────────────────────────────────────────
   Antetul licenței era un <h2> cu un rând de text mic dedesubt, pierdut
   deasupra rândurilor. Ca bandă, se citește ca un capitol. */
.banda-licenta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 16px;margin:0 0 12px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
}
.banda-licenta .titlu{font-size:15px;font-weight:800;letter-spacing:-.01em}
.banda-licenta .cod{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);
}
.banda-licenta .cifra-mica{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-soft)}

/* Banda ca selector, când instituția are mai multe licențe. Cursorul și marginea
   care se aprinde spun că se poate apăsa; licența aleasă capătă și o dungă
   portocalie în capătul din stânga, ca să se vadă dintr-o privire care dintre
   trei e cea din șina dreaptă.

   `:has(input:checked)` și `:focus-within` — aceleași două cărămizi ca la
   `.pastila-bifa` din pagina profesorilor, deci nu e un tipar nou aici. */
.banda-licenta.selectabila{cursor:pointer;transition:border-color .12s,background .12s}
.banda-licenta.selectabila:hover{border-color:var(--line-strong)}
.banda-licenta.selectabila:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  box-shadow:inset 3px 0 0 var(--accent);
}
/* Radioul e ascuns vizual (`.sr-doar`), deci inelul de focus trebuie să apară pe
   bandă — altfel cine navighează cu tastatura nu vede pe ce stă. */
.banda-licenta.selectabila:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* Grupa ca card, nu ca rând de listă: pastila zilei dă ochiului un cârlig,
   iar hover-ul spune că se poate intra. Aceeași familie de colț ca panoul
   care le ține. */
.grupa-rand{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;margin-bottom:9px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  transition:border-color .12s,transform .12s;
}
/* Ridicarea la hover doar pe rândurile care DUC undeva. Aceeași clasă e folosită
   și de „Elevi fără grupă", care n-au nicio legătură înăuntru — un rând care se
   aprinde și se ridică sub cursor promite un clic ce nu există. */
.grupa-rand:has(a):hover{border-color:var(--accent);transform:translateY(-1px)}
.grupa-zi{
  width:44px;height:44px;flex:0 0 auto;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.12);color:var(--accent-ink);
  font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.grupa-info{min-width:0;flex:1}
.grupa-info b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.015em}
.grupa-info span{font-size:12.5px;color:var(--ink-soft);font-weight:600}

/* Un loc gol de umplut, nu un rând de câmpuri lipit sub ultima grupă:
   bordura punctată spune „aici se adaugă", ca `.gol` de deasupra. */
.grupa-noua{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:13px 15px;margin-top:10px;
  border:1px dashed var(--line-strong);border-radius:16px;background:var(--paper-2);
}
.grupa-noua input[type=text]{
  flex:1 1 200px;font:inherit;font-size:14.5px;padding:9px 13px;
  border:1px solid var(--line);border-radius:11px;
  background:var(--card);color:var(--ink);
}
/* Câmpul ăsta e literalmente cel de pe `.rand-formular input[type=text]`,
   mutat aici odată cu „Numele grupei noi" — deci ia AICI exact același
   tratament de focus pe care-l avea acolo
   (`.rand-formular input[type=text]:focus-visible`), nu unul nou: inel real
   la tastatură, nu doar o bordură de 1px care oricum stă pe-o zonă deja
   punctată. */
.grupa-noua input[type=text]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Codul licenței din șină: monospace, ca peste tot unde apare un cod. */
.context-cod{
  font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.08em;
  color:var(--ink);margin:0 0 10px;
}

/* Pașii din șină: numerele într-o pastilă, ca ochiul să prindă ordinea
   înainte să citească textul. */
.pasi{margin:0;padding:0;list-style:none;counter-reset:pas;display:flex;flex-direction:column;gap:10px}
.pasi li{
  counter-increment:pas;
  display:flex;gap:9px;align-items:flex-start;
  font-size:12.5px;line-height:1.45;color:var(--ink-soft);
}
.pasi li::before{
  content:counter(pas);flex:0 0 auto;
  width:19px;height:19px;border-radius:7px;
  display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.13);color:var(--accent-ink);
  font-size:11px;font-weight:800;
}
.pasi b{color:var(--ink)}

/* ═══ Poarta: /elev/inscriere ═══════════════════════════════════════════
   Planșa cu găuri rămâne fundalul — e semnătura noastră. Ce se schimbă e
   cardul: din formular îngust de 440px devine o poartă de 840px cu două
   jumătăți. La stânga ce te așteaptă înăuntru, la dreapta ce ai de scris.
   Colțul mare și despărțitorul de 1px vin din șablonul Disum. */
.card-poarta{
  display:grid;grid-template-columns:0.86fr 1.14fr;
  width:100%;max-width:840px;
  background:var(--card);border:1px solid var(--line-strong);
  border-radius:24px;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.30);
}

.poarta-fata{
  position:relative;
  padding:28px 26px 26px;
  background:var(--paper-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.poarta-marca{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.poarta-marca img{width:34px;height:34px;display:block}
.poarta-marca b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.poarta-fata h1{
  font-size:clamp(25px,3.2vw,32px);line-height:1.03;margin:0 0 10px;
  font-weight:800;letter-spacing:-.03em;text-wrap:balance;
}
.poarta-fata .lead{font-size:14px;margin:0 0 20px}

/* Bifele sunt teal, culoarea „merge" din simulator: același semnal, alt loc. */
.promisiuni{list-style:none;margin:0 0 auto;padding:0;display:flex;flex-direction:column;gap:11px}
.promisiuni li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.promisiuni b{display:block;color:var(--ink);font-size:14px;font-weight:800;letter-spacing:-.01em}
.bifa{
  width:20px;height:20px;flex:0 0 auto;margin-top:1px;border-radius:6px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--live) 16%,var(--card));
  color:var(--live);font-size:12px;font-weight:800;
}

/* Mascota ține ușa din colț. Nu centrată: ar fura locul titlului. */
.poarta-mascota{
  display:block;width:118px;height:auto;margin:22px 0 -6px -8px;
  transform:rotate(-4deg);pointer-events:none;
}

.poarta-dos{padding:28px 28px 26px;display:flex;flex-direction:column}
.pas{
  display:flex;align-items:center;gap:8px;margin:0 0 18px;
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);
}
.pas i{flex:1;height:3px;border-radius:999px;background:var(--line)}
.pas i.plin{background:var(--accent)}
.poarta-dos .camp{margin-bottom:13px}
.poarta-dos .camp input{padding:11px 13px;border-radius:11px}
.poarta-dos .tool.mare{margin-top:6px;border-radius:12px;padding:13px 18px}
.poarta-dos .subsol{margin-top:14px}

@media (max-width:760px){
  .card-poarta{grid-template-columns:1fr;max-width:440px}
  .poarta-fata{border-right:0;border-bottom:1px solid var(--line);padding-bottom:18px}
  /* Pe o coloană, mascota trece în colțul absolut al jumătății de sus, ca să
     nu împingă formularul cu 120px sub prima îndoitură. */
  .poarta-mascota{position:absolute;right:14px;bottom:8px;width:82px;margin:0}
  .promisiuni{margin-bottom:0;padding-right:86px}
}