:root{--bg:#0a0b0d;--s1:#131519;--s2:#1b1e23;--line:#2a2e35;--tx:#e9ebee;--mut:#8b919b;--ag:#c4c9d1;--wh:#fff;--err:#c9a37a;--ok:#a9c4b0;--on-ag:#0a0b0d;--r:3px;color-scheme:dark}
:root[data-theme=light]{--bg:#f4f5f7;--s1:#fff;--s2:#eceef1;--line:#d3d7dd;--tx:#1b1e23;--mut:#5b626d;--ag:#2f353d;--wh:#0f1114;--err:#a23b3b;--ok:#2c6b3c;--on-ag:#fff;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15px/1.5 Barlow,"Helvetica Neue",Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
h1,h2{font-family:"Barlow Condensed",Barlow,Arial,sans-serif;font-weight:500;letter-spacing:.04em;margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ag);outline-offset:2px}
.wrap{flex:1;display:grid;grid-template-columns:1.1fr 1fr;background:var(--grad,radial-gradient(120% 140% at 12% 0%,#2b2e34 0,#14161a 52%,#0a0b0d 100%))}
:root[data-theme=light]{--grad:radial-gradient(120% 140% at 12% 0%,#ffffff 0,#eef0f3 55%,#e2e5ea 100%)}

:root[data-theme=light] .panel{background:rgba(255,255,255,.6)}
.brand{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:clamp(28px,6vw,96px)}
.brand img{width:min(100%,300px);height:auto;display:block}
.brand p{margin:0;color:var(--mut);max-width:34ch;font-size:16px}
.panel{display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,72px);border-left:1px solid var(--line);background:var(--panelbg,rgba(10,11,13,.55))}
.card{width:min(100%,400px)}
.card h1{font-size:clamp(30px,4vw,40px);color:var(--wh);line-height:1.05}
.sub{color:var(--mut);margin:8px 0 26px}
form{display:grid;gap:16px}
label{display:block;color:var(--mut);font-size:13px;margin-bottom:6px}
.field{position:relative}
input[type=email],input[type=password],input[type=text]{width:100%;background:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;min-height:46px}
input:focus{border-color:var(--ag)}
.field .toggle{position:absolute;right:4px;bottom:4px;height:38px;background:none;border:0;color:var(--mut);padding:0 12px;cursor:pointer}
.field .toggle:hover{color:var(--wh)}
.field input.has-toggle{padding-right:86px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.row label{margin:0;display:inline-flex;gap:8px;align-items:center;color:var(--tx);font-size:14px}
input[type=checkbox]{accent-color:var(--ag);width:16px;height:16px}
a,.link{color:var(--ag);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
a:hover,.link:hover{color:var(--wh)}
.btn{background:var(--ag);color:var(--on-ag);border:1px solid var(--ag);border-radius:var(--r);min-height:48px;padding:0 20px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.btn:hover{background:var(--wh);border-color:var(--wh)}
.btn[disabled]{opacity:.55;cursor:progress}
.msg{min-height:22px;font-size:14px;margin:0}
.msg.err{color:var(--err)}.msg.ok{color:var(--ok)}
.rules{margin:0;padding:0;list-style:none;color:var(--mut);font-size:13px;display:grid;gap:2px}
.rules li::before{content:"—  "}
.rules li.ok{color:var(--ok)}
[hidden]{display:none!important}
.demo{background:var(--s2);border-bottom:1px solid var(--line);color:var(--mut);font-size:13px;text-align:center;padding:8px 16px}
footer{padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--mut);font-size:12px;text-align:center;letter-spacing:.06em}
@media(max-width:820px){.wrap{grid-template-columns:1fr}.brand{align-items:center;text-align:center;padding:28px 20px 8px;gap:12px}.brand img{width:min(62%,230px)}.brand p{display:none}.panel{border-left:0;background:none;align-items:flex-start;padding-top:12px}}
@media(prefers-reduced-motion:no-preference){.card{animation:in .7s ease both}@keyframes in{from{opacity:0;transform:translateY(8px)}}}

.back{justify-self:start}

.themebtn{position:fixed;top:12px;right:12px;z-index:5;background:var(--s2);border:1px solid var(--line);border-radius:var(--r);color:var(--tx);min-height:40px;min-width:44px;cursor:pointer}