:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1c242c; background: #edf2f5; }
* { box-sizing: border-box; }
body { margin: 0; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.login-form { width: min(100%, 360px); padding: 30px; border: 1px solid #d0dade; border-radius: 7px; background: #fff; box-shadow: 0 12px 32px rgba(28, 53, 65, .08); }
.brand { display: flex; align-items: center; gap: 7px; color: #12232c; font-size: 20px; font-weight: 720; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #f4693f; color: #fff; }
.login-form h1 { margin: 27px 0 6px; font-size: 24px; }
.login-form p { margin: 0 0 22px; color: #66747b; font-size: 14px; }
.login-form label { display: grid; gap: 7px; margin: 15px 0; color: #4d5b62; font-size: 13px; font-weight: 650; }
.login-form input { height: 42px; border: 1px solid #bdc9cf; border-radius: 5px; padding: 0 11px; color: #1c242c; font: inherit; font-size: 16px; }
.login-form input:focus { border-color: #3b849f; outline: 2px solid rgba(59, 132, 159, .18); }
.login-form button { width: 100%; height: 42px; margin-top: 9px; border: 0; border-radius: 5px; background: #13799b; color: #fff; cursor: pointer; font-weight: 700; }
.login-form button:hover { background: #106b89; }
.login-form .error { min-height: 18px; margin: 0; color: #b92e26; font-size: 13px; }
.login-form label small { color: #6c7b82; font-size: 12px; font-weight: 500; line-height: 1.35; }.field-error { color: #b42318; font-size: 12px; font-weight: 600; line-height: 1.35; }
.login-help { margin: -5px 0 10px; color: #52666f; font-size: 13px; }.login-help summary { color: #166c96; cursor: pointer; font-weight: 650; }.login-help p { margin: 7px 0 0; font-size: 12px; line-height: 1.45; }
.login-form button:focus-visible, .login-form input:focus-visible, .login-help summary:focus-visible { outline: 3px solid rgba(36,125,255,.45); outline-offset: 2px; }