:root{
  --bg:#0b0d12; --card:#151922; --fg:#eef1f6; --sub:#9aa4b2;
  --accent:#ff9b1e; --accent2:#ffcf33; --err:#ff5c5c; --ok:#52d273;
  --line:#242a36;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 500px at 50% -10%, #1d2740 0%, transparent 60%),
    var(--bg);
  color:var(--fg);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
}
.card{
  width:100%;max-width:360px;background:var(--card);
  border:1px solid var(--line);border-radius:18px;
  padding:28px 22px 22px;box-shadow:0 20px 60px rgba(0,0,0,.45);
  text-align:center;
}
.logo{width:72px;height:72px;object-fit:contain;margin:0 auto 6px;display:block}
h1{
  margin:.1em 0 .1em;font-size:26px;letter-spacing:.3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin:0 0 20px;color:var(--sub);font-size:13px}
label{display:block;text-align:left;font-size:12px;color:var(--sub);margin:0 0 12px}
input{
  width:100%;margin-top:6px;padding:12px 13px;border-radius:11px;
  border:1px solid var(--line);background:#0f131b;color:var(--fg);font-size:15px;
}
input:focus{outline:none;border-color:var(--accent)}
button{
  width:100%;margin-top:6px;padding:13px;border:0;border-radius:11px;cursor:pointer;
  font-size:15px;font-weight:700;color:#201300;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
button:disabled{opacity:.6;cursor:default}
.msg{min-height:18px;margin:14px 0 2px;font-size:13px}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
.foot{margin:14px 0 0;color:var(--sub);font-size:13px}
.foot a{color:var(--accent2);text-decoration:none}