/* 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 „Lab digital" (portată din prototipul Chimie.Lab) ===== */
  --ink: #0B0F19;
  --surface: #131B2B;
  --surface-2: #1C263A;
  --cyan: #00E5FF;
  --cyan-dim: #00B8C9;
  --phosphor: #39FF14;
  --acid: #D4FF3D;
  --gold: #F2C14E;
  --cyan-rgb: 0,229,255;
  --gtur-accent-rgb: 0,229,255; /* folosit de guided-tour.css - vezi și biologie/style.css */
  --phosphor-rgb: 57,255,20;
  --acid-rgb: 212,255,61;
  --text: #EAF2FF;
  --text-dim: rgba(234,242,255,.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: 'Outfit', "Segoe UI", sans-serif;
  --font-body: 'Manrope', "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --border: rgba(234,242,255,.12);
  --muted: var(--text-dim);
  --primary-color: var(--cyan);
  --secondary-color: var(--acid);
  --descriere-bg: var(--surface);
  --descriere-border: rgba(var(--cyan-rgb),.25);
  --descriere-shadow: 0 10px 34px rgba(var(--cyan-rgb),.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;
  --tint-amber-rgb: 234,179,8;
  /* mov mai deschis, doar pt. textul din caseta "Conexiuni clinice" - pe
     fundal intunecat, --tint-purple-rgb (192,132,252) era prea apropiat
     ca luminozitate de fundalul paginii (usor albastrui), contrast slab;
     pe tema Luminos folosim in continuare --tint-purple-rgb (mai inchis,
     deja are contrast bun pe alb) - vezi override-ul din :root.theme-light */
  --clinic-text-rgb: 196,181,253;
}

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

body{
  background: var(--ink);
  background-image:
    linear-gradient(rgba(var(--cyan-rgb),.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb),.05) 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, .cat-mare-toggle{
  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 si
   cardurile vizibile din pagina 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ă -
   substanțe/reacții/combinat) - 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(--cyan-rgb),.12);
  border-color: var(--cyan);
}
.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(0,229,255,.1);
  border: 1px solid rgba(0,229,255,.35);
}
.sfaturi-personalizate-titlu{
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 6px;
  color: #0e7490;
}
.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;
}

/* ---- Categoria din care face parte substanta, afisata pe cartonasul de detalii ---- */
.detalii-categorie-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan);
  background: rgba(var(--cyan-rgb), .1);
  border: 1px solid rgba(var(--cyan-rgb), .3);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ===== 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;
}

/* ---- Evidentiere si notite personale (necesita cont) ---- */
.particula-tool-btn{
  background: none;
  border: 1px solid rgba(0,0,0,.12);
  font-size: .82rem;
  opacity: .6;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  transition: opacity .15s ease, background .15s ease;
}

.particula-tool-btn:hover{ opacity: 1; background: rgba(0,0,0,.04); }
.particula-tool-btn.is-active{ opacity: 1; background: rgba(244, 197, 66, .18); border-color: rgba(244, 197, 66, .5); }

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

.particula-note-input{
  width: 100%;
  min-height: 60px;
  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ă" — ramane afisata permanent pe cardul substantei,
   sub imagine/sub denumire (nu doar in modalul de detalii). Contrast marit
   fata de versiunea initiala (era prea stearsa - text mic, gri, italic,
   pe fundal aproape transparent - abia se vedea). ---- */
.subst-note-display{
  margin-top: 8px;
  font-size: .86rem;
  font-weight: 600;
  font-style: normal;
  color: var(--text);
  background: rgba(111,66,193,.14);
  border-left: 3px solid var(--primary-color);
  padding: 7px 10px;
  border-radius: 0 8px 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}
/* ============================================================
   TEMĂ „LAB DIGITAL" — reskin inspirat din prototipul Chimie.Lab
   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(var(--cyan-rgb),.10);
  border-color: rgba(var(--cyan-rgb),.28);
  color: var(--cyan);
}

.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(var(--cyan-rgb),.45);
  box-shadow: 0 0 0 .2rem rgba(var(--cyan-rgb),.15);
}

/* ---- Chipsuri de filtrare dupa subcategorie, sub campul de cautare ---- */
.subcat-filtre{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.subcat-filtru-chip{
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.subcat-filtru-chip:hover{
  border-color: rgba(var(--cyan-rgb),.4);
  color: var(--text);
}
.subcat-filtru-chip.is-activ{
  background: rgba(var(--cyan-rgb),.14);
  border-color: rgba(var(--cyan-rgb),.5);
  color: var(--cyan);
}

.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(var(--cyan-rgb),.14);
  border-color: rgba(var(--cyan-rgb),.35);
}
.subst-card:focus-visible{ outline-color: rgba(var(--cyan-rgb),.6); }

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

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

.sidebar-resizer:hover{ background: rgba(var(--cyan-rgb),.22); }
body.resizing-sidebar .sidebar-resizer{ background: rgba(var(--cyan-rgb),.35); }

.descriere-card:hover{ box-shadow: 0 14px 30px rgba(var(--cyan-rgb),.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(--cyan-dim); }

.func-groups{ border-top-color: rgba(255,255,255,.08); }
.func-groups span{ background: rgba(var(--cyan-rgb),.15); color: var(--cyan); }

/* ---- Modul joc: fundalul implicit devine cel al temei lab; 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(var(--cyan-rgb),.08); border-color: rgba(var(--cyan-rgb),.35); }

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

/* ---- Butoane Bootstrap re-tematizate (meniul de categorii, sidebar) ---- */
.btn-warning{
  background-color: var(--surface-2);
  border-color: rgba(var(--cyan-rgb),.25);
  color: var(--cyan);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active{
  background-color: rgba(var(--cyan-rgb),.14) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !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(var(--cyan-rgb),.10) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !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(--phosphor);
  border-color: var(--phosphor);
  color: var(--ink);
  font-weight: 700;
}
.btn-success:hover, .btn-success:focus{
  background-color: #2fe30f !important;
  border-color: #2fe30f !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(var(--cyan-rgb),.10); color: var(--cyan); }
.enz-cat{ background: rgba(var(--cyan-rgb),.08); }
.horm-gland{ background: rgba(var(--acid-rgb),.10); }
.opt-fill{ color: var(--text-dim); }

.obs-flow-text{ background: rgba(var(--acid-rgb),.08); border-color: rgba(var(--acid-rgb),.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{ border-color: rgba(255,255,255,.16); color: var(--text-dim); }
.particula-tool-btn:hover{ background: rgba(255,255,255,.06); }
.particula-tool-btn.is-active{ background: rgba(var(--acid-rgb),.18); border-color: rgba(var(--acid-rgb),.5); color: var(--secondary-color); }
.particula-note-input{ border-color: rgba(var(--cyan-rgb),.4); background: rgba(var(--cyan-rgb),.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(--cyan); background: rgba(var(--cyan-rgb),.14); color: var(--cyan); }
.subst-note-display{ background: rgba(var(--cyan-rgb),.16); border-left-color: var(--cyan); 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(var(--cyan-rgb),.08); border-color: rgba(var(--cyan-rgb),.25); color: var(--text); }
.obs-box{ background: rgba(var(--acid-rgb),.08); border-color: rgba(var(--acid-rgb),.22); color: var(--text); }

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

/* ============================================================
   HEADER NOU + MENIU FULLSCREEN + HERO/TICKER (pagina principală Chimie)
   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);
  min-width: 0;
  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(--cyan); }
.brand-icon{ width: 26px; height: 26px; flex-shrink: 0; }
.site-brand-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.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(--cyan);
  color: var(--cyan);
}

/* ---- 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(--cyan);
  color: var(--cyan);
}
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(var(--cyan-rgb),.14); color: var(--cyan); 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 "Chimie" 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 lunga de 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: 1.95rem;
  font-weight: 700;
  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(--cyan);
  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: #0b1420 !important;
  background: #00E5FF;
  border: none;
  border-bottom: none;
  border-radius: 999px;
  padding: 17px 20px;
  margin-top: 18px;
  box-shadow: 0 10px 26px rgba(0,229,255,.3);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.oxford-nav-link-alt:hover, .oxford-nav-link-alt:focus-visible{
  color: #0b1420 !important;
  background: #39FF14;
  padding-left: 20px;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(57,255,20,.35);
}

.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(var(--cyan-rgb),.16), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(var(--phosphor-rgb),.14), 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 3 (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.25rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.oxford-promo-text{
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 18px;
}
.oxford-promo-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--cyan), var(--phosphor));
  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(var(--cyan-rgb),.3);
}

@media (max-width: 720px){
  .oxford-menu{ grid-template-columns: 1fr; gap: 20px; }
  .oxford-nav-link{ font-size: 1.45rem; }
  /* BUG FIX: video_chimie.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(--cyan); }

/* ---- Hero: eyebrow galben (Admitere medicină) ---- */
.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; }

/* ---- Bara animată cu categorii: 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 14px;
}

.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(--cyan); border-color: var(--cyan); }

.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(--cyan); border-color: var(--cyan); }

.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-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--text-dim);
  white-space: nowrap;
  border: none;
  background: none;
  cursor: pointer;
  transition: color .15s ease;
}
.chapter-ticker-item:hover{ color: var(--cyan); }
.chapter-ticker-dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan);
  opacity: .75;
  flex-shrink: 0;
}

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

/* ---- Banda de subcategorii, dezvăluită la apăsarea unei categorii din bară ---- */
.chapter-substrip{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 8px 26px;
  animation: chapterMarquee 0s; /* no-op, doar pentru consistență */
}
.chapter-substrip-item{
  background: var(--surface-2);
  border: 1px solid rgba(var(--cyan-rgb),.25);
  color: var(--cyan);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.chapter-substrip-item:hover{
  background: rgba(var(--cyan-rgb),.12);
  border-color: var(--cyan);
}

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

/* ============================================================
   TEME ALTERNATIVE: Luminos / Confort ochi
   (implicit rămâne tema întunecată de mai sus)
   ============================================================ */
:root.theme-light{
  --ink: #F7F3EC;
  --surface: #FDFCFF;
  --surface-2: #F3EFFC;
  --text: #1B1F23;
  --text-dim: rgba(27,31,35,.68);
  --border: rgba(0,0,0,.12);

  /* mov, moștenit din identitatea inițială a site-ului — contrast mult mai bun pe fundal alb decât cyan-ul neon */
  --cyan: #6D28D9;
  --cyan-dim: #5B21B6;
  --phosphor: #C026D3;
  --acid: #9333EA;
  /* 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;
  --cyan-rgb: 109,40,217;
  --gtur-accent-rgb: 109,40,217;
  --phosphor-rgb: 192,38,211;
  --acid-rgb: 147,51,234;

  --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;
  --clinic-text-rgb: 124,58,237;
}
: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(27,31,35,.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{ border-color: rgba(0,0,0,.18); }
: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(109,40,217,.25); }
:root.theme-light .func-groups{ border-top-color: rgba(0,0,0,.08); }

/* ---- Rosul de capcana/atentionare (#F97066) e gandit pt. fundal intunecat -
   pe tema Luminos, acelasi rosu deschis are contrast prea slab pe fundal
   aproape alb; il inlocuim cu un rosu mult mai inchis, doar la elementele
   unde rosul e chiar textul (nu doar un accent mic de bordura/icon) ---- */
:root.theme-light .na-alert-title,
:root.theme-light .na-alert p,
:root.theme-light .na-alert p strong,
:root.theme-light .na-tag-tare{ color: #B91C1C; }
:root.theme-light .na-legend-swatch-capcana{ background: #B91C1C; }

/* ============================================================
   CARDURI DE SUBSTANȚĂ — contur aqua/cyan, nume albastru deschis,
   glow + zoom discret la hover (mod dark; se re-tematizează automat
   spre mov pe tema Luminos, prin variabila --cyan)
   ============================================================ */
.subst-card{
  border: 1.5px solid rgba(var(--cyan-rgb),.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(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 16px 34px rgba(var(--cyan-rgb),.30);
}
.img-wrap{
  border: 1.5px solid rgba(var(--cyan-rgb),.35);
}
.subst-name{
  color: var(--cyan);
}

/* ---- 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-size: .85rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}

/* ---- "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(var(--cyan-rgb), .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(--cyan);
  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(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   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(--cyan), var(--phosphor));
  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(--cyan);
  background: none;
  border: none;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease;
}
.settings-info-value:hover{ background: rgba(var(--cyan-rgb),.12); }
.settings-info-value.plan-pro{ color: #b8860b; }
.settings-info-value.plan-max{ color: #a855f7; }

/* ============================================================
   TABEL PERIODIC INTERACTIV (pagina principală Chimie, înainte de descriere)
   ============================================================ */
.periodic-section{ padding: 0 8px 22px; }
.periodic-head{ margin-bottom: 4px; }
.periodic-intro{ color: var(--text-dim); font-size: .88rem; margin: 2px 0 0; }

.periodic-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
}
.periodic-chip{
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.periodic-scroll{
  overflow-x: auto;
  padding-bottom: 8px;
}
.periodic-grid{
  display: grid;
  grid-template-columns: repeat(18, minmax(40px, 1fr));
  grid-auto-rows: minmax(40px, auto);
  gap: 3px;
  min-width: 760px;
}

.el-cell{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  padding: 2px;
  font-family: var(--font-mono);
  line-height: 1.1;
  background: var(--surface-2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.el-cell:hover, .el-cell:focus-visible{
  transform: scale(1.18);
  z-index: 5;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
.el-n{ font-size: .55rem; opacity: .7; }
.el-s{ font-size: .95rem; font-weight: 800; font-family: var(--font-display); }
.el-mass{ font-size: .5rem; opacity: .6; }

.el-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: .6rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ---- Categorii chimice — culori distincte pentru legendă + celule ---- */
.el-alcalin{ color: #FF6B6B; border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.10); }
.el-alcalino-pamantos{ color: #FFA94D; border-color: rgba(255,169,77,.5); background: rgba(255,169,77,.10); }
.el-tranzitie{ color: var(--cyan); border-color: rgba(var(--cyan-rgb),.4); background: rgba(var(--cyan-rgb),.08); }
.el-lantanide{ color: #B794F6; border-color: rgba(183,148,246,.5); background: rgba(183,148,246,.10); }
.el-actinide{ color: #F783AC; border-color: rgba(247,131,172,.5); background: rgba(247,131,172,.10); }
.el-metal{ color: #4FD1C5; border-color: rgba(79,209,197,.5); background: rgba(79,209,197,.10); }
.el-metaloid{ color: var(--acid); border-color: rgba(var(--acid-rgb),.4); background: rgba(var(--acid-rgb),.08); }
.el-nemetal{ color: var(--phosphor); border-color: rgba(var(--phosphor-rgb),.4); background: rgba(var(--phosphor-rgb),.08); }
.el-halogen{ color: var(--gold); border-color: rgba(242,193,78,.5); background: rgba(242,193,78,.10); }
.el-gaz-nobil{ color: #A78BFA; border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.10); }

/* ---- Modal de detalii element ---- */
.element-modal-content{ text-align: center; }
.element-modal-symbol{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  width: 96px;
  height: 96px;
  margin: 4px auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border-width: 2px;
  border-style: solid;
}
.element-modal-cat{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.element-modal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  padding: 0 10px 6px;
}
.element-modal-k{
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--text-dim);
}
.element-modal-v{ font-size: 1.2rem; font-weight: 700; color: var(--text); }

/* ============================================================
   CALCULATOR MASĂ MOLARĂ (pagina principală Chimie, lângă tabelul periodic)
   ============================================================ */
.calc-section{ padding: 0 8px 22px; }

.calc-input-row{
  display: flex;
  gap: 10px;
  margin: 14px 0 10px;
}
.calc-input{
  flex: 1 1 auto;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 10px 14px;
}
.calc-input::placeholder{ color: var(--text-dim); }
.calc-input:focus{
  background: var(--surface-2);
  color: var(--text);
  border-color: rgba(var(--cyan-rgb), .45);
  box-shadow: 0 0 0 .2rem rgba(var(--cyan-rgb), .15);
}
.calc-btn{
  flex-shrink: 0;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
}
.calc-btn:hover{ background: var(--cyan-dim); color: var(--ink); }

.calc-error{
  background: rgba(249,112,102,.10);
  border: 1px solid rgba(249,112,102,.35);
  color: #F97066;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .88rem;
  margin-bottom: 10px;
}

.calc-result{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
}
.calc-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.calc-total-value{ color: var(--cyan); font-size: 1.25rem; }

.calc-breakdown{ display: flex; flex-direction: column; gap: 6px; }
.calc-row{
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .88rem;
}
.calc-row-el{
  font-weight: 800;
  color: var(--cyan);
  background: rgba(var(--cyan-rgb), .10);
  border-radius: 6px;
  padding: 2px 8px;
  text-align: center;
}
.calc-row-eq{ color: var(--text-dim); }
.calc-row-val{ color: var(--text); font-weight: 700; }

@media (max-width: 480px){
  .calc-input-row{ flex-direction: column; }
  .calc-btn{ width: 100%; }
}

/* ---- Comutator Mase exacte / Mase rotunjite ---- */
.periodic-legend-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
}
.periodic-legend-row .periodic-legend{ margin: 0; flex: 1 1 auto; }

.mass-mode-toggle{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  color: var(--text-dim);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.mass-mode-toggle:hover{ border-color: rgba(var(--cyan-rgb), .4); }
.mass-mode-dot{
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease;
}
.mass-mode-dot::after{
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .15s ease, background .15s ease;
}
.mass-mode-toggle.is-rotunjit{ color: var(--cyan); }
.mass-mode-toggle.is-rotunjit .mass-mode-dot{ background: rgba(var(--cyan-rgb), .3); }
.mass-mode-toggle.is-rotunjit .mass-mode-dot::after{
  transform: translateX(12px);
  background: var(--cyan);
}

/* ---- Modalul de detalii element (deschis la click pe o celula din tabel) ----
   Fara aceasta, modalul mostenea fundalul alb implicit Bootstrap cu text
   deschis la culoare (gandit pt fundal intunecat) -> contrast foarte slab. */
#elementModal .modal-content{ background: var(--surface); color: var(--text); }
#elementModal .modal-header{ border-bottom-color: var(--border); }
#elementModal .btn-close{ filter: invert(1) grayscale(100%) brightness(1.8); }

@media (max-width: 576px){
  .periodic-grid{ grid-template-columns: repeat(18, minmax(34px, 1fr)); min-width: 660px; }
}

/* ---- Contrast mai bun pentru tabelul periodic in tema Luminoasa ----
   Culorile de categorie de mai sus sunt gandite pt fundal intunecat;
   pe fundal alb devin palide si greu de citit, asa ca folosim nuante
   mai saturate/inchise pentru text, chenar si eticheta din legenda
   (aceleasi clase .el-* sunt reutilizate si de celule, si de legenda,
   si de simbolul mare din modalul de detalii element). */
:root.theme-light .el-alcalin{ color: #C92A2A; border-color: rgba(201,42,42,.45); background: rgba(201,42,42,.08); }
:root.theme-light .el-alcalino-pamantos{ color: #D9480F; border-color: rgba(217,72,15,.45); background: rgba(217,72,15,.08); }
:root.theme-light .el-lantanide{ color: #7048E8; border-color: rgba(112,72,232,.4); background: rgba(112,72,232,.08); }
:root.theme-light .el-actinide{ color: #C2255C; border-color: rgba(194,37,92,.4); background: rgba(194,37,92,.08); }
:root.theme-light .el-metal{ color: #0C8599; border-color: rgba(12,133,153,.4); background: rgba(12,133,153,.08); }
:root.theme-light .el-gaz-nobil{ color: #6741D9; border-color: rgba(103,65,217,.4); background: rgba(103,65,217,.08); }
:root.theme-light .el-placeholder{ color: var(--text-dim); }
:root.theme-eyecare .el-alcalin{ color: #FF8787; }
:root.theme-eyecare .el-gaz-nobil{ color: #B197FC; }

/* ---- Eticheta de categorie din modalul de detalii substanță (subliniat, stil "overline") ---- */
.detalii-categorie{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: rgba(var(--cyan-rgb), .5);
  text-underline-offset: 4px;
  margin-bottom: 10px;
}

/* ================================================================
   Elemente adaugate ulterior in chimie/ (hub cu flyout, stickere,
   evidentiere card/imagine substanta, editor de cartonas inline)
   — adaptate la paleta noua (cyan/phosphor "Lab digital")
   ================================================================ */

/* ---- Comutator rapid intre categorii "surori" (ex. Alcani/Alchene/Alchine/Arene
   la Hidrocarburi) - vizibil doar cand categoria curenta face parte dintr-un
   asemenea grup, ca sa poti trece direct la alta, fara sa revii la meniu. ---- */
.hub-siblings{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.hub-sibling-pill{
  padding: 6px 16px;
  border-radius: 999px;
  /* contrast anterior prea slab (bordura aproape invizibila + text stins
     pe fundalul intunecat al hub-ului) - vezi raportul utilizatoarei */
  border: 1px solid rgba(var(--cyan-rgb), .35);
  background: var(--surface-2);
  color: var(--text);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hub-sibling-pill:hover{ border-color: var(--cyan); color: var(--text); }
.hub-sibling-pill.is-activ{
  /* folosea --emerald (variabila din tema biologie, nedefinita aici -
     accentul chimiei e --cyan/--phosphor), de-aia pila "activa" nu se
     colora deloc corect */
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}

/* ---- Hub-ul de directii, dupa alegerea unei categorii mari - 3 randuri fixe
   (cerut explicit): Teorie/Reactii/Substante, apoi Exercitii/(Test), apoi
   Stickere/Flashcards/Schite. .hub-row-3 e grid-ul clasic pe 3 coloane,
   .hub-row-flex e pt. randul din mijloc (1-2 carduri, centrate, nu intinse
   pe toata latimea). ---- */
.hub-rows{ display: flex; flex-direction: column; gap: 14px; }
.hub-row-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* la categoriile fara Reacții, primul rand are doar 2 carduri (Teorie +
   Substanțe) - lasate in grid-ul pe 3 coloane, ocupa doar coloanele 1-2 si
   arata "de parca lipseste ceva" din dreapta. Cu acest modificator, randul
   trece pe flex si centreaza perechea, pastrand FIX aceeasi latime per
   card ca la un rand complet de 3 (vezi randarea din chimie/index.html). */
.hub-row-3.hub-row-2up{
  display: flex;
  justify-content: center;
}
.hub-row-3.hub-row-2up > *{
  flex: 0 1 calc((100% - 28px) / 3);
}
@media (max-width: 620px){
  .hub-row-3.hub-row-2up > *{ flex-basis: 100%; }
}
.hub-row-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
/* latimea unui card din randul din mijloc = latimea exacta a unei coloane din
   hub-row-3 (3 coloane egale, acelasi gap de 14px) - ca sa arate EXACT la fel
   ca Teorie/Reactii/Substante, indiferent daca e singur sau alaturi de un al
   doilea card (viitorul buton de Test) */
.hub-row-flex .hub-card{ flex: 0 1 calc((100% - 28px) / 3); }
@media (max-width: 620px){
  .hub-row-3{ grid-template-columns: 1fr; }
  .hub-row-flex .hub-card{ flex: 1 1 100%; max-width: none; }
}

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

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

.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; }

/* ---- cardul de Stickere, sub grid-ul principal (conditionat) ---- */
.hub-card-below{
  width: 100%;
  margin-top: 14px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  padding: 18px 20px;
}
.hub-card-below .hub-card-icon{ margin-bottom: 0; }
@media (max-width: 620px){
  .hub-card-below{ flex-direction: column; text-align: center; }
}

/* ---- Hub-card cu poza sus + insigna rotunda + text pe fundalul cardului
   (Reacții / Formule structurale / 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: 13px 13px 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 celelalte carduri foto din hub. */
.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;
}

/* ---- Flyout cu subcategorii, la hover pe "Formule structurale" ----
   Pozitionat "fix" si mutat in <body> din JS (vezi initFlyoutStructuri),
   ca sa nu fie taiat de overflow:hidden de pe .content-panel. */
.hub-card-wrap{ position: relative; }
.hub-card-wrap .hub-card{ width: 100%; }

.hub-flyout{
  position: fixed;
  z-index: 60;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.hub-flyout.is-deschis{ display: flex; }

.hub-flyout-item{
  background: none;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
}

.hub-flyout-item:hover{
  background: rgba(var(--cyan-rgb), .12);
  color: var(--primary-color);
}

/* ---- Evidentiere pe 4 culori, alegere text/cartonas/sticker, stickere ---- */
.particula-highlight-roz{ background: rgba(214, 51, 132, .14) !important; border-color: rgba(214, 51, 132, .5) !important; }
.particula-highlight-galben{ background: rgba(244, 197, 66, .16) !important; border-color: rgba(244, 197, 66, .55) !important; }
.particula-highlight-verde{ background: rgba(57, 255, 20, .14) !important; border-color: rgba(57, 255, 20, .5) !important; }
.particula-highlight-albastru{ background: rgba(0, 229, 255, .14) !important; border-color: rgba(0, 229, 255, .5) !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);
}

.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); }

/* ---- Evidentierea imaginii / cardului unei substante (culoarea aleasa de utilizator) ----
   Marginea (border) din jurul pozei apartine de baza .img-wrap si nu era suprascrisa aici -
   ramanea mereu gri, indiferent de culoarea aleasa. Acum se recoloreaza si ea. ---- */
.img-wrap-highlight-roz{ background: #fbe4f0; border-color: rgba(214,51,132,.55); border-radius: 12px; box-shadow: 0 0 0 3px rgba(214,51,132,.22), 0 8px 20px rgba(214,51,132,.3); }
.img-wrap-highlight-galben{ background: #fdf3d0; border-color: rgba(244,197,66,.6); border-radius: 12px; box-shadow: 0 0 0 3px rgba(244,197,66,.25), 0 8px 20px rgba(244,197,66,.32); }
.img-wrap-highlight-verde{ background: #e1f5e1; border-color: rgba(46,160,67,.55); border-radius: 12px; box-shadow: 0 0 0 3px rgba(46,160,67,.22), 0 8px 20px rgba(46,160,67,.3); }
.img-wrap-highlight-albastru{ background: #dbedfb; border-color: rgba(31,111,178,.55); border-radius: 12px; box-shadow: 0 0 0 3px rgba(31,111,178,.22), 0 8px 20px rgba(31,111,178,.3); }

/* umbra/lumina (glow) in jurul cardului, in culoarea aleasa - pe langa fundal+bordura */
.subst-card-highlight-roz{ background: #fbe4f0 !important; border-color: rgba(214,51,132,.35) !important; box-shadow: 0 0 0 3px rgba(214,51,132,.2), 0 10px 26px rgba(214,51,132,.3) !important; }
.subst-card-highlight-galben{ background: #fdf3d0 !important; border-color: rgba(244,197,66,.4) !important; box-shadow: 0 0 0 3px rgba(244,197,66,.22), 0 10px 26px rgba(244,197,66,.32) !important; }
.subst-card-highlight-verde{ background: #e1f5e1 !important; border-color: rgba(46,160,67,.35) !important; box-shadow: 0 0 0 3px rgba(46,160,67,.2), 0 10px 26px rgba(46,160,67,.3) !important; }
.subst-card-highlight-albastru{ background: #dbedfb !important; border-color: rgba(31,111,178,.35) !important; box-shadow: 0 0 0 3px rgba(31,111,178,.2), 0 10px 26px rgba(31,111,178,.3) !important; }

/* ---- Cand cardul e evidentiat, numele substantei (implicit "aqua"/cyan) trece intr-o
   nuanta inchisa, saturata a culorii alese de utilizator, ca sa se citeasca bine pe fundalul
   pastelat de mai sus (acelasi fundal indiferent de tema, deci si textul foloseste aceleasi
   nuante fixe, nu variabile de tema) ---- */
.subst-card-highlight-roz .subst-name{ color: #b0246c; }
.subst-card-highlight-galben .subst-name{ color: #9a7614; }
.subst-card-highlight-verde .subst-name{ color: #1e7a34; }
.subst-card-highlight-albastru .subst-name{ color: #1f6fb2; }

/* ---- Aceeasi idee pentru eticheta de categorie din modalul de detalii (cea care apare
   dupa ce apesi pe card) - implicit tot "aqua", acum se coloreaza dupa culoarea de
   evidentiere aleasa pentru substanta respectiva ---- */
.detalii-categorie-badge-roz{ color: #b0246c; background: rgba(214,51,132,.12); border-color: rgba(214,51,132,.35); }
.detalii-categorie-badge-galben{ color: #9a7614; background: rgba(244,197,66,.18); border-color: rgba(244,197,66,.45); }
.detalii-categorie-badge-verde{ color: #1e7a34; background: rgba(46,160,67,.12); border-color: rgba(46,160,67,.35); }
.detalii-categorie-badge-albastru{ color: #1f6fb2; background: rgba(31,111,178,.12); border-color: rgba(31,111,178,.35); }

/* ---- Eticheta "IUPAC:" / "Denumire uzuală:" din modalul de detalii - implicit tot
   "aqua" (var(--primary-color)), acum se coloreaza si ea, la fel ca numele substantei
   si eticheta de categorie, dupa culoarea de evidentiere aleasa ---- */
.alt-name-label-highlight-roz{ color: #b0246c !important; }
.alt-name-label-highlight-galben{ color: #9a7614 !important; }
.alt-name-label-highlight-verde{ color: #1e7a34 !important; }
.alt-name-label-highlight-albastru{ color: #1f6fb2 !important; }

/* ================= 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); }

/* ---- Modalul de cartonaș propriu / cartonasele Stickere-Cartonase-Testare, in tema noua ---- */
#editorModal .modal-content,
#featurePickerModal .modal-content,
#capitoleModal .modal-content{ background: var(--surface); color: var(--text); }
#editorModal .modal-header,
#featurePickerModal .modal-header,
#capitoleModal .modal-header,
#editorModal .modal-footer,
#featurePickerModal .modal-footer,
#capitoleModal .modal-footer{ border-color: rgba(255,255,255,.10); }
#editorModal .btn-close,
#featurePickerModal .btn-close,
#capitoleModal .btn-close{ filter: invert(1) grayscale(1); }

:root.theme-light #editorModal .modal-content,
:root.theme-light #featurePickerModal .modal-content,
:root.theme-light #capitoleModal .modal-content{ background: #fff; color: #12181f; }
: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 .hub-flyout{ background: #fff; }
:root.theme-light .editor-preview{ background: #f3f6fa; }

/* =========================================================
   Afisarea reactiilor chimice — versiune "aerisita"
   Fiecare reactie numerotata primeste propria caseta,
   bine spatiata, cu numarul intr-o insigna colorata care
   anunta clar inceputul unei reactii noi.
   ========================================================= */

.reactii-clasa{ margin-bottom: 44px; }
.reactii-clasa:last-child{ margin-bottom: 0; }

.reactii-clasa-titlu{
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(var(--cyan-rgb), .28);
  display: flex;
  align-items: center;
  gap: 10px;
}
.reactii-clasa-titlu::before{
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(var(--cyan-rgb), .7);
  flex: none;
}

.reactii-subcategorie-titlu{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold);
  background: rgba(242, 193, 78, .1);
  border: 1px solid rgba(242, 193, 78, .28);
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 28px 0 16px;
}
.reactii-clasa > .reactii-subcategorie-titlu:first-of-type{ margin-top: 6px; }

/* ---- Caseta individuala pentru fiecare reactie numerotata ---- */
.reactie-bloc{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, transform .2s ease;
}
.reactie-bloc:last-child{ margin-bottom: 0; }
.reactie-bloc:hover{
  border-color: rgba(var(--cyan-rgb), .35);
  transform: translateY(-2px);
}

.reactie-titlu{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}

/* insigna cu numarul reactiei — "anunta" vizual inceputul unei reactii noi */
.reactie-nr{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--phosphor));
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .95rem;
  box-shadow: 0 0 14px rgba(var(--cyan-rgb), .45);
}
.reactie-nume{ color: var(--text); }

.reactie-conditie{
  font-style: italic;
  font-weight: 500;
  font-size: .88rem;
  color: var(--text-dim);
}

/* ---- Sub-reactiile (a, b, c...) dintr-o reactie mai mare ---- */
.reactie-sub{
  margin: 0 0 18px 6px;
  padding-left: 18px;
  border-left: 2px solid rgba(var(--acid-rgb), .35);
}
.reactie-sub:last-child{ margin-bottom: 0; }

.reactie-sub-titlu{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  margin: 0 0 12px;
}
.reactie-sub-lit{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 50%;
  background: rgba(var(--acid-rgb), .18);
  border: 1px solid rgba(var(--acid-rgb), .4);
  color: var(--acid);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .8rem;
}
.reactie-sub-nume{ color: var(--text); }

/* ---- Ecuatia propriu-zisa (reactanti -> produsi) ---- */
.ecuatie-reactie{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: rgba(var(--cyan-rgb), .06);
  border: 1px solid rgba(var(--cyan-rgb), .16);
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: .95rem;
  line-height: 1.5;
}
.ecuatie-reactie:last-child{ margin-bottom: 0; }

.eq-reactanti{ color: var(--text); }
.eq-produsi{ color: var(--text); font-weight: 600; }
.eq-sageata{
  color: var(--phosphor);
  font-weight: 800;
  padding: 0 2px;
  white-space: nowrap;
}
.eq-nota{
  font-family: var(--font-body);
  font-style: italic;
  font-size: .82rem;
  color: var(--text-dim);
}

#reactii-continut .text-muted.small.ps-2{
  background: rgba(var(--cyan-rgb), .05);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0;
}

@media (max-width: 560px){
  .reactie-bloc{ padding: 16px; }
  .reactie-sub{ margin-left: 0; padding-left: 14px; }
}

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

/* ============================================================
   PAGINA „NOȚIUNI ANORGANICE EXPLICATE"
   ============================================================ */
.na-back-btn{ text-decoration: none; font-size: 1.2rem; }

.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{
  position: sticky;
  top: 80px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 100px - 68px);
  overflow-y: auto;
  padding-right: 6px;
}
@media (max-width: 860px){
  .na-toc{ position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
}
.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: 1.14rem;
  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(--cyan);
  background: rgba(var(--cyan-rgb), .08);
  border-left-color: var(--cyan);
  font-weight: 700;
}
@media (max-width: 860px){
  .na-toc-link{ border-left: none; border: 1px solid var(--border); font-size: .9rem; }
  .na-toc-link.is-active{ border-color: var(--cyan); }
}

.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(2.1rem, 4.5vw, 3rem);
  letter-spacing: -.01em;
  margin: 10px 0 12px;
}
.na-lead{ color: var(--text-dim); font-size: 1.2rem; line-height: 1.75; text-align: justify; }

/* ---- Delimitare intre sectiuni - o linie-accent (gradient), nu doar un fir
   subtire gri, plus un "insigna" cu numarul sectiunii, mult mai vizibila
   decat vechiul text mic, aproape invizibil. Fiecare sectiune "vine spre
   cititor" cu o animatie discreta la scroll (vezi initSectionReveal() din
   teorie-tools.js, clasa .is-vizibila) - fara JS, sau daca utilizatorul
   prefera mai putina miscare, sectiunile raman pur si simplu vizibile. ---- */
.na-section{
  padding: 40px 0;
  border-top: none;
  position: relative;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.na-section.is-vizibila{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .na-section{ opacity: 1; transform: none; transition: none; }
}
.na-section:not(:first-of-type)::before{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  max-width: 320px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), rgba(var(--tint-purple-rgb),.7), transparent);
}
.na-section-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  background: linear-gradient(135deg, var(--cyan), rgb(var(--tint-purple-rgb)));
  border-radius: 10px;
  letter-spacing: 0;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(var(--cyan-rgb),.3);
}
.na-section h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  margin-bottom: 16px;
}
.na-section h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cyan);
  margin: 26px 0 12px;
}
.na-section p{ font-size: 1.14rem; line-height: 1.8; margin-bottom: 16px; color: var(--text); text-align: justify; }
.na-section p strong{ color: var(--text); }
.na-section p em{ color: var(--text-dim); }
/* titlurile si textul asezat intentionat la mijloc (legenda casetelor,
   descrierile de sub imagini) NU se justifica - doar paragrafele "normale" */
.na-section li{ font-size: 1.14rem; line-height: 1.6; text-align: justify; }
/* ---- 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-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; }

/* ---- Caseta gri cu o ecuatie/schema chimica scrisa ca text (nu imagine) -
   reactii, echilibre, formule de calcul, intercalate direct in teorie ---- */
.na-eq{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 18px;
  margin: 14px 0;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  overflow-x: auto;
}

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

.na-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.na-tag-tare{ background: rgba(249,112,102,.14); color: #F97066; }
.na-tag-slab{ background: rgba(var(--acid-rgb),.14); color: var(--acid); }

/* ---- Casete de sfat / atenționare — fundal si text colorate mai puternic
   (nu doar titlul), ca tipul casetei sa se recunoasca dintr-o privire ---- */
.na-tip-box{
  background: rgba(var(--cyan-rgb), .14);
  border: 1px solid rgba(var(--cyan-rgb), .4);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.na-tip-title{ font-weight: 700; color: var(--cyan); margin-bottom: 8px; font-size: 1.04rem; }
.na-tip-box p{ margin-bottom: 8px; font-size: 1.02rem; color: var(--cyan); text-align: justify; }
.na-tip-box p:last-child{ margin-bottom: 0; }
.na-tip-box p strong{ color: var(--cyan); }

.na-alert{
  background: rgba(249,112,102,.14);
  border: 1px solid rgba(249,112,102,.4);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.na-alert-title{ font-weight: 700; color: #F97066; margin-bottom: 8px; font-size: 1.04rem; }
.na-alert p{ margin-bottom: 8px; font-size: 1.02rem; color: #F97066; text-align: justify; }
.na-alert p:last-child{ margin-bottom: 0; }
.na-alert p strong{ color: #F97066; }
.na-example-inline{ font-family: var(--font-mono); color: var(--text-dim); }

/* ---- Scheme de reacție ---- */
.rxn-chain{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.02rem;
}
.rxn-chain-wide{ font-size: .92rem; }
.rxn-species{
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}
.rxn-species.na-ion-neg{ color: var(--cyan); background: rgba(var(--cyan-rgb),.10); }
.rxn-species.na-gas{ color: var(--acid); background: rgba(var(--acid-rgb),.10); }
.na-ion-neg-inline{ color: var(--cyan); }
.rxn-arrow{ color: var(--text-dim); font-size: 1.1rem; }
.rxn-plus{ color: var(--text-dim); }
.rxn-example{
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 10px 0 16px;
  display: inline-block;
}

/* ---- 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;
  min-width: 0;
}
.na-compare-title{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 6px;
  font-size: .92rem;
}
.na-compare-card p{ font-size: .88rem; margin: 0; color: var(--text-dim); }
/* listele lungi de formule (ex. "LiOH, NaOH, KOH, ...") trebuie sa treaca pe
   mai multe randuri pe ecrane inguste - .na-formula e gandit pt. o singura
   formula scurta intr-un tabel (unde nowrap chiar ajuta), nu pt. liste lungi */
.na-compare-card .na-formula{ white-space: normal; }

/* ---- Schema generală acid → ion → sare → ester ---- */
.na-flow{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
}
.na-flow-box{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .03em;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.5px solid;
}
.na-flow-acid{ color: var(--text); border-color: var(--border); background: var(--surface-2); }
.na-flow-ion{ color: var(--cyan); border-color: rgba(var(--cyan-rgb),.4); background: rgba(var(--cyan-rgb),.08); }
.na-flow-salt{ color: var(--acid); border-color: rgba(var(--acid-rgb),.4); background: rgba(var(--acid-rgb),.08); }
.na-flow-ester{ color: var(--phosphor); border-color: rgba(var(--phosphor-rgb),.4); background: rgba(var(--phosphor-rgb),.08); }
.na-flow-arrow, .na-flow-plus{ color: var(--text-dim); font-size: .85rem; font-family: var(--font-mono); }

/* ---- Fișă rapidă — cartonașe ---- */
.na-flashcards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.na-flashcard{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .86rem;
}
.na-flashcard .na-formula{ color: var(--cyan); }
.na-fc-name{ color: var(--text-dim); }
.na-fc-link{ color: var(--text-dim); margin: 0 2px; }

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

/* ---- Ilustrații / imagini explicative în paginile de teorie (structuri
   chimice, scheme etc.) — afișate simplu, ca parte din text (fără cadru/
   umbră/fundal de "card" care le-ar face să pară un element separat). ---- */
.na-figure{
  margin: 20px 0;
  text-align: center;
}
.na-figure img{
  max-width: min(480px, 100%);
  width: 100%;
}
.na-caption{
  margin-top: 10px;
  font-size: .84rem;
  color: var(--text-dim);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.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; }
}

/* ---- Placeholder pentru materiale interactive care urmează să fie adăugate
   (ex. caseta "Activitate interactivă" din documentele de teorie) ---- */
.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-badge{
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--cyan-rgb),.14);
  color: var(--cyan);
  margin-left: 8px;
  vertical-align: middle;
  text-transform: none;
}

/* ============================================================
   CASETE DE NOTAȚIE — teoria nouă de chimie (documentele .docx livrate).
   Familia albastră (.na-tip-box, deja existentă mai sus) rămâne pentru
   trucuri/detalii de finețe; adaug aici capcana (.na-alert, deja existentă,
   accent roșu, aceeași familie de casetă) + doua tipuri noi, conexiuni
   clinice (mov) și "știai că" (crem/auriu) — plus legenda care le explică
   pe toate la începutul fiecărui capitol.
   ============================================================ */
.na-box-clinic{
  background: rgba(var(--tint-purple-rgb), .14);
  border: 1px solid rgba(var(--tint-purple-rgb), .4);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.na-box-clinic-title{ font-weight: 700; color: rgb(var(--clinic-text-rgb)); margin-bottom: 8px; font-size: 1.04rem; }
.na-box-clinic p{ margin-bottom: 8px; font-size: 1.02rem; color: rgb(var(--clinic-text-rgb)); text-align: justify; }
.na-box-clinic p:last-child{ margin-bottom: 0; }
.na-box-clinic p strong{ color: rgb(var(--clinic-text-rgb)); }

/* ---- "Stiai ca" - fundalul ramane crem/auriu, dar TEXTUL e portocaliu
   (galben pe fundal deschis e greu de citit) ---- */
.na-box-stiaica{
  background: rgba(var(--tint-amber-rgb), .16);
  border: 1px solid rgba(var(--tint-amber-rgb), .4);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.na-box-stiaica-title{ font-weight: 700; color: rgb(var(--tint-orange-rgb)); margin-bottom: 8px; font-size: 1.04rem; }
.na-box-stiaica p{ margin-bottom: 8px; font-size: 1.02rem; color: rgb(var(--tint-orange-rgb)); text-align: justify; }
.na-box-stiaica p:last-child{ margin-bottom: 0; }
.na-box-stiaica p strong{ color: rgb(var(--tint-orange-rgb)); }

/* ---- Exerciții grilă intercalate în teorie (secțiunea "Exerciții grilă",
   răspuns ascuns sub <details>, fără nicio legătură cu Nex Coins/scor -
   doar verificare rapidă a înțelegerii, direct în text) ---- */
.na-quiz{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0;
}
.na-quiz p{ margin-bottom: 8px; font-size: 1.02rem; text-align: justify; }
.na-quiz summary{ cursor: pointer; color: var(--cyan); font-weight: 700; font-size: .98rem; }
.na-quiz-raspuns{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.na-quiz-raspuns p:last-child{ margin-bottom: 0; }

/* ---- Legendă la începutul fiecărui capitol nou — explică notațiile.
   Titlul e acum un buton care ascunde/arată rândurile (implicit închisă -
   vezi initLegendaToggle() din teorie-tools.js). ---- */
.na-legend{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 20px;
  margin: 20px 0 30px;
}
.na-legend-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--text);
  font-weight: 700;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.na-legend-toggle-icon{ color: var(--text-dim); font-size: .8rem; transition: transform .15s ease; }
.na-legend-toggle:hover{ color: var(--cyan); }
.na-legend-rows{ display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.na-legend-row{ display: flex; align-items: baseline; gap: 10px; font-size: .96rem; line-height: 1.5; }
.na-legend-swatch{
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-top: 3px;
}
.na-legend-swatch-gri{ background: #9a9a9a; }
.na-legend-swatch-tip{ background: rgb(var(--cyan-rgb)); }
.na-legend-swatch-capcana{ background: #F97066; }
.na-legend-swatch-clinic{ background: rgb(var(--tint-purple-rgb)); }
.na-legend-swatch-stiaica{ background: rgb(var(--tint-orange-rgb)); }
.na-legend-row strong{ color: var(--text); }

/* ============================================================
   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. Port din biologie/style.css
   (fisierul js/teorie-tools.js e deja generic, nescris special pt. biologie).
   ============================================================ */
.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(--cyan); border-color: var(--cyan); }

.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(--cyan); border-color: var(--cyan); }
@media (max-width: 860px){
  .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%;
}
.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(var(--cyan-rgb),.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(--cyan); color: var(--cyan); }
.na-lightbox-actions button.is-active{ border-color: var(--cyan); color: var(--cyan); background: rgba(var(--cyan-rgb),.12); }
.na-lightbox-actions button.btn-emphasis{ border-color: var(--cyan); background: var(--cyan); 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(--cyan);
  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); }

/* ============================================================
   SCARA DE TĂRIE A ACIZILOR — scară elicoidală 3D, în jurul unui ax central
   (pagina Noțiuni anorganice explicate)
   ============================================================ */
.stair3d-wrap{
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 26px auto 34px;
  perspective: 1000px;
}
.stair3d-wrap-lg{ max-width: 560px; }

.stair3d-stage{
  position: absolute;
  top: 40px;
  left: 50%;
  width: 1px;
  height: 1px;
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(-26deg);
}

.stair3d-pole{
  position: absolute;
  top: -14px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--border), rgba(var(--cyan-rgb), .55), var(--border));
  transform: translateX(-50%);
}

.stair3d-step{
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  transform-style: preserve-3d;
}

.stair3d-label{
  position: absolute;
  top: 0; left: 0;
}

.stair3d-chip{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 2px solid rgba(var(--cyan-rgb), .45);
  border-radius: 999px;
  padding: 9px 18px 9px 9px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  cursor: default;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.stair3d-chip:hover{
  transform: scale(1.4);
  border-color: var(--cyan);
  box-shadow: 0 14px 28px rgba(0,0,0,.55);
  position: relative;
  z-index: 30;
}

.stair3d-n{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--cyan-rgb), .18);
  color: var(--cyan);
  font-size: .78rem;
  flex-shrink: 0;
}
.stair3d-f{ color: var(--text); }

.stair3d-step.is-first .stair3d-chip{ border-color: var(--gold); background: rgba(242,193,78,.14); }
.stair3d-step.is-first .stair3d-n{ background: rgba(242,193,78,.3); color: var(--gold); }
.stair3d-step.is-last .stair3d-chip{ opacity: .72; }

@media (max-width: 480px){
  .stair3d-chip{ font-size: .82rem; padding: 6px 14px 6px 6px; }
  .stair3d-n{ width: 18px; height: 18px; font-size: .68rem; }
}

/* ---- Scara de pH ---- */
.ph-scale-wrap{ margin: 18px 0; }
.ph-scale-bar{
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .78rem;
  background: linear-gradient(90deg,
    #E4572E 0%, #F2A354 20%, #F2E394 40%,
    #A8D8B9 50%, #6FCF97 55%,
    #4FA5D8 70%, #4E6FD8 85%, #7C4DFF 100%);
}
.ph-scale-bar span{
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: rgba(0,0,0,.72);
}
.ph-scale-bar span.ph-scale-neutral{
  font-weight: 800;
  color: #1B1F23;
  background: rgba(255,255,255,.25);
}
.ph-scale-labels{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .74rem;
  color: var(--text-dim);
  margin-top: 6px;
  flex-wrap: wrap;
}
/* ============================================================
   JOCUL ACIZILOR — ordonare pe scara tariei
   ============================================================ */
.acidgame-picker{ text-align: center; }
#acidgameArea{ padding-top: 14px; padding-bottom: 14px; }
.acidgame-picker-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
}
.acidgame-cat-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 200px;
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.acidgame-cat-btn:hover{
  transform: translateY(-3px);
  border-color: var(--cyan);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.acidgame-cat-emoji{ font-size: 1.8rem; }
.acidgame-cat-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.acidgame-cat-count{ color: var(--text-dim); font-size: .84rem; }

.acidgame-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.acidgame-status{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
  font-size: .84rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.acidgame-instr{
  color: var(--text-dim);
  font-size: .76rem;
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acidgame-instr-picker{
  white-space: normal;
  font-size: .84rem;
  margin-bottom: 14px;
}

/* ---- terenul de joc: coloana(e) de carduri + scara, alaturate ---- */
.acidgame-playfield{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 460px) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 8px;
}
.acidgame-playfield.is-split{
  grid-template-columns: minmax(0, 1fr) minmax(160px, 280px) minmax(160px, 280px) minmax(0, 1fr);
}
.acidgame-pool-col{
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}
.acidgame-pool-col-right{ grid-column: 3; }
.acidgame-playfield.is-split .acidgame-pool-col-right{ grid-column: 4; }
.acidgame-pool-col .acidgame-card{ width: 100%; }
@media (max-width: 860px){
  .acidgame-playfield, .acidgame-playfield.is-split{ grid-template-columns: 1fr 1fr; }
  .acidgame-pool-col{ grid-column: 1; grid-row: 2; max-height: none; overflow-y: visible; }
  .acidgame-pool-col-right, .acidgame-playfield.is-split .acidgame-pool-col-right{ grid-column: 2; grid-row: 2; }
  .acidgame-scale{ grid-column: 1; grid-row: 1; }
  #acidgameScaleB{ grid-column: 2; grid-row: 1; }
  .acidgame-pool-col .acidgame-pool{ flex-direction: column !important; }
  .acidgame-pool-col .acidgame-card{ width: 100%; }
}

/* ---- scara (spirala 2D, in trepte) ---- */
.acidgame-scale{
  grid-column: 2;
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0;
}
.acidgame-playfield.is-split #acidgameScaleB{ grid-column: 3; }
.acidgame-scale::before{
  content: '';
  position: absolute;
  top: 4px; bottom: 4px; left: 50%;
  width: 2px;
  background: linear-gradient(var(--border), rgba(var(--cyan-rgb),.5), var(--border));
  transform: translateX(-50%);
  z-index: 0;
}
.acidgame-slot{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 82%;
  min-height: 30px;
  margin: 3px 0;
  padding: 3px 8px;
  border-radius: 10px;
  border: 2px dashed rgba(var(--cyan-rgb),.35);
  background: var(--surface-2);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.acidgame-slot-l{ margin-right: auto; }
.acidgame-slot-r{ margin-left: auto; }
.acidgame-slot:hover{ transform: scale(1.02); border-color: var(--cyan); z-index: 2; }
.acidgame-slot.is-filled{ border-style: solid; border-color: rgba(var(--cyan-rgb),.45); cursor: pointer; }
.acidgame-slot.is-correct{ border-color: var(--phosphor); background: rgba(var(--phosphor-rgb),.10); }
.acidgame-slot.is-wrong{ border-color: #F97066; background: rgba(249,112,102,.10); }
.acidgame-slot-num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(var(--cyan-rgb),.18);
  color: var(--cyan);
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
}
.acidgame-slot-gol{
  color: var(--text-dim);
  font-size: .76rem;
  font-style: italic;
}

/* ---- pool de carduri ---- */
.acidgame-pool{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 30px;
}

/* ---- cardul unei substante ---- */
.acidgame-card{
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 3px 8px;
  border-radius: 8px;
  border: 2px solid rgba(var(--cyan-rgb),.4);
  background: var(--surface);
  cursor: grab;
  user-select: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.acidgame-card:hover{
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  z-index: 2;
  position: relative;
}
.acidgame-card.is-selected{
  border-color: var(--gold);
  background: rgba(242,193,78,.14);
  transform: translateY(-2px) scale(1.04);
}
.acidgame-card-f{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .82rem;
  color: var(--text);
  white-space: nowrap;
}
.acidgame-card-n{
  font-size: .66rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.acidgame-card-in-slot{
  cursor: grab;
  padding: 6px 12px;
  flex: 1;
}
.acidgame-card-in-slot:hover{ border-color: var(--cyan); }
.acidgame-card-in-slot:active{ cursor: grabbing; }

.acidgame-controls{ text-align: center; margin-top: 4px; }

.acidgame-feedback{ margin-top: 16px; }
.acidgame-msg{
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 600;
}
.acidgame-msg-ok{
  background: rgba(var(--phosphor-rgb),.14);
  color: var(--phosphor);
  border: 1px solid rgba(var(--phosphor-rgb),.4);
}
.acidgame-msg-warn{
  background: rgba(249,112,102,.12);
  color: #F97066;
  border: 1px solid rgba(249,112,102,.4);
}

@media (max-width: 600px){
  .acidgame-slot{ width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  .acidgame-cat-btn{ min-width: 45%; padding: 16px; }
}

/* ============================================================
   SCARA TARIEI ACIZILOR — varianta 2D, plata, in trepte (nu 3D)
   ============================================================ */
.stairflat-wrap{
  position: relative;
  max-width: 640px;
  margin: 26px auto 34px;
  padding: 10px 0;
}
.stairflat-wrap::before{
  content: '';
  position: absolute;
  top: 6px; bottom: 6px; left: 50%;
  width: 2px;
  background: linear-gradient(var(--border), rgba(var(--cyan-rgb),.5), var(--border));
  transform: translateX(-50%);
  z-index: 0;
}
.stairflat-item{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 78%;
  min-height: 52px;
  margin: 10px 0;
  padding: 8px 14px;
  border-radius: 14px;
  border: 2px solid rgba(var(--cyan-rgb),.4);
  background: var(--surface-2);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.stairflat-item:hover{
  transform: scale(1.03);
  border-color: var(--cyan);
  box-shadow: 0 8px 18px rgba(0,0,0,.3);
  z-index: 2;
}
.stairflat-item-l{ margin-right: auto; }
.stairflat-item-r{ margin-left: auto; }
.stairflat-num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(var(--cyan-rgb),.18);
  color: var(--cyan);
  font-size: .76rem;
  font-weight: 800;
  flex-shrink: 0;
}
.stairflat-chip{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stairflat-f{
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: .94rem;
  color: var(--text);
  white-space: nowrap;
}
.stairflat-n{ font-size: .72rem; color: var(--text-dim); white-space: nowrap; }
.stairflat-item.is-first{ border-color: var(--gold); background: rgba(242,193,78,.14); }
.stairflat-item.is-first .stairflat-num{ background: rgba(242,193,78,.3); color: var(--gold); }
.stairflat-item.is-last{ opacity: .72; }

@media (max-width: 600px){
  .stairflat-item{ width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
}


/* ============================================================
   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(3, 1fr);
  gap: 16px;
  margin: 6px 0 22px;
}
@media (max-width: 720px){
  .test-type-grid{ grid-template-columns: 1fr; }
}
.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) - se bazeaza pe acelasi limbaj vizual ca la
   .hub-card-photo, dar bleed-uita edge-to-edge prin margini negative
   egale cu padding-ul cardului, ca sa nu fie nevoie sa restructuram
   restul continutului cardului (titlu/descriere/butoane raman la fel). */
.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));
}

.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; }
/* avertisment scurt (ex. "nu sunt gratuite") direct pe card, inainte sa
   apese butonul - transparenta din start, nu doar in modal */
.test-type-note{
  font-size: .76rem; line-height: 1.4; color: var(--muted);
  background: rgba(var(--tint), .08); border: 1px solid rgba(var(--tint), .25);
  border-radius: 8px; padding: 8px 10px; margin: 0 0 12px;
}

.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;
}

/* ============================================================
   BARA DE ADNOTARI (stil "PDF") — paginile de teorie, portat identic
   din biologie/style.css (acolo cu accent --emerald in loc de --cyan).
   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; }
/* creionul mutat in coltul cardului marit (modalul unei substante) - vezi
   initAdnotareCarduri({ modal }) in teorie-evidentiere.js */
.teorie-adnotari-bar.is-in-modal{ position: absolute; left: 14px; right: auto; bottom: 14px; z-index: 6; align-items: flex-start; }
body:not(.menu-hidden) .teorie-adnotari-bar.is-in-modal{ display: flex; }
.modal-content:has(.teorie-adnotari-bar.is-in-modal) .modal-body{ padding-bottom: 78px; }
.teorie-popup-adnotare.teorie-popup-in-modal{ position: absolute; left: 14px; bottom: 76px; top: auto; z-index: 7; }

.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(--cyan); }
.teorie-adnotari-toggle.is-active{
  background: var(--cyan);
  border-color: var(--cyan);
  color: #06202a;
}

.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(--cyan-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(57, 255, 20, .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(0, 229, 255, .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(--cyan);
  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(--cyan-rgb), .08);
}
.na-section p[data-teorie-evid-item-id].is-selectat-adnotare{
  background: rgba(var(--cyan-rgb), .12);
  box-shadow: 0 0 0 2px var(--cyan);
}

/* ---- 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); }

/* ---- 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;
}

/* ============================================================
   PAGINA PRINCIPALĂ (chimie/index.html) — secțiuni portate din
   prototipul Chimie.Lab: ghidul „Cum să abordezi chimia", experimentul
   vedetă animat (eprubeta/vulcanul chimic) și „Chimia neștiută" (facts).
   Clase proprii, prefixate cu "clab-", ca să nu se ciocnească cu nimic
   din restul foii de stil. Folosesc exclusiv variabilele deja definite
   in :root (tema „Lab digital"), deci se adaptează automat la toate
   cele 3 teme (Întunecat/Luminos/Confort ochi).
   ============================================================ */

/* ---- „Cum să abordezi chimia" — 4 pași ---- */
.clab-learn-section{ padding: 8px 8px 30px; }
.clab-learn-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 2px 0 8px;
}
.clab-learn-title span{ color: var(--phosphor); text-shadow: 0 0 24px rgba(var(--phosphor-rgb),.35); }
.clab-learn-intro{ color: var(--text-dim); max-width: 620px; line-height: 1.6; margin: 0 0 20px; }
.clab-learn-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.clab-learn-card{
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;
}
.clab-learn-step{
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 800;
  color: rgba(var(--cyan-rgb), .10);
  line-height: 1;
  user-select: none;
}
.clab-learn-icon{ font-size: 1.7rem; margin-bottom: 12px; position: relative; }
.clab-learn-card-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
  position: relative;
}
.clab-learn-card-text{
  font-size: .87rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  position: relative;
}

/* ---- Experimentul vedetă — eprubeta/vulcanul chimic animat ---- */
.clab-experiment-section{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  padding: 10px 8px 30px;
}
@media (min-width: 992px){
  .clab-experiment-section{ grid-template-columns: 1fr 1.15fr; }
}
.clab-experiment-visual{ position: relative; max-width: 380px; margin: 0 auto; width: 100%; }
.clab-experiment-eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 8px;
}
.clab-experiment-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  margin: 0 0 16px;
}
.clab-experiment-eq-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.clab-experiment-eq-label{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .62rem;
  color: var(--cyan);
  margin-bottom: 4px;
}
.clab-experiment-eq{ font-family: var(--font-mono); font-size: 1.05rem; word-break: break-word; }
.clab-experiment-text{ color: var(--text-dim); line-height: 1.6; margin: 0 0 18px; }
.clab-experiment-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.clab-mini-stat{ border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.clab-mini-stat-label{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .6rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.clab-mini-stat-value{ font-family: var(--font-mono); font-size: .85rem; }
.clab-experiment-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.clab-experiment-cta:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--cyan-rgb),.3); color: var(--ink); }

.clab-flask-svg{ width: 100%; height: auto; overflow: visible; }
@keyframes clab-float-up{
  0%{ transform: translateY(0); opacity: 0; }
  30%{ opacity: 1; }
  100%{ transform: translateY(-60px); opacity: 0; }
}
@keyframes clab-bubble{
  0%{ transform: translateY(0); opacity: .9; }
  100%{ transform: translateY(-80px); opacity: 0; }
}

/* ---- "Chimia nestiuta" - bento de facts ---- */
.clab-facts-section{ padding: 10px 8px 6px; }
.clab-facts-title{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 2px 0 20px;
}
.clab-facts-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.clab-fact-card{
  grid-column: span 12;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
@media (min-width: 768px){
  .clab-fact-span-4{ grid-column: span 4; }
  .clab-fact-span-6{ grid-column: span 6; }
  .clab-fact-span-8{ grid-column: span 8; }
}
.clab-fact-num{ font-family: var(--font-mono); font-size: .72rem; color: var(--cyan); margin-bottom: 10px; }
.clab-fact-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 10px; }

/* ================================================================
   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(--cyan-rgb),.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-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(--cyan-rgb),.35), var(--shadow); }
  50%{ box-shadow: 0 0 0 10px rgba(var(--cyan-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(--cyan); }
.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(--cyan); }
.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(--cyan-rgb),.14); border: 1px solid rgba(var(--cyan-rgb),.4); color: var(--text);
}
.ex-btn-corecteaza-tot:hover{ background: rgba(var(--cyan-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(--cyan-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(--cyan-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(--cyan); }
.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(--cyan); border-width: 2px; padding: 9px 11px; box-shadow: 0 0 0 1px rgba(var(--cyan-rgb),.25); }
.ex-varianta--bifata .ex-varianta-litera{ box-shadow: 0 0 0 3px rgba(var(--cyan-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(--cyan); 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; }

/* ---- Galeria de "structuri chimice implicate" (Teste) - apare dupa
   corectare, sub rezolvare, cu imaginile + numele compusilor din barem.
   Fiecare imagine e infasurata in .na-figure (vezi js/teorie-tools.js),
   ca sa capete acelasi buton "⛶ Mărește pe tot ecranul" folosit la
   diagramele din paginile de teorie - vezi window.reataseazaImaginiTeorie()
   in teste.js, apelat dupa ce galeria e randata (imaginile vin dintr-un
   fetch async, dupa scanarea initiala a teorie-tools.js). Regulile de mai
   jos suprascriu dimensiunile implicite ale .na-figure (gandite pt.
   ilustratii mari, in pagina) ca sa ramana miniaturi compacte aici. ---- */
.ex-structuri{
  margin-top: 14px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.ex-structuri-titlu{ font-weight: 700; margin-bottom: 10px; font-size: .88rem; color: var(--text-dim); }
.ex-structuri-grid{ display: flex; flex-wrap: wrap; gap: 14px; }
.ex-structura-item{
  width: 136px; text-align: center; background: #fff; border-radius: 8px;
  padding: 8px; border: 1px solid rgba(255,255,255,.12);
}
.ex-structura-item .na-figure{ margin: 0; }
.ex-structura-item .na-figure img,
.ex-structura-item .na-img-tools-wrap{ width: 100%; }
.ex-structura-item .na-figure img{ height: 96px; object-fit: contain; display: block; max-width: none; }
.ex-structura-eticheta{ font-size: .72rem; color: #1a1a1a; margin-top: 6px; line-height: 1.3; }

/* ---- Ecran "trebuie sa fii autentificat" (ex. Teste, care se
   achizitioneaza) - identic cu premium-lock din testare.html, mutat aici
   ca sa poata fi folosit si de pagini fara acel <style> local ---- */
.premium-lock{
  text-align: center; padding: 30px 20px; background: var(--surface-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 14px;
}

@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; }
}
.clab-fact-text{ color: var(--text-dim); line-height: 1.55; margin: 0; }

/* ============================================================
   CITATE „SCRISE DE MÂNĂ" — aceeași idee ca notițele verzi de la Clasament /
   Jocurile comunității (css/ml-shell.css, .ml-hero-nota) și din footer,
   dar la chimie în gradient verde -> albastru. Sunt div-uri (nu p), deci
   nu schimbă ancorele evidențierilor din teorie.
   ============================================================ */
.na-citat,
.hero-citat{
  font-family: 'Segoe Script', 'Brush Script MT', cursive;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.32;
  text-align: center;
  transform: rotate(-4deg);
  background: linear-gradient(120deg, #5fe3a1 0%, #3fd0c9 45%, #4c9eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(76,158,255,.18));
}
.na-citat span,
.hero-citat span{ display: block; }
.na-citat-inima{
  margin-top: 8px;
  font-style: normal;
  font-size: 1.35rem;
  -webkit-text-fill-color: initial;
  color: initial;
  animation: naCitatBate 1.8s ease-in-out infinite;
}
@keyframes naCitatBate{ 0%,100%{ transform: scale(1); } 15%{ transform: scale(1.18); } 30%{ transform: scale(1); } }
:root.theme-light .na-citat,
:root.theme-light .hero-citat{ background-image: linear-gradient(120deg, #13935a 0%, #0f8f95 45%, #1f63d6 100%); }
:root.theme-eyecare .na-citat,
:root.theme-eyecare .hero-citat{ background-image: linear-gradient(120deg, #9fcf73 0%, #7fbfa8 45%, #7fa8d9 100%); }

/* in hero-ul capitolelor: coloana din dreapta, langa titlu + introducere */
.na-hero:has(> .na-citat){
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  column-gap: 28px;
  align-items: center;
}
.na-hero:has(> .na-citat) > :not(.na-citat){ grid-column: 1; }
.na-hero > .na-citat{ grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 760px){
  .na-hero:has(> .na-citat){ grid-template-columns: 1fr; }
  .na-hero > .na-citat{ grid-column: 1; grid-row: auto; margin-top: 14px; font-size: 1rem; }
  .na-citat span{ display: inline; }
  .na-citat span::before{ content: " "; }
  .na-citat-inima{ display: inline-block !important; margin: 0 0 0 6px; font-size: 1.1rem; }
}

/* pe pagina principala Chimie: plutind in dreapta hero-ului pe ecrane late,
   sub subtitlu pe ecrane mai inguste */
.hero-section{ position: relative; }
.hero-citat{ width: 190px; margin: 14px auto 0; }
@media (min-width: 1100px){
  .hero-citat{ position: absolute; right: 4%; top: 50%; margin: 0; transform: translateY(-50%) rotate(-5deg); }
}
.hero-citat{ opacity: 0; animation: heroCitatIn 1s .5s ease forwards; }
@keyframes heroCitatIn{ to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .hero-citat{ animation: none; opacity: 1; } .na-citat-inima{ animation: none; } }