/*
 * Design tokens + primitive classes — Bunto Design System v2.
 *
 * Source: docs/design/bunto-design-system.html (root of repo).
 * Loaded by Propshaft via @import in application.css.
 *
 * Coexists with Tailwind: primitives are class-scoped (.btn, .input, .alert,
 * .auth-shell). Element selectors and Tailwind utilities are NOT overridden,
 * so legacy screens (onboarding, painel, admin console) keep their Tailwind
 * look. New screens opt-in by using these classes.
 *
 * Fonts: self-hosted woff2 em rails/app/assets/fonts/ — não usa Google Fonts
 * para não adicionar subprocessador (docs/legal/subprocessadores.md). São
 * variable fonts (um arquivo cobre todos os pesos).
 */

/* Resets globais — alinhados com Tailwind Preflight pra que telas com ou sem
 * Tailwind se comportem igual. Sem isso, telas standalone (login, painel,
 * onboarding) precisariam de resets locais espalhados. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url("/assets/BricolageGrotesque-latin-3084aa15.woff2") format("woff2-variations"),
       url("/assets/BricolageGrotesque-latin-3084aa15.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  src: url("/assets/Manrope-latin-757d91ba.woff2") format("woff2-variations"),
       url("/assets/Manrope-latin-757d91ba.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand-primary:   #0010FE;
  --brand-deep:      #000AAD;
  --brand-vivid:     #2B3EFF;
  --brand-pale:      #EAECFF;
  --brand-ghost:     #F3F4FF;

  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FA;
  --neutral-100: #EFF1F5;
  --neutral-200: #DEE2EA;
  --neutral-300: #C2C9D6;
  --neutral-400: #8C96A8;
  --neutral-500: #5C6878;
  --neutral-600: #3A4352;
  --neutral-700: #222B38;
  --neutral-800: #131A24;
  --neutral-900: #080D13;

  --success-bg:     #EDFAF4; --success-border: #6EE7B7;
  --success-text:   #065F46; --success-solid:  #10B981;
  --warning-bg:     #FFFBEB; --warning-border: #FCD34D;
  --warning-text:   #92400E; --warning-solid:  #F59E0B;
  --danger-bg:      #FEF2F2; --danger-border:  #FCA5A5;
  --danger-text:    #991B1B; --danger-solid:   #EF4444;
  --info-bg:        #EFF6FF; --info-border:    #93C5FD;
  --info-text:      #1E40AF; --info-solid:     #3B82F6;

  --bg-page:    var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-raised:  var(--neutral-0);
  --bg-sunken:  var(--neutral-100);

  --text-primary:   var(--neutral-800);
  --text-secondary: var(--neutral-500);
  --text-tertiary:  var(--neutral-400);
  --text-link:      var(--brand-primary);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  --shadow-xs:    0 1px 2px rgba(8, 13, 20, .04);
  --shadow-sm:    0 1px 3px rgba(8, 13, 20, .06), 0 1px 2px rgba(8, 13, 20, .04);
  --shadow-md:    0 4px 8px rgba(8, 13, 20, .06), 0 2px 4px rgba(8, 13, 20, .03);
  --shadow-lg:    0 10px 20px rgba(8, 13, 20, .07), 0 4px 8px rgba(8, 13, 20, .04);
  --shadow-xl:    0 20px 40px rgba(8, 13, 20, .09), 0 8px 16px rgba(8, 13, 20, .04);
  --shadow-brand: 0 4px 18px rgba(0, 16, 254, .22);

  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 100ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;
}

[data-theme="dark"] {
  --bg-page:    #0B1017;
  --bg-surface: #141C26;
  --bg-raised:  #1B2433;
  --bg-sunken:  #09101A;
  --text-primary:   #ECF0F7;
  --text-secondary: #8C96A8;
  --text-tertiary:  #5C6878;
  --border-subtle:  rgba(255, 255, 255, .04);
  --border-default: rgba(255, 255, 255, .08);
  --border-strong:  rgba(255, 255, 255, .14);
  --brand-pale:  rgba(0, 16, 254, .14);
  --brand-ghost: rgba(0, 16, 254, .07);
  --neutral-0:   #1B2433;
  --neutral-50:  #141C26;
  --neutral-100: #1B2433;
  --neutral-200: rgba(255, 255, 255, .07);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, .6);
}

/* ============================================================================
 * Button primitives
 * ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.01em;
}

.btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.btn-sm { font-size: var(--text-xs);  padding: 6px 12px;  border-radius: var(--radius-sm); }
.btn-md { font-size: var(--text-sm);  padding: 10px 18px; border-radius: var(--radius-md); }
.btn-lg { font-size: var(--text-base); padding: 13px 24px; border-radius: var(--radius-lg); }

.btn-primary {
  background: var(--brand-primary);
  color: #FFF;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  background: var(--brand-deep);
  box-shadow: 0 6px 24px rgba(0, 16, 254, .3);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border-default);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  border-color: var(--border-strong);
  background: var(--bg-sunken);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid transparent;
}
.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-sunken);
}

.btn-outline-brand {
  background: var(--brand-ghost);
  color: var(--brand-primary);
  border: 1.5px solid rgba(0, 16, 254, .18);
}
.btn-outline-brand:hover {
  background: var(--brand-pale);
  border-color: rgba(0, 16, 254, .35);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1.5px solid var(--danger-border);
}
.btn-danger:hover {
  background: var(--danger-solid);
  color: #FFF;
  border-color: var(--danger-solid);
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: .38;
  pointer-events: none;
  transform: none;
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* ============================================================================
 * Input primitives
 * ========================================================================== */

.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--dur-fast),
              box-shadow var(--dur-fast);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--text-tertiary); }
.input:hover        { border-color: var(--border-strong); }
.input:focus        {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 16, 254, .1);
}
.input.is-error        { border-color: var(--danger-solid); }
.input.is-error:focus  { box-shadow: 0 0 0 3px rgba(239, 68, 68, .1); }

.input-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 6px;
}
.input-hint  { font-size: 11px; color: var(--text-tertiary); margin-top: 5px; }
.input-error { font-size: 11px; color: var(--danger-solid);  margin-top: 5px; }

.input-group { position: relative; }
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}
.input-icon + .input { padding-left: 36px; }

.input-affix {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.input-affix:hover { color: var(--text-primary); background: var(--bg-sunken); }
.input-group .input { padding-right: 44px; }

/* ============================================================================
 * Alert primitives
 * ========================================================================== */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--text-sm);
  line-height: 1.65;
}
.alert-icon  { font-size: var(--text-md); flex-shrink: 0; line-height: 1.65; }
.alert-title { font-weight: 700; margin-bottom: 2px; }

.al-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.al-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.al-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text);  }
.al-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text);    }

/* ============================================================================
 * Auth shell — layout fiel ao mockup `docs/screens/login.html`.
 *
 * Mobile-as-canonical (375px): coluna única com wordmark + card branco.
 * Desktop ≥900px: painel escuro fixo à esquerda (wordmark + tagline +
 * features + footer) e card centralizado à direita sobre fundo claro.
 *
 * Tokens locais:
 *   --auth-amber  — accent do "i" no wordmark (identidade visual da marca).
 *   --auth-brand  — usa --brand-primary global pra manter consistência com
 *                   o resto do app (painel, admin console, etc).
 * ========================================================================== */

.auth-shell {
  --auth-amber: #FFC233;
  --auth-brand: var(--brand-primary);
  --auth-brand-deep: var(--brand-deep);
  --auth-border-faint: rgba(8, 13, 20, .06);
  --auth-border-soft:  rgba(8, 13, 20, .10);
  --auth-border-strong:rgba(8, 13, 20, .16);

  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--neutral-50);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}

/* Reset escopado: o app não tem reset global (Tailwind não é carregado nas
 * telas Devise). Sem border-box, inputs `width: 100%` mais padding/border
 * estouram o card. */
.auth-shell, .auth-shell *, .auth-shell *::before, .auth-shell *::after {
  box-sizing: border-box;
}

/* ── Left panel: desktop only ──────────────────────────────────────────── */
.auth-shell__panel-left,
.ob-panel-left { display: none; }

/* ── Right / main area ─────────────────────────────────────────────────── */
.auth-shell__panel-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--neutral-50);
}

.auth-shell__screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 24px 40px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

/* ── Wordmark (mobile) ─────────────────────────────────────────────────── */
.auth-shell__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: center;
  margin-bottom: 36px;
  color: var(--neutral-800);
}
.auth-shell__wordmark .i  { color: var(--auth-amber); }
.auth-shell__wordmark .dot { color: var(--auth-brand); }

/* ── Card ──────────────────────────────────────────────────────────────── */
.auth-shell__card {
  background: var(--neutral-0);
  border: 1px solid var(--auth-border-faint);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(8, 13, 20, .06);
}

.auth-shell__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--neutral-800);
  margin-bottom: 4px;
}

.auth-shell__card-sub {
  font-size: 14px;
  color: var(--neutral-500);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ── Alert (in-card) ───────────────────────────────────────────────────── */
.auth-shell__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.auth-shell__alert--danger {
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}
.auth-shell__alert--success {
  border: 1px solid var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}
.auth-shell__alert-icon { flex-shrink: 0; margin-top: 1px; line-height: 1; }

/* ── Form ──────────────────────────────────────────────────────────────── */
.auth-shell__form { display: block; }

.auth-shell__field { display: flex; flex-direction: column; gap: 4px; }
.auth-shell__form > .auth-shell__field + .auth-shell__field { margin-top: 14px; }

.auth-shell__field-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-shell__field-label {
  font-weight: 500;
  font-size: 12px;
  color: var(--neutral-500);
}

.auth-shell__field-forgot {
  font-size: 12px;
  font-weight: 500;
  color: var(--auth-brand);
  text-decoration: none;
  transition: opacity 120ms var(--ease-out);
}
.auth-shell__field-forgot:hover { opacity: .75; }

.auth-shell__field-err {
  font-size: 12px;
  color: var(--danger-solid);
  display: none;
  margin-top: 2px;
}
.auth-shell__field-err.show { display: block; }

/* ── Input (escopado: difere do .input global) ─────────────────────────── */
.auth-shell__input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--neutral-800);
  background: var(--neutral-0);
  border: 1px solid var(--auth-border-soft);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 120ms var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.auth-shell__input::placeholder { color: var(--neutral-300); }
.auth-shell__input:hover { border-color: var(--auth-border-strong); }
.auth-shell__input:focus { border: 2px solid var(--auth-brand); padding: 0 11px; }
.auth-shell__input.err   { border: 2px solid var(--danger-solid); padding: 0 11px; }

/* ── Password wrapper ──────────────────────────────────────────────────── */
.auth-shell__pw-wrap { position: relative; }
.auth-shell__pw-wrap .auth-shell__input { padding-right: 44px; }
.auth-shell__pw-wrap .auth-shell__input:focus,
.auth-shell__pw-wrap .auth-shell__input.err { padding-right: 43px; }

.auth-shell__pw-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--neutral-400);
  transition: color 120ms var(--ease-out);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.auth-shell__pw-btn:hover { color: var(--neutral-600); }

/* ── Submit ────────────────────────────────────────────────────────────── */
.auth-shell__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin-top: 24px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  background: var(--auth-brand);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: background 120ms var(--ease-out),
              transform 100ms var(--ease-out);
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.auth-shell__submit:hover  { background: var(--auth-brand-deep); }
.auth-shell__submit:active { transform: scale(.98); }
.auth-shell__submit:focus-visible {
  outline: 2px solid var(--auth-brand);
  outline-offset: 2px;
}

.auth-shell__submit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Footers ───────────────────────────────────────────────────────────── */
.auth-shell__footer {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neutral-400);
  text-align: center;
  line-height: 1.6;
}

/* Linha legal abaixo do card — usa a fonte do corpo para ler bem em mobile,
 * separada do __footer monospace pra não competir visualmente. */
.auth-shell__legal {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 1.5;
}
.auth-shell__legal-link {
  color: var(--auth-brand);
  text-decoration: none;
  font-weight: 500;
}
.auth-shell__legal-link:hover { text-decoration: underline; }

.auth-shell__form-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--neutral-500);
}

.auth-shell__link {
  color: var(--auth-brand);
  text-decoration: none;
  font-weight: 600;
}
.auth-shell__link:hover { color: var(--auth-brand-deep); text-decoration: underline; }

/* ── Desktop ≥900px: two-column layout ─────────────────────────────────── */
@media (min-width: 900px) {
  .auth-shell {
    background: var(--neutral-900);
    flex-direction: row;
  }

  .auth-shell__panel-left,
  .ob-panel-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 400px;
    flex-shrink: 0;
    background: var(--neutral-900);
    padding: 48px 40px 80px;
    position: sticky;
    top: 0;
    height: 100vh;
  }


  /* ─── Left panel — design compartilhado ─────────────────────────────────
   * Aplica-se ao auth-shell (login, recuperar, redefinir) e ao ob-shell
   * (convite). Mesma silhueta, conteúdo diferente: o auth-shell exibe
   * features (SVG icons) e o ob-shell exibe steps numerados.
   * Mudanças aqui afetam as 4 telas. */
  .auth-shell__left-wordmark,
  .ob-left-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
    margin-bottom: 24px;
  }
  /* Brand amber locked (DESIGN.md). Hardcoded porque cada shell define seu
   * próprio --auth-amber / --ob-amber local — convergir no literal evita
   * arrastar o token pra global. */
  .auth-shell__left-wordmark .i,
  .ob-left-wordmark .i { color: #FFC233; }
  .auth-shell__left-wordmark .dot,
  .ob-left-wordmark .dot { color: rgba(255, 255, 255, .2); }

  .auth-shell__left-tag,
  .ob-left-tag {
    font-size: 18px;
    font-weight: 500;
    color: var(--neutral-100);
    line-height: 1.5;
    letter-spacing: -.01em;
    max-width: 320px;
    margin-bottom: 40px;
  }

  .auth-shell__left-features,
  .ob-left-steps {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .auth-shell__feat,
  .ob-left-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .auth-shell__feat-icon,
  .ob-left-step-num {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Tipografia exclusiva do step-num (auth-shell usa SVG aqui). */
  .ob-left-step-num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-200);
  }

  .auth-shell__feat-title,
  .ob-left-step-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--neutral-100);
    line-height: 1.3;
  }

  .auth-shell__feat-sub,
  .ob-left-step-sub {
    font-size: 13px;
    color: var(--neutral-400);
    line-height: 1.45;
    margin-top: 2px;
  }

  /* Footer ancorado no rodapé do painel sem empurrar o conteúdo principal —
   * assim wordmark + tagline + features/steps ficam verticalmente centrados. */
  .auth-shell__left-footer,
  .ob-left-footer {
    position: absolute;
    bottom: 32px;
    left: 40px;
    right: 40px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-400);
    line-height: 1.6;
  }

  .auth-shell__heart {
    display: inline-block;
    vertical-align: -1px;
    margin: 0 1px;
  }

  .auth-shell__panel-right {
    background: var(--neutral-50);
    justify-content: center;
    align-items: center;
    padding: 48px;
  }

  .auth-shell__screen {
    padding: 0;
    justify-content: center;
  }

  /* mobile wordmark some — desktop tem o do painel esquerdo */
  .auth-shell__wordmark { display: none; }

  .auth-shell__card { padding: 32px 28px; }
  .auth-shell__card-title { font-size: 22px; }
}

@media (max-width: 375px) {
  .auth-shell__screen { padding: 32px 16px 24px; }
  .auth-shell__card { padding: 24px 20px; border-radius: var(--radius-lg); }
}

/*
 * Body typography: opt-in via .auth-shell para não interferir com Tailwind /
 * onboarding / painel. Quando o resto do app migrar, basta aplicar
 * `font-family: var(--font-body)` no `body` global e remover este escopo.
 */