body[data-path="login"] {
  --primary: #3561bf;
  --text-color: #203c45;
  background: #f5f7f8;
  color: #203c45;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  caret-color: #3561bf;
}
body[data-path="login"] ::selection { background: #dce7fb; color: #173c48; }
.clinic-login-brand { text-align: center; margin: 32px auto 28px; }
.clinic-login-brand img { display: block; margin-inline: auto; width: 64px; height: 64px; object-fit: contain; }
.clinic-login-brand h1 { font-size: 32px; font-weight: 650; letter-spacing: -.025em; margin: 12px 0 8px; }
.clinic-login-brand h1 span { color: #3561bf; font-weight: 450; }
.clinic-login-brand p { color: #586f79; margin: 0; font-size: 16px; }
body[data-path="login"] .page-card { border: 1px solid #dce5f6; border-radius: 16px; background: #fff; box-shadow: none; min-height: 0; }
body[data-path="login"] .page-card-head .app-logo { display: none; }
body[data-path="login"] .es-button[data-variant="solid"] { background: #3561bf; border-color: #3561bf; color: #fff; min-height: 44px; }
body[data-path="login"] .es-button[data-variant="solid"]:hover { background: #294e9c; }
body[data-path="login"] a { color: #3561bf; text-underline-offset: 3px; }
body[data-path="login"] :is(input, button, a):focus-visible { outline: 3px solid #3561bf; outline-offset: 3px; }
body[data-path="login"] .page-card-subtitle { color: #586f79; }
@media (max-width: 480px) {
  .clinic-login-brand { margin: 24px auto; }
  .clinic-login-brand h1 { font-size: 28px; }
}

body[data-path="login"] .page-card label, body[data-path="login"] input::placeholder { color: #586f79; }

/* Keep native sign-in controls readable and reachable at larger text sizes. */
body[data-path="login"] .page-card :is(input, button) { font-size: 16px; min-height: 44px; }
body[data-path="login"] .page-card .btn-primary { background: #3561bf; border-color: #3561bf; color: #fff; }
body[data-path="login"] .page-card .btn-primary:hover { background: #294e9c; border-color: #294e9c; }
.clinic-login-brand { padding-inline: 16px; overflow-wrap: anywhere; }