:root { font-family: "Roboto", sans-serif; color: #000; background: #f4f7f7; }
* { box-sizing: border-box; }
body { margin: 0; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-panel { width: min(100%, 420px); padding: 32px; background: #fff; border: 1px solid #d6e2e4; border-top: 4px solid #03627b; border-radius: 8px; box-shadow: 0 16px 44px rgb(3 98 123 / 14%); }
.auth-brand { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: #03627b; border-radius: 6px; font: 600 24px "Poppins", sans-serif; }
.auth-panel h1 { margin: 18px 0 3px; color: #03627b; font: 600 28px "Poppins", sans-serif; }
.auth-panel > p { margin: 0 0 26px; color: #58666b; text-transform: uppercase; font-size: 12px; font-weight: 500; }
.auth-panel form { display: grid; gap: 10px; }
.auth-panel label { margin-top: 7px; color: #34464c; font-weight: 500; }
.auth-panel input { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid #b9c8cc; border-radius: 5px; font: inherit; }
.auth-panel input:focus { border-color: #008283; outline: 3px solid rgb(0 130 131 / 15%); }
.auth-panel button { min-height: 46px; margin-top: 14px; color: #fff; background: #03627b; border: 0; border-radius: 5px; font: 600 15px "Roboto", sans-serif; cursor: pointer; }
.auth-panel button:hover { background: #008283; }
.auth-panel button:disabled { opacity: .65; cursor: wait; }
#login-error { padding: 9px 10px; color: #9f3838; background: #faecec; border-radius: 4px; }