:root{--pink:#D63384;--pink-dk:#b02a6d;--bg:#0B1220;--card:#101B2B;--line:#1d2c42;--txt:#ffffff;--muted:#9fb0c7}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;min-height:100vh}


/* quiz card — headline lives INSIDE the card, per screenshot */
.card-wrap{max-width:640px;margin:8px auto 30px;padding:0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.45);padding:34px 30px 40px;position:relative;overflow:hidden}
.card h1{font-size:32px;font-weight:700;line-height:1.45;color:#fff;text-align:center;margin-bottom:26px;letter-spacing:-.3px}

/* progress bar — light track, flat pink fill */
.progress{height:12px;background:#F0F0F0;border-radius:99px;margin-bottom:26px;overflow:hidden}
.progress-fill{height:100%;background:var(--pink);border-radius:99px;width:15%;transition:width .5s ease}

/* question screens */
.q{display:none;animation:fadeUp .35s ease}
.q.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.q h3{font-size:21px;font-weight:500;text-align:center;margin-bottom:22px;line-height:1.4;color:#fff}
.q p.q-sub{font-size:17px;color:var(--muted);text-align:center;margin:-12px 0 22px;font-weight:400;line-height:1.5}

/* answer buttons — flat solid pink, stacked full-width */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:block;width:100%;padding:15px 20px;border:none;border-radius:6px;font-size:15px;font-weight:700;color:#fff;text-align:center;cursor:pointer;transition:background .15s,transform .1s;background:var(--pink);box-shadow:0 2px 6px rgba(0,0,0,.35);user-select:none;-webkit-user-select:none;line-height:1.35}
.opt:hover{background:var(--pink-dk)}
.opt:active{transform:scale(.98)}
.opt.selected{background:var(--pink-dk)}

/* loading screens */
.loading-screen{display:none;text-align:center;padding:32px 0;animation:fadeUp .35s ease}
.loading-screen.active{display:block}
.spinner{width:54px;height:54px;border:6px solid var(--line);border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 22px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-screen h3{font-size:21px;font-weight:600;color:#fff;margin-bottom:6px;line-height:1.35}
.loading-screen p{font-size:16px;color:var(--muted)}

/* result screen */
.result{display:none;text-align:center;padding:20px 0;animation:fadeUp .4s ease}
.result.active{display:block}
.qualify-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(39,174,96,.12);border:2px solid #27ae60;border-radius:99px;padding:11px 26px;font-size:16px;font-weight:800;color:#2ecc71;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.qualify-badge .check{font-size:22px}
.result h2{font-size:26px;font-weight:700;color:#fff;margin-bottom:14px;line-height:1.35}
.result p{font-size:18px;color:var(--muted);line-height:1.65;margin-bottom:20px}
.result .emp{font-weight:700;color:#fff}

/* CTA button — flat solid pink, matching the answer buttons */
.cta{display:block;background:var(--pink);color:#fff;font-size:20px;font-weight:800;padding:20px 24px;border-radius:6px;border:none;letter-spacing:.4px;text-align:center;line-height:1.25;margin:20px 0 14px;box-shadow:0 3px 10px rgba(0,0,0,.4);transition:background .15s,transform .12s;text-decoration:none;cursor:pointer}
.cta:hover{background:var(--pink-dk);color:#fff;text-decoration:none;transform:translateY(1px)}
.cta-sub{font-size:15px;color:var(--muted);text-align:center;margin:0 0 4px}

/* footer */
.footer{max-width:760px;margin:10px auto 40px;padding:0 18px;text-align:center}
.f-links{font-size:15px;margin-bottom:14px;color:var(--muted)}
.f-links a{color:#6a9fd8;margin:0 8px}
.f-disc{font-size:13px;color:#5c6d85;line-height:1.75;text-align:left}

@media(max-width:500px){
  .card{padding:28px 18px 32px}
  .card h1{font-size:25px}
  .q h3{font-size:20px}
  .q p.q-sub{font-size:16px}
  .opt{font-size:15px;padding:14px 14px}
  .cta{font-size:18px;padding:18px 16px}
  .result h2{font-size:23px}
  .result p{font-size:17px}
  .loading-screen h3{font-size:20px}
}
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}