.auth-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #f4fcff 0%, #ffffff 50%, #f8faff 100%);
  position: relative;
  overflow-x: hidden;
}

.auth-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.blue-orb,
.orange-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.blue-orb {
  width: 340px;
  height: 340px;
  background: rgba(55, 100, 216, 0.18);
  top: -80px;
  right: 8%;
}
.orange-orb {
  width: 280px;
  height: 280px;
  background: rgba(230, 81, 0, 0.12);
  bottom: -60px;
  left: 12%;
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1fr);
  min-height: 100vh;
}

.auth-visual {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  padding: 40px 48px 48px;
  background: linear-gradient(135deg, #def6ff, #ffffff 62%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-size: 20px;
  width: fit-content;
  margin-bottom: 28px;
}
.auth-visual-copy {
  max-width: 480px;
  margin-bottom: 28px;
}
.auth-visual-copy h1 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.auth-visual-copy p {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.6;
}

.auth-stage {
  position: relative;
  flex: 1;
  min-height: 420px;
}
.auth-hero-card {
  position: absolute;
  left: 18%;
  top: 8%;
  width: min(320px, 58%);
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(55, 100, 216, 0.12);
  box-shadow: 0 18px 40px rgba(28, 35, 61, 0.12);
}
.auth-hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-float {
  position: absolute;
  width: 108px;
  height: 108px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(28, 35, 61, 0.08);
  box-shadow: 0 10px 24px rgba(28, 35, 61, 0.12);
}
.auth-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-float.card-a { left: 4%; top: 12%; }
.auth-float.card-b { right: 8%; top: 28%; width: 96px; height: 96px; }
.auth-float.card-c { left: 12%; bottom: 10%; width: 88px; height: 88px; }
.auth-chip {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(55, 100, 216, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(28, 35, 61, 0.08);
  white-space: nowrap;
}
.chip-a { right: 10%; top: 8%; }
.chip-b { left: 6%; bottom: 28%; }
.chip-c { right: 12%; bottom: 16%; }

.auth-shell[data-scene="lupa"] .auth-float.card-c,
.auth-shell[data-scene="sukses"] .auth-float.card-c { opacity: 0.4; }
.auth-shell[data-scene="vendor"] .auth-chip { background: #edfaf7; }

.auth-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 32px 64px;
  min-height: 100vh;
}
.auth-card {
  width: min(520px, 100%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(55, 100, 216, 0.1);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(28, 35, 61, 0.08);
  padding: 36px 32px 32px;
  backdrop-filter: blur(10px);
}
.auth-back {
  font-size: 13px;
  color: var(--slate);
  display: inline-block;
  margin-bottom: 20px;
}
.auth-back:hover { color: var(--blue); }
.auth-panel[hidden] { display: none !important; }
.auth-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: linear-gradient(90deg, rgba(55, 100, 216, 0.12), rgba(83, 134, 252, 0.08));
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.auth-panel h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}
.auth-lead {
  color: var(--slate);
  font-size: 15px;
  margin-bottom: 22px;
}

.auth-steps {
  list-style: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.auth-steps li {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--gray-50);
}
.auth-steps li.is-active {
  color: var(--blue);
  background: rgba(55, 100, 216, 0.1);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.field > span,
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.field-label { margin: 10px 0 12px; }
.req {
  color: var(--error);
  font-weight: 700;
  text-decoration: none;
  margin-left: 2px;
}
.field-control {
  position: relative;
  display: block;
}
.field-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  color: var(--slate);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.field-control input {
  width: 100%;
  height: 54px;
  border: 1px solid #e2e8f0;
  background: var(--gray-50);
  border-radius: 16px;
  padding: 0 16px 0 44px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field-pass input { padding-right: 48px; }
.field-control select {
  width: 100%;
  height: 54px;
  border: 1px solid #e2e8f0;
  background: var(--gray-50);
  border-radius: 16px;
  padding: 0 16px 0 44px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field-control select:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(55, 100, 216, 0.08);
}
.field-control select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.field-control input:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(55, 100, 216, 0.08);
}
.field-control input.is-invalid {
  border-color: var(--error);
  background: var(--error-bg);
}
.pass-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--slate);
  border-radius: 8px;
}
.pass-toggle:hover { color: var(--blue); background: var(--ice); }
.pass-toggle .ico-eye-off { display: none; }
.pass-toggle.is-open .ico-eye { display: none; }
.pass-toggle.is-open .ico-eye-off { display: block; }

.field-error { color: var(--error); font-size: 12px; }
.field-hint { font-size: 12px; color: var(--slate); }
.strength { display: flex; align-items: center; gap: 8px; }
.strength-dots {
  display: flex;
  gap: 6px;
}
.strength-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
  display: block;
}
.strength-dots.weak i:nth-child(1) { background: var(--error); }
.strength-dots.medium i:nth-child(-n + 2) { background: #f59e0b; }
.strength-dots.strong i { background: var(--success); }

.role-picks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.role-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.role-pick input { position: absolute; opacity: 0; pointer-events: none; }
.role-pick strong { display: block; font-size: 15px; color: var(--ink); }
.role-pick em { display: block; font-style: normal; font-size: 12px; color: var(--slate); margin-top: 2px; }
.role-check {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  display: none;
  place-items: center;
}
.role-pick.is-active .role-check { display: grid; }
.role-pick.is-active { transform: scale(1.01); box-shadow: 0 8px 20px rgba(28, 35, 61, 0.08); }
.role-pick.is-active:has(input[value="pembeli"]) {
  background: #edf5ff;
  border-color: var(--buyer);
}
.role-pick.is-active:has(input[value="kreator"]) {
  background: #fff4ed;
  border-color: var(--orange);
}
.role-pick.is-active:has(input[value="kreator"]) .role-check { background: var(--orange); }
.role-pick.is-active:has(input[value="vendor"]) {
  background: #edfaf7;
  border-color: var(--vendor);
}
.role-pick.is-active:has(input[value="vendor"]) .role-check { background: var(--vendor); }
.role-pick.is-active .role-dot { transform: scale(1.08); }
.role-dot {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.role-dot.buyer { background: linear-gradient(135deg, var(--buyer), var(--blue-lt)); }
.role-dot.creator { background: linear-gradient(135deg, var(--orange), #ff8a50); }
.role-dot.vendor { background: linear-gradient(135deg, var(--vendor), #14b8a6); }

.btn-auth {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, var(--blue), var(--blue-lt));
  color: #fff;
  border-radius: 16px;
  font-weight: 600;
  font-size: 15px;
  margin-top: 8px;
  gap: 8px;
  box-shadow: 0 8px 18px rgba(55, 100, 216, 0.22);
}
.btn-auth:hover { translate: 0 -2px; box-shadow: 0 12px 24px rgba(55, 100, 216, 0.28); }
.btn-auth.is-loading { opacity: 0.7; pointer-events: none; translate: 0; }
.btn-arrow { display: inline-block; transition: transform 0.2s ease; }
.btn-auth:hover .btn-arrow { transform: translateX(4px); }

.auth-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.text-link {
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  background: none;
  padding: 0;
}
.text-link:hover { text-decoration: underline; }
.auth-switch { margin-top: 18px; font-size: 13px; color: var(--slate); }
.form-alert {
  background: var(--error-bg);
  color: var(--error);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 8px;
}
.form-alert.success { background: var(--success-bg); color: #1f7a12; }

.demo-box {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ice, #f4fcff);
  border: 1px dashed rgba(55, 100, 216, 0.28);
}
.demo-box p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}
.demo-box button {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}
.demo-box button:last-child { margin-bottom: 0; }
.demo-box button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.sim-inbox {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--slate);
  line-height: 1.55;
}
.sim-inbox-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.sim-inbox strong {
  color: var(--navy);
  font-size: 18px;
  letter-spacing: 0.18em;
}

.auth-result { text-align: center; position: relative; }
.result-mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 8px auto 20px;
  font-size: 28px;
}
.result-mark.ok {
  background: var(--success-bg);
  color: var(--success);
  animation: fadeScale 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.result-mark.ok span { animation: fadeUp 0.45s 0.15s both; }
.result-mark.wait {
  background: #edfaf7;
  position: relative;
}
.wait-ring {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(15, 118, 110, 0.2);
  border-top-color: var(--vendor);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vendor);
  background: #edfaf7;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.vendor-wait h2 { color: var(--vendor); }

.success-burst span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: spark 1.2s ease-out both;
}
.success-burst span:nth-child(1) { left: 18%; top: 12px; background: var(--blue-lt); }
.success-burst span:nth-child(2) { right: 20%; top: 28px; background: var(--orange); animation-delay: 0.08s; }
.success-burst span:nth-child(3) { left: 28%; top: 64px; background: var(--success); animation-delay: 0.12s; }
.success-burst span:nth-child(4) { right: 26%; top: 72px; background: var(--blue); animation-delay: 0.16s; }
.success-burst span:nth-child(5) { left: 48%; top: 4px; background: #f59e0b; animation-delay: 0.04s; }

.fade-up { animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fade-scale { animation: fadeScale 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.18s; }
.float { animation: floatY 5.5s ease-in-out infinite alternate; }
.float-slow { animation: floatY 7s ease-in-out infinite alternate-reverse; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes floatY {
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}
@keyframes spark {
  from { opacity: 0; transform: scale(0.4) translateY(8px); }
  40% { opacity: 1; }
  to { opacity: 0; transform: scale(1) translateY(-18px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .auth-visual-copy h1 { font-size: 28px; }
  .auth-hero-card { width: min(260px, 54%); }
}
@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    min-height: 280px;
    padding: 24px 20px 12px;
  }
  .auth-stage { min-height: 220px; }
  .auth-hero-card { width: 180px; left: 50%; translate: -50% 0; top: 0; }
  .auth-float.card-a { left: 8%; top: 8%; width: 72px; height: 72px; }
  .auth-float.card-b { right: 8%; top: 20%; width: 64px; height: 64px; }
  .auth-float.card-c { display: none; }
  .auth-main { padding: 12px 16px 40px; align-items: flex-start; min-height: auto; }
  .auth-card { padding: 24px 18px; }
  .auth-panel h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-scale,
  .float,
  .float-slow,
  .wait-ring,
  .result-mark.ok,
  .success-burst span {
    animation: none !important;
  }
}


/* ==== Vendor application fields ==== */
.vendor-fields {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  margin: 4px 0 8px;
}
.vendor-fields .field-label {
  color: var(--vendor, #0d9488);
}
.field .muted { font-weight: 400; color: var(--slate, #64748b); font-size: 11px; }

.shop-chip { display: inline-flex; align-items: center; gap: 8px; background: #f1f5f9; border-radius: 99px; padding: 8px 16px; margin: 12px 0 16px; font-size: 14px; color: var(--ink); }
.shop-chip .shop-emoji { font-size: 18px; }
.shop-chip strong { color: var(--vendor, #0d9488); }