:root {
  --blue:#123f79;
  --blue-dark:#0b2b55;
  --purple:#b56cff;
  --green:#84f5b7;
  --yellow:#ffe57a;
  --text:#10233f;
  --muted:#5f7189;
  --border:#d6dfeb;
  font-family: Inter, Segoe UI, Arial, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important;}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 12%, rgba(181,108,255,.16), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(255,229,122,.14), transparent 25%),
    radial-gradient(circle at 48% 88%, rgba(132,245,183,.16), transparent 30%),
    #f4f8fd;
  color:var(--text);
}
.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:14px;
}
.shell{
  width:min(980px,100%);
  position:relative;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:26px;
  padding:clamp(18px,4vw,38px);
  background:
    linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.96)) padding-box,
    linear-gradient(135deg,var(--purple),var(--yellow),var(--green)) border-box;
  box-shadow:0 24px 70px rgba(16,35,63,.14);
}
.shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(181,108,255,.13), transparent 30%),
    radial-gradient(circle at 84% 26%, rgba(255,229,122,.12), transparent 28%),
    radial-gradient(circle at 55% 78%, rgba(132,245,183,.13), transparent 34%);
  animation:pulse 8s ease-in-out infinite alternate;
  pointer-events:none;
}
.shell::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/nextgen-logo.png");
  background-repeat:no-repeat;
  background-position:center 58%;
  background-size:390px auto;
  opacity:.045;
  pointer-events:none;
}
@keyframes pulse{from{transform:scale(1);opacity:.75}to{transform:scale(1.035);opacity:1}}
.content{position:relative;z-index:2}
.header{text-align:center;margin-bottom:18px}
.logo{width:94px;height:auto;display:block;margin:0 auto 10px}
.kicker{font-size:.82rem;letter-spacing:.14em;font-weight:800;color:var(--blue);margin:0 0 4px}
h1{margin:0;font-size:clamp(1.7rem,4vw,2.65rem);line-height:1.12}
.sub{margin:9px auto 0;max-width:700px;color:var(--muted);line-height:1.55}
.progress-wrap{margin:20px 0}
.progress-head{display:flex;justify-content:space-between;gap:10px;font-weight:800;color:var(--blue-dark);font-size:.92rem;margin-bottom:8px}
.progress{height:10px;background:#e8eef6;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:20%;background:linear-gradient(90deg,var(--purple),var(--yellow),var(--green));transition:width .25s ease}
.step{display:none}
.step.active{display:block}
.step-title{font-size:1.25rem;font-weight:900;color:var(--blue-dark);margin:0 0 6px}
.step-copy{margin:0 0 16px;color:var(--muted)}
.step-error{
  display:none;
  margin:12px 0 0;
  color:#b3261e;
  font-weight:800;
  font-size:.92rem;
}
.step-error.show{display:block}
.required-mark{color:#b3261e}
.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.course-card,.choice-card{
  position:relative;
  display:block;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  padding:15px;
  cursor:pointer;
  transition:.18s ease;
}
.course-card:hover,.choice-card:hover{transform:translateY(-1px);border-color:var(--purple)}
.course-card input,.choice-card input{position:absolute;opacity:0;pointer-events:none}
.course-card.selected,.choice-card.selected{
  border:2px solid var(--purple);
  background:linear-gradient(90deg,rgba(181,108,255,.22),rgba(255,229,122,.18),rgba(132,245,183,.22));
  box-shadow:
    0 0 0 4px rgba(181,108,255,.12),
    0 10px 24px rgba(18,63,121,.10);
  transform:translateY(-1px);
}
.card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.course-name{font-weight:900;line-height:1.35;color:var(--blue-dark)}
.tick{
  width:24px;height:24px;border:2px solid #b9c7d8;border-radius:6px;
  display:grid;place-items:center;font-weight:900;color:white;flex:0 0 auto;
}
.selected .tick{background:var(--blue);border-color:var(--blue)}
.selected .tick::after{content:"✓"}
.course-meta{margin-top:9px;font-size:.9rem;color:var(--muted);line-height:1.45}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge{font-size:.76rem;font-weight:800;padding:5px 8px;border-radius:999px;background:#eef5ff;color:var(--blue-dark);border:1px solid #c7d8ef}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.full{grid-column:1/-1}
label{display:grid;gap:7px;font-weight:800;font-size:.95rem}
input,select,textarea{
  width:100%;min-height:50px;padding:13px 14px;border:1px solid var(--border);
  border-radius:10px;background:white;font:inherit;color:var(--text)
}
textarea{min-height:105px;resize:vertical}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.choice-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:62px;
  font-weight:800;
  border:1px solid var(--border);
  transition:.18s ease;
}
.choice-card::before{
  content:"";
  width:22px;
  height:22px;
  border:2px solid #b7c5d8;
  border-radius:6px;
  background:white;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:white;
  font-weight:900;
}
.choice-card.selected::before{
  content:"✓";
  background:var(--blue);
  border-color:var(--blue);
}
.choice-card.selected span{
  color:var(--blue-dark);
  font-weight:900;
}
.review{
  display:grid;
  gap:10px;
  padding:16px;
  border:1px solid rgba(181,108,255,.28);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(181,108,255,.07),rgba(255,229,122,.05),rgba(132,245,183,.08));
}
.review-row{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #e7edf5}
.review-row strong{color:var(--blue-dark)}
.nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.btn{
  min-height:50px;padding:13px 18px;border-radius:12px;border:0;font:inherit;font-weight:900;cursor:pointer
}
.btn-secondary{background:#edf3fa;color:var(--blue-dark)}
.btn-primary{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:white;flex:1}
.success-screen{display:none;text-align:center;padding:16px 0 6px}
.success-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(135deg,var(--purple),var(--green));font-size:2rem;font-weight:900;color:white}
.success-screen h2{margin:0 0 8px;font-size:1.8rem}
.ref{display:inline-block;margin:12px 0;padding:10px 14px;border-radius:10px;background:#eef5ff;font-weight:900;color:var(--blue-dark)}
@media(max-width:740px){
  .page{padding:10px;align-items:start}
  .shell{padding:18px 14px 20px;border-radius:22px}
  .course-grid,.choice-grid,.grid{grid-template-columns:1fr}
  .full{grid-column:auto}
  .review-row{grid-template-columns:1fr;gap:4px}
  .nav{position:sticky;bottom:8px;background:rgba(255,255,255,.94);padding:10px;border-radius:14px;box-shadow:0 8px 30px rgba(16,35,63,.12)}
  .btn{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.shell::before{animation:none}}