/* Laboratorium Numerasi Digital - gaya khusus (komponen yang tidak ada di tailwind.css).
   Semua warna memakai variabel tema --c-* sehingga otomatis mengikuti mode terang/gelap. */
:root{
  --nm-1:124 58 237; --nm-2:14 165 233; --nm-3:245 158 11; --nm-4:16 185 129; --nm-5:239 68 68; --nm-6:236 72 153;
  --nm-gold:245 179 1; --nm-silver:148 163 184; --nm-bronze:205 127 50;
}
.dark{ --nm-1:167 139 250; --nm-2:56 189 248; --nm-3:251 191 36; --nm-4:52 211 153; --nm-5:248 113 113; --nm-6:244 114 182; }

/* ---------- pecahan bertumpuk: {3/4} ---------- */
.nm-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;margin:0 .18em;font-size:.88em;font-weight:800}
.nm-frac>span:first-child{border-bottom:2px solid currentColor;padding:0 .28em .04em}
.nm-frac>span:last-child{padding:.04em .28em 0}

/* ---------- soal ---------- */
.nm-prompt{font-size:1.1rem;line-height:1.7rem;font-weight:700;color:rgb(var(--c-on-surface))}
@media(min-width:640px){.nm-prompt{font-size:1.25rem;line-height:1.95rem}}
.nm-q-enter{animation:nmIn .28s ease both}
@keyframes nmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.nm-opt{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.8rem 1rem;border-radius:1rem;border:2px solid rgb(var(--c-outline-variant));background:rgb(var(--c-surface-container-lowest));
  color:rgb(var(--c-on-surface));font-weight:700;font-size:1rem;transition:border-color .15s,background .15s,transform .1s}
.nm-opt:hover{border-color:rgb(var(--c-secondary)/.6);background:rgb(var(--c-secondary-fixed)/.5)}
.nm-opt:active{transform:scale(.985)}
.nm-opt[aria-pressed="true"]{border-color:rgb(var(--c-primary));background:rgb(var(--c-primary-fixed));box-shadow:0 0 0 3px rgb(var(--c-primary)/.18)}
.nm-opt .nm-key{flex:none;width:1.9rem;height:1.9rem;border-radius:.6rem;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;background:rgb(var(--c-surface-container));color:rgb(var(--c-on-surface-variant))}
.nm-opt[aria-pressed="true"] .nm-key{background:rgb(var(--c-primary));color:rgb(var(--c-on-primary))}
.nm-opt.nm-right{border-color:rgb(var(--c-success));background:rgb(var(--c-success-container))}
.nm-opt.nm-wrong{border-color:rgb(var(--c-error));background:rgb(var(--c-error-container))}

.nm-answer{display:flex;align-items:stretch;border:2px solid rgb(var(--c-outline-variant));border-radius:1rem;background:rgb(var(--c-surface-container-lowest));overflow:hidden;transition:border-color .15s,box-shadow .15s}
.nm-answer:focus-within{border-color:rgb(var(--c-primary));box-shadow:0 0 0 3px rgb(var(--c-primary)/.18)}
.nm-answer input{flex:1;min-width:0;height:3.5rem;padding:0 1rem;background:transparent;border:0;outline:0;color:rgb(var(--c-on-surface));font-size:1.5rem;font-weight:900;font-variant-numeric:tabular-nums}
.nm-answer .nm-ad{display:flex;align-items:center;padding:0 1rem;background:rgb(var(--c-surface-container));color:rgb(var(--c-on-surface-variant));font-weight:800;font-size:.95rem;white-space:nowrap}
.nm-answer .nm-sign{border:0;border-left:1px solid rgb(var(--c-outline-variant));background:rgb(var(--c-surface-container));color:rgb(var(--c-on-surface));font-weight:900;font-size:1.3rem;padding:0 1rem}

/* ---------- penghitung waktu & navigator ---------- */
.nm-bar{height:10px;border-radius:99px;background:rgb(var(--c-surface-container-high));overflow:hidden}
.nm-bar>i{display:block;height:100%;border-radius:99px;background:rgb(var(--c-success));transition:width .3s linear,background .3s}
.nm-bar.nm-warn>i{background:rgb(var(--nm-3))}
.nm-bar.nm-danger>i{background:rgb(var(--c-error))}
.nm-timer.nm-danger{color:rgb(var(--c-error));animation:nmPulse 1s ease-in-out infinite}
@keyframes nmPulse{50%{opacity:.55}}
.nm-dot{width:2rem;height:2rem;border-radius:.65rem;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;border:2px solid rgb(var(--c-outline-variant));
  background:rgb(var(--c-surface-container-lowest));color:rgb(var(--c-on-surface-variant));transition:all .15s}
.nm-dot.nm-done{background:rgb(var(--c-secondary-fixed));border-color:rgb(var(--c-secondary)/.5);color:rgb(var(--c-secondary))}
.nm-dot.nm-cur{background:rgb(var(--c-primary));border-color:rgb(var(--c-primary));color:rgb(var(--c-on-primary));transform:scale(1.1)}

/* ---------- struk belanja ---------- */
.nm-receipt{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgb(var(--c-surface-container-low));border:1px dashed rgb(var(--c-outline));border-radius:.75rem;padding:1rem 1.1rem;max-width:26rem;color:rgb(var(--c-on-surface))}
.nm-receipt h4{text-align:center;font-weight:900;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem}
.nm-receipt hr{border:0;border-top:1px dashed rgb(var(--c-outline));margin:.55rem 0}
.nm-receipt .nm-rl{display:flex;justify-content:space-between;gap:.75rem;font-size:.88rem;line-height:1.5rem}
.nm-receipt .nm-rl small{color:rgb(var(--c-on-surface-variant));font-size:.78rem}

/* ---------- uang ---------- */
.nm-money{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:flex-end}
.nm-mg{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.nm-stack{position:relative;height:3.2rem}
.nm-bill{position:absolute;left:0;width:6.2rem;height:2.9rem;border-radius:.4rem;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem;color:#fff;
  border:2px solid rgb(255 255 255/.55);box-shadow:0 1px 3px rgb(0 0 0/.3);text-shadow:0 1px 1px rgb(0 0 0/.35)}
.nm-bill::before{content:"";position:absolute;inset:3px;border:1px dashed rgb(255 255 255/.5);border-radius:.25rem}
.nm-b100000{background:linear-gradient(135deg,#dc2626,#991b1b)}.nm-b50000{background:linear-gradient(135deg,#2563eb,#1e3a8a)}.nm-b20000{background:linear-gradient(135deg,#16a34a,#14532d)}
.nm-b10000{background:linear-gradient(135deg,#9333ea,#581c87)}.nm-b5000{background:linear-gradient(135deg,#d97706,#78350f)}.nm-b2000{background:linear-gradient(135deg,#78716c,#44403c)}.nm-b1000{background:linear-gradient(135deg,#ca8a04,#713f12)}
.nm-coinw{position:relative;height:3.2rem;width:3.2rem}
.nm-coin{position:absolute;bottom:0;width:2.7rem;height:2.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.7rem;color:#422006;
  background:radial-gradient(circle at 30% 30%,#fde68a,#d4a017);border:2px solid #b8860b;box-shadow:0 1px 3px rgb(0 0 0/.35)}
.nm-coin.nm-silver{background:radial-gradient(circle at 30% 30%,#f1f5f9,#94a3b8);border-color:#64748b;color:#1e293b}
.nm-mcount{font-weight:900;font-size:.95rem;color:rgb(var(--c-on-surface))}

/* ---------- perbandingan paket ---------- */
.nm-pack{flex:1;min-width:9rem;border:2px solid rgb(var(--c-outline-variant));border-radius:1rem;padding:.9rem 1rem;background:rgb(var(--c-surface-container-lowest));text-align:center}
.nm-pack b{display:block;font-size:1.05rem;color:rgb(var(--c-primary))}
.nm-pack .nm-pp{font-size:1.4rem;font-weight:900;color:rgb(var(--c-on-surface))}

/* ---------- grafik ---------- */
.nm-chart{width:100%;height:auto;max-width:36rem;display:block}
.nm-chart text{fill:rgb(var(--c-on-surface-variant));font-family:inherit;font-weight:700}
.nm-chart .nm-val{fill:rgb(var(--c-on-surface));font-weight:900}
.nm-chart .nm-grid{stroke:rgb(var(--c-outline-variant));stroke-width:1;stroke-dasharray:3 4}
.nm-chart .nm-axis{stroke:rgb(var(--c-outline));stroke-width:1.5}
.nm-f0{fill:rgb(var(--nm-1))}.nm-f1{fill:rgb(var(--nm-2))}.nm-f2{fill:rgb(var(--nm-3))}.nm-f3{fill:rgb(var(--nm-4))}.nm-f4{fill:rgb(var(--nm-5))}.nm-f5{fill:rgb(var(--nm-6))}
.nm-sw0{background:rgb(var(--nm-1))}.nm-sw1{background:rgb(var(--nm-2))}.nm-sw2{background:rgb(var(--nm-3))}.nm-sw3{background:rgb(var(--nm-4))}.nm-sw4{background:rgb(var(--nm-5))}.nm-sw5{background:rgb(var(--nm-6))}
.nm-line{fill:none;stroke:rgb(var(--nm-1));stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.nm-pt{fill:rgb(var(--c-surface-container-lowest));stroke:rgb(var(--nm-1));stroke-width:3}
.nm-slice{stroke:rgb(var(--c-surface-container-lowest));stroke-width:2}
.nm-vizbox{border:1px solid rgb(var(--c-outline-variant)/.7);border-radius:1rem;padding:.85rem 1rem 1rem;background:rgb(var(--c-surface-container-low)/.6)}
.nm-vtitle{font-weight:800;font-size:.9rem;color:rgb(var(--c-on-surface));margin-bottom:.4rem}
.nm-table{border-collapse:separate;border-spacing:0;width:100%;max-width:32rem;font-size:.95rem}
.nm-table th,.nm-table td{padding:.55rem .8rem;border-bottom:1px solid rgb(var(--c-outline-variant));text-align:center}
.nm-table th{background:rgb(var(--c-secondary-fixed));color:rgb(var(--c-secondary));font-weight:800}
.nm-table td:first-child,.nm-table th:first-child{text-align:left;font-weight:800}
.nm-table th:first-child{border-top-left-radius:.6rem}.nm-table th:last-child{border-top-right-radius:.6rem}
.nm-chip{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;padding:.3rem .65rem;border-radius:.7rem;font-weight:900;background:rgb(var(--c-secondary-fixed));color:rgb(var(--c-secondary));font-variant-numeric:tabular-nums}

/* ---------- papan peringkat ---------- */
.nm-row{display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;border-radius:1rem;border:1px solid transparent}
.nm-row.nm-me{background:rgb(var(--c-primary-fixed));border-color:rgb(var(--c-primary)/.45)}
.nm-rank{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgb(var(--c-surface-container));color:rgb(var(--c-on-surface-variant))}
.nm-rank.r1{background:rgb(var(--nm-gold));color:#4a2f00}.nm-rank.r2{background:rgb(var(--nm-silver));color:#0f172a}.nm-rank.r3{background:rgb(var(--nm-bronze));color:#2b1400}
.nm-seg{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:.9rem;background:rgb(var(--c-surface-container));flex-wrap:wrap}
.nm-seg button{padding:.45rem .8rem;border-radius:.7rem;font-weight:800;font-size:.85rem;color:rgb(var(--c-on-surface-variant));transition:all .15s;white-space:nowrap}
.nm-seg button[aria-pressed="true"]{background:rgb(var(--c-surface-container-lowest));color:rgb(var(--c-primary));box-shadow:0 1px 4px rgb(76 29 149/.18)}
.nm-live{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:800;color:rgb(var(--c-success))}
.nm-live::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:rgb(var(--c-success));animation:nmPulse 1.6s ease-in-out infinite}

/* ---------- hasil ---------- */
.nm-star{font-size:3rem;line-height:1;color:rgb(var(--c-outline-variant));transition:color .3s}
.nm-star.on{color:rgb(var(--nm-gold));animation:nmStar .6s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 2px 6px rgb(245 179 1/.5))}
.nm-star.on:nth-child(2){animation-delay:.18s}.nm-star.on:nth-child(3){animation-delay:.36s}
@keyframes nmStar{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.nm-meter{height:8px;border-radius:99px;background:rgb(var(--c-surface-container-high));overflow:hidden}
.nm-meter>i{display:block;height:100%;border-radius:99px;background:rgb(var(--c-secondary))}
.nm-lvl{display:flex;flex-direction:column;gap:.15rem;text-align:left;padding:1rem;border-radius:1.1rem;border:2px solid rgb(var(--c-outline-variant));background:rgb(var(--c-surface-container-lowest));transition:all .15s;color:rgb(var(--c-on-surface))}
.nm-lvl:hover{border-color:rgb(var(--c-primary));transform:translateY(-2px);box-shadow:0 8px 20px rgb(109 40 217/.18)}

@media (prefers-reduced-motion:reduce){.nm-q-enter,.nm-star.on,.nm-live::before,.nm-timer.nm-danger{animation:none}.nm-bar>i{transition:none}}