*{box-sizing:border-box}
:root{--bg:#080612;--card:#121022;--pink:#ff4fd8;--purple:#7b4cff;--text:#fff;--muted:#bdb5cf}
body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 15% 10%,rgba(255,79,216,.16),transparent 30%),radial-gradient(circle at 85% 90%,rgba(123,76,255,.18),transparent 35%),var(--bg);display:grid;place-items:center;padding:24px}
.app{width:min(100%,620px)}
.brand{letter-spacing:.25em;color:#d9c4ff;font-size:13px;font-weight:800;margin:0 0 16px}
.card{display:none;background:rgba(18,16,34,.94);border:1px solid rgba(123,76,255,.7);border-radius:24px;padding:28px;box-shadow:0 0 40px rgba(123,76,255,.22)}
.card.active{display:block;animation:fade .3s ease}
.eyebrow{color:#d9c4ff;letter-spacing:.16em;font-size:12px;font-weight:800;margin:0 0 12px}
h1{font-size:44px;line-height:1.2;margin:0 0 14px}
h2{font-size:34px;line-height:1.35;margin:0 0 22px}
h3{margin:0 0 12px}
.lead,.result-box p{color:var(--muted);line-height:1.8}
.primary,.answer{width:100%;border-radius:14px;border:1px solid rgba(123,76,255,.7);color:#fff;font-weight:700;cursor:pointer}
.primary{padding:17px;background:linear-gradient(90deg,var(--pink),var(--purple));border:0;margin-top:18px}
.status{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:12px}
.track{height:9px;background:#2b2942;border-radius:999px;overflow:hidden;margin-bottom:28px}
.bar{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple));transition:.3s}
.answers{display:grid;gap:13px}
.answer{padding:17px 18px;text-align:left;background:rgba(255,255,255,.035)}
.answer:hover,.answer.selected{background:rgba(123,76,255,.18);border-color:var(--pink);transform:translateY(-1px)}
.back{display:block;margin:20px auto 0;background:transparent;border:0;color:var(--muted);cursor:pointer}
.analysis{text-align:center;padding-block:70px}
.loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.08);border-top-color:var(--pink);border-right-color:var(--purple);border-radius:50%;margin:0 auto 24px;animation:spin .9s linear infinite}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.result-box{padding:18px;border:1px solid rgba(123,76,255,.35);border-radius:16px;background:rgba(255,255,255,.03)}
.result-box ul{padding-left:20px;color:var(--muted);line-height:1.8}
.line-area{margin-top:22px;padding:20px;border:1px solid rgba(6,199,85,.35);border-radius:18px;text-align:center;background:rgba(6,199,85,.06)}
.line-area a{display:block;padding:16px;border-radius:14px;background:#06c755;color:#fff;text-decoration:none;font-weight:800}
.line-area small{display:block;margin-top:10px;color:#aab4ad}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:640px){body{display:block;padding:20px 14px}.card{padding:22px 18px}h1{font-size:34px}h2{font-size:28px}.result-grid{grid-template-columns:1fr}}