@import url('https://fonts.googleapis.com/css?family=Raleway:400,300,600');
:root{color-scheme:dark}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  font-family:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#010101;
  color:#f0ece2;
}
.card{
  width:min(420px,92vw);
  background:#0d0d0d;
  border:1px solid rgba(240,236,226,.08);
  border-radius:12px;
  padding:24px 22px;
  box-shadow:0 14px 28px rgba(0,0,0,.45);
}
h1{margin:0 0 14px 0;font-size:22px;font-weight:600;color:#f0ece2}
label{display:block;margin:12px 0}
label span{display:block;font-size:12px;opacity:.85;margin-bottom:6px}
input{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(240,236,226,.18);
  background:#050505;
  color:#f0ece2;
  outline:none;
}
input:focus{border-color:#9ad1ff;box-shadow:0 0 0 3px rgba(154,209,255,.18)}
button{
  width:100%;
  margin-top:14px;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(240,236,226,.18);
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  color:white;
  font-weight:600;
  cursor:pointer;
}
button:hover{filter:brightness(1.05)}
.hint{margin:12px 0 0 0;font-size:12px;opacity:.8;line-height:1.4}
.error{
  background:rgba(239,68,68,.14);
  border:1px solid rgba(239,68,68,.25);
  padding:10px 12px;
  border-radius:10px;
  margin:0 0 10px 0;
}