html, body{ height: 100%; }
body.auth-body{
  background: #fff;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

.auth-shell{
  width: 100vw;
  height: 100vh;
  display:grid;
  grid-template-columns: 64% 36%;
  background: #fff;
}

.auth-visual{
  position: relative;
  background:
    radial-gradient(circle at 75% 45%, rgba(116,55,225,.42) 0%, rgba(24,12,92,.15) 35%, transparent 60%),
    linear-gradient(135deg, var(--brand-navy-purple) 0%, var(--brand-deep-purple) 55%, #261075 100%);
  padding: clamp(48px, 8vh, 96px) clamp(56px, 6vw, 110px) clamp(48px, 7vh, 80px) clamp(64px, 6vw, 120px);
  display:flex; flex-direction:column; justify-content:center; gap:24px;
  overflow: hidden;
}
.auth-visual::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--brand-magenta) 0%, var(--brand-orange) 65%, var(--brand-yellow) 100%);
}
.auth-visual-logo{ position: relative; z-index: 2; max-width: 340px; width: 100%; height:auto; display:block; }
.auth-visual-copy{ position: relative; z-index: 2; color:#fff; max-width: 480px; }
.auth-visual-copy h1{ font-family: var(--font); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; }
.auth-visual-highlight{
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-visual-copy p{ margin:0; max-width: 460px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.76); font-weight: 500; }
.auth-visual-features{ position: relative; z-index: 2; display:flex; flex-wrap:wrap; gap: 28px; }
.auth-visual-feature{
  display:flex; align-items:center; gap: 10px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); line-height:1.3;
}
.auth-visual-feature-icon{
  width: 30px; height: 30px; border-radius: 10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(66,27,204,.3); color:#c4b3ff;
}

.auth-visual-orbit{
  position: absolute; z-index: 1;
  top: 50%; right: clamp(70px, 9vw, 140px);
  transform: translateY(-50%);
  width: 380px; height: 380px; max-width: 32vw; max-height: 32vw; min-width: 260px; min-height: 260px;
  display:flex; align-items:center; justify-content:center;
  pointer-events: none;
}
.auth-visual-orbit::before{
  content:""; position:absolute; inset: -25%;
  background: radial-gradient(circle, rgba(140,90,240,.35) 0%, rgba(140,90,240,.12) 45%, transparent 72%);
  filter: blur(6px);
}
.auth-visual-ring{
  position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 24px rgba(140,90,240,.15) inset;
}
.auth-visual-ring--1{ width: 66%; height:66%; }
.auth-visual-ring--2{ width: 100%; height:100%; border-color: rgba(255,255,255,.08); }
.auth-visual-core{
  position: relative; z-index: 2;
  width: 26%; height: 26%; min-width:78px; min-height:78px; border-radius: 24%;
  background: linear-gradient(150deg, #9d84ff 0%, #7d5cf0 45%, #4a2fc7 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transform: rotate(10deg);
  box-shadow:
    0 24px 55px -12px rgba(66,27,204,.7),
    inset 3px 4px 8px rgba(255,255,255,.4),
    inset -6px -8px 14px rgba(30,10,90,.5);
  animation: auth-orbit-glow 4s ease-in-out infinite;
}
.auth-visual-core-marks{ position:relative; transform: rotate(-10deg); }
.auth-visual-core-marks svg:first-child{ width: 46px; height: 46px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.auth-visual-core-marks svg:last-child{ position:absolute; top:-6px; right:-16px; width: 16px; height: 16px; opacity:.85; }
.auth-visual-spark{ position:absolute; z-index: 2; border-radius: 50%; animation: auth-orbit-twinkle 3s ease-in-out infinite; }
.auth-visual-spark--1{ top: 4%; left: 8%; width: 8px; height: 8px; background: var(--brand-magenta); box-shadow: 0 0 14px 3px rgba(242,41,134,.8); animation-delay: .1s; }
.auth-visual-spark--2{ bottom: 8%; left: 0%; width: 7px; height: 7px; background: #a98bff; box-shadow: 0 0 12px 3px rgba(169,139,255,.8); animation-delay: 1.1s; }
.auth-visual-spark--3{ top: 22%; right: -2%; width: 6px; height: 6px; background: var(--brand-orange); box-shadow: 0 0 12px 3px rgba(255,140,54,.8); animation-delay: 1.9s; }
.auth-visual-spark--4{ bottom: 26%; right: 6%; width: 5px; height: 5px; background: var(--brand-yellow); box-shadow: 0 0 10px 3px rgba(255,211,61,.8); animation-delay: .7s; }
.auth-visual-spark--5{ top: 46%; left: -3%; width: 5px; height: 5px; background: #a98bff; box-shadow: 0 0 10px 3px rgba(169,139,255,.7); animation-delay: 2.4s; }

@keyframes auth-orbit-glow{
  0%, 100%{ box-shadow: 0 24px 55px -12px rgba(66,27,204,.7), inset 3px 4px 8px rgba(255,255,255,.4), inset -6px -8px 14px rgba(30,10,90,.5); }
  50%{ box-shadow: 0 24px 65px -8px rgba(242,41,134,.55), inset 3px 4px 8px rgba(255,255,255,.45), inset -6px -8px 14px rgba(30,10,90,.5); }
}
@keyframes auth-orbit-twinkle{
  0%, 100%{ opacity:.35; transform: scale(.85); }
  50%{ opacity:1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .auth-visual-core, .auth-visual-spark{ animation: none; }
}
.auth-visual-pill{
  position:absolute; z-index: 3; pointer-events:auto;
  display:flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; color:#fff; white-space:nowrap;
}
.auth-visual-pill svg{ flex-shrink:0; color:#c4b3ff; }
.auth-visual-pill--sales{ top: 38%; left: -6%; }
.auth-visual-pill--releases{ top: 8%; right: 2%; }
.auth-visual-pill--fees{ top: 56%; right: -4%; }
.auth-visual-pill--settlement{ bottom: 2%; left: 34%; }
.auth-visual-feature svg{ flex-shrink:0; color:#a98bff; }

.auth-form-side{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 48px; overflow-y:auto; background:#fff; }
.auth-form{ width:100%; max-width: 440px; display:flex; flex-direction:column; }
.auth-form-fields{ display:flex; flex-direction:column; }
.auth-brand{ text-align:left; margin-bottom: 30px; font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }

.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  text-decoration:none; margin-bottom: 18px;
}
.back-link:hover{ color: var(--ink); }

.auth-heading{ text-align:left; margin-bottom: 32px; }
.auth-heading .auth-eyebrow{ display:block; font-size: 16px; font-weight: 500; color: #44445a; margin: 0 0 4px; }
.auth-heading .auth-product-logo{ height: 30px; width:auto; display:block; margin: 0 0 14px; }
.auth-heading h2{ font-family: var(--font); font-weight: 800; font-size: 24px; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; }
.auth-heading p{ margin:0; font-size: 16px; line-height:1.5; color: var(--ink-soft); font-weight: 500; }

.auth-alert{
  margin-bottom: 18px; padding: 11px 14px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.auth-alert--error{ background: var(--warn-soft); color: var(--warn-text); }
.auth-alert--ok{ background: var(--ok-soft); color: var(--ok-text); }
.auth-alert code{ display:block; margin-top:6px; word-break:break-all; font-size:11px; background:rgba(0,0,0,.06); padding:6px 8px; border-radius:6px; }

.field-group{ margin-bottom: 16px; }
.field-row-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-label{ display:block; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.field-control{ position: relative; display:flex; align-items:center; }
.field-icon{ position:absolute; left: 14px; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); pointer-events:none; }
.field-control input, .field-control select{
  width: 100%; height: 52px; font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid #daddea; border-radius: 8px;
  padding: 0 14px 0 40px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-control input::placeholder{ color: #a7aab3; }
.field-control input:focus, .field-control select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(66,27,204,.10); }
.field-control input[type="password"]{ padding-right: 42px; }
.field-toggle{ position:absolute; right: 12px; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); cursor:pointer; background:none; border:none; padding:2px; }
.field-toggle:hover{ color: var(--ink); }

.field-row{ display:flex; align-items:center; justify-content:space-between; margin: 4px 0 22px; }
.remember{ display:flex; align-items:center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor:pointer; user-select:none; }
.remember input{ width: 15px; height: 15px; accent-color: var(--ink); cursor:pointer; }
.forgot-link{ font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration:none; }
.forgot-link:hover{ text-decoration:underline; }

.terms-row{ display:flex; align-items:flex-start; gap: 9px; margin: 6px 0 22px; }
.terms-row input{ width: 15px; height: 15px; margin-top: 2px; accent-color: var(--ink); cursor:pointer; flex-shrink:0; }
.terms-row label{ font-size: 12px; font-weight: 500; color: var(--ink-soft); line-height: 1.55; cursor:pointer; }

.btn-primary{
  width:100%; height: 54px; background: var(--accent); color:#fff; border:none; border-radius: 8px;
  font-family: var(--font); font-size: 16px; font-weight: 600;
  cursor:pointer; transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover{ background: var(--accent-hover); }
.btn-primary:active{ background: var(--accent-active); transform: scale(.99); }
.btn-primary:disabled{ background: #b9adeb; cursor: not-allowed; }

.auth-signup-hint{ text-align:center; margin: 18px 0 0; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-wrap: balance; }
.auth-signup-hint a{ color: var(--accent); font-weight: 700; text-decoration:none; white-space: nowrap; }
.auth-signup-hint a:hover{ text-decoration:underline; }

/* Estado de carregamento genérico para botões de submit — evita duplo clique em ações que demoram */
button[type="submit"].is-submitting{ position: relative; cursor: wait; pointer-events: none; }
button[type="submit"].is-submitting .btn-loading-label{ visibility: hidden; }
button[type="submit"].is-submitting::after{
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: auth-btn-spin .7s linear infinite;
}
@keyframes auth-btn-spin{ to{ transform: rotate(360deg); } }

.btn-row{ display:flex; gap: 10px; }
.btn-row .btn-primary{ width:auto; flex:1; }
.btn-secondary{
  flex-shrink: 0; background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 13px 20px; font-family: var(--font);
  font-size: 13.5px; font-weight: 700; cursor:pointer; transition: background .15s ease;
}
.btn-secondary:hover{ background: var(--field); }

.step-indicator{ display:flex; align-items:center; gap: 8px; margin-bottom: 22px; }
.step-indicator .bar{ flex:1; height: 4px; border-radius: 999px; background: var(--line); overflow:hidden; }
.step-indicator .bar span{ display:block; height:100%; width:0%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.step-indicator .bar.is-done span, .step-indicator .bar.is-active span{ width:100%; }
.step-label{ font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing:.04em; white-space: nowrap; }

.signup-step{ display:none; }
.signup-step.is-active{ display:block; }

.auth-switch{ text-align:center; padding-top: 22px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.auth-switch a{ color: var(--ink); font-weight: 700; text-decoration:none; }
.auth-switch a:hover{ color: var(--accent); }

@media (min-width: 768px) and (max-width: 1023px){
  .auth-shell{ grid-template-columns: 52% 48%; }
  .auth-visual-orbit{ display:none; }
  .auth-visual-copy h1{ font-size: 28px; }
}

@media (max-width: 767px){
  html, body{ height: auto; }
  body.auth-body{ overflow: visible; }
  .auth-shell{ grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .auth-visual{ display:none; }
  .auth-form-side{ width: 100vw; height: 100vh; padding: 28px 24px; }
  .auth-form{ max-width: 420px; }
}