:root{
  --bg:#0a0d12; --card:#121822; --line:#212c3b; --txt:#e8eff8;
  --dim:#7b8da3; --dim2:#55677d; --acc:#f0b429; --err:#ff8080;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #16202e 0%, var(--bg) 55%);
  color:var(--txt); display:grid; place-items:center;
  font:14px/1.6 -apple-system,"Segoe UI",system-ui,"Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(360px,calc(100% - 40px)); margin-top:-6vh}
.box{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:30px 26px 24px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
}
.brand{display:flex; align-items:center; gap:9px; margin-bottom:24px}
.dot{
  width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,var(--acc),#e08b00);
  box-shadow:0 0 14px rgba(240,180,41,.55);
}
.txt{font-size:15px; font-weight:650; letter-spacing:.4px}
.field{margin-bottom:12px}
input{
  width:100%; padding:11px 13px; border-radius:10px;
  background:#0c1219; border:1px solid var(--line);
  color:var(--txt); font-size:14px; outline:none;
  transition:.16s;
}
input::placeholder{color:var(--dim2)}
input:focus{
  border-color:rgba(240,180,41,.6); background:#0e141d;
  box-shadow:0 0 0 3px rgba(240,180,41,.08);
}
button{
  width:100%; padding:11px; margin-top:6px; border:0; border-radius:10px;
  background:linear-gradient(135deg,var(--acc),#e08b00);
  color:#0a0d12; font-size:14px; font-weight:700; letter-spacing:2px;
  cursor:pointer; transition:.16s;
}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.55; cursor:default}
.msg{
  min-height:20px; margin-top:12px; font-size:12.5px;
  color:var(--err); text-align:center;
}
.msg.ok{color:#3ddc97}
.foot{
  margin-top:16px; text-align:center;
  font-size:11.5px; color:var(--dim2); letter-spacing:.3px;
}