*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#edf1f6;color:#18263b;font:15px 'Segoe UI',Arial,sans-serif;padding:24px}main{width:100%;max-width:420px;background:white;border:1px solid #dce3ed;border-radius:18px;padding:38px;box-shadow:0 20px 70px #233a5910}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#17263c;font-size:26px;font-weight:800;letter-spacing:-1px}.brand span{font-size:10px;letter-spacing:2px;padding:7px 9px;background:#edf3ff;border-radius:5px;color:#2860b8}.lock{margin-top:34px;color:#2969ce;font-size:30px}h1{font-size:25px;letter-spacing:-.6px;margin:13px 0 8px}p{color:#6b7789;line-height:1.6;margin:0 0 25px;font-size:14px}label{display:block;font-size:13px;font-weight:600;margin-top:18px}input{display:block;width:100%;padding:13px 12px;border:1px solid #cdd6e2;border-radius:7px;margin-top:8px;font:inherit}input:focus{outline:3px solid #246bce22;border-color:#246bce}button{width:100%;border:0;border-radius:7px;background:#2563c2;color:white;font:600 15px 'Segoe UI',sans-serif;padding:14px;margin:25px 0;cursor:pointer;display:flex;justify-content:space-between}button:hover{background:#194e9e}small{display:block;font-size:11px;color:#7a8596;line-height:1.6}.error{background:#fff0f0;padding:12px;color:#a32626;border-radius:6px;font-size:13px}

body{background:linear-gradient(115deg,#243b5c 0 38%,#e8edf5 38%)}main{border-radius:5px;box-shadow:0 15px 50px #172b4c22}.brand span{background:#e8eef8;color:#395b9b}button{background:#395b9b;border-radius:5px}button:hover{background:#294778}input{border-radius:5px}@media(max-width:600px){body{background:linear-gradient(155deg,#243b5c 0 27%,#e8edf5 27%);padding:22px}main{padding:29px}}