* { box-sizing: border-box; }
    /* This page links only auth.css, so it cannot use the tokens.css custom
       properties or its global focus ring. The palette values are written out. */
    /* dvh after vh so browsers without dynamic viewport units still get a
       value: 100vh on a phone includes the area under the URL bar, which
       pushes a centred card off the bottom of what is actually visible. */
    body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #f8fafc; color: #0f172a;
      padding: clamp(14px, 4vw, 24px); }
    a { color: #1a73e8; text-decoration: none; }
    .card { width: 100%; max-width: 400px; background: #fff; border: 1px solid #e2e8f0;
      border-radius: 18px; padding: clamp(20px, 6vw, 32px);
      box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.1); }
    .logo { font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-bottom: 6px; }
    h1 { font-size: 22px; margin: 14px 0 4px; letter-spacing: -.02em; }
    .muted { color: #64748b; font-size: 15px; margin: 0 0 22px; }
    label { display: block; font-weight: 650; font-size: 14px; margin: 16px 0 6px; }
    input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #e2e8f0;
      background: #fff; color: #0f172a; font: inherit; }
    /* Kept explicit: there is no tokens.css on this page to supply the shared ring. */
    input:focus { outline: 2px solid #1a73e8; border-color: transparent; }
    button { width: 100%; margin-top: 22px; padding: 13px; border: 0; border-radius: 10px; cursor: pointer;
      font-weight: 700; font-size: 15px; color: #fff; background: #1a73e8; }
    /* Password reveal. The button sits inside the field's border so it reads as
       part of the input rather than as a control floating beside it. Every
       property the bare button rule above sets has to be undone here, because
       that rule is written for the submit button: full width, blue, 22px down.
       A class outranks the element selector, so this wins on specificity and not
       just on source order. */
    .password-field { position: relative; }
    .password-field input { padding-right: 62px; }
    .password-toggle { position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
      width: auto; margin: 0; padding: 6px 10px; border: 0; border-radius: 8px;
      background: none; color: #1a73e8; font: inherit; font-size: 13px; font-weight: 650;
      line-height: 1.4; cursor: pointer; }
    .password-toggle:hover { background: #eef4ff; }
    /* The page has no tokens.css, so the focus ring is written out like the one
       on input:focus above. Without it the toggle is reachable by keyboard and
       gives no sign of it. */
    .password-toggle:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; }
    .error { background: #fee2e2; border: 1px solid #fecaca; color: #b91c1c; font-size: 14px;
      padding: 10px 12px; border-radius: 10px; margin-bottom: 6px; }
    .alt { text-align: center; color: #64748b; font-size: 14px; margin-top: 20px; }
    /* Landscape phones, and any other short viewport. Grid centring clips the
       top of an item that overflows its track and the clipped part cannot be
       scrolled back into view, which is exactly what happens to this card once
       the on-screen keyboard opens. Past this height the card stops being
       centred and sits in normal flow, where the page can scroll it. */
    @media (max-height: 560px) {
      body { display: block; }
      .card { margin: 0 auto; }
    }