/* Login + register (2026-10-28): split screen in the site theme. Form on the left, dark brand panel with real card
   faces on the right (wide screens only). Needs site.css (tokens, buttons) and cardface.css. Scoped under .site-auth. */

.site-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; }
@media (min-width: 1024px) { .site-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); } }
.site-auth [hidden] { display: none !important; }

/* left: form column */
.site-auth__main {
    display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 18px var(--gutter) 18px;
    background: radial-gradient(80% 45% at 0% 0%, #FFF5EA 0%, rgba(255, 255, 255, 0) 62%), #fff;
}
@media (min-width: 768px) { .site-auth__main { padding: 26px clamp(28px, 4vw, 56px) 22px; } }
.site-auth__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-auth__back { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px 8px 12px; border: var(--border); border-radius: var(--r-pill); background: rgba(255, 255, 255, .8); color: var(--c-text-2) !important; font-size: 13.5px; font-weight: 500; text-decoration: none; backdrop-filter: blur(6px); }
.site-auth__back:hover { border-color: var(--c-border-strong); color: var(--c-text) !important; }
.site-auth__back .site-ico { width: 16px; height: 16px; transition: transform .15s var(--ease); }
.site-auth__back:hover .site-ico { transform: translateX(-2px); }
@media (max-width: 400px) { .site-auth__back span { display: none; } .site-auth__back { padding: 8px 12px; } }

.site-auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(30px, 6vh, 64px) 0; }
.site-auth__form { width: 100%; max-width: 420px; animation: site-auth-in .5s var(--ease) both; }
@keyframes site-auth-in { from { opacity: 0; transform: translateY(10px); } }

.site-auth__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-text); font-size: 12.5px; font-weight: 500; line-height: 1.6; }
.site-auth__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(247, 147, 31, .22); }
.site .site-auth__title { margin: 14px 0 6px; font-size: clamp(26px, 1.35rem + 1vw, 32px); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; }
.site-auth__lead { margin: 0 0 26px; color: var(--c-muted); font-size: 15px; }
.site-auth__lead .site-link { gap: 4px; }

.site-auth__fields { display: grid; gap: 16px; margin: 0; }
.site-auth__pair { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 379px) { .site-auth__pair { grid-template-columns: 1fr; } }

/* fields */
.site-field { display: grid; gap: 7px; min-width: 0; }
.site-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.site-field__label { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--c-text-2); }
.site-field__aside { font-size: 13px; font-weight: 500; color: var(--accent-text) !important; text-decoration: none; }
.site-field__aside:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-field__box { position: relative; display: flex; align-items: center; }
.site-field__box > .site-ico { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--c-faint); pointer-events: none; transition: color .15s var(--ease); }
.site-field__box input {
    width: 100%; min-height: 52px; margin: 0; padding: 12px 16px 12px 44px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    background: #fff; font: 400 15.5px var(--font); color: var(--c-text); outline: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.site-field__box--plain input { padding-left: 16px; }
.site-field__box:has(.site-field__eye) input { padding-right: 52px; }
.site-field__box input::placeholder { color: var(--c-faint); opacity: 1; }
.site-field__box input:hover { border-color: #bdbdbd; }
.site-field__box input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 147, 31, .16); }
.site-field__box:focus-within > .site-ico { color: var(--accent-text); }
.site-field__box input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--c-text); }
.site-field__box input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 4px rgba(247, 147, 31, .16); }
.site-field__box input[type=password] { letter-spacing: .06em; }
.site-field__box input[type=password]::placeholder { letter-spacing: .1em; }

/* show / hide password (a slash appears while the password is visible) */
.site-field__eye { position: absolute; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--c-muted); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.site-field__eye:hover { background: var(--c-surface-alt); color: var(--c-text); }
.site-field__eye .site-ico { width: 19px; height: 19px; }
.site-field__eye::after { content: ""; position: absolute; width: 21px; height: 1.8px; border-radius: 2px; background: currentColor; transform: rotate(-45deg) scaleX(0); transition: transform .18s var(--ease); }
.site-field__eye[aria-pressed=true] { color: var(--accent-text); }
.site-field__eye[aria-pressed=true]::after { transform: rotate(-45deg) scaleX(1); }

.site-field__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #B45309; }
.site-field__note .site-ico { width: 15px; height: 15px; }

/* live password rules + confirm match */
.site-rules { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.site-rules li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border: var(--border); border-radius: var(--r-pill); background: var(--c-surface-alt); font-size: 12px; line-height: 1.5; color: var(--c-muted); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.site-rules .site-ico { width: 13px; height: 13px; stroke-width: 2.6; opacity: .4; transition: opacity .2s var(--ease); }
.site-rules li.is-ok { border-color: #c8ead2; background: var(--ok-tint); color: var(--ok); }
.site-rules li.is-ok .site-ico { opacity: 1; }
.site-field__match { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--c-muted); }
.site-field__match .site-ico { width: 15px; height: 15px; stroke-width: 2.4; opacity: .4; }
.site-field__match.is-ok { color: var(--ok); }
.site-field__match.is-ok .site-ico { opacity: 1; }

/* checkbox */
.site-check { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-text-2); cursor: pointer; }
.site-check input { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.site-check__box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--c-border-strong); border-radius: 6px; background: #fff; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.site-check__box svg { width: 14px; height: 14px; fill: none; stroke: #111; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .22s var(--ease); }
.site-check:hover .site-check__box { border-color: var(--c-text-3); }
.site-check input:checked + .site-check__box { background: var(--accent); border-color: var(--accent); }
.site-check input:checked + .site-check__box svg { stroke-dashoffset: 0; }
.site-check input:focus-visible + .site-check__box { outline: 3px solid var(--accent); outline-offset: 2px; }
.site-check a { color: var(--accent-text) !important; font-weight: 500; text-decoration: none; }
.site-check a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* submit with a loading state */
.site-auth__submit { position: relative; min-height: 54px; margin-top: 4px; }
.site-auth__submit .site-ico { transition: transform .15s var(--ease); }
.site-auth__submit:hover .site-ico { transform: translateX(3px); }
.site-auth__submit.is-loading { pointer-events: none; color: transparent !important; }
.site-auth__submit.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(0, 0, 0, .22); border-top-color: #111; border-radius: 50%; animation: site-auth-spin .7s linear infinite; }
@keyframes site-auth-spin { to { transform: rotate(360deg); } }

.site-auth__or { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; font-size: 13px; color: var(--c-muted); }
.site-auth__or::before, .site-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.site-auth__or--top { margin: 22px 0 20px; }

/* social sign-in (Google): white button with the four-colour G, as Google's brand rules ask */
.site-social { display: grid; gap: 10px; }
.site-social__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 10px 20px; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); background: #fff; color: var(--c-text) !important; font: 500 15px/1.2 var(--font); letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease); }
.site-social__btn:hover { border-color: var(--c-text-3); background: var(--c-surface-alt); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .3); }
.site-social__btn:active { transform: translateY(1px); }
.site-social__logo { display: inline-flex; width: 20px; height: 20px; flex: none; }
.site-social__logo svg { width: 100%; height: 100%; display: block; }
.site-social__spin { display: none; position: absolute; right: 18px; width: 18px; height: 18px; border: 2px solid var(--c-border-strong); border-top-color: var(--c-text); border-radius: 50%; animation: site-auth-spin .7s linear infinite; }
.site-social__btn.is-loading { pointer-events: none; background: var(--c-surface-alt); }
.site-social__btn.is-loading .site-social__spin { display: block; }
.site-social__note { margin: 10px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); }
.site-auth__secure { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; padding: 12px 14px; border: var(--border); border-radius: var(--r-md); background: var(--c-surface-alt); font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.site-auth__secure .site-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--ok); }

.site .site-auth__foot { margin: 0; background: transparent !important; color: var(--c-faint); }
.site-auth__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding-top: 18px; border-top: var(--border); font-size: 13px; color: var(--c-faint); }
.site-auth__foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-auth__foot a { color: var(--c-muted) !important; text-decoration: none; }
.site-auth__foot a:hover { color: var(--c-text) !important; }

/* right: brand panel */
.site-auth__show { display: none; }
@media (min-width: 1024px) {
    .site-auth__show { display: block; position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 14px 14px 14px 0; }
}
.site-auth__show-inner {
    position: relative; isolation: isolate; overflow: hidden; height: 100%; display: flex; flex-direction: column;
    padding: clamp(30px, 5vh, 56px) clamp(32px, 3.6vw, 56px); border-radius: 28px; color: #fff;
    background:
        radial-gradient(60% 46% at 88% 6%, rgba(247, 147, 31, .36) 0%, transparent 70%),
        radial-gradient(55% 40% at 8% 100%, rgba(242, 96, 12, .2) 0%, transparent 70%),
        linear-gradient(160deg, #171717 0%, #0d0d0d 55%, #0b0b0b 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.site-auth__show-inner::before {
    content: ""; position: absolute; z-index: -1; width: 540px; height: 540px; right: -170px; top: 30%; border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 162, 58, .2), transparent 65%); animation: site-auth-glow 14s ease-in-out infinite alternate;
}
@keyframes site-auth-glow { to { transform: translate(-70px, 40px) scale(1.12); } }
.site-auth__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .86); }
.site-auth__pill i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
.site .site-auth__show-title { margin: 20px 0 10px; max-width: 470px; font-size: clamp(28px, 1.1rem + 1.4vw, 38px); font-weight: 600; line-height: 1.14; letter-spacing: -0.03em; color: #fff; }
.site-auth__show-lead { margin: 0; max-width: 440px; font-size: 15px; color: rgba(255, 255, 255, .64); }

/* fanned stack of three real card faces, floating gently; spreads a little on hover */
.site-auth__stack { position: relative; flex: 1; min-height: 230px; margin: 14px 0 18px; }
.site-auth__stack-card { position: absolute; left: 50%; top: 50%; width: min(330px, 64%); transition: transform .6s cubic-bezier(.2, .8, .2, 1); animation: site-auth-float 7s ease-in-out infinite; }
.site-auth__stack-card--1 { transform: translate(-80%, -64%) rotate(-12deg); animation-delay: -2.4s; }
.site-auth__stack-card--2 { transform: translate(-50%, -52%) rotate(-3deg); animation-delay: -4.8s; }
.site-auth__stack-card--3 { transform: translate(-22%, -34%) rotate(7deg); }
.site-auth__stack:hover .site-auth__stack-card--1 { transform: translate(-88%, -70%) rotate(-15deg); }
.site-auth__stack:hover .site-auth__stack-card--3 { transform: translate(-14%, -28%) rotate(10deg); }
.site-auth__stack .cface { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 54px -22px rgba(0, 0, 0, .85); }
.site-auth__stack-card--1 .cface { filter: brightness(.82); }
@keyframes site-auth-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.site-auth__points { list-style: none; margin: 0; padding: 20px 52px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.site-auth__points li { display: grid; align-content: start; gap: 10px; }
.site-auth__points .site-ico { width: 36px; height: 36px; padding: 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px; background: rgba(255, 255, 255, .06); color: #F9A23A; }
.site-auth__points span { display: grid; gap: 2px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .58); }
.site-auth__points strong { font-size: 14px; font-weight: 600; color: #fff; }

/* "already registered" modal (register page) */
.site-auth-modal .modal-content { border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-pop); font-family: var(--font); }
.site-auth-modal .modal-body { padding: 30px 28px 6px; text-align: center; }
.site-auth-modal__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; background: var(--accent-tint); color: var(--accent-text); }
.site-auth-modal__icon .site-ico { width: 24px; height: 24px; }
.site .site-auth-modal .modal-title { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.site-auth-modal p { margin: 0; color: var(--c-muted); }
.site-auth-modal .modal-footer { justify-content: center; gap: 10px; padding: 18px 28px 26px; border: 0; }
.site-auth-modal .modal-footer > * { margin: 0; }

/* only the live-chat button floats here (same as the dashboard): the form stays clear; WhatsApp and Telegram
   are one tap away on every other page */
body:has(.site-auth) .support-float__btn--wa, body:has(.site-auth) .support-float__btn--tg { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .site-auth__form, .site-auth__stack-card, .site-auth__show-inner::before { animation: none; }
    .site-auth__stack-card { transition: none; }
}

/* recovery + verification pages (forgot password, code, reset, 2FA, email / SMS verify) */
.site-auth__badge { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border: 1px solid #fde0bd; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, var(--accent-tint) 100%); color: var(--accent-text); box-shadow: 0 10px 24px -14px rgba(242, 96, 12, .55), inset 0 1px 0 #fff; }
.site-auth__badge .site-ico { width: 26px; height: 26px; }
.site-auth__badge--ok { border-color: #c8ead2; background: linear-gradient(180deg, #fff 0%, var(--ok-tint) 100%); color: var(--ok); box-shadow: 0 10px 24px -14px rgba(21, 128, 61, .5), inset 0 1px 0 #fff; }
.site-auth__badge + .site-auth__eyebrow { margin-top: 0; }
.site-auth__to { color: var(--c-text); font-weight: 600; word-break: break-all; }
.site-auth__return { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--c-muted) !important; text-decoration: none; }
.site-auth__return .site-ico { width: 17px; height: 17px; transition: transform .15s var(--ease); }
.site-auth__return:hover { color: var(--c-text) !important; }
.site-auth__return:hover .site-ico { transform: translateX(-2px); }
.site-auth__secure a, .site-auth__resend a { color: var(--accent-text) !important; font-weight: 500; text-decoration: none; }
.site-auth__secure a:hover, .site-auth__resend a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-auth__resend { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 12px 14px; border: var(--border); border-radius: var(--r-md); background: var(--c-surface-alt); font-size: 13.5px; line-height: 1.5; color: var(--c-muted); }
.site-auth__resend .site-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }
.site-auth__resend p { margin: 0; }
.site-auth__resend #countdown { color: var(--c-text); font-variant-numeric: tabular-nums; }

/* 6-digit code: one transparent input over six boxes */
.site-code { position: relative; }
.site-code__boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.site-code__boxes span { display: grid; place-items: center; height: 62px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); font: 600 25px/1 var(--font); color: var(--c-text); font-variant-numeric: tabular-nums; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.site-code__boxes span.is-filled { border-color: var(--c-text-3); animation: site-code-pop .18s var(--ease); }
.site-code__boxes span.is-active { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 147, 31, .16); }
.site-code__boxes span.is-active:empty::after { content: ""; width: 2px; height: 26px; border-radius: 2px; background: var(--accent); animation: site-code-blink 1s steps(1) infinite; }
@keyframes site-code-blink { 50% { opacity: 0; } }
@keyframes site-code-pop { 50% { transform: scale(1.06); } }
.site-code input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; outline: 0; cursor: text; }
.site .site-code input:focus-visible { outline: 0; }
.site-code input::selection { background: transparent; color: transparent; }
@media (max-width: 379px) { .site-code__boxes { gap: 6px; } .site-code__boxes span { height: 54px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .site-code__boxes span.is-filled { animation: none; } }

/* form-only pages ($authSolo, e.g. the profile step): no brand panel, logo on top, the form in a card in the middle */
.site-auth--solo { grid-template-columns: minmax(0, 1fr) !important; }
.site-auth--solo .site-auth__main { background: radial-gradient(60% 40% at 50% 0%, #FFF1E0 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #fff 0%, #FAFAFA 100%); }
.site-auth--solo .site-auth__top { justify-content: center; }
.site-auth--solo .site-auth__main { padding-bottom: 18px; }
.site-auth--solo .site-auth__body { align-items: center; padding: clamp(14px, 2.5vh, 32px) 0; }
.site-auth--solo .site-auth__form { max-width: 480px; }
.site-auth--solo .site-auth__fields { gap: 14px; }
.site-auth--solo .site-auth__lead { margin-bottom: 18px; }
.site-auth--solo .site-onb-who { margin-bottom: 18px; }
@media (min-width: 560px) {
    .site-auth--solo .site-auth__form { padding: 28px 32px 26px; border: var(--border); border-radius: 26px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 48px -32px rgba(0, 0, 0, .28); }
}
.site-auth--solo .site-steps { justify-content: center; }
.site-auth--solo .site-auth__badge { margin-inline: auto; }
.site-auth--solo .site-auth__form > .site-auth__eyebrow { display: flex; width: fit-content; margin-inline: auto; }
.site-auth--solo .site-auth__return { display: flex; width: fit-content; margin-inline: auto; }
.site-auth--solo .site-auth__to { display: inline-block; max-width: 100%; word-break: normal; overflow-wrap: anywhere; }
.site-auth--solo .site-auth__title, .site-auth--solo .site-auth__lead { text-align: center; }
.site-auth--solo .site-auth__secure { margin-bottom: 0; }

/* profile step after sign-up (user/user_data, 2026-10-28): progress, who-is-signed-in card, live-checked fields */
.site-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--c-muted); }
.site-steps li { display: inline-flex; align-items: center; gap: 7px; }
.site-steps li + li::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ok) 0%, var(--accent) 100%); margin-right: 3px; }
.site-steps .site-ico, .site-steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11.5px; font-weight: 600; line-height: 1; }
.site-steps .site-ico { padding: 4px; background: var(--ok-tint); color: var(--ok); stroke-width: 2.6; }
.site-steps .is-done { color: var(--ok); }
.site-steps .is-current { color: var(--c-text); }
.site-steps .is-current b { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px rgba(247, 147, 31, .18); }

.site-onb-who { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 14px; border: var(--border); border-radius: var(--r-lg); background: linear-gradient(180deg, #fff 0%, var(--c-surface-alt) 100%); }
.site-onb-who__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gradient); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 6px 14px -8px rgba(242, 96, 12, .8); }
.site-onb-who__text { display: grid; min-width: 0; flex: 1; }
.site-onb-who__text strong { font-size: 14.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-onb-who__text small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-onb-who__g { width: 13px; height: 13px; flex: none; }
.site-onb-who__out { flex: none; font-size: 12.5px; font-weight: 500; color: var(--c-muted) !important; text-decoration: none; padding: 6px 2px; }
.site-onb-who__out:hover { color: var(--c-text) !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 419px) { .site-onb-who { flex-wrap: wrap; row-gap: 2px; } .site-onb-who__out { flex-basis: 100%; margin-left: 52px; padding: 0; } }

.site-field__count { font-size: 12px; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.site-field__help { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); transition: color .15s var(--ease); }
.site-field__help.is-ok { color: var(--ok); }
.site-field__help.is-bad { color: #B42318; }

/* live check inside the box: spinner while checking, tick when free, cross when taken */
.site-field__box--state input { padding-right: 46px; }
.site-field__state { position: absolute; right: 14px; display: grid; place-items: center; width: 20px; height: 20px; pointer-events: none; }
.site-field__state > * { grid-area: 1 / 1; opacity: 0; transform: scale(.6); transition: opacity .15s var(--ease), transform .2s var(--ease); }
.site-field__state .site-ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; stroke-width: 2.6; }
.site-field__state .site-ico:first-of-type { background: var(--ok-tint); color: var(--ok); }
.site-field__state .site-ico:last-of-type { background: #FEECEB; color: #B42318; }
.site-field__state .is-spin { width: 16px; height: 16px; border: 2px solid var(--c-border-strong); border-top-color: var(--accent); border-radius: 50%; animation: site-auth-spin .7s linear infinite; }
.is-checking > .site-field__state .is-spin, .is-ok > .site-field__state .site-ico:first-of-type, .is-bad > .site-field__state .site-ico:last-of-type { opacity: 1; transform: none; }
.site-field__box.is-ok input { border-color: #9ed5b0; }
.site-field__box.is-bad input { border-color: #F3A59D; background: #FFFBFA; }
.site-field__box.is-bad input:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, .12); }

/* one-tap username ideas */
.site-onb-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-muted); }
.site-onb-ideas > span { margin-right: 2px; }
.site-onb-ideas__chip { padding: 4px 11px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-pill); background: #fff; font: 500 12.5px/1.5 var(--font); color: var(--c-text-2); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease); }
.site-onb-ideas__chip:hover, .site-onb-ideas__chip.is-picked { border-style: solid; border-color: var(--accent); background: var(--accent-tint); color: var(--accent-text); }

/* native country select styled like the inputs (keeps the phone picker and type-to-jump) */
.site-field__box select {
    width: 100%; min-height: 52px; margin: 0; padding: 12px 44px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
    background: #fff; font: 400 15.5px var(--font); color: var(--c-text); outline: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.site-field__box select:hover { border-color: #bdbdbd; }
.site-field__box select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(247, 147, 31, .16); }
.site-field__box--select > .site-ico:last-child { left: auto; right: 15px; color: var(--c-muted); }
.site-field__box select.is-empty { color: var(--c-faint); }
.site-field__box select option { color: var(--c-text); }

/* dial code in front of the phone number */
.site-field__dial { position: absolute; left: 8px; display: grid; place-items: center; min-width: 52px; height: 36px; padding: 0 9px; border: var(--border); border-radius: 9px; background: var(--c-surface-alt); font-size: 14px; font-weight: 500; color: var(--c-text-2); font-variant-numeric: tabular-nums; pointer-events: none; }
.site-field__box--dial input { padding-left: 74px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* optional address, folded away */
.site-onb-more { border: var(--border); border-radius: var(--r-lg); background: #fff; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.site-onb-more[open] { border-color: var(--c-border-strong); box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .35); }
.site-onb-more summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--c-text-2); border-radius: inherit; }
.site-onb-more summary::-webkit-details-marker { display: none; }
.site-onb-more summary:hover { color: var(--c-text); }
.site-onb-more summary .site-ico { width: 18px; height: 18px; color: var(--c-faint); }
.site-onb-more summary em { margin-left: auto; padding: 1px 9px; border-radius: var(--r-pill); background: var(--c-surface-alt); font-size: 11.5px; font-style: normal; color: var(--c-muted); }
.site-onb-more summary .site-ico:last-child { transition: transform .2s var(--ease); }
.site-onb-more[open] summary .site-ico:last-child { transform: rotate(180deg); }
.site-onb-more__body { display: grid; gap: 14px; padding: 2px 16px 16px; }
@media (min-width: 380px) { .site-field--half { max-width: calc(50% - 8px); } }

.site-field.is-shake { animation: site-onb-shake .38s var(--ease); }
@keyframes site-onb-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .site-field.is-shake { animation: none; } .site-field__state > *, .site-onb-more summary .site-ico:last-child { transition: none; } }