.mm-stage { position: relative; overflow: hidden; scroll-margin-top: 1rem; }
.mm-stage [hidden] { display: none !important; }
.mm-stage button { min-height: 44px; touch-action: manipulation; }
.mm-progress { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; gap: .35rem; padding: 0; margin: 1rem 0; }
.mm-progress li { padding: .6rem .2rem; text-align: center; border-bottom: 4px solid var(--bs-border-color, #dee2e6); font-size: .9rem; }
.mm-progress [aria-current] { border-color: #0e7490; font-weight: 700; background: #e6f6fa; color: #164e63; }
.mm-progress .mm-done { border-color: #15803d; }
.mm-quote { padding: .8rem; border-left: 4px solid #0e7490; background: var(--bs-tertiary-bg, #f8f9fa); }
#mmQuoteZh { font-size: 1.7rem; margin-bottom: .3rem; }
.mm-options { display: grid; gap: .7rem; }
.mm-option { padding: .8rem 1rem; border: 2px solid var(--bs-border-color, #ced4da); border-radius: .65rem; background: var(--bs-body-bg, white); color: var(--bs-body-color, #212529); text-align: left; font-size: 1.2rem; -webkit-tap-highlight-color: transparent; }
.mm-support { display: block; font-size: .9rem; margin-top: .3rem; }
.mm-option:focus-visible, .mm-stage button:focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }
.mm-option:active:not(:disabled) { transform: scale(.98); background: #e6f6fa; }
.mm-option.mm-correct { background: #dcfce7; border-color: #15803d; color: #14532d; animation: mm-pop .3s ease; }
.mm-option.mm-wrong { background: #fff1f2; border-color: #be123c; color: #881337; animation: mm-shake .3s ease; }
.mm-option:disabled { opacity: 1; }
.mm-feedback { border-left: 4px solid #0e7490; padding: .8rem; background: var(--bs-tertiary-bg, #f8f9fa); }
.mm-receipt { border: 2px dashed var(--bs-border-color, #adb5bd); border-top: 6px solid #0e7490; padding: 1rem; margin-top: 1rem; overflow-wrap: anywhere; }
.mm-receipt ol { padding-left: 1.2rem; }
.mm-receipt li { padding: .5rem 0; border-bottom: 1px dashed var(--bs-border-color, #dee2e6); }
.mm-receipt li p { margin: .3rem 0; }
.mm-save { margin-left: .5rem; }
.mm-effect { position: absolute; pointer-events: none; z-index: 3; }
.mm-particle { width: 8px; height: 8px; border-radius: 50%; animation: mm-burst .7s ease-out forwards; }
.mm-confetti { width: 8px; height: 12px; animation: mm-fall 1.6s ease-out forwards; }
@keyframes mm-burst { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@keyframes mm-fall { to { transform: translate(var(--dx), 360px) rotate(420deg); opacity: 0; } }
@keyframes mm-pop { 50% { transform: scale(1.02); } }
@keyframes mm-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (hover: hover) { .mm-option:hover:not(:disabled) { border-color: #0e7490; } }
[data-bs-theme="dark"] .mm-progress [aria-current] { background: #164e63; color: #cffafe; }
[data-bs-theme="dark"] .mm-option:active:not(:disabled) { background: #164e63; }
[data-bs-theme="dark"] .mm-option.mm-correct { background: #14532d; color: #dcfce7; border-color: #4ade80; }
[data-bs-theme="dark"] .mm-option.mm-wrong { background: #881337; color: #fff1f2; border-color: #fda4af; }
@media (prefers-reduced-motion: reduce) {
    .mm-stage *, .mm-stage *::before, .mm-stage *::after { animation: none !important; transition: none !important; }
    .mm-effect { display: none !important; }
}