/* ============================================================================
   Chestionar Fizică — stiluri
   ==========================================================================*/
:root{
  --bg:#0b1020; --bg2:#121a33; --card:#161f3d; --card2:#1b2547;
  --linie:#2a3661; --text:#e8ecf8; --dim:#9aa6c9; --dim2:#6f7cab;
  --acc:#6ea8fe; --acc2:#8b7cff;
  --bun:#3ddc97; --bun-bg:#0f3a2c;
  --rau:#ff6b81; --rau-bg:#3d1522;
  --mediu:#ffc861; --mediu-bg:#3a2d10;
  --radius:14px; --radius-s:10px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6fb; --bg2:#ffffff; --card:#ffffff; --card2:#f7f9ff;
    --linie:#e2e8f5; --text:#131a2e; --dim:#5b6784; --dim2:#8b97b5;
    --acc:#2f6df6; --acc2:#6a4dff;
    --bun:#0f9d63; --bun-bg:#e7f8f0;
    --rau:#d92b47; --rau-bg:#fdecef;
    --mediu:#b87700; --mediu-bg:#fdf4e3;
    --shadow:0 4px 18px rgba(20,30,60,.09);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
body{
  background:linear-gradient(180deg,var(--bg),var(--bg2) 60%);
  background-attachment:fixed;
  color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1{font-size:1.65rem;line-height:1.25;margin:.2rem 0 .6rem}
h2{font-size:1.25rem;margin:.4rem 0 .6rem}
h3{font-size:1.05rem;margin:1rem 0 .5rem}
h4{margin:.4rem 0}
p{margin:.5rem 0}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ------------------------------- topbar -------------------------------- */
.topbar{
  position:sticky;top:0;z-index:50;min-width:0;max-width:100vw;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.7rem clamp(.8rem,3vw,2rem);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.brand .logo{font-size:1.6rem;line-height:1;filter:drop-shadow(0 0 12px var(--acc))}
.brand strong{display:block;font-size:1rem;white-space:nowrap}
.brand small{display:block;color:var(--dim);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.tabs{display:flex;gap:.25rem;flex:1;flex-wrap:wrap;justify-content:center}
.tab{
  background:transparent;border:1px solid transparent;color:var(--dim);
  padding:.42rem .8rem;border-radius:999px;cursor:pointer;font-size:.86rem;font-weight:600;
  transition:.15s;white-space:nowrap;
}
.tab:hover{color:var(--text);background:var(--card)}
.tab.activ{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 3px 14px rgba(110,168,254,.35)}
.topbar-right{display:flex;align-items:center;gap:.5rem}
.pill{background:var(--card);border:1px solid var(--linie);color:var(--dim);
  padding:.3rem .7rem;border-radius:999px;font-size:.76rem;white-space:nowrap}
.icon-btn{background:var(--card);border:1px solid var(--linie);color:var(--text);
  width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:1rem}
.icon-btn:hover{border-color:var(--acc)}

main{max-width:980px;margin:0 auto;padding:1.4rem clamp(.8rem,3vw,2rem) 5rem;min-width:0}
#app{min-width:0}
.sub{color:var(--dim);margin-top:-.2rem}
.titlu-sectiune{margin:1.8rem 0 .7rem;font-size:1.1rem;color:var(--dim);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* ------------------------------- carduri ------------------------------- */
.card{
  background:var(--card);border:1px solid var(--linie);border-radius:var(--radius);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);
}
.card + .card{margin-top:.9rem}
.card-uri{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem}
.card.stat{display:flex;flex-direction:column;gap:.1rem;padding:.9rem 1rem}
.card.stat .val{font-size:1.7rem;font-weight:800;background:linear-gradient(135deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.card.stat .eti{font-weight:700;font-size:.86rem}
.card.stat small{color:var(--dim2);font-size:.74rem}

.hero{padding:1rem 0 .4rem}
.hero h1{font-size:1.9rem;margin-bottom:.3rem}
.hero p{color:var(--dim);max-width:62ch}

.scurtaturi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem;margin-top:1.2rem}
.scurtatura{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;
  background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--linie);
  border-radius:var(--radius);padding:1rem 1.1rem;cursor:pointer;color:var(--text);
  transition:.18s;box-shadow:var(--shadow);font:inherit;
}
.scurtatura:hover{transform:translateY(-2px);border-color:var(--acc)}
.scurtatura span{font-size:1.5rem}
.scurtatura strong{font-size:1rem}
.scurtatura small{color:var(--dim2);font-size:.78rem}

.card-acc{
  display:flex;flex-direction:column;gap:.15rem;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--linie);border-radius:var(--radius);
  padding:1rem 1.1rem;color:var(--text);font:inherit;transition:.18s;box-shadow:var(--shadow);
}
.card-acc:hover{border-color:var(--acc);transform:translateY(-2px)}
.card-acc strong{font-size:1rem}
.card-acc span{color:var(--acc);font-size:.84rem;font-weight:700}
.card-acc small{color:var(--dim2);font-size:.78rem}
.lista-examene{display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:700px){.lista-examene{grid-template-columns:1fr 1fr}.card-acc.wide{grid-column:span 2}}

/* ------------------------------- chits -------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.3rem 0 .8rem}
.chip{
  background:var(--card2);border:1px solid var(--linie);color:var(--dim);
  padding:.42rem .8rem;border-radius:999px;cursor:pointer;font-size:.82rem;font:inherit;font-size:.82rem;
  transition:.15s;
}
.chip:hover{color:var(--text);border-color:var(--acc)}
.chip.activ{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-color:transparent}

/* ------------------------------- butoane ------------------------------- */
.btn{
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:none;
  padding:.62rem 1.1rem;border-radius:var(--radius-s);cursor:pointer;font:inherit;font-weight:700;
  font-size:.9rem;transition:.16s;
}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--linie);color:var(--text)}
.btn.ghost:hover{border-color:var(--acc);background:var(--card2)}
.btn.danger{background:linear-gradient(135deg,#ff6b81,#c0392b)}
.btn.mare{padding:.8rem 1.6rem;font-size:1rem}
.btn.mic{padding:.32rem .7rem;font-size:.78rem;border-radius:8px}
.btn.rau{background:linear-gradient(135deg,#ff6b81,#c0392b)}
.btn.mediu{background:linear-gradient(135deg,#ffc861,#d68910);color:#1b1405}
.btn.bun{background:linear-gradient(135deg,#3ddc97,#1e8449)}
.btn.foarte-bun{background:linear-gradient(135deg,#6ea8fe,#3f51b5)}
.actiuni{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.actiuni.note{align-items:center}
.actiuni.note .eticheta{color:var(--dim);font-size:.85rem;font-weight:700;margin-right:.3rem}

/* ---------------------------- bara sesiune ----------------------------- */
.bara-sesiune{padding:.8rem 1rem}
.bara-sesiune .linia1{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}
.bara-sesiune .counter{color:var(--dim);font-variant-numeric:tabular-nums;font-size:.86rem}
.bara-sesiune .scor-live{color:var(--bun);font-weight:700;font-size:.86rem}
.cronometru{font-variant-numeric:tabular-nums;font-weight:800;color:var(--mediu);
  background:var(--mediu-bg);padding:.15rem .55rem;border-radius:999px;font-size:.86rem}
.bara-sesiune .btn{margin-left:auto}

.bar{background:var(--card2);border-radius:999px;overflow:hidden;height:9px;margin-top:.5rem}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}
.bar.subtire{height:5px;margin-top:.4rem}

/* --------------------------- card întrebare --------------------------- */
.intrebare,.card,.card-acc,.scurtatura{min-width:0}
.enunt{overflow-wrap:anywhere}
.intrebare .meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.tag{font-size:.7rem;font-weight:700;padding:.18rem .55rem;border-radius:999px;
  background:var(--card2);color:var(--dim);border:1px solid var(--linie);white-space:nowrap}
.tag.tema{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.tag.test{color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 40%,transparent)}
.tag.d1{color:var(--bun)} .tag.d2{color:var(--mediu)} .tag.d3{color:var(--rau)}
.tag.sub{color:var(--dim2)}
.enunt{font-size:1.1rem;font-weight:600;line-height:1.5;margin:.3rem 0 1rem}

.avertisment{
  background:var(--mediu-bg);border:1px solid color-mix(in srgb,var(--mediu) 45%,transparent);
  color:var(--text);border-radius:var(--radius-s);padding:.6rem .8rem;font-size:.85rem;margin-bottom:.8rem;
}

.variante{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.varianta{
  display:flex;gap:.7rem;align-items:flex-start;
  background:var(--card2);border:1.5px solid var(--linie);border-radius:var(--radius-s);
  padding:.75rem .9rem;cursor:pointer;transition:.14s;
}
.varianta:hover{border-color:var(--acc);transform:translateX(2px)}
.varianta{min-width:0}
.varianta > span:last-child{min-width:0;overflow-wrap:anywhere}
.varianta .litera{font-weight:800;color:var(--acc);min-width:1.4rem;flex:0 0 auto}
.varianta.corecta{background:var(--bun-bg);border-color:var(--bun)}
.varianta.corecta .litera{color:var(--bun)}
.varianta.aleasa-gresit{background:var(--rau-bg);border-color:var(--rau)}
.varianta.aleasa-gresit .litera{color:var(--rau)}
.varianta.stinsa{opacity:.55}
.varianta.stinsa:hover{transform:none;border-color:var(--linie)}
.hint-tastatura{color:var(--dim2);font-size:.75rem;margin-top:.8rem}
kbd{background:var(--card2);border:1px solid var(--linie);border-bottom-width:2px;
  border-radius:5px;padding:.05rem .35rem;font-size:.75rem}

/* ------------------------------ feedback ------------------------------ */
.feedback{margin-top:1rem;border-left:4px solid var(--acc)}
.feedback.ok{border-left-color:var(--bun)}
.feedback.rau{border-left-color:var(--rau)}
.feedback h3{margin-top:0}
.feedback.ok h3{color:var(--bun)}
.feedback.rau h3{color:var(--rau)}
.ai-ales{background:var(--rau-bg);border-radius:var(--radius-s);padding:.6rem .8rem;font-size:.92rem}
.ai-ales p,.explic-corect p{margin:.15rem 0}
.varianta-aleasa{font-weight:700}
.varianta-corecta{font-weight:700;font-size:1rem}
.explic-text{margin-top:.5rem !important}
.eticheta{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--dim2);margin-bottom:.2rem}
.explic-gresit{background:var(--rau-bg);border-radius:var(--radius-s);padding:.7rem .85rem;margin:.6rem 0;font-size:.92rem}
.explic-corect{background:var(--bun-bg);border-radius:var(--radius-s);padding:.7rem .85rem;margin:.6rem 0;font-size:.92rem}
.formula{background:var(--card2);border:1px dashed var(--linie);border-radius:var(--radius-s);
  padding:.6rem .85rem;margin:.6rem 0;font-family:ui-monospace,Menlo,monospace;font-size:.95rem}

/* ---------------------------- formule KaTeX ---------------------------- */
.katex{font-size:1.05em}
.katex-bloc{overflow-x:auto;overflow-y:hidden;padding:.15rem 0;-webkit-overflow-scrolling:touch}
.katex-bloc .katex-display{margin:.15rem 0}
.katex-bloc::-webkit-scrollbar{height:6px}
.katex-bloc::-webkit-scrollbar-thumb{background:var(--linie);border-radius:999px}
.katex-fallback{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;white-space:pre-wrap}
.formula .katex-fallback{color:var(--dim)}
.formula-mica{color:var(--acc);margin:.4rem 0}
.formula-mica .katex{font-size:.95em}
.varianta .katex,.lista-explicatii .katex{font-size:1em}
.formula-item .katex-bloc{width:100%}
details.toate{margin-top:.8rem}
details.toate summary{cursor:pointer;color:var(--dim);font-size:.85rem;font-weight:700;padding:.3rem 0}
details.toate summary:hover{color:var(--acc)}
.lista-explicatii{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.lista-explicatii li{font-size:.86rem;padding:.6rem .8rem;border-radius:var(--radius-s);background:var(--card2);border-left:3px solid var(--dim2)}
.lista-explicatii li.bun{border-left-color:var(--bun)}
.lista-explicatii li.rau{border-left-color:var(--rau)}
.feedback-actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  flex-wrap:wrap;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--linie)}
.sursa{color:var(--dim2);font-size:.74rem}

/* ----------------------------- navigator ------------------------------ */
.navigator{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:1rem}
.punct{width:32px;height:32px;border-radius:8px;background:var(--card2);border:1px solid var(--linie);
  color:var(--dim);cursor:pointer;font-size:.76rem;font-weight:700;font:inherit;font-size:.76rem}
.punct.raspuns{background:color-mix(in srgb,var(--acc) 25%,transparent);color:var(--text);border-color:var(--acc)}
.punct.curent{outline:2px solid var(--acc2);outline-offset:1px}

/* ------------------------------ rezultat ------------------------------ */
.rezultat{text-align:center}
.nota-mare{font-size:1.1rem;color:var(--dim)}
.nota-mare strong{font-size:2.6rem;background:linear-gradient(135deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}
.stats-mici{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;margin-top:.9rem;color:var(--dim);font-size:.8rem}
.stats-mici span{display:block;font-size:1.1rem;font-weight:800;color:var(--text)}
.recap{margin:.5rem 0;background:var(--card2);border-radius:var(--radius-s);padding:.6rem .8rem;border-left:3px solid var(--rau)}
.recap summary{cursor:pointer;font-weight:600;font-size:.9rem}
.recap p{font-size:.86rem;margin:.4rem 0}
.corect-inline{color:var(--bun)}
.gresit-inline{color:var(--rau)}
.formula-mica{font-family:ui-monospace,Menlo,monospace;color:var(--acc);font-size:.85rem}
.lista-bune{list-style:none;padding:0;margin:.4rem 0 0}
.lista-bune li{padding:.35rem 0;border-bottom:1px solid var(--linie);font-size:.86rem;color:var(--dim)}
.lista-bune li:last-child{border-bottom:none}

/* -------------------------------- tabel ------------------------------- */
.tabel .grup{margin:1.1rem 0 .5rem;color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.07em}
.tabel .grup:first-child{margin-top:0}
.linie-tema{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.linie-tema:last-child{border-bottom:none}
.linie-tema .stanga{flex:1;min-width:200px}
.linie-tema .stanga strong{font-size:.94rem}
.linie-tema .stanga small{display:block;color:var(--dim2);font-size:.76rem}
.linie-tema .dreapta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.rată{font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums}
.rată.bun{color:var(--bun)} .rată.mediu{color:var(--mediu)} .rată.slab{color:var(--rau)} .rată.gri{color:var(--dim2)}
.acop{color:var(--dim2);font-size:.74rem}

/* ------------------------------- teorie ------------------------------- */
.teorie h2{margin-top:0}
.sect{margin:1.2rem 0;padding-top:.2rem}
.sect h3{color:var(--acc);margin-bottom:.3rem}
.sect .text{color:var(--text);font-size:.95rem}
.formule{display:flex;flex-direction:column;gap:.5rem;margin:.7rem 0}
.formula-item{background:var(--card2);border:1px solid var(--linie);border-radius:var(--radius-s);
  padding:.6rem .8rem;display:flex;flex-direction:column;gap:.2rem}
.formula-item code{color:var(--acc);font-size:.95rem;font-weight:700}
.formula-item .explic{color:var(--dim);font-size:.8rem}
.capcane{background:var(--mediu-bg);border:1px solid color-mix(in srgb,var(--mediu) 40%,transparent);
  border-radius:var(--radius-s);padding:.8rem 1rem;margin-top:1rem}
.capcane h3{margin:0 0 .4rem;color:var(--mediu);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.capcane ul{margin:0;padding-left:1.1rem}
.capcane li{font-size:.88rem;margin:.3rem 0}

/* ------------------------------ statistici ---------------------------- */
.lista-probleme{list-style:none;padding:0;margin:0}
.lista-probleme li{padding:.5rem 0;border-bottom:1px solid var(--linie);font-size:.88rem}
.lista-probleme li:last-child{border-bottom:none}
.badge-rau{background:var(--rau-bg);color:var(--rau);font-weight:800;font-size:.72rem;
  padding:.15rem .5rem;border-radius:999px;margin-right:.4rem}
.tabel-sesiuni{width:100%;border-collapse:collapse;font-size:.84rem}
.tabel-sesiuni th{text-align:left;color:var(--dim2);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.06em;padding:.4rem .3rem;border-bottom:1px solid var(--linie)}
.tabel-sesiuni td{padding:.45rem .3rem;border-bottom:1px solid var(--linie)}

/* -------------------------------- toast ------------------------------- */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);
  background:var(--card);border:1px solid var(--linie);border-radius:999px;
  padding:.6rem 1.2rem;font-size:.86rem;box-shadow:var(--shadow);transition:.25s;z-index:200;
  max-width:88vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
.toast.bun{border-color:var(--bun)} .toast.rau{border-color:var(--rau)}

/* -------------------------------- modal ------------------------------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,8,20,.6);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:300;padding:1rem}
.modal-backdrop[hidden]{display:none}
/* [hidden] trebuie să învingă și regulile display:flex/block */
[hidden]{display:none !important}
.modal{background:var(--card);border:1px solid var(--linie);border-radius:var(--radius);
  padding:1.3rem;max-width:460px;width:100%;box-shadow:var(--shadow)}
.modal h3{margin-top:0}
.modal hr{border:none;border-top:1px solid var(--linie);margin:1rem 0}
.check{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;font-size:.88rem;cursor:pointer}
.check input{margin-top:.25rem;accent-color:var(--acc)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}

@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:.5rem;padding:.6rem .8rem}
  .brand{flex:1 1 auto;min-width:0}
  .brand small{display:none}
  .topbar-right{order:2;flex:0 0 auto}
  .tabs{
    order:3;flex:0 0 100%;width:100%;
    min-width:0;                    /* esențial: altfel flex-item-ul nu se poate micșora */
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:.15rem;
  }
  .tabs::-webkit-scrollbar{display:none}
  h1{font-size:1.4rem}
  .hero h1{font-size:1.5rem}
  main{padding:1rem .8rem 4rem}
  .tab{padding:.36rem .68rem;font-size:.78rem;flex:0 0 auto}
  .linie-tema .stanga{min-width:0}
  .linie-tema .dreapta{width:100%}
  .card{padding:.9rem .85rem}
  .stats-mici{gap:1rem}
  .punct{width:29px;height:29px}
  .lista-examene{grid-template-columns:1fr}
  .card-acc.wide{grid-column:auto}
}