@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

/* =====================================================================
   KONAMI — fundație vizuală
   Un singur fișier. Ecranele moștenesc totul prin clasele existente.
   Ca să schimbi aspectul întregului portal, schimbi variabilele de mai jos.
   ===================================================================== */

:root {
  /* --- culoare -------------------------------------------------------
     Verde-teal profund ca singur accent: domeniul e recuperare și
     măsurare. Roșul e rezervat exclusiv durerii și contraindicațiilor,
     deci nu se folosește decorativ nicăieri. */
  --paper:        #F1F3F2;
  --surface:      #FFFFFF;
  --surface-2:    #F7F9F8;
  --line:         #DFE4E2;
  --line-strong:  #C3CBC8;

  --ink:          #16211E;
  --ink-2:        #4C5A55;
  --ink-3:        #7B8783;

  --accent:       #0F6E56;
  --accent-soft:  #E4F0EB;

  --warn:         #8A5A0B;
  --warn-soft:    #FAF0DC;
  --danger:       #A3392A;
  --danger-soft:  #FBEAE6;
  --ok:           #2F6B2A;
  --ok-soft:      #E6F1E3;

  /* --- tipografie ----------------------------------------------------
     Plex Sans pentru interfață (față tehnică, proiectată pentru date).
     Plex Mono pentru orice valoare măsurată — cifrele trebuie să arate
     ca o citire de instrument, aliniate în coloană.
     Newsreader, cu reținere, doar pentru titluri de pagină. */
  --font-ui:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-data:  'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --font-voice: 'Newsreader', Georgia, serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.3125rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.125rem;

  /* --- spațiu și formă ----------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --r-sm: 4px;
  --r:    7px;
  --r-lg: 12px;

  /* țintă de atingere: --tap pentru desktop, --tap-lg pentru sală */
  --tap:    46px;
  --tap-lg: 54px;

  --umbra: 0 1px 2px rgba(22, 33, 30, 0.04), 0 1px 8px rgba(22, 33, 30, 0.03);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #101614;
    --surface:     #171F1C;
    --surface-2:   #1D2724;
    --line:        #2A3733;
    --line-strong: #3C4C47;

    --ink:         #E8EDEB;
    --ink-2:       #A3B0AB;
    --ink-3:       #74827D;

    --accent:      #4FBF9B;
    --accent-soft: #12302A;

    --warn:        #D4A257;
    --warn-soft:   #2E2413;
    --danger:      #E08573;
    --danger-soft: #331914;
    --ok:          #7DBF74;
    --ok-soft:     #172A16;

    --umbra: none;
  }
}

/* --- alias pentru compatibilitate cu clasele deja scrise în pagini --- */
:root {
  --bg: var(--paper);
  --card: var(--surface);
  --text: var(--ink);
  --text-sec: var(--ink-2);
  --text-mut: var(--ink-3);
  --err: var(--danger);
  --radius: var(--r);
}

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

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap { max-width: 1080px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }

/* =====================================================================
   ANTET ȘI NAVIGAȚIE
   ===================================================================== */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar .brand {
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: -0.015em;
}

.topbar .meta {
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.topbar nav { font-size: var(--t-sm); color: var(--ink-3); }
.topbar a { color: var(--ink-2); text-decoration: none; }
.topbar a:hover { color: var(--accent); }

.mainnav {
  display: flex;
  gap: 0;
  padding: 0 var(--s3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }

.mainnav a, .mainnav span {
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
  font-weight: 450;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.mainnav a:hover { color: var(--ink); }
.mainnav a.curent {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.mainnav .inactiv {
  color: var(--ink-3);
  opacity: 0.45;
  cursor: default;
}

/* =====================================================================
   CARDURI
   ===================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
  box-shadow: var(--umbra);
}

.card h2 {
  margin: 0 0 var(--s4);
  font-family: var(--font-voice);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* paragraful explicativ de sub titlu */
.card > p.mut:first-of-type { margin-top: calc(var(--s4) * -1 + var(--s1)); }

/* =====================================================================
   VALORI MĂSURATE
   Semnătura vizuală: orice cifră care reprezintă o măsurătoare e
   monospațiată și cu cifre tabulare, ca să se alinieze pe verticală
   între rânduri și să se citească precum un afișaj de aparat.
   ===================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--s2);
}

.stat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
}

.stat .lbl {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat .val {
  margin-top: var(--s1);
  font-family: var(--font-data);
  font-size: var(--t-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

/* unitatea de măsură din interiorul valorii (kg, cm) */
.stat .val .mut {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* =====================================================================
   FORMULARE
   ===================================================================== */

label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 450;
  color: var(--ink-2);
  margin-bottom: var(--s1);
}

.camp { margin-bottom: var(--s4); }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  font-family: var(--font-ui);
  font-size: 16px;              /* sub 16px, iOS face zoom la focus */
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* valorile numerice se tastează în mono — se aliniază cu afișarea lor */
input[type="number"] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

textarea { min-height: 72px; padding-top: var(--s3); resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 0.7; }

input[type="file"] { padding: var(--s2); font-size: var(--t-sm); }

input[type="checkbox"] {
  width: 18px; height: 18px;
  min-height: 0;
  accent-color: var(--accent);
  vertical-align: -3px;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237B8783' stroke-width='1.6' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
  padding-right: var(--s6);
}

/* =====================================================================
   BUTOANE
   ===================================================================== */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s3) var(--s5);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.12s ease, transform 0.06s ease, opacity 0.12s ease;
}

button:hover, .btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
button.full, .btn.full { width: 100%; }

.btn-sec {
  color: var(--ink-2);
  background: transparent;
  border-color: var(--line-strong);
}
.btn-sec:hover {
  background: var(--surface-2);
  border-color: var(--ink-3);
  color: var(--ink);
}

/* =====================================================================
   MESAJE
   ===================================================================== */

.msg {
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin-bottom: var(--s4);
  border: 1px solid transparent;
}
.msg strong { font-weight: 600; }

.msg-err     { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.msg-ok,
.msg-succes  { background: var(--ok-soft);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.msg-warn    { background: var(--warn-soft);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.msg-info    { background: var(--surface-2);   color: var(--ink-2);  border-color: var(--line); }

/* =====================================================================
   TABELE — registre de date
   Cifrele tabulare fac coloanele comparabile dintr-o privire.
   ===================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

th {
  text-align: left;
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }

/* Celulele numerice se marchează explicit cu .num — CSS-ul nu poate
   ghici care coloană conține valori și care text. */
td.num, th.num { font-family: var(--font-data); text-align: right; }

/* =====================================================================
   FORMULARE PE DOUĂ COLOANE
   Pe desktop, câmpurile scurte stau în perechi. Pe mobil, una sub alta —
   în sală nu vrei să vânezi câmpuri înguste cu degetul mare.
   ===================================================================== */

.perechi { display: grid; grid-template-columns: 1fr; gap: 0 var(--s4); }

@media (min-width: 700px) {
  .perechi { grid-template-columns: 1fr 1fr; }
  /* textarea și câmpurile lungi ocupă toată lățimea */
  .perechi .camp:has(textarea) { grid-column: 1 / -1; }
}

/* titlu de grup în interiorul unui formular */
.grup {
  margin: var(--s5) 0 var(--s3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

/* =====================================================================
   EVOLUȚIE
   Culoarea urmează sensul, nu semnul: la greutate, minus e progres.
   ===================================================================== */

.delta {
  margin-top: var(--s1);
  font-family: var(--font-data);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.delta.bine   { color: var(--accent); }
.delta.rau    { color: var(--warn); }
.delta.neutru { color: var(--ink-3); }
.delta .mut   { font-family: var(--font-ui); font-size: var(--t-xs); }

/* =====================================================================
   STĂRI GOALE
   Un ecran gol e o invitație la acțiune, nu un raport de inventar.
   ===================================================================== */

.stat.stins { background: transparent; border-style: dashed; }
.stat.stins .lbl { color: var(--ink-3); }

.invitatie {
  margin-top: var(--s1);
  font-size: var(--t-sm);
  line-height: 1.4;
  min-height: 2.2em;
  display: flex;
  align-items: center;
}
.invitatie a { color: var(--accent); text-decoration: none; font-weight: 450; }
.invitatie a:hover { text-decoration: underline; }

.gol {
  margin: 0;
  padding: var(--s5) 0;
  font-size: var(--t-base);
  color: var(--ink-2);
  text-align: center;
}
.gol a { color: var(--accent); text-decoration: none; font-weight: 500; }
.gol a:hover { text-decoration: underline; }

/* =====================================================================
   SUBSOL — informație de sistem, disponibilă dar nu proeminentă
   ===================================================================== */

.subsol {
  margin-top: var(--s6);
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
}
.subsol summary {
  padding: var(--s3) 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}
.subsol summary::-webkit-details-marker { display: none; }
.subsol summary::before { content: "▸ "; }
.subsol[open] summary::before { content: "▾ "; }
.subsol summary:hover { color: var(--ink-2); }
.subsol table { margin-bottom: var(--s4); }

/* =====================================================================
   SCADENTE — lucruri de facut, cu actiune la indemana
   ===================================================================== */

.card.scadente { border-color: var(--line-strong); }

.scadenta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.scadenta:last-child { border-bottom: none; padding-bottom: 0; }
.scadenta .sc-text { flex: 1; min-width: 0; }
.scadenta .sc-titlu { font-size: var(--t-base); }
.scadenta .sc-cand {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  white-space: nowrap;
  color: var(--ink-3);
}
.scadenta.intarziat .sc-cand { color: var(--warn); font-weight: 500; }
.scadenta form { margin: 0; }

.sc-cum { margin-top: var(--s1); }
.sc-cum summary {
  font-size: var(--t-xs);
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}
.sc-cum summary::-webkit-details-marker { display: none; }
.sc-cum summary::before { content: "▸ "; }
.sc-cum[open] summary::before { content: "▾ "; }
.sc-cum summary:hover { color: var(--accent); }
.sc-cum p {
  margin: var(--s2) 0 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: var(--s3);
  border-left: 2px solid var(--line);
}

/* =====================================================================
   NAVIGATIE INTERNA (subpaginile Body Log)
   ===================================================================== */

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.subnav a, .subnav span {
  padding: var(--s1) var(--s3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-2);
}
.subnav a:first-child { color: var(--ink-3); padding-left: 0; }
.subnav a:hover { background: var(--surface-2); color: var(--ink); }
.subnav .curent { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

/* =====================================================================
   CARDURI DE SECTIUNE (rezumatul Body Log)
   ===================================================================== */

.sectiuni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2);
}
.sectiune {
  display: block;
  position: relative;
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.sectiune:hover { border-color: var(--accent); background: var(--surface); }
.sectiune .s-nume { font-size: var(--t-base); font-weight: 500; color: var(--ink); }
.sectiune .s-desc { font-size: var(--t-xs); margin-top: 2px; line-height: 1.4; }
.sectiune .s-nr {
  position: absolute;
  top: var(--s3);
  right: var(--s4);
  font-family: var(--font-data);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* deficit / surplus in celule de tabel */
td.bine   { color: var(--accent); }
td.rau    { color: var(--warn); }
td.neutru { color: var(--ink-3); }

/* =====================================================================
   TDEE — descompunere vizibila
   O cifra fara descompunere e o cifra in care nu poti avea incredere.
   ===================================================================== */

.tdee {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.tdee-real { border-color: var(--accent); background: var(--accent-soft); }

.tdee-cap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s3);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.tdee-real .tdee-cap { border-bottom-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.tdee .lbl {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tdee-real .lbl { color: var(--accent); }

.tdee-val {
  font-family: var(--font-data);
  font-size: var(--t-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.tdee-val .mut { font-family: var(--font-ui); font-size: var(--t-xs);
                 letter-spacing: 0.04em; text-transform: uppercase; }

.tdee-desc { font-size: var(--t-sm); }
.tdee-desc td { padding: var(--s2) 0; border-bottom: none; vertical-align: baseline; }
.tdee-desc td.num { width: 80px; text-align: right; padding-right: var(--s4); }
.tdee-desc tr:hover td { background: transparent; }

/* =====================================================================
   APARATE
   ===================================================================== */

.filtre { margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.filtre .perechi { gap: 0 var(--s3); }
.filtre .camp { margin-bottom: var(--s3); }
.filtre button, .filtre .btn-sec { margin-right: var(--s2); }

.lista-aparate { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s2); }

.aparat {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
}
.aparat.indisponibil { opacity: 0.55; border-style: dashed; }

.ap-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.ap-nume { font-size: var(--t-base); font-weight: 500; line-height: 1.3; }
.ap-cap .mut { font-size: var(--t-xs); margin-top: 2px; }

/* Setarile memorate — motivul principal pentru care deschizi pagina in sala.
   Vizibile imediat, nu ingropate. */
.ap-setari {
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  font-family: var(--font-data);
  font-size: var(--t-sm);
  color: var(--accent);
}

.ap-spec { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s2); }
.ap-spec span {
  font-size: var(--t-xs);
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px var(--s2);
}

.eticheta-stare {
  font-size: var(--t-xs);
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--r-sm);
  padding: 2px var(--s2);
  white-space: nowrap;
}

/* --- galerie foto aparate --- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s3); }
.poza { margin: 0; }
.poza a { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r);
          border: 1px solid var(--line); background: var(--surface-2); cursor: zoom-in; }
.poza.principala a { border-color: var(--accent); border-width: 2px; }
.poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poza figcaption { font-size: var(--t-xs); margin-top: var(--s2); line-height: 1.4; }
.poza-actiuni { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s2); flex-wrap: wrap; }
.poza-actiuni form { margin: 0; }

/* miniatura in tabel si in lista de aparate */
.cu-poza { display: flex; gap: var(--s3); align-items: flex-start; }
.mini { width: 56px; height: 42px; object-fit: cover; border-radius: var(--r-sm);
        border: 1px solid var(--line); flex-shrink: 0; }
.gol-mini { display: inline-block; background: var(--surface-2); }
.ap-poza { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-sm);
           border: 1px solid var(--line); flex-shrink: 0; }

/* --- zoom --- */
.zoom {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 18, 16, 0.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--s5); cursor: zoom-out;
}
.zoom[hidden] { display: none; }
.zoom img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--r); }
.zoom-text { color: #E8EDEB; font-size: var(--t-sm); margin-top: var(--s3); text-align: center; }
.zoom-inchide {
  position: absolute; top: var(--s4); right: var(--s4);
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  font-size: 24px; line-height: 1;
  color: #E8EDEB; background: rgba(255,255,255,0.12);
  border: none; border-radius: 50%;
}

/* --- sectiuni in interiorul unui card --- */
hr.sep {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--s6) 0 var(--s5);
}
.sectiune-titlu {
  font-family: var(--font-voice);
  font-size: var(--t-md);
  font-weight: 500;
  margin: 0 0 var(--s2);
  color: var(--ink);
}

/* --- interfete si prize --- */
.interfata {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  background: var(--surface-2);
}
.itf-cap { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.itf-cap form { margin: 0; }

.prize { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.priza {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-xs);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-sm);
  padding: 3px var(--s2);
}
.priza form { margin: 0; display: inline; }
.priza .x {
  min-height: 0; padding: 0 2px; font-size: 14px; line-height: 1;
  background: transparent; border: none; color: var(--accent); opacity: 0.6;
}
.priza .x:hover { opacity: 1; background: transparent; }

.priza.mostenita {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
}

.form-priza {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
}

.fs-prize { border: none; padding: 0; margin: 0 0 var(--s3); }
.fs-prize legend {
  padding: 0;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bife { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.bife label {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm);
  color: var(--ink);
  margin: 0;
  cursor: pointer;
}

.fs-linie { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.fs-linie label { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.fs-linie label span { font-size: var(--t-xs); color: var(--ink-3); }
.fs-linie select {
  width: auto; min-width: 140px; min-height: 34px;
  padding: var(--s1) var(--s5) var(--s1) var(--s2);
  font-size: var(--t-sm);
}
.fs-linie button { margin-bottom: 1px; }

/* rand secundar in tabel: tinte, note — ce n-ar incapea in coloane */
tr.fara-linie td { border-bottom: none; padding-bottom: 2px; }
tr.rand-detaliu td {
  padding-top: 0; padding-bottom: var(--s3);
  font-size: var(--t-xs); line-height: 1.5;
}

/* fisa aparat */
.fisa-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.fisa-tabel th {
  width: 190px; text-align: left; vertical-align: baseline;
  font-weight: 450; text-transform: none; letter-spacing: 0;
  font-size: var(--t-sm); color: var(--ink-3);
  border-bottom: none; padding: var(--s2) var(--s4) var(--s2) 0;
}
.fisa-tabel td { border-bottom: none; padding: var(--s2) 0; }
.fisa-tabel tr:hover td { background: transparent; }

.ap-nume a { color: inherit; text-decoration: none; }
.ap-nume a:hover { color: var(--accent); }

/* =====================================================================
   EXERCITII
   ===================================================================== */

.interfata.inactiva, .instanta.inactiva { opacity: 0.5; border-style: dashed; }

.instanta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}
.instanta:last-child { border-bottom: none; }
.instanta a { color: var(--ink); text-decoration: none; }
.instanta a:hover { color: var(--accent); }

.doc-bloc { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.doc-bloc:last-of-type { border-bottom: none; }
.doc-bloc.mic { padding: var(--s2) 0 0; border-bottom: none; }
.doc-titlu {
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 3px;
}
.doc-text { font-size: var(--t-sm); line-height: 1.6; color: var(--ink); }
.doc-bloc.mic .doc-text { font-size: var(--t-xs); color: var(--ink-2); }

/* ce nu trebuie sa simti, greselile, cand opresti — se citesc altfel */
.doc-bloc.atentie { padding-left: var(--s3); border-left: 2px solid var(--warn); }
.doc-bloc.atentie .doc-titlu { color: var(--warn); }

td.num.rau { color: var(--warn); }

/* =====================================================================
   FISE DE ANTRENAMENT
   Slotul e unitatea pe care o citesti in sala: numar, exercitiu, schema,
   apoi contextul. Ordinea conteaza — sus ce te intereseaza intre seturi.
   ===================================================================== */

.slot, .slot-edit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-bottom: var(--s3);
  box-shadow: var(--umbra);
}
.slot.optional { border-style: dashed; }

.slot-cap { display: flex; align-items: flex-start; gap: var(--s3); }

.slot-nr {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--surface);
  background: var(--ink);
  border-radius: var(--r-sm);
}
.slot.optional .slot-nr { background: var(--ink-3); }

.slot-nume { font-size: var(--t-md); font-weight: 500; line-height: 1.3; }
.slot-nume a { color: inherit; text-decoration: none; }
.slot-nume a:hover { color: var(--accent); }
.slot-cap .mut { font-size: var(--t-sm); margin-top: 2px; }

/* schema — ce citesti primul, intre seturi */
.slot-schema {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.slot-schema strong { font-family: var(--font-data); font-weight: 500; }
.slot-schema .mut { font-size: var(--t-xs); }

.slot-tempo {
  margin-top: var(--s3);
  padding: var(--s3);
  background: var(--warn-soft);
  border-radius: var(--r);
}
.slot-tempo .doc-titlu { color: var(--warn); }
.slot-tempo .doc-text { color: var(--ink); }

.slot-ramp { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.ramp-pas {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px var(--s2);
}

/* ultima executie — referinta din care decizi greutatea de azi */
.slot-ultima {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--accent-soft);
  border-radius: var(--r);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline;
}
.slot-ultima .doc-titlu { color: var(--accent); margin: 0; }
.ultima-text {
  font-family: var(--font-data);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.slot-ultima .mut { font-size: var(--t-xs); }

.slot-actiuni { display: flex; gap: var(--s1); align-items: flex-start; flex-shrink: 0; }
.slot-actiuni form { margin: 0; }

.rau { color: var(--warn); }

/* =====================================================================
   GRAFICE
   SVG generat in PHP: 4 kB de cod in loc de 60 kB de biblioteca, si
   functioneaza si cand reteaua din sala e proasta.
   ===================================================================== */

.grafic {
  width: 100%; height: auto;
  display: block;
  margin: var(--s3) 0 var(--s2);
  overflow: visible;
}
.g-grila { stroke: var(--line); stroke-width: 1; }
.g-eticheta {
  font-family: var(--font-data);
  font-size: 10px;
  fill: var(--ink-3);
}

.g-legenda {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-size: var(--t-xs);
  color: var(--ink-2);
}
.g-legenda span { display: inline-flex; align-items: center; gap: var(--s2); }
.g-legenda i { width: 14px; height: 2.5px; border-radius: 2px; display: inline-block; }

td.num.bine { color: var(--accent); }

/* Control de afisare pentru tabele lungi */
.rand-control {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.rand-control .limite { display: flex; gap: var(--s3); }
.rand-control .limite a { color: var(--ink-3); text-decoration: none; }
.rand-control .limite a:hover { color: var(--accent); }
.rand-control .limite strong { color: var(--ink); font-weight: 500; }

/* Rand anulat: ramane vizibil (e istoric), dar iese vizual din datele active.
   Fara tairea textului — datele trebuie sa ramana citibile. */
tr.anulat td { color: var(--ink-3); background: var(--surface-2); opacity: 0.72; }
tr.anulat td:first-child::before {
  content: "";
  display: inline-block;
  width: 3px; height: 1em;
  margin-right: var(--s2);
  vertical-align: -2px;
  background: var(--line-strong);
  border-radius: 2px;
}

/* buton compact pentru actiuni in tabel */
button.mic, .btn.mic {
  min-height: 30px;
  padding: var(--s1) var(--s3);
  font-size: var(--t-xs);
  font-weight: 450;
}

.mut { color: var(--ink-3); font-size: var(--t-sm); }

/* =====================================================================
   AUTENTIFICARE
   ===================================================================== */

.auth { max-width: 380px; margin: 10vh auto; padding: var(--s4); }

.auth h1 {
  font-family: var(--font-voice);
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s1);
  text-align: center;
}

.auth .sub {
  font-size: var(--t-sm);
  color: var(--ink-3);
  text-align: center;
  margin: 0 0 var(--s5);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   SCARA DURERII (VAS 0–10)
   Clase pregătite pentru ecranul de sală. Verdele nu urcă spre roșu
   printr-un gradient continuu: pragul contează, nu nuanța.
   ===================================================================== */

.vas { display: flex; gap: var(--s1); }

.vas button, .vas .vas-t {
  flex: 1;
  min-height: var(--tap-lg);
  padding: 0;
  font-family: var(--font-data);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.vas .vas-0-1 { background: var(--ok-soft);     color: var(--ok); }
.vas .vas-2-3 { background: var(--warn-soft);   color: var(--warn); }
.vas .vas-4   { background: var(--danger-soft); color: var(--danger); }
.vas [aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: -2px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 767px) {
  .wrap { padding: var(--s4) var(--s3) var(--s6); }
  .card { padding: var(--s4); border-radius: var(--r); }
  .grid { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
  .stat .val { font-size: var(--t-lg); }
  .topbar { padding: var(--s3); }
  .topbar .meta { display: none; }
}

@media (min-width: 768px) {
  .card { padding: var(--s5) var(--s6); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .topbar, .mainnav, button, .btn, form { display: none; }
  .card { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
  body { background: #fff; }
}