:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20201e; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: linear-gradient(135deg, #071c18, #183a32); }
.loginShell { width: min(100%, 456px); margin: 0 auto; padding: 48px 20px; }
.loginBrand { text-align: center; color: #fff; margin-bottom: 28px; }
.loginBrand img { display: block; width: 280px; max-width: 100%; height: 130px; object-fit: contain; margin: 0 auto; }
.loginBrand p { font-size: 13px; margin: 14px 0 0; color: #e8e3d9; }
.loginPanel { background: #f8f8f5; border: 1px solid #e2e2de; border-radius: 8px; padding: 32px; }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 28px; font-weight: 650; }
form { display: flex; flex-direction: column; min-width: 0; }
label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #cacac5; border-radius: 6px; background: #fff; color: #20201e; padding: 12px; font: inherit; font-size: 16px; margin-bottom: 20px; }
input:focus-visible, button:focus-visible { outline: 3px solid #969a78; outline-offset: 3px; }
button { min-height: 48px; width: 100%; font: inherit; font-weight: 650; color: #fff; background: #102b25; border: 1px solid #102b25; border-radius: 6px; cursor: pointer; padding: 12px 16px; }
button:hover { background: #183a32; }
button:disabled { cursor: wait; opacity: .75; }
.loginError { color: #9b3434; font-size: 14px; line-height: 1.5; margin: 0 0 16px; overflow-wrap: anywhere; }
.loginError:empty { display: none; }
.loginPanel a { color: #102b25; text-underline-offset: 3px; }
@media (max-width: 400px) { .loginShell { padding: 28px 16px; } .loginPanel { padding: 24px; } }