body { margin: 0; background: #07090b; color: #e6edf3; font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 22px; margin: 8px 0 4px; } h1 b { color: #22d3ee; }
h2 { font-size: 17px; margin: 0 0 8px; }
.sub, .hint, .foot { color: #8b98a5; font-size: 14px; }
.status { background: #11161b; border: 1px solid #1f2a33; border-radius: 10px; padding: 10px 12px; }
section { background: #11161b; border: 1px solid #1f2a33; border-radius: 14px; padding: 16px; margin: 14px 0; }
label { display: block; font-size: 14px; color: #8b98a5; margin: 10px 0 4px; }
input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #1f2a33; background: #0b1015; color: #e6edf3; font-size: 16px; }
button { padding: 12px 16px; border-radius: 10px; border: 1px solid #1f2a33; background: #161d24; color: #e6edf3; font-size: 16px; margin: 8px 8px 0 0; }
button.primary { background: #22d3ee; color: #06121a; border-color: #22d3ee; font-weight: 600; }
button.link { background: none; border: none; color: #8b98a5; text-decoration: underline; padding: 0; }
button:disabled { opacity: .5; }
/* Tombol yang sedang bekerja: tetap terbaca (bukan redup), dengan putaran di kiri teks. */
button.loading { opacity: .85; cursor: progress; }
button.loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 8px -2px 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
pre { white-space: pre-wrap; font-size: 12px; max-height: 240px; overflow: auto; }
main { position: relative; }
button.lang { position: absolute; top: 18px; right: 16px; margin: 0; padding: 6px 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; border-radius: 8px; background: #161d24; color: #22d3ee; border: 1px solid #1f2a33; }
h1 { padding-right: 64px; }

/* Pop-up hasil — hilang sendiri 5 detik (bilah di bawah menghitung mundur). */
.popup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 10; padding: 16px; }
.popup[hidden] { display: none; }
.popup-card { position: relative; overflow: hidden; max-width: 420px; width: 100%; background: #11181f; border: 1px solid #1f2a33; border-radius: 14px; padding: 20px 20px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.popup-card p { margin: 0 0 12px; font-size: 16px; line-height: 1.45; }
.popup[data-kind="ok"] .popup-card { border-color: #22d3ee; }
.popup[data-kind="err"] .popup-card { border-color: #f87171; }
.popup[data-kind="err"] #popupOk { background: #f87171; border-color: #f87171; color: #1a0606; }
.popup-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .5; transform-origin: left; animation: popup-countdown 5s linear forwards; }
.popup[data-kind="ok"] .popup-timer { color: #22d3ee; }
.popup[data-kind="err"] .popup-timer { color: #f87171; }
@keyframes popup-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

label.check { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
label.check input { width: 18px; height: 18px; }

/* --- Empat halaman (4 Okt) --- */
h3 { font-size: 15px; margin: 18px 0 2px; }
.stepper { list-style: none; display: flex; gap: 6px; padding: 0; margin: 14px 0 10px; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 8px 8px; border-radius: 10px; background: #0d1217; border: 1px solid #1f2a33; color: #5d6a77; font-size: 13px; }
.stepper li span { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #1f2a33; color: #8b98a5; }
.stepper li b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper li.on { border-color: #22d3ee; color: #e6edf3; }
.stepper li.on span { background: #22d3ee; color: #06121a; }
.stepper li.done { color: #8b98a5; }
.stepper li.done span { background: #164e5a; color: #22d3ee; }
.page { margin-top: 12px; }
.card { background: #0b1015; border: 1px solid #1f2a33; border-radius: 12px; padding: 12px; margin: 0 0 8px; }
.card p { margin: 0 0 6px; font-size: 14px; }
.resume { border-color: #22d3ee55; }
label.radio { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: #e6edf3; }
label.radio input { width: 18px; height: 18px; margin: 0; }
select { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid #1f2a33; background: #0b1015; color: #e6edf3; font-size: 16px; }
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.groups label.check { margin: 4px 0; color: #e6edf3; }
input:disabled { opacity: .55; }
.total { margin: 6px 0 12px; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; }
.total-row b { font-size: 28px; color: #22d3ee; }
.total-row span { color: #8b98a5; font-size: 14px; }
.total .hint { margin: 6px 0 0; font-size: 12px; }
.bar { height: 10px; border-radius: 6px; background: #1b2129; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: #22d3ee; border-radius: 6px; transition: width .3s; }
.bar.thin { height: 5px; margin: 6px 0; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.metrics div { background: #0b1015; border: 1px solid #1f2a33; border-radius: 10px; padding: 8px 10px; }
.metrics b { display: block; font-size: 22px; }
.metrics span { font-size: 12px; color: #8b98a5; }
.phases { list-style: none; padding: 0; margin: 0 0 6px; }
.phases li { display: flex; justify-content: space-between; padding: 5px 0 5px 26px; position: relative; font-size: 14px; color: #5d6a77; border-bottom: 1px solid #161d24; }
.phases li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #2a3540; box-sizing: border-box; }
.phases li.done { color: #8b98a5; }
.phases li.done::before { background: #22d3ee; border-color: #22d3ee; }
.phases li.on { color: #e6edf3; font-weight: 600; }
.phases li.on::before { border-color: #22d3ee; border-right-color: transparent; animation: spin .8s linear infinite; }
.phases li.next { color: #e6edf3; }
.phases em { font-style: normal; color: #8b98a5; font-weight: 400; }
.phases li.skip { color: #8b98a5; }
.phases li.skip::before { border-style: dashed; border-color: #f5a524; }
.phases li.skip em { color: #f5a524; }
.ecus { display: grid; gap: 8px; margin: 8px 0 4px; }
.ecu { background: #0b1015; border: 1px solid #1f2a33; border-radius: 10px; padding: 9px 11px; }
.ecu.on { border-color: #22d3ee; }
.ecu.done { opacity: .8; }
.ecu-head { display: flex; align-items: baseline; gap: 8px; }
.ecu-head b { font-family: ui-monospace, Menlo, monospace; font-size: 16px; }
.ecu-head .rx { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #8b98a5; }
.ecu-head .ecu-name { font-size: 12px; color: #8b98a5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.ecu-head .pct { margin-left: auto; font-weight: 600; color: #22d3ee; }
.ecu.done .pct { color: #8b98a5; }
.ecu.wait .pct { color: #5d6a77; }
/* Satu ruas per tahap ECU: menyala = sedang, bergaris redup = menunggu giliran. */
.segs { display: flex; gap: 3px; margin: 6px 0; }
.segs span { flex: 1; height: 5px; border-radius: 3px; background: #1b2129; overflow: hidden; }
.segs i { display: block; height: 100%; background: #22d3ee; transition: width .3s; }
.segs span.done i { background: #1c8fa3; }
.segs span.wait { background: repeating-linear-gradient(135deg, #1b2129 0 4px, #26313b 4px 8px); }
.segs span.wait i { background: #2f6470; }
.segs span.on { box-shadow: 0 0 0 1px #22d3ee55; }
.ecu-meta { font-size: 12px; color: #8b98a5; }
.blocks { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.blocks li { font-size: 11px; padding: 3px 6px; border-radius: 6px; background: #11181f; border: 1px solid #1f2a33; color: #8b98a5; display: flex; gap: 5px; font-family: ui-monospace, Menlo, monospace; }
.blocks li b { color: #e6edf3; }
.blocks li em { font-style: normal; }
.blocks li.done { border-color: #164e5a; }
.blocks li.on { border-color: #22d3ee; color: #e6edf3; }
.steps { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.steps li { border: 1px solid #1f2a33; border-radius: 10px; padding: 8px 10px; background: #0b1015; color: #8b98a5; }
.steps li.on { border-color: #22d3ee; background: #0e171d; color: #e6edf3; }
.steps li.done { color: #8b98a5; }
.step-head { display: flex; align-items: flex-start; gap: 10px; }
.step-head .no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #1f2a33; color: #8b98a5; margin-top: 1px; }
.steps li.on .no { background: #22d3ee; color: #06121a; }
.steps li.done .no { background: #164e5a; color: #22d3ee; }
.step-txt { flex: 1; min-width: 0; }
.step-txt b { display: block; font-weight: 500; font-size: 14px; line-height: 1.35; }
.steps li.on .step-txt b { font-weight: 600; font-size: 15px; }
.step-txt small { font-size: 12px; color: #6b7784; }
button.mini { flex: none; margin: 0; padding: 4px 10px; font-size: 13px; border-radius: 8px; }
.step-body { padding: 4px 0 2px 34px; }
.step-body .hint { margin: 6px 0; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 4px 0 6px; font-size: 14px; }
.summary dt { color: #8b98a5; }
.summary dd { margin: 0; font-weight: 600; }
.sent { border-color: #22d3ee; text-align: center; margin-top: 12px; }
.sent span { display: block; font-size: 13px; color: #8b98a5; }
.sent b { display: block; font-size: 30px; letter-spacing: .08em; color: #22d3ee; }
/* Langkah yang sudah terekam diringkas jadi satu baris, supaya langkah aktif
   tetap dekat di layar HP. */
.steps li.done { padding: 5px 10px; }
.steps li.done .step-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.steps li.done .no { width: 20px; height: 20px; font-size: 11px; }
.steps { grid-template-columns: minmax(0, 1fr); }
.steps li, .ecus .ecu { min-width: 0; }
/* Pilihan scan dalam: keterangan menempel ke kotak centangnya, berjarak dari
   isian Tahun (Ritchie 4 Okt). */
.opt { margin: 22px 0 0; }
.opt label.check { margin: 0; }
.opt .hint { margin: 4px 0 0 33px; }
.steps li.skipped .no { background: #2a2f36; color: #8b98a5; }
.steps li.skipped .step-txt b { text-decoration: line-through; text-decoration-color: #5d6a77; }
.steps li.moved { border-color: #f5b44b88; }
.steps .warn { margin: 4px 0 0; font-size: 12px; color: #f5b44b; }
.card.info { border-color: #22d3ee44; font-size: 14px; color: #c9d3dc; margin-bottom: 4px; }
.awake { font-size: 13px; margin: -4px 0 10px; color: #8b98a5; }
.awake[data-kind="warn"] { color: #f5b44b; }
.ctl { margin: 0 0 12px; }
.ctl button { margin-top: 0; }
.ctl .hint { margin: 6px 0 0; font-size: 13px; }

/* Emulator MG (/easteregg?emu=mg, 4 Okt): penanda yang tidak bisa terlewat. */
.emu-banner { position: sticky; top: 0; z-index: 5; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px;
  background: #7c2d12; color: #fff; font-weight: 700; font-size: 14px; border: 2px dashed #fdba74; }
body.emu main { border-top: 4px solid #f97316; }

/* Langkah yang tidak dipilih (4 Okt): dilipat di bawah daftar utama. */
.steps li.more { padding: 0; border-style: dashed; background: transparent; }
.steps li.more summary { padding: 10px 12px; cursor: pointer; color: #8b98a5; font-size: 14px; list-style: none; }
.steps li.more summary::-webkit-details-marker { display: none; }
.steps li.more summary::before { content: "+ "; color: #22d3ee; font-weight: 700; }
.steps li.more details[open] summary::before { content: "\2212 "; }
.steps .sub { margin: 0 8px 8px; }
/* Langkah pedal bertingkat (6 Okt): instruksi besar + hitung mundur. */
.pedal-ext { margin: 6px 0; font-size: 13px; color: #8b98a5; align-items: flex-start; }
.pedal-ext input { flex: none; margin-top: 2px; }
.pedal-now[hidden] { display: none; }
.pedal-now { margin: 10px 0 6px; padding: 14px 12px; border-radius: 12px; text-align: center; background: #0e2a1a; border: 2px solid #22c55e; color: #e6edf3; display: grid; gap: 4px; }
.pedal-now[data-pct="50"] { background: #2a230b; border-color: #f5b44b; }
.pedal-now[data-pct="100"] { background: #2a0e10; border-color: #ef4444; }
.pedal-now b { font-size: 24px; letter-spacing: .5px; }
.pedal-now .sec { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pedal-now small, .pedal-now .sub { color: #8b98a5; font-size: 13px; }
.pedal-now .next { color: #22d3ee; font-size: 15px; font-weight: 600; }

/* Panduan dongle sebelum menyambung (6 Okt): lembar bawah di HP, kartu di layar lebar. */
.modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.modal[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal-card { width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; box-sizing: border-box; background: #11181f; border: 1px solid #22d3ee55; border-bottom: none; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.5); outline: none; }
@media (min-width: 600px) { .modal { align-items: center; padding: 16px; } .modal-card { border-radius: 16px; border-bottom: 1px solid #22d3ee55; } }
.modal-card h2 { font-size: 18px; margin: 0 0 4px; }
.modal-card h3 { margin: 14px 0 4px; color: #e6edf3; }
.modal-card .hint { margin: 4px 0; }
.modal-card code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #22d3ee; }
.dg-names { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dg-names li { padding: 4px 8px; border-radius: 8px; background: #0b1015; border: 1px solid #1f2a33; }
.dg-more summary { cursor: pointer; color: #22d3ee; font-size: 14px; padding: 4px 0; }
.dg-more p { margin: 4px 0 6px; }
.dg-list, .dg-check { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; font-size: 14px; color: #c9d3dc; }
.dg-list li { padding: 8px 10px 8px 30px; border-radius: 10px; background: #0b1015; border: 1px solid #1f2a33; position: relative; }
.dg-list li::before { position: absolute; left: 10px; top: 8px; font-weight: 700; }
.dg-list li.ok { border-color: #22c55e66; } .dg-list li.ok::before { content: "\2713"; color: #22c55e; }
.dg-list li.maybe { border-color: #f5b44b55; } .dg-list li.maybe::before { content: "?"; color: #f5b44b; }
.dg-list li.no { border-color: #f8717155; } .dg-list li.no::before { content: "\2715"; color: #f87171; }
.dg-check li { padding-left: 26px; position: relative; }
.dg-check li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border: 2px solid #22d3ee; border-radius: 4px; }
.modal-card label.check { margin: 14px 0 0; color: #c9d3dc; }
.modal-btns { display: flex; gap: 8px; margin-top: 8px; }
.modal-btns button { margin: 0; }
.modal-btns .primary { flex: 1; }
/* Tombol selalu terlihat walau isi panduan digulir. */
.modal-card { padding-bottom: 0; }
.modal-btns { position: sticky; bottom: 0; background: #11181f; margin: 8px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #1f2a33; }
/* Pedal scan lebar (J5, 8 Okt): hasil beda byte di bawah baris langkah. */
.lebar-res { margin: 8px 0 4px; font-size: 13px; }
.lebar-res summary { cursor: pointer; color: #e6edf3; }
.lebar-res ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; }
.lebar-res code { color: #7dd3fc; }
.lebar-res small { color: #8b98a5; }
/* Pemetaan modul (11 Okt) */
.pm-warn, #pmWarn { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: #f5b44b; background: rgba(245,180,75,.08); border: 1px solid rgba(245,180,75,.35); }
#pmWarn[hidden] { display: none; }
.mod .ecu-head .pct { font-size: 13px; }
.mod.bad { border-color: rgba(248,113,113,.55); }
.mod.bad .ecu-head .pct { color: #fca5a5; }
.mod .ecu-head .pct.none { color: #8b98a5; font-weight: 400; }
.codes { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; }
.codes li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.codes code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #e6edf3; }
.codes li.real code { color: #fca5a5; font-weight: 600; }
.codes small { color: #8b98a5; font-size: 12px; }
.mod details { margin-top: 6px; font-size: 12px; color: #8b98a5; }
.mod details summary { cursor: pointer; }
#pmSend.ok { border-color: #22d3ee; }
#pmSend.err { border-color: rgba(248,113,113,.55); }
#pmSend p { font-size: 14px; }
#pmSend b.code { display: block; font: 700 17px/1.3 ui-monospace, Menlo, monospace; color: #22d3ee; margin: 4px 0; word-break: break-all; user-select: all; -webkit-user-select: all; }
#pmSend button { margin: 6px 0 0; }
#pmSend a { color: #22d3ee; }
/* Ketuk ECU (15 Okt) */
.kt-suggest { border-color: #f5a52488; margin-bottom: 10px; }
.kt-suggest .primary { margin-top: 6px; }
.kt-prep ol { margin: 6px 0 0; padding-left: 20px; }
.kt-prep li { margin: 3px 0; }
#ktSendBox.ok { border-color: #22d3ee; }
#ktSendBox b.code { display: block; font: 700 17px/1.3 ui-monospace, Menlo, monospace; color: #22d3ee; margin: 4px 0; word-break: break-all; user-select: all; -webkit-user-select: all; }
#ktSendBox a { color: #22d3ee; }
#ktSendBox.err { border-color: #f87171; }
#ktVolt.hint { margin: 8px 0 0; }