:root { color-scheme: dark; --bg:#08090a; --surface:#111316; --line:rgba(255,255,255,.09); --text:#f5f5f5; --muted:#a1a1aa; --quiet:#6b6f78; --green:#7fc49a; --red:#d8848e; font-family:Inter,Geist,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--text); background:radial-gradient(ellipse at 50% 0,#17191c 0,var(--bg) 48%); }
body::before { content:""; position:fixed; inset:0; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px max(18px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)); }
.login-panel { width:min(100%,390px); padding:25px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(21,23,26,.92),rgba(13,14,16,.94)); box-shadow:inset 0 1px rgba(255,255,255,.04),0 28px 70px rgba(0,0,0,.32); backdrop-filter:blur(20px); }
.login-brand { display:flex; align-items:center; gap:13px; padding-bottom:20px; border-bottom:1px solid var(--line); }.login-brand img { width:48px; height:48px; border-radius:13px; object-fit:cover; border:1px solid rgba(255,255,255,.14); }.login-brand span { display:block; color:var(--quiet); font:650 8px ui-monospace,monospace; letter-spacing:.13em; }.login-brand h1 { margin:5px 0 0; font-size:16px; letter-spacing:-.02em; }
.login-intro { margin:24px 0 20px; }.login-intro h2 { margin:0; font-size:24px; letter-spacing:-.04em; }.login-intro p { margin:7px 0 0; color:var(--muted); font-size:12px; }
form { display:grid; gap:15px; } label { display:grid; gap:7px; color:var(--muted); font-size:10px; }
input[type=text],input[type=password] { width:100%; height:47px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:#0b0c0e; color:var(--text); font-size:15px; outline:none; transition:border-color .15s ease-out,background-color .15s ease-out; }
input[type=text]:focus,input[type=password]:focus { border-color:rgba(255,255,255,.24); background:#0d0e10; }
.remember-row { position:relative; grid-template-columns:20px 1fr; align-items:start; gap:10px; padding:2px 0; cursor:pointer; }.remember-row input { position:absolute; opacity:0; }.checkmark { width:18px; height:18px; border:1px solid rgba(255,255,255,.18); border-radius:5px; background:#0b0c0e; }.remember-row input:checked+.checkmark { background:var(--text); box-shadow:inset 0 0 0 4px #0b0c0e; }.remember-row strong { display:block; color:var(--text); font-size:11px; font-weight:550; }.remember-row small { display:block; margin-top:4px; color:var(--quiet); font-size:9px; line-height:1.4; }
.login-error { min-height:15px; margin:0; color:var(--red); font-size:10px; }
button { height:47px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:#f0f0f0; color:#0a0b0c; font-weight:650; font-size:12px; cursor:pointer; transition:background-color .15s ease-out,opacity .15s ease-out; } button:hover { background:#fff; } button:disabled { opacity:.55; cursor:wait; }
.security-note { margin:17px 0 0; color:var(--quiet); text-align:center; font-size:8px; line-height:1.5; }
@media (max-width:480px) { .login-shell { align-items:start; padding-top:max(48px,calc(env(safe-area-inset-top) + 28px)); }.login-panel { padding:21px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }