:root {
      --midnight: var(--color-bg-body, #0f172a);
      --midnight-900: var(--color-bg-body, #05070f);
      --glass: var(--color-surface-1, rgba(8, 13, 26, 0.78));
      --accent-sky: #4facfe;
      --accent-lavender: #9479ff;
      --accent-mint: #34d399;
      --text-primary: var(--color-text-main, #f8fafc);
      --text-muted: var(--color-text-muted, rgba(248, 250, 252, 0.72));
      --border: var(--color-border-subtle, rgba(148, 121, 255, 0.22));
      --transition: all 0.35s ease;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1.5rem;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      color: var(--text-primary);
      background: radial-gradient(circle at top left, rgba(79, 172, 254, 0.18), transparent 45%),
        radial-gradient(circle at bottom right, rgba(148, 121, 255, 0.18), transparent 55%),
        linear-gradient(170deg, var(--midnight-900) 0%, var(--color-bg-body, #020409) 100%);
    }

    .auth-shell {
      width: 100%;
      max-width: 1080px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 3rem;
      background: var(--color-surface-1);
      border-radius: 32px;
      border: 1px solid var(--color-border-subtle);
      position: relative;
      padding: 3.5rem 3rem;
      box-shadow: 0 45px 110px rgba(79, 172, 254, 0.22);
      overflow: hidden;
    }

    .auth-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(79, 172, 254, 0.18), transparent 70%);
      opacity: 0.7;
      pointer-events: none;
    }

    .auth-column {
      position: relative;
      z-index: 1;
    }

    .brand-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.6rem 1.25rem;
      border-radius: 999px;
      background: var(--color-surface-1);
      border: 1px solid var(--color-border-strong);
      box-shadow: 0 18px 45px rgba(79, 172, 254, 0.28);
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 1.75rem;
      text-decoration: none;
      color: var(--text-primary);
    }

    .brand-chip img {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      object-fit: cover;
      border: 1px solid var(--color-border-strong);
    }

    .brand-chip-text {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      background: linear-gradient(135deg, var(--accent-sky), var(--accent-lavender));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .auth-heading h1 {
      /* QA R5: 'Poppins' has no CJK glyphs and generic sans-serif alone
         tofu'd on systems without a CJK font — add the Noto Sans SC /
         PingFang / Microsoft YaHei chain (same pattern as the body rule
         above), matching fonts-noto-sc.css now loaded on this page. */
      font-family: 'Poppins', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      font-size: clamp(2.1rem, 4vw, 3rem);
      margin: 0 0 1rem;
      letter-spacing: -0.015em;
      /* `balance` keeps multi-word headlines from breaking awkwardly
         (audit 2026-05-11: "A private AI thinking partner." was breaking
         to `A private AI thinking` / `partner.` on the column). */
      text-wrap: balance;
    }

    .auth-heading p {
      margin: 0 0 2.2rem;
      color: var(--text-muted);
      font-size: 1.05rem;
      line-height: 1.8;
    }

    /* Matches the landing hero's `.text-gradient` (marketing.css). Redefined
       here rather than loading marketing.css: that file carries the whole
       nav/hero/section system and this page needs one rule.
       ⚠️ The stops are marketing.css's OWN `--gradient-brand` values, NOT the
       `--accent-sky`/`--accent-lavender` pair the brand chip above uses. Those
       are #4FACFE/#9479FF, which marketing.css:22 explicitly REJECTED for
       failing WCAG AA on this background (2.42:1). #2273D6 (4.68:1) and
       #7355E2 (5.09:1) both clear AA. Verified computed-equal to the live
       landing H1 in both standard and cozy. */
    .text-gradient {
      background: linear-gradient(135deg, #2273D6 0%, #7355E2 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Centred at every width. The VERTICAL centring is desktop-only: below
       768px the columns stack and this one becomes a short header above the
       form, where centring it in leftover height would just push the form
       down. */
    .auth-shell > .auth-column:first-child {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    @media (min-width: 768px) {
      .auth-shell > .auth-column:first-child { justify-content: center; }
    }

    .auth-panel {
      background: var(--color-surface-2);
      border-radius: 24px;
      border: 1px solid var(--color-border-strong);
      padding: 2.6rem 2.4rem;
      box-shadow: 0 35px 90px rgba(79, 172, 254, 0.22);
      backdrop-filter: blur(16px);
    }

    .auth-panel h2 {
      margin: 0 0 0.4rem;
      font-size: 1.85rem;
    }

    .auth-panel p {
      margin: 0 0 2rem;
      color: var(--color-text-muted);
    }

    .auth-panel form {
      display: grid;
      gap: 1.2rem;
    }

    label {
      display: block;
      font-weight: 600;
      margin-bottom: 0.35rem;
    }

    input {
      width: 100%;
      padding: 0.78rem 1rem;
      border-radius: 15px;
      border: 1px solid var(--color-border-strong);
      background: var(--color-surface-2);
      color: var(--text-primary);
      font-size: 1rem;
      /* QA R5 tofu fix: this page doesn't load reset.css (which has the
         site-wide `input,button,textarea,select{font:inherit}` reset), so
         form controls fell back to the UA default font — no CJK glyphs,
         tofu'd both the placeholder and typed Chinese text. */
      font-family: inherit;
      transition: var(--transition);
    }

    input:focus {
      outline: none;
      border-color: var(--color-border-strong);
      box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.15);
    }

    .primary-btn {
      width: 100%;
      margin-top: 0.4rem;
      padding: 0.9rem 1rem;
      border-radius: 18px;
      border: none;
      font-weight: 600;
      background: linear-gradient(135deg, var(--accent-mint), var(--accent-sky));
      color: #05080f;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 22px 45px rgba(79, 172, 254, 0.28);
    }

    .primary-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 26px 55px rgba(52, 211, 153, 0.35);
    }

    .banner {
      background: rgba(220, 38, 38, 0.15);
      border: 1px solid rgba(248, 113, 113, 0.35);
      color: #fecaca;
      padding: 0.8rem 1rem;
      border-radius: 14px;
      font-size: 0.92rem;
    }

    .divider {
      margin: 2rem 0;
      text-align: center;
      color: var(--color-text-dim);
      position: relative;
      font-size: 0.9rem;
    }

    .divider::before,
    .divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 35%;
      height: 1px;
      background: var(--color-border-subtle);
    }

    .divider::before {
      left: 0;
    }

    .divider::after {
      right: 0;
    }

    .muted-link {
      text-align: center;
      color: var(--color-text-dim);
      font-size: 0.96rem;
      margin-top: 1.6rem;
    }

    .muted-link a {
      color: var(--accent-sky);
      font-weight: 600;
    }

    .muted-link a:hover {
      text-decoration: underline;
    }

    @media (max-width: 960px) {
      body {
        padding: 1.5rem;
      }

      .auth-shell {
        padding: 2.6rem 2.2rem;
        border-radius: 26px;
      }
    }

    @media (max-width: 640px) {
      body {
        padding: 1rem;
      }

      .auth-shell {
        padding: 2.3rem 1.7rem;
        border-radius: 22px;
      }

      .auth-panel {
        padding: 2.2rem 1.7rem;
      }

      /* Surface the form above the marketing column — the marketing
         copy consumed more than a full viewport height on mobile,
         pushing the actual sign-up form below the fold. Putting the
         form first lifts it above the fold; the pitch still appears
         below for users who want to read it before signing up. */
      .auth-shell .auth-column:nth-of-type(2) { order: 1; }
      .auth-shell .auth-column:nth-of-type(1) { order: 2; }
    }

    /* Honeypot hidden style */
    .hp-field {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 0;
      width: 0;
      z-index: -1;
    }

    /* Back-to-home link inside the form panel (P-03) */
    .back-to-home {
      display: inline-block;
      margin-bottom: 1rem;
      padding: 0.45rem 0.85rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-text-main);
      text-decoration: none;
      background: rgba(79, 172, 254, 0.1);
      border: 1px solid var(--color-border-subtle);
    }
    .back-to-home:hover,
    .back-to-home:focus-visible {
      background: rgba(79, 172, 254, 0.2);
      color: #ffffff;
    }

    /*
      P-04 password toggle.
      !important is needed to defeat the global
      `button:not(.icon-btn):not(.danger)` rule in styles.css which
      forces every plain <button> to `position: relative` + gradient
      background. See the matching block in login.html.
    */
    .password-field {
      position: relative;
    }
    .password-field input {
      width: 100%;
      padding-right: 4.2rem !important;
    }
    .password-field .password-toggle {
      position: absolute !important;
      top: 50% !important;
      right: 0.5rem !important;
      left: auto !important;
      transform: translateY(-50%) !important;
      padding: 0.45rem 0.8rem !important;
      /* WCAG 2.5.5 — 44×44 tap target at every viewport (was 32 min) */
      min-height: 44px !important;
      min-width: 44px !important;
      width: auto !important;
      height: auto !important;
      background: rgba(79, 172, 254, 0.18) !important;
      background-image: none !important;
      border: 1px solid var(--color-border-strong) !important;
      border-radius: 8px !important;
      color: var(--color-text-main) !important;
      font-size: 0.78rem !important;
      font-weight: 600 !important;
      line-height: 1 !important;
      cursor: pointer;
      letter-spacing: 0.02em;
      box-shadow: none !important;
      z-index: 2;
    }
    .password-field .password-toggle:hover,
    .password-field .password-toggle:focus-visible {
      background: rgba(79, 172, 254, 0.3) !important;
    }

    /* Google Sign-In slot — see matching block in login.html */
    .google-signin-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 44px;
      margin-top: 0.25rem;
    }
    .google-signin-slot > div {
      display: flex !important;
      justify-content: center !important;
    }
    @media (max-width: 480px) {
      .back-to-home,
      .password-field .password-toggle {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }
      a[href*="login"], input[type="checkbox"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 0;
      }
    }

    :root[data-ux-mode="cozy"] input:-webkit-autofill,
    :root[data-ux-mode="cozy"] input:-webkit-autofill:hover,
    :root[data-ux-mode="cozy"] input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--color-text-main);
      box-shadow: inset 0 0 0 1000px var(--color-surface-2);
      transition: background-color 5000s ease-in-out 0s;
    }

    /* ── Cozy mode — additive cream restyle of the bespoke dark auth shell.
       Standard (dark) mode is untouched; every rule is gated on
       [data-ux-mode="cozy"]. Uses --cozy-* tokens from cozy-theme.css.
       Contrast verified ≥4.5:1 AA in a live browser (2026-05-29). ── */
    :root[data-ux-mode="cozy"] body {
      background: var(--cozy-paper, #F7EFE0);
      color: var(--cozy-ink, #1A2438);
    }
    :root[data-ux-mode="cozy"] .auth-shell {
      background: var(--cozy-paper-elevated, #FFFBF2);
      border: 1px solid rgba(166, 130, 85, 0.25);
      box-shadow: 0 30px 80px rgba(90, 60, 30, 0.12);
    }
    :root[data-ux-mode="cozy"] .auth-shell::before { background: none; }
    :root[data-ux-mode="cozy"] .auth-panel {
      background: var(--cozy-paper, #F7EFE0);
      border: 1px solid rgba(166, 130, 85, 0.25);
      box-shadow: none;
    }
    /* Landing parity: marketing.css turns the gradient span italic-serif in
       cozy. `--font-serif` is defined by cozy-theme.css, which this page
       loads, so it resolves here too. */
    :root[data-ux-mode="cozy"] .text-gradient {
      background: linear-gradient(135deg, #B69763 0%, #C66B6B 100%);
      font-style: italic;
      font-family: var(--font-serif);
    }
    :root[data-ux-mode="cozy"] .brand-chip {
      background: var(--cozy-paper-elevated, #FFFBF2);
      border-color: rgba(166, 130, 85, 0.30);
      color: var(--cozy-ink, #1A2438);
    }
    :root[data-ux-mode="cozy"] .brand-chip-text {
      background: linear-gradient(135deg, var(--cozy-rose, #A8475F), var(--cozy-gold, #B69763));
      -webkit-background-clip: text;
      background-clip: text;
    }
    :root[data-ux-mode="cozy"] .auth-heading h1,
    :root[data-ux-mode="cozy"] .auth-panel h2,
    :root[data-ux-mode="cozy"] label { color: var(--cozy-ink, #1A2438); }
    :root[data-ux-mode="cozy"] .auth-heading p,
    :root[data-ux-mode="cozy"] .auth-panel p,
    :root[data-ux-mode="cozy"] .divider,
    :root[data-ux-mode="cozy"] .muted-link { color: var(--cozy-ink-muted, #5A5540); }
    /* Inline-styled near-white text (password hint span, consent label,
       terms/privacy links) needs !important to beat the element style="". */
    :root[data-ux-mode="cozy"] label span,
    :root[data-ux-mode="cozy"] label[for="regConsent"],
    :root[data-ux-mode="cozy"] label[for="regAge"] { color: var(--cozy-ink-muted, #5A5540) !important; }
    :root[data-ux-mode="cozy"] .muted-link a,
    :root[data-ux-mode="cozy"] a[href="/terms.html"],
    :root[data-ux-mode="cozy"] a[href="/privacy.html"],
    :root[data-ux-mode="cozy"] a[href="/chinese/terms.html"],
    :root[data-ux-mode="cozy"] a[href="/chinese/privacy.html"] { color: var(--cozy-rose-dark, #8F3A4F) !important; }
    :root[data-ux-mode="cozy"] #consentError { color: #B3261E !important; }
    :root[data-ux-mode="cozy"] input {
      background: var(--cozy-paper-elevated, #FFFBF2);
      color: var(--cozy-ink, #1A2438);
      border: 1px solid rgba(166, 130, 85, 0.35);
    }
    :root[data-ux-mode="cozy"] input::placeholder { color: rgba(26, 36, 56, 0.55); }
    :root[data-ux-mode="cozy"] .back-to-home {
      background: rgba(166, 130, 85, 0.12);
      /* !important: cozy-theme.css has a global [data-ux-mode=cozy] a{color:--cozy-rose}
         (5.63:1 on white but only 4.31:1 on this tinted card) — force the darker
         rose-dark (7.28:1) so the link clears AA. */
      color: var(--cozy-rose-dark, #8F3A4F) !important;
      border: 1px solid rgba(166, 130, 85, 0.30);
    }
    :root[data-ux-mode="cozy"] .back-to-home:hover,
    :root[data-ux-mode="cozy"] .back-to-home:focus-visible {
      background: rgba(166, 130, 85, 0.20);
      color: var(--cozy-rose-dark, #8F3A4F) !important;
    }
    :root[data-ux-mode="cozy"] .password-field .password-toggle {
      background: rgba(168, 71, 95, 0.12) !important;
      color: var(--cozy-rose-dark, #8F3A4F) !important;
      border: 1px solid rgba(166, 130, 85, 0.35) !important;
    }
    :root[data-ux-mode="cozy"] .password-field .password-toggle:hover,
    :root[data-ux-mode="cozy"] .password-field .password-toggle:focus-visible {
      background: rgba(168, 71, 95, 0.20) !important;
    }
    :root[data-ux-mode="cozy"] .primary-btn {
      background: linear-gradient(135deg, var(--cozy-rose, #A8475F), var(--cozy-rose-dark, #8F3A4F));
      color: #ffffff;
    }
    :root[data-ux-mode="cozy"] .divider::before,
    :root[data-ux-mode="cozy"] .divider::after { background: rgba(166, 130, 85, 0.30); }
  
      /* Checkbox-error hints (2026-07-18): hidden-attr toggled — the old
         inline style="display:none" + JS .style writes were CSP-blocked,
         so the hints never appeared. */
      .reg-field-error { color: #f87171; font-size: 0.82rem; margin-bottom: 0.5rem; }
      .reg-field-error[hidden] { display: none !important; }

    /* Restore a visible focus ring on these two (were outline:none with only a
       bg-alpha shift — WCAG 2.4.7) (QA R4). */
    .back-to-home:focus-visible,
    .password-field .password-toggle:focus-visible {
      outline: 3px solid var(--accent-cyan, #4FACFE) !important;
      outline-offset: 2px;
    }

/* QA R13: the cookie-consent banner is z-index 99999 — validation errors must
   never hide behind it for first-visit users. */
#register-error.banner { z-index: 100001; }