/* auth.css — extracted from base.html (2026-07-10 CSS abstraction, plan A).
   The Jinja-injected theme block (:root and the dark override) stays inline in
   base.html; this file holds the static login/card layout for auth pages. */

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      min-height: 100vh;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: var(--gray-text);
      background: var(--bg);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    body::before {
      content: ''; position: fixed; inset: 0;
      background: var(--blob-1), var(--blob-2), var(--blob-3), var(--blob-4), var(--bg);
      z-index: -1; pointer-events: none;
    }
    body { display: flex; align-items: center; justify-content: center; padding: 1rem; }

    .card {
      width: 100%; max-width: 400px;
      background: var(--surface-solid);
      border: 1px solid var(--gray-line);
      border-radius: 14px;
      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;
      text-align: center;
      margin-bottom: 4px;
    }
    .card .subtitle {
      text-align: center;
      color: var(--gray-soft);
      font-size: 12px;
      margin-bottom: 1.5rem;
    }
    label {
      display: block; margin: 0.85rem 0 0.3rem;
      font-weight: 600; font-size: 11px; color: var(--gray-soft);
      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(--gray-text);
      border: 1px solid var(--gray-line);
      border-radius: 8px;
      background: var(--surface-solid);
      font-family: inherit;
    }
    input:focus {
      outline: 2px solid var(--purple-soft); outline-offset: -1px;
      border-color: var(--purple);
    }
    button[type=submit] {
      width: 100%;
      margin-top: 1.25rem;
      padding: 10px 16px;
      background: var(--purple); border: 1px solid var(--purple);
      color: #fff; border-radius: 8px;
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    button[type=submit]:hover { background: var(--purple-mid); border-color: var(--purple-mid); }
    a { color: var(--purple); text-decoration: none; font-size: 12px; }
    a:hover { text-decoration: underline; }
    .error {
      color: var(--negative); background: rgba(168, 90, 90, 0.08);
      padding: 8px 12px; border-radius: 6px;
      font-size: 12px; margin: 0.75rem 0 0;
    }
    .ok {
      color: var(--positive); background: rgba(90, 138, 122, 0.08);
      padding: 8px 12px; border-radius: 6px;
      font-size: 12px; margin: 0.75rem 0 0;
    }
    .footer-link {
      text-align: center; margin-top: 1.25rem; font-size: 12px; color: var(--gray-soft);
    }