/* v5-login.css — ЄДИНИЙ вхід (мок 39-login-unified-v5), 1:1 зі затвердженого.
Один екран для всіх ролей: телефон+SMS головний, email/пароль — «інший
спосіб» під згорткою. Split-layout довіри (Trainline/SNCF) + Liquid Glass
(ui-ux-pro-max): скляна панель, gold-світіння, багатошарові тіні, морфи 420ms.
Чистий шар: premium/funnel/authentication сюди НЕ підключаються. */
.r2026{
--at-page:#EEF1F7; --at-card:#FFFFFF;
--ink:#0F1729; --txt2:#39435A; --muted:#667088;
--line:#E4E9F1; --line2:#C9D4EC;
--blue:#2F59B0; --blue-dk:#24478E; --amber:#FFB800; --amber-hi:#FFC933; --amber-ink:#231700;
--navy1:#16234A; --navy2:#0B1226;
--at-fh:'Manrope',system-ui,sans-serif; --at-fb:'Source Sans 3',system-ui,sans-serif;
--e:cubic-bezier(.22,1,.36,1);
--sh3:0 30px 60px -24px rgba(10,16,36,.4);
container-type:inline-size; container-name:root;
min-height:100vh; background:var(--at-page); color:var(--ink);
font:400 16px/1.6 var(--at-fb); margin:0 auto; overflow-x:clip;
-webkit-tap-highlight-color:transparent;
}
.r2026 *,.r2026 *::before,.r2026 *::after{box-sizing:border-box}
.r2026 [hidden]{display:none !important}
.r2026 h1,.r2026 h2,.r2026 h3{font-family:var(--at-fh);letter-spacing:-.02em}
.r2026 a{text-decoration:none;color:inherit}
.r2026 svg{display:block}
.r2026 button{font:inherit;color:inherit;cursor:pointer}
.r2026 :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px;width:100%}
@container root (max-width:900px){.wrap{padding:0 20px}}
/* hero */
.lhero{color:#fff;padding:34px 0 84px;
background:radial-gradient(560px 220px at 8% -40%,#FFB80014,transparent 70%),
radial-gradient(720px 300px at 92% 130%,#2F59B026,transparent 70%),
linear-gradient(180deg,#0A1024,#101A38)}
.lhero .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;
font-family:var(--at-fh);font-weight:800;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:#FFD35A}
.lhero .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--amber)}
.lhero h1{margin:0;font-size:clamp(24px,3.4vw,36px);font-weight:800}
/* ── SPLIT-CARD ── */
.auth{max-width:1000px;margin:-56px auto 56px;position:relative;z-index:2;
display:grid;grid-template-columns:1.02fr .98fr;background:#fff;border:1px solid var(--line);
border-radius:24px;overflow:hidden;box-shadow:var(--sh3);min-height:560px}
@container root (max-width:900px){.auth{grid-template-columns:1fr;min-height:0;margin:-40px 0 40px}}
/* ліворуч: довіра (скло + gold-світіння) */
.aside{position:relative;overflow:hidden;color:#fff;padding:46px 44px;
background:linear-gradient(158deg,var(--navy1),var(--navy2) 78%);display:flex;align-items:center}
.aside::before{content:'';position:absolute;right:-80px;bottom:-130px;width:320px;height:320px;
border-radius:50%;background:radial-gradient(circle,rgba(255,184,0,.18),transparent 65%)}
.aside::after{content:'';position:absolute;left:-80px;top:-120px;width:320px;height:320px;
border-radius:50%;background:radial-gradient(circle,rgba(59,111,217,.34),transparent 65%)}
.aside__in{position:relative;z-index:1;width:100%}
.aside h3{margin:0 0 10px;font-size:29px;font-weight:800;line-height:1.2}
.aside p{margin:0 0 26px;font-size:16px;color:rgba(255,255,255,.8);max-width:34ch}
.aside ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:14px}
.aside li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:rgba(255,255,255,.92)}
.aside li svg{flex:0 0 20px;margin-top:1px;color:var(--amber);stroke-width:2.4}
.aside__agent{font-size:13px;color:rgba(255,255,255,.6);margin:0;line-height:1.55}
@container root (max-width:900px){.aside{padding:30px 24px}.aside li:nth-child(n+3){display:none}}
/* праворуч: єдина форма */
.main{display:flex;align-items:center;padding:46px 48px;background:#fff}
@container root (max-width:900px){.main{padding:28px 22px}}
.card{width:100%;max-width:420px;margin:0 auto}
.card h2{margin:0 0 6px;font-size:26px;font-weight:800}
.card__lead{margin:0 0 22px;font-size:16px;color:var(--txt2)}
.field{margin-bottom:16px}
.field__l{display:block;font-family:var(--at-fh);font-size:14px;font-weight:600;margin-bottom:7px}
.field__wrap{display:flex;align-items:center;background:#fff;border:1.5px solid var(--line2);
border-radius:12px;transition:border-color .2s,box-shadow .2s}
.field__wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,111,217,.28)}
.field__cc{border-right:1px solid var(--line);font-family:var(--at-fh);font-size:15px;font-weight:600;
color:var(--ink);padding:0 14px;min-height:54px;display:inline-flex;align-items:center;flex:0 0 auto}
.field__in{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;padding:15px 14px;
min-height:54px;font-family:var(--at-fh);font-size:17px;font-weight:600;color:var(--ink);
font-variant-numeric:tabular-nums}
.field__in::placeholder{color:#8A93A8;font-weight:400}
.field__in--code{letter-spacing:.42em;text-align:center;font-size:22px}
.field__help{margin:8px 0 0;font-size:13.5px;color:var(--txt2)}
.lg-err{margin:8px 0 0;font-size:13.5px;font-weight:600;color:#A2453C}
.lg-err b{font-weight:800}
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;
font-size:13px;line-height:1.5;color:var(--txt2)}
.consent input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--blue);
border-radius:5px;transition:box-shadow .2s}
.consent a{color:var(--blue-dk);text-decoration:underline}
/* без згоди далі не пустить: підсвічуємо чекбокс амбером + підказка */
.consent--warn{color:var(--ink)}
.consent--warn input{outline:2px solid var(--amber);outline-offset:2px;
box-shadow:0 0 0 4px rgba(255,184,0,.28);animation:lg-shake .34s var(--e)}
.consent__req{display:flex;align-items:center;gap:7px;margin:-8px 0 14px;
font-family:var(--at-fh);font-size:13px;font-weight:600;color:#9A6B00}
.consent__req::before{content:'';flex:0 0 auto;width:16px;height:16px;border-radius:50%;
background:var(--amber);
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
@keyframes lg-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;
border:0;border-radius:12px;cursor:pointer;font-family:var(--at-fh);font-size:16px;font-weight:800;
transition:filter .2s,transform .1s,box-shadow .2s}
.btn--amber{background:linear-gradient(160deg,var(--amber-hi),var(--amber));color:var(--amber-ink);
box-shadow:0 10px 24px -8px rgba(255,184,0,.5)}
.btn--amber:hover{filter:brightness(1.04)}.btn--amber:active{transform:scale(.99)}
.btn--amber:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn--ghost{background:#fff;border:1.5px solid var(--line2);color:var(--ink);font-weight:700}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue-dk)}
.linkbtn{background:none;border:0;padding:12px 6px;min-height:44px;cursor:pointer;
font-family:var(--at-fh);font-size:15px;font-weight:600;color:var(--blue-dk)}
.linkbtn:hover{text-decoration:underline}
.linkbtn--center{display:block;width:100%;text-align:center;margin-top:6px}
/* «інший спосіб» — email для агентів/бізнесу/адмінів */
.alt{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.alt__t{display:flex;align-items:center;gap:8px;justify-content:center;width:100%;
background:none;border:0;cursor:pointer;min-height:44px;font-family:var(--at-fh);
font-weight:700;font-size:14px;color:var(--txt2)}
.alt__t svg{transition:transform .3s var(--e)}
.alt.open .alt__t svg{transform:rotate(180deg)}
.alt__body{max-height:0;overflow:hidden;transition:max-height .42s var(--e),opacity .3s;opacity:0}
.alt.open .alt__body{max-height:440px;opacity:1;margin-top:14px}
.alt__hint{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.terms{margin:22px 0 0;font-size:13px;color:var(--txt2);line-height:1.5}
.terms a{color:var(--blue-dk);text-decoration:underline}
.phone-mask{font-family:var(--at-fh);font-weight:700;font-variant-numeric:tabular-nums}
.step{display:none}.step.on{display:block;animation:lg-fade .34s var(--e)}
@keyframes lg-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.r2026 *{animation:none!important;transition:none!important}}