* { box-sizing: border-box; }
html, body.login-page { min-height: 100%; }
body.login-page { margin: 0; background: #f3f6f8; color: #172033; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; }
.login-page hr { border: 0; border-top: 1px solid #d8e0e7; }
.login-main { display: grid; min-height: calc(100vh - 76px); place-items: center; padding: 32px 20px 56px; }
.login-card { width: min(100%, 460px); overflow: hidden; background: #fff; border: 1px solid #d8e0e7; border-top: 4px solid #0f766e; border-radius: 8px; box-shadow: 0 18px 48px rgba(23, 32, 51, 0.12); }
.admin-login-page .login-card { border-top-color: #2563eb; }
.login-brand { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 18px; align-items: center; padding: 28px 30px 24px; border-bottom: 1px solid #e4e9ee; }
.login-brand img { display: block; width: 82px; height: 82px; object-fit: contain; background: #fff; border: 1px solid #dfe6eb; border-radius: 8px; }
.login-kicker { display: block; margin-bottom: 6px; color: #0f766e; font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.admin-login-page .login-kicker { color: #2563eb; }
.login-brand h1 { margin: 0; font-size: 25px; line-height: 1.2; }
.login-brand p { margin: 8px 0 0; color: #627083; font-size: 14px; line-height: 1.5; }
.login-form { display: grid; gap: 18px; padding: 28px 30px 32px; }
.login-field { display: grid; gap: 8px; }
.login-field label { color: #28364a; font-size: 14px; font-weight: 700; }
.login-field input { width: 100%; height: 46px; padding: 0 13px; color: #172033; background: #fff; border: 1px solid #b9c5d1; border-radius: 6px; font: inherit; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; }
.login-field input:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16); }
.admin-login-page .login-field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.login-button { width: 100%; min-height: 46px; margin-top: 2px; padding: 11px 18px; color: #fff; background: #0f766e; border: 1px solid #0f766e; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 700; transition: background-color 150ms ease, transform 150ms ease; }
.login-button:hover { background: #0b625c; }
.login-button:active { transform: translateY(1px); }
.login-button:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.24); outline-offset: 2px; }
.admin-login-page .login-button { background: #2563eb; border-color: #2563eb; }
.admin-login-page .login-button:hover { background: #1d4ed8; }
.admin-login-page .login-button:focus-visible { outline-color: rgba(37, 99, 235, 0.24); }
@media (max-width: 520px) {
    .login-main { align-items: start; padding: 24px 14px 40px; }
    .login-brand { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 22px 20px; }
    .login-brand img { width: 64px; height: 64px; }
    .login-brand h1 { font-size: 22px; }
    .login-form { padding: 24px 20px 28px; }
}