:root {
  --fundal: #f5f6f8;
  --suprafata: #ffffff;
  --text: #1a2230;
  --text-slab: #5b6676;
  --linie: #e1e5eb;
  --accent: #1f5fbf;
  --accent-text: #ffffff;
  --sus: #12805c;
  --jos: #c23b3b;
  --sus-fundal: #e4f4ee;
  --jos-fundal: #fbe9e9;
  --atentie-fundal: #fff6dd;
  --atentie-text: #6b5200;
  --raza: 10px;
  --umbra: 0 1px 2px rgba(20, 30, 50, 0.06), 0 2px 8px rgba(20, 30, 50, 0.04);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundal: #12161d;
    --suprafata: #1b212b;
    --text: #e8ecf2;
    --text-slab: #9aa5b5;
    --linie: #2c3441;
    --accent: #6ea3f2;
    --accent-text: #0d1522;
    --sus: #4cc79a;
    --jos: #f07f7f;
    --sus-fundal: #173a30;
    --jos-fundal: #432226;
    --atentie-fundal: #3a3115;
    --atentie-text: #f1dc9a;
    --umbra: none;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fundal);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
p { margin: 0 0 12px; }

.slab { color: var(--text-slab); }
.mic { font-size: 0.875rem; }
.numar { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sus { color: var(--sus); }
.jos { color: var(--jos); }
.ascuns { display: none !important; }

/* ---------- Antet ---------- */
.antet {
  background: var(--suprafata);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 10;
}
.antet-interior {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.sigla { font-weight: 700; font-size: 1.1rem; color: var(--text); margin-right: auto; }
.sigla:hover { text-decoration: none; }
.cont { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.cont strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cont-nume { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meniu {
  order: 3;
  width: 100%;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px;
  width: calc(100% + 32px);
}
.meniu::-webkit-scrollbar { display: none; }
.meniu a {
  padding: 8px 12px;
  color: var(--text-slab);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  font-weight: 500;
}
.meniu a:hover { color: var(--text); text-decoration: none; }
.meniu a.activ { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Structură ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}
.titlu-pagina { margin-bottom: 16px; }
.card {
  background: var(--suprafata);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  box-shadow: var(--umbra);
  padding: 16px;
  margin-bottom: 16px;
}
.grila { display: grid; gap: 16px; }
@media (min-width: 860px) {
  .grila.doua { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.subsol {
  border-top: 1px solid var(--linie);
  padding: 14px 16px 22px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-slab);
}
.subsol p { max-width: 760px; margin: 0 auto; }

/* ---------- Butoane și câmpuri ---------- */
button, .buton {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--linie);
  background: var(--suprafata);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  min-height: 42px;
}
button:hover, .buton:hover { border-color: var(--text-slab); text-decoration: none; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button.principal, .buton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.cumpara { background: var(--sus); border-color: var(--sus); color: #fff; }
button.vinde { background: var(--jos); border-color: var(--jos); color: #fff; }
button.pericol { color: var(--jos); border-color: var(--jos); }
button.mic-buton { min-height: 34px; padding: 4px 10px; font-size: 0.875rem; }

label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
input[type="text"], input[type="password"], input[type="number"] {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  min-height: 42px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--fundal);
  color: var(--text);
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.camp { margin-bottom: 12px; }
.rand-butoane { display: flex; gap: 8px; flex-wrap: wrap; }
.rand-butoane > * { flex: 1; }

.mesaj { border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 0.95rem; }
.mesaj.eroare { background: var(--jos-fundal); color: var(--jos); }
.mesaj.reusita { background: var(--sus-fundal); color: var(--sus); }
.mesaj.atentie { background: var(--atentie-fundal); color: var(--atentie-text); }

/* ---------- Filtre ---------- */
.filtre { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.filtre button { min-height: 36px; padding: 5px 12px; border-radius: 999px; font-weight: 500; font-size: 0.9rem; white-space: nowrap; }
.filtre button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* ---------- Tabele ---------- */
.tabel-cadru { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-slab); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td.dreapta, th.dreapta { text-align: right; }
tbody tr.legatura { cursor: pointer; }
tbody tr.legatura:hover { background: var(--fundal); }
tr.eu td { background: var(--sus-fundal); }
.simbol { font-weight: 700; }
.nume-companie { display: block; color: var(--text-slab); font-size: 0.875rem; }
.gol { text-align: center; color: var(--text-slab); padding: 24px 8px; }

.eticheta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--fundal);
  border: 1px solid var(--linie);
  color: var(--text-slab);
  white-space: nowrap;
}
.eticheta.risc-mic { background: var(--sus-fundal); color: var(--sus); border-color: transparent; }
.eticheta.risc-mediu { background: var(--atentie-fundal); color: var(--atentie-text); border-color: transparent; }
.eticheta.risc-mare { background: var(--jos-fundal); color: var(--jos); border-color: transparent; }
.eticheta.activa { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.variatie { display: inline-block; min-width: 76px; padding: 3px 8px; border-radius: 6px; font-weight: 600; text-align: right; }
.variatie.sus { background: var(--sus-fundal); }
.variatie.jos { background: var(--jos-fundal); }

.data { white-space: nowrap; }
.nume-jucator { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .pe-lat { display: none; }
  th, td { padding: 9px 5px; }
  /* Pe telefon, titlurile coloanelor se pot rupe pe două rânduri, ca tabelul să încapă. */
  th { white-space: normal; font-size: 0.72rem; letter-spacing: 0.02em; vertical-align: bottom; line-height: 1.25; }
  td.data { white-space: normal; }
  h1 { font-size: 1.35rem; }
  .variatie { min-width: 68px; }
}
@media (max-width: 480px) {
  /* Numele lung nu mai împinge soldul pe al doilea rând. */
  .antet-interior { gap: 8px 10px; }
  .cont-nume { max-width: 20vw; }
}

/* ---------- Pagina companiei ---------- */
.pret-mare { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.antet-companie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.grafic-cadru { position: relative; height: 300px; }
@media (max-width: 859px) {
  /* Pe ecrane înguste, caseta de tranzacționare vine imediat după grafic, nu la capătul paginii. */
  .grila.doua { gap: 0; }
  .grila.doua > div { display: contents; }
  .grila.doua > div > section { order: 3; }
  .grila.doua > div > section.card-grafic { order: 1; }
  .grila.doua > aside { order: 2; }
}
@media (max-width: 700px) { .grafic-cadru { height: 230px; } }
.intervale { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.intervale button { min-height: 34px; padding: 4px 12px; font-size: 0.875rem; }
.intervale button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.date { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; }
.date div { min-width: 0; }
.date dt { font-size: 0.8rem; color: var(--text-slab); text-transform: uppercase; letter-spacing: 0.04em; }
.date dd { margin: 2px 0 0; font-weight: 600; font-size: 1.05rem; }
.date dd small { display: block; font-weight: 400; color: var(--text-slab); font-size: 0.8rem; }

.rezumat-ordin { font-size: 0.9rem; color: var(--text-slab); margin-bottom: 12px; min-height: 2.8em; }

/* ---------- Știri ---------- */
.stire { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.stire:first-child { padding-top: 0; }
.stire:last-child { border-bottom: none; padding-bottom: 0; }
.stire h3 { font-size: 1.02rem; margin: 4px 0; }
.stire p { margin: 0 0 8px; color: var(--text-slab); }
.stire-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.8rem; color: var(--text-slab); }
.efecte { display: flex; flex-wrap: wrap; gap: 6px; }
.efect { font-size: 0.8rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.efect.sus { background: var(--sus-fundal); }
.efect.jos { background: var(--jos-fundal); }
a.efect:hover { text-decoration: none; filter: brightness(0.96); }

/* ---------- Cifre mari ---------- */
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifra { background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); padding: 12px 14px; box-shadow: var(--umbra); }
.cifra span { display: block; font-size: 0.8rem; color: var(--text-slab); text-transform: uppercase; letter-spacing: 0.04em; }
.cifra strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ---------- Cont și administrare ---------- */
.ingust { max-width: 420px; margin: 0 auto; }
.file { display: flex; gap: 8px; margin-bottom: 16px; }
.file button { flex: 1; }
.file button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.scenariu { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.scenariu:last-child { border-bottom: none; }
.scenariu div { flex: 1 1 260px; }
.scenariu p { margin: 0; }
.stare-motor { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.punct { width: 10px; height: 10px; border-radius: 50%; background: var(--jos); }
.punct.pornit { background: var(--sus); }

/* ---------- Partea educativă ---------- */
.explicatie { border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; font-size: 0.9rem; }
.explicatie summary { cursor: pointer; font-weight: 600; }
.explicatie p { margin: 8px 0 2px; color: var(--text-slab); }
main > [data-explica] { margin-bottom: 16px; }
.de-ce { font-style: italic; }
.banda-risc { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 16px; font-size: 0.85rem; border-top: 1px solid var(--linie); }
.banda-risc span { color: var(--text-slab); }
.banda-risc:hover { text-decoration: none; }
.banda-risc .eticheta.risc-mic { color: var(--sus); }
.banda-risc .eticheta.risc-mediu { color: var(--atentie-text); }
.banda-risc .eticheta.risc-mare { color: var(--jos); }
.motive { margin: 8px 0; padding-left: 20px; }
.observatie { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; background: var(--atentie-fundal); color: var(--atentie-text); }
.observatie.bine { background: var(--sus-fundal); color: var(--sus); }
.observatie strong { display: block; }
.observatie p { margin: 4px 0 0; }
.misiune { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.misiune:last-child { border-bottom: none; }
.misiune .bifa { flex: 0 0 1.4em; font-weight: 700; }
.misiune.facuta .bifa { color: var(--sus); }
.misiune p { margin: 0; color: var(--text-slab); font-size: 0.9rem; }

/* ---------- Cursul ---------- */
.progres { height: 8px; border-radius: 4px; background: var(--linie); overflow: hidden; margin: 8px 0 4px; }
.progres > div { height: 100%; background: var(--sus); }
.nivel h2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lectie-rand { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--linie); }
.lectie-rand .bifa { flex: 0 0 1.4em; font-weight: 700; color: var(--text-slab); }
.lectie-rand.facuta .bifa { color: var(--sus); }
.lectie-rand.blocata, .lectie-rand.in-pregatire { color: var(--text-slab); }
.lectie-rand small { display: block; color: var(--text-slab); }
.teorie h3 { margin: 16px 0 4px; font-size: 1rem; }
.teorie h3:first-child { margin-top: 0; }
.teorie p { margin: 0; }
.tinta { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.tinta .bifa { flex: 0 0 1.4em; font-weight: 700; color: var(--text-slab); }
.tinta.ok .bifa { color: var(--sus); }
.tinta.rau .bifa { color: var(--jos); }
.bara-timp { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 4px; }
.bara-timp strong { margin-right: auto; }
.ordin-exercitiu { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.ordin-exercitiu.tip { grid-template-columns: minmax(0, 1fr); }
details.asteptare { margin-top: 14px; border-top: 1px solid var(--linie); padding-top: 10px; }
details.asteptare summary { cursor: pointer; font-weight: 600; min-height: 34px; }
details.asteptare button { width: 100%; }
.ordin-asteptare .rand-butoane { align-items: center; margin-top: 4px; }
.ordin-exercitiu select, .ordin-exercitiu input { width: 100%; min-height: 44px; }
.nota { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--linie); }
.nota.bine { background: var(--sus-fundal); color: var(--sus); border-color: transparent; }
.nota.atentie { background: var(--atentie-fundal); color: var(--atentie-text); border-color: transparent; }
.stire-mica { padding: 8px 0; border-top: 1px solid var(--linie); font-size: 0.9rem; }
.stire-mica:first-child { border-top: none; }
.grafic-mic { position: relative; height: 220px; margin-bottom: 4px; }

/* ---------- Vizualizările 3D din curs ---------- */
.vizual-gazda { position: relative; height: 340px; max-width: 720px; overflow: hidden; border: 1px solid var(--linie); border-radius: 8px; touch-action: pan-y; }
.vizual-gazda.plat { height: auto; }
.vizual-panza { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.vizual-panza:active { cursor: grabbing; }
.vizual-etichete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vizual-eticheta { position: absolute; left: 0; top: 0; font-size: 0.68rem; line-height: 1; white-space: nowrap; color: var(--text); text-shadow: 0 0 3px var(--suprafata), 0 0 3px var(--suprafata), 0 0 3px var(--suprafata); }
.vizual-eticheta.slaba { color: var(--text-slab); }
.vizual-eticheta.a-mea { font-weight: 700; }
.vizual-2d { display: block; width: 100%; height: auto; }
.vizual-bara { margin: 6px 0; }

/* ---------- Caietul cursantului și certificatul ---------- */
.inapoi { display: inline-block; margin-bottom: 8px; font-size: 0.9rem; }
.regula.camp select { width: 100%; min-height: 44px; }
.bifa-rand { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.bifa-rand input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
#regula-dece, #motiv-ordin, #nume-certificat { width: 100%; }
.jurnal-grup { margin-top: 14px; }
.certificat { max-width: 720px; margin: 16px auto; padding: 28px 22px; border: 3px double var(--accent); border-radius: 8px; background: var(--suprafata); text-align: center; }
.certificat h1 { margin: 6px 0 18px; }
.certificat-sus { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--text-slab); }
.certificat-nume { font-size: 1.7rem; font-weight: 700; margin: 6px 0 14px; overflow-wrap: anywhere; }
.certificat-jos { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; margin: 22px 0 14px; font-weight: 600; }
#actiuni { text-align: center; }
@media print {
  #antet, .subsol, .nu-la-tipar, #mesaj { display: none !important; }
  body { background: #fff; }
  .certificat { border-color: #000; margin-top: 40px; }
}

/* ---------- Subsol, pagini legale, informarea despre cookie-uri ---------- */
.subsol-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin: 12px 0 10px; }
.subsol .anpc-sal { display: inline-block; line-height: 0; border-radius: 4px; }
.subsol .anpc-sal img { width: 201px; height: 50px; max-width: 100%; }
.subsol .subsol-metoda { margin-top: 10px; font-size: 0.78rem; }
.subsol .subsol-metoda a { color: var(--text-slab); }
.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 720px; margin: 0 auto; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); box-shadow: 0 4px 24px rgba(20, 30, 50, 0.18); font-size: 0.9rem; }
.cookie-banner p { margin: 0; flex: 1 1 260px; }
.text-lung { max-width: 760px; }
.text-lung h2 { margin-top: 28px; }
.text-lung p, .text-lung li { line-height: 1.6; }
.ingust-lat { max-width: 640px; }
.tabel-legal td, .tabel-legal th { vertical-align: top; white-space: normal; }
@media (max-width: 640px) {
  .tabel-legal thead { display: none; }
  .tabel-legal tr { display: block; padding: 10px 0; border-top: 1px solid var(--linie); }
  .tabel-legal td { display: block; border: none; padding: 3px 0; }
  .tabel-legal td::before { content: attr(data-th); display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-slab); }
}
.lectie-rand.cu-plata { color: var(--text-slab); }
.cumpara-card { border-color: var(--accent); }
.pret strong { font-size: 1.6rem; }

/* ---------- Pagina de prezentare ---------- */
.prezentare main { max-width: 980px; }
.prezentare main > section { margin-bottom: 36px; }
.prezentare h2 { font-size: 1.35rem; margin-bottom: 12px; }
.erou { padding: 20px 0 8px; }
.erou h1 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); line-height: 1.15; margin: 6px 0 14px; max-width: 18em; }
.erou-text { font-size: 1.08rem; line-height: 1.6; max-width: 44em; }
.erou-butoane { margin: 18px 0 10px; }
.erou.final { text-align: center; padding: 28px 16px; border: 1px solid var(--linie); border-radius: var(--raza); background: var(--suprafata); }
.suprascris { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; font-weight: 700; color: var(--accent); margin: 0; }
.trei, .doua-coloane { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .trei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doua-coloane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.trei .card, .doua-coloane .card { margin: 0; }
.trei h3, .doua-coloane h3 { margin-top: 0; }
.pasi { padding-left: 1.3em; }
.pasi li { margin-bottom: 10px; line-height: 1.55; }
.programa { padding-left: 1.6em; }
.programa li { padding: 8px 0; border-top: 1px solid var(--linie); }
.programa li span:last-child { display: block; color: var(--text-slab); }
.prezentare details.card { margin-bottom: 8px; }
.prezentare details summary { cursor: pointer; font-weight: 600; }
.prezentare details p { margin-bottom: 0; }