@layer components {
html[data-route="/signup"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally omitted) */
  --black-bg: #050505;
  --black-card: #0A0A0A;
  --black-soft: #111111;
  --red-primary: #FF1A1A;
  --orange-accent: #FF6A00;
  --gray-border: #2A2A2A;
  --gray-light: var(--gray-light,#C2C2C2);
  --white-bright: #F5F5F5;
  --hairline: rgba(255,255,255,0.06);
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  .skip { position: absolute; top: -100px; left: 0; padding: 8px 16px; background: var(--red-primary); color: #fff; z-index: 100; }
  .skip:focus { top: 0; }

  /* Standalone auth page (no #sns-chrome / .app grid, matches /signin):
     full-viewport centering. Kept page-scoped here rather than added to
     core.css's signin/forgot/reset route-scoped .auth-shell block, since
     /signup already owns its own per-route stylesheet. */
  .auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-inline: clamp(1rem, .808rem + .8929vw, 1.5rem);
    padding-top: max(env(safe-area-inset-top, 0px), 24px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
    background:
      radial-gradient(circle at 15% 12%, rgba(255, 45, 45, .14), transparent 42%),
      radial-gradient(circle at 85% 88%, rgba(255, 106, 0, .10), transparent 46%),
      var(--black-bg);
  }

  .auth-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--black-card);
    border: 1px solid var(--gray-border);
    border-radius: 14px;
    padding: 32px 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--hairline) inset;
    animation: signup-auth-in .42s cubic-bezier(.2,.7,.3,1) both;
  }

  .auth-eyebrow {
    display: block;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .22em;
    color: var(--orange-accent);
    margin-bottom: 8px;
  }
  .auth-title {
    font-family: var(--f-display);
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: .01em;
    margin: 0 0 8px;
  }
  .auth-sub { margin: 0 0 24px; color: var(--gray-light); font-size: 16px; line-height: 1.5; }

  .fld { display: flex; flex-direction: column; margin-bottom: 16px; }
  .fld label { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--white-bright); }
  .fld input {
    appearance: none;
    background: var(--black-soft);
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    color: var(--white-bright);
    font: inherit;
    font-size: 16px;
    padding: 13px 14px;
    min-height: 46px;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .fld input::placeholder { color: var(--text-faint,#9CA0A8); }
  .fld input:focus {
    outline: none;
    border-color: var(--red-primary);
    box-shadow: 0 0 0 3px rgba(255,26,26,.18);
  }
  .fld input.invalid { border-color: var(--red-primary); }
  .fld-err { min-height: 16px; margin-top: 5px; font-size: 16px; color: #FF6B6B; }

  .auth-formerr {
    margin: 4px 0 14px;
    min-height: 0;
    font-size: 16px;
    color: #FF6B6B;
  }
  .auth-formerr.show {
    min-height: 20px;
    padding: 10px 12px;
    background: rgba(255,26,26,.10);
    border: 1px solid rgba(255,26,26,.45);
    border-radius: 8px;
  }
  .auth-formerr a { color: var(--white-bright); font-weight: 600; }

  /* #833: canonical .btn--primary (tokens.css) — no local .btn/.btn-primary
     override here. See index.html's #submit-btn (.btn.btn--primary.btn--block). */

  .auth-alt { margin: 20px 0 0; text-align: center; font-size: 16px; color: var(--gray-light); }
  .auth-alt a { color: var(--orange-accent); font-weight: 600; text-decoration: none; }
  .auth-alt a:hover { text-decoration: underline; }

  @media (max-width: 480px) {
    .auth-card { padding: 18px 20px; border-radius: 12px; }
    .auth-title { font-size: 32px; }
    .auth-sub { margin-bottom: 14px; }
    /* AUD-34 band-aid (tightened field rhythm to clear the bottom tab bar)
       is superseded by the full de-chrome above — #sns-chrome is gone, so
       there's no bottom tab bar left to clear. Kept as compact mobile
       polish, not a bug workaround. */
    .fld { margin-bottom: 10px; }
    .fld label { margin-bottom: 4px; }
    .auth-eyebrow { margin-bottom: 4px; }
    .auth-title { margin-bottom: 4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .auth-card { animation: none; }
    .fld input { transition: none; }
  }
}
}