body.auth { background: var(--bg); min-height: 100vh; }
.auth-wrap { display: grid; grid-template-columns: 1.08fr 1fr; min-height: 100vh; }
.auth-brand { position: relative; overflow: hidden; background: var(--ink-950); color: #E8EDF8; padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; isolation: isolate; }
.auth-brand .mesh { position: absolute; inset: -20%; z-index: -1; background:
  radial-gradient(40% 35% at 20% 15%, rgba(42, 92, 240, .45), transparent 70%),
  radial-gradient(35% 30% at 85% 30%, rgba(13, 148, 136, .28), transparent 70%),
  radial-gradient(45% 40% at 60% 95%, rgba(184, 145, 63, .22), transparent 70%);
  filter: blur(8px); animation: drift 18s ease-in-out infinite alternate; }
.auth-brand::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 40% 40%, #000 30%, transparent 75%); }
@keyframes drift { to { transform: translate3d(3%, -2%, 0) scale(1.06); } }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { width: 42px; height: 42px; }
.logo strong { display: block; font-family: var(--font-display); font-size: 16px; color: #fff; letter-spacing: -.01em; }
.logo span { font-size: 11.5px; letter-spacing: .14em; color: #7CF0C0; font-weight: 700; }
.brand-mid { max-width: 540px; }
.brand-mid .tag { background: rgba(184,145,63,.14); color: #E3C47E; }
.brand-mid h1 { color: #fff; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; margin: 18px 0 14px; font-weight: 800; letter-spacing: -.035em; }
.brand-mid h1 em { font-style: normal; background: linear-gradient(90deg, #8FB1FF, #6EE7D8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-mid p { color: #AEB8CC; font-size: 15.5px; max-width: 480px; margin: 0 0 22px; }
.feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feats li { display: flex; gap: 10px; align-items: center; color: #D5DCEA; font-size: 14px; }
.feats li span { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(110, 231, 216, .12); color: #6EE7D8; font-size: 12px; font-weight: 800; flex: none; }
.preview { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(14px); padding: 16px 18px; border-radius: 16px; max-width: 460px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.preview .muted { color: #8E99B0; }
.pv-rows { margin: 10px 0 8px; display: grid; gap: 6px; min-height: 120px; }
.pv-row { display: flex; justify-content: space-between; font-size: 13px; color: #C7D0E2; animation: fadeUp .4s var(--ease) both; }
.pv-row b { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }
.pv-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.14); }
.pv-total span { font-size: 12px; color: #8E99B0; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.pv-total strong { font-family: var(--font-display); font-size: 26px; color: #6EE7D8; font-variant-numeric: tabular-nums; }

.auth-form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; gap: 18px; }
.form-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--sh-3); }
.form-card .tabs { width: 100%; margin-bottom: 22px; }
.form-card .tabs button { flex: 1; height: 38px; font-size: 13.5px; }
.pane { display: flex; flex-direction: column; gap: 14px; }
.pane h2 { font-size: 24px; font-weight: 800; }
.pane > p { margin: -8px 0 4px; }
.center { text-align: center; }
.eye { position: absolute; right: 6px; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.eye:hover { background: var(--bg-2); color: var(--text); }
.eye svg { width: 17px; height: 17px; }
.forca { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; margin-top: -4px; }
.forca i { height: 4px; border-radius: 4px; background: var(--line); transition: background .25s; }
.forca span { margin-left: 6px; }
.mobile-logo { display: none; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--font-display); }
.mobile-logo img { width: 34px; height: 34px; }
.foot { text-align: center; }
@media (max-width: 980px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .mobile-logo { display: flex; }
  .auth-form { min-height: 100vh; }
}
@media (max-width: 480px) { .form-card { padding: 22px 18px; border-radius: 18px; } }

/* ===== Primeira dobra: tudo cabe na altura da tela (desktop) ===== */
.g-nome { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
@media (max-width: 420px) { .g-nome { grid-template-columns: 1fr; } }
@media (min-width: 981px) {
  .auth-wrap { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .auth-brand { padding: clamp(18px, 4.2vh, 44px) clamp(32px, 4vw, 64px); gap: clamp(10px, 2.4vh, 28px); }
  .brand-top { flex: none; }
  .logo img { width: clamp(32px, 5vh, 42px); height: clamp(32px, 5vh, 42px); }
  .brand-mid { max-width: 560px; }
  .brand-mid h1 { font-size: clamp(25px, min(3.1vw, 5.4vh), 48px); margin: clamp(8px, 1.9vh, 18px) 0 clamp(6px, 1.5vh, 14px); }
  .brand-mid p { font-size: clamp(12.8px, 1.95vh, 15.5px); line-height: 1.5; max-width: 520px; margin-bottom: clamp(8px, 2.1vh, 22px); }
  .feats { gap: clamp(4px, 1.05vh, 10px); }
  .feats li { font-size: clamp(12.4px, 1.8vh, 14px); }
  .feats li span { width: clamp(17px, 2.7vh, 22px); height: clamp(17px, 2.7vh, 22px); }
  .preview { flex: none; padding: clamp(9px, 1.7vh, 16px) 18px; max-width: 480px; }
  .pv-rows { min-height: 0; gap: clamp(3px, .75vh, 6px); margin: clamp(5px, 1.1vh, 10px) 0 clamp(4px, .9vh, 8px); }
  .pv-total { padding-top: clamp(6px, 1.1vh, 10px); }
  .pv-total strong { font-size: clamp(19px, 3.1vh, 26px); }

  .auth-form { height: 100%; overflow-y: auto; padding: clamp(12px, 3vh, 32px) 24px; gap: clamp(8px, 1.8vh, 18px); }
  .form-card { padding: clamp(16px, 3.3vh, 28px) clamp(22px, 2vw, 30px); }
  .form-card .tabs { margin-bottom: clamp(10px, 2.4vh, 22px); }
  .form-card .tabs button { height: clamp(32px, 4.8vh, 38px); }
  .pane { gap: clamp(7px, 1.6vh, 14px); }
  .pane h2 { font-size: clamp(19px, 3.1vh, 24px); }
  .pane > p { margin: clamp(-8px, -1vh, -4px) 0 0; }
  .auth-form .field { gap: clamp(3px, .6vh, 6px); }
  .auth-form .input { height: clamp(36px, 5.4vh, 44px); }
  .auth-form .btn-lg { height: clamp(40px, 5.8vh, 48px); }
  .auth-form .grid { gap: clamp(8px, 1.4vh, 12px); }
}
/* telas baixas: enxuga a simulação para não passar da dobra */
@media (min-width: 981px) and (max-height: 860px) { .pv-row:nth-child(n+4) { display: none; } }
@media (min-width: 981px) and (max-height: 700px) { .pv-row:nth-child(n+3) { display: none; } .brand-mid p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }
@media (min-width: 981px) and (max-height: 600px) { .preview { display: none; } }
.input-group .eye ~ .input, .input-group .input:has(+ .eye) { padding-right: 42px; }
@media (min-width: 981px) and (max-height: 600px) { .brand-mid { margin: auto 0; } }