@charset "ISO-8859-1";

  :root {
    /* slightly larger default to avoid iOS zoom */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Prevent Safari zoom-on-focus */
  input, select, textarea, button {
    font-size: 16px;
  }

  body {
    margin: 0;
    background: #f7f7f8;
  }

  .auth-wrap {
    /* Use modern viewport units to prevent 100vh jump */
    min-height: 100svh;            /* small viewport (excludes browser UI) */
    min-height: 100dvh;            /* dynamic viewport (newer iOS/Safari) */
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;  /* reduce rubber-banding jumps */
    background: #f7f7f8;
  }

  .auth-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    padding: 1.25rem;              /* slightly tighter on mobile */
  }

  .auth-card h1 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .muted { color: #666; font-size: .95rem; margin: 0 0 1rem; }
  form.auth-form { display: grid; gap: .9rem; }
  .field { display: grid; gap: .4rem; }
  .field label { font-weight: 600; font-size: .95rem; }

  .input {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid #d7d7db; border-radius: 10px;
    font: inherit; background: #fff;
    -webkit-appearance: none; appearance: none;
  }
  .input:focus {
    outline: none; border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  }

  .pw-row {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: .5rem;
  }

  .btn {
    display: inline-flex; justify-content: center; align-items: center;
    gap: .5rem; padding: .85rem 1rem;
    border: 0; border-radius: 10px;
    background: #0a7; color: #fff; font-weight: 600; cursor: pointer;
    width: 100%;                      /* full-width on mobile = less jitter */
    -webkit-tap-highlight-color: transparent;
  }
  .btn:disabled { opacity: .6; cursor: not-allowed; }

  .link-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; font-size: .95rem; flex-wrap: wrap;
  }
  .link-row a { color: #0a7; text-decoration: none; }
  .link-row a:hover { text-decoration: underline; }

  .alert { padding: .65rem .8rem; border-radius: 10px; font-size: .95rem; }
  .alert.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
  .alert.info  { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }

  .note { color: #6b7280; font-size: .9rem; margin-top: .6rem; }
  .caps { color:#b45309; font-size:.85rem; display:none; }

  /* Small phones: tighten spacing slightly */
  @media (max-width: 420px) {
    .auth-wrap { padding: 1.25rem .75rem; }
    .auth-card { padding: 1rem; border-radius: 14px; }
    .auth-card h1 { font-size: 1.35rem; }
  }