/* ============================================================
   heifamily — auth design system
   Folosit de TOATE paginile de auth: SignUp, LogIn, ForgotPassword,
   ResetPassword, SetPIN, VerifyEmail, EmailAction.

   🎨 Rescris 2026-09-02 pe „scena albă", limbajul introdus de Schedules.html
   și continuat de dashboard + cele 17 subpagini. Înainte, paginile de auth
   erau ultima insulă rămasă din designul cald: gradient crem, două blob-uri
   estompate și butoane cu gradient portocaliu puternic. Lângă restul
   produsului arătau ca altă aplicație — exact motivul pentru care Schedules
   a fost mutat prima dată.

   ⚠️ Retuș PUR de CSS: niciun selector nu dispare și nicio pagină nu și-a
   schimbat markupul. Cele șapte pagini folosesc aceleași primitive
   (`.auth-shell`, `.auth-card`, `.auth-logo`, `.field-group`, `.signin-btn`),
   deci foaia asta e singura pârghie care le mută pe toate deodată, fără
   cusături între ecrane care sunt la un click distanță unul de altul.

   Regulile limbajului, ca să nu fie reinventate:
   · scena e gri NEUTRU #F5F5F7, nu crem — cremul e ce făcea diferența;
   · tipografie Poppins (titluri) + Inter (text), FĂRĂ mono, fără eyebrow-uri
     mono-uppercase — alea au fost respinse explicit la Schedules;
   · portocaliul plin e EXACT --accent din meniu (#E07B39), o singură nuanță;
   · verdele #24463B e culoarea acțiunii care duce ceva la capăt (butonul
     „Create account" = butonul „Add Child" din AddChild, aceeași semantică);
   · pe alb NU se pun fundaluri portocalii pale — murdăresc albul.
   ============================================================ */

:root{
  /* scena + panoul */
  --page:#F5F5F7;              /* gri Apple, neutru — NU crem */
  --bg:#ffffff;
  --panel-line:rgba(0,0,0,.07);
  --field:#F7F7F9;             /* umplutura inputurilor pe alb */

  /* cerneluri */
  --ink:#1D1D1F;
  --ink-soft:#6E6E73;
  --muted:#8E8E93;
  --line:rgba(0,0,0,.07);
  --line-strong:rgba(0,0,0,.12);

  /* accent — aceeași nuanță ca rândul de meniu la hover */
  --accent:#E07B39;
  --accent-bright:#EC8A4B;
  --accent-deep:#C75E22;       /* varianta pentru TEXT pe alb (contrast) */
  --accent-soft:rgba(224,123,57,.12);

  /* verdele acțiunii, identic cu `.add-btn` / `.applyall` */
  --g:#24463B;
  --g-hi:#2C5748;
  --g-glow:radial-gradient(58% 130% at 50% 0%, rgba(122,222,168,.30) 0%, rgba(122,222,168,.10) 46%, rgba(122,222,168,0) 78%);

  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 50px -22px rgba(0,0,0,.14);

  /* ⚠️ Doi tokeni din paleta caldă sunt încă referiţi din `<style>`-ul propriu al
     altor pagini — `--bg-cream` în SetPIN şi VerifyEmail, `--grad` în SetPIN şi
     EmailAction. Şterşi pur şi simplu, ar lăsa acolo `var()` nerezolvat, adică
     fundal transparent, pe exact paginile care cer o stare ca să se deschidă.
     Rămân cu NUMELE vechi, ca să nu ceară editări de markup, dar REMAPAŢI pe
     limbajul nou. Numele mint puţin: „cream" e azi gri neutru. Când paginile
     alea sunt oricum atinse, se trec pe tokenii reali şi blocul dispare.
     📌 Al treilea, `--shadow-lg`, a plecat deja: singurul lui consumator era
     modalul „different device" din VerifyEmail, scos pe 2 sep. */
  --bg-cream:var(--page);
  --grad:linear-gradient(180deg,#2C5748 0%,#24463B 100%);

  --error:#EF4444; --error-ink:#B42318; --success:#2F8F3E;
  --r:14px; --r-lg:26px; --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body.auth{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--page);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100dvh;
}

/* ===== Scena ===== */
.auth-shell{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
  background:var(--page);
}
/* Blob-urile estompate erau jumătate din „tenta caldă". Nu se șterg din HTML —
   ar fi însemnat şapte editări de markup pentru zero câştig — ci se sting aici,
   într-un singur loc. */
.blob{display:none}

/* ===== Panoul alb care ține pagina ===== */
/* Aceleaşi valori ca `.panel` din Schedules şi din cele 17 subpagini: aceeaşi
   rază, aceeaşi linie, aceeaşi umbră în două straturi. */
.auth-card{
  position:relative; z-index:1;
  width:100%; max-width:470px;
  background:var(--bg);
  border:1px solid var(--panel-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:36px 36px 30px;
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth-card{animation:none}}

/* ===== Marca ===== */
/* Pastila cu „h" a fost SCOASĂ din markup pe toate cele şapte pagini (decizie
   de design, 2 sep). Pe un ecran de auth marca e cuvântul, iar cuvântul îşi
   spune singur numele prin sting — insigna deasupra lui era un al doilea logo
   în acelaşi loc. `.auth-badge` nu mai are consumatori, deci a plecat şi regula. */
.auth-logo{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; margin-bottom:22px;
}
/* 🔴 LOGOUL OFICIAL, copiat VERBATIM din `index.html` (`.logo`) — cerinţă
   explicită a userului: „e logoul oficial". Nu retuşa niciuna dintre cele patru
   valori ca să „se potrivească" mai bine cu cardul; restul textului din card are
   deliberat alt CSS, iar marca nu se acordează după el. Dacă logoul se schimbă
   vreodată, se schimbă în landing şi se copiază înapoi aici. */
.auth-wordmark{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:600; font-size:1.32rem;
  letter-spacing:-.02em; color:var(--ink);
  display:inline-flex; align-items:center; gap:0;
}

/* ===== Punctul: element rotund, nu caracter ===== */
/* În lockup-ul oficial punctul e un `.hb` — un cerc de .34em CU PULS propriu
   („lub-dub", ~26 bpm), aflat în AFARA cuvântului. Prima încercare folosise
   caracterul „." din varianta de Dashboard: alt element, alt halou, alt centru.
   ⚠️ `position:relative` e load-bearing: inelele sting-ului sunt copii AI LUI
   şi se centrează în el. */
.auth-wordmark .hb{
  display:inline-block; position:relative;
  width:.34em; height:.34em; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(224,123,57,.4);
  animation:lubdub 2.3s ease-in-out infinite;
}
@keyframes lubdub{
  0%,40%,100%{transform:scale(1)}
  6%{transform:scale(1.22)}
  12%{transform:scale(1)}
  18%{transform:scale(1.18)}
  24%{transform:scale(1)}
}
/* Cât rulează sting-ul, el conduce punctul; pulsul de repaus reia după. */
.auth-wordmark.sting .hb{animation:none}

/* ===== Brand sting (Scânteie → Traseu → Puls) ===== */
/* Contractul cerut de `brand-sting.js`, identic cu `.logo` din landing. */
.auth-wordmark .lw{display:inline-block;position:relative;white-space:nowrap}
.auth-wordmark .l{display:inline-block;will-change:transform,opacity,filter}
.auth-wordmark .sting-trail{position:absolute;z-index:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,rgba(224,123,57,0),rgba(224,123,57,.55));opacity:0}
.auth-wordmark .sting-ring{position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(224,123,57,.5);opacity:0}
/* ⚠️ Garda de mişcare redusă e obligatorie, nu politicoasă: sting-ul porneşte
   punând literele pe `opacity:0`. Fără ea, cine a cerut „fără animaţii" ar
   rămâne cu marca INVIZIBILĂ. Modulul iese devreme în acelaşi caz, iar aici se
   opreşte şi pulsul. */
@media (prefers-reduced-motion:reduce){
  .auth-wordmark .l{opacity:1 !important;transform:none !important;filter:none !important}
  .auth-wordmark .hb{animation:none}
}

/* ===== Titluri ===== */
.auth-card h1{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:clamp(1.55rem,2.8vw,1.95rem);
  font-weight:600; letter-spacing:-.025em; line-height:1.15;
  text-align:center; color:var(--ink);
  margin-bottom:9px;
}
.subtitle{
  text-align:center; color:var(--ink-soft);
  font-size:.94rem; line-height:1.5; font-weight:400;
  max-width:38ch; margin:0 auto 26px;
}

/* ===== Câmpuri ===== */
.field-group{margin-bottom:15px}
.field-group label{
  display:block; font-size:.82rem; font-weight:600;
  color:var(--ink); margin-bottom:8px; letter-spacing:-.01em;
}
/* Umplutură gri deschis + linie discretă, ca inputurile de pe partea albă a
   dashboardului. Inelul de focus rămâne portocaliu: e singurul loc din pagină
   unde accentul are voie să fie o suprafaţă, şi acolo e semnal, nu decor. */
.input-wrap{
  display:flex; align-items:center; gap:12px;
  height:52px; border-radius:var(--r); padding:0 15px;
  background:var(--field);
  border:1px solid var(--panel-line);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.input-wrap:focus-within{
  background:var(--bg);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(224,123,57,.14);
}
.input-wrap.error{
  border-color:rgba(239,68,68,.5);
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
}
.input-wrap .icon{
  width:22px; min-width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
}
.input-wrap:focus-within .icon{color:var(--accent-deep)}
.input-wrap .icon svg{width:19px;height:19px;stroke:currentColor}
.input-wrap input{
  flex:1; border:none; outline:none; background:transparent;
  font:inherit; font-size:.98rem; color:var(--ink);
}
.input-wrap input::placeholder{color:var(--muted)}

/* arată/ascunde parola */
.toggle-eye{
  width:24px; min-width:24px; height:24px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted); opacity:.75; transition:opacity .15s,color .15s;
}
.toggle-eye:hover{opacity:1;color:var(--ink-soft)}
.toggle-eye svg{width:19px;height:19px;stroke:currentColor}

/* ===== Regulile de parolă ===== */
.password-rules{
  display:none; padding:13px 15px; margin-top:10px;
  background:var(--page); border:1px solid var(--panel-line);
  border-radius:var(--r);
}
.password-rules.visible{display:block}
.rule{
  display:flex; align-items:center; gap:9px;
  font-size:.82rem; color:var(--muted); margin-bottom:6px;
  transition:color .2s;
}
.rule:last-child{margin-bottom:0}
.rule .check{
  width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.08); flex-shrink:0;
  transition:background .2s;
}
.rule .check::after{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--muted); transition:background .2s;
}
.rule.met{color:var(--success)}
.rule.met .check{background:rgba(47,143,62,.16)}
.rule.met .check::after{content:"✓";width:auto;height:auto;background:transparent;color:var(--success);font-size:11px;font-weight:700}

/* ===== Bannere ===== */
.error-banner{
  display:none; padding:12px 15px; margin-bottom:16px;
  background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.28);
  border-radius:var(--r); color:var(--error-ink); font-size:.89rem; line-height:1.45;
}
.error-banner.visible{display:block}
.error-banner a{color:var(--accent-deep);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}

.success-banner{
  display:none; padding:12px 15px; margin-bottom:16px;
  background:rgba(47,143,62,.08); border:1px solid rgba(47,143,62,.26);
  border-radius:var(--r); color:var(--success); font-size:.89rem; line-height:1.45;
}
.success-banner.visible{display:block}

/* ===== Link „am uitat parola" ===== */
.forgot-wrap{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.forgot-wrap a{font-size:.87rem;color:var(--accent-deep);font-weight:600;text-decoration:none}
.forgot-wrap a:hover{text-decoration:underline}

/* ===== Separator ===== */
.divider{
  display:flex; align-items:center; gap:14px;
  margin:20px 0; color:var(--muted); font-size:.88rem; justify-content:center;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--panel-line)}

/* ===== Butoane ===== */
/* VERDE, nu portocaliu. În limbajul dashboardului verdele e culoarea acţiunii
   care duce ceva la capăt — exact ce e `.add-btn` din AddChild („Add Child") şi
   `.applyall` din Schedules. Portocaliul rămâne al mărcii şi al semnalelor, nu
   al butonului de comitere. Aceeaşi lumină de sus şi aceeaşi linie albă pe
   muchie ca acolo. */
.signin-btn{
  position:relative;
  width:100%; height:54px; border:none; border-radius:100px;
  background:var(--g-glow), var(--g); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  font:inherit; font-size:.98rem; font-weight:600; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; margin-top:4px;
  transition:background .16s var(--ease),transform .16s var(--ease),opacity .2s;
}
.signin-btn:hover:not(:disabled){background:var(--g-glow), var(--g-hi)}
.signin-btn:active:not(:disabled){transform:scale(.985)}
.signin-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.signin-btn:disabled{opacity:.45;cursor:not-allowed}

.spinner{
  display:none; width:21px; height:21px;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
}
.signin-btn.loading .spinner{display:inline-block}
.signin-btn.loading .btn-text{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.google-btn{
  width:100%; height:54px; border:1px solid var(--line-strong);
  border-radius:100px; background:var(--bg); color:var(--ink);
  font:inherit; font-size:.96rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:12px;
  cursor:pointer; transition:background .18s,border-color .18s,transform .16s var(--ease);
}
.google-btn:hover:not(:disabled){background:var(--page);border-color:rgba(0,0,0,.18)}
.google-btn:active:not(:disabled){transform:scale(.985)}
.google-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.google-btn:disabled{opacity:.5;cursor:not-allowed}
.google-icon{width:22px;height:22px;display:grid;place-items:center}
.google-icon svg{width:22px;height:22px}

/* ===== Text de subsol ===== */
.terms{
  text-align:center; font-size:.83rem; line-height:1.55;
  color:var(--muted); margin-top:18px;
}
.terms a{color:var(--accent-deep);font-weight:600;text-decoration:none}
.terms a:hover{text-decoration:underline}
.bottom-line{margin:18px 0 14px;height:1px;background:var(--panel-line)}
.altline{text-align:center;font-size:.93rem;color:var(--ink-soft)}
.altline a{color:var(--accent-deep);text-decoration:none;font-weight:600}
.altline a:hover{text-decoration:underline}

/* ===== Casetele de PIN (SetPIN) ===== */
.pin-row{display:flex;justify-content:center;gap:12px;margin:8px 0 4px}
.pin-box{
  width:54px; height:64px; text-align:center;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:1.6rem; font-weight:600; color:var(--ink);
  border:1px solid var(--panel-line); border-radius:16px; background:var(--field);
  outline:none; transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  -moz-appearance:textfield;
}
.pin-box::-webkit-outer-spin-button,.pin-box::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pin-box:focus{background:var(--bg);border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,123,57,.14)}
.pin-box.filled{border-color:var(--accent);background:var(--bg)}

/* ===== Încărcare de sine stătătoare (VerifyEmail / EmailAction) ===== */
.center-status{text-align:center;color:var(--ink-soft);font-size:.93rem;line-height:1.55;margin-top:6px}
.spinner-big{
  width:42px;height:42px;margin:0 auto 18px;
  border:3px solid rgba(224,123,57,.18);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;
}

/* ===== Responsiv ===== */
@media (max-width:520px){
  .auth-card{padding:28px 20px 24px;border-radius:22px}
  .subtitle{font-size:.9rem;margin-bottom:22px}
  .input-wrap{height:50px}
  .signin-btn,.google-btn{height:52px}
  .pin-box{width:46px;height:56px;font-size:1.45rem}
}