/* ============================================================
   JOCURILE DE GÂNDIRE INFORMATICĂ — înfățișarea comună
   ============================================================

   Spre deosebire de jocurile pentru tablă, care au o scenă fixă de
   16:9, aceste pagini se citesc: au enunț, desen și explicație. De
   aceea pagina se citește de sus în jos și se potrivește și pe telefon.
   ============================================================ */

:root {
  --fundal: #eef4fb;
  --card: #ffffff;
  --cerneala: #1f2933;
  --cerneala-slaba: #52606d;
  --linie: #d5dfeb;
  --albastru: #2f6fde;
  --albastru-deschis: #e3edfd;
  --verde: #2f9e5b;
  --verde-deschis: #e3f6ea;
  --rosu: #d64532;
  --rosu-deschis: #fde8e4;
  --galben: #f2b705;
  --galben-deschis: #fff6d6;
  --mov: #7c4ddb;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cerneala);
  background: var(--fundal);
  -webkit-tap-highlight-color: transparent;
}

button, select { font: inherit; color: inherit; }

.pagina {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

/* ---------- capul paginii ---------- */

.cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.cap__titlu {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
}

.cap__dreapta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scor {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--linie);
  font-weight: 600;
  white-space: nowrap;
}

.rotund {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--card);
  cursor: pointer;
  font-size: 1.2rem;
}

.inapoi {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--albastru);
  text-decoration: none;
  font-size: 0.95rem;
}

.inapoi:hover { text-decoration: underline; }

/* ---------- nivelurile ---------- */

.niveluri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.nivel {
  padding: 8px 20px;
  border-radius: 999px;
  border: 2px solid var(--albastru);
  background: var(--card);
  color: var(--albastru);
  font-weight: 700;
  cursor: pointer;
}

.nivel[aria-pressed="true"] {
  background: var(--albastru);
  color: #fff;
}

/* grupele de vârstă pe un rând, treptele de dificultate dedesubt */
.niveluri { flex-direction: column; gap: 10px; }
.niveluri__rand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.niveluri__eticheta { font-weight: 700; color: var(--cerneala-slaba); }

.treapta {
  padding: 5px 16px;
  border-radius: 999px;
  border: 2px solid var(--mov);
  background: var(--card);
  color: var(--mov);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.treapta[aria-pressed="true"] {
  background: var(--mov);
  color: #fff;
}

/* ---------- cardul problemei ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(31, 41, 51, 0.06);
}

.enunt p { margin: 0 0 10px; }

.lista {
  margin: 6px 0 12px;
  padding-left: 0;
  list-style: none;
}

.lista li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 4px;
}

.lista li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--cerneala-slaba);
}

.cerinta {
  margin: 12px 0;
  font-weight: 700;
}

.desen {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  margin: 8px auto;
}

/* ---------- butoanele de jos ---------- */

.comenzi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.buton {
  padding: 12px 26px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: var(--verde);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

.buton:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.buton:disabled { opacity: 0.45; cursor: default; }
.buton--noua { background: var(--albastru); }

/* ---------- rezultatul ---------- */

.rezultat {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  border-left: 6px solid;
}

.rezultat--corect { background: var(--verde-deschis); border-color: var(--verde); }
.rezultat--gresit { background: var(--rosu-deschis); border-color: var(--rosu); }
.rezultat--atentie { background: var(--galben-deschis); border-color: var(--galben); }

.rezultat__mesaj {
  margin: 0 0 6px;
  font-weight: 700;
}

.rezultat__explicatie p { margin: 6px 0; }

.rezultat__explicatie table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.95rem;
}

.rezultat__explicatie th,
.rezultat__explicatie td {
  border: 1px solid var(--linie);
  padding: 4px 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
}

.tabel-derulant { overflow-x: auto; }

/* ---------- legătura cu informatica ---------- */

.informatica {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 14px 20px;
}

.informatica summary {
  cursor: pointer;
  font-weight: 700;
}

.informatica p { margin: 10px 0 0; }

/* ---------- piese folosite de mai multe jocuri ---------- */

.jeton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px solid var(--linie);
  background: var(--card);
  cursor: pointer;
  font-weight: 600;
}

.jeton:hover:not(:disabled) { border-color: var(--albastru); }
.jeton:disabled { opacity: 0.35; cursor: default; }
.jeton--ales { border-color: var(--albastru); background: var(--albastru-deschis); }
.jeton--bun { border-color: var(--verde); background: var(--verde-deschis); }
.jeton--rau { border-color: var(--rosu); background: var(--rosu-deschis); }

.cod { font-family: Consolas, "Courier New", monospace; font-weight: 700; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .card { padding: 14px; }
  .cap__titlu { font-size: 1.3rem; }
}

/* ============================================================
   PIESELE FIECĂRUI JOC
   ============================================================ */

/* ---------- ordinea instalării ---------- */

.programe,
.coduri {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.sir {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px;
  list-style: none;
  counter-reset: loc;
  background: var(--fundal);
  border-radius: 12px;
}

.sir__loc {
  counter-increment: loc;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  min-height: 48px;
}

.sir__loc::before {
  content: counter(loc) ".";
  color: var(--cerneala-slaba);
  font-weight: 700;
}

.sir__loc:empty::after {
  content: "";
  flex: 1;
  height: 40px;
  border: 2px dashed var(--linie);
  border-radius: 10px;
}

/* ---------- jetonul pe șine ---------- */

.start { cursor: pointer; }
.start:focus-visible circle { stroke-width: 6; }

/* ---------- prima lampă stinsă ---------- */

.contor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}

.contor__verificari,
.contor__interval {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
}

.contor__verificari {
  background: var(--albastru-deschis);
  border: 2px solid var(--albastru);
  color: var(--albastru);
}

.contor__buline { display: inline-flex; gap: 5px; }

.contor__bulina {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--albastru);
  background: #fff;
}

.contor__bulina--folosita { background: var(--albastru); }
.contor__bulina--peste { background: var(--rosu); border-color: var(--rosu); }

.contor__numar { font-size: 1.15rem; }

.contor__interval {
  border-radius: 16px;
  line-height: 1.9;
  background: var(--galben-deschis);
  border: 2px solid var(--galben);
  color: #6b4a00;
}

.contor__interval b {
  display: inline-block;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--mov);
  color: #fff;
  text-align: center;
  font-size: 1.15rem;
}

.lampi {
  display: grid;
  grid-template-columns: repeat(var(--pe-rand), minmax(0, 1fr));
  gap: 6px;
  max-width: calc(var(--pe-rand) * 64px);
}

.lampa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 4px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}

.lampa:disabled { cursor: default; }

.lampa__bec {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, #9aa5b1, #9aa5b1 4px, #7b8794 4px, #7b8794 8px);
}

.lampa[data-stare="aprinsa"] .lampa__bec {
  background: radial-gradient(circle at 40% 35%, #fff7c2, #f2b705 70%);
  box-shadow: 0 0 10px #f2b705;
}

.lampa[data-stare="stinsa"] .lampa__bec { background: #3e4c59; }

.lampa__numar {
  font-size: 0.75rem;
  color: var(--cerneala-slaba);
}

.lampa--gasita {
  border: 3px solid var(--verde);
  background: var(--verde-deschis);
}

/* ---------- turnurile de cuburi ---------- */

.operatii {
  columns: 3 150px;
  margin: 6px 0;
}

.turnuri {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 10px;
}

.turn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.turn__cub {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--galben-deschis);
  border: 3px solid var(--galben);
  font-size: 1.8rem;
  font-weight: 700;
}

.turn__baza {
  width: 96px;
  padding: 2px 0;
  border-radius: 6px;
  background: var(--cerneala-slaba);
  color: #fff;
  text-align: center;
  font-weight: 700;
}

.turn select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: var(--card);
}

/* ---------- codul cu semne ---------- */

.semn { font-size: 1.15em; }
.semn--a { color: var(--albastru); }
.semn--b { color: #e07b00; }

.tabel-coduri { border-collapse: collapse; margin: 6px 0 10px; }
.tabel-coduri th,
.tabel-coduri td {
  border: 1px solid var(--linie);
  padding: 6px 12px;
  text-align: center;
  white-space: nowrap;
}
.tabel-coduri th { background: var(--fundal); text-align: left; }

.mesaj-codat {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--fundal);
  font-size: 1.3rem;
  letter-spacing: 2px;
  word-break: break-all;
}

.raspuns-litere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.raspuns-litere__text {
  min-width: 160px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 2px dashed var(--linie);
  font-size: 1.4rem;
  letter-spacing: 4px;
}

/* ---------- desen după cod ---------- */

.cod-randuri { margin: 6px 0; }
.cod-mare { font-size: 1.2rem; }

.grila {
  display: grid;
  grid-template-columns: repeat(var(--coloane), 48px);
  gap: 3px;
  margin-top: 8px;
}

.celula {
  width: 48px;
  height: 48px;
  border: 1px solid #9aa5b1;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.celula--neagra { background: var(--cerneala); }
.celula--gresita { outline: 4px solid var(--rosu); outline-offset: -4px; }

@media (max-width: 420px) {
  .grila { grid-template-columns: repeat(var(--coloane), 40px); }
  .celula { width: 40px; height: 40px; }
}

/* ---------- programul repetat ---------- */

.sageata {
  min-width: 52px;
  justify-content: center;
  font-size: 1.4rem;
}

.sageata--goala { color: var(--cerneala-slaba); font-size: 0.9rem; border-style: dashed; }
.sir--program { gap: 8px; }

/* ---------- legătura cu informatica, mai ușor de citit ---------- */

.informatica summary { color: var(--mov); font-size: 1.05rem; }
.informatica .lista { margin-top: 8px; }
.informatica .lista li { margin-bottom: 8px; }
.informatica .lista li::before { color: var(--mov); font-weight: 700; }

/* ---------- ghirlanda de becuri ---------- */

.becuri {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0;
}

.bec-loc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: var(--fundal);
}

.bec-desen { width: 72px; height: 99px; }

.bec-culori { display: flex; gap: 6px; }

.culoare {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--linie);
  cursor: pointer;
}

.culoare[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cerneala); }
.culoare:disabled { opacity: 0.25; cursor: default; }

.comenzi--joc { align-items: center; margin-top: 10px; }
.buton--aprinde { background: #d48a00; }

.istoric { margin-top: 12px; }
.istoric__titlu { margin: 0 0 6px; font-weight: 700; }

.istoric__rand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-weight: 700;
}

.istoric__pata {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  opacity: 0.55;
}

.istoric__pata--bun { opacity: 1; outline: 3px solid var(--verde); }

/* ---------- borcanele lui Bit ---------- */

.incercari { display: grid; gap: 10px; margin: 8px 0; }

.incercare {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--fundal);
}

.enunt .incercare__titlu { margin: 0 0 6px; }
.incercare__efecte { display: flex; flex-wrap: wrap; gap: 6px; }

.eticheta {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--linie);
  font-size: 0.95rem;
}

.borcan { flex-direction: column; min-width: 64px; }
.borcan__desen { font-size: 1.8rem; }

/* ---------- vânătoarea de comori ---------- */

.cutii {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 8px 0;
}

.cutie-comoara {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 14px;
  border: 2px solid #b07a3a;
  background: #fbefdc;
  cursor: pointer;
}

.cutie-comoara__capac { font-size: 2.2rem; line-height: 1.2; }

.cutie-comoara__bilet {
  padding: 2px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px dashed #b07a3a;
  font-size: 1rem;
}

.cutie-comoara--aleasa { border-color: var(--albastru); background: var(--albastru-deschis); }
.cutie-comoara:disabled { cursor: default; opacity: 0.6; }

/* Răspunsul arătat după verificare rămâne la culoare plină, deși butonul e dezactivat. */
.jeton--bun:disabled,
.jeton--rau:disabled { opacity: 1; }

/* ---------- pinguinii pe sloiuri ---------- */

.sloiuri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 10px;
  border-radius: 12px;
  background: #d8ecfb;
}

.sloiuri__eticheta {
  flex-basis: 100%;
  font-weight: 700;
  color: var(--cerneala-slaba);
}

.sloi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 54px;
  padding: 6px 8px;
  border-radius: 20px 20px 10px 10px;
  background: #fff;
  box-shadow: 0 4px 0 #9cc7ea;
  font-size: 1.2rem;
}

.sloi__numar { font-weight: 700; color: var(--albastru); }

/* ---------- lanțul de mesaje ---------- */

.sir--vertical { flex-direction: column; align-items: flex-start; }
.sir--vertical .sir__loc { width: 100%; max-width: 240px; }
.mesaj { white-space: nowrap; }

/* ---------- discul de criptare ---------- */

.discuri { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0; }

.disc {
  width: 220px;
  max-width: 46%;
  height: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--fundal);
}

/* ---------- suprapunerea cartonașelor ---------- */

.cartoane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
}

.cartoane__semn { font-size: 1.8rem; font-weight: 700; color: var(--cerneala-slaba); }

.carton { margin: 0; text-align: center; }
.carton figcaption { font-size: 0.85rem; color: var(--cerneala-slaba); }

.carton__grila {
  display: grid;
  grid-template-columns: repeat(var(--coloane), 26px);
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  background: #9aa5b1;
}

.carton__celula { width: 26px; height: 26px; background: #fff; }
.carton__celula--neagra { background: var(--cerneala); }

/* ---------- codul de bare ---------- */

.cod-bare {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  margin: 6px 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--linie);
}

.bare { display: block; height: auto; }
.cod-bare .bare { max-width: none; }

.tabel-bare { border-collapse: collapse; margin: 6px 0; }

.tabel-bare th,
.tabel-bare td {
  border: 1px solid var(--linie);
  padding: 4px;
  text-align: center;
}

.tabel-bare th { background: var(--fundal); }
.tabel-bare th .bare { margin: 0 auto; }

.celula-tabel {
  width: 40px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: var(--card);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}

.celula-tabel:hover { background: var(--albastru-deschis); }

/* ---------- foile de pe masă ---------- */

.pata {
  display: inline-block;
  width: 26px;
  height: 18px;
  margin-right: 4px;
  border-radius: 4px;
  vertical-align: middle;
}

/* ---------- colierul de mărgele ---------- */

.colier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(transparent calc(50% - 1px), #7b8794 calc(50% - 1px), #7b8794 calc(50% + 1px), transparent calc(50% + 1px)), var(--fundal);
}

.colier__margea {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

.colier__lipsa {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 2px dashed var(--cerneala-slaba);
  font-weight: 700;
  color: var(--cerneala-slaba);
  white-space: nowrap;
}

.rezultat__explicatie .colier__margea { width: 24px; height: 24px; }

/* ---------- răspunsul afișat sub desen ---------- */

.raspuns-joc {
  min-height: 1.5em;
  font-weight: 700;
  color: var(--mov);
}

/* ---------- robotul care se rotește ---------- */

.program-robot {
  display: grid;
  gap: 8px;
  margin: 6px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--fundal);
}

.program-robot__rand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.comanda {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--card);
  border: 2px solid var(--albastru);
  font-size: 1.3rem;
}

.sageata-mare { font-size: 1.3rem; }

/* ---------- desenul care se repetă, piesa rotită ---------- */

.tablou { display: block; height: auto; }

.plan-rand { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.plan {
  display: grid;
  grid-template-columns: repeat(2, 54px);
  gap: 3px;
  padding: 4px;
  border-radius: 8px;
  background: #9aa5b1;
}

.plan__sfert { width: 54px; height: 54px; }

.plan__sfert--repeta {
  display: grid;
  place-items: center;
  background: var(--galben-deschis);
  color: var(--mov);
  font-size: 1.8rem;
  font-weight: 700;
}

.variante-desen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.varianta-desen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  border: 3px solid var(--linie);
  background: var(--card);
  cursor: pointer;
  font-weight: 700;
}

.varianta-desen--aleasa { border-color: var(--albastru); background: var(--albastru-deschis); }
.varianta-desen--buna { border-color: var(--verde); background: var(--verde-deschis); }
.varianta-desen:disabled { cursor: default; }

.piesa-start { margin: 6px 0; }

.pasi-piesa { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pasi-piesa figure { margin: 0; text-align: center; }
.pasi-piesa figcaption { font-size: 0.85rem; color: var(--cerneala-slaba); }

/* ---------- ultimul băț ---------- */

.bete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  min-height: 90px;
  margin: 10px 0;
  padding: 12px;
  border-radius: 12px;
  background: #e9d8bd;
}

.bat {
  width: 10px;
  height: 70px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e4573d 0 12%, #c98a4b 12%);
}

.bete__numar { margin-left: 10px; font-size: 1.6rem; font-weight: 700; color: #6b4a00; }

/* ---------- cântarul cu talere ---------- */

.cutii-cantar { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }

.cutie-cantar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 8px;
  border-radius: 12px;
  border: 3px solid #b07a3a;
  background: #fbefdc;
  font-size: 1.1rem;
  cursor: pointer;
}

.cutie-cantar span { font-size: 1.8rem; }
.cutie-cantar small { color: var(--cerneala-slaba); }
.cutie-cantar--aleasa { border-color: var(--albastru); background: var(--albastru-deschis); }

.alegere-cutie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.alegere-cutie__eticheta { min-width: 130px; font-weight: 700; }
.alegere-cutie .programe { margin: 0; }