:root{
  --bg1:#2b2fcf;
  --bg2:#1c1aa8;
  --bg3:#0b0b3d;

  --text: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.55);

  --stroke: rgba(255,255,255,0.22);
  --stroke2: rgba(255,255,255,0.14);

  --shadow: 0 26px 90px rgba(0,0,0,0.45);
  --r: 22px;

  --err: rgba(255, 160, 190, 0.95);
  --focus: rgba(170, 205, 255, 0.55);

  --cardGlass1: rgba(255,255,255,0.09);
  --cardGlass2: rgba(255,255,255,0.05);

  --pillBg: rgba(255,255,255,0.07);
  --pillBorder: rgba(255,255,255,0.35);

  --btnBg: rgba(255,255,255,0.10);
  --btnBorder: rgba(255,255,255,0.38);

  --primaryBg: rgba(255,255,255,0.86);
  --primaryText: rgba(30,35,120,1);

  --pad: clamp(14px, 3vw, 52px);
  --gap: clamp(16px, 3vw, 64px);

  --cardW: 520px;

  /* mascot sizing */
  --mascotDesktop: clamp(280px, 26vw, 440px);
  --mascotTablet:  clamp(240px, 30vw, 360px);
  --mascotMobile:  clamp(220px, 62vw, 300px);

  /* glove sizing */
  --gloveMax: 360px;
}

/* ============================================================
   Base (IMPORTANT: background must not cut on scroll)
============================================================ */
*{ box-sizing:border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);

  /* Desktop/tablet: no scroll by default */
  overflow: hidden;

  /* Background that continues even if page scrolls (mobile) */
  background:
    radial-gradient(1000px 700px at 50% 10%, rgba(160,170,255,0.35), transparent 55%),
    radial-gradient(900px 650px at 50% 90%, rgba(255,120,200,0.20), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* helps avoid "cut" feeling on scroll */
}

/* Root wrapper */
.oaSignup{
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  padding: var(--pad);
  isolation:isolate;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* ============================================================
   Background bubbles
============================================================ */
.oaBg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.oaBubble{
  position:absolute;
  border-radius:999px;
  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.06),
    transparent 70%);
  opacity:0.85;
  filter: blur(0.2px);
  animation: floaty 9s ease-in-out infinite;
}

.oaBubble.b1{ left:-40px; top: 40px; width:180px; height:180px; animation-duration: 10s; }
.oaBubble.b2{ right:-60px; top: 70px; width:220px; height:220px; animation-duration: 12s; }
.oaBubble.b3{ left: 12%; bottom: -60px; width:240px; height:240px; animation-duration: 11s; }
.oaBubble.b4{ right: 15%; bottom: -70px; width:260px; height:260px; animation-duration: 13s; }
.oaBubble.b5{ left: 20%; top: 120px; width:90px; height:90px; animation-duration: 8s; }
.oaBubble.b6{ right: 26%; top: 160px; width:110px; height:110px; animation-duration: 9s; }

@keyframes floaty{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(18px); }
}

/* ============================================================
   Layout (Desktop default)
   - Two columns: card left, mascot right
============================================================ */
.oaLayout{
  position:relative;
  z-index:2;

  width: min(1200px, 100%);
  height: 100%;

  display:grid;
  grid-template-columns: minmax(320px, var(--cardW)) minmax(280px, 1fr);
  column-gap: var(--gap);
  align-items:center;
}

/* ============================================================
   Card
============================================================ */
.oaCard{
  position:relative;
  z-index:2;

  width: 100%;
  max-width: var(--cardW);

  border-radius: var(--r);
  background: linear-gradient(180deg, var(--cardGlass1), var(--cardGlass2));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);

  padding: 22px 18px 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;

  overflow:hidden;
}

/* ============================================================
   Mascot area (Desktop)
   - Never overlaps card. Glove is positioned inside this area only.
============================================================ */
.oaMascotPane{
  position:relative;
  width:100%;
  height:100%;
  min-height: 520px;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  overflow: visible;
}

/* Mascot */
.oaMascot{
  width: var(--mascotDesktop);
  height:auto;
  display:block;
  opacity: 0.98;
  filter: drop-shadow(0 22px 70px rgba(0,0,0,0.45));
  user-select:none;
}

/* ============================================================
   Glove (Desktop/Tablet)
   - ABSOLUTE inside mascot pane so it never touches the form
   - Positioned above-left of mascot
============================================================ */
.oaGlove{
  position:absolute;
  z-index:3;

  /* Above-left of robot */
  left: clamp(10px, 2.2vw, 28px);
  top: clamp(12px, 5vh, 44px);

  width: min(var(--gloveMax), 46vw);
  pointer-events:none;
}

.oaGlove[data-state="hidden"]{
  opacity:0;
  transform: translateY(8px) scale(0.985);
}
.oaGlove[data-state="show"]{
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity .22s ease, transform .22s ease;
}

.oaGloveBubble{
  background: rgba(255,255,255,0.92);
  color: rgba(20,24,80,0.95);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;

  padding: 10px 14px;
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.28);

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  max-height: 140px;
  overflow:hidden;
}

/* Tail points roughly towards robot */
.oaGloveTail{
  position:absolute;
  right: 18px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,0.92);
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: 0 16px 50px rgba(0,0,0,0.18);
}

/* ============================================================
   Header
============================================================ */
.oaHeader{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.oaTitle{
  margin: 6px 0 0;
  font-size: 28px;
  letter-spacing: -0.3px;
  font-weight: 900;
  text-shadow: 0 14px 60px rgba(0,0,0,0.35);
}

.oaSub{
  margin:0;
  font-size: 13px;
  color: var(--muted);
}

/* Progress dots */
.oaProgress{
  display:flex;
  gap: 8px;
  justify-content:center;
  align-items:center;
}
.oaDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
  cursor:pointer;
  padding:0;
}
.oaDot.is-active{
  width: 18px;
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.85);
}

/* ============================================================
   Form + steps (NO internal scrolling)
============================================================ */
.oaForm{
  flex:1;
  display:flex;
  min-height:0;
  overflow: visible; /* important: no scroll here */
}

.oaStep{
  display:none;
  width:100%;
  min-height:0;
}
.oaStep.is-active{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 14px;
}

@media (max-height: 720px){
  .oaStep.is-active{ gap: 12px; }
}

/* Fields */
.oaField{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.oaInput,
.oaSelect{
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--pillBorder);
  background: var(--pillBg);
  color: var(--text);
  outline:none;
  padding: 0 16px;
  font-size: 14px;
}

.oaInput::placeholder{
  color: rgba(255,255,255,0.75);
  opacity:0.75;
}

.oaInput:focus,
.oaSelect:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(170,205,255,0.15);
}

.oaError{
  min-height: 14px;
  font-size: 12px;
  color: var(--err);
  text-align:left;
  padding-left: 14px;
}

.input-error{
  border-color: rgba(255,160,190,0.95) !important;
  box-shadow: 0 0 0 4px rgba(255,160,190,0.12) !important;
}

/* Phone row default (desktop/tablet = 2 columns) */
.oaPhoneRow{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items:center;
}

@media (max-width: 420px){
  .oaPhoneRow{
    grid-template-columns: 124px 1fr;
    gap: 8px;
  }
}

/* Role dropdown */
.oaRoleWrap{ position:relative; }
.oaRoleList{
  position:absolute;
  top: 52px;
  left: 0;
  right: 0;
  background: rgba(10,12,60,0.92);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 16px;
  overflow:hidden;
  display:none;
  z-index: 20;
  max-height: 220px;
  overflow:auto;
}
.oaRoleList::-webkit-scrollbar{ width: 10px; }
.oaRoleList::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 999px; }

.role-item{ padding: 10px 14px; cursor:pointer; }
.role-item:hover{ background: rgba(255,255,255,0.08); }

/* Password toggle */
.oaPwWrap{ position:relative; }
.oaPwToggle{
  position:absolute;
  right: 14px;
  top: 8px;
  height: 28px;
  width: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor:pointer;
}

/* Security */
.oaSecurity{
  margin-top: 2px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
}
.oaSecurityTop{ width:100%; display:flex; justify-content:center; }
.oaSecurityLabel{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.oaInfo{
  height: 22px;
  width: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  line-height: 1;
}
.oaNums{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:center;
}
.oaNum{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(10,12,60,0.35);
  color: var(--text);
  cursor:pointer;
  font-weight: 800;
}
.oaNum.is-active{
  background: rgba(80,255,220,0.18);
  border-color: rgba(80,255,220,0.65);
  box-shadow: 0 0 0 4px rgba(80,255,220,0.10);
}
.oaNum.num-error{
  border-color: rgba(255,160,190,0.95) !important;
  box-shadow: 0 0 0 4px rgba(255,160,190,0.12) !important;
}

/* Buttons */
.oaActions{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap:wrap;
}
.oaActionsSingle{ justify-content:center; }

.oaBtn{
  height: 42px;
  min-width: 112px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
  padding: 0 18px;
}
.oaBtn:hover{ background: rgba(255,255,255,0.14); }
.oaBtnPrimary{
  border-color: rgba(255,255,255,0.65);
  background: var(--primaryBg);
  color: var(--primaryText);
}
.oaBtnPrimary:hover{ filter: brightness(0.98); }
.oaBtn:disabled{ opacity: 0.65; cursor: not-allowed; }

.oaLegal{
  margin-top: 10px;
  text-align:center;
  font-size: 11px;
  color: rgba(255,255,255,0.72);
}
.oaLegal a{
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}
.oaLegal a:hover{ border-bottom-color: rgba(255,255,255,0.70); }

.oaGlobalError{
  margin-top: 8px;
  min-height: 14px;
  font-size: 12px;
  text-align:center;
  color: var(--err);
}

/* Loader */
.oaLoader{ position: fixed; inset: 0; z-index: 9997; }
.oaLoaderBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}
.oaLoaderCard{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,12,60,0.35);
  color: rgba(255,255,255,0.92);
  padding: 14px 16px;
  display:flex; gap:12px; align-items:center;
  box-shadow: 0 22px 80px rgba(0,0,0,0.45);
}
.oaSpinner{
  width:18px; height:18px; border-radius:999px;
  border: 2px solid rgba(255,255,255,0.22);
  border-top-color: rgba(255,255,255,0.85);
  animation: oaSpin .75s linear infinite;
}
@keyframes oaSpin { to { transform: rotate(360deg);} }
.oaLoaderText{ font-size: 13px; }

/* ============================================================
   Tablet (<= 1024px): Stack card above mascot, NO overlap
============================================================ */
@media (max-width: 1024px){
  body{ overflow: hidden; }

  .oaLayout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 18px;
    align-items:start;
    height: 100%;
  }

  .oaCard{
    max-width: min(var(--cardW), 92vw);
    width: 100%;
  }

  .oaMascotPane{
    min-height: 340px;
    justify-content:flex-end;
    align-items:flex-end;
  }

  .oaMascot{ width: var(--mascotTablet); }

  .oaGlove{
    left: 12px;
    top: 12px;
    width: min(var(--gloveMax), 70vw);
  }
}

/* ============================================================
   Mobile (<= 600px): scroll on page (NOT on form)
   - phone row becomes 2 rows
   - bg not cut
============================================================ */
@media (max-width: 600px){
  /* Allow page scroll (whole HTML), not form */
  html, body{
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body{
    overflow-x: hidden;
    background-attachment: scroll; /* iOS friendly */
  }

  .oaSignup{
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    align-items:flex-start;
    padding: 14px;
  }

  .oaLayout{
    height: auto;
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 14px;
  }

  .oaCard{
    max-width: 420px;
    width: 100%;
    padding: 16px 14px 12px;
    gap: 10px;
    border-radius: 20px;
    overflow: hidden;
  }

  /* No form scrolling inside */
  .oaForm{ overflow: visible; }

  /* iOS zoom prevention */
  .oaInput, .oaSelect{
    font-size: 16px;
    height: 42px;
  }

  .oaTitle{ font-size: 24px; }
  .oaSub{ font-size: 12px; }

  /* Phone row -> 2 rows (country code then phone) */
  .oaPhoneRow{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .oaMascotPane{
    min-height: 320px;
    justify-content:center; /* nicer on mobile */
    align-items:flex-end;
  }

  .oaMascot{
    width: var(--mascotMobile);
  }

  /* Glove stays in mascot area (never touches card) */
  .oaGlove{
    left: 10px;
    top: 10px;
    width: min(320px, 88vw);
  }

  .oaGloveBubble{
    font-size: 12px;
    max-height: 150px;
  }
}

/* Smallest phones */
@media (max-width: 360px){
  .oaGlove{ width: min(300px, 90vw); }
  .oaGloveBubble{ font-size: 11.5px; }
}

/* iOS: prevent focus zoom */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}