:root {
      color-scheme: light;
      --bg: #eef4f6;
      --ink: #162330;
      --muted: #5f7180;
      --line: #d5e0e6;
      --panel: #ffffff;
      --accent: #0f766e;
      --accent-dark: #0b5f59;
      --danger: #b91c1c;
    }
    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    body {
      margin: 0;
      background: linear-gradient(145deg, #f7fbfc 0%, var(--bg) 100%);
      color: var(--ink);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.45;
    }
    button, input { font: inherit; }
    .login-shell {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }
    .login-card {
      width: min(430px, 100%);
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 18px 50px rgba(22, 35, 48, 0.12);
      padding: 28px;
    }
    .login-logo {
      display: block;
      width: 88px;
      height: 88px;
      object-fit: contain;
      margin: 0 auto 16px;
    }
    .login-title { text-align: center; margin-bottom: 22px; }
    .login-title h2 { margin: 0 0 6px; font-size: 24px; }
    .meta, .help, .login-copyright { color: var(--muted); font-size: 14px; }
    form { display: grid; gap: 14px; }
    label { display: grid; gap: 6px; font-weight: 700; }
    input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 13px 14px;
      background: #fff;
      color: var(--ink);
      min-height: 48px;
      outline: none;
    }
    input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
    }
    .password-field {
      display: grid;
      grid-template-columns: 1fr 48px;
      align-items: stretch;
    }
    .password-field input {
      border-radius: 8px 0 0 8px;
      border-right: 0;
    }
    .password-toggle {
      border: 1px solid var(--line);
      border-radius: 0 8px 8px 0;
      background: #f7fafb;
      color: var(--ink);
      cursor: pointer;
      min-height: 48px;
      display: grid;
      place-items: center;
    }
    .password-toggle svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .password-toggle .eye-open,
    .password-toggle .eye-closed {
      transform-origin: center;
      transition: opacity 160ms ease, transform 180ms ease;
    }
    .password-toggle .eye-open {
      opacity: 0;
      transform: scale(0.82);
    }
    .password-toggle .eye-closed {
      opacity: 1;
      transform: scale(1);
    }
    .password-toggle[aria-pressed="true"] .eye-open {
      opacity: 1;
      transform: scale(1);
    }
    .password-toggle[aria-pressed="true"] .eye-closed {
      opacity: 0;
      transform: scale(0.82);
    }
    button[type="submit"] {
      border: 0;
      border-radius: 8px;
      background: var(--accent);
      color: #fff;
      padding: 13px 18px;
      font-weight: 800;
      cursor: pointer;
      min-height: 48px;
    }
    button[type="submit"]:hover { background: var(--accent-dark); }
    .alert.danger {
      background: #fff1f1;
      border: 1px solid #fecaca;
      color: var(--danger);
      border-radius: 8px;
      padding: 10px 12px;
      margin: 0 0 14px;
      font-weight: 700;
    }
    .login-copyright { text-align: center; margin: 18px 0 0; }
    @media (max-width: 520px) {
      .login-shell { padding: 14px; place-items: start center; }
      .login-card { margin-top: 18px; padding: 22px; }
      .login-logo { width: 74px; height: 74px; }
    }