:root{
  --p:#2c5a8c; --p-light:#eaf2fb; --p-lighter:#f5f9fe; --p-dark:#1f3d5c;
  --pink:#a44d6c; --pink-light:#fbdce7; --pink-lighter:#fef5f8;
  --ink:#1f2937; --ink2:#5b6472; --line:#e5e9ef;
}
.mp-quiz-wrap, .mp-quiz-wrap *{box-sizing:border-box;margin:0;padding:0;}
.mp-quiz-wrap{font-family:'Hanken Grotesk',sans-serif;background:linear-gradient(150deg,var(--p-lighter) 0%,#eef5fc 55%,var(--pink-lighter) 100%);display:flex;align-items:center;justify-content:center;padding:48px 24px;}
.mp-quiz-wrap .material-symbols-outlined{vertical-align:middle;}
.mp-quiz-wrap .quizbox{background:#fff;border-radius:20px;max-width:560px;width:100%;box-shadow:0 20px 60px rgba(31,61,92,.12);overflow:hidden;}
.mp-quiz-wrap .qz-head{padding:28px 32px 0;text-align:center;}
.mp-quiz-wrap .qz-head .material-symbols-outlined{color:var(--p);font-size:32px;}
.mp-quiz-wrap .qz-head h1{font-family:'Syne',sans-serif;font-size:22px;color:var(--p-dark);margin:8px 0 4px;}
.mp-quiz-wrap .qz-head p{font-size:12.5px;color:var(--ink2);margin-bottom:18px;}
.mp-quiz-wrap .progress-track{height:5px;background:var(--p-light);border-radius:4px;margin:0 32px 24px;overflow:hidden;}
.mp-quiz-wrap .progress-fill{height:100%;background:var(--pink);border-radius:4px;transition:width .3s;width:0%;}
.mp-quiz-wrap .qz-body{padding:0 32px 32px;}
.mp-quiz-wrap .step{display:none;}
.mp-quiz-wrap .step.active{display:block;}
.mp-quiz-wrap .step h2{font-family:'Syne',sans-serif;font-size:17px;color:var(--p-dark);margin-bottom:18px;line-height:1.4;}
.mp-quiz-wrap .opts{display:flex;flex-direction:column;gap:10px;}
.mp-quiz-wrap .opt{border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font-size:13.5px;color:var(--ink);cursor:pointer;transition:.15s;text-align:left;background:#fff;}
.mp-quiz-wrap .opt:hover{border-color:var(--p);background:var(--p-lighter);}
.mp-quiz-wrap .opt.selected{border-color:var(--p);background:var(--p-light);font-weight:600;color:var(--p-dark);}
.mp-quiz-wrap .nav-row{display:flex;justify-content:space-between;margin-top:22px;}
.mp-quiz-wrap .btn{border:none;padding:11px 22px;border-radius:9px;font-weight:700;font-size:12.5px;font-family:'Syne',sans-serif;cursor:pointer;}
.mp-quiz-wrap .btn-primary{background:var(--p);color:#fff;}
.mp-quiz-wrap .btn-primary:disabled{opacity:.35;cursor:not-allowed;}
.mp-quiz-wrap .btn-ghost{background:none;color:var(--ink2);border:1px solid var(--line);}

/* email gate step */
.mp-quiz-wrap .gate-icon{text-align:center;margin-bottom:6px;}
.mp-quiz-wrap .gate-icon .material-symbols-outlined{font-size:36px;color:var(--pink);}
.mp-quiz-wrap #step-email h2{text-align:center;}
.mp-quiz-wrap #step-email p.sub{text-align:center;font-size:12.5px;color:var(--ink2);margin-bottom:20px;}
.mp-quiz-wrap .email-input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:13.5px;margin-bottom:14px;}
.mp-quiz-wrap .consent{display:flex;gap:8px;font-size:11px;color:var(--ink2);align-items:flex-start;margin-bottom:18px;text-align:left;}
.mp-quiz-wrap .consent input{margin-top:2px;}

/* result */
.mp-quiz-wrap #step-result{text-align:center;}
.mp-quiz-wrap .result-badge{display:inline-block;background:var(--pink-light);color:var(--pink);font-size:10.5px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:14px;}
.mp-quiz-wrap #step-result h2{font-size:22px;}
.mp-quiz-wrap .result-cat{font-family:'Syne',sans-serif;font-size:20px;color:var(--p);margin:8px 0 14px;}
.mp-quiz-wrap .result-desc{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:20px;}
.mp-quiz-wrap .promo{background:var(--p-lighter);border:1.5px dashed var(--p);border-radius:12px;padding:16px;margin-bottom:20px;}
.mp-quiz-wrap .promo .code{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;color:var(--p-dark);letter-spacing:.08em;}
.mp-quiz-wrap .promo p{font-size:11px;color:var(--ink2);margin-top:4px;}

.mp-quiz-wrap .result-products{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;text-align:left;}
.mp-quiz-wrap .rp-card{display:flex;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:12px;align-items:center;}
.mp-quiz-wrap .rp-media{width:52px;height:52px;border-radius:9px;background:var(--p-lighter);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mp-quiz-wrap .rp-media .material-symbols-outlined{color:var(--p);font-size:24px;}
.mp-quiz-wrap .rp-body{flex:1;}
.mp-quiz-wrap .rp-body h5{font-family:'Syne',sans-serif;font-size:13.5px;color:var(--p-dark);margin-bottom:2px;}
.mp-quiz-wrap .rp-body p{font-size:11px;color:var(--ink2);line-height:1.4;}
.mp-quiz-wrap .rp-side{text-align:right;flex-shrink:0;}
.mp-quiz-wrap .rp-price{font-weight:700;color:var(--p-dark);font-size:13px;display:block;margin-bottom:4px;}
.mp-quiz-wrap .rp-add{background:var(--p);color:#fff;border:none;padding:5px 10px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer;}
.mp-quiz-wrap .rp-add.added{background:var(--pink);}
.mp-quiz-wrap .result-catlink{display:inline-block;font-size:12px;font-weight:700;color:var(--p);text-decoration:underline;margin-bottom:20px;}