@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-variable.ttf") format("truetype");font-style:normal;font-weight:100 1000;font-display:swap}

:root{color-scheme:light;--bg:#fff;--cloud:#f1f4f7;--hair:#ced0d4;--soft:#dee3e9;--ink:#0a1317;--tx:#1c1e21;--mut:#5d6c7b;--cobalt:#0064e0;--deep:#0457cb;--fb:#1876f2;--err:#e41e3f;--errb:#f0284a;--ok:#31a24c;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--tx);font:400 16px/1.5 "DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.16px}
.page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;min-height:100vh;padding:24px}
.left{display:flex;flex-direction:column;padding:8px 24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.logo{width:36px;height:36px;border-radius:100px;background:var(--cobalt);display:grid;place-items:center;color:#fff;font-size:13px}
.formbox{margin:auto 0;width:100%;max-width:400px;align-self:center;padding:48px 0}
h1{font-size:36px;line-height:1.28;font-weight:500;margin:0 0 8px;color:var(--ink);letter-spacing:-.4px}
.sub{color:var(--mut);margin:0 0 32px}
label{display:block;font-size:14px;line-height:1.43;font-weight:700;letter-spacing:-.14px;margin-bottom:6px;color:var(--ink)}
.f{margin-bottom:20px;position:relative}
input[type=text],input[type=password]{width:100%;height:44px;border:1px solid var(--hair);border-radius:8px;padding:0 14px;font:inherit;background:var(--bg);color:var(--tx);outline:0}
input:focus{border:2px solid var(--fb);padding:0 13px}
.f.bad input{border:2px solid var(--errb);padding:0 13px}
.msg{display:none;color:var(--err);font-size:12px;line-height:1.33;margin-top:6px}
.f.bad .msg{display:block}
.eye{position:absolute;right:6px;top:30px;width:36px;height:36px;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:100px;font-size:15px}
.eye:hover{background:var(--cloud)}
.row{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:-4px 0 24px;letter-spacing:-.14px}
.row label{display:flex;align-items:center;gap:8px;font-weight:400;margin:0;color:var(--tx);cursor:pointer}
.row input{width:18px;height:18px;accent-color:var(--cobalt)}
a{color:var(--cobalt);text-decoration:none;font-weight:700}a:hover{text-decoration:underline}
.btn{width:100%;height:44px;border-radius:100px;border:0;font:700 14px/1.43 inherit;font-family:inherit;letter-spacing:-.14px;cursor:pointer;background:var(--cobalt);color:#fff;transition:background .15s}
.btn:hover{background:var(--deep)}
.ok{display:none;margin-top:16px;padding:10px 14px;border-radius:16px;background:color-mix(in srgb,var(--ok) 15%,transparent);font-size:14px}
.foot{font-size:12px;line-height:1.33;color:var(--mut);display:flex;justify-content:space-between;gap:12px}
.hero{position:relative;border-radius:40px;overflow:hidden;background:var(--cloud);min-height:520px}
.hero img,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,19,23,0) 55%,rgba(10,19,23,.62) 100%)}
.cap{position:absolute;left:40px;right:40px;bottom:36px;z-index:2;color:#fff}
.cap h2{margin:0;font-size:40px;line-height:1.17;font-weight:500;letter-spacing:-.6px}
.cap p{margin:8px 0 0;font-size:18px;line-height:1.44;font-weight:300;opacity:.92}
@media(max-width:1023px){.page{grid-template-columns:1fr}.hero{display:none}.left{padding:8px 4px}}
@media(max-width:479px){h1{font-size:28px}.formbox{padding:32px 0}}

.auth-error{margin:0 0 18px;padding:12px 14px;border:1px solid #f7bac6;border-radius:8px;background:#fff0f3;color:#9e1230;font-size:14px}
.auth-error ul{list-style:none;margin:0;padding:0}
.f .msg{display:block}
.f .msg:empty{display:none}
.help{color:var(--mut);font-size:12px;max-width:160px;text-align:right}
.eye:focus-visible,.btn:focus-visible,input:focus-visible{outline:3px solid var(--fb);outline-offset:2px}
@media(max-width:600px){.page{padding:16px}.foot{flex-wrap:wrap}.row{gap:12px}.help{max-width:136px}}