/* ─── Reset (box-sizing + html/body margins via Tailwind preflight). */
    body {
      background: var(--stone-50);
      color: var(--stone-800);
      font-family: var(--body);
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }
    img { max-width: 100%; display: block; }
    a { color: var(--teal); }
    button { font-family: inherit; cursor: pointer; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
      }
    }

    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    /* ─── Shared page split ───────────────────────────────────────────
       Left: centered form card (~58%). Right: a quiet visual moment.
       On mobile (≤960): form only. */
    :where(.si-shell, .pp-shell, .fp-shell, .sp-shell) {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    }
    :where(.si-form-col, .pp-form-col, .fp-form-col, .sp-form-col) {
      display: flex; flex-direction: column;
      padding: 36px 28px 28px;
      min-height: 100vh;
    }
    :where(.si-form-wrap, .pp-form-wrap, .fp-form-wrap, .sp-form-wrap) {
      flex: 1;
      display: flex; align-items: center; justify-content: center;
      width: 100%;
    }
    :where(.si-form-card, .pp-form-card, .fp-form-card, .sp-form-card) {
      width: 100%;
      max-width: 420px;
    }

    .sp-form-card { max-width: 460px; }

    /* ─── Shared side panel (right column) ────────────────────────── */
    :where(.si-side, .pp-side, .fp-side, .sp-side) {
      background: linear-gradient(180deg, #F0FDFA 0%, var(--stone-50) 100%);
      border-left: 1px solid var(--stone-200);
      padding: 36px;
      display: flex; flex-direction: column; justify-content: center;
      position: relative; overflow: hidden;
    }

    .pp-side {
      background:
        radial-gradient(40% 50% at 80% 15%, var(--teal-tint-2) 0%, transparent 65%),
        linear-gradient(180deg, var(--teal-tint) 0%, var(--stone-50) 100%);
    }

    /* ─── Shared top row: logo + link ─────────────────────────────── */
    :where(.si-top, .pp-top, .fp-top, .sp-top) {
      display: flex; align-items: center; justify-content: space-between;
      max-width: 420px; width: 100%; margin-inline: auto;
    }
    .sp-top { max-width: 460px; }
    :where(.si-logo, .pp-logo, .fp-logo, .sp-logo) {
      display: inline-flex; align-items: center; text-decoration: none;
    }
    :where(.si-back, .pp-staff-link, .fp-back, .sp-back) {
      font-size: 13px; color: var(--stone-500); text-decoration: none;
      display: inline-flex; align-items: center; gap: 6px;
    }
    :where(.si-back, .pp-staff-link, .fp-back, .sp-back):hover {
      color: var(--ink);
    }

    /* ─── Shared headline ─────────────────────────────────────────── */
    :where(.si-h1, .pp-h1, .fp-h1, .sp-h1) {
      font-family: var(--display);
      font-size: 36px; font-weight: 700; letter-spacing: -0.025em;
      line-height: 1.1; color: var(--ink);
      margin: 18px 0 0; text-wrap: pretty;
    }
    .sp-h1 { font-size: 32px; }
    :where(.si-sub, .pp-sub, .fp-sub, .sp-sub) {
      margin: 12px 0 32px; font-size: 15px; line-height: 1.6;
      color: var(--stone-600); text-wrap: pretty;
    }
    .si-sub { line-height: 1.55; }
    .sp-sub { margin-bottom: 24px; }

    /* ─── Shared eyebrow pill (si is brand-teal; fp/sp are neutral) ── */
    :where(.si-eyebrow, .fp-eyebrow, .sp-eyebrow) {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 12px; border-radius: 999px;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .si-eyebrow {
      background: var(--teal-tint); border: 1px solid var(--teal-edge);
      color: var(--teal);
    }
    :where(.fp-eyebrow, .sp-eyebrow) {
      background: var(--stone-100); border: 1px solid var(--stone-200);
      color: var(--stone-700);
    }
    :where(.fp-eyebrow, .sp-eyebrow) svg { color: var(--stone-500); }

    /* ─── Shared form field + input ───────────────────────────────── */
    :where(.si-field, .pp-field, .fp-field, .sp-field) {
      display: block; margin-bottom: 16px;
    }

    :where(.si-field, .sp-field) > span:first-child:not(.si-field-row),
    :where(.pp-field, .fp-field) > span {
      display: block; font-size: 12px; font-weight: 600;
      color: var(--stone-700); margin-bottom: 6px;
    }
    :where(.si-input, .pp-input, .fp-input, .sp-input) {
      width: 100%; padding: 13px 14px;
      background: #fff; border: 1px solid var(--stone-300); border-radius: 12px;
      font-family: var(--body); font-size: 15px; color: var(--ink);
      outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease;
    }
    :where(.si-input, .pp-input, .fp-input, .sp-input):focus {
      border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,107,0.18);
    }
    :where(.si-input, .pp-input, .fp-input, .sp-input)::placeholder {
      color: var(--stone-400);
    }

    .sp-input { padding-right: 44px; }
    .sp-input.is-error {
      border-color: var(--error);
      box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
    }

    .si-field-row {
      display: flex; align-items: baseline;
      justify-content: space-between; gap: 12px;
    }
    .si-field-link {
      font-size: 12px; font-weight: 600; color: var(--teal);
      text-decoration: none;
    }
    .si-field-link:hover { color: var(--teal-dark); text-decoration: underline; }

    /* ─── Shared password wrapper + show/hide toggle (si + sp) ────── */
    :where(.si-password, .sp-password) { position: relative; display: block; }
    .si-password-input { padding-right: 44px; }
    :where(.si-password-toggle, .sp-password-toggle) {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      width: 32px; height: 32px; border-radius: 8px;
      background: transparent; border: none; color: var(--stone-500);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    :where(.si-password-toggle, .sp-password-toggle):hover {
      color: var(--ink); background: var(--stone-100);
    }
    :where(.si-password-toggle, .sp-password-toggle):focus-visible {
      outline: 2px solid var(--teal); outline-offset: 2px;
    }

    :where(.si-password-toggle, .sp-password-toggle) svg[hidden] {
      display: none !important;
    }

    /* ─── Shared primary button ───────────────────────────────────── */
    :where(.si-btn, .pp-btn, .fp-btn, .sp-btn) {
      width: 100%; padding: 14px 22px;
      background: var(--teal); color: #fff;
      border: none; border-radius: 12px;
      font-family: var(--body); font-size: 15px; font-weight: 600;
      cursor: pointer; box-shadow: var(--shadow-cta);
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background-color 0.12s ease, transform 0.06s ease;
    }
    :where(.si-btn, .pp-btn, .fp-btn):hover { background: var(--teal-dark); }
    .sp-btn:hover:not(:disabled) { background: var(--teal-dark); }
    :where(.si-btn, .pp-btn, .fp-btn, .sp-btn):active { transform: translateY(1px); }
    .si-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
    .sp-btn:disabled {
      background: var(--stone-200); color: var(--stone-500);
      cursor: not-allowed; box-shadow: none;
    }

    /* ─── Shared secondary button (pp + fp + sp) ──────────────────── */
    :where(.pp-btn-secondary, .fp-btn-secondary, .sp-btn-secondary) {
      flex: 1; padding: 12px 18px;
      background: #fff; color: var(--teal);
      border: 1px solid var(--teal); border-radius: 12px;
      font-family: var(--body); font-size: 14px; font-weight: 600;
      cursor: pointer; text-decoration: none;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    }
    :where(.pp-btn-secondary, .fp-btn-secondary, .sp-btn-secondary):hover {
      background: var(--teal-tint);
    }

    /* ─── Shared microcopy below the button ───────────────────────── */
    :where(.si-micro, .pp-micro, .fp-micro, .sp-micro) {
      margin-top: 14px; font-size: 12px; color: var(--stone-500);
      text-align: center; line-height: 1.5;
    }

    /* ─── Shared divider (si + pp) ────────────────────────────────── */
    :where(.si-divider, .pp-divider) {
      display: flex; align-items: center; gap: 12px;
      margin: 28px 0 20px;
      font-size: 11px; font-weight: 600; color: var(--stone-400);
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .pp-divider { margin-bottom: 16px; }
    :where(.si-divider, .pp-divider)::before,
    :where(.si-divider, .pp-divider)::after {
      content: ''; flex: 1; height: 1px; background: var(--stone-200);
    }

    /* ─── Shared footer line ──────────────────────────────────────── */
    :where(.si-footer, .pp-footer, .fp-footer, .sp-footer) {
      padding-top: 24px;
      font-size: 12px; color: var(--stone-500); text-align: center;
    }
    :where(.si-footer, .pp-footer, .fp-footer, .sp-footer) a {
      color: var(--stone-600); text-decoration: none;
    }
    :where(.si-footer, .pp-footer, .fp-footer, .sp-footer) a:hover {
      color: var(--ink);
    }

    /* ─── Shared side-panel content ───────────────────────────────── */
    :where(.si-side-eyebrow, .pp-side-eyebrow, .fp-side-eyebrow, .sp-side-eyebrow) {
      font-size: 11px; font-weight: 700; color: var(--teal);
      letter-spacing: 0.1em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 8px;
    }
    :where(.pp-side-dot, .fp-side-dot, .sp-side-dot, .fp-sent-dot) {
      width: 6px; height: 6px; border-radius: 3px; background: var(--teal);
    }
    :where(.si-side-quote, .pp-side-quote, .fp-side-quote, .sp-side-quote) {
      margin-top: 22px;
      font-family: var(--display); font-size: 28px; font-weight: 500;
      letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
      max-width: 420px; text-wrap: pretty;
    }
    .si-side-quote { line-height: 1.15; }
    :where(.si-side-quote, .pp-side-quote, .fp-side-quote, .sp-side-quote) em {
      color: var(--teal); font-style: italic; font-weight: 400;
    }

    :where(.si-side-trust, .pp-side-trust) {
      position: absolute; left: 36px; bottom: 32px;
      font-size: 12px; color: var(--stone-500);
      display: flex; align-items: center; gap: 8px;
    }
    :where(.si-side-trust, .pp-side-trust) strong {
      color: var(--ink); font-weight: 700;
    }

    /* ─── Sign-in (si-) extras ────────────────────────────────────── */
    .si-side-vignette {
      margin-top: 36px;
      transform: rotate(-1.5deg);
      transform-origin: center;
    }

    .si-pet-card {
      padding: 16px 18px;
      background: #fff; border: 1px solid var(--stone-200); border-radius: 14px;
      display: flex; align-items: center; gap: 12px;
      text-decoration: none; color: inherit;
      transition: border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
    }
    .si-pet-card:hover {
      border-color: var(--teal-edge); box-shadow: var(--shadow-card);
    }
    .si-pet-card:active { transform: translateY(1px); }
    .si-pet-card-content { flex: 1; min-width: 0; }
    .si-pet-card-arrow {
      color: var(--teal); flex-shrink: 0;
      transition: transform 0.15s ease;
    }
    .si-pet-card:hover .si-pet-card-arrow {
      transform: translateX(3px);
    }
    .si-paw {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      background: #FBE3D8; border: 1.5px solid #E8B59A;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 18px;
    }
    .si-pet-card-title {
      font-family: var(--display); font-size: 14px; font-weight: 700;
      color: var(--ink); letter-spacing: -0.01em;
    }
    .si-pet-card-body {
      font-size: 13px; color: var(--stone-600); margin-top: 3px; line-height: 1.5;
    }

    .si-card {
      width: 360px; max-width: 100%;
      background: #fff; border-radius: 16px;
      border: 1px solid var(--stone-200);
      box-shadow: var(--shadow-card);
      overflow: hidden;
    }
    .si-avatar--cat    { background: var(--avatar-cat-bg);    border: 1.5px solid var(--avatar-cat-edge); }
    .si-avatar--dog    { background: var(--avatar-dog-bg);    border: 1.5px solid var(--avatar-dog-edge); }
    .si-avatar--rabbit { background: var(--avatar-rabbit-bg); border: 1.5px solid var(--avatar-rabbit-edge); }
    .si-row-meta { min-width: 0; }
    .si-badge {
      display: inline-flex; align-items: center;
      padding: 2px 8px; border-radius: 999px;
      background: var(--stone-100); color: var(--stone-700);
      border: 1px solid var(--stone-200);
      font-size: 10px; font-weight: 600; white-space: nowrap;
    }
    .si-badge--success { background: var(--success-bg); color: var(--success);   border-color: #BBE9D6; }

    /* ─── Pet-portal (pp-) extras ─────────────────────────────────── */

    .pp-eyebrow-paw {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 700; color: var(--teal);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .pp-eyebrow-paw-icon {
      width: 32px; height: 32px; border-radius: 50%;
      background: #FBE3D8; border: 1.5px solid #E8B59A;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 15px;
    }
    .pp-h1 .pp-wave {
      display: inline-block;
      transform-origin: 70% 70%;
      animation: pp-wave 1.6s 0.3s ease-in-out 2;
    }
    @keyframes pp-wave {
      0%, 60%, 100% { transform: rotate(0); }
      10%, 30%      { transform: rotate(-12deg); }
      20%, 40%      { transform: rotate(14deg); }
    }
    .pp-newhere {
      padding: 16px 18px;
      background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: 14px;
      font-size: 13px; color: var(--stone-600); line-height: 1.55;
    }
    .pp-newhere strong { color: var(--ink); font-family: var(--display); font-size: 14px; }

    .pp-phone-wrap {
      margin-top: 40px;
      display: flex; align-items: center; gap: 24px;
    }
    .pp-phone {
      width: 220px; flex-shrink: 0;
      background: #fff; border-radius: 28px;
      border: 6px solid var(--stone-800); overflow: hidden;
      box-shadow: 0 16px 32px -8px rgba(15,23,42,0.20);
      transform: rotate(-2deg);
      transform-origin: center bottom;
    }

    .pp-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--display); font-weight: 700;
      color: var(--stone-700); font-size: 12px; flex-shrink: 0;
    }
    .pp-avatar--cat { background: var(--avatar-cat-bg); border: 1.5px solid var(--avatar-cat-edge); }

    .pp-alt { margin-top: 4px; }
    .pp-alt > summary {
      list-style: none; cursor: pointer; user-select: none;
      text-align: center; padding: 8px 0;
      font-size: 13px; font-weight: 600; color: var(--teal);
    }
    .pp-alt > summary::-webkit-details-marker { display: none; }
    .pp-alt > summary:hover { color: var(--teal-dark); }
    .pp-alt[open] > summary { margin-bottom: 8px; }
    .pp-alt-form { display: flex; flex-direction: column; gap: 14px; }

    /* ─── Shared "sent" state (pp + fp) ───────────────────────────── */
    :where(.pp-sent, .fp-sent) { text-align: center; }
    :where(.pp-sent-icon, .fp-sent-icon) {
      width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 22px;
      background: var(--teal-tint); color: var(--teal);
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    :where(.pp-sent-icon, .fp-sent-icon)::after {
      content: ''; position: absolute; inset: -8px; border-radius: 50%;
      border: 2px solid var(--teal-edge); opacity: 0.6;
    }
    :where(.pp-sent-email, .fp-sent-email, .fp-side-item strong, .sp-side-item strong) {
      font-family: var(--display); font-weight: 700; color: var(--ink);
    }
    :where(.pp-sent-hint, .fp-sent-hint) {
      margin-top: 26px; padding: 14px 16px;
      background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: 12px;
      font-size: 13px; color: var(--stone-600); line-height: 1.55; text-align: left;
    }
    :where(.pp-sent-hint, .fp-sent-hint) strong { color: var(--ink); }
    :where(.pp-sent-actions, .fp-sent-actions, .sp-invalid-actions) {
      margin-top: 22px; display: flex; gap: 10px;
    }

    /* ─── Forgot-password (fp-) extras ────────────────────────────── */
    .fp-back-row {
      margin-top: 24px; padding-top: 20px;
      border-top: 1px solid var(--stone-200);
      text-align: center;
      font-size: 13px; color: var(--stone-600);
    }
    .fp-back-row a {
      color: var(--teal); font-weight: 600; text-decoration: none;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .fp-back-row a:hover { color: var(--teal-dark); text-decoration: underline; }
    .fp-sent-tag {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; color: var(--teal);
      letter-spacing: 0.08em; text-transform: uppercase;
      justify-content: center;
    }

    :where(.fp-side-list, .sp-side-list) {
      margin-top: 36px; max-width: 420px;
      display: grid; gap: 14px;
    }
    :where(.fp-side-item, .sp-side-item) {
      display: flex; gap: 12px; align-items: flex-start;
      font-size: 13px; color: var(--stone-700); line-height: 1.5;
    }
    .fp-side-check {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      background: var(--teal-tint); color: var(--teal); margin-top: 1px;
      display: inline-flex; align-items: center; justify-content: center;
    }

    /* ─── Set-password (sp-) extras ───────────────────────────────── */

    .sp-account {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; margin-bottom: 24px;
      background: var(--stone-50); border: 1px solid var(--stone-200);
      border-radius: 12px;
    }
    .sp-account-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--teal-tint); color: var(--teal);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--display); font-weight: 700; font-size: 13px;
      flex-shrink: 0;
    }
    .sp-account-label {
      font-size: 11px; font-weight: 600; color: var(--stone-500);
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .sp-account-email {
      font-size: 14px; font-weight: 600; color: var(--ink);
      font-family: ui-monospace, Menlo, monospace;
      margin-top: 2px;
    }

    .sp-strength { margin-top: -4px; margin-bottom: 16px; }
    .sp-strength-bar {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
      margin-bottom: 10px;
    }
    .sp-strength-segment {
      height: 4px; border-radius: 999px;
      background: var(--stone-200);
      transition: background-color 0.18s ease;
    }
    .sp-strength--weak  .sp-strength-segment:nth-child(-n+1) { background: #C2410C; }
    .sp-strength--fair  .sp-strength-segment:nth-child(-n+2) { background: #B45309; }
    .sp-strength--good  .sp-strength-segment:nth-child(-n+3) { background: var(--teal); }
    .sp-strength--strong .sp-strength-segment              { background: var(--teal); }

    .sp-strength-label {
      font-size: 11px; font-weight: 700; color: var(--stone-500);
      letter-spacing: 0.06em; text-transform: uppercase;
      display: flex; justify-content: space-between; align-items: center;
    }
    .sp-strength-label span:last-child { color: var(--stone-700); }
    .sp-strength--weak   .sp-strength-label span:last-child { color: #C2410C; }
    .sp-strength--fair   .sp-strength-label span:last-child { color: #B45309; }
    .sp-strength--good   .sp-strength-label span:last-child { color: var(--teal); }
    .sp-strength--strong .sp-strength-label span:last-child { color: var(--teal); }

    .sp-match {
      margin: -6px 0 18px; font-size: 12px;
      display: flex; align-items: center; gap: 6px;
      color: var(--stone-500);
    }
    .sp-match.is-ok    { color: var(--success); }
    .sp-match.is-error { color: var(--error); }

    .sp-invalid { text-align: center; }
    .sp-invalid-icon {
      width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 22px;
      background: var(--warning-bg); color: var(--warning);
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--warning-edge);
    }
    .sp-invalid-hint {
      margin-top: 22px; padding: 14px 16px;
      background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: 12px;
      font-size: 13px; color: var(--stone-600); line-height: 1.55; text-align: left;
    }
    .sp-invalid-hint strong { color: var(--ink); }

    .sp-side-bullet {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      background: var(--teal-tint); color: var(--teal); margin-top: 1px;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--display); font-weight: 700; font-size: 11px;
    }

    /* ─── Shared responsive collapse ──────────────────────────────── */
    @media (max-width: 960px) {
      :where(.si-shell, .pp-shell, .fp-shell, .sp-shell) {
        grid-template-columns: 1fr;
      }
      :where(.si-side, .pp-side, .fp-side, .sp-side) { display: none; }
      :where(.si-form-col, .pp-form-col, .fp-form-col, .sp-form-col) {
        padding: 28px 24px;
      }
    }
    @media (max-width: 480px) {
      :where(.si-h1, .pp-h1, .fp-h1) { font-size: 30px; }
      .sp-h1 { font-size: 28px; }
      :where(.si-sub, .pp-sub, .fp-sub) { margin-bottom: 24px; }
      :where(.si-form-col, .pp-form-col, .fp-form-col, .sp-form-col) {
        padding: 20px 20px 32px;
      }
    }

    /* ─── Auth flash banner (app-added, not from a ported design) ──────
       The si-/fp-/sp-/pp- designs have no flash slot, so the auth layout
       floats Devise/rate-limit messages as a fixed top banner. Default is
       the alert (error) style; .auth-flash--notice switches it to success. */
    .auth-flash {
      position: fixed;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      max-width: calc(100% - 32px);
      padding: 10px 16px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 8px 18px -6px rgba(15, 23, 42, .20);
      background: var(--error-bg);
      color: var(--error);
      border: 1px solid var(--error-edge);
    }
    .auth-flash--notice {
      background: var(--success-bg);
      color: var(--success);
      border: 1px solid var(--success-edge);
    }