:root {
  --purple: #7c3aed;
  --purple-dark: #6d28d9;
  --purple-light: #8b5cf6;
  --ink: #142033;
  --muted: #64748b;
  --line: #e2e8f0;
  --navy: #0b1f44;
  --navy-mid: #1a4388;
  --gold: #f5c042;
  --gold-soft: #ffe6a3;
  --font: "Outfit", "Segoe UI", sans-serif;
  --display: "Outfit", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body.auth-body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(ellipse at 8% 0%, rgba(245, 192, 66, 0.2), transparent 40%),
    radial-gradient(ellipse at 95% 10%, rgba(26, 67, 136, 0.22), transparent 46%),
    radial-gradient(ellipse at 70% 100%, rgba(124, 58, 237, 0.14), transparent 42%),
    linear-gradient(165deg, #eef3fb 0%, #f7f5ff 48%, #f3f7fc 100%);
  position: relative;
  overflow-x: hidden;
}

.auth-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.5;
  animation: orbDrift 14s ease-in-out infinite alternate;
}

.fx-1 {
  width: 320px;
  height: 320px;
  left: -80px;
  top: 10%;
  background: radial-gradient(circle, rgba(245, 192, 66, 0.5), transparent 70%);
}

.fx-2 {
  width: 380px;
  height: 380px;
  right: -100px;
  bottom: 5%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 70%);
  animation-duration: 18s;
  animation-delay: -4s;
}

.fx-3 {
  width: 240px;
  height: 240px;
  left: 40%;
  top: 55%;
  background: radial-gradient(circle, rgba(26, 67, 136, 0.35), transparent 70%);
  animation-duration: 16s;
  animation-delay: -7s;
}

@keyframes orbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(36px, -44px, 0) scale(1.12); }
}

.auth-back {
  position: fixed;
  top: 1.15rem;
  left: 1.15rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 5;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.9);
  backdrop-filter: blur(10px);
  transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-back:hover {
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(11, 31, 68, 0.1);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 4.5rem 1rem 2rem;
  position: relative;
  z-index: 1;
}

.auth-stage {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 30px 80px rgba(11, 31, 68, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  backdrop-filter: blur(14px);
  animation: stageIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes stageIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  color: #fff;
}

.auth-visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: visualZoom 12s ease-in-out infinite alternate;
}

@keyframes visualZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1.16); }
}

.auth-visual-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(11, 31, 68, 0.88) 0%, rgba(26, 67, 136, 0.72) 55%, rgba(11, 31, 68, 0.82) 100%),
    radial-gradient(circle at 80% 15%, rgba(245, 192, 66, 0.35), transparent 40%);
}

.auth-visual-copy {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.75rem 2.1rem;
  animation: copyRise 1s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes copyRise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-visual-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(245, 192, 66, 0.16);
  border: 1px solid rgba(245, 192, 66, 0.35);
  color: var(--gold-soft);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-visual-copy h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: 0.75rem;
}

.auth-visual-copy h1 span {
  color: var(--gold);
}

.auth-visual-copy > p {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  line-height: 1.5;
  max-width: 28ch;
  margin-bottom: 1.25rem;
}

.auth-visual-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.auth-visual-points li {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  font-weight: 700;
}

.auth-card {
  background: rgba(255, 255, 255, 0.94);
  padding: 1.85rem 1.65rem 1.55rem;
  animation: cardIn 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.auth-brand img {
  height: 58px;
  width: auto;
  max-width: min(240px, 100%);
  object-fit: contain;
  margin-bottom: 0.55rem;
  animation: logoPop 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes logoPop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-title {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.auth-brand span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 600;
}

.role-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
  margin-bottom: 1.05rem;
  padding: 0.3rem;
  background: linear-gradient(180deg, #f1f5f9, #eef2ff);
  border-radius: 18px;
  border: 1px solid #e2e8f0;
}

/* Vendor button is Marketplace-only — 3 tabs fill the row on the normal page */
.role-row:not(.role-row-market) .role-btn[data-role='vendor'] {
  display: none;
}
.role-row:not(.role-row-market) .role-btn[data-role='student'] { grid-column: auto / span 1; }
.role-row:not(.role-row-market) {
  grid-template-columns: repeat(3, 1fr);
}

.role-btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  min-height: 2.4rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.role-btn:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.role-btn.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(11, 31, 68, 0.1);
}

.mode-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--line);
}

.mode-tab {
  border: 0;
  background: transparent;
  min-height: 2.7rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  z-index: 1;
}

.mode-tab:hover:not(:disabled) {
  color: var(--ink);
}

.mode-tab.is-active {
  color: var(--navy);
}

.mode-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mode-ink {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--navy-mid));
  border-radius: 999px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(0);
}

.mode-tabs.is-signup .mode-ink {
  transform: translateX(100%);
}

.auth-panels {
  position: relative;
}

.auth-form {
  display: grid;
  gap: 0.9rem;
  animation: formIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes formIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-step {
  display: grid;
  gap: 0.85rem;
  width: 100%;
}

#kindFields {
  display: grid;
  gap: 0.85rem;
}

.auth-form.is-off,
.auth-step.is-off {
  display: none !important;
}

.auth-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 750;
  color: #334155;
}

.auth-form input,
.auth-form select {
  min-height: 2.9rem;
  border-radius: 14px;
  border: 1px solid #dbe3ef;
  padding: 0 0.95rem;
  font: inherit;
  background: #f8fafc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.auth-form input:hover,
.auth-form select:hover {
  background: #fff;
}

.auth-form input:focus,
.auth-form select:focus {
  outline: none;
  background: #fff;
  border-color: #c4b5fd;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.15rem;
  margin-top: 0.25rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold) 0%, #e8a820 55%, #d49212 100%);
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(245, 192, 66, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
  animation: ctaGlow 2.8s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 14px 28px rgba(245, 192, 66, 0.32); }
  50% { box-shadow: 0 18px 40px rgba(245, 192, 66, 0.55); }
}

.auth-submit:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-2px);
}

.auth-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  animation: none;
}

.auth-error {
  color: #b91c1c;
  font-size: 0.86rem;
  background: #fef2f2;
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #fecaca;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.auth-hint {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.45;
}

.auth-linkish {
  border: 0;
  background: none;
  color: var(--navy-mid);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  justify-self: start;
  padding: 0.35rem 0;
}

.auth-switch {
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

.auth-switch button {
  position: relative;
  z-index: 2;
  border: 0;
  background: none;
  color: var(--navy-mid);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  pointer-events: auto;
}

.auth-forgot {
  display: inline-block;
  padding: 0.35rem 0.5rem;
}

@media (max-width: 860px) {
  .auth-stage {
    grid-template-columns: 1fr;
    width: min(100%, 460px);
  }

  .auth-visual {
    min-height: 210px;
  }

  .auth-visual-copy {
    padding: 1.35rem 1.25rem;
  }

  .auth-visual-copy h1 {
    font-size: 1.7rem;
  }

  .auth-visual-copy > p,
  .auth-visual-points {
    display: none;
  }

  .auth-card {
    padding: 1.45rem 1.2rem 1.35rem;
  }

  .role-row {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 16px;
  }
}

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

  .auth-fx {
    display: none;
  }
}

/* ═══════════ COUNTRY + LANGUAGE PAIR ═══════════ */
.auth-pair { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.auth-pair select {
  width:100%; padding:.72rem .85rem; border-radius:.8rem;
  border:1.5px solid #e2e8f0; background:#fff; color:#0f172a;
  font:inherit; font-weight:500; cursor:pointer;
}
.auth-pair select:focus { outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.15); }
@media (max-width:480px) { .auth-pair { grid-template-columns:1fr; } }

/* ═══════════ 2026 REDESIGN — exact match to approved banner design ═══════════ */
body.auth-body {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(196, 181, 253, 0.55), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(165, 180, 252, 0.5), transparent 55%),
    linear-gradient(160deg, #ede9fe 0%, #e0e7ff 55%, #ede9fe 100%);
}
.auth-stage {
  width: min(100%, 1240px);
  grid-template-columns: 1.15fr 1fr;
  border-radius: 24px;
  background: #fff;
  border: none;
  box-shadow: 0 40px 90px rgba(76, 29, 149, 0.18), 0 6px 24px rgba(76, 29, 149, 0.1);
  backdrop-filter: none;
}
.auth-visual { min-height: 640px; }
.auth-visual-bg {
  object-position: center top;
  transform: none;
  animation: none;
}
.auth-visual-tint { background: none; }
.auth-visual-copy {
  justify-content: flex-start;
  padding: 1.6rem 1.9rem;
}
.auth-visual-kicker {
  margin-top: auto;
  background: #7c3aed;
  border: none;
  color: #fff;
  letter-spacing: 0.1em;
}
.auth-visual-copy h1 {
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  color: #fff;
  margin-bottom: 0.4rem;
}
.auth-visual-copy h1 span { color: #facc15; }
.auth-visual-copy > p {
  color: rgba(255,255,255,0.92);
  font-size: 1.02rem;
  max-width: 34ch;
  margin-bottom: 0;
}
.auth-visual-points { margin-top: 0.8rem; }
.auth-brand { margin-bottom: 1.5rem; }
.auth-brand img { height: 52px; }
.auth-title { font-size: 2rem; color: #0f172a; }
.auth-brand span { color: #64748b; font-size: 0.98rem; }
.role-row {
  background: #f1f5f9;
  border: none;
  border-radius: 999px;
  padding: 0.35rem;
  gap: 0.25rem;
}
.role-btn {
  min-height: 2.6rem;
  font-size: 0.85rem;
  color: #475569;
}
.role-btn.is-active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.35);
}
.role-btn:hover:not(.is-active) { color: #1e293b; }
.mode-tabs { border-bottom: 2px solid #e2e8f0; }
.mode-tab { font-size: 1rem; }
.mode-tab.is-active { color: #7c3aed; }
.mode-ink { background: #7c3aed; height: 3px; }
.auth-form label { color: #334155; font-size: 0.88rem; }
.auth-form input,
.auth-form select {
  min-height: 3.1rem;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 0.95rem;
}
.auth-form input::placeholder { color: #94a3b8; }
.auth-form input:focus,
.auth-form select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
}
.auth-submit {
  min-height: 3.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 16px 32px rgba(124, 58, 237, 0.35);
  animation: none;
}
.auth-submit:hover:not(:disabled) { filter: brightness(1.08); }
.auth-error {
  border-radius: 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
}
@media (max-width: 860px) {
  .auth-stage { border-radius: 20px; }
  .auth-visual { min-height: 300px; }
  .auth-visual-copy { padding: 1.2rem 1.3rem; }
  .auth-visual-copy h1 { font-size: 1.9rem; }
  .auth-visual-points { display: flex; }
  .auth-visual-points li { font-size: 0.7rem; padding: 0.32rem 0.6rem; }
}

/* ═══════════ APP AUTH HERO — image already contains the copy ═══════════
   media/auth-hero.png has the kicker pill, headline and lead baked into
   the artwork. Rendering the HTML copy on top of it doubled the text.
   Hide the overlay text and let the image speak for itself. */
.auth-visual-copy > p {
  display: none;
}
.auth-visual-copy h1,
.auth-visual-kicker,
.auth-visual-points {
  visibility: hidden;
}
/* Market sign-up swaps in feature-market.png (no baked copy) — restore the text. */
body.auth-market .auth-visual-copy > p {
  display: block;
}
body.auth-market .auth-visual-copy h1,
body.auth-market .auth-visual-kicker,
body.auth-market .auth-visual-points {
  visibility: visible;
}
@media (max-width: 560px) {
  .auth-visual-copy h1 { font-size: 1.55rem; }
  .auth-visual-copy > p { font-size: 0.9rem; }
}