:root { --bg:#090a0c; --panel:#111318; --line:rgba(255,255,255,.12); --text:#f5f5f6; --muted:#999ca5; --coral:#ff6757; --paper:#f4f1eb; --ink:#171819; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--text); background:var(--bg); font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
.login-header { width:min(1400px,calc(100% - 48px)); height:74px; display:flex; align-items:center; justify-content:space-between; margin:auto; border-bottom:1px solid rgba(255,255,255,.08); }
.login-brand { display:flex; align-items:center; gap:10px; }
.login-brand img { width:29px; height:29px; filter:invert(1); }
.login-brand strong { font-size:19px; letter-spacing:-.045em; }
.language-switch { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.035); }
.language-switch button { width:31px; height:28px; padding:0; border:0; border-radius:6px; color:#777b85; background:transparent; font-size:10px; font-weight:800; cursor:pointer; }
.language-switch button.is-active { color:#0b0c0f; background:#f1f1f2; }
.login-layout { position:relative; width:min(1180px,calc(100% - 48px)); min-height:calc(100dvh - 74px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(390px,.72fr); align-items:center; gap:100px; margin:auto; padding:64px 0; }
.login-layout::before { content:""; position:absolute; z-index:-1; width:760px; height:620px; left:-320px; top:50%; transform:translateY(-50%); background:radial-gradient(circle,rgba(138,125,247,.2),rgba(255,103,87,.07) 42%,transparent 70%); filter:blur(12px); }
.login-context>span { color:#a7a9b1; font-size:10px; font-weight:850; letter-spacing:.16em; }
.login-context h1 { max-width:720px; margin:20px 0 24px; font-size:clamp(50px,6vw,82px); line-height:.98; letter-spacing:-.067em; }
.login-context h1 em { color:#93969f; font-style:normal; }
.login-context>p { max-width:640px; margin:0; color:#a3a6ae; font-size:17px; line-height:1.6; }
.login-proof { max-width:560px; display:flex; align-items:center; gap:13px; margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.login-proof>svg { width:38px; height:38px; padding:9px; border:1px solid var(--line); border-radius:10px; color:#b7b1ff; }
.login-proof span { display:grid; gap:4px; }
.login-proof b { font-size:12px; }
.login-proof small { color:#7f828b; font-size:11px; }
.login-card { padding:30px; border:1px solid #d7d2c8; border-radius:18px; color:var(--ink); background:var(--paper); box-shadow:0 36px 110px rgba(0,0,0,.5); }
.login-card-head { display:flex; align-items:center; justify-content:space-between; }
.login-card-head span { color:#cb4335; font-size:9px; font-weight:850; letter-spacing:.16em; }
.login-card-head svg { width:37px; height:37px; padding:10px; border-radius:10px; color:#fff; background:#171819; }
.login-card h2 { margin:27px 0 8px; font-size:29px; line-height:1.05; letter-spacing:-.047em; }
.login-card>p { margin:0; color:#746f68; font-size:12px; line-height:1.5; }
#login-form { display:grid; gap:14px; margin-top:25px; }
#login-form label { display:grid; gap:7px; }
#login-form label>span { color:#77736c; font-size:8px; font-weight:850; letter-spacing:.11em; }
#login-form input { width:100%; height:47px; padding:0 13px; border:1px solid #d4d0c8; border-radius:8px; outline:0; color:#171819; background:#fff; font-size:12px; }
#login-form input:focus { border-color:#69645d; box-shadow:0 0 0 3px rgba(17,17,15,.06); }
.password-field { position:relative; }
.password-field input { padding-right:49px!important; }
.password-field button { position:absolute; top:4px; right:4px; width:39px; height:39px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; color:#77736c; background:transparent; cursor:pointer; }
.password-field button:hover { background:#f0ede7; }
.password-field svg { width:16px; height:16px; }
.login-error { margin:0; color:#b24438; font-size:11px; line-height:1.45; }
.login-error:empty { display:none; }
.login-submit { height:49px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:8px; color:#fff; background:#151617; font-size:12px; font-weight:780; cursor:pointer; }
.login-submit:hover { background:#292a2c; }
.login-submit:disabled { opacity:.58; cursor:wait; }
.login-submit svg { width:15px; height:15px; }
.login-create { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; padding-top:19px; border-top:1px solid #ddd8cf; color:#77736c; font-size:10px; }
.login-create a { color:#171819; font-weight:800; }
@media (max-width:900px) { .login-layout { grid-template-columns:1fr; gap:48px; padding:84px 0; } .login-context { max-width:700px; } .login-card { width:min(520px,100%); } }
@media (max-width:560px) { .login-header,.login-layout { width:calc(100% - 28px); } .login-header { height:64px; } .login-layout { min-height:calc(100dvh - 64px); padding:48px 0; } .login-context h1 { font-size:44px; } .login-context>p { font-size:15px; } .login-card { padding:24px 20px; } .login-create { align-items:flex-start; flex-direction:column; gap:8px; } }