/* Ecranele de autentificare: formularul în stânga, identitatea instituțională în dreapta.
 *
 * De ce split, și nu cardul de dinainte: pagina de login avea patru stiluri de buton unul
 * sub altul (`btn-primary`, `btn-glass-secondary`, `btn-roeid`, `btn-outline-secondary`),
 * plus unul cu stil scris direct în atribut. Nimic nu spunea care e acțiunea principală,
 * iar cele trei căi alternative arătau la fel de importante ca formularul. Mutate pe alt
 * fundal, într-o altă zonă a ecranului, încetează să concureze cu el.
 *
 * Culorile vin din `theme.css` (`--rnc-primary`), nu sunt alese aici.
 */

/* Ecranul de autentificare se încadrează în fereastră, fără derulare. `main` pune însă
   marginile paginilor obișnuite (`pt-4`, `pb-5`) — 4,5rem în plus peste înălțimea
   ecranului, deci exact atâta derulare, indiferent cât de scund ar fi cardul. Se anulează
   de aici, prin clasa pusă pe `body`, fiindcă regula trebuie să prindă un strămoș. */
.aut-pagina .rnc-main { padding-bottom: 0 !important; }
.aut-pagina .rnc-main > .container { padding-top: 0 !important; }

/* Centrarea pe ambele axe. `min-height`, nu `height`: pe ferestre foarte scunde cardul de
   înregistrare tot nu încape, iar atunci derularea trebuie să existe — altfel butonul de
   trimitere ajunge sub marginea de jos, fără nicio cale către el.
   100dvh, nu 100vh: pe telefon, bara de adrese care apare și dispare face ca 100vh să fie
   mai mare decât ecranul, deci pagina sare. */
.aut-scena {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 1rem;
}

.aut-cadru {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  width: 100%;
  max-width: 60rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 72, 144, 0.12);
  background: #fff;
  box-shadow: 0 18px 50px rgba(8, 37, 73, 0.10);
}
/* Panoul stă la stânga, formularul la dreapta — dar în marcaj ordinea e invers, iar
   mutarea se face din `order`. Nu e un moft de scriere: cu panoul primul în marcaj,
   tastatura ar trece prin căile alternative de autentificare ÎNAINTE de câmpul de email,
   iar cititoarele de ecran ar citi la fel. Sarcina principală rămâne prima în ordinea
   citită; doar poziția pe ecran se schimbă. */
.aut-cadru__marca { order: -1; }
@media (max-width: 860px) {
  /* Pe ecran îngust cad una sub alta, iar panoul rămâne sus: pagina nu are voie să
     înceapă cu un câmp de email fără niciun context deasupra. */
  .aut-cadru { grid-template-columns: 1fr; }
}

/* Coloana formularului e o coloană flex, ca acțiunea principală și trimiterea spre
   înregistrare să cadă pe marginea de jos a cardului, la același nivel cu semnătura
   instituțională din panoul albastru. Lipite sub ultimul câmp, ele lăsau un gol mare
   dedesubt și cardul părea tăiat. */
.aut-cadru__forma {
  padding: 2.1rem 1.9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.aut-cadru__forma form { display: flex; flex-direction: column; flex: 1; }
.aut-cadru__forma form > .aut-btn--principal { margin-top: auto; }
/* Golul de deasupra butonului nu poate creste oricat: pe formularele scurte (resetarea
   are un camp si o captcha) `margin-top: auto` inghitea tot spatiul ramas, iar butonul
   ajungea la doua campuri distanta de ultimul lucru completat — parea al altei sectiuni.
   Distantierul opreste cresterea; ce ramane peste el se aduna sub buton. */
.aut-cadru__forma form { justify-content: flex-start; }
/* Pe formularele scurte golul se fixeaza, nu se lasa `auto`: cu un singur camp deasupra,
   butonul ajungea la doua campuri distanta de ultimul lucru completat si parea al altei
   sectiuni. Restul spatiului ramane sub el, unde nu deranjeaza. */
.aut-pagina--scurta .aut-cadru__forma form > .aut-btn--principal { margin-top: 2.2rem; }
/* Trei zone pe verticală: sigla sus, semnătura ministerului jos, iar între ele o bandă
   care crește cât are nevoie și își centrează conținutul. Fără ea, pașii și butoanele se
   strângeau sub siglă și lăsau un gol lung deasupra numelui ministerului — panoul arăta
   ca o coloană începută și abandonată. */
.aut-cadru__marca {
  position: relative;
  padding: 2.2rem 1.7rem 1.5rem;
  background: var(--rnc-primary, #004890);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  overflow: hidden;
}
.aut-marca__miez {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  /* Marginea de jos e mai mare decat cea de sus: asezat pe centrul geometric, blocul
     parea sa cada prea departe de sigla, care e reperul de la care se citeste panoul.
     Centrul optic sta mai sus decat cel masurat. */
  padding: 0.4rem 0 1rem;
}
.aut-cadru__marca::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -30%;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.aut-cadru__marca > * { position: relative; z-index: 1; }

/* Doar conturul, fără fundal alb: silueta clădirii din siglă e albă, deci pe o plachetă
   albă rămânea invizibilă — se vedea numai tricolorul, ca o pată fără explicație. Pe
   albastru se citește singură, iar chenarul subțire îi ține locul plachetei. */
.aut-stema {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
  padding: 0.55rem;
}
.aut-stema img { width: 100%; height: 100%; object-fit: contain; }
.aut-marca__t { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; }
/* Rândul de sub siglă poartă contextul ecranului („Cont nou", „Recuperare acces"), nu
   numele registrului scris pe larg — pe login lipsește tocmai fiindcă acolo ar fi fost
   același nume de două ori. */
.aut-marca__s { display: block; font-size: 0.78rem; opacity: 0.82; margin-top: 0.2rem; }
.aut-cadru__marca h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.aut-cadru__marca p { margin: 0; font-size: 0.85rem; opacity: 0.9; line-height: 1.5; max-width: 26ch; }
.aut-cadru__marca ul { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; text-align: left; }
.aut-cadru__marca li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.83rem; opacity: 0.92; }
.aut-cadru__marca li i { flex: none; margin-top: 0.16rem; font-size: 0.9rem; }

/* ── pașii de pe panoul albastru ──
   Numerele sunt informație, nu ornament: pașii chiar se petrec în ordinea asta, iar al
   doilea se întâmplă în altă parte (în inbox), deci omul trebuie să știe unde e în șir
   când se întoarce pe pagină. Bulinele bifate de dinainte nu spuneau nimic despre ordine.
   Linia verticală leagă cifrele într-un traseu, în loc să le lase trei insule. */
.aut-pasi { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; text-align: left; width: 100%; }
.aut-pas { display: grid; grid-template-columns: 2rem 1fr; gap: 0.8rem; align-items: start; position: relative; padding-bottom: 1.35rem; }
.aut-pas:last-child { padding-bottom: 0; }
/* Traseul care leagă cifrele. Pornește ALB și se stinge spre pasul următor: sugerează
   sensul de mers, ceea ce o linie de grosime egală n-ar face. E desenat sub bulină
   (`z-index` mai mic), ca să pară că intră în ea, nu că se oprește lângă. */
.aut-pas::before {
  content: "";
  position: absolute;
  left: 0.97rem;
  top: 2.15rem;
  bottom: 0.15rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.16));
}
.aut-pas:last-child::before { display: none; }
.aut-pas__nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.aut-pas__text { font-size: 0.88rem; line-height: 1.4; padding-top: 0.34rem; }
/* Fraza dintr-o casetă fără pași: aceeași măsură ca textul unui pas. */
.aut-cadru__marca .aut-fraza { margin: 0; font-size: 0.88rem; line-height: 1.5; text-align: left; max-width: none; }

/* Pașii stau într-un bloc cu contur propriu, nu liberi pe fundal. Așezați direct pe
   albastru, se citeau ca text rătăcit în mijlocul unei coloane goale; încadrați, se văd
   ca o casetă de informație, care e exact ce sunt. */
.aut-incadrat {
  width: 100%;
  max-width: 17.5rem;
  padding: 1.15rem 1.15rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.aut-incadrat__cap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Un singur fapt, spus mare: pe ecranele fără pași, pictograma și titlul poartă mesajul,
   iar fraza îl explică într-un rând. Componenta cu supratitlu și listă e pentru unde chiar
   sunt pași de urmat, nu pentru un singur lucru de știut. */
.aut-fapt {
  width: 100%;
  max-width: 17rem;
  padding: 1.3rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}
.aut-fapt__icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin: 0 auto 0.65rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.25rem;
}
.aut-cadru__marca .aut-fapt__titlu { margin: 0 0 0.3rem; font-size: 0.98rem; font-weight: 700; max-width: none; }
.aut-cadru__marca .aut-fapt__text { margin: 0; font-size: 0.85rem; line-height: 1.5; opacity: 0.88; max-width: none; }

/* Nota de avertizare: se citește ca o observație, nu ca o alarmă. Un fundal roșu pe
   panoul instituțional ar fi strigat mai tare decât butonul de trimitere, pentru un
   lucru care oricum se întâmplă la fiecare cont nou. */
.aut-cadru__marca .aut-nota {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 210, 90, 0.4);
  background: rgba(255, 210, 90, 0.10);
  font-size: 0.79rem;
  line-height: 1.4;
}
.aut-cadru__marca .aut-nota i { flex: none; color: rgba(255, 210, 90, 0.95); }
/* Numele ministerului, centrat la bază, despărțit printr-o linie subțire: se citește ca
   semnătură instituțională, nu ca text pierdut în colț. */
.aut-inst {
  margin-top: auto;
  padding-top: 1.1rem;
  width: 100%;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.55;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Antetul e un bloc, nu două rânduri lipite: titlu, explicație, apoi o linie subțire
   care închide zona. Fără ea, explicația în gri pal atârna între titlul gros și prima
   etichetă de câmp și se citea ca text rămas din greșeală, nu ca parte din pagină. */
/* Fără linie sub titlu: desparte prin spațiu, nu printr-un chenar. Pe o coloană care are
   deja etichete, chenare de câmp și un buton plin, încă o linie orizontală era o dungă în
   plus, iar titlul părea prins într-o bandă. Spațiul face aceeași treabă, tăcut. */
.aut-cap { margin-bottom: 2.1rem; }
/* 600, nu 800: titlul n-are cu ce concura pe jumătatea albă a cardului — e singurul text
   mare de acolo — iar la greutatea dinainte apăsa peste tot restul formularului. */
.aut-titlu { font-size: 1.45rem; font-weight: 600; margin: 0; letter-spacing: -0.012em; color: #0f213a; text-wrap: balance; }
.aut-sub { color: rgba(22, 50, 79, 0.72); font-size: 0.9rem; line-height: 1.55; max-width: 40ch; margin: 0.4rem 0 0; text-wrap: pretty; }

/* ── câmpuri ── */
.aut-camp { margin-bottom: 0.8rem; }
.aut-camp > label {
  display: block;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(22, 50, 79, 0.62);
  margin-bottom: 0.26rem;
}
.aut-oblig { color: #b5474a; }
.aut-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 520px) { .aut-doi { grid-template-columns: 1fr; } }

.aut-intrare { position: relative; }
.aut-intrare input {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.66rem 0.82rem;
  border: 1px solid #dde5ee;
  border-radius: 10px;
  background: #fff;
  color: #16324f;
}
.aut-intrare input:focus {
  outline: 0;
  border-color: var(--rnc-primary, #004890);
  box-shadow: 0 0 0 3px rgba(0, 72, 144, 0.12);
}
.aut-intrare--parola input { padding-right: 2.8rem; }
.aut-ochi {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: rgba(22, 50, 79, 0.55);
  cursor: pointer;
}
.aut-ochi:hover { background: #e8f0f9; color: var(--rnc-primary, #004890); }

.aut-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.74rem 1.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.aut-btn--principal { background: var(--rnc-primary, #004890); color: #fff; }
.aut-btn--principal:hover { background: var(--rnc-primary-deep, #03254d); color: #fff; }
.aut-btn--secundar { background: #fff; border-color: #dde5ee; color: #16324f; }
.aut-btn--secundar:hover { border-color: var(--rnc-primary, #004890); color: var(--rnc-primary, #004890); }
/* `width` fixă, nu doar `max-width`: pe o coloană cu `align-items: center`, două butoane
   cu text de lungimi diferite ies de lățimi diferite și par două lucruri de rang diferit,
   deși sunt aceeași alegere. Fundalul e destul de opac cât să se citească a buton — la
   0.15 se topea în albastru și arăta ca text subliniat. */
/* Alb plin, cu text albastru. Translucid, butonul se topea în fundal și se citea mai
   degrabă ca o casetă decât ca ceva de apăsat. Nu concurează cu „Intră în cont": acela e
   pe cealaltă jumătate a cardului, pe alb — fiecare zonă își are acțiunea ei principală,
   iar aici albul e culoarea care iese în față. */
.aut-btn--alb {
  background: #fff;
  border-color: #fff;
  color: var(--rnc-primary, #004890);
  width: 14rem;
  max-width: 100%;
  padding: 0.62rem 1rem;
  font-size: 0.9rem;
  box-shadow: 0 1px 3px rgba(0, 24, 56, 0.14);
}
.aut-btn--alb i { font-size: 1.05em; opacity: 0.85; }
.aut-btn--alb:hover {
  background: #fff;
  border-color: #fff;
  color: var(--rnc-primary-deep, #03254d);
  box-shadow: 0 3px 10px rgba(0, 24, 56, 0.22);
  transform: translateY(-1px);
}
.aut-btn--alb:active { transform: none; box-shadow: 0 2px 6px rgba(0, 24, 56, 0.22); }
.aut-btn--alb:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
.aut-btn + .aut-btn { margin-top: 0.5rem; }

.aut-rand { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin: 0.1rem 0 1rem; font-size: 0.82rem; }
.aut-rand a, .aut-leg { color: var(--rnc-primary, #004890); font-weight: 700; text-decoration: none; }
.aut-rand a:hover, .aut-leg:hover { text-decoration: underline; }
/* Documentul încă nepublicat: arată la fel, dar nu e apăsabil. Subliniat punctat, ca
   diferența să fie vizibilă pentru cine se uită atent, fără să pară un link stricat. */
.aut-leg--inca { text-decoration: underline dotted; text-underline-offset: 0.16em; cursor: default; }
.aut-bifa { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(22, 50, 79, 0.62); }
.aut-subsol { text-align: center; margin: 1.1rem 0 0; font-size: 0.85rem; color: rgba(22, 50, 79, 0.62); }

.aut-desparte { display: flex; align-items: center; gap: 0.7rem; margin: 1.1rem 0; color: rgba(22, 50, 79, 0.42); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; }
.aut-desparte::before, .aut-desparte::after { content: ""; flex: 1; height: 1px; background: #dde5ee; }

/* ── captcha ──
   Un rând, la înălțimea celorlalte câmpuri, cu eticheta deasupra ca la orice alt câmp.
   Caseta de dinainte avea chenar propriu, fundal propriu și un buton-text dedesubt: ieșea
   din ritmul formularului și, fiind singurul bloc încadrat, arăta ca o eroare. Reîncărcarea
   e un buton doar cu pictogramă, lipit de imagine — acolo se uită omul când vrea alt cod. */
.aut-captcha { display: flex; gap: 0.5rem; align-items: stretch; }
.aut-captcha__img {
  flex: none;
  width: 8.2rem;
  height: 2.65rem;
  border-radius: 9px;
  display: block;
  border: 1px solid #dde5ee;
  background: #fff;
  object-fit: cover;
}
/* Săgeata se rotește la apăsare, o singură tură. E singurul semn că s-a întâmplat ceva:
   imaginea nouă seamănă leit cu cea veche, deci fără mișcare butonul pare mort. */
.aut-captcha__reincarca {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.65rem;
  padding: 0;
  border: 1px solid #dde5ee;
  border-radius: 9px;
  background: linear-gradient(#fff, #f6f9fc);
  color: rgba(22, 50, 79, 0.55);
  font-size: 1.05rem;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease,
              box-shadow 0.16s ease;
}
.aut-captcha__reincarca:hover {
  color: var(--rnc-primary, #004890);
  border-color: var(--rnc-primary, #004890);
  background: linear-gradient(#fff, #eef5fd);
  box-shadow: 0 2px 8px rgba(0, 72, 144, 0.14);
}
.aut-captcha__reincarca:focus-visible {
  outline: 0;
  border-color: var(--rnc-primary, #004890);
  box-shadow: 0 0 0 3px rgba(0, 72, 144, 0.18);
}
.aut-captcha__reincarca:active { background: #e8f0f9; }
.aut-captcha__reincarca i { display: block; transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.35, 1); }
.aut-captcha__reincarca.se-roteste i { transform: rotate(360deg); }
.aut-captcha input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  padding: 0.5rem 0.7rem;
  border: 1px solid #dde5ee;
  border-radius: 9px;
  background: #fff;
  color: #16324f;
}
.aut-captcha input::placeholder { font-weight: 400; letter-spacing: normal; text-transform: none; color: rgba(22, 50, 79, 0.42); }
.aut-captcha input:focus { outline: 0; border-color: var(--rnc-primary, #004890); box-shadow: 0 0 0 3px rgba(0, 72, 144, 0.12); }

.aut-alerta { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.7rem 0.85rem; border-radius: 10px; font-size: 0.85rem; margin-bottom: 1rem; }
.aut-alerta--stop { background: #fdf2f2; border: 1px solid rgba(181, 71, 71, 0.28); color: #8c2b2b; }
.aut-alerta--info { background: #e8f0f9; border: 1px solid #b9cee6; color: #14538f; }
.aut-alerta i { flex: none; margin-top: 0.1rem; }
.aut-alerta ul { margin: 0; padding-left: 1.1rem; }

.aut-eroare { display: block; margin-top: 0.25rem; font-size: 0.78rem; font-weight: 700; color: #b5474a; }

/* ── acordul de termeni ── */
.aut-acord { display: flex; gap: 0.6rem; align-items: center; margin: 0.3rem 0 1.1rem; font-size: 0.92rem; line-height: 1.45; color: rgba(22, 50, 79, 0.85); }
.aut-acord input { margin: 0; flex: none; width: 1rem; height: 1rem; }

/* ── bara de putere a parolei ──
   Compactată ca să încapă tot cardul în ecran: eticheta stă pe rândul barei, iar regulile
   pe două coloane. Una sub alta, cele patru reguli plus eticheta ocupau cinci rânduri —
   destul cât să împingă butonul de trimitere sub marginea de jos pe un laptop obișnuit. */
.aut-putere { margin-top: 0.45rem; }
.aut-putere__bara { display: flex; gap: 0.24rem; flex: 1; align-items: center; }
.aut-putere__seg { flex: 1; height: 0.32rem; border-radius: 999px; background: #e2e8f0; transition: background-color 0.18s ease; }
.aut-putere__cap { display: flex; align-items: center; gap: 0.6rem; }
.aut-putere__text { flex: none; font-size: 0.75rem; font-weight: 700; color: rgba(22, 50, 79, 0.6); min-width: 9ch; text-align: right; }
.aut-reguli {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.12rem 0.7rem;
}
@media (max-width: 620px) { .aut-reguli { grid-template-columns: 1fr; } }
.aut-reguli li { display: flex; align-items: flex-start; gap: 0.38rem; font-size: 0.75rem; line-height: 1.35; color: rgba(22, 50, 79, 0.6); }
.aut-reguli li i { flex: none; margin-top: 0; font-size: 0.68rem; line-height: 1.35; }
.aut-reguli li.este-ok { color: #1c8f64; }
.aut-reguli li.este-rau { color: #b5474a; }

@media (prefers-reduced-motion: reduce) {
  .aut-putere__seg, .aut-btn, .aut-ochi, .aut-captcha__reincarca,
  .aut-captcha__reincarca i { transition: none; }
  .aut-btn--alb:hover { transform: none; }
}

/* ── ecranele de mesaj ──
   Confirmări, refuzuri, pași intermediari: pagini fără formular, care spun un lucru și
   oferă o ieșire. Aceeași coloană albă ca la login, deci nu par alt site — schimbarea de
   decor la mijlocul unui flux e exact momentul în care omul se întreabă dacă a nimerit
   unde trebuie. */
.aut-mesaj { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.aut-mesaj__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #e8f0f9;
  color: var(--rnc-primary, #004890);
  font-size: 1.35rem;
}
.aut-mesaj__icon--reusit { background: #e6f4ee; color: #1c8f64; }
.aut-mesaj__icon--stop { background: #fdf2f2; color: #b5474a; }
.aut-mesaj p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(22, 50, 79, 0.82); }
.aut-mesaj strong { color: #0f213a; }

/* Rândul de acțiuni: butonul principal întâi, ieșirea secundară lângă el. Pe ecran
   îngust trec unul sub altul, principalul rămânând primul. */
.aut-actiuni { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 1.4rem; }
.aut-actiuni .aut-btn { width: auto; flex: 1 1 10rem; }

/* ── ecranele de mesaj, centrate ──
   Aici nu e nimic de completat: un fapt și o ieșire. Aliniate la stânga, ca un formular,
   ele lăsau coloana să pară începută și neterminată — ochiul aștepta câmpuri care nu vin.
   Centrate, blocul se citește ca o încheiere. */
.aut-pagina--mesaj .aut-cadru__forma { justify-content: center; align-items: center; text-align: center; }
.aut-pagina--mesaj .aut-cap { margin-bottom: 1.5rem; }
.aut-pagina--mesaj .aut-mesaj { align-items: center; text-align: center; max-width: 26rem; }
.aut-pagina--mesaj .aut-actiuni { justify-content: center; margin-top: 0; padding-top: 1.5rem; }
.aut-pagina--mesaj .aut-actiuni .aut-btn { flex: 0 1 auto; min-width: 11rem; }

/* Pictograma se deseneaza singura: cercul intai, semnul dupa. Miscarea nu e ornament —
   ecranul asta apare dupa o actiune al carei rezultat omul nu-l vede (un email plecat,
   o parola schimbata pe server), iar desenarea confirma ca ceva chiar s-a intamplat. */
.aut-semn { display: block; width: 4.2rem; height: 4.2rem; }
.aut-semn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.aut-semn circle,
.aut-semn path {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aut-semn circle { stroke: currentColor; opacity: 0.28; stroke-dasharray: 151; stroke-dashoffset: 151; animation: aut-deseneaza 0.62s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.aut-semn path { stroke: currentColor; stroke-dasharray: 60; stroke-dashoffset: 60; animation: aut-deseneaza 0.42s 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.aut-semn--reusit { color: #1c8f64; }
.aut-semn--asteptare { color: var(--rnc-primary, #004890); }
.aut-semn--stop { color: #b5474a; }

@keyframes aut-deseneaza { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* Fără mișcare, dar desenul trebuie să rămână complet: cu animația oprită și
     `stroke-dashoffset` la valoarea de start, pictograma ar fi rămas pur și simplu
     invizibilă — adică ecranul ar fi pierdut exact semnul care confirmă rezultatul. */
  .aut-semn circle, .aut-semn path { animation: none; stroke-dashoffset: 0; }
}