.auth { min-height: calc(100svh - 68px); display: grid; grid-template-columns: 1fr 1fr; }
.auth__art { position: relative; overflow: hidden; display: grid; place-items: center; padding: 40px; background: #000; isolation: isolate; }
.auth__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 60%, color-mix(in srgb, var(--ink) 8%, transparent), transparent 70%); }
.auth__wall { position: absolute; inset: -20%; z-index: -2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; transform: rotate(-12deg); opacity: .32; }
.auth__wall img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; animation: rise 40s linear infinite; }
.auth__wall img:nth-child(odd) { animation-direction: reverse; }
@keyframes rise { to { transform: translateY(-40%); } }
.auth__art .fade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 40%, #000), linear-gradient(0deg, #000, transparent 40%, transparent 60%, #000); }
.auth__pitch { max-width: 420px; }
.auth__pitch .mascot-s { width: 220px; aspect-ratio: 1; background: url(../img/mascot-strip.webp) 100% 0 / 1200% 100% no-repeat; margin-bottom: -6px; }
.auth__pitch h2 { font: 700 clamp(30px, 3.4vw, 44px)/1.05 var(--display); letter-spacing: -.035em; margin: 0 0 12px; color: var(--ink); }
.auth__pitch p { color: var(--muted); margin: 0; font-size: 17px; }
.auth__pitch ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; color: var(--ink-2); }
.auth__pitch li { display: flex; gap: 10px; align-items: center; }
.auth__pitch li svg { width: 20px; height: 20px; color: var(--green); flex: none; }

.auth__form { display: grid; place-items: center; padding: 40px 20px 60px; }
.af { width: min(420px, 100%); }
.af h1 { font: 700 34px/1.1 var(--display); letter-spacing: -.035em; margin: 0 0 8px; }
.af > p { color: var(--muted); margin: 0 0 26px; }
.af .btn--full { width: 100%; }
.oauth { display: grid; gap: 10px; }
.oauth .btn { --h: 54px; width: 100%; border-radius: 16px; font-size: 15.5px; }
.oauth svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; margin: 22px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.af__row { display: flex; justify-content: space-between; align-items: center; margin: -2px 0 18px; font-size: 14px; }
.af__row a { color: var(--ink); font-weight: 600; }
.af__alt, .af > p.af__alt { text-align: center; color: var(--muted); margin: 22px 0 0; } /* beats `.af > p` (margin-top 0): the line sat glued under the Google/Apple buttons */
.af__alt a { color: var(--ink); font-weight: 600; }
.af .check { margin: 6px 0 20px; }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.otp input { height: 60px; text-align: center; font: 700 24px var(--font); border-radius: 16px; border: 1px solid var(--line-2); background: var(--s2); color: var(--ink); outline: 0; }
.otp input:focus { border-color: var(--ink); }
.strength { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 8px; }
.strength i { display: block; height: 100%; width: 0; background: var(--fav); transition: width .3s var(--ease), background .3s; }
.af__ok { text-align: center; }
.af__ok .okc { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(48,209,88,.12); color: var(--green); }
.af__ok .okc svg { width: 40px; height: 40px; }
.steps-dots { display: flex; gap: 6px; margin-bottom: 18px; }
.steps-dots i { height: 4px; flex: 1; border-radius: 4px; background: var(--line-2); }
.steps-dots i.on { background: var(--ink); }
.field .err[hidden] { display: none; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
  .auth__form { padding-top: 28px; align-items: start; }
}
.af__msg { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .3); color: #ffb4b4; font-size: 14px; }
.af__msg[hidden] { display: none; }
/* Core 1.9.85 (S7): a calm line under "Trimite-mi un cod pe e-mail" (not the red error box). */
.af__note { margin: 10px 0 14px; color: #c7c7cc; font-size: 14px; line-height: 20px; }
.af__note[hidden] { display: none; }
/* Activation result (e-mail link), shown above the sign-in form. */
.af__note { display: grid; gap: 4px; margin: 0 0 20px; padding: 14px 16px; border-radius: 18px; font-size: 14px; line-height: 1.45; animation: afnote .5s cubic-bezier(.2, .9, .25, 1) both; }
.af__note b { font-size: 15.5px; }
.af__note--ok { background: rgba(48, 209, 88, .1); border: 1px solid rgba(48, 209, 88, .28); color: var(--ok-ink); }
.af__note--ok b { color: var(--ok-ink); }
.af__note--warn { background: rgba(255, 179, 64, .08); border: 1px solid rgba(255, 179, 64, .25); color: #ffe0b0; }
.af__note--warn b { color: #ffb340; }
@keyframes afnote { from { opacity: 0; transform: translateY(-8px); } }
.pw { position: relative; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); font: 600 13px var(--font); padding: 8px; cursor: pointer; }

/* ---- Cont nou */
.af form { display: grid; gap: 14px; }
.af form .field { margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .two { grid-template-columns: 1fr; } }
.acct { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 22px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); }
.acct__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 8px 20px -10px rgba(0, 0, 0, .9); transition: transform .45s cubic-bezier(.2, .9, .25, 1.15), width .45s; }
.acct button { position: relative; z-index: 1; display: grid; gap: 2px; padding: 12px 8px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 18px; transition: color .25s; }
.acct button b { font: 700 15px var(--font); }
.acct button small { font-size: 12px; }
.acct button[aria-checked="true"] { color: var(--ink); }
.reveal:not([hidden]) { animation: vo-reveal .35s cubic-bezier(.2, .9, .25, 1); }
@keyframes vo-reveal { from { opacity: 0; transform: translateY(-6px); } }

.tel { position: relative; display: flex; align-items: center; }
.tel .input { padding-right: 150px; transition: border-color .3s, background .3s; }
.tel__go { position: absolute; right: 6px; height: calc(100% - 12px); padding: 0 16px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font: 700 14px var(--font); cursor: pointer;
  transition: transform .2s, opacity .2s; }
.tel__go:active { transform: scale(.95); }
.tel.is-sending .tel__go { opacity: .6; pointer-events: none; }
.tel.is-sent .tel__go { display: none; }
.tel__ok { position: absolute; right: 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--ok-ink); font: 700 14px var(--font); animation: vo-pop .5s cubic-bezier(.2, 1.4, .3, 1); }
.tel__ok svg { width: 18px; height: 18px; }
.tel.is-ok .input { border-color: rgba(48, 209, 88, .45) !important; background: rgba(48, 209, 88, .06); }

.otpbox { margin-top: 12px; padding: 18px 16px 14px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 6%, transparent), color-mix(in srgb, var(--ink) 2%, transparent)); border: 1px solid var(--line-2); text-align: center; overflow: hidden; }
.otpbox.in { animation: vo-otp-in .55s cubic-bezier(.2, .9, .25, 1); }
@keyframes vo-otp-in { from { opacity: 0; transform: translateY(14px) scale(.97); max-height: 0; } to { max-height: 260px; } }
.otpbox__t { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.otpbox__t b { color: var(--ink); }
.otp6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp6 input { height: 58px; min-width: 0; text-align: center; font: 700 24px var(--font); color: var(--ink); border-radius: 16px; border: 1px solid var(--line-2); background: var(--s2); outline: 0; caret-color: #fff;
  transition: border-color .2s, background .3s, transform .25s cubic-bezier(.2, 1.4, .3, 1); }
.otpbox.in .otp6 input { animation: vo-cell .5s cubic-bezier(.2, 1.3, .3, 1) both; }
.otpbox.in .otp6 input:nth-child(2) { animation-delay: .05s; } .otpbox.in .otp6 input:nth-child(3) { animation-delay: .1s; }
.otpbox.in .otp6 input:nth-child(4) { animation-delay: .15s; } .otpbox.in .otp6 input:nth-child(5) { animation-delay: .2s; } .otpbox.in .otp6 input:nth-child(6) { animation-delay: .25s; }
@keyframes vo-cell { from { opacity: 0; transform: translateY(12px) scale(.85); } }
.otp6 input:focus { border-color: rgba(255, 255, 255, .5); background: var(--s3); }
.otp6 input.filled { transform: scale(1.04); border-color: rgba(255, 255, 255, .35); }
.otp6 input.ok { border-color: #30d158; background: rgba(48, 209, 88, .12); color: var(--ok-ink); transform: scale(1); animation: vo-pop .45s cubic-bezier(.2, 1.4, .3, 1); }
.otp6 input.bad { border-color: #ff6b6b; background: rgba(255, 107, 107, .1); }
.otpbox.shake .otp6 { animation: vo-shake .45s; }
@keyframes vo-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes vo-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } }
.otpbox.is-checking .otp6 input { animation: vo-pulse 1s ease-in-out infinite; }
@keyframes vo-pulse { 50% { border-color: rgba(255, 255, 255, .6); } }
.otpbox.done { animation: vo-otp-out .6s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes vo-otp-out { to { opacity: 0; transform: scale(.96); max-height: 0; padding: 0; margin: 0; } }
.otpbox__s { margin: 12px 0 0; color: var(--faint); font-size: 13px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--ink); font: 600 13px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:disabled { color: var(--faint); cursor: default; text-decoration: none; }
.recaptcha:empty { display: none; }
.mailfly { width: 96px; height: 96px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); animation: vo-fly 2.6s ease-in-out infinite; }
.mailfly svg { width: 52px; height: 52px; }
@keyframes vo-fly { 50% { transform: translateY(-8px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .otpbox.in, .otp6 input, .acct__pill, .mailfly, .otpbox.done { animation: none !important; transition: none !important; } }
.tel__ok[hidden], .tel__go[hidden], .otpbox[hidden], .reveal[hidden] { display: none !important; }
/* every field: label on top, same 52px box, aligned in rows */
.af .field { display: grid; align-content: start; gap: 8px; }
.af .field > span { font: 600 13.5px var(--font); color: var(--ink-2); }
.af .input, .af .tel .input { height: 52px; width: 100%; box-sizing: border-box; border-radius: 14px; padding: 0 16px; font: 500 16px var(--font); }
.two { align-items: start; }
.af .pw .input { padding-right: 76px; }
.pwmeter { display: grid; gap: 6px; margin-top: -4px; }
.pwmeter .strength { margin: 0; }
.pwmeter small { color: var(--faint); font-size: 12.5px; }
.af .check { align-items: flex-start; margin: 2px 0 4px; line-height: 1.5; }
.af .input.is-locked { color: var(--muted); background: color-mix(in srgb, var(--ink) 3%, transparent); cursor: not-allowed; }

/* Light theme (01.10.2026): the code boxes (account creation and the administrators' SMS code)
   had a white caret and white focus/filled/checking borders, invisible on white. */
:root[data-theme="light"] .otp6 input { caret-color: var(--ink); }
:root[data-theme="light"] .otp6 input:focus { border-color: rgba(16, 24, 40, .45); }
:root[data-theme="light"] .otp6 input.filled { border-color: rgba(16, 24, 40, .3); }
:root[data-theme="light"] .otp6 input.ok { border-color: #15803d; background: rgba(21, 128, 61, .1); }
:root[data-theme="light"] .otp6 input.bad { border-color: #d92d20; background: rgba(217, 45, 32, .08); }
:root[data-theme="light"] .otpbox.is-checking .otp6 input { animation-name: vo-pulse-light; }
@keyframes vo-pulse-light { 50% { border-color: rgba(16, 24, 40, .55); } }

/* Light theme (01.10.2026, the check of every button and text on both themes): the sign-in and
   new-account pages kept the dark theme's black picture side while its words took the light
   theme's dark ink ("Anunțurile tale, mereu la îndemână." navy on black); here it is a light
   side and the photo wall stands still (moving backgrounds are for the dark theme, owner
   01.10.2026). The error and warning notes were pale pink and amber made for black, and the
   account-type pill had a black shadow. */
:root[data-theme="light"] .auth__art { background: var(--s3); }
:root[data-theme="light"] .auth__art .fade { background: linear-gradient(90deg, transparent 40%, var(--s3)), linear-gradient(0deg, var(--s3), transparent 40%, transparent 60%, var(--s3)); }
:root[data-theme="light"] .auth__wall { opacity: .22; }
:root[data-theme="light"] .auth__wall img { animation: none; }
:root[data-theme="light"] .af__msg { color: #b42318; background: rgba(217, 45, 32, .06); border-color: rgba(217, 45, 32, .25); }
:root[data-theme="light"] .af__note { color: #3a3a3c; }
:root[data-theme="light"] .af__note--warn { color: #7a4a00; background: rgba(247, 144, 9, .08); border-color: rgba(247, 144, 9, .3); }
:root[data-theme="light"] .af__note--warn b { color: #b54708; }
:root[data-theme="light"] .acct__pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 20px -12px rgba(16, 24, 40, .35); }

/* Premium sign-in and new account (owner 02.10.2026: "să fie butoanele și căsuțele mai premium,
   mai frumoase"; Google and Apple below the form). Glass boxes with a lit top edge and a soft focus
   ring, a primary button with depth and a light sweep, social buttons in the store badges' glass.
   Built on the theme's ink and surface colours, so the light theme follows. */
.af .input {
  height: 56px; border-radius: 16px; padding: 0 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease), background .25s;
}
@media (hover: hover) and (pointer: fine) { .af .input:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); } }
.af .input:focus {
  outline: 0; border-color: color-mix(in srgb, var(--ink) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 9%, transparent), color-mix(in srgb, var(--ink) 4%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent), 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);
}
.af .input::placeholder { color: var(--faint); }
.af .field > span { font: 600 13px var(--font); letter-spacing: .01em; color: var(--muted); }
.af .pw button { right: 10px; padding: 8px 10px; border-radius: 10px; transition: background .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .af .pw button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); } }

.af .btn--solid.btn--lg {
  --h: 58px; position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 86%, var(--bg)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg) 25%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--ink) 55%, transparent);
}
.af .btn--solid.btn--lg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bg) 22%, transparent) 50%, transparent 70%);
  transition: transform .8s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .af .btn--solid.btn--lg:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg) 25%, transparent), 0 18px 40px -14px color-mix(in srgb, var(--ink) 65%, transparent); }
  .af .btn--solid.btn--lg:hover::after { transform: translateX(120%); }
}
.af .btn--solid.btn--lg:active { transform: scale(.98); }

.af .or { margin: 26px 0 16px; font-size: 12.5px; letter-spacing: .04em; text-transform: lowercase; }
.af .or::before, .af .or::after { background: linear-gradient(90deg, transparent, var(--line-2)); }
.af .or::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.oauth { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .oauth { grid-template-columns: 1fr; } }
.oauth .btn {
  --h: 54px; position: relative; isolation: isolate; border-radius: 16px; font-size: 15px; font-weight: 650;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 8%, var(--bg)), color-mix(in srgb, var(--ink) 2%, var(--bg)));
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 10px 24px -16px rgba(0, 0, 0, .8);
}
.oauth .btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 40%, transparent), transparent 40%, color-mix(in srgb, var(--ink) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7;
}
@media (hover: hover) and (pointer: fine) { .oauth .btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 12%, var(--bg)), color-mix(in srgb, var(--ink) 4%, var(--bg))); } }
:root[data-theme="light"] .oauth .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 24px -18px rgba(16, 24, 40, .45); }
@media (prefers-reduced-motion: reduce) { .af .btn--solid.btn--lg::after { display: none; } }

/* ===== VO_FX boxes and buttons (owner 02.10.2026, approved prototype claude.ai/artifact/14kJHAEPuBSgX8WJTPG5Uf):
   site colours only — a silver light turns round the box being typed in (graphite, without the blurred halo, in the
   light theme), the site green for a right box, the site red for a wrong one; no orange (owner: "nu mai vreau
   portocaliu"). Drawn by VO_FX.fields() in vo.js; the input keeps its own node, name and data-field. */
@property --fx-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root { --fx-a1: rgba(245, 245, 247, .5); --fx-a2: #fff; --fx-halo: .34; --fx-glass: rgba(255, 255, 255, .04); --fx-glass-2: #111113; --fx-edge: rgba(255, 255, 255, .1); --fx-edge-2: rgba(255, 255, 255, .2); --fx-spot: rgba(255, 255, 255, .08); --fx-err: #ff375f; --fx-warn: #ff9f0a; --fx-spring: cubic-bezier(.2, 1.25, .35, 1); }
:root[data-theme="light"] { --fx-a1: rgba(16, 24, 40, .38); --fx-a2: #101828; --fx-halo: 0; --fx-glass: rgba(16, 24, 40, .03); --fx-glass-2: #fff; --fx-edge: #e4e7ec; --fx-edge-2: rgba(16, 24, 40, .2); --fx-spot: rgba(16, 24, 40, .05); --fx-err: #d92d20; --fx-warn: #f79009; }

.fx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.af .field.fx-field, .field.fx-field { display: grid; gap: 0; margin-bottom: 0; }
.field.fx-field::before, .field.fx-field::after { content: none !important; display: none !important; }
.fx { --mx: 50%; --my: 50%; position: relative; isolation: isolate; display: flex; align-items: center; height: 64px; border-radius: 20px; background: var(--fx-glass); border: 1px solid var(--fx-edge); cursor: text;
  transition: border-color .35s, background .35s, transform .5s var(--fx-spring); }
.fx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(200px circle at var(--mx) var(--my), var(--fx-spot), transparent 65%); }
.fx-ring, .fx-halo { position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
  background: conic-gradient(from var(--fx-ang), transparent 0deg, transparent 150deg, var(--fx-a1) 260deg, var(--fx-a2) 310deg, transparent 360deg); }
.fx-ring { inset: -1px; padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fx-halo { inset: -6px; border-radius: 26px; filter: blur(16px); z-index: -2; }
.fx:focus-within { background: var(--fx-glass-2); border-color: transparent; transform: translateY(-1px); }
.fx:focus-within .fx-ring { opacity: 1; animation: fx-spin 3.2s linear infinite; }
.fx:focus-within .fx-halo { opacity: var(--fx-halo); animation: fx-spin 3.2s linear infinite; }
@keyframes fx-spin { to { --fx-ang: 360deg; } }
@media (hover: hover) and (pointer: fine) { .fx:hover::before { opacity: 1; } .fx:hover:not(:focus-within) { border-color: var(--fx-edge-2); } }

.fx-icon { flex: none; width: 42px; height: 42px; margin-left: 11px; border-radius: 13px; display: grid; place-items: center; color: var(--muted); background: var(--fx-glass); border: 1px solid var(--fx-edge);
  transition: color .35s, background .35s, border-color .35s, transform .6s var(--fx-spring); }
.fx-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fx:focus-within .fx-icon { color: var(--ink); border-color: var(--fx-edge-2); transform: scale(1.06); }
.fx-icon .fx-flap, .fx-icon .fx-shackle, .fx-icon .fx-roof, .fx-icon .fx-ring-ph { transform-box: fill-box; transition: transform .55s var(--fx-spring); }
.fx-icon .fx-flap { transform-origin: top center; }
.fx:focus-within .fx-icon .fx-flap { transform: scaleY(-.55) translateY(-3px); }
.fx-icon .fx-shackle { transform-origin: bottom right; }
.fx:focus-within .fx-icon .fx-shackle { transform: translateY(-3px) rotate(14deg); }
.fx.is-ok .fx-icon .fx-shackle { transform: none; }
.fx:focus-within .fx-icon .fx-head { animation: fx-nod .8s var(--fx-spring); transform-box: fill-box; }
@keyframes fx-nod { 40% { transform: translateY(-2.5px); } }
.fx:focus-within .fx-icon .fx-roof { transform: translateY(-1.5px); }
.fx:focus-within .fx-icon .fx-ring-ph { animation: fx-wiggle .6s var(--fx-spring); transform-origin: center; }
@keyframes fx-wiggle { 25% { transform: rotate(-10deg); } 55% { transform: rotate(8deg); } }
.fx.is-ok .fx-icon { color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok-ink) 35%, transparent); background: color-mix(in srgb, var(--ok-ink) 10%, transparent); }

.fx .input, .af .fx .input, .af .tel.fx .input, .af .pw.fx .input { flex: 1; min-width: 0; height: 100%; padding: 22px 10px 6px 14px; border: 0; border-radius: 0; outline: 0; background: none; box-shadow: none; color: var(--ink); font: 500 17px var(--font); caret-color: var(--ink); }
.fx .input:focus, .af .field .fx .input:focus { box-shadow: none; border: 0; }
.fx--noicon .input, .af .fx--noicon .input { padding-left: 18px; }
.fx .input::placeholder { color: transparent; transition: color .25s; }
.fx .input:focus::placeholder { color: var(--faint); }
.fx .input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 99999s; }
.fx .input.is-locked { color: var(--muted); }
.fx-label { position: absolute; left: 68px; top: 50%; max-width: calc(100% - 130px); overflow: hidden; text-overflow: ellipsis; transform-origin: left center; transform: translateY(-50%); color: var(--muted); font: 500 16.5px var(--font); pointer-events: none; white-space: nowrap;
  transition: transform .5s var(--fx-spring), color .35s, letter-spacing .35s; }
.fx--noicon .fx-label { left: 18px; }
.fx:focus-within .fx-label, .fx.has-val .fx-label, .fx:has(.input:autofill) .fx-label { transform: translateY(calc(-50% - 13px)) scale(.72); letter-spacing: .04em; max-width: calc((100% - 130px) / .72); }
.fx:focus-within .fx-label { color: var(--ink); font-weight: 600; }

.fx-end { flex: none; min-width: 46px; height: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding-right: 8px; }
.fx-check { width: 24px; height: 24px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-check circle { stroke: var(--ok-ink); stroke-dasharray: 63; stroke-dashoffset: 63; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .5s var(--ease); }
.fx-check path { stroke: var(--ok-ink); stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .35s var(--ease) .3s; }
.fx.is-ok .fx-check circle, .fx.is-ok .fx-check path { stroke-dashoffset: 0; }
.fx.is-ok:not(:focus-within) { border-color: color-mix(in srgb, var(--ok-ink) 32%, transparent); }

.fx-spark { position: absolute; left: 0; bottom: 11px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--fx-a2); box-shadow: 0 0 10px 2px var(--fx-a1); opacity: 0; pointer-events: none; transform: translateX(var(--sx, 0)); }
.fx-spark.fx-go { animation: fx-spark .55s var(--ease); }
@keyframes fx-spark { 0% { opacity: 0; scale: .2; } 25% { opacity: 1; scale: 1.25; } 100% { opacity: 0; scale: .4; translate: 0 4px; } }

.fx.is-err { border-color: color-mix(in srgb, var(--fx-err) 60%, transparent); background: color-mix(in srgb, var(--fx-err) 6%, var(--fx-glass)); }
.fx.is-err .fx-icon { color: var(--fx-err); }
.fx.is-err:focus-within .fx-ring, .fx.is-err:focus-within .fx-halo { background: conic-gradient(from var(--fx-ang), transparent 0deg, transparent 150deg, color-mix(in srgb, var(--fx-err) 60%, transparent) 260deg, var(--fx-err) 310deg, transparent 360deg); }
.fx-shake { animation: fx-shake .5s var(--ease); }
@keyframes fx-shake { 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(2px); } }
.fx-msg { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.fx-msg > div { overflow: hidden; }
.fx-msg span { display: flex; align-items: center; gap: 7px; padding: 7px 4px 0 6px; color: var(--fx-err); font: 600 13px/1.35 var(--font); transform: translateY(-6px); opacity: 0; transition: transform .4s var(--fx-spring), opacity .3s; }
.fx-msg span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fx-msg.open { grid-template-rows: 1fr; }
.fx-msg.open span { transform: none; opacity: 1; }

/* Password eye: drawn, not the words "Arată / Ascunde". */
.fx .fx-eye, .af .pw.fx .fx-eye { position: static; transform: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s, scale .4s var(--fx-spring); }
.fx .fx-eye:active { scale: .9; }
@media (hover: hover) and (pointer: fine) { .fx .fx-eye:hover { background: var(--fx-glass-2); color: var(--ink); } }
.fx-eye svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-eye .fx-lid { transform-box: fill-box; transform-origin: center; }
.fx-eye .fx-slash { stroke-dasharray: 26; stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ease); }
.fx-eye[aria-pressed="true"] .fx-slash { stroke-dashoffset: 26; }
.fx-eye.fx-blink .fx-lid { animation: fx-lid .32s ease; }
@keyframes fx-lid { 50% { transform: scaleY(.1); } }

/* Phone box: "Trimite codul" / "Confirmat" sit at the end of the box instead of over the text. */
.af .tel.fx .tel__go { position: static; height: 44px; padding: 0 16px; border-radius: 14px; white-space: nowrap; }
.af .tel.fx .tel__ok { position: static; }

/* Buttons: a light that follows the pointer, a slow sheen, a ripple where pressed. */
.fx-btn { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; transition: transform .35s var(--fx-spring), box-shadow .35s, background .3s, border-color .3s; }
.fx-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(140px circle at var(--mx) var(--my), color-mix(in srgb, var(--bg) 22%, transparent), transparent 70%); }
.oauth .fx-btn::before { background: radial-gradient(140px circle at var(--mx) var(--my), var(--fx-spot), transparent 70%); }
.btn--solid.fx-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--bg) 30%, transparent), transparent); animation: fx-shine 4.5s var(--ease) infinite 1.2s; transform: none; transition: none; }
@keyframes fx-shine { 0% { left: -60%; } 28%, 100% { left: 130%; } }
@media (hover: hover) and (pointer: fine) { .fx-btn:hover::before { opacity: 1; } .fx-btn:hover { transform: translateY(-1px); } .oauth .fx-btn:hover svg { transform: scale(1.12) rotate(-6deg); } }
.oauth .fx-btn svg { transition: transform .5s var(--fx-spring); }
.fx-btn:active { transform: scale(.975); }
.fx-btn:disabled::after { animation: none; opacity: 0; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0); animation: fx-ripple .7s var(--ease) forwards; z-index: -1; }
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }

/* Password strength: four bars and the rules that tick themselves. */
.fx-meter { display: grid; gap: 10px; padding: 2px 4px 0; }
.fx-meter__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fx-meter__bars i { position: relative; height: 5px; border-radius: 99px; background: var(--fx-glass); border: 1px solid var(--fx-edge); overflow: hidden; }
.fx-meter__bars i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: left; background: var(--c, var(--ink)); transition: transform .55s var(--fx-spring), background .4s; }
.fx-meter__bars i.on::after { transform: scaleX(1); }
.fx-meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 12.5px var(--font); color: var(--muted); }
.fx-meter__row b { color: var(--c, var(--muted)); transition: color .4s; }
.fx-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-rules span { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--fx-edge); color: var(--muted); font: 600 12px var(--font); transition: color .3s, border-color .3s, background .3s, transform .45s var(--fx-spring); }
.fx-rules svg { flex: none; width: 0; height: 12px; margin-right: 0; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: width .35s var(--fx-spring), margin-right .35s var(--fx-spring); }
.fx-rules svg path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .35s var(--ease); }
.fx-rules span.on { color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok-ink) 40%, transparent); background: color-mix(in srgb, var(--ok-ink) 9%, transparent); transform: translateY(-1px); }
.fx-rules span.on svg { width: 12px; margin-right: 6px; }
.fx-rules span.on svg path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .fx, .fx *, .fx-btn, .fx-btn::after { animation: none !important; transition-duration: .01ms !important; }
  .fx:focus-within .fx-ring { opacity: 1; }
}

/* Google / Apple in the site's store-badge style (owner 02.10.2026: "astea sunt modelele faine ... le adaptezi"). */
.oauth .store { justify-content: center; height: 60px; padding: 0 16px 0 12px; border: 0; cursor: pointer; font-family: var(--font); text-align: left; }
.oauth .store svg { width: 26px; height: 26px; }
.oauth .store:disabled { opacity: .6; cursor: default; }
@media (max-width: 420px) { .oauth { grid-template-columns: 1fr 1fr; } .oauth .store { padding: 0 10px; gap: 9px; } .oauth .store strong { font-size: 17px; } .oauth .store svg { width: 22px; height: 22px; } }
@media (max-width: 340px) { .oauth { grid-template-columns: 1fr; } }
/* Two boxes side by side were too narrow for an icon plus a floating label: one per row. */
.af .two:has(.fx) { grid-template-columns: 1fr; }

/* Account type: the chosen side is a solid pill (white on black, black on white), like the prototype's segments. */
.af .acct { border-radius: 18px; }
.af .acct__pill { border-radius: 14px; background: var(--ink); border: 0; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6); transition: transform .6s cubic-bezier(.2, 1.25, .35, 1), width .6s cubic-bezier(.2, 1.25, .35, 1); }
.af .acct button { border-radius: 14px; transition: color .35s; }
.af .acct button[aria-checked="true"] { color: var(--bg); }
.af .acct button[aria-checked="true"] small { color: color-mix(in srgb, var(--bg) 70%, transparent); }

/* Account type, v2 (owner 02.10.2026, screenshot of the two halves: "aș vrea și astea să fie mai cum trebuie"): each side
   carries its icon in a glass chip like the boxes, title and line read left-aligned, the white pill glides with a little
   drop-like stretch, the chosen icon turns dark and tilts. */
.af .acct { padding: 5px; border-radius: 22px; background: var(--fx-glass); border: 1px solid var(--fx-edge); }
.af .acct__pill { top: 5px; bottom: 5px; left: 5px; border-radius: 17px; background: var(--ink); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7), inset 0 1px 0 color-mix(in srgb, var(--bg) 20%, transparent); transform-origin: center; }
.af .acct__pill.is-going { animation: acct-drop .6s cubic-bezier(.2, 1.25, .35, 1); }
@keyframes acct-drop { 35% { scale: 1.08 .9; } 70% { scale: .98 1.02; } }
.af .acct button { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 62px; padding: 10px 14px; border-radius: 17px; text-align: left; color: var(--muted); }
.af .acct button > span { display: grid; gap: 2px; min-width: 0; }
.af .acct button b { font: 700 15px/1.2 var(--font); color: inherit; }
.af .acct button small { font: 500 12px/1.3 var(--font); color: inherit; opacity: .8; }
.acct__ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--fx-glass); border: 1px solid var(--fx-edge); color: var(--muted);
  transition: background .35s, border-color .35s, color .35s, transform .6s cubic-bezier(.2, 1.25, .35, 1); }
.acct__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.af .acct button[aria-checked="true"] { color: var(--bg); }
.af .acct button[aria-checked="true"] .acct__ic { background: color-mix(in srgb, var(--bg) 10%, transparent); border-color: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); transform: scale(1.06) rotate(-6deg); }
@media (hover: hover) and (pointer: fine) { .af .acct button[aria-checked="false"]:hover { color: var(--ink); } .af .acct button[aria-checked="false"]:hover .acct__ic { border-color: var(--fx-edge-2); color: var(--ink); } }
@media (max-width: 420px) {
  .af .acct button { gap: 9px; padding: 9px 10px; min-height: 64px; }
  .acct__ic { width: 32px; height: 32px; border-radius: 10px; }
  .acct__ic svg { width: 17px; height: 17px; }
  .af .acct button b { font-size: 14px; }
  .af .acct button small { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .af .acct__pill.is-going { animation: none; } }
/* Account type tiles: icon on top, title and line centred under it (side by side there was no room: the line broke in two). */
.af .acct button { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; min-height: 0; padding: 14px 8px 12px; }
.af .acct button > span { justify-items: center; }
.af .acct button small { white-space: nowrap; }
@media (max-width: 420px) { .af .acct button { gap: 7px; padding: 12px 6px 11px; min-height: 0; } .af .acct button small { white-space: normal; } }

/* Account type v3 (owner 02.10.2026 on the tiles: "arată urât așa mare și pătrat, și scrisul e urât"): back to the slim
   capsule of the approved prototype — one row, a small icon beside the word, a white capsule that glides, the line that
   explains the choice sits under the switch and swaps with a small rise. */
.af .acct { padding: 4px; border-radius: 999px; }
.af .acct__pill { top: 4px; bottom: 4px; left: 4px; border-radius: 999px; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .6); }
.af .acct button { flex-direction: row; justify-content: center; align-items: center; gap: 8px; min-height: 0; height: 44px; padding: 0 12px; border-radius: 999px; text-align: center; }
.af .acct button > span { display: block; }
.af .acct button small { display: none; }
.af .acct button b { font: 600 14.5px/1 var(--font); letter-spacing: -.005em; white-space: nowrap; }
.acct__ic, .af .acct button[aria-checked="true"] .acct__ic { width: auto; height: auto; border: 0; border-radius: 0; background: none; }
.acct__ic svg { width: 17px; height: 17px; }
.af .acct button[aria-checked="true"] .acct__ic { transform: scale(1.1) rotate(-6deg); }
@media (hover: hover) and (pointer: fine) { .af .acct button[aria-checked="false"]:hover .acct__ic { border: 0; } }
@media (max-width: 420px) { .af .acct button { gap: 7px; height: 42px; padding: 0 8px; min-height: 0; } .af .acct button b { font-size: 14px; } .acct__ic svg { width: 16px; height: 16px; } }
.acct__hint { margin: -4px 0 0; padding: 0 14px; color: var(--muted); font: 500 12.5px/1.3 var(--font); text-align: center; }
.acct__hint.is-in { animation: acct-hint .45s cubic-bezier(.2, 1.25, .35, 1); }
@keyframes acct-hint { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) { .acct__hint.is-in { animation: none; } }

/* A box whose input the page marks wrong (.is-err) shows it on the box itself. */
.fx:has(.input.is-err) { border-color: color-mix(in srgb, var(--fx-err) 60%, transparent); background: color-mix(in srgb, var(--fx-err) 6%, var(--fx-glass)); }
/* Read-only boxes (confirmed phone, locked e-mail) stay quiet: no turning light. */
.fx:has(.input[readonly]):focus-within .fx-ring, .fx:has(.input[readonly]):focus-within .fx-halo { opacity: 0; animation: none; }