:root{
  color-scheme:dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface2:#222221;
  --ink:#fff; --ink2:#c3c2b7; --muted:#898781;
  --ring:rgba(255,255,255,.10); --accent:#3987e5; --accent-dim:#1c5cab; --danger:#d03b3b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--page); color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; align-items:center; justify-content:center; padding:24px}
.wrap{width:100%; max-width:400px}
.card{background:var(--surface); border:1px solid var(--ring); border-radius:14px; padding:30px 28px 24px}
.logo{font-weight:700; font-size:20px; letter-spacing:.2px; margin-bottom:18px}
.logo span{color:var(--accent)}
h1{font-size:17px; font-weight:600; line-height:1.3}
.sub{color:var(--muted); font-size:12.5px; margin:5px 0 20px}
label{display:block; font-size:11.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:13px}
input{display:block; width:100%; margin-top:5px; padding:10px 12px; font:15px/1.3 inherit;
  color:var(--ink); background:var(--surface2); border:1px solid var(--ring); border-radius:9px;
  text-transform:none; letter-spacing:0}
input:focus{outline:none; border-color:var(--accent)}
button{width:100%; margin-top:6px; padding:11px 12px; font:600 14px/1 inherit; color:#fff;
  background:var(--accent-dim); border:none; border-radius:9px; cursor:pointer}
button:hover:not(:disabled){background:var(--accent)}
button:disabled{opacity:.6; cursor:progress}
.err{background:rgba(208,59,59,.12); border:1px solid rgba(208,59,59,.45); color:#ffb4b4;
  border-radius:8px; padding:8px 11px; font-size:12.5px; margin-bottom:12px}
.foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--ring);
  font-size:11.5px; color:var(--muted); line-height:1.5}
@media (max-width:420px){ .card{padding:24px 20px 20px} }

.sub.client{color:var(--accent, #3987e5); font-weight:600; margin-top:-6px}