* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #0f2a44, #17395c); font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #1c2733; padding: 16px; }
.box { background: #fff; border-radius: 12px; padding: 28px; width: 100%; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.brand b { display: block; font-size: 17px; color: #0f2a44; } .brand small { color: #6b7a8c; }
.logo { width: 42px; height: 42px; border-radius: 9px; background: linear-gradient(135deg, #0e8f8f, #12b5b5); color: #fff; font-weight: 700; display: grid; place-items: center; }
label { display: block; font-size: 12px; font-weight: 600; color: #6b7a8c; margin-bottom: 12px; }
input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #d5dde6; border-radius: 6px; font: inherit; font-size: 14px; }
button { width: 100%; padding: 10px; border: 0; border-radius: 6px; background: #0e8f8f; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 6px; }
button:disabled { opacity: .6; }
#err { color: #c62828; font-size: 13px; min-height: 18px; }
.foot { font-size: 11px; color: #8a97a6; text-align: center; margin: 14px 0 0; }