/* auth.css — login/card layout for the auth pages (base.html children).
   Restyled 2026-08-11 to the Jordan's Dashboard mockup (stage 4 of the style
   overhaul): flat background (no blobs), token ramp from _theme.html /
   web/branding.py. The Jinja-injected theme block stays in base.html includes. */

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      min-height: 100vh;
      font-family: var(--font);
      color: var(--gray-text);
      background: var(--bg);
      font-size: 13.5px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    body { display: flex; align-items: center; justify-content: center; padding: 1rem; }

    .card {
      width: 100%; max-width: 400px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 2.2rem;
      box-shadow: var(--shadow-md);
    }
    .card-logo {
      display: flex; justify-content: center; margin-bottom: 1.5rem;
    }
    .card-logo img { height: 38px; }
    .card h1 {
      font-size: 18px; font-weight: 700;
      letter-spacing: -0.3px;
      color: var(--ink);
      text-align: center;
      margin-bottom: 4px;
    }
    .card .subtitle {
      text-align: center;
      color: var(--ink-3);
      font-size: 12px;
      margin-bottom: 1.5rem;
    }
    label {
      display: block; margin: 0.85rem 0 0.3rem;
      font-weight: 600; font-size: 11px; color: var(--ink-2);
      text-transform: uppercase; letter-spacing: 0.4px;
    }
    input[type=email], input[type=password], input[type=text] {
      width: 100%; padding: 9px 12px;
      font-size: 13px;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--surface);
      font-family: inherit;
    }
    input:focus {
      outline: 2px solid var(--purple-soft); outline-offset: -1px;
      border-color: var(--brand);
    }
    button[type=submit] {
      width: 100%;
      margin-top: 1.25rem;
      padding: 10px 16px;
      background: var(--brand); border: 1px solid var(--brand);
      color: #fff; border-radius: 9px;
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    button[type=submit]:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
    a { color: var(--brand); text-decoration: none; font-size: 12px; }
    a:hover { color: var(--brand-deep); text-decoration: underline; }
    .error {
      color: var(--bad); background: var(--bad-soft);
      padding: 8px 12px; border-radius: 8px;
      font-size: 12px; margin: 0.75rem 0 0;
    }
    .ok {
      color: var(--ok); background: var(--ok-soft);
      padding: 8px 12px; border-radius: 8px;
      font-size: 12px; margin: 0.75rem 0 0;
    }
    .footer-link {
      text-align: center; margin-top: 1.25rem; font-size: 12px; color: var(--ink-3);
    }