/* ============================================================
   account-widget.css — stiluri pentru widget-ul de cont
   (buton flotant, modal autentificare, meniu cont, modal abonament)
   Folosit pe toate paginile site-ului (intro, biologie, chimie).
   ============================================================ */

:root{
  --aw-green: #35d17a;
  --aw-blue: #3aa0ff;
  --aw-purple: #6f42c1;
  --aw-pink: #d63384;
  --st-danger: #F97066;
}

/* ---- Buton flotant de cont ---- */
.aw-account-btn{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 20, 30, .55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

/* Pe paginile cu meniu fullscreen (Biologie/Chimie), butonul "Meniu" din header
   ocupă acum chiar marginea dreaptă a paginii - mutăm butonul de cont puțin mai
   spre stânga, ca să nu se suprapună cu el. */
body.fullscreen-menu .aw-account-btn{ right: 152px; }
@media (max-width: 480px){
  body.fullscreen-menu .aw-account-btn{ right: 84px; }
}

.aw-account-btn:hover{
  background: rgba(20, 20, 30, .8);
  transform: translateY(-1px);
}

.aw-avatar{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aw-purple), var(--aw-pink));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.aw-premium-tag{
  background: linear-gradient(135deg, #f4c542, #e08a1e);
  color: #2a1a00;
  font-size: .62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: .03em;
}
.aw-premium-tag-max{
  background: linear-gradient(135deg, #a855f7, #6d28d9);
  color: #fff;
}

/* ---- Meniu dropdown cand esti logat ---- */
.aw-dropdown{
  position: fixed;
  top: 66px;
  right: 20px;
  z-index: 2000;
  background: #12161f;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  min-width: 220px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  display: none;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.aw-dropdown.is-open{ display: block; }

.aw-dropdown-email{
  color: rgba(255,255,255,.5);
  font-size: .72rem;
  padding: 8px 10px 4px;
  word-break: break-all;
}

.aw-dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  font-size: .86rem;
  cursor: pointer;
}

.aw-dropdown-item:hover{ background: rgba(255,255,255,.08); }

.aw-dropdown-divider{
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 6px 4px;
}

/* ---- Overlay comun (folosit si de modalul de auth, si de celelalte modale) ----
   IMPORTANT: ramane "display:flex" tot timpul (nu display:none cand e inchis) -
   e ascuns doar prin opacity:0 + pointer-events:none. Motivul e un bug real de
   autentificare: browserele (si managerele de parole, si "computerul introduce
   parola automat") NU completeaza campuri aflate intr-un container display:none
   - completarea se intampla abia DUPA ce containerul devine vizibil, cu o mica
   intarziere. Daca utilizatorul apasa "Intra in cont" chiar atunci (sau parola
   e introdusa automat, fara interventia lui), primul submit citea campuri inca
   goale -> esua, si abia al doilea submit (dupa ce completarea apuca sa se
   intample) reusea. Cu opacity/pointer-events, campurile exista deja "vizibile"
   pentru browser din momentul incarcarii paginii, deci completarea automata se
   poate intampla din timp, nu doar dupa deschiderea modalului. */
.aw-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(3, 6, 12, .72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.aw-overlay.is-open{ opacity: 1; pointer-events: auto; }

/* ---- Modal autentificare ---- */
.aw-modal{
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #12161f;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 30px 26px 26px;
  color: #fff;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}

.aw-close{
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 1.1rem;
  cursor: pointer;
}

.aw-close:hover{ color: #fff; }

.aw-title{ margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; }
.aw-subtitle{ margin: 0 0 18px; font-size: .84rem; color: rgba(255,255,255,.55); }

.aw-google-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #333;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: background .15s ease;
}

.aw-google-btn:hover{ background: #eee; }

.aw-divider{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: rgba(255,255,255,.4);
  font-size: .78rem;
}

.aw-divider::before, .aw-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.15);
}

.aw-form{ display: flex; flex-direction: column; gap: 12px; }

.aw-label{ display: flex; flex-direction: column; gap: 5px; font-size: .8rem; color: rgba(255,255,255,.7); }

.aw-input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  font-size: .92rem;
}

.aw-input:focus{ outline: none; border-color: var(--aw-blue); }

/* select-urile (ex. canalul de notificare) au nevoie de un fundal OPAC (nu
   transparent, ca restul .aw-input) - lista de optiuni deschisa e randata
   de browser cu propriul fundal implicit, iar text alb pe acel fundal
   (adesea deschis la culoare) devenea ilizibil. Setam explicit si fundalul
   optiunilor, ca lista deschisa sa ramana la fel de lizibila ca inputul inchis. */
select.aw-input{ background-color: #1b212c; }
select.aw-input option{ background-color: #1b212c; color: #fff; }

/* starea "dezactivat" (ex. canalul de notificare cat timp notificarile sunt
   oprite) foloseste opacitate MULT mai blanda decat inainte (.5 reducea prea
   mult contrastul unui text deja semi-transparent) - ramane clar ca optiunea
   e inactiva, dar textul/select-ul raman lizibile */
.aw-input:disabled{ opacity: .8; cursor: not-allowed; }

.aw-field-hint{ font-size: .72rem; color: rgba(255,255,255,.45); font-weight: 400; }

.aw-remember{ display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.75); cursor: pointer; }

/* rândul de consimțământ (Termeni + Politica de confidențialitate) e diferit de
   ".aw-remember" (o singura linie scurta) - textul se intinde de obicei pe 2-3
   randuri, deci checkbox-ul trebuie aliniat SUS (nu centrat vertical fata de tot
   blocul), iar linkurile au nevoie de putin aer intre ele ca sa nu se lipeasca
   unul de altul cand se rup pe randuri diferite */
.aw-consent-row{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
  cursor: pointer;
}
.aw-consent-row input[type="checkbox"]{
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
}
.aw-consent-row a{ color: var(--aw-blue); text-decoration: underline; text-underline-offset: 2px; }
.aw-consent-row a:hover{ color: #fff; }
.aw-consent-hint{
  display: block;
  font-size: .7rem;
  font-weight: 400;
  color: rgba(255,255,255,.45);
  margin-top: 3px;
  line-height: 1.45;
}

.aw-error{
  background: rgba(220,53,69,.12);
  border: 1px solid rgba(220,53,69,.35);
  color: #ff9aa4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .8rem;
  display: none;
}

.aw-error.is-visible{ display: block; }

.aw-submit{
  margin-top: 4px;
  background: linear-gradient(135deg, var(--aw-green), var(--aw-blue));
  border: none;
  border-radius: 10px;
  padding: 11px;
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
}

.aw-toggle{
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  text-align: center;
  margin-top: 12px;
  cursor: pointer;
}

.aw-toggle:hover{ color: #fff; }

/* ---- Modal abonament ---- */
.aw-plans{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}

.aw-plans-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 620px){
  .aw-plans-3{ grid-template-columns: 1fr; }
}

.aw-plan{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
}

.aw-plan-premium{
  border-color: #f4c542;
  background: rgba(244, 197, 66, .06);
}

.aw-plan-max{
  border-color: #a855f7;
  background: rgba(168, 85, 247, .08);
}

.aw-plan-name{ font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.aw-plan-price{ font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.aw-plan-price span{ font-size: .7rem; font-weight: 500; color: rgba(255,255,255,.5); }

.aw-plan-features{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aw-plan-features li::before{ content: "✓ "; color: var(--aw-green); font-weight: 800; }

.aw-plan-btn{
  width: 100%;
  border-radius: 8px;
  padding: 9px;
  font-weight: 700;
  font-size: .82rem;
  border: none;
  cursor: pointer;
}

.aw-plan-btn-free{ background: rgba(255,255,255,.1); color: #fff; }
.aw-plan-btn-premium{ background: linear-gradient(135deg, #f4c542, #e08a1e); color: #2a1a00; }
.aw-plan-btn-max{ background: linear-gradient(135deg, #a855f7, #6d28d9); color: #fff; }
.aw-plan-btn-current{ opacity: .6; cursor: default; }

.aw-note{
  font-size: .74rem;
  color: rgba(255,255,255,.45);
  text-align: center;
  margin-top: 6px;
}

/* ---- Toast (confirmare rapida) ---- */
.aw-toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 4000;
  background: #12161f;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.aw-toast.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px){
  .aw-account-btn span.aw-account-label{ display: none; }
  .aw-account-btn{ padding: 10px; }
}

/* ---- La cererea utilizatorului: butonul flotant de cont nu mai apare peste site ----
   Accesul la cont se face acum doar din meniu -> Setari (vezi .menu-account-card). */
.aw-account-btn{ display: none !important; }

/* ============================================================
   PAS 4 — Setări: creionelul de editare, modalul de profil,
   modalul de date personale, modalul de statistici (grafice)
   ============================================================ */

/* ---- creionelul de langa cardul de cont (Setari -> Cont) ---- */
.menu-account-edit-btn{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.menu-account-edit-btn:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }

/* ---- modal editare profil: preview poza + butoane ---- */
.aw-profil-avatar-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.aw-profil-unicoins{
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(242, 193, 78, .1);
  border: 1px solid rgba(242, 193, 78, .3);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.aw-profil-unicoins-badge{
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(242, 193, 78, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.aw-profil-unicoins-text{ display: flex; flex-direction: column; line-height: 1.25; }
.aw-profil-unicoins-label{ font-size: .74rem; color: var(--muted, #94A3B8); }
.aw-profil-unicoins-text strong{ font-size: 1.05rem; color: var(--text, #EEF0F8); }
.aw-profil-avatar-preview{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: rgba(255,255,255,.08);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}
.aw-profil-avatar-actions{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.aw-profil-upload-btn{
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.aw-profil-upload-btn:hover{ background: rgba(255,255,255,.18); }

.aw-toggle-left{ text-align: left; margin-top: 2px !important; }
.aw-label-opt{ opacity: .55; font-weight: 400; }

/* ---- modal date personale: campul de parola + butonul de afisare ---- */
.aw-password-row{ display: flex; gap: 8px; }
.aw-password-row .aw-input{ flex: 1; letter-spacing: .05em; }
.aw-eye-btn{
  flex-shrink: 0;
  width: 40px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.aw-eye-btn:hover{ background: rgba(255,255,255,.14); }

#awDateParolaForm{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ---- modal statistici: blocuri + grafice sub forma de bare orizontale ---- */
.aw-modal-wide{ max-width: 620px; max-height: 85vh; overflow-y: auto; }

.aw-stat-block{ margin-top: 20px; }
.aw-stat-block:first-of-type{ margin-top: 4px; }
.aw-stat-block-title{ font-weight: 800; font-size: .95rem; margin-bottom: 10px; }
.aw-stat-block-sub{ font-weight: 400; font-size: .74rem; color: rgba(255,255,255,.45); margin-left: 6px; }

.aw-stat-empty{ font-size: .82rem; color: rgba(255,255,255,.5); margin: 0; }

.aw-legend{ display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; font-size: .78rem; color: rgba(255,255,255,.75); }
.aw-legend-item{ display: inline-flex; align-items: center; gap: 6px; }
.aw-legend-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.aw-bar-row{
  display: grid;
  grid-template-columns: 84px 1fr 56px;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.aw-bar-label{
  font-size: .76rem;
  color: rgba(255,255,255,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aw-bar-track{
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.aw-bar-fill{
  height: 100%;
  border-radius: 4px;
  min-width: 4px;
  transition: width .3s ease;
}
.aw-bar-value{
  font-size: .74rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px){
  .aw-bar-row{ grid-template-columns: 64px 1fr 46px; }
}

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

/* ============================================================
   Panou "Setari" — design nou (injectat de account-widget.js
   prin initSetariPanel() in orice pagina cu #menuSettingsView).
   Foloseste var(--primary-color) al fiecarei materii, asa ca
   se adapteaza automat la culoarea bio (emerald) / chimie (cyan).
   ============================================================ */
.st-settings{ padding: 4px 6px 10px; }

.st-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.st-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
}
.st-subtitle{
  color: var(--text-dim);
  font-size: .86rem;
  margin: 6px 0 0;
}

.st-group{ margin-bottom: 22px; }
.st-group-label{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .68rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding-left: 2px;
}

.st-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.st-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.st-row:last-child{ border-bottom: none; }
.st-row:hover{ background: rgba(255,255,255,.04); }
.st-row-static{ cursor: default; }
.st-row-static:hover{ background: none; }

.st-row-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.st-row-text{ flex: 1; min-width: 0; }
.st-row-title{
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
}
.st-row-sub{
  font-size: .78rem;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-row-chevron{
  color: var(--text-dim);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.st-badge{
  background: rgba(255,255,255,.08);
  color: var(--text-dim);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  flex-shrink: 0;
}
.st-badge-premium{ background: color-mix(in srgb, var(--primary-color) 18%, transparent); color: var(--primary-color); }

.st-row-danger .st-row-title{ color: var(--st-danger); }
.st-row-danger .st-row-icon{ background: color-mix(in srgb, var(--st-danger) 12%, transparent); }

.st-seg{
  display: flex;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
}
/* randul "Afișare" e prea ingust ca sa incapa titlul + subtitlul + 3
   butoane cu text pe aceeasi linie (panoul de Setari e ingust, in
   sidebar) - controlul trece pe randul lui, sub text, ocupand toata
   latimea disponibila */
.st-row-wrap{ flex-wrap: wrap; }
.st-seg-full{ flex-basis: 100%; margin-top: 4px; }
.st-seg-full .st-seg-btn{ flex: 1; width: auto; }
.st-seg-btn{
  height: 44px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-dim);
  transition: background .15s ease, border-color .15s ease;
}
.st-seg-icon{ font-size: .95rem; }
.st-seg-label{ font-size: .62rem; font-weight: 600; white-space: nowrap; }
.st-seg-btn:hover{ background: rgba(255,255,255,.06); }
.st-seg-btn.active{
  background: var(--surface-2);
  border-color: var(--primary-color);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.st-footer{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .72rem;
  color: var(--text-dim);
  opacity: .65;
  padding-top: 12px;
  flex-wrap: wrap;
}

.st-toast{
  position: sticky;
  bottom: 6px;
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--primary-color);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

@media (max-width: 480px){
  .st-title{ font-size: 1.3rem; }
  .st-row{ padding: 11px 12px; }
  .st-row-icon{ width: 32px; height: 32px; font-size: .95rem; }
  .st-seg-btn{ height: 40px; }
}
/* ============================================================
   mlf-footer — subsolul global al site-ului (injectat pe orice
   pagină care include account-widget.js; identic, indiferent de
   tema paginii, ca element de brand consistent pe tot site-ul).
   ============================================================ */
.mlf-footer{
  background: #0b0e14;
  color: #c9d1d9;
  margin-top: 40px;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #4ADE80, #60A5FA, #F472B6, #FB923C) 1;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  z-index: 1;
}
.mlf-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
  gap: 28px;
}
/* mesajul scris de mana din dreapta (ca in mockup) - doar pe ecrane late */
.mlf-inner:has(.mlf-col-mesaj){ max-width: 1440px; grid-template-columns: 1.35fr .85fr .95fr .9fr 1.35fr .8fr; }
.mlf-col-mesaj{ display: flex; align-items: center; justify-content: center; }
.mlf-mesaj{ color: #61d999; font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.1rem; font-style: italic; line-height: 1.35; text-align: center; transform: rotate(-4deg); }
.mlf-mesaj span{ display: block; }
.mlf-mesaj-inima{ margin-top: 10px; font-style: normal; animation: mlfBate 1.8s ease-in-out infinite; }
@keyframes mlfBate{ 0%,100%{ transform: scale(1); } 15%{ transform: scale(1.2); } 30%{ transform: scale(1); } }
@media (max-width: 1280px){
  .mlf-inner:has(.mlf-col-mesaj){ max-width: 1240px; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; }
  .mlf-col-mesaj{ display: none; }
}
@media (max-width: 1080px){ .mlf-inner, .mlf-inner:has(.mlf-col-mesaj){ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px){ .mlf-inner, .mlf-inner:has(.mlf-col-mesaj){ grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .mlf-inner, .mlf-inner:has(.mlf-col-mesaj){ grid-template-columns: 1fr; } }
.mlf-brand{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mlf-logo-icon{ width: 26px; height: 26px; flex-shrink: 0; }
.mlf-logo-img{ width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(70,216,138,.3), 0 0 18px rgba(67,216,143,.25); }
.mlf-brand-name span{ color: #4ADE80; }
.mlf-brand-name{ font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; color: #fff; }
.mlf-desc{ font-size: .85rem; line-height: 1.6; color: #9aa4b2; margin: 0; }
.mlf-col-title{ font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: #9aa4b2; margin: 0 0 14px; display: flex; align-items: center; gap: 6px; }
.mlf-link{ display: block; color: #c9d1d9; text-decoration: none; font-size: .88rem; padding: 6px 0; transition: color .15s ease, transform .15s ease; }
.mlf-link:hover{ color: #4ADE80; text-decoration: underline; text-underline-offset: 3px; transform: translateX(2px); }
.mlf-contact{ margin-top: 10px; display: inline-block; color: #4ADE80; }
.mlf-bib{ font-size: .82rem; line-height: 1.55; color: #9aa4b2; margin: 0 0 10px; }
.mlf-bib strong{ color: #c9d1d9; }
.mlf-reminder{
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(251,146,60,.1); border: 1px solid rgba(251,146,60,.3);
  font-size: .78rem; line-height: 1.55; color: #f0c9a8;
}
.mlf-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: #7c8794;
}
.mlf-legal a{ color: #9aa4b2; text-decoration: none; }
.mlf-legal a:hover{ color: #4ADE80; text-decoration: underline; }

/* ============================================================
   ANTET (.site-header din biologie/ si chimie/) — detaliu comun cu antetul
   paginilor comune (css/ml-shell.css): la derulare apare in spatele celor
   doua pastile o banda fina, estompata, ca ele sa nu se mai suprapuna
   vizual peste conținutul de dedesubt. html.ml-derulat vine din
   account-widget.js. Pastilele primesc si un usor efect de sticla.
   ============================================================ */
.site-header::before{
  content: "";
  position: absolute;
  inset: 0 0 -18px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ink, #0b0f19) 88%, transparent) 0%,
    color-mix(in srgb, var(--ink, #0b0f19) 62%, transparent) 62%,
    transparent 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
html.ml-derulat .site-header::before{ opacity: 1; }
body.game-mode .site-header::before{ display: none; }
.site-header .site-brand,
.site-header .header-menu-btn{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

/* la chimie, mesajul scris de mana din footer e in gradient verde -> albastru
   (ca citatele din hero-urile de chimie, vezi chimie/style.css .na-citat) */
.mlf-footer.mlf-chimie .mlf-mesaj{
  background: linear-gradient(120deg, #5fe3a1 0%, #3fd0c9 45%, #4c9eff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mlf-footer.mlf-chimie .mlf-mesaj-inima{ -webkit-text-fill-color: initial; color: initial; }

/* ---- Parola uitata (modalul de autentificare) ---- */
#awForgotToggle{ margin-top: 8px; font-size: .78rem; color: rgba(255,255,255,.5); }
.aw-forgot-ok{
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.35);
  color: #a7f3c4;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: .82rem;
  line-height: 1.45;
}
.aw-mod-parola-uitata > .aw-subtitle,
.aw-mod-parola-uitata > .aw-google-btn,
.aw-mod-parola-uitata > #awGoogleBtnContainer,
.aw-mod-parola-uitata > .aw-divider{ display: none !important; }

/* ============================================================
   LOGO ANIMAT din antet (stanga sus)
   - Biologie: treptele ADN-ului se "rotesc" (scaleX in valuri) + catenele
     se deseneaza la incarcare
   - Chimie: orbitele atomului se rotesc lent, nucleul pulseaza, iar electronii
     (adaugati din account-widget.js) circula pe orbite
   - paginile comune (.ml-brand): logo-ul pluteste usor + sclipire
   ============================================================ */
.site-header .brand-icon{ overflow: visible; }
.site-header .brand-icon[viewBox="0 0 32 32"] path{
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: mlAdnDesen 1.3s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.site-header .brand-icon[viewBox="0 0 32 32"] line{
  transform-box: fill-box; transform-origin: center;
  animation: mlAdnTreapta 2.6s ease-in-out infinite;
}
.site-header .brand-icon[viewBox="0 0 32 32"] line:nth-of-type(2){ animation-delay: -.87s; }
.site-header .brand-icon[viewBox="0 0 32 32"] line:nth-of-type(3){ animation-delay: -1.73s; }
@keyframes mlAdnDesen{ to{ stroke-dashoffset: 0; } }
@keyframes mlAdnTreapta{ 0%,100%{ transform: scaleX(1); opacity: .65; } 50%{ transform: scaleX(.2); opacity: .25; } }
.site-header .site-brand:hover .brand-icon[viewBox="0 0 32 32"] line{ animation-duration: 1.1s; }

.site-header .brand-icon[viewBox="0 0 60 60"]{ animation: mlAtomRotire 16s linear infinite; }
.site-header .brand-icon[viewBox="0 0 60 60"] > circle{
  transform-box: fill-box; transform-origin: center;
  animation: mlNucleu 2.4s ease-in-out infinite;
}
.site-header .site-brand:hover .brand-icon[viewBox="0 0 60 60"]{ animation-duration: 4s; }
.ml-electron{ fill: #eafffa; filter: drop-shadow(0 0 2px rgba(110,240,220,.9)); }
@keyframes mlAtomRotire{ to{ transform: rotate(360deg); } }
@keyframes mlNucleu{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.35); } }

.ml-brand-img{ animation: mlLogoPlutire 5.5s ease-in-out infinite; }
.ml-brand{ position: relative; overflow: hidden; }
.ml-brand::after{
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: mlSclipire 7s ease-in-out 1.2s infinite;
}
@keyframes mlLogoPlutire{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-2px) rotate(-6deg); } }
@keyframes mlSclipire{ 0%,82%{ left: -60%; } 100%{ left: 130%; } }

@media (prefers-reduced-motion: reduce){
  .site-header .brand-icon, .site-header .brand-icon *, .ml-brand-img, .ml-brand::after{ animation: none !important; stroke-dashoffset: 0 !important; }
  .ml-electron{ display: none; }
}

/* ============================================================
   BANCUL DIN ANTET (biologie / chimie) - unul la intamplare la fiecare
   incarcare sau logare, scris de mana (Caveat), intre logo si Meniu.
   Doar text - nu e un buton (antetul ramane: brand + Meniu).
   ============================================================ */
.ml-banc{
  flex: 1 1 auto; min-width: 0; margin: 0 22px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  pointer-events: none;
  animation: mlBancIntra .7s cubic-bezier(.2,.8,.2,1) both;
}
.ml-banc-ico{ font-size: 1.15rem; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.ml-banc-text{
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600; font-size: 1.5rem; line-height: 1.02;
  text-align: center; max-width: 720px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  background: linear-gradient(120deg, #a7f3c4 0%, #61d999 45%, #2dd4a4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.ml-banc.ml-banc-chimie .ml-banc-text{ background-image: linear-gradient(120deg, #5fe3a1 0%, #3fd0c9 45%, #4c9eff 100%); }
:root.theme-light .ml-banc-text{ background-image: linear-gradient(120deg, #15803d, #0f766e); filter: none; }
:root.theme-light .ml-banc.ml-banc-chimie .ml-banc-text{ background-image: linear-gradient(120deg, #15803d, #0e7490 50%, #1d4ed8); }
@keyframes mlBancIntra{ from{ opacity: 0; transform: translateY(-6px) rotate(-1deg); } to{ opacity: 1; transform: none; } }
@media (max-width: 1100px){ .ml-banc-text{ font-size: 1.3rem; } .ml-banc{ margin: 0 12px; } }
@media (max-width: 760px){ .ml-banc{ display: none; } }
body.game-mode .ml-banc{ display: none; }
/* la scroll bancul dispare (peste continut arata urat), reapare sus */
.ml-banc.is-ascuns{ opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
.ml-banc.is-vizibil{ opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }

/* "Pentru admitere" - eticheta de deasupra alegerii centrului de examen */
.aw-kicker{
  display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #ffb3c0; background: rgba(255,107,129,.12); border: 1px solid rgba(255,107,129,.38);
}