:root { --black:#08090a; --panel:#111416; --white:#f4f4f1; --soft-white:#c7c9c8; --grey:#85898a; --blue:#9a9a9a; --blue-bright:#f4f4f1; --lime:#d5d5d5; --line:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { min-width:320px; margin:0; color:var(--white); background:var(--black); font:300 13px/1.45 "Space Grotesk",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
.auth-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr); min-height:100vh; }
.auth-visual { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:35px 6vw 40px; overflow:hidden; background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.18)),url("assets/studio/developer-workspace.jpg") center/cover; }
.auth-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 55%); pointer-events:none; }
.auth-brand, .auth-visual-copy { position:relative; z-index:1; }
.auth-brand { display:inline-flex; align-items:center; gap:8px; width:max-content; color:var(--white); font-size:16px; font-weight:500; letter-spacing:-.05em; line-height:.8; }
.auth-brand img { width:30px; }
.auth-brand small { display:block; margin-top:5px; color:#aeb1b1; font-size:6px; font-weight:400; letter-spacing:.28em; text-transform:uppercase; }
.auth-visual-copy p { margin:0 0 15px; color:var(--blue-bright); font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.auth-visual-copy h1 { margin:0 0 23px; font-size:clamp(46px,6vw,82px); font-weight:500; line-height:.88; letter-spacing:-.07em; text-transform:uppercase; }
.auth-visual-copy h1 em { color:var(--blue-bright); font-style:normal; }
.auth-visual-copy > span { color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.18em; }
.auth-panel { display:grid; place-items:center; padding:40px; background:var(--black); }
.auth-card { width:min(380px,100%); }
.auth-back { display:inline-block; margin-bottom:76px; color:var(--grey); font-size:9px; }
.auth-back:hover { color:var(--white); }
.auth-kicker { margin:0 0 12px; color:var(--blue-bright); font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.auth-card h2 { margin:0; font-size:clamp(44px,5vw,68px); font-weight:500; line-height:.88; letter-spacing:-.07em; text-transform:uppercase; }
.auth-intro { max-width:300px; margin:22px 0 35px; color:var(--soft-white); font-size:11px; line-height:1.55; }
#login-form { display:grid; gap:17px; }
#login-form label { display:grid; gap:7px; color:var(--soft-white); font-size:9px; }
#login-form input { width:100%; height:43px; padding:0 12px; color:var(--white); border:1px solid var(--line); outline:0; border-radius:0; background:var(--panel); font-size:11px; }
#login-form input:focus { border-color:var(--blue-bright); background:#11181b; }
#login-form input::placeholder { color:#62686a; }
.auth-error { margin:0; padding:10px; color:#ffb5ae; border:1px solid rgba(255,118,110,.25); background:rgba(182,77,72,.12); font-size:9px; }
.auth-submit { display:flex; align-items:center; justify-content:space-between; min-height:43px; margin-top:5px; padding:0 13px; color:var(--black); border:1px solid var(--white); background:var(--white); font-size:10px; cursor:pointer; transition:color .2s ease,background .2s ease,transform .2s ease; }
.auth-submit b { color:var(--blue); font-size:17px; font-weight:400; }
.auth-submit:hover { color:var(--white); background:transparent; transform:translateY(-1px); }
.auth-note { display:flex; align-items:center; gap:7px; margin:25px 0 0; color:var(--grey); font-size:8px; }
.auth-note i { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px rgba(37,235,123,.6); }
@media (max-width:760px) { .auth-layout { display:block; } .auth-visual { min-height:260px; padding:23px 20px 30px; } .auth-visual-copy h1 { font-size:43px; } .auth-panel { min-height:calc(100vh - 260px); padding:43px 20px 55px; } .auth-back { margin-bottom:53px; } }