/* Melaka Memilih: Misi 15 (Ustaz Muhammad Zulhusnie bin Khalib) — gaya asal diskop .mm. DIJANA bina_melaka_memilih.py */
.mm{--bg:#e9edf4; --surface:#ffffff; --surface2:#f3f5f9; --ink:#0f1830; --muted:#4e5a70; --line:#cfd7e4;
  --accent:#d9480f; --accent-soft:#ffe8d6; --accent-ink:#ffffff; --good:#0d7a5a; --bad:#b42318;
  --neutral:#a3acbc; --neutral-ink:#1d2433; --focus:#ff8a1f;
  --c-BN:#20288f; --c-PN:#2c4b60; --c-PH:#e8382e; --c-BERSATU:#86173a; --c-BERSAMA:#f2bf1a; --c-BLOK:#1f4fa8;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  color-scheme:light;}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .mm{--bg:#0c1323; --surface:#141d32; --surface2:#1b2640; --ink:#eef2fa; --muted:#a3afc6; --line:#2b3855;
    --accent:#ff8a1f; --accent-soft:#3a2513; --accent-ink:#1a0f05; --good:#3ccf98; --bad:#ff7a6b;
    --neutral:#46516a; --neutral-ink:#eef2fa; color-scheme:dark;}}
html[data-theme="dark"] .mm{--bg:#0c1323; --surface:#141d32; --surface2:#1b2640; --ink:#eef2fa; --muted:#a3afc6; --line:#2b3855;
  --accent:#ff8a1f; --accent-soft:#3a2513; --accent-ink:#1a0f05; --good:#3ccf98; --bad:#ff7a6b;
  --neutral:#46516a; --neutral-ink:#eef2fa; color-scheme:dark;}
.mm.mm-besar{--mm-r:calc(18.88px * var(--fs-scale,1))}
.mm *,.mm *::before,.mm *::after{box-sizing:border-box}
.mm{color:var(--ink);font-family:var(--body);font-size:var(--mm-r);line-height:1.5;-webkit-font-smoothing:antialiased}
.mm h1,.mm h2,.mm h3,.mm h4{font-family:var(--display);line-height:1.05;margin:0;letter-spacing:.01em}
.mm h2{font-size:calc(1.75 * var(--mm-r));font-weight:800}
.mm h3{font-size:calc(1.3 * var(--mm-r));font-weight:700}
.mm p{margin:0 0 .6em}
.mm button,.mm input,.mm select{font:inherit;color:inherit}
.mm button{cursor:pointer}
.mm :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.mm .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mm img,.mm svg{max-width:100%}
.mm .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:calc(.6 * var(--mm-r));padding:calc(.55 * var(--mm-r)) calc(.9 * var(--mm-r))}
.mm .brand{display:flex;flex-direction:column;line-height:.95;text-decoration:none;color:inherit;margin-right:auto;min-width:0}
.mm .brand b{font-family:var(--display);font-weight:800;font-size:calc(1.35 * var(--mm-r));letter-spacing:.04em}
.mm .brand small{font-family:var(--display);font-weight:600;font-size:calc(.82 * var(--mm-r));color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm .pill{display:inline-flex;align-items:center;gap:calc(.3 * var(--mm-r));background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:calc(.25 * var(--mm-r)) calc(.65 * var(--mm-r));font-weight:600;font-size:calc(.92 * var(--mm-r));white-space:nowrap;min-height:36px}
.mm .pill .ic{font-size:calc(1 * var(--mm-r))}
.mm .iconbtn{min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);display:grid;place-items:center;font-size:calc(1.2 * var(--mm-r))}
@container mm (max-width:520px){.mm .pill.hide-sm{display:none}
.mm .brand b{font-size:calc(1.1 * var(--mm-r));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm .top .pill{padding:calc(.2 * var(--mm-r)) calc(.5 * var(--mm-r))}
.mm #pills{flex:none}}
@container mm (max-width:370px){.mm .brand b{font-size:calc(.95 * var(--mm-r))}}
.mm .tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
.mm .tabs button{background:none;border:0;padding:calc(.45 * var(--mm-r)) calc(.2 * var(--mm-r)) calc(.5 * var(--mm-r));min-height:60px;display:flex;flex-direction:column;align-items:center;gap:calc(.1 * var(--mm-r));font-size:calc(.78 * var(--mm-r));font-weight:600;color:var(--muted)}
.mm .tabs button span{font-size:calc(1.3 * var(--mm-r));line-height:1}
.mm .tabs button[aria-current="page"]{color:var(--accent)}
.mm .tabs button[aria-current="page"] span{transform:translateY(-1px)}
@container mm (min-width:900px){.mm .tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);bottom:auto;border-top:0;border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:calc(.3 * var(--mm-r));padding:0 calc(1 * var(--mm-r))}
.mm .tabs button{flex-direction:row;min-height:48px;font-size:calc(.98 * var(--mm-r));padding:0 calc(1 * var(--mm-r));gap:calc(.45 * var(--mm-r));border-bottom:3px solid transparent}
.mm .tabs button[aria-current="page"]{border-bottom-color:var(--accent)}
.mm .tabs button span{font-size:calc(1.05 * var(--mm-r))}}
.mm .mm-main{max-width:1180px;margin:0 auto;padding:calc(1 * var(--mm-r)) calc(.9 * var(--mm-r)) calc(2 * var(--mm-r))}
.mm .grid{display:grid;gap:calc(1 * var(--mm-r))}
@container mm (min-width:900px){.mm .g2{grid-template-columns:1.15fr .85fr}
.mm .g3{grid-template-columns:repeat(3,1fr)}}
.mm .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:calc(1 * var(--mm-r))}
.mm .card.flat{background:var(--surface2)}
.mm .muted{color:var(--muted)}
.mm .small{font-size:calc(.88 * var(--mm-r))}
.mm .row{display:flex;gap:calc(.6 * var(--mm-r));align-items:center;flex-wrap:wrap}
.mm .between{justify-content:space-between}
.mm .stack>*+*{margin-top:calc(.75 * var(--mm-r))}
.mm .btn{min-height:48px;padding:calc(.6 * var(--mm-r)) calc(1.15 * var(--mm-r));border-radius:12px;border:1px solid var(--line);background:var(--surface2);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:calc(.45 * var(--mm-r));text-decoration:none;color:inherit}
.mm .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mm .btn.big{min-height:58px;font-size:calc(1.15 * var(--mm-r));padding:calc(.7 * var(--mm-r)) calc(1.6 * var(--mm-r));font-family:var(--display);letter-spacing:.04em;font-weight:800}
.mm .btn.ghost{background:transparent}
.mm .btn:disabled{opacity:.45;cursor:not-allowed}
.mm .btn.sm{min-height:44px;padding:calc(.4 * var(--mm-r)) calc(.8 * var(--mm-r));font-size:calc(.92 * var(--mm-r))}
.mm .chip{display:inline-flex;align-items:center;gap:calc(.35 * var(--mm-r));border-radius:999px;padding:calc(.12 * var(--mm-r)) calc(.55 * var(--mm-r));font-size:calc(.8 * var(--mm-r));font-weight:700;border:1px solid var(--line);background:var(--surface2)}
.mm .sw{width:calc(.85 * var(--mm-r));height:calc(.85 * var(--mm-r));border-radius:3px;display:inline-block;flex:none;border:1px solid rgba(0,0,0,.15)}
.mm .disclaimer{border-left:4px solid var(--accent);background:var(--accent-soft);padding:calc(.7 * var(--mm-r)) calc(.9 * var(--mm-r));border-radius:0 var(--r-md) var(--r-md) 0;font-size:calc(.92 * var(--mm-r))}
.mm .hero{display:grid;gap:calc(1.4 * var(--mm-r));align-items:center;padding:calc(1 * var(--mm-r)) 0 calc(1.5 * var(--mm-r))}
@container mm (min-width:900px){.mm .hero{grid-template-columns:1fr 1fr}}
.mm .hero .mm-h1{font-size:clamp(calc(3 * var(--mm-r)),11vw,calc(6.2 * var(--mm-r)));font-weight:800;letter-spacing:.015em;line-height:.88}
.mm .hero .mm-h1 .l2{display:block;-webkit-text-stroke:2px var(--ink);color:transparent}
.mm .hero .sub{font-family:var(--display);font-size:calc(1.45 * var(--mm-r));font-weight:700;margin:calc(.6 * var(--mm-r)) 0 calc(.3 * var(--mm-r));color:var(--accent)}
.mm .hero .tag{font-size:calc(1.05 * var(--mm-r));color:var(--muted);max-width:34ch}
.mm .howto{display:grid;gap:calc(.7 * var(--mm-r))}
@container mm (min-width:700px){.mm .howto{grid-template-columns:repeat(4,1fr)}}
.mm .howto li{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:calc(.9 * var(--mm-r))}
.mm .howto b{display:block;font-family:var(--display);font-size:calc(1.2 * var(--mm-r))}
.mm .howto{padding:0;margin:0}
.mm .mapwrap{position:relative}
.mm .map svg{display:block;width:100%;height:auto}
.mm .hex{cursor:pointer}
.mm .hex path.base{stroke:#fff;stroke-width:2;stroke-linejoin:round}
.mm .mapland{filter:drop-shadow(0 6px 10px rgba(10,20,60,.18))}
.mm .hex:focus{outline:none}
.mm .hex:focus-visible path.base,.mm .hex:hover path.base{stroke:var(--focus);stroke-width:4}
.mm .maptop text{font-family:var(--body);text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke-width:3px;stroke-linejoin:round}
.mm .maptop .num{font-weight:800}
.mm .maptop .lab{font-weight:700;letter-spacing:.04em}
.mm .map svg[data-zoom]{touch-action:none;cursor:grab}
.mm .zoomctl{position:absolute;right:calc(.6 * var(--mm-r));top:calc(.6 * var(--mm-r));display:flex;flex-direction:column;gap:calc(.3 * var(--mm-r))}
.mm .zoomctl button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:calc(1.3 * var(--mm-r));font-weight:800}
.mm .maptop .ring{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-dasharray:8 5}
.mm .maptop .glow{fill:none;stroke:#ff8a1f;stroke-width:4.5;animation:mm-pulse 1.6s ease-in-out infinite}
.mm .hex.flash path.base{animation:mm-flash 1s ease-out}
@keyframes mm-pulse{0%,100%{stroke-opacity:.25}50%{stroke-opacity:1}}
@keyframes mm-flash{0%{filter:brightness(2.2)}100%{filter:none}}
.mm .maplabel{font-family:var(--display);font-size:26px;fill:var(--muted);font-weight:700}
.mm .maptop .num{font-family:var(--body);font-weight:800;letter-spacing:.01em}
.mm .hex .lead{stroke:var(--ink);stroke-width:2}
.mm .hex .leaddot{fill:var(--ink)}
.mm .hex .callout{font-family:var(--body);font-weight:800;font-size:22px;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:4px}
.mm .hex:hover .callout,.mm .hex:focus-visible .callout{fill:var(--accent)}
.mm .dunhead{position:relative;padding-bottom:calc(.45 * var(--mm-r));min-width:min(100%,340px)}
.mm .dunhead h2{font-family:var(--body);font-weight:800;font-size:calc(2 * var(--mm-r));letter-spacing:.01em;color:#c8102e}
.mm .dunhead span{display:block;font-size:calc(.85 * var(--mm-r));color:var(--muted);font-weight:600}
.mm .dunhead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#c8102e}
.mm .dunhead::before{content:"";position:absolute;left:64%;bottom:-9px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:10px solid #c8102e}
html[data-theme="dark"] .mm .dunhead h2{color:#ff5a6e}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .mm .dunhead h2{color:#ff5a6e}}
.mm .legend{display:flex;flex-wrap:wrap;gap:calc(.4 * var(--mm-r)) calc(.9 * var(--mm-r));font-size:calc(.85 * var(--mm-r))}
.mm .legend span{display:inline-flex;align-items:center;gap:calc(.35 * var(--mm-r))}
.mm .seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;flex-wrap:wrap}
.mm .seg button{border:0;background:transparent;border-radius:9px;min-height:40px;padding:calc(.3 * var(--mm-r)) calc(.8 * var(--mm-r));font-weight:700;font-size:calc(.9 * var(--mm-r))}
.mm .seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--accent)}
.mm .strip{display:grid;grid-template-columns:repeat(28,1fr);gap:2px;position:relative;margin:calc(.5 * var(--mm-r)) 0 calc(1.4 * var(--mm-r))}
.mm .strip i{height:26px;border-radius:3px;display:block;background:var(--neutral)}
.mm .strip .notch{position:absolute;left:calc(15/28*100% - 1px);top:-6px;bottom:-6px;width:2px;background:var(--ink)}
.mm .strip .notch::after{content:"15";position:absolute;top:100%;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:calc(.85 * var(--mm-r))}
.mm .tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:calc(.5 * var(--mm-r))}
.mm .tally div{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-md);padding:calc(.5 * var(--mm-r)) calc(.6 * var(--mm-r));border-top:5px solid var(--neutral)}
.mm .tally b{font-family:var(--display);font-size:calc(2 * var(--mm-r));font-weight:800;display:block;line-height:1}
.mm .tally span{font-size:calc(.8 * var(--mm-r));font-weight:600;color:var(--muted)}
.mm .candhead{display:grid;gap:calc(1 * var(--mm-r));grid-template-columns:auto 1fr;align-items:center}
.mm .avatar{width:72px;height:72px;border-radius:16px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:calc(1.6 * var(--mm-r));color:#fff;position:relative;overflow:hidden}
.mm .avatar small{position:absolute;bottom:3px;font-size:calc(.55 * var(--mm-r));font-weight:700;opacity:.85;letter-spacing:.04em}
.mm .bignum{font-family:var(--display);font-weight:800;font-size:calc(3 * var(--mm-r));line-height:.9}
.mm .status{font-family:var(--display);font-weight:800;font-size:calc(1.15 * var(--mm-r));padding:calc(.15 * var(--mm-r)) calc(.6 * var(--mm-r));border-radius:8px;background:var(--surface2);border:1px solid var(--line)}
.mm .status.hot{background:#ff8a1f;color:#1a0f05;border-color:#ff8a1f}
.mm .energy{display:flex;gap:4px}
.mm .energy i{width:22px;height:30px;border-radius:5px;background:var(--surface2);border:1px solid var(--line);display:block}
.mm .energy i.on{background:linear-gradient(180deg,#ffb347,#ff7a00);border-color:#ff7a00}
.mm .missions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:calc(.6 * var(--mm-r))}
.mm .mission{text-align:left;border:1px solid var(--line);background:var(--surface2);border-radius:var(--r-md);padding:calc(.75 * var(--mm-r));min-height:118px;display:flex;flex-direction:column;gap:calc(.2 * var(--mm-r));position:relative}
.mm .mission .ico{font-size:calc(1.6 * var(--mm-r))}
.mm .mission b{font-family:var(--display);font-size:calc(1.2 * var(--mm-r));font-weight:800;line-height:1}
.mm .mission .muted{font-size:calc(.8 * var(--mm-r));line-height:1.3}
.mm .mission .boost{position:absolute;top:calc(.5 * var(--mm-r));right:calc(.5 * var(--mm-r));font-size:calc(.7 * var(--mm-r));font-weight:800;background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:calc(.05 * var(--mm-r)) calc(.35 * var(--mm-r))}
.mm .mission:hover{border-color:var(--accent)}
.mm .zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:calc(.55 * var(--mm-r))}
.mm .zone{border-radius:var(--r-md);padding:calc(.65 * var(--mm-r));border:1px solid var(--line);background:var(--surface2);position:relative;overflow:hidden;min-height:96px}
.mm .zone::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--zc,var(--neutral))}
.mm .zone b{font-family:var(--display);font-size:calc(1.08 * var(--mm-r))}
.mm .zone .bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:calc(.35 * var(--mm-r))}
.mm .zone .bar i{display:block;height:100%;background:var(--accent)}
.mm .zone.mine{box-shadow:inset 0 0 0 2px var(--good)}
.mm .zone.pulse{animation:mm-flash 1s ease-out}
.mm .bank{display:flex;align-items:center;gap:calc(.8 * var(--mm-r));flex-wrap:wrap;background:var(--surface2);border:1px dashed var(--accent);border-radius:var(--r-md);padding:calc(.7 * var(--mm-r)) calc(.9 * var(--mm-r))}
.mm .bank .bignum{font-size:calc(2.2 * var(--mm-r));color:var(--accent)}
.mm .progress{height:12px;border-radius:7px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.mm .progress i{display:block;height:100%;background:var(--good);transition:width .5s}
.mm .progress.m15{position:relative;overflow:visible}
.mm .progress.m15::after{content:"";position:absolute;left:calc(15/28*100%);top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.mm .live .tally b{font-size:calc(1.5 * var(--mm-r))}
.mm .live .tally div{padding:calc(.35 * var(--mm-r)) calc(.5 * var(--mm-r))}
.mm .live .hemi{max-height:170px;display:block;margin:0 auto}
@container mm (min-width:1000px){.mm .live .lpanel.map svg{max-height:calc(100% - calc(1.8 * var(--mm-r)));width:auto;margin:0 auto}}
.mm .cards{display:flex;gap:calc(.6 * var(--mm-r));overflow-x:auto;padding-bottom:calc(.3 * var(--mm-r))}
.mm .scard{flex:none;width:170px;border-radius:14px;padding:calc(.75 * var(--mm-r));border:1px solid var(--line);background:linear-gradient(160deg,var(--surface2),var(--surface));display:flex;flex-direction:column;gap:calc(.3 * var(--mm-r))}
.mm .scard b{font-family:var(--display);font-size:calc(1.12 * var(--mm-r))}
.mm .feed{list-style:none;padding:0;margin:0;font-size:calc(.92 * var(--mm-r))}
.mm .feed li{padding:calc(.4 * var(--mm-r)) 0;border-bottom:1px solid var(--line);display:flex;gap:calc(.5 * var(--mm-r))}
.mm .feed time{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:calc(.82 * var(--mm-r));padding-top:calc(.1 * var(--mm-r))}
.mm .tut{border:2px solid var(--accent)}
.mm table{width:100%;border-collapse:collapse;font-size:calc(.92 * var(--mm-r))}
.mm th,.mm td{text-align:left;padding:calc(.45 * var(--mm-r)) calc(.4 * var(--mm-r));border-bottom:1px solid var(--line);vertical-align:top}
.mm th{font-size:calc(.8 * var(--mm-r));color:var(--muted);font-weight:700}
.mm td.n,.mm th.n{text-align:right;font-variant-numeric:tabular-nums}
.mm .tablewrap{overflow-x:auto}
.mm details summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.mm .steps{display:flex;gap:calc(.4 * var(--mm-r));margin-bottom:calc(1 * var(--mm-r))}
.mm .steps i{flex:1;height:6px;border-radius:4px;background:var(--line)}
.mm .steps i.on{background:var(--accent)}
.mm .duns{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:calc(.5 * var(--mm-r))}
.mm .dunbtn{text-align:left;min-height:64px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);padding:calc(.55 * var(--mm-r)) calc(.75 * var(--mm-r));display:flex;gap:calc(.6 * var(--mm-r));align-items:center}
.mm .dunbtn b{font-family:var(--display);font-size:calc(1.15 * var(--mm-r));display:block;line-height:1}
.mm .dunbtn .code{font-family:var(--display);font-weight:800;font-size:calc(1.05 * var(--mm-r));color:var(--muted);min-width:calc(2.6 * var(--mm-r))}
.mm .dunbtn[aria-pressed="true"],.mm .dunbtn:hover{border-color:var(--accent)}
.mm .cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:calc(.7 * var(--mm-r))}
.mm .candbtn{text-align:left;border-radius:var(--r-lg);border:2px solid var(--line);background:var(--surface);padding:calc(.9 * var(--mm-r));display:flex;flex-direction:column;gap:calc(.5 * var(--mm-r));min-height:170px}
.mm .candbtn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mm .candbtn b{font-family:var(--display);font-size:calc(1.25 * var(--mm-r));line-height:1.05}
.mm .roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:calc(.6 * var(--mm-r))}
.mm .input{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:calc(.5 * var(--mm-r)) calc(.8 * var(--mm-r))}
.mm label.check{display:flex;gap:calc(.6 * var(--mm-r));align-items:flex-start;min-height:44px}
.mm label.check input{width:22px;height:22px;margin-top:calc(.15 * var(--mm-r));flex:none}
.mm .overlay{position:fixed;inset:0;z-index:50;background:rgba(5,10,20,.6);display:none;align-items:flex-end;justify-content:center;padding:0}
.mm .overlay.open{display:flex}
.mm .sheet{background:var(--surface);width:100%;max-width:720px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:calc(1.1 * var(--mm-r)) calc(1 * var(--mm-r)) calc(calc(1.2 * var(--mm-r)) + env(safe-area-inset-bottom,0px))}
.mm .sheet header{display:flex;align-items:flex-start;gap:calc(.8 * var(--mm-r));justify-content:space-between;margin-bottom:calc(.8 * var(--mm-r))}
.mm #game .sheet{max-width:640px;min-height:min(620px,92vh);display:flex;flex-direction:column}
.mm .timer{height:10px;border-radius:6px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.mm .timer i{display:block;height:100%;background:var(--accent);transition:width .25s linear}
.mm .qcard{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-lg);padding:calc(1.2 * var(--mm-r));font-size:calc(1.2 * var(--mm-r));font-weight:600;min-height:120px;display:flex;align-items:center}
.mm .opts{display:grid;gap:calc(.55 * var(--mm-r))}
.mm .opt{min-height:56px;text-align:left;border-radius:var(--r-md);border:2px solid var(--line);background:var(--surface);padding:calc(.6 * var(--mm-r)) calc(.9 * var(--mm-r));font-weight:600}
.mm .opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 18%,var(--surface))}
.mm .opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,var(--surface))}
.mm .tf{display:grid;grid-template-columns:1fr 1fr;gap:calc(.6 * var(--mm-r))}
.mm .tf button{min-height:84px;font-family:var(--display);font-size:calc(1.7 * var(--mm-r));font-weight:800;border-radius:16px;border:0;color:#fff}
.mm .tf .yes{background:#0d7a5a}
.mm .tf .no{background:#b42318}
.mm .combo{font-family:var(--display);font-weight:800;font-size:calc(1.4 * var(--mm-r));color:var(--accent)}
.mm .fb{min-height:2.6em;font-size:calc(.95 * var(--mm-r));margin-top:calc(.5 * var(--mm-r))}
.mm .fb.ok{color:var(--good)}
.mm .fb.no{color:var(--bad)}
.mm .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(.5 * var(--mm-r))}
@media (min-width:560px){.mm .cats{grid-template-columns:repeat(3,1fr)}}
.mm .alloc{display:grid;grid-template-columns:1fr auto;gap:calc(.5 * var(--mm-r)) calc(.8 * var(--mm-r));align-items:center}
.mm .alloc .need{display:flex;gap:3px;margin-top:calc(.2 * var(--mm-r))}
.mm .alloc .need i{width:16px;height:6px;border-radius:3px;background:var(--line)}
.mm .alloc .need i.on{background:var(--accent)}
.mm .stepper{display:flex;align-items:center;gap:calc(.3 * var(--mm-r))}
.mm .stepper button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);font-size:calc(1.3 * var(--mm-r));font-weight:800}
.mm .stepper output{min-width:2ch;text-align:center;font-family:var(--display);font-size:calc(1.5 * var(--mm-r));font-weight:800}
.mm .order{display:grid;gap:calc(.45 * var(--mm-r))}
.mm .order button{min-height:52px;border-radius:12px;border:2px solid var(--line);background:var(--surface);text-align:left;padding:calc(.5 * var(--mm-r)) calc(.8 * var(--mm-r));font-weight:600;display:flex;gap:calc(.6 * var(--mm-r));align-items:center}
.mm .order button.done{border-color:var(--good);opacity:.6}
.mm .order button .k{font-family:var(--display);font-weight:800;font-size:calc(1.2 * var(--mm-r));min-width:calc(1.4 * var(--mm-r));color:var(--good)}
.mm .shake{animation:mm-shake .35s}
@keyframes mm-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mm .result{text-align:center}
.mm .result .bignum{font-size:calc(4.2 * var(--mm-r));color:var(--accent)}
.mm .breakdown{text-align:left;margin:calc(1 * var(--mm-r)) 0}
.mm .breakdown div{display:flex;justify-content:space-between;padding:calc(.35 * var(--mm-r)) 0;border-bottom:1px solid var(--line)}
.mm .spendz{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:calc(.45 * var(--mm-r))}
.mm .spendz button{text-align:left;border-radius:12px;border:2px solid var(--line);background:var(--surface2);padding:calc(.55 * var(--mm-r)) calc(.7 * var(--mm-r));min-height:72px;position:relative;overflow:hidden}
.mm .spendz button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--zc,var(--neutral))}
.mm .spendz button[aria-pressed="true"]{border-color:var(--accent)}
.mm .spendz button:disabled{opacity:.4}
.mm #toasts{position:fixed;z-index:60;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top,0px));display:grid;gap:calc(.4 * var(--mm-r));width:min(92vw,460px);pointer-events:none}
.mm .toast{background:var(--ink);color:var(--surface);padding:calc(.65 * var(--mm-r)) calc(.9 * var(--mm-r));border-radius:12px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.25);animation:mm-tin .25s ease-out}
.mm .toast.win{background:var(--good);color:#fff}
@keyframes mm-tin{from{opacity:0;transform:translateY(8px)}}
.mm .live{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:calc(1 * var(--mm-r));display:grid;gap:calc(.9 * var(--mm-r))}
@container mm (min-width:1000px){.mm .live{aspect-ratio:16/9;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto 1fr auto;overflow:hidden}
.mm .live .lhead{grid-column:1/-1}
.mm .live .lticker{grid-column:1/-1}}
.mm .live:fullscreen{border-radius:0;aspect-ratio:auto;height:100vh;width:100vw;padding:calc(1.4 * var(--mm-r)) calc(2 * var(--mm-r))}
.mm .lhead{display:flex;gap:calc(1 * var(--mm-r));align-items:center;flex-wrap:wrap}
.mm .lhead h2{font-size:calc(2 * var(--mm-r));letter-spacing:.04em}
.mm .lhead .clock{font-family:var(--display);font-weight:800;font-size:calc(1.7 * var(--mm-r));font-variant-numeric:tabular-nums}
.mm .livedot{width:12px;height:12px;border-radius:50%;background:#e5383b;display:inline-block;animation:mm-pulse 1.4s infinite}
.mm .kpi{font-family:var(--display);font-weight:800;font-size:calc(1.5 * var(--mm-r));line-height:1}
.mm .kpi small{display:block;font-family:var(--body);font-size:calc(.72 * var(--mm-r));font-weight:600;color:var(--muted)}
.mm .lcol{display:flex;flex-direction:column;gap:calc(.7 * var(--mm-r));min-height:0}
.mm .lpanel{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-md);padding:calc(.7 * var(--mm-r)) calc(.8 * var(--mm-r));min-height:0;overflow:hidden}
.mm .lpanel h3{font-size:calc(1.05 * var(--mm-r));margin-bottom:calc(.4 * var(--mm-r))}
.mm .rank5{list-style:none;padding:0;margin:0;font-size:calc(.9 * var(--mm-r))}
.mm .rank5 li{display:flex;gap:calc(.5 * var(--mm-r));align-items:center;padding:calc(.22 * var(--mm-r)) 0;border-bottom:1px solid var(--line)}
.mm .rank5 li:last-child{border:0}
.mm .rank5 .v{margin-left:auto;font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums}
.mm .lticker{overflow:hidden;background:var(--ink);color:var(--surface);border-radius:10px;min-height:44px;display:flex;align-items:center}
.mm .lticker .tag{background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:800;padding:calc(.6 * var(--mm-r)) calc(.8 * var(--mm-r));flex:none;letter-spacing:.05em}
.mm .lticker .track{white-space:nowrap;display:inline-block;padding-left:calc(1.5 * var(--mm-r));animation:mm-crawl 55s linear infinite;font-weight:600}
.mm .lticker .track span{margin-right:calc(3 * var(--mm-r))}
@keyframes mm-crawl{to{transform:translateX(-100%)}}
.mm .hemi text{font-family:var(--display);text-anchor:middle}
.mm .announce{background:var(--ink);color:var(--surface);border-radius:var(--r-lg);padding:calc(1.2 * var(--mm-r));min-height:140px}
.mm .announce .code{font-family:var(--display);font-size:calc(1.1 * var(--mm-r));opacity:.75}
.mm .announce h3{font-size:calc(2.2 * var(--mm-r))}
.mm .banner{text-align:center;padding:calc(1.6 * var(--mm-r)) calc(1 * var(--mm-r));border-radius:var(--r-lg);color:#fff;background:var(--accent)}
.mm .banner h2{font-size:clamp(calc(2 * var(--mm-r)),7vw,calc(3.6 * var(--mm-r)))}
.mm .badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:calc(.5 * var(--mm-r))}
.mm .badge{border:1px solid var(--line);border-radius:12px;padding:calc(.6 * var(--mm-r));text-align:center;background:var(--surface2)}
.mm .badge .e{font-size:calc(1.8 * var(--mm-r));display:block}
.mm .badge.off{opacity:.35;filter:grayscale(1)}
.mm .badge b{font-size:calc(.85 * var(--mm-r));display:block;line-height:1.2}
.mm .lvbar{height:10px;border-radius:6px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.mm .lvbar i{display:block;height:100%;background:var(--accent)}
.mm.mm-rm *,.mm.mm-rm *::before,.mm.mm-rm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.mm *,.mm *::before,.mm *::after{animation:none!important;transition:none!important}}
.mm.mm-rm .lticker .track{padding-left:calc(1 * var(--mm-r))}
@media (prefers-reduced-motion:reduce){.mm .lticker .track{padding-left:calc(1 * var(--mm-r))}}
.mm .busy{opacity:.6;pointer-events:none}
.mm .conn{position:fixed;left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));z-index:40;background:var(--bad);color:#fff;border-radius:10px;padding:calc(.4 * var(--mm-r)) calc(.8 * var(--mm-r));font-weight:700;font-size:calc(.9 * var(--mm-r))}
.mm .code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:calc(.35 * var(--mm-r)) calc(.6 * var(--mm-r));word-break:break-all}

/* ===================== Rangka SistemGuru.My (Bhg 16/16A/16J/36) — dijana bina_melaka_memilih.py ===================== */
.mm{--mm-r:calc(16px * var(--fs-scale,1))}
#mm{position:relative;display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius,14px);--iv-sp-latar:var(--bg)}
#mm .mm-isi{container:mm / inline-size;display:flex;flex-direction:column;min-width:0}
#mm-luar{display:contents}
.mm svg{width:auto;height:auto;fill:initial;flex-shrink:1}
.mm .mm-ik{width:1.15em;height:1.15em;fill:currentColor;display:inline-block;vertical-align:-.2em;flex:none;overflow:visible}
.mm .mmw-hijau{color:var(--good)}.mm .mmw-merah{color:var(--bad)}.mm .mmw-kuning{color:#d97706}.mm .mmw-jingga{color:#ea580c}.mm .mmw-emas{color:#ca8a04}
html[data-theme="dark"] .mm .mmw-kuning,html[data-theme="dark"] .mm .mmw-emas{color:#fbbf24}
html[data-theme="dark"] .mm .mmw-jingga{color:#fb923c}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .mm .mmw-kuning,html:not([data-theme="light"]) .mm .mmw-emas{color:#fbbf24}html:not([data-theme="light"]) .mm .mmw-jingga{color:#fb923c}}
.mm .toast .mm-ik,.mm .status .mm-ik{color:inherit}
.mm .tabs button span .mm-ik{width:1em;height:1em;vertical-align:0}
.mm .mission .ico .mm-ik,.mm .badge .e .mm-ik,.mm .scard .mm-ik,.mm .roles .mm-ik{width:1em;height:1em}
.mm .mm-bot{display:inline-block;font-size:.72em;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:0 .35em;margin-left:.25em;color:var(--muted);vertical-align:.1em}
.mm .mm-botban{margin-bottom:calc(1 * var(--mm-r))}
/* Bar atas & tab permainan dalam panel */
#mm .top{position:relative;top:auto;z-index:6;border-radius:var(--radius,14px) var(--radius,14px) 0 0}
#mm .tabs{position:sticky;top:var(--kepala-h,62px);bottom:auto;left:auto;right:auto;z-index:5;border-top:0;border-bottom:1px solid var(--line);padding-bottom:0}
html.embed #mm .tabs{top:0}
#mm .mm-main{min-height:420px;width:100%;max-width:none;margin:0;min-width:0}
#mm .grid>*,#mm .row>*{min-width:0}
#mm .mm-sp{flex:none}
#mm .mm-sp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mm .mm-sp[aria-pressed="true"] .iv-sp-masuk,#mm .mm-sp[aria-pressed="false"] .iv-sp-keluar{display:none}
#mm .mm-sp span{display:none}
@container mm (min-width:700px){#mm .mm-sp{width:auto;padding:0 .8em;gap:.45em;display:inline-flex;font-size:.9em;font-weight:700}#mm .mm-sp span{display:inline}}
/* Skrin penuh 16J */
#mm.iv-skrin-penuh{border:0}
#mm.iv-skrin-penuh .tabs{top:0}
#mm.iv-skrin-penuh .top{border-radius:0}
@container mm (max-width:899px){
  #mm.iv-skrin-penuh .top{position:sticky;top:0}
  #mm.iv-skrin-penuh .mm-main{order:2;padding-bottom:calc(1.5 * var(--mm-r))}
  #mm.iv-skrin-penuh .tabs{order:3;top:auto;bottom:0;border-top:1px solid var(--line);border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* Popup seragam Bhg 36: helaian berlabuh di bawah, bar kepala + X bulat 34px */
#mm .overlay,#mm-luar .overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;padding:0}
#mm-luar .overlay{z-index:2147483600}
#mm .overlay.open,#mm-luar .overlay.open{display:flex}
#mm .sheet,#mm-luar .sheet{box-sizing:border-box;width:calc(100% - 2 * var(--pop-gap,4px));max-width:none;height:calc(100% - var(--pop-gap,4px));max-height:none;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--pop-rad,4px) var(--pop-rad,4px) 0 0;padding:0 var(--pop-pad-x,8px) calc(34px + env(safe-area-inset-bottom,0px));background:var(--surface);color:var(--ink);box-shadow:0 8px 32px rgba(0,0,0,.18)}
#mm .sheet > header,#mm-luar .sheet > header{position:sticky;top:0;z-index:3;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 0 8px;margin:0 0 14px;border-bottom:1px solid var(--line)}
#mm .sheet > header h2,#mm-luar .sheet > header h2{font-size:1.22em;font-weight:800;line-height:1.25;text-align:left}
#mm .sheet > header .iconbtn,#mm-luar .sheet > header .iconbtn{width:34px;height:34px;min-width:34px;min-height:34px;max-height:34px;flex:0 0 34px;padding:0;border:0;border-radius:50%;background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
#mm .sheet > header .iconbtn .mm-ik,#mm-luar .sheet > header .iconbtn .mm-ik{width:18px;height:18px;vertical-align:0}
#mm .sheet > :not(header),#mm-luar .sheet > :not(header){max-width:720px;margin-left:auto;margin-right:auto}
#mm #game .sheet{display:flex;flex-direction:column}
#mm #game .sheet > :not(header){width:100%;max-width:640px}
#mm-luar .sheet > :not(header){max-width:560px;text-align:center}
#mm #toasts{z-index:2100}
#mm .conn{z-index:2050}
#mm.busy{opacity:.6;pointer-events:none}