/* ============ ONBOARDING SHELL ============ */
.onboarding-body{
  background:var(--bg-soft);
  min-height:100vh;
  padding-bottom:60px;
}

.ob-logo-fixed{
  position:fixed;top:24px;left:32px;z-index:200;
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink);
}

/* Progress bar */
.ob-progress{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:none;flex-direction:column;align-items:center;gap:6px;
  padding:22px 24px 14px;
  background:linear-gradient(to bottom, rgba(247,248,250,0.95), rgba(247,248,250,0));
}
.ob-progress-track{
  width:100%;max-width:420px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;
}
.ob-progress-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transition:width .45s cubic-bezier(.2,.8,.2,1);
  width:0%;
}
.ob-progress-label{font-size:12.5px;font-weight:700;color:var(--ink-soft);}

/* Shell / card */
.ob-shell{
  max-width:480px;margin:0 auto;
  padding:120px 28px 40px;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
}

.step-panel{
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-md);
  padding:44px 36px;
  text-align:center;
  animation:obFadeIn .45s cubic-bezier(.2,.8,.2,1);
}
.step-panel.active{display:block;}
@keyframes obFadeIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

/* Text elements */
.ob-h1{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-0.02em;margin:8px 0 12px;}
.ob-h2{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-0.02em;margin-bottom:8px;text-align:left;}
.ob-sub{font-size:15.5px;color:var(--ink-soft);line-height:1.6;max-width:360px;margin:0 auto 30px;}
.ob-sub-sm{font-size:14px;color:var(--ink-soft);line-height:1.5;text-align:left;margin-bottom:26px;}

.ob-btn-stack{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.ob-btn-full{width:100%;min-height:52px;font-size:15px;}
.g-badge{
  width:20px;height:20px;border-radius:50%;background:#fff;color:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;
}
.ob-footnote{margin-top:22px;font-size:13.5px;color:var(--ink-soft);}
.ob-link{color:var(--blue);font-weight:700;}
.ob-forgot-link{display:block;text-align:right;font-size:13px;margin-top:10px;}

/* Inline success message — same shape as .ob-error-msg, green instead of red */
.ob-success-msg{
  max-height:0;overflow:hidden;opacity:0;
  color:#0D9668;font-size:13px;font-weight:600;text-align:left;
  background:#ECFDF5;border:1px solid #A7F3D0;border-radius:10px;
  margin-top:0;padding:0 12px;
  transition:max-height .25s ease, opacity .2s ease, padding .25s ease, margin .25s ease;
}
.ob-success-msg.visible{
  max-height:80px;opacity:1;padding:10px 12px;margin-top:14px;
}

/* Welcome illustration */
.ob-illustration{position:relative;height:150px;margin-bottom:14px;}
.ob-orb{position:absolute;border-radius:50%;filter:blur(0px);}
.ob-orb-1{width:110px;height:110px;background:rgba(37,99,235,0.12);top:-10px;left:10%;}
.ob-orb-2{width:90px;height:90px;background:rgba(16,185,129,0.14);top:10px;right:10%;}
.ob-avatars{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;height:100%;}
.ob-avatar-circle{
  width:62px;height:62px;border-radius:50%;background:var(--bg-soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--shadow-sm);
}
.ob-avatar-circle.a1{animation:floaty 5s ease-in-out infinite;}
.ob-avatar-circle.a2{animation:floaty 5s ease-in-out infinite .8s;}
.ob-book-swap{font-size:30px;animation:swapMove 2.4s ease-in-out infinite;}
@keyframes swapMove{
  0%,100%{transform:translateX(-6px) rotate(-6deg);}
  50%{transform:translateX(6px) rotate(6deg);}
}

/* Floating labels form fields */
.ob-field{position:relative;margin-bottom:20px;text-align:left;}
.ob-field input{
  width:100%;padding:18px 16px 8px;border-radius:14px;border:1.5px solid var(--line);
  font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ob-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,0.1);}
.ob-field label{
  position:absolute;left:16px;top:16px;font-size:15px;color:var(--ink-soft);
  pointer-events:none;transition:all .18s ease;
}
.ob-field input:focus + label,
.ob-field input:not(:placeholder-shown) + label{
  top:6px;font-size:11px;font-weight:700;color:var(--blue);
}
.ob-field-plain{margin-bottom:18px;}

/* Password strength */
.ob-strength{display:flex;align-items:center;gap:10px;margin:-8px 0 18px;}
.ob-strength-bar{flex:1;height:5px;border-radius:99px;background:var(--line);overflow:hidden;}
.ob-strength-bar span{display:block;height:100%;width:0%;border-radius:99px;transition:all .25s ease;}
.ob-strength-label{font-size:11.5px;font-weight:700;color:var(--ink-soft);width:56px;text-align:right;}

/* Checkbox */
.ob-checkbox-row{
  display:flex;align-items:flex-start;gap:10px;text-align:left;cursor:pointer;margin-top:6px;
}
.ob-checkbox-row input{position:absolute;opacity:0;width:0;height:0;}
.ob-checkmark{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;
}
.ob-checkbox-row input:checked ~ .ob-checkmark{background:var(--blue);border-color:var(--blue);}
.ob-checkbox-row input:checked ~ .ob-checkmark::after{content:"✓";color:#fff;font-size:12px;font-weight:800;}
.ob-checkbox-txt{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}

/* Selectable cards (education type) */
.ob-select-grid{display:flex;flex-direction:column;gap:12px;}
.ob-select-card{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:16px 18px;border-radius:16px;border:1.5px solid var(--line);background:#fff;
  transition:all .2s ease;cursor:pointer;
}
.ob-select-card:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.ob-select-card.selected{border-color:var(--blue);background:rgba(37,99,235,0.05);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}
.ob-select-icon{font-size:24px;flex-shrink:0;}
.ob-select-title{font-weight:700;font-size:15px;display:block;}
.ob-select-desc{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:2px;}
.ob-select-card .ob-select-title, .ob-select-card .ob-select-desc{display:block;}

/* Institution search */
.ob-search-wrap{position:relative;margin-bottom:18px;}
.ob-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;}
.ob-search-wrap input{
  width:100%;padding:15px 16px 15px 42px;border-radius:14px;border:1.5px solid var(--line);
  font-family:inherit;font-size:14.5px;
}
.ob-search-wrap input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,0.1);}
.ob-inst-list{display:flex;flex-direction:column;gap:10px;max-height:290px;overflow-y:auto;margin-bottom:16px;}
.ob-inst-card{
  display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;
  border-radius:14px;border:1.5px solid var(--line);background:#fff;transition:all .2s ease;cursor:pointer;
}
.ob-inst-card:hover{border-color:var(--blue);}
.ob-inst-card.selected{border-color:var(--blue);background:rgba(37,99,235,0.05);}
.ob-inst-logo{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
}
.ob-inst-info{display:flex;flex-direction:column;}
.ob-inst-name{font-weight:700;font-size:13.5px;}
.ob-inst-meta{font-size:11.5px;color:var(--ink-soft);}
.ob-not-listed{font-size:13.5px;font-weight:700;color:var(--blue);}

/* Academic dropdowns */
.ob-select-label{font-size:12.5px;font-weight:700;color:var(--ink-soft);text-align:left;margin:0 0 8px;text-transform:uppercase;letter-spacing:.03em;}
.ob-optional{font-weight:500;text-transform:none;color:#B0B5BE;}
.ob-dropdown{
  width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;margin-bottom:18px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
.ob-dropdown:focus{outline:none;border-color:var(--blue);}

/* Purpose cards */
.ob-purpose-row{display:flex;gap:10px;}
.ob-purpose-card{
  flex:1;padding:18px 10px;border-radius:16px;border:1.5px solid var(--line);background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:700;
  transition:all .2s ease;cursor:pointer;
}
.ob-purpose-card:hover{border-color:var(--blue);}
.ob-purpose-card.selected{border-color:var(--green);background:rgba(16,185,129,0.06);box-shadow:0 0 0 3px rgba(16,185,129,0.1);}

/* Subject chips */
.ob-chip-search-wrap{margin-bottom:14px;}
.ob-chip-search-wrap input{
  width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);font-family:inherit;font-size:14px;
}
.ob-chip-search-wrap input:focus{outline:none;border-color:var(--blue);}
.ob-chip-list{display:flex;flex-wrap:wrap;gap:8px;}
.ob-chip{
  padding:9px 15px;border-radius:99px;border:1.5px solid var(--line);background:#fff;
  font-size:13px;font-weight:600;color:var(--ink);transition:all .2s ease;cursor:pointer;
}
.ob-chip:hover{border-color:var(--blue);}
.ob-chip.selected{background:var(--blue);color:#fff;border-color:var(--blue);}

/* Avatar upload */
.ob-avatar-upload{
  width:140px;height:140px;border-radius:50%;margin:0 auto 20px;
  border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--bg-soft);
}
.ob-avatar-upload.dragging{border-color:var(--blue);background:rgba(37,99,235,0.06);}
.ob-avatar-upload img{width:100%;height:100%;object-fit:cover;}
#avatarPlaceholder{font-size:30px;text-align:center;color:var(--ink-soft);line-height:1.6;}
.ob-avatar-hint{font-size:11px;font-weight:600;}
.ob-skip{display:block;margin:0 auto;font-size:13.5px;}

/* Success screen */
.ob-success-emoji{font-size:56px;margin-bottom:6px;}
.ob-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px;}
.confetti-piece{
  position:absolute;top:-10%;width:8px;height:14px;border-radius:2px;opacity:0.9;
  animation-name:confettiFall;animation-timing-function:ease-in;animation-iteration-count:1;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(480px) rotate(540deg);opacity:0;}
}

/* Inline validation error message */
.ob-error-msg{
  max-height:0;overflow:hidden;opacity:0;
  color:#DC2626;font-size:13px;font-weight:600;text-align:left;
  background:#FEF2F2;border:1px solid #FECACA;border-radius:10px;
  margin-top:0;padding:0 12px;
  transition:max-height .25s ease, opacity .2s ease, padding .25s ease, margin .25s ease;
}
.ob-error-msg.visible{
  max-height:60px;opacity:1;padding:10px 12px;margin-top:14px;
}

/* Shake animation for the Continue button when validation fails */
@keyframes obShake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
.ob-card-next.shake{animation:obShake .45s ease;}

/* Back/Continue now live inside each card */
.ob-card-nav{display:flex;gap:12px;margin-top:30px;}
.ob-card-back{flex:0 0 104px;min-height:50px;}
.ob-card-next{flex:1;min-height:50px;}

/* Password show/hide toggle */
.ob-field-pw input{padding-right:46px;}
.ob-pw-toggle{
  position:absolute;right:6px;top:6px;bottom:6px;width:38px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  color:var(--ink-soft);border-radius:10px;
}
.ob-pw-toggle:hover{background:var(--bg-soft);}

/* ================= TABLET ================= */
@media (max-width:1024px){
  .ob-shell{max-width:520px;}
}

/* ================= MOBILE ================= */
@media (max-width:680px){
  .ob-logo-fixed{top:18px;left:20px;font-size:15px;}
  .onboarding-body{padding-bottom:32px;}
  .ob-shell{
    max-width:100%;padding:96px 0 24px;
  }
  .step-panel{
    /* Same natural top-to-bottom flow as desktop — no forced vertical
       centering, so Back/Continue (now inside the card) are reachable
       just by scrolling the page normally, exactly like on PC. */
    border-radius:0;border:none;box-shadow:none;
    padding:8px 24px 24px;
  }
  .step-panel.active{display:block;}
  .ob-h1{font-size:26px;}
  .ob-h2{font-size:21px;}
  .ob-purpose-row{gap:8px;}
  .ob-progress{padding:16px 20px 12px;}
}