:root{--ink:#1f2933;--muted:#667085;--line:#e3e9f0;--blue:#168dd4;--teal:#18c3b3;--gold:#ffc928;--orange:#f26a3d}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:Roboto,Arial,sans-serif;background:linear-gradient(145deg,#f4f8fb 0%,#eaf3f8 100%);color:var(--ink);padding:24px}
.box{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px;box-shadow:0 22px 60px rgba(16,24,40,.12)}
.logo{display:block;width:220px;height:auto;margin:0 auto 24px}
h1{font-size:25px;line-height:1.2;margin:0;text-align:center;font-weight:700}
.hint{text-align:center;color:var(--muted);margin:7px 0 22px;font-size:14px}
.input{width:100%;border:1px solid #cbd8e6;border-radius:8px;padding:12px 13px;font:inherit;background:#fff}
.input:focus{outline:3px solid rgba(22,141,212,.14);border-color:var(--blue)}
label{display:block;font-weight:500;margin:14px 0 7px;color:#344054}
.box button.btn{display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--blue));background-image:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font:inherit;font-weight:700;padding:13px;margin-top:20px;cursor:pointer;box-shadow:0 12px 24px rgba(22,141,212,.24)}
.err{background:#fff1f2;color:#9f1239;padding:11px 12px;border-radius:8px;border:1px solid #fecdd3;margin-bottom:16px;font-weight:500}