/* ============================================================
   RideCheetah — PAGINILE DE CONT (v2 · două teme)
   Adaos peste pietricica.css. Nu redefinește niciun jeton:
   toate culorile vin de acolo (luminos în :root, întunecat pe
   html[data-tema="intunecat"]), ca să nu apară două adevăruri.

   DE CE UN FIȘIER SEPARAT și nu în pietricica.css: foaia aceea
   e încărcată de TOATE paginile, inclusiv de cele legale care
   n-au niciun formular.
   ============================================================ */

/* ---------- schela paginilor de cont ---------- */
/* Coloană îngustă: un formular mai lat de ~30rem obligă ochiul să sară
   înapoi la marginea stângă la fiecare rând și crește rata de greșeală. */
.authWrap{width:100%; max-width:520px; margin:0 auto;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));}
.authWrap.wide{max-width:760px;}

.authHead{text-align:center; margin:22px 0 20px;}
.authHead h1{font-size:calc(clamp(26px,6.4vw,36px) * var(--f-titlu-scara,1));}
.authHead p{color:var(--muted); font-size:16px; margin:11px auto 0; max-width:44ch;}
.authHead .eyebrow{justify-content:center;}

/* pietricica-formular: aceleași raze eliptice ca restul site-ului */
.card{background:var(--surface); border-radius:var(--peb); box-shadow:var(--sh-peb);
  padding:24px 22px; position:relative; overflow:hidden;}
.card > *{position:relative; z-index:2;}
.card .glow{position:absolute; width:200px;height:180px; right:-70px; top:-70px; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,107,.18),rgba(255,196,107,0) 70%); z-index:0;}
.card + .card{margin-top:12px;}
.card h3{color:var(--text);}

/* ---------- câmpuri ---------- */
.f{margin-bottom:0;}
/* Eticheta e o țintă de atins (focalizează câmpul), deci are 44px de înălțime,
   cu scrisul jos, lipit de câmpul ei. Spațiul de deasupra scrisului desparte
   câmpurile între ele; eticheta NU se suprapune peste câmpul de dinainte
   (o atingere pe marginea lui de jos ar fi mutat cursorul în câmpul următor). */
.f-lab{display:flex; align-items:flex-end; min-height:44px; margin:0 0 7px 2px; padding:0;
  font-size:12.5px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; line-height:1.3; color:var(--muted);}
/* primul câmp din card: eticheta intră în căptușeala cardului, unde nu e nimic de atins */
.card .f:first-of-type > .f-lab{margin-top:-18px;}
.f-lab.center{justify-content:center; margin-left:0;}
.f-in{width:100%; display:block; min-height:52px; padding:14px 16px; border-radius:20px;
  background:var(--field); border:1.5px solid var(--line-2); color:var(--text);
  font-family:var(--font); font-size:16px; font-weight:600; line-height:1.35;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);}
/* 16px e minimul care oprește Safari-ul de pe iPhone să mărească pagina la
   focalizare — o mărire care lasă pagina derulabilă lateral după aceea. */
.f-in::placeholder{color:var(--muted-2); opacity:1; font-weight:500;}
.f-in:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 4px var(--focus-glow);}
.f-in:disabled{opacity:.55; cursor:not-allowed;}
.f-in[aria-invalid="true"]{border-color:var(--clay-ink); box-shadow:0 0 0 4px var(--bad-glow);}
/* completarea automată a browserului: rămâne în culorile temei, nu în galbenul lui */
.f-in:-webkit-autofill,.f-in:-webkit-autofill:hover,.codeIn:-webkit-autofill{
  -webkit-text-fill-color:var(--text); caret-color:var(--text);
  box-shadow:0 0 0 1000px var(--field) inset; transition:background-color 99999s ease 0s;}
.f-in:-webkit-autofill:focus{box-shadow:0 0 0 1000px var(--field) inset, 0 0 0 4px var(--focus-glow);}

.f-hint{margin:7px 2px 0; font-size:13.5px; color:var(--muted); font-weight:600; line-height:1.55;}
.f-hint strong{color:var(--text);}
/* rândul cu legături (ex. „accepți termenii și politica de confidențialitate"): rânduri destul de înalte
   încât zonele de atingere ale legăturilor de pe rânduri vecine să nu se suprapună */
.f-hint:has(a:not(.btn)){line-height:1.8;}
.card > .f-hint:first-of-type{margin-top:8px;}
/* Mesajul de eroare e legat de câmp cu aria-describedby și are role="alert",
   ca cititorul de ecran să-l anunțe fără să mute focalizarea din câmp. */
.f-err{display:none; margin:7px 2px 0; font-size:14px; color:var(--clay-ink); font-weight:800; line-height:1.5;}
.f-err.show{display:block;}
.f-ok{display:none; margin:7px 2px 0; font-size:14px; color:var(--leaf-ink); font-weight:800;}
.f-ok.show{display:block;}
.f-lab .opt{text-transform:none; letter-spacing:0; font-weight:700;}

/* câmp cu buton „arată parola" înăuntru */
.f-wrap{position:relative;}
.f-wrap .f-in{padding-right:60px;}
.f-eye{position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:44px;height:44px; display:grid; place-items:center; border:0; cursor:pointer;
  background:transparent; color:var(--muted); border-radius:50%;}
.f-eye:hover{color:var(--terra-ink); background:var(--surface-2);}
.f-eye:focus-visible{outline:3px solid var(--focus); outline-offset:-3px;}
.f-eye svg{width:21px;height:21px; pointer-events:none;}
.f-eye[aria-pressed="true"]{color:var(--terra-ink);}

/* ---------- tăria parolei ---------- */
.pw{margin-top:9px;}
.pwBar{height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden;}
.pwBar i{display:block; height:100%; width:0; border-radius:999px; transition:width .3s var(--ease), background .3s;}
.pwTxt{margin:6px 2px 0; font-size:13px; font-weight:800; color:var(--muted); min-height:1px;}

/* ---------- căsuța codului din email ---------- */
.codeIn{width:100%; display:block; min-height:64px; padding:14px 10px; border-radius:24px; text-align:center;
  background:var(--field); border:1.5px solid var(--amber-line); color:var(--text);
  font-family:var(--font); font-weight:850; font-variant-numeric:tabular-nums;
  /* clamp, nu o valoare fixă: 6 cifre cu spațiere de 0,22em la 34px ies din
     ecranul de 320px și ar da derulare orizontală pe toată pagina */
  font-size:clamp(26px,8.5vw,34px); letter-spacing:.22em; text-indent:.22em;}
.codeIn:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 4px var(--focus-glow);}
.codeIn::placeholder{color:var(--ph-code); opacity:1; letter-spacing:.22em;}
.codeIn[aria-invalid="true"]{border-color:var(--clay-ink); box-shadow:0 0 0 4px var(--bad-glow);}

.resend{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px;
  margin-top:12px; font-size:14px; color:var(--muted);}
.resend button{display:inline-flex; align-items:center; min-height:44px; padding:0 8px; border:0; border-radius:14px;
  background:none; cursor:pointer; color:var(--link);
  font-family:var(--font); font-size:14px; font-weight:850; text-decoration:underline; text-underline-offset:.16em;}
.resend button:hover{color:var(--link-hover); background:var(--surface-2);}
.resend button[disabled]{color:var(--muted); cursor:default; text-decoration:none; background:none;}

/* ---------- banda de stare ---------- */
.note{display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:24px;
  font-size:14.5px; line-height:1.55; margin-bottom:16px;}
.note b{display:block; font-weight:850;}
.note.ok{background:var(--leaf-soft); border:1px solid var(--leaf-line); color:var(--leaf-ink);}
.note.bad{background:var(--clay-soft); border:1px solid var(--clay-line); color:var(--clay-ink);}
.note.info{background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber-ink);}
.note p{margin:4px 0 0; color:var(--muted);}
.note p strong{color:var(--text);}
.note .ni{flex:0 0 auto; width:20px;height:20px; margin-top:1px;}
.note[hidden]{display:none;}
.note:focus{outline:none;}
.note:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}

/* ---------- rândul de sub formular ---------- */
.alt{margin-top:18px; text-align:center; font-size:15px; color:var(--muted); text-wrap:balance;}
.alt a{color:var(--link); font-weight:800; text-decoration:none;}
.alt a:hover{color:var(--link-hover); text-decoration:underline;}
.alt + .alt{margin-top:9px;}
/* și în afara cardului (ex. „Înapoi la intrare", singur pe rândul lui pe /cont/parola și /cont/verifica): țintă de 44 px */
.alt a{display:inline-flex; align-items:center; min-height:44px; padding:0 8px;}

/* ---------- pași (1-2-3) ---------- */
.steps{display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 4px;}
.steps i{display:block; height:6px; width:36px; border-radius:999px; background:var(--surface-3);}
.steps i.on{background:linear-gradient(90deg,var(--amber),var(--peach));}
.steps i.done{background:var(--leaf-2);}

/* ---------- PANOUL CONTULUI ---------- */
.pnHead{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:18px 0 18px;}
.pnAva{width:56px;height:56px;flex:0 0 auto; display:grid; place-items:center;
  background:var(--grad-gold); color:var(--deep);
  border-radius:56% 44% 46% 54% / 50% 52% 48% 50%;
  animation:blobMorph 15s ease-in-out infinite alternate;
  font-size:22px; font-weight:900; letter-spacing:-.02em; box-shadow:var(--sh-gold);}
.pnWho{min-width:0; flex:1;}
.pnWho b{display:block; font-family:var(--font-t); font-size:21px; font-weight:850; letter-spacing:-.02em; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pnWho s{display:block; text-decoration:none; font-size:14px; color:var(--muted); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* lista de date: eticheta sus, valoarea jos — la 412px două coloane ar rupe
   emailurile lungi și ar împinge lățimea paginii */
.dl{display:grid; gap:13px;}
.dl > div{min-width:0;}
.dl dt{font-size:12px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.dl dd{margin:4px 0 0; font-size:16px; font-weight:700; color:var(--text); overflow-wrap:anywhere;}
.dl dd.mono{letter-spacing:.01em;}
@media (min-width:600px){ .dl{grid-template-columns:1fr 1fr; column-gap:18px;} }

/* pietricica licenței */
.lic{border-radius:var(--peb); padding:22px; position:relative; overflow:hidden;}
.lic > *{position:relative; z-index:2;}
.lic.live{background:var(--grad-stone); color:var(--deep);
  box-shadow:0 26px 56px -30px rgba(224,101,61,.9), inset 0 1px 0 rgba(255,255,255,.42);}
.lic.live .licK{color:var(--deep);}
.lic.dim{background:var(--surface); box-shadow:var(--sh-peb);}
.lic.dim .licK{color:var(--muted);}
.lic.dim .licV{color:var(--text);}
/* break-word, nu anywhere: cheia (RAPRO-XXXX-XXXX) trece întreagă pe rândul următor, nu ruptă în două */
.licK{display:block; font-size:12px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; overflow-wrap:break-word;
  /* pe telefoanele înguste rândul se rupe echilibrat („LICENȚĂ ACTIVĂ ·" / „RAPRO-7K2Q-9XWD"), nu în mijlocul cheii */
  text-wrap:balance;}
.licV{margin:7px 0 0; font-family:var(--font-t); font-size:clamp(30px,9vw,42px); font-weight:900; letter-spacing:-.04em;
  line-height:1.05; font-variant-numeric:tabular-nums;}
.licV u{text-decoration:none; font-family:var(--font); font-size:15px; font-weight:800; margin-left:6px; letter-spacing:0;}
.licSub{margin:9px 0 0; font-size:14.5px; font-weight:750;}
.lic.live .licSub{color:var(--deep);}
.lic.dim .licSub{color:var(--muted);}
.lic::after{content:""; position:absolute; width:210px;height:190px; right:-70px; top:-80px; z-index:1;
  background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
  border-radius:50%; pointer-events:none;}
.lic.dim::after{background:radial-gradient(circle,rgba(255,196,107,.16),rgba(255,196,107,0) 70%);}

/* codul de partener — se selectează dintr-o atingere (litere egale: e un cod) */
.refBox{display:flex; flex-wrap:wrap; align-items:center; gap:11px; margin-top:11px;}
.refCode{flex:1 1 150px; min-width:0; padding:12px 16px; border-radius:20px; background:var(--field);
  border:1.5px solid var(--amber-line); font-family:var(--mono); font-size:20px; font-weight:800;
  letter-spacing:.14em; color:var(--amber-ink); text-align:center; overflow-wrap:anywhere;
  user-select:all; -webkit-user-select:all;}
.copyBtn{flex:0 0 auto; min-height:48px; padding:0 20px; border-radius:20px 17px 19px 17px / 17px 20px 17px 19px; border:0;
  background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1.5px var(--line-2);
  font-family:var(--font); font-size:14.5px; font-weight:850; cursor:pointer; transition:background-color .2s, transform .3s var(--spring);}
.copyBtn:hover{background:var(--surface-3);}
.copyBtn:active{transform:scale(.95);}
.copyBtn.done{background:var(--leaf-soft); color:var(--leaf-ink); box-shadow:inset 0 0 0 1.5px var(--leaf-line);}

/* rândul „șterge contul" din panou: legătură discretă, în lut */
.pnSterge{border-top:1px solid var(--line); padding-top:14px;}
.pnSterge a{color:var(--clay-ink); font-weight:850;}
.pnSterge a:hover{color:var(--clay-ink);}

/* ---------- butoane în așteptare ---------- */
.btn[aria-busy="true"]{opacity:.72; pointer-events:none; cursor:progress;}
.spin{width:16px;height:16px;flex:0 0 auto; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.btn .spin{display:none;}
.btn[aria-busy="true"] .spin{display:block;}

/* ---------- schelet cât se încarcă panoul ---------- */
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%; animation:shim 1.3s linear infinite; border-radius:12px; color:transparent!important;}
@keyframes shim{to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){.skel{animation:none;}}

.foot.slim{margin-top:30px; padding:16px 0 30px; text-align:center;}
.foot.slim .footNav{justify-content:center;}

/* Galaxy Fold închis (≤ 300 px): indiciile din câmpuri („ionp  sau  ion@gmail.com", „Cel puțin 8 caractere")
   încap întregi — cardul și câmpurile își strâng puțin căptușeala laterală (ochiul parolei rămâne la 44 px) */
@media (max-width:300px){
  .card{padding-left:14px; padding-right:14px;}
  .f-in{padding-left:12px; padding-right:12px;}
  .f-wrap .f-in{padding-right:52px;}
}

/* ============================================================
   RÂNDUL DISCRET SPRE SUPORT (în „Contul meu")
   Proprietarul a cerut suportul „undeva să nu deranjeze pe nimeni".
   Deci: UN RÂND, lângă celelalte secțiuni ale contului — nu un
   banner, nu o bulină care sare pe ecran, nu un buton plutitor.
   ============================================================ */
.supRand{display:flex; align-items:center; gap:13px; margin-top:12px; padding:15px 17px;
  border-radius:var(--peb-s); text-decoration:none; color:var(--text);
  background:var(--surface); box-shadow:var(--sh-peb);
  transition:background .25s var(--ease), transform .3s var(--spring);}
.supRand:hover{background:var(--surface-2); color:var(--text);}
.supRand:active{transform:scale(.985);}
.supRand:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}
.supIc{flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  background:var(--amber-soft); color:var(--amber-ink);
  border-radius:54% 46% 48% 52% / 48% 52% 48% 52%;}
.supIc svg{width:21px; height:21px; display:block;}
.supTx{flex:1; min-width:0;}
.supTx b{display:block; font-size:16px; font-weight:850; letter-spacing:-.015em;}
.supTx s{display:block; text-decoration:none; margin-top:2px; font-size:14px; font-weight:650;
  color:var(--muted); line-height:1.4;}
/* ⚠ UN PUNCT, NU UN NUMĂR ROȘU. Un contor roșu e o alarmă și nu se poate
   ignora; un punct de chihlimbar e o informație și se poate. */
.supDot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--terra);
  box-shadow:0 0 0 4px var(--amber-soft);}
.supGo{flex:0 0 auto; color:var(--muted); font-size:20px; font-weight:850; line-height:1;}