/* tranzitie nativa intre documente (Chrome/Edge recente) - vezi nota identica
   din index.html; browserele fara suport ignora regula, fara nicio regresie. */
@view-transition{ navigation: auto; }

:root{
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 52px;
  --radius: 14px;

  /* ===== Tema „Bern / Atlas" (portată din prototipul Biologia.Bern) ===== */
  --ink: #0D1114;
  --surface: #151B20;
  --surface-2: #1E262D;
  --emerald: #4ADE80;
  --emerald-dim: #34B966;
  --emerald-rgb: 74,222,128;
  --gtur-accent-rgb: 74,222,128; /* folosit de guided-tour.css - vezi și chimie/style.css */
  --sepia: #E8B87D;
  --crimson: #F97066;
  --crimson-rgb: 249,112,102;
  --parchment: #F3EAD7;
  --parchment-ink: #2A2013;
  --gold: #F2C14E;
  --text: #EEF2F5;
  --text-dim: rgba(238,242,245,.68);

  /* Bootstrap foloseste --bs-secondary-color pentru .text-muted (folosit in zeci de locuri
     pe site) - fara aceasta linie, ramane fix la o culoare gandita pt fundal alb si devine
     aproape invizibil pe fundal intunecat. Legandu-l de --text-dim, se adapteaza automat
     pe toate cele 3 teme (intunecat/luminos/confort ochi), fara sa umblam prin fiecare loc. */
  --bs-secondary-color: var(--text-dim);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --border: rgba(238,242,245,.12);
  --muted: var(--text-dim);
  --primary-color: var(--emerald);
  --secondary-color: var(--sepia);
  --descriere-bg: var(--surface);
  --descriere-border: rgba(74,222,128,.25);
  --descriere-shadow: 0 10px 34px rgba(74,222,128,.10);

  /* ===== Culori "tip" pentru cardurile de testare (independente de identitatea
     materiei) - folosite pt fundal pastelat + iconițe pe pagina Testare ===== */
  --tint-green-rgb: 74,222,128;
  --tint-rose-rgb: 244,114,182;
  --tint-purple-rgb: 192,132,252;
  --tint-blue-rgb: 96,165,250;
  --tint-orange-rgb: 251,146,60;
}

html, body{
  height: 100%;
  font-family: var(--font-body);
}

body{
  background: var(--ink);
  background-image:
    linear-gradient(rgba(74,222,128,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  background-attachment: fixed;
  color: var(--text);
  margin: 0;
  opacity: 1;
  /* redusă de la .25s la .12s — tranziția dintre pagini (240ms -> 110ms
     în JS, vezi navigheazaSmooth() din fiecare pagină) se simțea "grea"
     la fiecare navigare, cumulat pe o sesiune întreagă de studiu */
  transition: opacity .12s ease;
}

/* ===== Tranzitie lina intre pagini (fade la iesire/intrare) ===== */
body.page-hidden{
  opacity: 0;
}

.page-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-subtitle{
  color: var(--muted);
  font-size: .95rem;
}

.app-layout{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 18px;
  align-items: start;
}

.sidebar{
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
}

.sidebar-panel,
.content-panel{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.sidebar-panel{
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-content{
  overflow: auto;
  padding-top: .25rem;
}

.soft-divider{
  margin: .75rem 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.section-title{
  font-size: .9rem;
  font-weight: 700;
  color: rgba(0,0,0,.75);
  margin-bottom: .5rem;
  letter-spacing: .01em;
}

/* ---- Butonul de deschidere/inchidere a listei de categorii din sidebar ---- */
#btn-toggle-categorii{
  border-radius: 12px;
}

.toggle-caret{
  display: inline-block;
  transition: transform .2s ease;
}

#btn-toggle-categorii.categorii-deschise .toggle-caret{
  transform: rotate(180deg);
}

.cat-mare{
  text-align: left;
  font-weight: 700;
  border-radius: 12px;
}

.subcat-btn{
  width: 100%;
  text-align: left;
  border-radius: 12px;
  font-weight: 600;
  font-size: .92rem;
}

.sidebar .btn{
  box-shadow: none !important;
}

.content-panel{
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: content;
}

.content-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,0));
}

.filter-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(13,110,253,.08);
  border: 1px solid rgba(13,110,253,.18);
  color: rgba(13,110,253,.95);
  font-weight: 600;
  font-size: .9rem;
}

.search-wrap{
  display:flex;
  gap: .5rem;
  align-items:center;
  min-width: 280px;
}

.search-wrap input.form-control{
  border-radius: 12px;
  border-color: rgba(0,0,0,.12);
}

.search-wrap input.form-control:focus{
  border-color: rgba(13,110,253,.35);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}

.search-wrap #btn-clear{
  border-radius: 10px;
  padding: .35rem .55rem;
}

#substante{
  padding: 16px;
}

.subst-card{
  width: 230px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fbfbfc;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}

.subst-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.subst-card:focus-visible{
  outline: 2px solid rgba(111, 66, 193, .5);
  outline-offset: 2px;
}

/* ---- Aparitia cardurilor la incarcare / filtrare (stagger, delay setat din JS) ---- */
.card-enter{
  opacity: 0;
  animation: cardFadeIn .45s ease forwards;
}

@keyframes cardFadeIn{
  from{ opacity: 0; transform: translateY(10px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.img-wrap{
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  padding: 10px;
}

.img-wrap img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.subst-name{
  margin-top: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111;
  font-size: 1rem;
}

/* card fara imagine (ex: vitamine) - numele devine punctul central al cardului */
.subst-name-only{
  margin-top: 0;
  font-size: 1.35rem;
  padding: 28px 6px;
  color: var(--primary-color);
}

/* ===== Buton flotant (stanga-sus) - vizibil DOAR cand meniul e ascuns ===== */
.menu-float-btn{
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1050;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--primary-color);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(111,66,193,.35);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

body.menu-hidden .menu-float-btn{
  display: flex;
}

.menu-float-btn:hover{
  transform: scale(1.08);
  background: var(--secondary-color);
}

body.game-mode .menu-float-btn{
  display: none !important;
}

/* ===== Buton de inchidere, in interiorul meniului ===== */
.menu-close-btn{
  border-radius: 8px;
}

.app-layout{
  transition: grid-template-columns .3s ease;
}

body.menu-hidden .app-layout{
  grid-template-columns: 1fr;
}

body.menu-hidden .sidebar{
  display: none;
}

/* ===== Redimensionare meniu (tragere de marginea dreapta) ===== */
.sidebar-resizer{
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  z-index: 5;
  border-radius: 6px;
}

.sidebar-resizer:hover{
  background: rgba(111, 66, 193, .25);
}

body.resizing-sidebar{
  cursor: ew-resize;
  user-select: none;
}

body.resizing-sidebar .sidebar-resizer{
  background: rgba(111, 66, 193, .35);
}

body.resizing-sidebar .app-layout{
  transition: none;
}

@media (max-width: 992px){
  .app-layout{
    grid-template-columns: 1fr;
  }

  .sidebar{
    position: relative;
    height: auto;
    top: auto;
  }

  .sidebar-resizer{
    display: none;
  }
}

@media (max-width: 576px){
  .search-wrap{
    min-width: 100%;
  }

  .subst-card{
    width: 100%;
  }
}

.descriere-container{
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.descriere-card{
  background: var(--descriere-bg);
  border: 1px solid var(--descriere-border);
  border-radius: var(--radius);
  box-shadow: var(--descriere-shadow);
  padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.descriere-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(111,66,193,.15);
}

.descriere-card h2{
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 12px;
}

.descriere-card p{
  color: #333;
  line-height: 1.65;
  font-size: 1rem;
}

.sugestii-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sugestii-box textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  padding: 10px;
  font-size: .95rem;
  resize: vertical;
}

.sugestii-box button{
  align-self: flex-end;
  background: var(--secondary-color);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}

.sugestii-box button:hover{
  background: #6f42c1;
}
.hero-section {
  padding-top: 10px;
  position: relative;
  /* overflow:hidden e pe .hero-decor (mai jos), nu aici - altfel un titlu
     mai lung decat s-a anticipat initial risca sa fie taiat din card */
}

/* ---- Molecule plutitoare, decorative, in fundalul hero-ului ---- */
.hero-decor{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-atom{
  position: absolute;
  width: 70px;
  height: 70px;
  opacity: .55;
}

.hero-atom-1{
  top: -6px;
  left: 6%;
  width: 64px;
  height: 64px;
  animation: heroFloat 7s ease-in-out infinite;
}

.hero-atom-2{
  top: 10px;
  right: 8%;
  width: 84px;
  height: 84px;
  animation: heroFloat 9s ease-in-out infinite .6s;
}

.hero-atom-3{
  bottom: -14px;
  left: 42%;
  width: 50px;
  height: 50px;
  animation: heroFloat 6s ease-in-out infinite 1.1s;
}

@keyframes heroFloat{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(8deg); }
}

/* ---- Aparitia titlului / subtitlului din hero ---- */
.hero-anim{
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: heroFadeUp .9s cubic-bezier(.16,1,.3,1) forwards;
}

/* miscare mai ampla (36px, nu 16px) + o usoara scalare de la 96% + un blur
   care se limpezeste in timp ce elementul apare - "cinematografic", nu doar
   un fade simplu. cubic-bezier(.16,1,.3,1) e aceeasi curba "expo-out" folosita
   deja la deschiderea meniului fullscreen, ca miscarea sa se simta unitara. */
@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(36px) scale(.96); filter: blur(6px); }
  to{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ---- Efect general de "flow-in" la incarcarea paginii - headerul, meniul
   lateral si cardurile din hub apar cu o usoara alunecare de jos in sus +
   fade, in loc de fade-ul unic al intregii pagini (body.page-hidden). Fiecare
   element primeste un delay propriu (style="animation-delay" in HTML), asa
   ca elementele curg unul dupa altul, nu toate deodata. Foloseste aceleasi
   keyframes ca .hero-anim, dar fara position/z-index (elementele astea au
   deja propriul lor context de pozitionare, ex. .site-header e fixed). */
.flow-in{
  opacity: 0;
  animation: heroFadeUp .85s cubic-bezier(.16,1,.3,1) forwards;
}

@media (prefers-reduced-motion: reduce){
  .hero-atom, .hero-anim, .card-enter, .flow-in{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.func-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.func-groups span {
  background: rgba(111, 66, 193, 0.15);
  color: #6f42c1;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
}
/* ===== Full‑screen joc (fără sidebar) ===== */
body.game-mode .app-layout {
  grid-template-columns: 1fr !important;
}

body.game-mode{
  background: linear-gradient(160deg, #241b3a, #3d2260 55%, #5c2a5e);
  transition: background .35s ease;
}

/* ---- Paleta de culori de fundal, aleasa de utilizator in timpul jocului ---- */
body.game-mode.bg-crem{ background: linear-gradient(160deg, #fdf6e9, #f3e6c8 55%, #ecdcb3); }
body.game-mode.bg-verde{ background: linear-gradient(160deg, #eafbea, #c9f2cf 55%, #a8e6b0); }
body.game-mode.bg-portocaliu{ background: linear-gradient(160deg, #fff2e0, #ffd9a8 55%, #ffbf78); }
body.game-mode.bg-roz{ background: linear-gradient(160deg, #fff0f5, #ffd1e3 55%, #ffb3d1); }
body.game-mode.bg-albastru{ background: linear-gradient(160deg, #eaf4ff, #bfe0ff 55%, #8fc9ff); }
body.game-mode.bg-mov{ background: linear-gradient(160deg, #241b3a, #3d2260 55%, #5c2a5e); }

body.game-mode main{
  min-height: 100vh;
}

body.game-mode .content-panel{
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ---- FULLSCREEN real pentru joc: ascunde header-ul fix, blochează scroll-ul
   paginii din spate și transformă #game-container într-un overlay pe tot
   ecranul, indiferent unde se află el în ierarhia .app-layout / main. ---- */
body.game-mode{
  overflow: hidden;
}
body.game-mode .site-header{
  display: none !important;
}
body.game-mode #game-container{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px clamp(16px, 4vw, 40px) 40px;
  /* fundal PROPRIU (nu doar transparent) - altfel, la o poziție de scroll oarecare
     din pagina de dedesubt, conținutul rămas vizibil (ex. footer-ul) s-ar vedea
     "prin" zonele fără carduri ale overlay-ului fullscreen. */
  background: linear-gradient(160deg, var(--ink), var(--surface) 55%, var(--surface-2));
}
body.game-mode #game-container .game-question-card{
  margin: auto;
  width: 100%;
}
body.game-mode.bg-crem #game-container{ background: linear-gradient(160deg, #fdf6e9, #f3e6c8 55%, #ecdcb3); }
body.game-mode.bg-verde #game-container{ background: linear-gradient(160deg, #eafbea, #c9f2cf 55%, #a8e6b0); }
body.game-mode.bg-portocaliu #game-container{ background: linear-gradient(160deg, #fff2e0, #ffd9a8 55%, #ffbf78); }
body.game-mode.bg-roz #game-container{ background: linear-gradient(160deg, #fff0f5, #ffd1e3 55%, #ffb3d1); }
body.game-mode.bg-albastru #game-container{ background: linear-gradient(160deg, #eaf4ff, #bfe0ff 55%, #8fc9ff); }
body.game-mode.bg-mov #game-container{ background: linear-gradient(160deg, #241b3a, #3d2260 55%, #5c2a5e); }
@media (max-width: 560px){
  body.game-mode #game-container{
    padding: 14px 12px 28px;
  }
}

/* ---- FULLSCREEN pentru modurile de studiu tip "cartonașe" (nu grilă -
   ex. flashcards de unități numerice, flashcards proprii) - spre deosebire
   de #game-container (care e FRATE cu #select-categ în DOM), aceste
   containere sunt IMBRICATE în interiorul lui #select-categ, deci nu putem
   ascunde tot #select-categ (i-ar ascunde și conținutul activ). În schimb,
   îl facem doar invizibil (visibility:hidden, se moștenește la copii), iar
   containerul activ de cartonașe își resetează explicit vizibilitatea și
   devine el însuși un overlay pe tot ecranul, la fel ca #game-container. ---- */
body.game-mode #select-categ{
  visibility: hidden;
}
body.game-mode .flashcard-fullscreen{
  visibility: visible;
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px clamp(16px, 4vw, 40px) 40px;
  background: linear-gradient(160deg, var(--ink), var(--surface) 55%, var(--surface-2));
}
@media (max-width: 560px){
  body.game-mode .flashcard-fullscreen{
    padding: 14px 12px 28px;
  }
}
/* .hero-anim / .card-enter (cardurile "test-type-card" primesc .card-enter
   la afisare, din JS) au o ANIMATIE CSS legata de transform/filter/opacity
   (heroFadeUp / cardFadeIn, fill-mode:forwards). Chiar daca am reseta doar
   VALOAREA rezultata (transform:none, opacity:1 etc.), cat timp animatia
   ramane atasata elementul tot devine containing block nou pentru
   descendentii position:fixed (browserul il trateaza ca avand transform
   "activ" cat timp exista o animatie pe acea proprietate, indiferent de
   valoarea calculata) - exact ca element cu will-change:transform. Asta
   "prindea" cardul fullscreen de cartonase in interiorul acelui element in
   loc sa acopere tot ecranul (bug vazut la testare: cardul aparea mic,
   intr-un colt, in loc de fullscreen). Solutia e sa oprim explicit ANIMATIA
   (nu doar valorile), la fel cum se face deja mai jos pentru
   prefers-reduced-motion. Nu se vede nicio diferenta vizual, fiindca aceste
   elemente sunt oricum invizibile cat timp e game-mode (visibility:hidden
   mai sus). */
body.game-mode .hero-anim,
body.game-mode .card-enter,
body.game-mode .test-type-card{
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ---- "De ce ai greșit această întrebare?" — apare aleatoriu, sub explicație ---- */
.motiv-greseala-box{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  animation: motivFadeIn .25s ease;
}
@keyframes motivFadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }
.motiv-greseala-intrebare{
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: 8px;
  color: var(--text);
}
.motiv-greseala-optiuni{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.motiv-greseala-btn{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.motiv-greseala-btn:hover{
  background: rgba(var(--emerald-rgb),.12);
  border-color: var(--emerald);
}
.motiv-greseala-thanks{
  font-size: .82rem;
  color: var(--text-dim);
}

/* ---- Sfaturi personalizate (plan Max) — in modalul de statistici detaliate.
   Modalul (#statsDetaliateModal) rămâne mereu pe fundal deschis (Bootstrap
   implicit), indiferent de tema site-ului - de aceea culorile de aici sunt
   FIXE (nu var(--text)/var(--text-dim), gândite pt. fundal închis), la fel
   ca restul conținutului din acest modal (ex. lista de capitole). ---- */
.sfaturi-personalizate-box{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.35);
}
.sfaturi-personalizate-titlu{
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 6px;
  color: #15803d;
}
.sfaturi-personalizate-text{
  font-size: .88rem;
  color: #1f2937;
  line-height: 1.45;
}
.sfaturi-personalizate-upsell{
  font-size: .85rem;
  color: #4b5563;
}
.sfaturi-personalizate-upsell button{
  margin-top: 8px;
}

/* ---- Selectarea categoriilor, aranjate pe coloane (nu una sub alta) ---- */
.cat-chip-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.cat-chip{
  border-radius: 999px;
  font-weight: 600;
  padding: 8px 16px;
}

.cat-chip.active{
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.special-mode-badge{
  background: rgba(214, 51, 132, .12);
  color: var(--secondary-color);
  font-weight: 700;
  font-size: .78rem;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---- Bara de sus in timpul jocului ---- */
.game-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 4px 22px;
}

.game-quit-btn{
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255,255,255,.35);
}

.game-quit-btn:hover{
  background: rgba(0, 0, 0, .5);
  color: #fff;
}

.game-score{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.game-score-pill{
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}

.game-score-correct{ background: rgba(25, 135, 84, .85); }
.game-score-wrong{ background: rgba(220, 53, 69, .85); }
.game-score-remaining{ background: rgba(0, 0, 0, .3); }

@keyframes scorePulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.18); }
  100%{ transform: scale(1); }
}

.score-pulse{
  animation: scorePulse .35s ease;
}

/* ---- Selectorul de culoare de fundal ---- */
.game-theme-picker{
  position: relative;
}

.game-theme-btn{
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255,255,255,.35);
}

.game-theme-btn:hover{
  background: rgba(0, 0, 0, .5);
  color: #fff;
}

.game-theme-palette{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  gap: 8px;
  background: #fff;
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  z-index: 20;
}

.theme-swatch{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease;
}

.theme-swatch:hover{
  transform: scale(1.15);
}

/* ---- Cardul intrebarii ---- */
.question-enter{
  animation: questionFadeIn .4s ease;
}

@keyframes questionFadeIn{
  from{ opacity: 0; transform: translateY(14px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}


.game-question-card{
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
  padding: 28px 26px;
}

.game-question-card h2{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}

.game-question-img{
  max-width: 100%;
  max-height: 260px;
  height: auto;
}

.vitamin-prompt{
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary-color);
  padding: 18px 0;
}

/* ---- Optiunile de raspuns ---- */
.raspuns-optiune{
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.raspuns-optiune:hover{
  background: rgba(111, 66, 193, .06);
  border-color: rgba(111, 66, 193, .3);
}

.raspuns-optiune label{
  cursor: pointer;
  font-weight: 600;
  flex: 1;
}

.raspuns-optiune.disabled{
  cursor: default;
}

.raspuns-optiune.optiune-corecta{
  background: rgba(25, 135, 84, .12);
  border-color: rgba(25, 135, 84, .5);
}

.raspuns-optiune.optiune-gresita{
  background: rgba(220, 53, 69, .12);
  border-color: rgba(220, 53, 69, .5);
}

/* ---- Butoane navigare cartonașe (Anterior / Următorul) — același limbaj vizual
   ca opțiunile de la grilă (.raspuns-optiune: bordură + colțuri rotunjite +
   hover), dar sub formă de casetă compactă, pătrată/dreptunghiulară, ca să se
   distingă vizual de o opțiune de răspuns. Folosește var(--primary-color)/
   var(--border) ca să se adapteze corect pe toate cele 3 teme. ---- */
.flash-nav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 140px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.flash-nav-btn:hover:not(:disabled){
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  transform: translateY(-1px);
}
.flash-nav-btn:active:not(:disabled){ transform: translateY(0); }
.flash-nav-btn:disabled{ opacity: .45; cursor: default; transform: none; }
.flash-nav-btn-primary{
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
  color: var(--primary-color);
  font-weight: 700;
}
.flash-nav-btn-primary:hover:not(:disabled){
  background: color-mix(in srgb, var(--primary-color) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 60%, transparent);
}

@media (max-width: 576px){
  .game-question-card{
    padding: 20px 16px;
    border-radius: 14px;
  }

  .vitamin-prompt{
    font-size: 1.8rem;
  }
}

/* ===== Denumire IUPAC / denumiri uzuale (afisate in modalul de detalii) ===== */
.alt-names{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alt-name-line{
  font-size: 1rem;
  color: #222;
  line-height: 1.5;
}

.alt-name-label{
  font-weight: 700;
  color: var(--primary-color);
}

/* ===== Surse alimentare (vitamine) - discret, gri ===== */
.food-sources{
  background: rgba(0, 0, 0, .035);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  padding: 10px 14px 10px 30px;
  font-size: .95rem;
  font-weight: 400;
  color: #666;
  line-height: 1.5;
  text-align: left;
  margin-block: 0;
}

.food-sources li{
  margin-bottom: 6px;
}

.food-sources li:last-child{
  margin-bottom: 0;
}

/* ===== Actiune fiziologica (vitamine) - accentuat, mai important ===== */
.physio-action{
  background: rgba(13, 110, 253, .07);
  border: 1px solid rgba(13, 110, 253, .2);
  border-radius: 10px;
  padding: 12px 14px 12px 30px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.6;
  text-align: left;
  margin-block: 0;
}

.physio-action li{
  margin-bottom: 8px;
}

.physio-action li:last-child{
  margin-bottom: 0;
}

/* ===== Observatii / notite de recapitulare, afisate cu bulinuta (in modalul de detalii) ===== */
.obs-box{
  background: rgba(214, 51, 132, 0.06);
  border: 1px solid rgba(214, 51, 132, 0.18);
  border-radius: 10px;
  padding: 12px 14px 12px 30px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #222;
  line-height: 1.6;
  text-align: left;
  margin-block: 0;
}

.obs-box li{
  margin-bottom: 8px;
}

.obs-box li:last-child{
  margin-bottom: 0;
}

/* ===== Modal de detalii substanta (deschis la click pe card) ===== */
#detaliiModal .modal-content{
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

#detaliiModal .modal-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

#detaliiModal .modal-title{
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

#detaliiModalBody .text-muted.small{
  font-size: 1rem;
  font-weight: 700;
  color: #444 !important;
}

.img-wrap-lg{
  padding: 18px;
}

.img-wrap-lg img{
  max-width: 100%;
  max-height: 340px;
}

#detaliiModalBody .alt-names,
#detaliiModalBody .obs-box{
  text-align: left;
}

/* ===== Galerie de imagini secundare (ex: forma acida/bazica a metiloranjului) ===== */
.secondary-img-gallery{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.secondary-img-item{
  width: 220px;
  text-align: center;
}

.secondary-img-item .img-wrap{
  padding: 10px;
}

.secondary-img-item .img-wrap img{
  max-width: 100%;
  max-height: 180px;
}

.secondary-img-item-wide{
  width: 100%;
}

.secondary-img-item-wide .img-wrap img{
  max-width: 100%;
  max-height: 260px;
  width: auto;
}

.secondary-img-label{
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
}

/* ===== Panou informativ (ex: Antibiotice) - fara structuri chimice inca ===== */
.antibiotice-info{
  width: 100%;
  max-width: 100%;
  background: #fbfbfc;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 22px 26px;
  font-size: 1.02rem;
}

.antibiotice-info h3{
  color: var(--primary-color);
  font-weight: 800;
}

.antibiotice-info p{
  line-height: 1.65;
}

/* panourile cu tabel (Enzime, Hormoni) au nevoie de mai mult spatiu pe orizontala */
.info-panel-wide h4{
  color: var(--primary-color);
  font-weight: 700;
}

.info-table{
  font-size: .92rem;
}

.info-table th{
  background: rgba(111, 66, 193, .08);
  color: var(--primary-color);
  font-weight: 700;
  vertical-align: middle;
}

.info-table td{
  vertical-align: middle;
}

.enz-cat{
  background: rgba(111, 66, 193, .06);
  font-weight: 700;
}

.enz-sub{
  font-weight: 600;
}

.horm-gland{
  background: rgba(214, 51, 132, .06);
  font-weight: 700;
}

.horm-name{
  font-weight: 600;
}

/* completari stiintifice pentru celule fara date in bibliografie - discrete, marcate optional */
.opt-fill{
  color: #9a9a9a;
  font-weight: 400;
  font-style: italic;
  font-size: .88em;
}

/* lista de tinte multiple in interiorul unei celule de tabel (ex: FSH, LH) */
.cell-list{
  margin: 0;
  padding-left: 18px;
}

.cell-list li{
  margin-bottom: 2px;
}

.cell-list li:last-child{
  margin-bottom: 0;
}

/* ===== Observatii cu text si imagini intercalate, in ordinea exacta din JSON ===== */
.obs-flow{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.obs-flow-text{
  background: rgba(214, 51, 132, 0.06);
  border: 1px solid rgba(214, 51, 132, 0.18);
  border-radius: 10px;
  padding: 10px 14px 10px 30px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #222;
  line-height: 1.6;
  text-align: left;
  position: relative;
}

.obs-flow-text::before{
  content: "•";
  position: absolute;
  left: 14px;
  color: var(--secondary-color);
  font-weight: 800;
}

.obs-flow-img{
  width: 220px;
  text-align: center;
  align-self: flex-start;
}

.obs-flow-img .img-wrap{
  padding: 10px;
}

.obs-flow-img .img-wrap img{
  max-width: 100%;
  max-height: 180px;
}

.obs-flow-img-wide{
  width: 100%;
  align-self: stretch;
}

.obs-flow-img-wide .img-wrap img{
  max-width: 100%;
  max-height: 260px;
  width: auto;
}

/* ===== Text/tabel mai mare pe masura ce panoul are mai mult spatiu disponibil ===== */
/* (spatiul creste cand meniul este inchis, pentru ca .content-panel devine mai lat) */
@container content (min-width: 820px){
  .antibiotice-info{
    font-size: 1.1rem;
    padding: 28px 34px;
  }

  .info-table{
    font-size: 1rem;
  }
}

@container content (min-width: 1150px){
  .antibiotice-info{
    font-size: 1.2rem;
    padding: 32px 40px;
  }

  .info-table{
    font-size: 1.08rem;
  }
}

/* ===== Sectiunea "Persoanele din spatele site-ului" (descriere.php) ===== */
.echipa-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.echipa-card{
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-top: 4px solid transparent;
  border-radius: 14px;
  padding: 22px 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.echipa-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

.echipa-card-mov{
  border-top-color: var(--primary-color);
}

.echipa-card-portocaliu{
  border-top-color: #fd7e14;
}

.echipa-avatar{
  width: 84px;
  height: 84px;
  margin-bottom: 10px;
  transition: transform .2s ease;
}

.echipa-card:hover .echipa-avatar{
  transform: scale(1.06);
}

.echipa-nume{
  font-weight: 800;
  font-size: 1.05rem;
  color: #111;
}

.echipa-rol{
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.echipa-rol-mov{
  color: var(--primary-color);
}

.echipa-rol-portocaliu{
  color: #fd7e14;
}

.echipa-text{
  font-size: .92rem;
  color: #444;
  line-height: 1.55;
  margin-bottom: 0;
}

/* ================================================================
   STIL SPECIFIC SITE BIOLOGIE (prototip) - particule / capitole
   ================================================================ */

/* ---- Butoanele de capitol din sidebar (index.html) ---- */
.cap-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cap-btn{
  text-align: left;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff8ea;
  color: #7a5b1e;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}

.cap-btn:hover{
  background: #ffe9b8;
}

.cap-btn-active{
  background: var(--primary-color) !important;
  color: #fff !important;
  border-color: var(--primary-color) !important;
}

/* capitolele orientative (nu obligatorii din bibliografie) - discrete, gri */
.cap-btn-optional{
  background: #f4f4f4;
  color: #9a9a9a;
  font-weight: 500;
  font-style: italic;
}

.cap-btn-optional:hover{
  background: #ececec;
}

.cap-btn-optional.cap-btn-active{
  background: #9a9a9a !important;
  color: #fff !important;
  border-color: #9a9a9a !important;
}

/* ---- Lista de propozitii de pe pagina principala ---- */
.particule-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.particula-item{
  background: #fbfbfc;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 14px 18px;
  opacity: 0;
}

.particula-cap{
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.particula-text{
  font-size: 1.02rem;
  line-height: 1.6;
  color: #222;
}

.mod-afisare-switch .btn-mod-afisare{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: #555;
  font-size: .8rem;
  font-weight: 600;
  padding: 5px 12px;
}
.mod-afisare-switch .btn-mod-afisare.is-active{
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.particule-list.mod-cartonase{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.particule-list.mod-cartonase .particula-item{
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 18px 16px;
  border-radius: 14px;
}
.particule-list.mod-cartonase .particula-cap,
.particule-list.mod-cartonase .particula-tools{
  align-self: stretch;
  text-align: left;
}
.particule-list.mod-cartonase .particula-text{
  font-size: 1rem;
  font-weight: 600;
}
.particule-list.mod-cartonase .particula-note-display{
  margin-top: 10px;
  text-align: left;
}

.valoare-evidentiata{
  background: rgba(111, 66, 193, .12);
  color: var(--primary-color);
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
}

/* ---- Chips capitole optionale, in ecranul de selectare a jocului ---- */
.cat-chip-optional{
  opacity: .65;
  font-style: italic;
  border-style: dashed;
}

.cat-chip-optional.active{
  background: #9a9a9a;
  border-color: #9a9a9a;
  opacity: 1;
  font-style: normal;
}

/* ---- Propozitia din joc, cu spatiul de completat ---- */
.propozitie-intrebare{
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
}

.blanc-de-completat{
  display: inline-block;
  min-width: 46px;
  border-bottom: 3px dotted var(--secondary-color);
  color: var(--secondary-color);
  font-weight: 800;
  text-align: center;
}

@media (max-width: 576px){
  .propozitie-intrebare{
    font-size: 1.05rem;
  }
}

/* ---- Informatie optionala/suplimentara (fostul italic din Word) ---- */
.optional-info{
  color: #9a9a9a;
  font-style: italic;
  font-weight: 400;
}

/* ---- Tip de intrebare: eticheta Adevarat/Fals ---- */
.tip-intrebare-badge{
  display: inline-block;
  background: rgba(214, 51, 132, .1);
  color: var(--secondary-color);
  font-weight: 700;
  font-size: .8rem;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.raspuns-af label{
  font-size: 1.1rem;
}

/* ---- Explicatia afisata dupa ce utilizatorul raspunde ---- */
.explicatie-box{
  background: rgba(111, 66, 193, .06);
  border: 1px solid rgba(111, 66, 193, .18);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .95rem;
  line-height: 1.55;
  color: #333;
  text-align: left;
  font-weight: 400;
}

.explicatie-box .optional-info{
  color: #7a5b1e;
}

/* ---- Capitolul 13 (Sistemul endocrin) - rezumat + grid de hormoni ---- */
.capitol-rezumat{
  background: #fbfbfc;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

.hormoni-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.hormon-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  opacity: 0;
}

.hormon-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  border-color: var(--primary-color);
}

.hormon-nume{
  font-weight: 800;
  color: var(--primary-color);
  font-size: 1rem;
}

.hormon-glanda{
  font-size: .8rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Tabelul de hormoni (capitolul 13) - grupat pe glanda, fara coloana de efect ---- */
.hormoni-table th{
  background: rgba(111, 66, 193, .08);
  color: var(--primary-color);
  font-weight: 700;
}

.hormoni-table .horm-gland{
  background: rgba(214, 51, 132, .05);
  font-weight: 700;
  vertical-align: middle;
}

.hormon-nume-btn{
  background: none;
  border: none;
  padding: 4px 8px;
  font-weight: 700;
  color: var(--primary-color);
  border-radius: 8px;
  cursor: pointer;
}

.hormon-nume-btn:hover{
  background: rgba(111, 66, 193, .1);
  text-decoration: underline;
}

/* culorile folosite chiar in Word-ul tau, pastrate identic */
.hw-red{
  color: #ee0000;
  font-weight: 700;
}

.hw-blue{
  color: #0090cf;
  font-weight: 700;
}

/* ---- Schema de invatare (rezumat orientativ, organizat pe categorii) ---- */
.schema-invatare{
  background: #fbfbfc;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 16px 20px;
}

.schema-invatare-grup{
  margin-bottom: 14px;
}

.schema-invatare-grup:last-child{
  margin-bottom: 0;
}

.schema-invatare-titlu{
  font-weight: 800;
  color: var(--secondary-color);
  margin-bottom: 4px;
}

.schema-invatare ul{
  margin-bottom: 0;
  padding-left: 20px;
}

.schema-pagina{
  color: #9a9a9a;
  font-size: .85em;
  font-style: italic;
}

/* ---- Diagrama SVG din schema de invatare (ex: organizarea sistemului nervos) ---- */
.schema-svg{
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Obiecte 3D (sectiunea "Explicare anatomie") — <model-viewer>, complet interactiv.
   Fundalul e var(--surface-2)/var(--border), deci se adapteaza automat pe toate cele 3
   teme (intunecat/luminos/eyecare) fara cod JS suplimentar. Vizualizatorul e compact
   (nu ocupa tot latimea paginii), cu un panou de explicatii in dreapta lui; un buton
   dedicat il mareste pe tot ecranul (Fullscreen API), pastrand rotire/zoom/reset. ---- */
.model3d-layout{
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 24px;
  align-items: start;
}
.model3d-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.model3d-wrap:fullscreen,
.model3d-wrap:-webkit-full-screen,
.model3d-wrap.is-pseudo-fullscreen{
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
}
/* BUG FIX: fullscreen simulat prin CSS, pentru browserele mobile (in special
   Safari iOS) care nu suporta Element.requestFullscreen() pe elemente oarecare */
.model3d-wrap.is-pseudo-fullscreen{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
body.model3d-pseudo-fullscreen-activ{ overflow: hidden; }
.model3d-viewer{
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background-color: var(--surface-2);
}
.model3d-toolbar{
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.model3d-btn{
  background: rgba(10,14,17,.62);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease, transform .15s ease;
}
.model3d-btn:hover{ background: rgba(10,14,17,.82); transform: translateY(-1px); }
.model3d-btn:active{ transform: translateY(0); }
.model3d-btn.is-active{ background: var(--emerald); color: var(--ink); border-color: var(--emerald); }
.model3d-info{ padding-top: 4px; }
.model3d-titlu{
  font-weight: 700;
  font-size: 1.15rem;
  font-family: var(--font-display);
  color: var(--text);
  margin-bottom: 8px;
}
.model3d-descriere{
  color: var(--text-dim);
  font-size: .92rem;
  line-height: 1.55;
  margin-bottom: 10px;
}
.model3d-descriere p{ margin-bottom: 10px; }
.model3d-descriere p:last-child{ margin-bottom: 0; }
.model3d-subtitlu{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--emerald);
  margin: 14px 0 6px;
}
.model3d-traseu{
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.6;
}
.model3d-lista{
  margin: 0 0 10px;
  padding-left: 18px;
}
.model3d-lista li{ margin-bottom: 6px; }
.model3d-lista li:last-child{ margin-bottom: 0; }
.model3d-lista strong{ color: var(--text); }
.model3d-hint{
  font-size: .8rem;
  color: var(--text-dim);
  opacity: .75;
}
@media (max-width: 720px){
  .model3d-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 576px){
  .model3d-wrap{ aspect-ratio: 1 / 1; }
}

/* ---- Model 3D corp uman, pe pagina principala (sub linia interactiva de capitole) ---- */
.model3d-hero{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 4px auto 6px;
  max-width: 1040px;
}
.model3d-hero-wrap{
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  flex: 1 1 380px;
}
.model3d-hero-arrows{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  flex: 1 1 220px;
  max-width: 250px;
}
.model3d-hero-arrows-left{ align-items: flex-end; }
.model3d-hero-arrows-right{ align-items: flex-start; }
.model3d-hero-label{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 230px;
}
.model3d-hero-label-head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.model3d-hero-arrows-left .model3d-hero-label-head{ flex-direction: row-reverse; justify-content: flex-end; }
.model3d-hero-label .arrow-ico{
  color: var(--emerald);
  font-size: 1.05rem;
  font-weight: 700;
  flex: none;
}
.model3d-hero-label-text{
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
}
.model3d-hero-arrows-left .model3d-hero-label-head,
.model3d-hero-arrows-left .model3d-hero-label-text{ text-align: right; }
.model3d-hero-arrows-right .model3d-hero-label-head,
.model3d-hero-arrows-right .model3d-hero-label-text{ text-align: left; }
.model3d-hero-hint{
  font-size: .8rem;
  color: var(--text-dim);
  opacity: .9;
  margin: 6px 0 24px;
}
@media (max-width: 860px){
  .model3d-hero{ flex-direction: column; }
  .model3d-hero-wrap{ order: -1; max-width: 320px; }
  .model3d-hero-arrows{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
  .model3d-hero-arrows-left, .model3d-hero-arrows-right{ align-items: center; }
  .model3d-hero-arrows-left .model3d-hero-label-head{ flex-direction: row; justify-content: flex-start; }
  .model3d-hero-arrows-left .model3d-hero-label-head,
  .model3d-hero-arrows-left .model3d-hero-label-text{ text-align: left; }
  .model3d-hero-label{ max-width: 260px; }
}

/* ---- Evidentiere si notite personale (necesita cont) ---- */
.particula-highlight{
  background: rgba(244, 197, 66, .12) !important;
  border-color: rgba(244, 197, 66, .5) !important;
}

.particula-tools{
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.particula-tool-btn{
  background: none;
  border: none;
  font-size: .95rem;
  opacity: .35;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: opacity .15s ease, background .15s ease;
}

.particula-tool-btn:hover{ opacity: .8; background: rgba(0,0,0,.05); }
.particula-tool-btn.is-active{ opacity: 1; }

.particula-note-box{ margin-top: 8px; }

.particula-note-input{
  width: 100%;
  min-height: 50px;
  border: 1px dashed rgba(111,66,193,.4);
  background: rgba(111,66,193,.04);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .85rem;
  font-family: inherit;
  resize: vertical;
}

.particula-note-input:focus{ outline: none; border-style: solid; }

/* ---- Alegerea vizibilității notiței (ascunsă/vizibilă), la salvare ---- */
.nota-vizibilitate-btn{
  background: none;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .78rem;
  cursor: pointer;
  margin-right: 4px;
  opacity: .55;
  transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.nota-vizibilitate-btn:hover{ opacity: .85; }
.nota-vizibilitate-btn.is-selected{
  opacity: 1;
  font-weight: 700;
  border-color: var(--primary-color);
  background: rgba(111,66,193,.08);
  color: var(--primary-color);
}

/* ---- Notița "vizibilă" — rămâne afișată permanent sub propoziție (nu doar in editor).
   Contrast marit fata de versiunea initiala (era prea stearsa). ---- */
.particula-note-display{
  margin-top: 8px;
  font-size: .88rem;
  font-weight: 600;
  font-style: normal;
  color: var(--text);
  background: rgba(74,222,128,.14);
  border-left: 3px solid var(--emerald);
  padding: 7px 10px;
  border-radius: 0 8px 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
/* ============================================================
   TEMĂ „BERN / ATLAS" — reskin inspirat din prototipul Biologia.Bern
   Variabilele de bază (--primary-color, --secondary-color, --border,
   --muted, --shadow, --descriere-*) au fost redefinite mai sus în :root,
   deci multe componente s-au re-tematizat deja automat.
   Blocul de mai jos suprascrie doar culorile scrise direct (hex/rgba)
   și clasele Bootstrap, păstrând neschimbată toată structura/funcționalitatea.
   ============================================================ */

.page-title, .hero-title{ font-family: var(--font-display); }
.section-title{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.sidebar-panel, .content-panel{ background: var(--surface); }
.soft-divider{ border-top-color: rgba(255,255,255,.10); }
hr{ opacity: .12; }

.content-head{
  border-bottom-color: rgba(255,255,255,.10);
  background: linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0));
}

.filter-badge{
  background: rgba(74,222,128,.10);
  border-color: rgba(74,222,128,.28);
  color: var(--emerald);
}

.search-wrap input.form-control{
  background: var(--surface-2);
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}
.search-wrap input.form-control::placeholder{ color: var(--text-dim); }
.search-wrap input.form-control:focus{
  background: var(--surface-2);
  color: var(--text);
  border-color: rgba(74,222,128,.45);
  box-shadow: 0 0 0 .2rem rgba(74,222,128,.15);
}

.subst-card{
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.subst-card:hover{
  box-shadow: 0 10px 28px rgba(74,222,128,.14);
  border-color: rgba(74,222,128,.35);
}
.subst-card:focus-visible{ outline-color: rgba(74,222,128,.6); }

.img-wrap{ border-color: rgba(74,222,128,.18); }
.subst-name{ color: var(--text); font-family: var(--font-display); }

.menu-float-btn{ color: var(--ink); box-shadow: 0 8px 20px rgba(74,222,128,.35); }

.sidebar-resizer:hover{ background: rgba(74,222,128,.22); }
body.resizing-sidebar .sidebar-resizer{ background: rgba(74,222,128,.35); }

.descriere-card:hover{ box-shadow: 0 14px 30px rgba(74,222,128,.16); }
.descriere-card p{ color: var(--text-dim); }

.sugestii-box{ background: var(--surface-2); border-color: var(--border); }
.sugestii-box textarea{ background: var(--surface); color: var(--text); border-color: rgba(255,255,255,.2); }
.sugestii-box button{ color: var(--ink); }
.sugestii-box button:hover{ background: var(--emerald-dim); }

.func-groups{ border-top-color: rgba(255,255,255,.08); }
.func-groups span{ background: rgba(74,222,128,.15); color: var(--emerald); }

/* ---- Modul joc: fundalul implicit devine cel al temei Bern; paleta de culori
   aleasă de utilizator (crem/verde/portocaliu/roz/albastru/mov) rămâne neschimbată ---- */
body.game-mode{ background: linear-gradient(160deg, var(--ink), var(--surface) 55%, var(--surface-2)); }

.game-question-card{ background: var(--surface); color: var(--text); box-shadow: 0 20px 45px rgba(0,0,0,.5); }
.game-theme-palette{ background: var(--surface-2); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.raspuns-optiune{ border-color: rgba(255,255,255,.14); }
.raspuns-optiune:hover{ background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.35); }

.cat-chip.active{ color: var(--ink); }
.special-mode-badge{ background: rgba(232,184,125,.15); color: var(--secondary-color); }

/* ---- Butoane Bootstrap re-tematizate (meniul de categorii, sidebar) ---- */
.btn-warning{
  background-color: var(--surface-2);
  border-color: rgba(74,222,128,.25);
  color: var(--emerald);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active{
  background-color: rgba(74,222,128,.14) !important;
  border-color: var(--emerald) !important;
  color: var(--emerald) !important;
}

.btn-primary.subcat-btn{
  background-color: transparent;
  border-color: rgba(255,255,255,.16);
  color: var(--text-dim);
}
.btn-primary.subcat-btn:hover, .btn-primary.subcat-btn:focus{
  background-color: rgba(74,222,128,.10) !important;
  border-color: var(--emerald) !important;
  color: var(--emerald) !important;
}

.btn-secondary{
  background-color: var(--surface-2);
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}
.btn-secondary:hover, .btn-secondary:focus{
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.3) !important;
  color: var(--text) !important;
}

.btn-success{
  background-color: var(--emerald);
  border-color: var(--emerald);
  color: var(--ink);
  font-weight: 700;
}
.btn-success:hover, .btn-success:focus{
  background-color: var(--emerald-dim) !important;
  border-color: var(--emerald-dim) !important;
  color: var(--ink) !important;
}

.btn-outline-secondary{
  border-color: rgba(255,255,255,.25);
  color: var(--text-dim);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus{
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.4) !important;
  color: var(--text) !important;
}

.antibiotice-info{ background: var(--surface-2); border-color: var(--border); }
.info-table{
  color: var(--text);
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255,255,255,.12);
}
.info-table th{ background: rgba(74,222,128,.10); color: var(--emerald); }
.enz-cat{ background: rgba(74,222,128,.08); }
.horm-gland{ background: rgba(232,184,125,.10); }
.opt-fill{ color: rgba(238,242,245,.45); }

.obs-flow-text{ background: rgba(232,184,125,.08); border-color: rgba(232,184,125,.22); color: var(--text); }

.echipa-card{ background: var(--surface); border-color: var(--border); }
.echipa-card:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.4); }
.echipa-nume{ color: var(--text); }
.echipa-text{ color: var(--text-dim); }

.particula-tool-btn:hover{ background: rgba(255,255,255,.08); }
.particula-note-input{ border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.06); color: var(--text); }
.nota-vizibilitate-btn{ border-color: rgba(255,255,255,.16); color: var(--text-dim); }
.nota-vizibilitate-btn.is-selected{ border-color: var(--emerald); background: rgba(74,222,128,.12); color: var(--emerald); }
.particula-note-display{ background: rgba(74,222,128,.16); border-left-color: var(--emerald); color: var(--text); }

.alt-name-line{ color: var(--text); }
.food-sources{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--text-dim); }
.physio-action{ background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.25); color: var(--text); }
.obs-box{ background: rgba(232,184,125,.08); border-color: rgba(232,184,125,.22); color: var(--text); }

#detaliiModal .modal-content{ background: var(--surface); color: var(--text); }
#detaliiModal .modal-header{ border-bottom-color: rgba(255,255,255,.10); }
#detaliiModalBody .text-muted.small{ color: rgba(238,242,245,.7) !important; }
.btn-close{ filter: invert(1) grayscale(100%) brightness(1.8); }

/* ---- Butoane de capitol din sidebar ---- */
.cap-btn{
  border-color: rgba(255,255,255,.10);
  background: var(--surface-2);
  color: var(--sepia);
}
.cap-btn:hover{ background: rgba(232,184,125,.14); }
.cap-btn-active{
  background: var(--emerald) !important;
  color: var(--ink) !important;
  border-color: var(--emerald) !important;
}
.cap-btn-optional{
  background: rgba(255,255,255,.04);
  color: rgba(238,242,245,.45);
}
.cap-btn-optional:hover{ background: rgba(255,255,255,.08); }
.cap-btn-optional.cap-btn-active{
  background: rgba(238,242,245,.45) !important;
  color: var(--ink) !important;
  border-color: rgba(238,242,245,.45) !important;
}

/* ---- Lista de propoziții (pagina principală) ---- */
.particula-item{ background: var(--surface-2); border-color: rgba(255,255,255,.08); }
.particula-text{ color: var(--text); }
.mod-afisare-switch .btn-mod-afisare{ background: var(--surface-2); border-color: rgba(255,255,255,.12); color: var(--text-dim, #aab2bd); }
.mod-afisare-switch .btn-mod-afisare.is-active{ background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.valoare-evidentiata{
  background: rgba(74,222,128,.16);
  color: var(--emerald);
}

.cat-chip-optional.active{
  background: rgba(238,242,245,.4);
  border-color: rgba(238,242,245,.4);
}

.propozitie-intrebare{ color: var(--text); }
.optional-info{ color: rgba(238,242,245,.45); }

.tip-intrebare-badge{
  background: rgba(232,184,125,.14);
  color: var(--sepia);
}

.explicatie-box{
  background: rgba(74,222,128,.08);
  border-color: rgba(74,222,128,.22);
  color: var(--text);
}
.explicatie-box .optional-info{ color: var(--sepia); }

.capitol-rezumat{ background: var(--surface-2); border-color: rgba(255,255,255,.08); color: var(--text-dim); }

.hormon-card{ background: var(--surface-2); border-color: rgba(255,255,255,.10); }
.hormon-card:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.4); border-color: var(--emerald); }
.hormon-nume, .hormon-nume-btn{ color: var(--emerald); }
.hormon-nume-btn:hover{ background: rgba(74,222,128,.12); }
.hormoni-table th{ background: rgba(74,222,128,.10); color: var(--emerald); }
.hormoni-table .horm-gland{ background: rgba(232,184,125,.08); }

/* .hw-red / .hw-blue: culori păstrate identic (marcaje din documentul original) */

.schema-invatare{ background: var(--surface-2); border-color: rgba(255,255,255,.08); }
.schema-invatare-titlu{ color: var(--sepia); }
.schema-pagina{ color: rgba(238,242,245,.45); }

.particula-highlight{
  background: rgba(232,184,125,.16) !important;
  border-color: rgba(232,184,125,.5) !important;
}
.particula-note-input{
  border-color: rgba(74,222,128,.4);
  background: rgba(74,222,128,.06);
  color: var(--text);
}

/* ============================================================
   HEADER NOU + MENIU FULLSCREEN + HERO/TICKER (pagina principală Biologie)
   Aplicat doar acolo unde există marcajele respective în HTML
   (body.fullscreen-menu / .site-header) — nu afectează joc.html.
   ============================================================ */

/* NU mai e o "bara" plina (fara fundal/blur/bordura) - raman doar cele 2 butoane
   plutind independent, stanga sus (brand) si dreapta sus (Menu). */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: none;
  pointer-events: none;
}
.site-header > *{ pointer-events: auto; }

.site-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: transform .15s ease, border-color .15s ease;
}
.site-brand:hover{ transform: translateY(-1px); border-color: var(--emerald); }
.brand-icon{ width: 26px; height: 26px; flex-shrink: 0; }
.site-brand-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.site-header-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.header-icon-btn{
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.header-icon-btn:hover{
  transform: translateY(-1px);
  border-color: var(--emerald);
  color: var(--emerald);
}

/* ---- Butonul de meniu din header (dreapta sus) - text simplu "Menu", nu iconiță ---- */
.header-menu-btn{
  display: none;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.header-menu-btn:hover{
  transform: translateY(-1px);
  border-color: var(--emerald);
  color: var(--emerald);
}
body.menu-hidden .header-menu-btn{ display: inline-flex; }
/* Butonul "Meniu" stă acum chiar la marginea din dreapta a paginii (ca brand-ul
   din stânga); butonul flotant de cont (account-widget.css) e cel care e mutat
   mai spre stânga, ca să nu se suprapună - vezi body.fullscreen-menu .aw-account-btn. */

.settings-opt{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 8px;
  color: var(--text);
  font-size: .88rem;
  cursor: pointer;
}
.settings-opt:hover{ background: rgba(255,255,255,.07); }
.settings-opt.active{ background: rgba(74,222,128,.14); color: var(--emerald); font-weight: 700; }

/* ---- Meniu fullscreen (doar pe body.fullscreen-menu) ----
   Ferestrea de meniu ocupă acum tot ecranul (fundal opac, edge-to-edge),
   nu mai e un card plutitor peste un fundal întunecat. Deschiderea
   alunecă lin de sus în jos peste tot ecranul; închiderea alunecă lin
   înapoi spre marginea de sus. Fundalul (var(--ink)) e deja adaptat
   automat la toate cele 3 teme (intunecat/luminos/eyecare). */
body.fullscreen-menu .app-layout{
  display: block;
  /* !important e necesar: markup-ul fiecărei pagini pune și clasa
     Bootstrap "p-3" pe acest div, care generează "padding:1rem!important"
     - fără !important și aici, acea regulă câștigă (indiferent de
     specificitate) și mănâncă spațiul de sub header-ul fix, făcând ca
     primul element din pagină (ex. un buton "← Înapoi") să apară ascuns
     sub pastila "Biologie" din header. */
  padding-top: 84px !important;
}
body.fullscreen-menu .sidebar{
  position: fixed;
  inset: 0;
  top: 0;
  height: 100vh;
  z-index: 1090;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 44px 28px 24px;
  background: var(--ink);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  /* durate reduse (.5s/.42s -> .3s/.26s) — meniul fullscreen se simțea
     lent la deschidere/închidere ("se deschide meniul cu lag"); rămâne
     lin (aceleași curbe cubic-bezier), doar mai rapid */
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .18s ease .03s, visibility 0s linear 0s;
}
body.fullscreen-menu.menu-hidden .sidebar{
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.6,0,.85,.15), opacity .16s ease, visibility 0s linear .26s;
}
body.fullscreen-menu:not(.menu-hidden){ overflow: hidden; }
/* panoul umple tot ecranul disponibil (nu doar "cat sa cuprinda continutul") - pagina
   in sine nu se mai deruleaza; doar continutul vederii active (meniu/capitole/setari)
   are propriul lui scroll intern, DACA nu incape (ex: lista de 23 capitole). */
body.fullscreen-menu .sidebar-panel{
  width: 100%;
  height: 100%;
  max-height: none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}
body.fullscreen-menu .sidebar-resizer{ display: none; }
body.fullscreen-menu #menuMainView,
body.fullscreen-menu #menuCapitoleView,
body.fullscreen-menu #menuSettingsView{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
body.fullscreen-menu #menuCapitoleView,
body.fullscreen-menu #menuSettingsView{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* ---- Meniul principal (simplificat, in stilul Oxford: 2 coloane, linkuri mari + card promo) ----
   Ancorat in stanga-sus a ecranului (NU centrat ca bloc pe latimea ecranului) - pe ecrane
   late, coloana de linkuri incepe aproape de marginea din stanga, nu "plutind" spre mijloc. */
.oxford-menu{
  max-width: 1300px;
  margin: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: stretch;
  padding: 8px 4px 4px;
}
.oxford-nav-list{
  display: flex;
  flex-direction: column;
}
.oxford-nav-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 2.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 16px 2px;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, padding-left .18s ease;
}
.oxford-nav-link:hover, .oxford-nav-link:focus-visible{
  color: var(--emerald);
  padding-left: 10px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.oxford-nav-arrow{
  opacity: .45;
  font-size: 1.2rem;
  transition: transform .18s ease, opacity .18s ease;
  flex: none;
}
.oxford-nav-link:hover .oxford-nav-arrow{ opacity: 1; transform: translateX(5px); }
.oxford-nav-link-alt{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 700;
  color: #0b1410 !important;
  background: #4ADE80;
  border: none;
  border-bottom: none;
  border-radius: 999px;
  padding: 17px 20px;
  margin-top: 18px;
  box-shadow: 0 10px 26px rgba(74,222,128,.3);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.oxford-nav-link-alt:hover, .oxford-nav-link-alt:focus-visible{
  color: #0b1410 !important;
  background: #34B966;
  padding-left: 20px;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(74,222,128,.4);
}

.oxford-menu-right{ display: flex; }
.oxford-promo-card{
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 30% 20%, rgba(74,222,128,.16), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(232,184,125,.16), transparent 55%),
    var(--surface-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
}
.oxford-promo-visual{
  position: absolute;
  top: 18px; right: 18px;
  width: 120px; height: 120px;
  opacity: .5;
}
/* PAS 2 (nou) — fundal video in loop pentru cardul de promovare */
.oxford-promo-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.oxford-promo-video-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,8,10,.15) 0%, rgba(6,8,10,.35) 55%, rgba(6,8,10,.86) 100%);
}
.oxford-promo-body{ position: relative; z-index: 2; }
.oxford-promo-card .oxford-promo-title{ color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.oxford-promo-card .oxford-promo-text{ color: rgba(255,255,255,.88); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.oxford-promo-title{
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.oxford-promo-text{
  font-family: var(--font-body);
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.oxford-promo-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  background: linear-gradient(135deg, var(--emerald), var(--sepia));
  color: var(--ink);
  font-weight: 700;
  font-size: .9rem;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.oxford-promo-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(74,222,128,.3);
}

@media (max-width: 720px){
  .oxford-menu{ grid-template-columns: 1fr; gap: 20px; }
  .oxford-nav-link{ font-size: 1.5rem; }
  /* BUG FIX: video_biologie.mp4 e portret (~0.71:1), dar cardul avea o formă
     fixă de peisaj (min-height:220px) cu object-fit:cover - video-ul era
     decupat brutal, doar o fâșie subțire rămânea vizibilă. Pe mobil, cardul
     ia acum chiar proporția reală a video-ului (mult mai înalt = video mult
     mai mare) și folosim "contain" ca să nu se mai taie nimic din el. */
  .oxford-promo-card{ min-height: 220px; aspect-ratio: 71 / 100; height: auto; }
  .oxford-promo-video{ object-fit: contain; }
}

.back-home-btn{
  margin: 4px 0 14px 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  padding: 6px 4px;
}
.back-home-btn:hover{ color: var(--emerald); }

/* ---- Hero: eyebrow + titlu în 3 rânduri (stil Biologia.Bern) ---- */
.hero-eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold);
}
.eyebrow-line{ width: 28px; height: 1px; background: var(--gold); display: inline-block; }

.hero-title{
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.1;
}
.hero-title em{
  font-style: italic;
  color: var(--emerald);
  font-weight: 600;
}

/* ---- Bara animată cu capitole: rând cu săgeți + buton de pauză ---- */
.chapter-ticker-row{
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 10px;
  margin: 4px 0 30px;
}

.ticker-arrow{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, color .15s ease, border-color .15s ease;
}
.chapter-ticker-row.is-paused .ticker-arrow{
  opacity: 1;
  pointer-events: auto;
}
.ticker-arrow:hover{ color: var(--emerald); border-color: var(--emerald); }

.ticker-pause-btn{
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: .7rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ticker-pause-btn:hover{ color: var(--emerald); border-color: var(--emerald); }

.chapter-ticker{
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.chapter-ticker-track{
  display: flex;
  width: max-content;
  animation: chapterMarquee 130s linear infinite;
}
.chapter-ticker-track.is-manual{ animation: none; }
@keyframes chapterMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.chapter-ticker-item{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-dim);
  white-space: nowrap;
  border: none;
  background: none;
  cursor: pointer;
  transition: color .15s ease;
}
.chapter-ticker-item:hover{ color: var(--emerald); }
.chapter-ticker-item.is-optional{ opacity: .6; }
.chapter-ticker-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--emerald);
  opacity: .7;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce){
  .chapter-ticker-track{ animation: none; }
  .chapter-ticker-row .ticker-arrow{ opacity: 1; pointer-events: auto; }
}

/* ---- Subsolul paginii ---- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 28px 20px 32px;
  margin-top: 12px;
}
.site-footer-inner{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 640px){
  .site-footer-inner{ grid-template-columns: 1fr; }
}
.site-footer-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.site-footer-text{
  font-family: var(--font-body);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}

/* ---- Cartonașe interactive de pe pagina principală (deasupra sectiunii descriptive) ----
   Inlocuiesc fostul link catre descriere.html: navigare rapida catre
   Capitole / Jocuri / Stickere / Cartonașe, direct de pe pagina principala. */
/* ---- "Ce gasesti pe site" - cele 4 cartonase (Capitole / Stickere / Cartonase / Testare) ---- */
.site-features-section{ padding: 4px 8px 22px; }
.site-features-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.site-feature-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.site-feature-card:hover, .site-feature-card:focus-visible{
  transform: translateY(-3px);
  border-color: rgba(74,222,128,.4);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.site-feature-icon{
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.site-feature-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 8px;
  transition: color .18s ease;
}
.site-feature-card:hover .site-feature-title, .site-feature-card:focus-visible .site-feature-title{
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.site-feature-arrow{
  opacity: .45;
  font-size: 1rem;
  transition: transform .18s ease, opacity .18s ease;
}
.site-feature-card:hover .site-feature-arrow, .site-feature-card:focus-visible .site-feature-arrow{
  opacity: 1;
  transform: translateX(5px);
}
.site-feature-text{
  font-family: var(--font-body);
  font-size: .87rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
.site-feature-text strong{ color: var(--text); }

/* ---- Modalul generic deschis de cartonasele Stickere / Cartonase / Testare ---- */
.picker-modal-text{
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.picker-cap-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.picker-cap-btn{
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .87rem;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.picker-cap-btn:hover{ background: var(--surface-2); color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   PLANTE & ALIMENTE PENTRU MEMORIE — cartonașe stil „notiță lipită"
   ============================================================ */
.pm-section{ padding: 4px 8px 8px; }
.pm-head{ margin-bottom: 18px; }
.pm-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 10px 0 10px;
}
.pm-lead{
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 6px;
}
.pm-disclaimer{
  font-size: .76rem;
  color: var(--text-dim);
  opacity: .75;
  font-style: italic;
  margin-bottom: 0;
}

.pm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 30px 20px;
  padding: 22px 6px 26px;
}

.pm-card{
  --rot: -2deg;
  position: relative;
  text-align: left;
  background: var(--parchment);
  color: var(--parchment-ink);
  border: none;
  border-radius: 3px 12px 4px 11px;
  padding: 26px 16px 18px;
  font-family: var(--font-body);
  cursor: pointer;
  transform: rotate(var(--rot));
  box-shadow:
    0 10px 20px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.5) inset;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0px, rgba(0,0,0,.02) 1px, transparent 1px, transparent 3px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pm-rot-0{ --rot: -2.2deg; }
.pm-rot-1{ --rot: 1.6deg; }
.pm-rot-2{ --rot: -1.2deg; }
.pm-rot-3{ --rot: 2.4deg; }

.pm-card:hover, .pm-card:focus-visible{
  transform: rotate(0deg) translateY(-5px) scale(1.03);
  box-shadow:
    0 18px 32px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.5) inset;
  z-index: 3;
}

.pm-tape{
  position: absolute;
  top: -13px;
  left: 50%;
  width: 74px;
  height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,241,196,.55));
  box-shadow: 0 3px 5px rgba(0,0,0,.18);
  opacity: .9;
}
.pm-rot-1 .pm-tape, .pm-rot-3 .pm-tape{ transform: translateX(-50%) rotate(3deg); }

.pm-emoji{ display: block; font-size: 1.9rem; margin-bottom: 8px; line-height: 1; }
.pm-nume{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: 8px;
}
.pm-teaser{
  display: block;
  font-size: .83rem;
  line-height: 1.45;
  opacity: .85;
  margin-bottom: 14px;
}
.pm-more{
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .65;
}

/* ---- Modal de detalii plantă — tot o „pagină de caiet" ---- */
.pm-modal-content{
  background: var(--parchment) !important;
  color: var(--parchment-ink) !important;
  border-radius: 14px;
}
.pm-modal-header{
  border-bottom: 1px solid rgba(59,47,34,.15) !important;
}
.pm-modal-header .modal-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--parchment-ink);
}
.pm-modal-header .btn-close{ filter: none; opacity: .6; }
.pm-modal-header .btn-close:hover{ opacity: 1; }

.pm-modal-block{ margin-bottom: 18px; }
.pm-modal-label{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 700;
  color: #7A5A2E;
  margin-bottom: 8px;
}
.pm-modal-list{ margin: 0; padding-left: 20px; }
.pm-modal-list li{ margin-bottom: 6px; line-height: 1.55; font-size: .94rem; }
.pm-modal-list li strong{ color: var(--parchment-ink); }

.pm-modal-optim{
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pm-modal-optim-label{ font-weight: 800; font-size: .82rem; color: #2F7A4E; }
.pm-modal-optim p{ margin: 4px 0 0; font-size: .9rem; line-height: 1.5; }

.pm-modal-atentie{
  background: rgba(180,50,30,.08);
  border: 1px solid rgba(180,50,30,.28);
  border-radius: 10px;
  padding: 12px 16px;
}
.pm-modal-atentie-label{ font-weight: 800; font-size: .82rem; color: #A5341C; }
.pm-modal-atentie p{ margin: 4px 0 0; font-size: .9rem; line-height: 1.5; color: #5A2C1C; }

@media (max-width: 480px){
  .pm-grid{ grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
}

@media (max-width: 576px){
  .site-brand-name{ font-size: 1.05rem; }
}

/* ============================================================
   TEME ALTERNATIVE: Luminos / Confort ochi
   (implicit rămâne tema întunecată de mai sus)
   ============================================================ */
:root.theme-light{
  --ink: #F2FBF5;
  --surface: #FDFFFD;
  --surface-2: #E3F5E9;
  --text: #241620;
  --text-dim: rgba(36,22,32,.68);
  --border: rgba(0,0,0,.12);

  /* verde pal, prietenos, ca identitate principala pe tema Luminos - contrast bun
     pe alb (green-700/800). Rozul ramas din identitatea initiala e pastrat doar ca
     accent secundar (--sepia), folosit punctual, nu ca fundal dominant. */
  --emerald: #15803D;
  --emerald-dim: #166534;
  --sepia: #DB7093;
  /* rosul de baza (#F97066) e gandit pt. fundal intunecat - pe tema Luminos
     are contrast prea slab pe fundal aproape alb (casete de capcana/atentie) */
  --crimson: #B91C1C;
  /* mai inchis decat auriul de baza (#F2C14E, gandit pentru fundal intunecat) -
     pe fundalul aproape alb al temei Luminos, un auriu deschis era aproape
     invizibil (contrast prea mic pentru textul mic, uppercase, de la eyebrow) */
  --gold: #92400E;

  --tint-green-rgb: 21,128,61;
  --tint-rose-rgb: 219,39,119;
  --tint-purple-rgb: 124,58,237;
  --tint-blue-rgb: 37,99,235;
  --tint-orange-rgb: 194,65,12;
}
:root.theme-eyecare{
  --ink: #1E1712;
  --surface: #241B14;
  --surface-2: #2E221A;
  --text: #F1E3C8;
  --text-dim: rgba(241,227,200,.68);
  --border: rgba(241,227,200,.14);
}
:root.theme-light body,
:root.theme-eyecare body{
  background-image: none;
}
:root.theme-light .site-header{ background: rgba(255,255,255,.85); }
:root.theme-eyecare .site-header{ background: rgba(30,23,18,.85); }

/* ---- Contrast mai bun pe tema Luminos: nu ne mai bazăm pe alb-suprapus-pe-alb ---- */
:root.theme-light .content-head{
  background: linear-gradient(to bottom, rgba(0,0,0,.025), rgba(0,0,0,0));
}
:root.theme-light .btn-outline-secondary{ border-color: rgba(0,0,0,.22); color: rgba(36,22,32,.75); }
:root.theme-light .btn-outline-secondary:hover{ background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.4) !important; color: var(--text) !important; }
:root.theme-light .particula-tool-btn:hover{ background: rgba(0,0,0,.05); }
:root.theme-light .echipa-card:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.12); }
:root.theme-light .sidebar-resizer:hover{ background: rgba(21,128,61,.22); }
:root.theme-light .func-groups{ border-top-color: rgba(0,0,0,.08); }
:root.theme-light .cap-btn{ background: var(--surface-2); color: var(--emerald-dim); }
:root.theme-light .cap-btn-optional{ background: rgba(0,0,0,.04); color: rgba(36,22,32,.5); }

/* ============================================================
   CARDURI (subst-card / img-wrap) — contur și glow în verde-smarald,
   în oglindă cu tratamentul aqua-albastru de la Chimie
   (mod dark; pe tema Luminos se re-tematizează automat spre roz, prin --emerald)
   ============================================================ */
.subst-card{
  border: 1.5px solid rgba(74,222,128,.30);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.subst-card:hover, .subst-card:focus-visible{
  transform: scale(1.035);
  border-color: var(--emerald);
  box-shadow: 0 0 0 1px var(--emerald), 0 16px 34px rgba(74,222,128,.30);
}
.img-wrap{
  border: 1.5px solid rgba(74,222,128,.35);
}
.subst-name{
  color: var(--emerald);
}

/* ============================================================
   MENIU — ecranul de Setări (Cont + Mod de afișare)
   ============================================================ */
.menu-account-card{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.menu-account-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--emerald), var(--sepia));
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1rem;
}
.menu-account-info{ min-width: 0; }
.menu-account-name{
  font-weight: 700;
  color: var(--text);
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-account-email{
  font-size: .78rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Randuri de informatii din Setari: Plan si Centru de examen (apasabile, deschid modalul potrivit) ---- */
.settings-info-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.settings-info-label{
  font-size: .8rem;
  color: var(--text-dim);
  font-weight: 600;
}
.settings-info-value{
  font-size: .85rem;
  font-weight: 700;
  color: var(--emerald);
  background: none;
  border: none;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease;
}
.settings-info-value:hover{ background: rgba(74,222,128,.12); }
.settings-info-value.plan-pro{ color: #b8860b; }
.settings-info-value.plan-max{ color: #a855f7; }

/* ================================================================
   Elemente adăugate ulterior în biologie/ (hub cu mai multe direcții,
   stickere, editor de cartonaș inline) — adaptate la paleta noua (emerald/sepia)
   ================================================================ */

/* ---- Buton "ascunde capitolele optionale" (setari centru de examen) ---- */
#btn-ascunde-optionale.is-active{
  background: var(--crimson);
  color: #16110E;
  border-color: var(--crimson);
}

/* ---- Hub-ul cu directii, dupa alegerea unui capitol ---- */
.hub-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ---- cardul de Stickere, sub grid-ul principal (conditionat, doar daca exista stickere) ---- */
.hub-card-below{
  width: 100%;
  margin-top: 16px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  padding: 18px 20px;
}
.hub-card-below .hub-card-icon{ margin-bottom: 0; }

.hub-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hub-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  border-color: var(--primary-color);
}

.hub-card-icon{ font-size: 1.8rem; margin-bottom: 6px; }
.hub-card-title{ font-weight: 700; color: var(--primary-color); font-family: var(--font-display); }
.hub-card-sub{ font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ---- Hub-card cu poza sus + insigna rotunda + text pe fundalul cardului
   (Teorie explicată / Unități numerice / Schițe) ---- */
.hub-card-photo{
  padding: 0 0 18px;
  overflow: visible;
  align-items: stretch;
}

.hub-card-photo-img{
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  border-radius: 15px 15px 0 0;
}

/* fundal-substitut, cat timp nu avem inca o poza reala pentru card (Stickere /
   Cartonase) - un gradient discret + iconita mare, centrata. Se inlocuieste
   simplu cu style="background-image:url(...)" (si se scoate clasa asta) cand
   avem poza, la fel ca la Teorie explicata / Unitati numerice / Schite. */
.hub-card-photo-img-placeholder{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  opacity: .85;
}
.hub-card-photo-soon{
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.4);
  padding: 3px 9px;
  border-radius: 999px;
}

.hub-card-photo-badge{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: -26px auto 0;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
}

.hub-card-photo-text{
  text-align: center;
  padding: 10px 16px 0;
}

@media (max-width: 620px){
  .hub-grid{ grid-template-columns: 1fr; }
  .hub-card-below{ flex-direction: column; text-align: center; }
}

/* ---- Evidentiere pe 4 culori (roz / galben / verde / albastru) ----
   Pe lângă fundal/bordură, cardul primește acum și o umbră/lumină (glow)
   in jurul lui, in aceeași culoare aleasă de utilizator, ca evidențierea
   să se vadă clar și "iasă in afara" cardului, nu doar ca fundal. ---- */
.particula-highlight-roz{ background: rgba(214, 51, 132, .14) !important; border-color: rgba(214, 51, 132, .5) !important; box-shadow: 0 0 0 3px rgba(214, 51, 132, .18), 0 8px 22px rgba(214, 51, 132, .28) !important; }
.particula-highlight-galben{ background: rgba(244, 197, 66, .16) !important; border-color: rgba(244, 197, 66, .55) !important; box-shadow: 0 0 0 3px rgba(244, 197, 66, .2), 0 8px 22px rgba(244, 197, 66, .3) !important; }
.particula-highlight-verde{ background: rgba(74, 222, 128, .14) !important; border-color: rgba(74, 222, 128, .5) !important; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18), 0 8px 22px rgba(74, 222, 128, .28) !important; }
.particula-highlight-albastru{ background: rgba(90, 169, 230, .14) !important; border-color: rgba(90, 169, 230, .5) !important; box-shadow: 0 0 0 3px rgba(90, 169, 230, .18), 0 8px 22px rgba(90, 169, 230, .28) !important; }

.paleta-culori{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.culoare-swatch{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
  display: inline-block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.culoare-swatch:hover{ transform: scale(1.14); }

.culoare-swatch.culoare-roz{ background: #d63384; }
.culoare-swatch.culoare-galben{ background: #f4c542; }
.culoare-swatch.culoare-verde{ background: #2ea043; }
.culoare-swatch.culoare-albastru{ background: #1f6fb2; }
.culoare-swatch.is-selected{ box-shadow: 0 0 0 2px var(--primary-color); }

/* ---- Buton "sterge culoarea" - stă lângă paleta, aceeași dimensiune ca un swatch,
   dar cu contur punctat + simbol X, ca să se citească limpede drept "fără culoare" ---- */
.btn-sterge-culoare{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 2px dashed var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: .72rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-sterge-culoare:hover{
  background: rgba(220,53,69,.14);
  border-color: rgba(220,53,69,.55);
  color: #dc3545;
  transform: scale(1.14);
}

/* ---- Alegere Text / Cartonas la apasarea butonului de notita ---- */
.nota-alegere{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ---- Stickere (notite simple, stil post-it) ---- */
.stickere-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.sticker-item{
  position: relative;
  border-radius: 4px;
  padding: 16px 14px;
  min-height: 110px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transform: rotate(-1deg);
  transition: transform .15s ease;
  font-family: inherit;
}

.sticker-item:nth-child(even){ transform: rotate(1.2deg); }
.sticker-item:nth-child(3n){ transform: rotate(-0.6deg); }
.sticker-item:hover{ transform: rotate(0deg) scale(1.02); }

.sticker-capitol{
  font-size: .68rem;
  font-weight: 700;
  color: rgba(0,0,0,.5);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.sticker-text{
  font-size: .88rem;
  color: #221c14;
  white-space: pre-wrap;
  word-break: break-word;
}

.sticker-sterge{
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(0,0,0,.4);
  font-size: .8rem;
  cursor: pointer;
}

.sticker-sterge:hover{ color: rgba(0,0,0,.75); }

/* ================= EDITOR CARTONAȘ PROPRIU (inline, pe pagina principală) ================= */
.editor-side{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.editor-side-title{
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary-color);
}

.editor-side-hint{
  font-size: .82rem;
  color: var(--text-dim);
  margin: -4px 0 8px;
  line-height: 1.4;
}

.editor-preview{
  width: 100%;
  height: 120px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 8px;
  background: var(--surface-2);
}

.editor-preview img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.editor-preview span{ color: var(--text-dim); font-size: .8rem; }

.draw-canvas{
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  touch-action: none;
  cursor: crosshair;
  background: #fff;
}

.color-swatch{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
  cursor: pointer;
  display: inline-block;
}

.color-swatch.is-selected{ box-shadow: 0 0 0 2px var(--primary-color); }

/* ---- Modale proprii (hormoni / editor cartonaș / cartonasele Stickere-Cartonase-Testare / capitole etichetare-ordonare) in tema noua ---- */
#hormonModal .modal-content,
#editorModal .modal-content,
#featurePickerModal .modal-content,
#capitoleModal .modal-content{ background: var(--surface); color: var(--text); }
#hormonModal .modal-header,
#editorModal .modal-header,
#featurePickerModal .modal-header,
#capitoleModal .modal-header,
#hormonModal .modal-footer,
#editorModal .modal-footer,
#featurePickerModal .modal-footer,
#capitoleModal .modal-footer{ border-color: rgba(255,255,255,.10); }
#hormonModal .btn-close,
#editorModal .btn-close,
#featurePickerModal .btn-close,
#capitoleModal .btn-close{ filter: invert(1) grayscale(1); }

:root.theme-light #hormonModal .modal-content,
:root.theme-light #editorModal .modal-content,
:root.theme-light #featurePickerModal .modal-content,
:root.theme-light #capitoleModal .modal-content{ background: #fff; color: #1b1410; }
:root.theme-light #hormonModal .btn-close,
:root.theme-light #editorModal .btn-close,
:root.theme-light #featurePickerModal .btn-close,
:root.theme-light #capitoleModal .btn-close{ filter: none; }
:root.theme-light .hub-card{ background: #fff; }
:root.theme-light .editor-preview{ background: #f5f2ec; }

/* ---- Siguranta: .d-none trebuie sa functioneze chiar daca CDN-ul Bootstrap nu se incarca ---- */
.d-none{ display: none !important; }

/* ============================================================
   PAGINI DE TEORIE CU MENIU LATERAL (.na-layout) — portat din chimie/style.css,
   adaptat la tema Bern/Atlas a biologiei (accent --emerald in loc de --cyan).
   Folosit pentru paginile de "explicații anatomice" ale fiecărui capitol.
   ============================================================ */
.na-layout{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  max-width: min(1680px, 97vw);
  margin: 0 auto;
  padding: 20px 20px 60px;
}
@media (max-width: 860px){
  .na-layout{ grid-template-columns: 1fr; padding-top: 16px; }
}

.na-toc{
  /* fixat la marginea stanga a ecranului, nu doar a coloanei centrate din .na-layout
     (care are max-width si e centrata pe ecrane late) */
  position: fixed;
  left: 0;
  top: 80px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 100px - 68px);
  overflow-y: auto;
  padding: 0 6px 20px 16px;
  z-index: 5;
}
@media (max-width: 860px){
  .na-toc{ position: static; width: auto; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding: 0; }
}
.na-toc-title{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .7rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}
@media (max-width: 860px){ .na-toc-title{ display: none; } }
.na-toc-link{
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .84rem;
  color: var(--text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.na-toc-link:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.na-toc-link.is-active{
  color: var(--emerald);
  background: rgba(var(--emerald-rgb), .10);
  border-left-color: var(--emerald);
  font-weight: 700;
}
@media (max-width: 860px){
  .na-toc-link{ border-left: none; border: 1px solid var(--border); }
  .na-toc-link.is-active{ border-color: var(--emerald); }
}

.na-content{ min-width: 0; grid-column: 2; }
@media (max-width: 860px){ .na-content{ grid-column: 1; } }

.na-hero{ margin-bottom: 30px; }
.na-h1{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -.01em;
  margin: 10px 0 12px;
}
.na-lead{ color: var(--text-dim); font-size: 1.02rem; line-height: 1.7; }

.na-section{
  padding: 34px 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.na-section:first-of-type{ border-top: none; }
.na-section-num{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: rgba(var(--emerald-rgb), .6);
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.na-section h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.na-section h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--emerald);
  margin: 22px 0 10px;
}
.na-section p{ line-height: 1.75; margin-bottom: 14px; color: var(--text); }
.na-section p strong{ color: var(--text); }
.na-section p em{ color: var(--text-dim); }
/* ---- randul de unelte (Evidentiere / Notita / Sticker / Cartonas) atasat
   automat dupa fiecare paragraf de teorie - vezi teorie-evidentiere.js.
   Reutilizeaza clasele .particula-tools/.particula-tool-btn etc. deja
   stilizate mai sus - doar pozitionarea randului in sine e noua aici. ---- */
.teorie-p-tools-row{ margin: -8px 0 14px; position: relative; }
.na-section p[class*="particula-highlight-"]{ padding: 6px 10px; border-radius: 8px; margin-left: -10px; margin-right: -10px; }
.na-section ul, .na-section ol{ line-height: 1.75; margin-bottom: 14px; padding-left: 22px; }
.na-section li{ margin-bottom: 6px; }
.na-footnote{ font-size: .82rem; color: var(--text-dim); margin-top: -6px; }
.na-closing{ font-style: italic; color: var(--text-dim); margin-top: 24px; }

.na-formula{ font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }

.na-table{ border-collapse: collapse; }
.na-table th, .na-table td{ font-size: .92rem; border: 1px solid var(--border); }

/* ---- Casete de sfat / atenționare ---- */
.na-tip-box{
  background: rgba(var(--emerald-rgb), .08);
  border: 1px solid rgba(var(--emerald-rgb), .28);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.na-tip-title{ font-weight: 700; color: var(--emerald); margin-bottom: 6px; font-size: .92rem; }
.na-tip-box p{ margin-bottom: 0; font-size: .92rem; }
.na-tip-box .d-flex{ margin-top: 10px; }

/* ---- Anunt pe capitolele care inca nu au poze (div, nu p - nu schimba ancorele evidentierilor) ---- */
.na-poze-curand{ display: flex; align-items: flex-start; gap: 12px; margin: -12px 0 30px; padding: 14px 18px; border-radius: 14px;
  background: rgba(var(--tint-blue-rgb, 96,165,250), .08); border: 1px dashed rgba(var(--tint-blue-rgb, 96,165,250), .45); font-size: .92rem; line-height: 1.55; }
.na-poze-curand-icon{ font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.na-poze-curand strong{ display: block; color: rgb(var(--tint-blue-rgb, 96,165,250)); margin-bottom: 2px; }

/* ---- Buton simplu spre un joc interactiv (etichetare/ordonare), inserat
   direct în teorie, lângă imaginea/secțiunea la care se referă. Fără
   cadru de poză — pentru butoanele din teorie nu se încarcă poze (doar
   pentru cardurile de la testare.html); doar butonul, centrat, cu accent
   puternic de culoare ca să "sară în ochi". ---- */
.na-activitate-box{
  --tint: var(--tint-orange-rgb);
  text-align: center;
  margin: 26px 0;
}
.na-activitate-box.tint-verde{ --tint: var(--tint-green-rgb); }
.na-activitate-box.tint-roz{ --tint: var(--tint-rose-rgb); }
.na-activitate-box.tint-mov{ --tint: var(--tint-purple-rgb); }
.na-activitate-box.tint-albastru{ --tint: var(--tint-blue-rgb); }

/* na-activitate-eyebrow / -titlu / -desc: nu mai sunt folosite în markup
   (cutiile arată acum doar butonul, evidențiat), dar regulile rămân
   inofensive dacă apar undeva pe cale de tranziție. */
.na-activitate-eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  font-family: var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; font-weight: 800; color: rgb(var(--tint));
}
.na-activitate-titlu{ font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin: 6px 0 8px; }
.na-activitate-desc{ font-size: .94rem; color: var(--text); opacity: .82; max-width: 480px; margin: 0 auto 18px; }

.na-activitate-cta{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  padding: 18px 28px !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, rgba(var(--tint),.16), rgba(var(--tint),.32)) !important;
  border: 1.5px solid rgba(var(--tint),.55) !important;
  color: rgb(var(--tint)) !important;
  text-shadow: 0 0 18px rgba(var(--tint),.6);
  box-shadow: 0 0 28px rgba(var(--tint),.35), inset 0 1px 0 rgba(255,255,255,.08);
  /* pulsează DE 3 ORI la afișare, apoi se oprește — suficient ca să "sară
     în ochi" fără o animație infinită (o animație fără sfârșit pe un
     buton clicabil nu se mai "stabilizează" niciodată: browserele/uneltele
     de testare automată care așteaptă un element stabil înainte de click
     agață la nesfârșit, iar pe un dispozitiv modest tot consumă ciclii de
     CPU/GPU degeaba, cât timp pagina de teorie stă deschisă) */
  animation: na-activitate-puls 1s ease-in-out 3;
}
.na-activitate-cta:hover{
  background: linear-gradient(90deg, rgba(var(--tint),.22), rgba(var(--tint),.42)) !important;
  box-shadow: 0 0 40px rgba(var(--tint),.5), inset 0 1px 0 rgba(255,255,255,.1);
}
@keyframes na-activitate-puls{
  0%, 100%{ box-shadow: 0 0 28px rgba(var(--tint),.35), inset 0 1px 0 rgba(255,255,255,.08); }
  50%{ box-shadow: 0 0 44px rgba(var(--tint),.65), inset 0 1px 0 rgba(255,255,255,.08); }
}
@media (prefers-reduced-motion: reduce){
  .na-activitate-cta{ animation: none; }
}

/* ---- na-animatie-box: cadru pentru animațiile interpolate (AnimEngine),
   varianta fără foto/buton a na-activitate-box — animația pornește direct. ---- */
.na-animatie-box{
  --tint: var(--tint-blue-rgb);
  position: relative;
  background: linear-gradient(180deg, rgba(var(--tint),.14), rgba(var(--tint),.04));
  border: 2px solid rgba(var(--tint),.45);
  border-radius: 20px;
  padding: 20px 22px 24px;
  margin: 26px 0;
  box-shadow: 0 14px 30px rgba(var(--tint),.14);
}
.na-animatie-box.tint-verde{ --tint: var(--tint-green-rgb); }
.na-animatie-box.tint-roz{ --tint: var(--tint-rose-rgb); }
.na-animatie-box.tint-mov{ --tint: var(--tint-purple-rgb); }
.na-animatie-box .na-activitate-eyebrow{ text-align: center; }
.na-animatie-box .na-activitate-titlu{ text-align: center; }
.na-animatie-box .na-activitate-desc{ text-align: center; }

.na-alert{
  background: rgba(var(--crimson-rgb),.08);
  border: 1px solid rgba(var(--crimson-rgb),.3);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.na-alert-title{ font-weight: 700; color: var(--crimson); margin-bottom: 6px; font-size: .92rem; }
.na-alert p{ margin-bottom: 8px; font-size: .92rem; }
.na-alert p:last-child{ margin-bottom: 0; }
.na-example-inline{ font-family: var(--font-mono); color: var(--text-dim); }

/* ---- Comparație 2 coloane ---- */
.na-compare-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}
@media (max-width: 600px){ .na-compare-grid{ grid-template-columns: 1fr; } }
.na-compare-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.na-compare-title{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--emerald);
  margin-bottom: 6px;
  font-size: .92rem;
}
.na-compare-card p{ font-size: .88rem; margin: 0; color: var(--text-dim); }

/* ---- Ilustrații / imagini explicative (nou, pentru paginile de anatomie).
   Marime plafonata (nu 100% din coloana) - imaginile stau mai mici, potrivite
   cu textul, nu ca niste hero-uri uriase. ---- */
.na-figure{
  margin: 20px 0;
  text-align: center;
}
.na-figure img{
  max-width: min(480px, 100%);
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.na-caption{
  margin-top: 10px;
  font-size: .84rem;
  color: var(--text-dim);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Grup de 2-3 imagini înrudite, afișate una lângă alta (nu stivuite) -
   ex. aceeași structură din mai multe unghiuri/etape. Fiecare .na-figure
   din interior își pierde marginile proprii (le dă grid-ul, prin gap) și
   rămâne cu propria .na-caption dedesubt. ---- */
.na-figure-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 16px;
  margin: 20px 0;
  align-items: start;
}
.na-figure-row .na-figure{ margin: 0; }
.na-figure-row .na-figure img{ max-width: 100%; }
@media (max-width: 560px){
  .na-figure-row{ grid-template-columns: 1fr; }
}

/* ---- Tabel comparativ cu poză în celulă (ex. tipurile de neuron) - poza
   rămâne mică și clară, nu se întinde la lățimea coloanei. ---- */
.na-table-neuroni th:first-child{ background: transparent; border-right: 1px solid var(--border); }
.na-table-neuroni td img{
  display: block;
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
.na-table-neuroni td, .na-table-neuroni th{ vertical-align: top; }

/* ---- Placeholder pentru materiale interactive care urmează să fie adăugate ---- */
.na-placeholder{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
  color: var(--text-dim);
  font-size: .9rem;
}
.na-placeholder-icon{ font-size: 1.4rem; flex: none; }

.na-bottom-back{ padding-top: 20px; }

/* ---- Pereche "model 3D + poză explicativă", afișate una lângă cealaltă
   (pentru paginile de teorie, cand un obiect 3D are și o imagine care ii
   explica structura) — reutilizează stilurile .model3d-* de mai sus ---- */
.na-3d-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
  align-items: stretch;
}
@media (max-width: 720px){
  .na-3d-pair{ grid-template-columns: 1fr; }
}
.na-3d-pair-item{ min-width: 0; display: flex; flex-direction: column; }
.na-3d-pair-item .model3d-wrap{ aspect-ratio: 4 / 3; }
/* Poza pereche nu mai e fortata intr-o cutie fixa 4:3 (asta o facea sa para
   minusculA cand imaginea era portret, ca la genunchi/diartroze) - acum
   se intinde pe toata inaltimea disponibila (aceeasi cu vizualizatorul 3D
   de alaturi) si isi pastreaza propriile proportii in interiorul ei. */
.na-3d-pair-item .na-3d-img-box{
  flex: 1;
  min-height: 220px;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  overflow: hidden;
  padding: 10px;
}
.na-3d-pair-item .na-3d-img-box img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  border: none;
  background: none;
}
.na-3d-pair-item .na-caption{ margin-left: 0; margin-right: 0; text-align: left; }

.na-badge{
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--emerald-rgb),.14);
  color: var(--emerald);
  margin-left: 8px;
  vertical-align: middle;
  text-transform: none;
}

/* ---- bucati DE CONTINUT (nu neaparat o sectiune intreaga cu <h2> proprie)
   care sunt exclusive unui singur centru de examen - vezi initFiltrareCentruExamen()
   din teorie-tools.js. Spre deosebire de .na-badge (marcaj manual, pus in <h2>-ul
   unei sectiuni INTREGI), aici eticheta se adauga singura, via ::before, ca sa
   putem marca orice bucata mai mica (un paragraf, o lista) fara sa scriem span-ul
   de fiecare data. ---- */
.na-bloc-exclusiv{
  position: relative;
  padding: 2px 16px 2px;
  margin: 16px 0 20px;
  border-left: 3px solid rgba(var(--emerald-rgb),.35);
  border-radius: 0 8px 8px 0;
  background: rgba(var(--emerald-rgb),.045);
}
.na-bloc-exclusiv::before{
  content: "Doar " attr(data-doar);
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--emerald-rgb),.14);
  color: var(--emerald);
  margin: 12px 0 4px;
}

/* stare "gri" - utilizatorul a ales celalalt centru de examen decat cel pentru
   care e exclusiva bucata asta, dar N-A apasat (inca) butonul de ascundere -
   ramane vizibila si lizibila, dar clar optionala */
.na-exclus-gri{ opacity: .45; filter: grayscale(.7); transition: opacity .15s ease, filter .15s ease; }
.na-exclus-gri:hover{ opacity: .85; filter: grayscale(.25); }

/* ============================================================
   UNELTE PENTRU PAGINILE DE TEORIE (teorie-tools.js): meniul TOC se
   poate inchide/deschide, iar imaginile primesc un mic buton de marire
   pe tot ecranul si unul de adnotare cu creionul.
   ============================================================ */

/* ---- Inchidere/deschidere meniu TOC ---- */
.na-toc-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  border-radius: 6px;
  font-size: .72rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.na-toc-toggle:hover{ color: var(--emerald); border-color: var(--emerald); }

.na-layout.na-toc-is-collapsed{ grid-template-columns: 0px 1fr; }
.na-layout.na-toc-is-collapsed .na-toc{ display: none; }

.na-toc-reopen{
  display: none;
  align-items: center;
  gap: 6px;
  position: fixed;
  top: 72px;
  left: 14px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.na-toc-reopen:not(.d-none){ display: inline-flex; }
.na-toc-reopen:hover{ color: var(--emerald); border-color: var(--emerald); }
@media (max-width: 860px){
  /* pe mobil TOC-ul e deja orizontal, static - butonul de inchidere nu are sens */
  .na-toc-toggle, .na-toc-reopen{ display: none !important; }
  .na-layout.na-toc-is-collapsed{ grid-template-columns: 1fr; }
}

/* ---- Buton "marire" + "adnoteaza", suprapuse peste fiecare imagine ---- */
.na-img-tools-wrap{
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: 100%;
}
/* In .na-figure (poza singura, centrata prin text-align pe parinte), wrapper-ul
   fara latime proprie se intindea la latimea intregului rand, din cauza
   copilului <img> cu width:100% (vezi .na-figure img mai jos) - poza (mai
   ingusta decat randul) parea "lipita" in stanga, cu tot restul randului gol
   in dreapta (raportat de utilizatoare). width:fit-content ar rezolva-o, dar
   depinde de dimensiunea INTRINSECA a imaginii - la cele cu loading="lazy"
   inca neincarcate (dimensiune necunoscuta), wrapper-ul s-ar prabusi temporar
   la ~0. In schimb, oglindim aici EXACT aceeasi regula de latime ca la
   .na-figure img, ca sa nu depinda deloc de continut - identic, incarcat sau
   nu. Scopat doar la .na-figure/.na-figure-row - NU la .na-3d-pair-item, care
   isi centreaza deja copilul altfel (flex + justify-content pe .na-3d-img-box)
   si are nevoie de propria lui logica de marime (vezi mai jos). */
.na-figure .na-img-tools-wrap{ width: 100%; max-width: min(480px, 100%); }
.na-figure-row .na-figure .na-img-tools-wrap{ max-width: 100%; }
.na-img-tools-bar{
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity .15s ease;
}
.na-img-tools-wrap:hover .na-img-tools-bar,
.na-img-tools-wrap:focus-within .na-img-tools-bar{ opacity: 1; }
@media (hover: none){
  .na-img-tools-bar{ opacity: 1; }
}
.na-img-tool-btn{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(10,14,17,.62);
  color: #fff;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease, transform .15s ease;
}
.na-img-tool-btn:hover{ background: rgba(10,14,17,.85); transform: translateY(-1px); }
.na-img-badge{
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  background: rgba(74,222,128,.85);
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---- Protectie de baza a imaginilor: fara "salveaza ca" / tragere, si intunecare
   cand fereastra isi pierde focusul sau tab-ul devine ascuns (vezi teorie-tools.js
   pentru explicatia completa a limitelor - nu poate opri o captura reala de ecran) ---- */
.na-img-protejata img{ -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
body.na-screenshot-guard .na-img-protejata{
  filter: brightness(0) !important;
  transition: none !important;
}

/* ---- Lightbox: marire pe tot ecranul + adnotare cu creionul ---- */
body.na-lightbox-open{ overflow: hidden; }
.na-lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.na-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5,7,9,.86);
}
.na-lightbox-panel{
  position: relative;
  z-index: 1;
  width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.na-lightbox-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.na-lightbox-tools-draw{ display: flex; align-items: center; gap: 10px; }
.na-lightbox-tools-draw input[type="color"]{
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: none; padding: 0; cursor: pointer;
}
.na-lightbox-tools-draw input[type="range"]{ width: 90px; }
.na-lightbox-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.na-lightbox-actions button,
.na-lightbox-tools-draw button{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.na-lightbox-actions button:hover,
.na-lightbox-tools-draw button:hover{ border-color: var(--emerald); color: var(--emerald); }
.na-lightbox-actions button.is-active{ border-color: var(--emerald); color: var(--emerald); background: rgba(74,222,128,.12); }
.na-lightbox-actions button.btn-emphasis{ border-color: var(--emerald); background: var(--emerald); color: var(--ink); }
.na-lightbox-actions button.btn-emphasis:hover{ opacity: .9; color: var(--ink); }
.na-lightbox-stage{
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(#e9e9e9 0% 25%, #f5f5f5 0% 50%) 50% / 22px 22px;
  padding: 16px;
}
#naLbImg{ max-width: 100%; max-height: 78vh; display: block; border-radius: 6px; }
#naLbCanvas{ position: absolute; touch-action: none; cursor: default; }
#naLbCanvas.is-draw-active{ cursor: crosshair; }
.na-lightbox-hint{
  padding: 8px 14px;
  font-size: .78rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ---- Toast rapid (folosit doar daca AccountWidget nu e disponibil) ---- */
.na-toast-rapid{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--emerald);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .86rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 3000;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.na-toast-rapid.is-visible{ opacity: 1; transform: translate(-50%, 0); }


/* ============================================================
   TESTARE — redesign: capitole / tip de testare / statistici
   (clase generice, culorile "tip" vin din --tint-*-rgb din :root)
   ============================================================ */
.test-hero-accent{ color: var(--primary-color); }

.test-picker-card{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.test-picker-head{ display: flex; align-items: flex-start; gap: 14px; }
.test-picker-icon{
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: rgba(var(--tint-green-rgb),.16); color: rgb(var(--tint-green-rgb));
}
.test-picker-titles .test-picker-title{ font-weight: 700; font-family: var(--font-display); margin-bottom: 2px; }
.test-picker-titles .test-picker-sub{ font-size: .83rem; color: var(--muted); }
.test-picker-action{
  border-radius: 999px !important;
  font-weight: 600;
  font-size: .82rem;
  white-space: nowrap;
}

.test-chip-row{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 18px;
}
@media (max-width: 560px){
  .test-chip-row{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .test-chip-row .cat-chip{ flex-shrink: 0; }
}

.test-type-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 6px 0 22px;
}
.test-type-card{
  --tint: var(--tint-green-rgb);
  background: rgba(var(--tint), .07);
  border: 1px solid rgba(var(--tint), .28);
  border-radius: 18px;
  padding: 0 20px 20px;
  overflow: visible;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.test-type-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(var(--tint), .18);
  border-color: rgba(var(--tint), .5);
}
.test-type-card.tint-rose{ --tint: var(--tint-rose-rgb); }
.test-type-card.tint-purple{ --tint: var(--tint-purple-rgb); }
.test-type-card.tint-blue{ --tint: var(--tint-blue-rgb); }
.test-type-card.tint-orange{ --tint: var(--tint-orange-rgb); }

/* ---- poza din capul cardului (banda foto + insigna rotunda care se
   suprapune peste ea) - vezi nota identica din chimie/style.css. */
.test-type-photo{
  width: calc(100% + 40px);
  margin: 0 -20px 0;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 18px 18px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  background-color: rgba(var(--tint), .12);
  background-image: linear-gradient(135deg, rgba(var(--tint), .22), rgba(var(--tint), .05));
}

/* ---- varianta placeholder (poza reala urmeaza sa fie incarcata) - acelasi
   format icon + scris ca la restul site-ului, in aceeasi banda ca pozele
   reale de mai sus, ca sa arate uniform pana se incarca pozele. ---- */
.test-type-photo.test-type-photo-placeholder{
  flex-direction: column; gap: 4px; font-size: initial;
  color: rgb(var(--tint));
}
.test-type-photo-placeholder .test-type-photo-icon{ font-size: 2rem; line-height: 1; }
.test-type-photo-placeholder .test-type-photo-text{ font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }

.test-type-icon{
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: -25px 0 14px;
  background: rgba(var(--tint), .16); color: rgb(var(--tint));
  border: 3px solid var(--surface-2);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  position: relative; z-index: 1;
}
.test-type-title{ font-weight: 700; font-family: var(--font-display); margin-bottom: 4px; }
.test-type-desc{ font-size: .85rem; color: var(--muted); margin-bottom: 14px; }

.test-type-pills{ margin-bottom: 4px; }
.test-type-pills .btn-check + label{
  border-radius: 999px !important;
  border-color: rgba(var(--tint), .45) !important;
  color: rgb(var(--tint)) !important;
  font-weight: 600;
  background: rgba(var(--tint), .08);
}
.test-type-pills .btn-check:checked + label,
.test-type-pills .btn-check + label:hover{
  background: rgb(var(--tint)) !important;
  border-color: rgb(var(--tint)) !important;
  color: #fff !important;
}

.test-type-body{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(var(--tint), .3);
}

.test-type-cta{
  border-radius: 999px !important;
  font-weight: 700;
  background: rgba(var(--tint), .12) !important;
  border: 1px solid rgba(var(--tint), .4) !important;
  color: rgb(var(--tint)) !important;
}
.test-type-cta:hover{
  background: rgb(var(--tint)) !important;
  color: #fff !important;
}

/* ---- fasie de beneficii ---- */
.test-benefit-strip{
  display: flex; flex-wrap: wrap; gap: 18px;
  border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; margin: 4px 0 22px;
  background: var(--surface);
}
.test-benefit-strip .test-benefit-title{
  flex-basis: 100%; text-align: center; font-weight: 700; font-family: var(--font-display);
  margin-bottom: 4px;
}
.test-benefit-item{
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 200px; min-width: 180px;
}
.test-benefit-item .test-benefit-icon{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tint-green-rgb),.15);
  font-size: 1.1rem;
}
.test-benefit-item .test-benefit-text{ font-size: .83rem; line-height: 1.3; }
.test-benefit-item .test-benefit-text strong{ display: block; font-size: .87rem; }

/* ---- bara "Progresul tau" ---- */
.test-stats-bar{
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px;
  border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 22px; background: var(--surface);
  margin-bottom: 26px;
}
.test-stats-title{
  flex-basis: 100%; font-weight: 700; font-family: var(--font-display); margin-bottom: 2px;
}
.test-stat-tile{ display: flex; align-items: center; gap: 10px; }
.test-stat-tile .test-stat-icon{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tint-green-rgb),.15); color: rgb(var(--tint-green-rgb));
  font-size: 1.05rem;
}
.test-stat-tile .test-stat-value{ font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.test-stat-tile .test-stat-label{ font-size: .76rem; color: var(--muted); }
.test-stats-cta{ margin-left: auto; border-radius: 999px !important; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px){
  .test-stats-cta{ margin-left: 0; width: 100%; text-align: center; }
}
.test-stats-locked{
  text-align: center; padding: 10px 6px; color: var(--muted); font-size: .88rem; flex: 1 1 100%;
}
.test-stats-locked button.link-like{
  color: var(--primary-color); font-weight: 600; background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer;
}

/* ============================================================
   BARA DE ADNOTARI (stil "PDF") — paginile de teorie, portat identic
   in chimie/style.css (acolo cu accent --cyan in loc de --emerald).
   Vezi teorie-evidentiere.js pentru logica; aici doar prezentarea.
   ============================================================ */
.teorie-adnotari-bar{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 3200;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
}
@media (max-width: 860px){
  .teorie-adnotari-bar{ left: auto; right: 14px; bottom: 14px; align-items: flex-end; }
}
/* ascunsa cat timp meniul lateral e deschis (body FARA clasa menu-hidden) -
   fara asta, bara (z-index 3200) ramanea vizibila/apasabila PESTE meniu,
   fiindca meniul (fullscreen doar pe unele latimi) nu acopera neaparat
   tot ecranul, iar z-index-ul barei e oricum mai mare decat al meniului */
body:not(.menu-hidden) .teorie-adnotari-bar{ display: none; }

.teorie-adnotari-toggle{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.teorie-adnotari-toggle:hover{ transform: scale(1.06); border-color: var(--emerald); }
.teorie-adnotari-toggle.is-active{
  background: var(--emerald);
  border-color: var(--emerald);
  color: #06231a;
}

.teorie-adnotari-unelte{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  width: 280px;
  max-width: calc(100vw - 32px);
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 32px rgba(0,0,0,.4);
}
@media (max-width: 860px){
  .teorie-adnotari-unelte{ align-items: stretch; }
}

/* ---- randurile din panou (iconita colorata + titlu + descriere scurta) ---- */
.teorie-unealta-row{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.teorie-unealta-row:hover{ background: var(--surface-2); }
.teorie-unealta-row.is-active{ background: rgba(var(--emerald-rgb), .14); }

.teorie-unealta-icon{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.teorie-unealta-icon-marker{ background: rgba(74, 222, 128, .18); }
.teorie-unealta-icon-notite{ background: rgba(244, 197, 66, .18); }
.teorie-unealta-icon-sticker{ background: rgba(214, 51, 132, .18); }
.teorie-unealta-icon-cartonas{ background: rgba(90, 169, 230, .18); }

.teorie-unealta-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teorie-unealta-titlu{ font-weight: 700; font-size: .88rem; color: var(--text); }
.teorie-unealta-desc{ font-size: .74rem; color: var(--text-dim); line-height: 1.25; }

.teorie-adnotari-hint{
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--emerald);
  color: var(--text);
  font-size: .78rem;
  line-height: 1.3;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
@media (max-width: 860px){ .teorie-adnotari-hint{ text-align: right; } }

/* usoara afordanta vizuala pe paragrafe cat timp o unealta e activa —
   fara niciun control/buton atasat, doar un cursor + hover discret */
body.teorie-tool-activ .na-section p[data-teorie-evid-item-id]{
  cursor: pointer;
  transition: background .12s ease;
  border-radius: 6px;
}
body.teorie-tool-activ .na-section p[data-teorie-evid-item-id]:hover{
  background: rgba(var(--emerald-rgb), .08);
}
.na-section p[data-teorie-evid-item-id].is-selectat-adnotare{
  background: rgba(var(--emerald-rgb), .12);
  box-shadow: 0 0 0 2px var(--emerald);
}

/* ---- Panoul flotant unic (marker / notite / sticker / cartonas) ---- */
.teorie-popup-adnotare{
  position: absolute;
  z-index: 3300;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.teorie-popup-adnotare .culoare-swatch,
.teorie-popup-adnotare .particula-note-input{ margin-top: 4px; }
.teorie-popup-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
}
.teorie-popup-close:hover{ color: var(--text); }
.teorie-popup-corp{ padding-right: 20px; }
.teorie-popup-titlu{
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 8px;
}
.teorie-popup-preview{
  font-size: .82rem;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  max-height: 90px;
  overflow-y: auto;
}

/* pe mobil - foaie ancorata jos, pe toata latimea (nu panou langa paragraf) */
.teorie-popup-adnotare.teorie-popup-mobil{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto !important;
  width: auto;
  max-width: none;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  z-index: 3400;
}

/* notita salvata vizibila - "bula" pasiva sub paragraf, click -> redeschide editorul */
.teorie-note-bula{ cursor: pointer; }
.teorie-note-bula:hover{ filter: brightness(1.08); }

/* ---- PROTOTIP: evidentiere "stil PDF" (selectie libera de text) ---- */
.teorie-highlight-liber{ border-radius: 3px; padding: 0 1px; cursor: pointer; }
body.teorie-tool-activ .teorie-highlight-liber:hover{ filter: brightness(1.15); }
.teorie-highlight-liber-roz{ background: rgba(214, 51, 132, .34); }
.teorie-highlight-liber-galben{ background: rgba(244, 197, 66, .4); }
.teorie-highlight-liber-verde{ background: rgba(46, 160, 67, .34); }
.teorie-highlight-liber-albastru{ background: rgba(31, 111, 178, .34); }

/* mica paleta plutitoare, deasupra selectiei de text / segmentului atins */
.teorie-popup-culoare-libera{
  position: absolute;
  z-index: 3350;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}
.teorie-popup-culoare-libera .culoare-swatch{ width: 22px; height: 22px; }
.teorie-popup-culoare-libera .btn-sterge-culoare{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
}
.teorie-popup-culoare-libera .btn-sterge-culoare:hover{ color: var(--text); }

/* ================================================================
   EXERCIȚII GRILĂ (exercitii.html) - pagina dedicata, fullscreen,
   fara header/sidebar-ul obisnuit al site-ului. Culori: crem/auriu
   (--gold) = raspuns dat dar necorectat inca, verde/rosu (folosind
   tokenii --tint-green-rgb / --tint-rose-rgb, deja existenti pe site
   pt. cardurile de testare) = corectat, integral corect / cu greseli.
   ================================================================ */
.exercitii-body{
  margin: 0;
  background: var(--ink);
  background-image:
    linear-gradient(rgba(var(--emerald-rgb),.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--emerald-rgb),.05) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}
.exercitii-root{ min-height: 100vh; }
.exercitii-loading, .exercitii-eroare{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 100vh; text-align: center; color: var(--muted);
}

/* ===== cateva animatii punctuale, folosite cu masura ===== */
@keyframes ex-fade-slide-in{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes ex-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.18); }
  100%{ transform: scale(1); }
}
@keyframes ex-card-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes ex-final-in{
  0%{ opacity: 0; transform: scale(.92); }
  60%{ opacity: 1; transform: scale(1.02); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes ex-final-glow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(var(--emerald-rgb),.35), var(--shadow); }
  50%{ box-shadow: 0 0 0 10px rgba(var(--emerald-rgb),0), var(--shadow); }
}
.ex-anim-in{ animation: ex-fade-slide-in .28s ease; }
@media (prefers-reduced-motion: reduce){
  .ex-anim-in, .ex-pill, .ex-varianta-litera, .ex-sumar--final, .ex-card{ animation: none !important; transition: none !important; }
}

.ex-topbar{
  position: sticky; top: 0; z-index: 20;
  background: rgba(11,15,25,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
}
:root.theme-light .ex-topbar{ background: rgba(255,255,255,.92); }

.ex-topbar-row1{ display: flex; align-items: center; gap: 14px; }
.ex-back{
  color: var(--text); text-decoration: none; font-weight: 600; opacity: .8;
  white-space: nowrap;
}
.ex-back:hover{ opacity: 1; color: var(--emerald); }
.ex-titlu{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; flex: 1; }
.ex-titlu-sub{ display: block; font-family: var(--font-body); font-weight: 500; font-size: .74rem; color: var(--muted); }

.ex-timer, .ex-timer-arata{
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font-family: var(--font-mono); font-size: .92rem; white-space: nowrap;
}
.ex-timer-icon{ opacity: .8; }
.ex-timer-toggle{
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: .85rem; line-height: 1; padding: 0 0 0 4px;
}
.ex-timer-toggle:hover{ color: var(--text); }
.ex-timer-arata{ cursor: pointer; }

.ex-topbar-row2{ margin-top: 10px; overflow-x: auto; }
.ex-pills{ display: flex; gap: 6px; flex-wrap: wrap; }
.ex-pill{
  min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: transform .1s ease;
}
.ex-pill:hover{ transform: translateY(-2px); border-color: var(--emerald); }
.ex-pill--facut{ background: var(--gold); border-color: var(--gold); color: #2b2308; animation: ex-pop .3s ease; }
.ex-pill--corect{ background: rgb(var(--tint-green-rgb)); border-color: rgb(var(--tint-green-rgb)); color: #06280f; animation: ex-pop .3s ease; }
.ex-pill--gresit{ background: rgb(var(--tint-rose-rgb)); border-color: rgb(var(--tint-rose-rgb)); color: #3a0714; animation: ex-pop .3s ease; }

.ex-topbar-row3{
  margin-top: 10px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.ex-progres-info{ font-size: .84rem; color: var(--muted); }
.ex-topbar-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.ex-btn-corecteaza-tot{
  background: rgba(var(--emerald-rgb),.14); border: 1px solid rgba(var(--emerald-rgb),.4); color: var(--text);
}
.ex-btn-corecteaza-tot:hover{ background: rgba(var(--emerald-rgb),.24); color: var(--text); }
.ex-btn-reset{
  background: rgba(var(--tint-rose-rgb),.12); border: 1px solid rgba(var(--tint-rose-rgb),.4); color: var(--text);
}
.ex-btn-reset:hover{ background: rgba(var(--tint-rose-rgb),.22); color: var(--text); }

.ex-content{ max-width: 880px; margin: 0 auto; padding: 20px 16px 80px; }

.ex-sumar{
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 20px;
}
.ex-sumar--final{
  border-color: rgba(var(--emerald-rgb),.4);
  animation: ex-final-in .4s ease, ex-final-glow 1.8s ease .4s 2;
}
.ex-sumar--intro{ border-left: 3px solid var(--gold); animation: ex-fade-slide-in .3s ease; }
.ex-sumar-titlu{ font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.ex-sumar-linie{ margin-bottom: 4px; }
.ex-sumar-nota{ font-size: 1.1rem; margin-top: 6px; }
.ex-sumar-nota-info{ font-size: .84rem; color: var(--muted); margin-top: 6px; }

.ex-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
  /* atat cat e inalta bara de sus (sticky), masurata dinamic in JS -
     altfel scrollIntoView() la click pe o pastila lasa enuntul intrebarii
     ascuns dedesubtul barei */
  scroll-margin-top: calc(var(--ex-topbar-h, 160px) + 14px);
  transition: border-color .2s ease, box-shadow .2s ease;
  animation: ex-card-in .3s ease;
}
.ex-card:hover{ border-color: rgba(var(--emerald-rgb),.3); }
.ex-card-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ex-card-nr{ font-family: var(--font-display); font-weight: 700; color: var(--primary-color); }
.ex-card-punctaj{ font-size: .8rem; color: var(--muted); font-family: var(--font-mono); }
.ex-card-enunt{ margin-bottom: 14px; line-height: 1.55; }

.ex-card-variante{ display: flex; flex-direction: column; gap: 8px; }
.ex-varianta{
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
}
/* checkbox-ul real ramane in DOM (accesibilitate, click prin <label>) dar
   invizibil - varianta se "bifeaza" vizual incercuind litera, ca pe o
   grila reala, nu printr-un patratel de checkbox */
.ex-varianta input[type=checkbox]{
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.ex-varianta-litera{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--text); transition: all .12s ease;
}
.ex-varianta-check:checked + .ex-varianta-litera{
  background: var(--primary-color); border-color: var(--primary-color); color: var(--ink);
  animation: ex-pop .28s ease;
}
.ex-varianta:hover .ex-varianta-litera{ border-color: var(--emerald); }
.ex-varianta-text{ flex: 1; padding-top: 4px; }
.ex-varianta--corecta{ background: rgba(var(--tint-green-rgb),.14); border-color: rgba(var(--tint-green-rgb),.5); }
.ex-varianta--gresita{ background: rgba(var(--tint-rose-rgb),.10); border-color: rgba(var(--tint-rose-rgb),.35); }
.ex-varianta--corecta .ex-varianta-litera{ background: rgb(var(--tint-green-rgb)); border-color: rgb(var(--tint-green-rgb)); color: #06280f; }
.ex-varianta--gresita .ex-varianta-litera{ background: transparent; border-color: rgb(var(--tint-rose-rgb)); color: rgb(var(--tint-rose-rgb)); }
/* raspunsurile bifate de utilizator au INTOTDEAUNA un contur albastru distinct,
   indiferent daca alegerea a fost corecta sau gresita - fill-ul (verde/rosu, de
   mai sus) arata verdictul variantei, conturul albastru arata clar "asta ai
   ales tu", ca sa nu se confunde cu restul variantelor colorate dupa corectare */
.ex-varianta--bifata{ border-color: var(--emerald); border-width: 2px; padding: 9px 11px; box-shadow: 0 0 0 1px rgba(var(--emerald-rgb),.25); }
.ex-varianta--bifata .ex-varianta-litera{ box-shadow: 0 0 0 3px rgba(var(--emerald-rgb),.35); }

/* explicatia e o "caseta" proprie, distincta de randul cu textul variantei,
   ca sa fie clar vizibila si usor de scanat - verde/rosu dupa verdict */
.ex-varianta-explicatie{
  flex-basis: 100%; margin-top: 8px; margin-left: 42px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; line-height: 1.45; color: var(--text);
  background: rgba(11,15,25,.35); border-radius: 8px;
  padding: 10px 12px; border-left: 3px solid var(--border);
}
.ex-varianta--corecta .ex-varianta-explicatie{ border-left-color: rgb(var(--tint-green-rgb)); }
.ex-varianta--gresita .ex-varianta-explicatie{ border-left-color: rgb(var(--tint-rose-rgb)); }
.ex-varianta-explicatie-icon{
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700;
}
.ex-varianta--corecta .ex-varianta-explicatie-icon{ background: rgb(var(--tint-green-rgb)); color: #06280f; }
.ex-varianta--gresita .ex-varianta-explicatie-icon{ background: rgb(var(--tint-rose-rgb)); color: #3a0714; }
.ex-varianta-explicatie--ascunsa{ display: none; }

/* varianta "neutra" (nebifata si gresita, deci corect lasata deoparte) -
   explicatia sta ascunsa dupa un buton, ca sa nu aglomereze cardul */
.ex-btn-vezi-explicatia{
  flex-basis: 100%; margin-top: 6px; margin-left: 42px; align-self: flex-start;
  background: transparent; border: 1px dashed var(--border); color: var(--muted);
  font-size: .8rem; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  transition: all .15s ease;
}
.ex-btn-vezi-explicatia:hover{ border-color: var(--emerald); color: var(--text); }

.ex-card-raspunsuri{
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 12px; font-size: .84rem; color: var(--muted);
}
.ex-card-raspunsuri strong{ color: var(--text); font-family: var(--font-mono); }

.ex-rezolvare{
  margin-top: 14px; background: var(--surface-2); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 10px 14px;
}
.ex-rezolvare-titlu{ font-weight: 700; margin-bottom: 6px; }
.ex-rezolvare p{ margin-bottom: 4px; font-size: .92rem; }

.ex-card-actions{ display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ex-btn-corecteaza{
  background: var(--primary-color); border: none; color: var(--ink); font-weight: 700;
  padding: 7px 18px; border-radius: 999px;
}
.ex-btn-corecteaza:hover{ filter: brightness(1.08); }
.ex-card-rezultat{ font-family: var(--font-mono); font-size: .88rem; color: var(--muted); }

.ex-modal-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ex-modal{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  max-width: 420px; width: 100%; padding: 22px; box-shadow: var(--shadow);
}
.ex-modal-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
.ex-modal-text{ font-size: .92rem; color: var(--text-dim); margin-bottom: 18px; }
.ex-modal-actions{ display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 640px){
  .ex-topbar-row1{ flex-wrap: wrap; }
  .ex-titlu{ order: 3; flex-basis: 100%; }
  .ex-content{ padding: 16px 10px 60px; }
  .ex-card{ padding: 14px; }
}