/* Register — shares the login visual system. Navy + blue, no gradients.
       Concrete hex (page loads only register.css, not base.css) so the submit
       button no longer renders transparent from undefined tokens. */
    :root {
      --navy:#0f172a;
      --blue:#2563eb;
      --blue-hover:#1d4ed8;
      --bg:#f8fafc;
      --surface:#ffffff;
      --border:#e2e8f0;
      --text:#0f172a;
      --body:#64748b;
      --muted:#94a3b8;
      --error:#dc2626; --error-bg:#fef2f2; --error-border:#fecaca;
      --ok:#047857; --ok-bg:#ecfdf5; --ok-border:#bbf7d0;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0; padding: 0; min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
      color: var(--text);
      background: var(--bg);
    }

    .auth-page {
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 32px 16px;
    }

    .auth-card {
      width: 100%;
      max-width: 420px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 36px 32px 28px;
      box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    }

    .auth-brand-name {
      font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
      color: var(--navy); margin-bottom: 26px;
    }

    .auth-title {
      margin: 0 0 20px; font-size: 24px; font-weight: 700;
      letter-spacing: -0.01em; color: var(--text);
    }

    .invite-banner {
      background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af;
      padding:11px 14px; border-radius:10px; font-size:13px; line-height:1.5;
      margin-bottom:18px;
    }

    .auth-alert {
      padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
      margin-bottom: 16px; display: none;
    }
    .auth-alert.show { display: block; }
    .auth-alert.error   { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
    .auth-alert.success { background: var(--ok-bg);    color: var(--ok);    border: 1px solid var(--ok-border); }

    .auth-field { margin-bottom: 16px; }
    .auth-field label {
      display: block; font-size: 13px; font-weight: 600;
      margin-bottom: 7px; color: var(--text);
    }
    .auth-field input {
      width: 100%; height: 44px; padding: 0 14px;
      font-size: 16px; font-family: inherit;
      color: var(--text); background: var(--surface);
      border: 1px solid var(--border); border-radius: 12px;
      transition: border-color 120ms, box-shadow 120ms;
    }
    .auth-field input:focus {
      outline: none; border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
    }
    .auth-field input[readonly] { background: var(--bg); color: var(--body); }

    .auth-submit {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; height: 44px; padding: 0 16px; margin-top: 4px;
      background: var(--blue); color: #fff; border: 0; border-radius: 8px;
      font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
      transition: background 120ms, transform 80ms;
    }
    .auth-submit:hover:not(:disabled) { background: var(--blue-hover); }
    .auth-submit:active:not(:disabled) { transform: translateY(1px); }
    .auth-submit:disabled { opacity: 0.7; cursor: not-allowed; }

    .auth-spinner {
      width: 16px; height: 16px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
      animation: auth-spin 720ms linear infinite; display: none;
    }
    .auth-submit.loading .auth-spinner { display: inline-block; }
    @keyframes auth-spin { to { transform: rotate(360deg); } }

    .auth-foot {
      margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--body);
    }
    .auth-foot a { color: var(--blue); text-decoration: none; font-weight: 600; }
    .auth-foot a:hover { text-decoration: underline; }

    .terms-note {
      margin: 14px 0 0; text-align: center; font-size: 12px;
      color: var(--muted); line-height: 1.5;
    }
    .terms-note a { color: var(--blue); text-decoration: none; }
    .terms-note a:hover { text-decoration: underline; }

    .auth-copyright {
      margin-top: 24px; text-align: center; font-size: 12px; color: var(--muted);
    }

    /* Password requirement checklist — appears on focus, ticks turn green */
    .pw-checklist {
      list-style: none; margin: 10px 0 0; padding: 0;
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
    }
    .pw-checklist[hidden] { display: none; }
    .pw-rule {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--muted); transition: color 120ms;
    }
    .pw-rule .pw-tick {
      width: 16px; height: 16px; border-radius: 50%;
      border: 1.5px solid var(--border); flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10px; line-height: 1; color: transparent; transition: all 120ms;
    }
    .pw-rule.met { color: var(--ok); }
    .pw-rule.met .pw-tick { background: var(--ok); border-color: var(--ok); color: #fff; }

    @media (max-width: 480px) {
      .auth-card { padding: 28px 22px 24px; border-radius: 14px; }
      .auth-title { font-size: 22px; }
      .auth-brand-name { font-size: 22px; }
      .pw-checklist { grid-template-columns: 1fr; }
    }