.login-body { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(ellipse at 20% 10%, #e8f4f0, transparent 65%), #f7f9fc; }
.login-card { width: 100%; max-width: 460px; margin: 0; padding: 40px; background: white; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 20px 70px #173a5010; }
.login-card .brand { margin-bottom: 42px; }
.login-card h1 { font-size: 29px; letter-spacing: -1px; line-height: 1.3; }
.login-card p { font-size: 13px; margin-bottom: 28px; }
.login-card form { display: flex; flex-direction: column; }
.login-card label { font-size: 12px; font-weight: 600; margin: 0 0 8px; }
.login-card input:not([type=hidden]) { width: 100%; padding: 13px 14px; border: 1px solid #d9e2eb; border-radius: 8px; font: inherit; font-size: 14px; margin-bottom: 21px; background: #fcfdff; }
.login-card input:focus { outline: 2px solid #9bd2c8; outline-offset: 2px; }
.login-card button { border: 0; background: #167f70; color: white; border-radius: 8px; padding: 14px 18px; font: inherit; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; cursor: pointer; }
.login-card button:hover { background: #116b5e; }
.login-note { font-size: 11px; color: #8492a3; line-height: 1.7; margin-top: 24px; }
.login-error { padding: 12px; border-radius: 8px; background: #fff1ef; color: #a43d30; font-size: 12px; line-height: 1.6; margin-bottom: 20px; }
.user-details { font-size: 12px; color: #64778b; margin-top: 18px; }
.logout-button { background: none; border: 1px solid #d9e2eb; padding: 7px 12px; border-radius: 6px; color: #64778b; cursor: pointer; }
@media (max-width: 600px) { .login-card { padding: 30px 24px; } }