.mmp-quiz{background:#09090b;min-height:100vh;width:100%}
.mmp-quiz-inner{background:#0e0e12;color:#fff;font-family:Roboto,sans-serif;height:90vh;display:flex;flex-direction:column;overflow:hidden}
.mmp-top{position:sticky;top:0;z-index:10;background:#0e0e12;padding-bottom:4px}
.mmp-progress-wrap{display:flex;align-items:center;gap:10px;padding:16px 16px 0}
.mmp-progress-bar{flex:1;height:4px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
.mmp-progress-fill{height:100%;background:#f15b27;border-radius:0 2px 2px 0;transition:width .4s ease;width:25%}
.mmp-step-counter{font-size:12px;font-weight:600;color:rgba(255,255,255,0.5);white-space:nowrap;min-width:30px;text-align:right;letter-spacing:.3px}
.mmp-step-tabs{display:flex;align-items:center;gap:6px;padding:10px 16px 4px;overflow-x:auto;scrollbar-width:none}
.mmp-step-tabs::-webkit-scrollbar{display:none}
.mmp-step-tab{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:0;background:transparent;color:rgba(255,255,255,0.3);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .25s ease;font-family:Roboto,sans-serif}
.mmp-step-tab svg{flex-shrink:0}
.mmp-step-tab--active{background:rgba(241,91,39,0.15);color:#f15b27;border:1px solid rgba(241,91,39,0.35)}
.mmp-step-tab--completed{color:rgba(255,255,255,0.5)}
.mmp-slides{position:relative;flex:1;min-height:0;overflow-y:auto}
.mmp-slide{display:none;padding:24px 16px 32px;animation:mmpFadeIn .3s ease}
.mmp-slide--active{display:block}
@keyframes mmpFadeIn{from{opacity:0;transform:translateX(20px)}
to{opacity:1;transform:translateX(0)}
}
@keyframes mmpFadeInBack{from{opacity:0;transform:translateX(-20px)}
to{opacity:1;transform:translateX(0)}
}
.mmp-slide--enter-back{animation:mmpFadeInBack .3s ease}
.mmp-slide-header{margin-bottom:24px;text-align:center}
.mmp-slide-title{font-size:20px;font-weight:700;color:#fff;margin:0 0 6px;line-height:1.3}
.mmp-slide-sub{font-size:13px;color:rgba(255,255,255,0.5);margin:0}
.mmp-option-grid{display:grid;gap:12px;margin:auto}
.mmp-option-grid--2col{grid-template-columns:1fr 1fr}
.mmp-option-grid--1col{grid-template-columns:1fr;max-width:340px}
.mmp-option-grid--quality{grid-template-columns:repeat(2,120px);justify-content:center;gap:16px;margin-top:16px}
.mmp-option-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;cursor:pointer;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;transition:all .2s ease;text-align:left;background:#151519;border:1px solid rgba(255,255,255,0.05);color:rgba(255,255,255,0.85)}
.mmp-option-item:hover{border-color:rgba(241,91,39,0.4)}
.mmp-option-item--selected{background:#2a0c0e;border:1px solid #f15b27;color:#f15b27}
.mmp-option-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.6);flex-shrink:0;font-size:13px;font-weight:700;transition:all .2s ease}
.mmp-option-item--selected .mmp-option-icon{background:rgba(241,91,39,0.15);color:#f15b27}
.mmp-option-icon--alpha{font-size:14px;font-weight:700}
.mmp-option-item--wide{padding:16px 20px;font-size:15px}
.mmp-option-item--quality{flex-direction:column;justify-content:center;align-items:center;padding:20px 12px;gap:10px;text-align:center;border-radius:12px;width:120px;height:110px}
.mmp-option-item--quality .mmp-option-icon{width:48px;height:48px;border-radius:10px;background:transparent}
.mmp-option-item--quality .mmp-option-icon svg{width:36px;height:auto}
.mmp-sprite-icon{width:22px;height:22px;display:block;flex-shrink:0;color:rgba(255,255,255,0.6);transition:color .2s ease;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mmp-option-item--selected .mmp-sprite-icon{color:#f15b27}
.mmp-option-item--quality .mmp-sprite-icon{width:36px;height:36px}
.mmp-option-item--quality .mmp-option-label{font-size:14px;font-weight:700}
.mmp-footer{padding:20px 16px 24px;background:#0e0e12;display:flex;gap:12px}
.mmp-btn{flex:1;padding:15px;border-radius:10px;border:0;font-size:15px;font-weight:600;cursor:pointer;font-family:Roboto,sans-serif;transition:background .2s ease;position:relative;overflow:visible}
.mmp-btn--back{background:#222228;color:#fff}
.mmp-btn--back:hover{background:#2e2e36}
.mmp-btn--next{background:#2a2a32;color:rgba(255,255,255,0.3);cursor:not-allowed}
.mmp-btn--next.mmp-btn--enabled{background:#f15b27;color:#fff;cursor:pointer}
.mmp-btn--next.mmp-btn--enabled:hover{background:#d44d20}
@keyframes mmpBtnShake{0,100%{transform:translateX(0) rotate(0)}
12%{transform:translateX(-7px) rotate(-1deg)}
25%{transform:translateX(7px) rotate(1deg)}
37%{transform:translateX(-5px) rotate(-0.5deg)}
50%{transform:translateX(5px) rotate(0.5deg)}
62%{transform:translateX(-3px)}
75%{transform:translateX(3px)}
87%{transform:translateX(-1px)}
}
@keyframes mmpBtnShockwave{0{box-shadow:0 0 0 0 rgba(241,91,39,0.7)}
50%{box-shadow:0 0 0 14px rgba(241,91,39,0.15)}
100%{box-shadow:0 0 0 28px rgba(241,91,39,0)}
}
.mmp-btn--next.mmp-btn--error{animation:mmpBtnShake .55s cubic-bezier(.36,.07,.19,.97) both,mmpBtnShockwave .65s ease-out both}
@media(min-width:768px){.mmp-quiz-inner{max-width:600px;margin:0 auto}
.mmp-progress-wrap{padding:20px 32px 0}
.mmp-step-tabs{padding:12px 32px 4px}
.mmp-slide{padding:28px 32px 32px}
.mmp-option-grid--2col{grid-template-columns:repeat(3,1fr)}
.mmp-option-grid--1col{max-width:420px}
.mmp-option-grid--quality{grid-template-columns:repeat(2,140px)}
.mmp-option-item--quality{width:140px;height:120px}
.mmp-footer{padding:20px 32px 32px}
.mmp-slide-title{font-size:24px}
}