:root{
  --fundal: #f6f7fb;
  --alb: #ffffff;
  --text: #111827;
  --text-gri: #6b7280;
  --linie: #e5e7eb;
  --accent: #1d4ed8;
  --umbra: 0 10px 26px rgba(17,24,39,.08);
  --raza: 16px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--text);
  background: var(--fundal);
}

.pagina{ max-width: 1200px; margin: 0 auto; padding: 18px; }

.antet{
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  box-shadow: var(--umbra);
  padding: 14px;
}

.antet__h1{ font-weight: 900; font-size: 20px; }
.antet__sub{ color: var(--text-gri); font-size: 13px; margin-top: 4px; }

.meniu{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.meniu__link{
  text-decoration:none;
  border:1px solid var(--linie);
  background:#fff;
  padding:8px 10px;
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
}

.meniu__link--activ{
  border-color: #bfdbfe;
  background: #eff6ff;
}

.continut{ margin-top: 14px; }

.panouri{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .panouri{ grid-template-columns: 1fr; }
}

.card{
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  box-shadow: var(--umbra);
  padding: 14px;
}

.card__titlu{ font-weight: 900; font-size: 16px; margin-bottom: 8px; }
.card__subtitlu{ font-weight: 900; font-size: 14px; margin-bottom: 10px; }

.card__enunt{
  line-height: 1.5;
  font-size: 15px;
}

.camp-inline{
  width: 110px;
  padding: 6px 8px;
  border-radius: 12px;
  border:1px solid #d1d5db;
  font-size: 15px;
  vertical-align: middle;
  outline:none;
  margin: 0 4px;
}

.camp-inline:focus{
  border-color:#93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.camp-inline--select{ width: 320px; max-width: 100%; }

.butoane{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.buton{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: #fff;
  cursor:pointer;
  font-weight: 800;
}

.buton--primar{
  border-color:#c7d2fe;
  background:#eef2ff;
  color:#1e3a8a;
}

.buton--secundar{
  background:#f9fafb;
  color:#374151;
}

.lista-indicii{ margin:0; padding-left:18px; color: var(--text-gri); }

.mesaj{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background:#fafafa;
  font-size: 14px;
}
.mesaj--neutral{ color: var(--text-gri); }

.zona-desen{
  width: 100%;
  aspect-ratio: 16/9;
  border:1px dashed var(--linie);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

.date-desen{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: #fff;
}

.date-desen__titlu{
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 8px;
}

.date-desen__grid{
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.date-desen__linie{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linie);
}

.date-desen__linie:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.date-desen__et{
  color: var(--text-gri);
  min-width: 110px;   
  white-space: nowrap;
}

.date-desen__val{
  color: var(--text);
  font-weight: 400;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px){
  .date-desen__linie{
    grid-template-columns: 120px 1fr;
  }
}

.rezultat{ margin-bottom: 10px; }
.rezultat__linie{ font-size: 14px; color: var(--text-gri); }
.rezultat__valoare{ color: var(--text); font-weight: 900; }

.pasi .pas{
  border: 1px solid var(--linie);
  border-radius: 12px;
  background:#fff;
  padding: 10px 12px;
  margin-top: 8px;
}

.pas__formula{
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}

.pas__explicatie{
  color: var(--text-gri);
  margin-bottom: 6px;
}

.pas__lucru,
.pas__calcule{
  color: var(--text);
  font-weight: 400;
  line-height: 1.35;
}

.subsol{
  margin-top: 14px;
  color: var(--text-gri);
  font-size: 12px;
  text-align:center;
}

/* OVERRIDE FINAL – Date desen */
#dateDesen .date-desen__grid{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#dateDesen .date-desen__linie{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--linie) !important;
}

#dateDesen .date-desen__linie:last-child{
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#dateDesen .date-desen__et{
  color: var(--text-gri) !important;
  white-space: nowrap !important;
}

#dateDesen .date-desen__val{
  color: var(--text) !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}