.mm-wrap { --mm-gold:#d4af37; --mm-wgold:#e6e6e6; --mm-plat:#e5e4e2; --mm-silver:#c0c0c0; }
.mm-wrap { max-width: 820px; margin: 0 auto; padding: 12px; }
.mm-card { background:#fff; border:1px solid #ececec; border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden; }
.mm-header { padding:16px 18px; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.mm-title { font-size:20px; font-weight:800; }
.mm-body { padding:18px; }
.mm-actions { display:flex; gap:8px; justify-content:space-between; padding:16px; border-top:1px solid #f0f0f0; }
.mm-btn { appearance:none; border:1px solid #ddd; background:#fafafa; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; }
.mm-btn.primary { background:#111; color:#fff; border-color:#111; }
.mm-btn.ghost { background:#fff; color:#333; }
.mm-btn.disabled, .mm-btn:disabled { opacity:.45; pointer-events:none; }
.mm-progress { width:100%; height:6px; background:#f2f2f2; border-radius:999px; overflow:hidden; margin:8px 0 0; }
.mm-progress > i { display:block; height:100%; background:linear-gradient(90deg,#111,#666); width:0%; transition:width .25s ease; }
.mm-q-title { font-size:18px; font-weight:800; margin-bottom:12px; }
.mm-options { display:grid; gap:10px; }
.mm-opt { border:1px solid #e9e9e9; border-radius:12px; padding:12px; cursor:pointer; background:#fff; transition:all .15s ease; }
.mm-opt:hover { border-color:#ccc; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.mm-opt.active { border-color:#111; box-shadow:0 6px 16px rgba(0,0,0,.08); background:#f9f9f9; } .mm-res-grid { display:grid; gap:14px; }
@media(min-width:768px){ .mm-res-grid { grid-template-columns: 1.2fr .8fr; } }
.mm-badge { display:inline-flex; align-items:center; gap:8px; font-weight:800; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.06); background:#fff; }
.mm-chip { font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid #eee; background:#fafafa; }
.mm-bar { height:10px; background:#f2f2f2; border-radius:999px; overflow:hidden; }
.mm-bar > i { display:block; height:100%; width:0%; transition:width .4s ease; }
.mm-metal { display:flex; align-items:center; gap:10px; margin:8px 0; }
.mm-metal .name { width:110px; font-weight:700; }
.mm-metal .score { min-width:42px; text-align:right; font-weight:700; } .mm-chip.gold, .mm-pill.gold { 
color:#3b2a03; background:linear-gradient(180deg,#fff5d0,#f1d78a 55%, #d4af37);
border-color:#d4af37;
}
.mm-chip.wgold, .mm-pill.wgold { 
color:#333; background:linear-gradient(180deg,#ffffff,#eaeaea 60%, #d9d9d9);
border-color:#e6e6e6;
}
.mm-chip.plat, .mm-pill.plat { 
color:#333; background:linear-gradient(180deg,#ffffff,#ececec 60%, #e5e4e2);
border-color:#e5e4e2;
}
.mm-chip.silver, .mm-pill.silver { 
color:#333; background:linear-gradient(180deg,#ffffff,#f0f0f0 60%, #c0c0c0);
border-color:#c0c0c0;
} .mm-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.mm-cta a { text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid #ddd; font-weight:800;
pointer-events:auto !important; position:relative; z-index:2; }
.mm-cta a.black { background:#111; color:#fff; border-color:#111; }
.mm-cta a.light { background:#fff; color:#222; }
.mm-cta a .hint { font-weight:600; color:#777; font-size:12px; }