/* Fizica de bac — sistem de design
   Hârtie milimetrică + cutii cu contur gros și umbră plină (ca în caruselele de pe Instagram). */

:root {
  --ink: #000;
  --text: #16181d;
  --text-soft: #4a4f5c;
  --paper: #f4f7ff;
  --grid-minor: rgba(56, 118, 255, 0.07);
  --grid-major: rgba(56, 118, 255, 0.16);
  --surface: #ffffff;
  --surface-2: #eef2fd;
  --bec: #ffcf3d;
  --bec-deep: #f5a524;
  --mec: #ffde6b;
  --mec-2: #5ce1e6;
  --ele: #38b6ff;
  --ele-2: #f8ee00;
  --ter: #8ff165;
  --ter-2: #ffc4ef;
  --opt: #c9b6ff;
  --opt-2: #ffb38a;
  --ok: #138a3e;
  --ok-bg: #d6f8df;
  --nu: #d62f32;
  --nu-bg: #ffe0e0;
  --line: 2.5px;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --header-h: 68px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --text: #eef1ff;
  --text-soft: #b4bcd8;
  --paper: #10172e;
  --grid-minor: rgba(140, 170, 255, 0.05);
  --grid-major: rgba(140, 170, 255, 0.11);
  --surface: #1a2344;
  --surface-2: #232e58;
  --ok: #3ddc76;
  --ok-bg: #12391f;
  --nu: #ff6b6e;
  --nu-bg: #45161a;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #eef1ff;
    --text-soft: #b4bcd8;
    --paper: #10172e;
    --grid-minor: rgba(140, 170, 255, 0.05);
    --grid-major: rgba(140, 170, 255, 0.11);
    --surface: #1a2344;
    --surface-2: #232e58;
    --ok: #3ddc76;
    --ok-bg: #12391f;
    --nu: #ff6b6e;
    --nu-bg: #45161a;
    color-scheme: dark;
  }
}

/* ---------- bază ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 80px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -1px -1px;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--ele); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 800;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); font-variation-settings: "wdth" 88; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); font-variation-settings: "wdth" 90; }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--bec); color: #000; border: var(--line) solid var(--ink);
  padding: 8px 14px; border-radius: var(--r-sm); font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------- antet ---------- */
.antet {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--line) solid var(--ink);
}

.antet .wrap {
  display: flex; align-items: center; gap: 18px;
  min-height: var(--header-h);
}

.marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-family: var(--font-display);
  font-weight: 800; font-size: 1.28rem; letter-spacing: -0.02em;
  white-space: nowrap;
}
.marca img { width: 44px; height: 44px; }

.meniu { display: flex; gap: 6px; margin-left: auto; }

.meniu a {
  text-decoration: none; font-weight: 700; font-size: 0.95rem;
  padding: 7px 14px; border-radius: 999px; border: var(--line) solid transparent;
}
.meniu a:hover { border-color: var(--ink); background: var(--surface); }
.meniu a[aria-current="page"] { background: var(--bec); color: #000; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }

.comutator-tema {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: var(--line) solid var(--ink); background: var(--surface); color: var(--text);
  display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
}
.comutator-tema svg { width: 20px; height: 20px; }
.comutator-tema .luna { display: none; }
:root[data-theme="dark"] .comutator-tema .soare { display: none; }
:root[data-theme="dark"] .comutator-tema .luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .comutator-tema .soare { display: none; }
  :root:not([data-theme="light"]) .comutator-tema .luna { display: block; }
}

/* bara de jos pe telefon */
.bara-jos { display: none; }

@media (max-width: 860px) {
  .meniu { display: none; }
  .comutator-tema { margin-left: auto; }
  body { padding-bottom: 84px; }
  .bara-jos {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; z-index: 50; left: 10px; right: 10px; bottom: 10px;
    background: var(--surface); border: var(--line) solid var(--ink);
    border-radius: 20px; box-shadow: var(--shadow); padding: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .bara-jos a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; font-size: 0.7rem; font-weight: 700; padding: 6px 2px;
    border-radius: 14px;
  }
  .bara-jos svg { width: 22px; height: 22px; }
  .bara-jos a[aria-current="page"] { background: var(--bec); color: #000; }
}

/* ---------- butoane, cipuri ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: 12px 22px; border-radius: 999px;
  border: var(--line) solid var(--ink); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-bec { background: var(--bec); color: #000; }
.btn-mic { padding: 7px 14px; font-size: 0.9rem; box-shadow: 3px 3px 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--ink); }

.butoane { display: flex; flex-wrap: wrap; gap: 14px; }

.cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  border: 2px solid var(--ink); background: var(--surface); color: var(--text);
}

/* ---------- cutii ---------- */
.cutie {
  background: var(--surface);
  border: var(--line) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}

.cap-mecanica { --c1: var(--mec); --c2: var(--mec-2); }
.cap-electricitate { --c1: var(--ele); --c2: var(--ele-2); }
.cap-termodinamica { --c1: var(--ter); --c2: var(--ter-2); }
.cap-optica { --c1: var(--opt); --c2: var(--opt-2); }

/* ---------- secțiuni ---------- */
main { display: block; }
.sectiune { padding: 56px 0; }
.sectiune + .sectiune { padding-top: 8px; }
.intro { max-width: 62ch; color: var(--text-soft); font-size: 1.08rem; }

.titlu-pagina { padding: 48px 0 28px; }
.titlu-pagina p { max-width: 62ch; font-size: 1.12rem; color: var(--text-soft); }

/* ---------- erou (acasă) ---------- */
.erou { padding: 56px 0 40px; }
.erou .wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
}
.erou h1 { margin-bottom: 18px; }
.erou .lead { font-size: 1.2rem; max-width: 34ch; margin-bottom: 26px; }
.erou .cifre { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.panou-formule {
  position: relative; aspect-ratio: 1 / 1; max-width: 460px; width: 100%; justify-self: center;
}
.panou-formule .bec {
  position: absolute; inset: 22%;
  border-radius: 50%; border: var(--line) solid var(--ink); box-shadow: var(--shadow-lg);
  background: #000;
}
.panou-formule .bec img { width: 100%; height: 100%; border-radius: 50%; }

.sticker {
  position: absolute; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 2.1vw, 1.35rem); white-space: nowrap; color: #000;
  padding: 10px 16px; border: var(--line) solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow); background: var(--c1);
  transform: rotate(var(--rot, 0deg));
}
.sticker small { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.68rem; opacity: 0.75; }
.sticker.s1 { --c1: var(--mec); --rot: -7deg; top: 2%; left: 0; }
.sticker.s2 { --c1: var(--ele); --rot: 5deg; top: 8%; right: -2%; }
.sticker.s3 { --c1: var(--ter); --rot: -4deg; bottom: 6%; left: -4%; }
.sticker.s4 { --c1: var(--ter-2); --rot: 8deg; bottom: 0; right: 4%; }
.sticker.s5 { --c1: var(--mec-2); --rot: 3deg; top: 45%; right: -8%; }

@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: lipire 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  .sticker.s1 { animation-delay: 0.15s; }
  .sticker.s2 { animation-delay: 0.25s; }
  .sticker.s5 { animation-delay: 0.35s; }
  .sticker.s4 { animation-delay: 0.45s; }
  .sticker.s3 { animation-delay: 0.55s; }
  @keyframes lipire {
    from { opacity: 0; transform: rotate(var(--rot)) scale(1.5) translateY(-12px); }
    to { opacity: 1; transform: rotate(var(--rot)) scale(1); }
  }
}

@media (max-width: 860px) {
  .erou { padding-top: 28px; }
  .erou .wrap { grid-template-columns: 1fr; gap: 12px; }
  .panou-formule { max-width: 340px; order: -1; }
  .erou .lead { max-width: none; }
}

/* ---------- numărătoare inversă ---------- */
.numaratoare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.zi {
  display: flex; align-items: center; gap: 14px; color: #000;
  background: var(--c1); border: var(--line) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 14px 18px;
}
.zi-nr { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; font-variation-settings: "wdth" 80; font-variant-numeric: tabular-nums; }
.zi-text { display: grid; font-size: 0.88rem; line-height: 1.3; }
.zi-text b { font-size: 0.98rem; }
@media (max-width: 760px) {
  .numaratoare { grid-template-columns: 1fr; gap: 10px; }
  .zi { padding: 10px 16px; }
  .zi-nr { font-size: 2.1rem; }
}

/* ---------- continuă / serie ---------- */
.continua {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  background: var(--c1, var(--bec));
  color: #000;
}
.continua h2 { font-size: 1.5rem; margin: 0 0 4px; }
.continua p { margin: 0; }
.serie { font-weight: 800; font-family: var(--font-display); }
@media (max-width: 600px) { .continua { grid-template-columns: 1fr; } }

/* ---------- capitole ---------- */
.grila-capitole {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 22px;
}

.capitol-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: #000;
  background: var(--c1); border: var(--line) solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 22px 22px 20px; min-height: 210px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.capitol-card:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.capitol-card h3 { font-size: 1.75rem; margin: 0; font-variation-settings: "wdth" 85; }
.capitol-card .formula-mare {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  background: var(--c2); border: 2px solid var(--ink); border-radius: 10px;
  padding: 4px 10px; align-self: flex-start; transform: rotate(-2deg);
}
.capitol-card .detalii { margin-top: auto; font-weight: 700; font-size: 0.92rem; }
.capitol-card.in-curand { opacity: 0.85; }
.capitol-card.in-curand .detalii::before { content: ""; }

.bara-progres {
  height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: rgba(255, 255, 255, 0.65);
  overflow: hidden;
}
.bara-progres span { display: block; height: 100%; width: var(--p, 0%); background: #000; border-radius: 999px; }

/* ---------- examen pe scurt ---------- */
.examen-grila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.examen-grila .cutie h3 { margin-bottom: 6px; }
.puncte { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; margin-bottom: 8px; }
@media (max-width: 760px) { .examen-grila { grid-template-columns: 1fr; } }

.module { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.modul {
  border: var(--line) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow);
  background: var(--c1); color: #000; padding: 14px 16px; font-weight: 700;
}
.modul b { font-family: var(--font-display); font-size: 1.6rem; display: block; line-height: 1; }
@media (max-width: 760px) { .module { grid-template-columns: repeat(2, 1fr); } }

/* ---------- instagram ---------- */
.insta {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  background: linear-gradient(120deg, var(--ter-2), var(--opt));
  color: #000;
}
.insta svg { width: 54px; height: 54px; }
.insta h2 { font-size: 1.45rem; margin: 0 0 4px; }
.insta p { margin: 0; }
@media (max-width: 640px) { .insta { grid-template-columns: 1fr; } }

/* ---------- lista de lecții ---------- */
.filtru-capitole { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.filtru-capitole a {
  text-decoration: none; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  border: var(--line) solid var(--ink); background: var(--c1); color: #000; box-shadow: 3px 3px 0 var(--ink);
}

.bloc-capitol { margin-bottom: 52px; }
.bloc-capitol > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; margin-bottom: 18px; }
.bloc-capitol > header h2 { margin: 0; }
.bloc-capitol > header .bara-progres { flex: 1 1 160px; max-width: 260px; }

.grila-lectii { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }

.lectie-card {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start;
  background: var(--surface); border: var(--line) solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 16px 18px; text-decoration: none; color: var(--text);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lectie-card:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.lectie-card .nr {
  grid-row: span 2; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--c1); color: #000; border: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
}
.lectie-card h3 { font-size: 1.05rem; margin: 2px 0 0; line-height: 1.25; }
.lectie-card .stare { font-size: 0.85rem; color: var(--text-soft); font-weight: 700; }
.lectie-card .stare.gata { color: var(--ok); }

/* ---------- pagina lecției ---------- */
.antet-lectie {
  background: var(--c1); color: #000; border: var(--line) solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 28px 30px; margin: 28px 0 22px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end;
}
.antet-lectie h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 0; }
.antet-lectie .capitol-nr { font-weight: 800; margin: 0 0 8px; }
.antet-lectie .scor-lectie { text-align: right; font-weight: 700; font-size: 0.95rem; }
@media (max-width: 640px) {
  .antet-lectie { grid-template-columns: 1fr; padding: 22px 20px; }
  .antet-lectie .scor-lectie { text-align: left; }
}

.fir { font-size: 0.92rem; margin: 26px 0 0; color: var(--text-soft); }
.fir a { color: var(--text); font-weight: 700; }

.salturi {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 30;
  display: flex; gap: 8px; flex-wrap: wrap; padding: 8px; margin: 0 0 30px;
  background: var(--surface); border: var(--line) solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink); width: fit-content; max-width: 100%;
}
.salturi a { text-decoration: none; font-weight: 700; font-size: 0.92rem; padding: 6px 14px; border-radius: 999px; }
.salturi a:hover { background: var(--surface-2); }
@media (max-width: 860px) { .salturi { position: static; } }

.bloc { margin: 0 0 54px; }
.bloc > h2 { display: flex; align-items: center; gap: 12px; }
.bloc > h2::before {
  content: ""; width: 18px; height: 18px; flex: none; border: 2px solid var(--ink);
  background: var(--c1, var(--bec)); border-radius: 5px; transform: rotate(45deg);
}
.bloc .nota { color: var(--text-soft); max-width: 68ch; }

.formule {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px;
}
.formule li {
  background: var(--surface); border: 2px solid var(--ink); border-left: 10px solid var(--c1, var(--bec));
  border-radius: 12px; padding: 12px 16px; font-weight: 700; line-height: 1.4;
}

.fise { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.fise a { display: block; border: var(--line) solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.fise img { width: 100%; }

details.pliabil > summary {
  cursor: pointer; font-weight: 800; font-family: var(--font-display); font-size: 1.1rem;
  list-style: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--surface);
  box-shadow: 3px 3px 0 var(--ink);
}
details.pliabil > summary::-webkit-details-marker { display: none; }
details.pliabil > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; }
details.pliabil[open] > summary::after { content: "−"; }

/* flashcarduri */
.pachet { max-width: 680px; }
.pachet-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; font-weight: 700; }

.card {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: #000; perspective: 1400px; touch-action: pan-y;
}
.card-interior {
  position: relative; display: grid; min-height: 260px;
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); transform-style: preserve-3d;
}
.card.intors .card-interior { transform: rotateY(180deg); }
.card-fata, .card-spate {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 12px; padding: 30px 26px; text-align: center;
  border: var(--line) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card-fata { background: var(--c1, var(--bec)); }
.card-spate { background: var(--c2, var(--surface)); transform: rotateY(180deg); }
.card-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.25; white-space: pre-line; }
.card-indiciu { font-size: 0.82rem; font-weight: 700; opacity: 0.7; }

.comenzi-pachet { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.btn-stiu { background: var(--ter); color: #000; }
.btn-repet { background: var(--ter-2); color: #000; }
.pachet-gata { text-align: center; padding: 30px 20px; }
.pachet-gata h3 { font-size: 1.5rem; }

.lista-carduri { margin: 18px 0 0; padding-left: 22px; }
.lista-carduri li { margin: 8px 0; }
.lista-carduri b::after { content: ":"; }

/* probleme */
.scor-probleme { font-weight: 700; margin-bottom: 18px; }
.problema {
  background: var(--surface); border: var(--line) solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 20px 22px 22px; margin: 0 0 22px;
}
.problema h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin: 0 0 8px; }
.problema h3 .nr-problema {
  background: var(--c1, var(--bec)); color: #000; border: 2px solid var(--ink); border-radius: 8px;
  padding: 1px 9px; font-size: 0.95rem;
}
.enunt { font-size: 1.08rem; margin-bottom: 14px; }

.variante { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.varianta {
  display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left;
  font: inherit; color: var(--text); cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 14px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.varianta:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.varianta:disabled { cursor: default; }
.varianta .litera {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 2px solid var(--ink); background: var(--surface); font-weight: 800; font-family: var(--font-display);
}
.varianta.corect { background: var(--ok-bg); border-color: var(--ok); }
.varianta.corect .litera { background: var(--ok); color: #fff; border-color: var(--ok); }
.varianta.gresit { background: var(--nu-bg); border-color: var(--nu); }
.varianta.gresit .litera { background: var(--nu); color: #fff; border-color: var(--nu); }

.feedback { margin: 14px 0 0; font-weight: 800; }
.feedback:empty { display: none; }
.feedback.ok { color: var(--ok); }
.feedback.nu { color: var(--nu); }

.rezolvare { margin-top: 14px; }
.rezolvare > summary {
  cursor: pointer; display: inline-block; font-weight: 800; list-style: none;
  padding: 7px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--c2, var(--bec)); color: #000;
  box-shadow: 3px 3px 0 var(--ink);
}
.rezolvare > summary::-webkit-details-marker { display: none; }
.rezolvare ol { margin: 14px 0 0; padding-left: 24px; }
.rezolvare li { margin: 6px 0; }
.reia { margin-top: 14px; }

.navigare-lectii { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 10px 0 30px; }

/* ---------- subiecte / teste ---------- */
.comutator-filiera { display: inline-flex; gap: 6px; padding: 6px; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--surface); box-shadow: 3px 3px 0 var(--ink); margin-bottom: 26px; flex-wrap: wrap; }
.comutator-filiera button {
  font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 2px solid transparent;
  background: none; color: var(--text); cursor: pointer;
}
.comutator-filiera button[aria-selected="true"] { background: var(--bec); color: #000; border-color: var(--ink); }

.an { margin: 0 0 34px; }
.an h2 { font-size: 1.6rem; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.an h2 .cip { font-family: var(--font-body); font-size: 0.78rem; }
.grila-subiecte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.subiect {
  background: var(--surface); border: var(--line) solid var(--ink); border-radius: var(--r);
  box-shadow: 3px 3px 0 var(--ink); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.subiect h3 { font-size: 1rem; margin: 0; }
.subiect .linkuri { display: flex; gap: 8px; flex-wrap: wrap; }
.subiect .linkuri a {
  font-size: 0.88rem; font-weight: 700; text-decoration: none; padding: 5px 12px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--bec); color: #000;
}
.subiect .linkuri a.barem { background: var(--surface-2); color: var(--text); }
.sursa { font-size: 0.9rem; color: var(--text-soft); }

/* ---------- programa ---------- */
.programa-capitol { margin-bottom: 26px; }
.programa-capitol > h2 {
  display: inline-block; background: var(--c1); color: #000; border: var(--line) solid var(--ink);
  border-radius: 12px; padding: 4px 16px; box-shadow: 3px 3px 0 var(--ink); font-size: 1.5rem;
}
.tema { margin: 14px 0; }
.tema h3 { margin-bottom: 6px; }
.tema ul { margin: 6px 0; padding-left: 22px; }
.tema .subteme { font-weight: 700; }
.tema .notiuni li { margin: 3px 0; }

/* ---------- text lung ---------- */
.text { max-width: 70ch; }
.text h2 { margin-top: 1.4em; }
.text ul, .text ol { padding-left: 24px; }
.text li { margin: 6px 0; }

.tabel-wrap { overflow-x: auto; border: var(--line) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); background: var(--surface); }
table { border-collapse: collapse; width: 100%; }
@media (max-width: 520px) { th, td { padding: 10px 10px; font-size: 0.92rem; } }
th, td { text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--surface-2); vertical-align: top; }
th { font-family: var(--font-display); background: var(--bec); color: #000; border-bottom: var(--line) solid var(--ink); }
tr:last-child td { border-bottom: 0; }

/* ---------- formular ---------- */
.formular { display: grid; gap: 16px; max-width: 560px; }
.formular label { font-weight: 700; display: grid; gap: 6px; }
.formular input, .formular textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: var(--line) solid var(--ink); border-radius: 12px; padding: 12px 14px;
}
.formular textarea { min-height: 140px; resize: vertical; }

/* ---------- subsol ---------- */
.subsol { border-top: var(--line) solid var(--ink); margin-top: 40px; padding: 34px 0 40px; background: var(--surface); }
.subsol .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 26px; }
.subsol h2 { font-size: 1.05rem; margin-bottom: 10px; }
.subsol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.subsol a { font-weight: 700; text-decoration: none; }
.subsol a:hover { text-decoration: underline; }
.subsol .mic { font-size: 0.88rem; color: var(--text-soft); }
@media (max-width: 760px) { .subsol .wrap { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.pagina-404 { text-align: center; padding: 80px 0; }
.pagina-404 .cod { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 18vw, 10rem); line-height: 1; }

/* ---------- confetti la 6/6 ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i {
  position: absolute; top: -20px; width: 12px; height: 16px; border: 2px solid #000; border-radius: 3px;
  animation: cade 1.6s ease-in forwards;
}
@keyframes cade { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .confetti { display: none; }
}

@media (max-width: 520px) {
  body { font-size: 17px; }
  .cutie { padding: 18px; }
  .problema { padding: 16px; }
  .sectiune { padding: 40px 0; }
}