:root{
  --bg:#0e1420; --panel:#161d2b; --line:#273246; --text:#e6ebf4; --muted:#8a96ac;
  --field:#0f1724; --accent:#2f6fed; --accent-hi:#4680f5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 50% -10%,#1a2435 0,var(--bg) 60%);
  color:var(--text); font:15px/1.5 "Segoe UI",system-ui,Roboto,Arial,sans-serif;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:28px 26px 24px; box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.brand .logo{
  width:40px; height:40px; border-radius:9px; background:#1f2937;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.brand .logo svg{display:block}
.brand h1{font-size:16px; font-weight:600; margin:0; letter-spacing:.2px}
.brand p{font-size:12px; color:var(--muted); margin:2px 0 0}
label{display:block; font-size:12px; color:var(--muted); margin:14px 0 6px}
input{
  width:100%; padding:11px 12px; background:var(--field); color:var(--text);
  border:1px solid var(--line); border-radius:8px; font-size:14px; outline:none;
}
input:focus{border-color:var(--accent)}
.row{display:flex; align-items:center; gap:8px; margin:16px 0 4px; font-size:13px; color:var(--muted)}
.row input{width:auto}
.row label{margin:0}
button{
  width:100%; margin-top:18px; padding:11px; border:0; border-radius:8px; cursor:pointer;
  background:var(--accent); color:#fff; font-size:14px; font-weight:600;
}
button:hover{background:var(--accent-hi)}
button:disabled{opacity:.6; cursor:default}
.err{
  margin-top:14px; padding:9px 11px; border-radius:7px; font-size:13px;
  background:rgba(229,72,77,.12); border:1px solid rgba(229,72,77,.4); color:#ff9a9d;
}
.err[hidden]{display:none}
.foot{margin-top:22px; text-align:center; font-size:11px; color:var(--muted)}