:root{color-scheme:light}html{-webkit-text-size-adjust:100%}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Tata letak: rel navigasi kiri + meja kerja; tiap proyek punya "pelat nama" sistem seperti label rating di balik panel surya. */
:root {
  --bg: #edf0f3;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --surface-3: #e8ecf0;
  --ink: #0f1a28;
  --ink-2: #3f4e62;
  --muted: #687890;
  --line: #d5dce4;
  --line-2: #e5e9ee;
  --accent: #1d4fa6;
  --accent-ink: #ffffff;
  --accent-soft: #e2eaf8;
  --accent-line: #b8cbed;
  --sun: #e09400;
  --sun-soft: #fcf0d4;
  --plate: #12233b;
  --plate-2: #1b3150;
  --plate-ink: #e8eef6;
  --plate-mute: #9fb0c6;
  --ok: #0b7a39; --ok-bg: #e3f4e9;
  --warn: #9a5700; --warn-bg: #fdf0d9;
  --crit: #b42318; --crit-bg: #fde8e6;
  --info: #2c5d9e; --info-bg: #e6eef9;
  --s-beban: #2a78d6; --s-pv: #eb6834; --s-bat: #1baf7a; --s-pln: #eda100; --s-rugi: #b9c2cd;
  --grid: #e3e7ec; --axis: #bdc6d0;
  --neg: #e34948; --pos: #2a78d6;
  --shadow: 0 1px 2px rgba(15, 26, 40, .06), 0 4px 16px rgba(15, 26, 40, .05);
  --r: 10px; --r-s: 7px;
  --f-display: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c131d; --surface: #131e2c; --surface-2: #182536; --surface-3: #1f2e42;
    --ink: #e7edf5; --ink-2: #b6c3d4; --muted: #8796ab; --line: #2a3a50; --line-2: #223146;
    --accent: #78a6ee; --accent-ink: #0a1525; --accent-soft: #1c3152; --accent-line: #2f4f7e;
    --sun: #f4b63d; --sun-soft: #3a2c0e;
    --plate: #0a1422; --plate-2: #132339; --plate-ink: #e8eef6; --plate-mute: #8fa1b8;
    --ok: #4cc27c; --ok-bg: #0f2b1c; --warn: #f0b04a; --warn-bg: #33250b; --crit: #ff8478; --crit-bg: #3a1714; --info: #8ab4f0; --info-bg: #15263f;
    --s-beban: #3987e5; --s-pv: #d95926; --s-bat: #199e70; --s-pln: #c98500; --s-rugi: #4a5a6e;
    --grid: #223146; --axis: #364a63;
    --neg: #e66767; --pos: #3987e5;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 18px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c131d; --surface: #131e2c; --surface-2: #182536; --surface-3: #1f2e42;
  --ink: #e7edf5; --ink-2: #b6c3d4; --muted: #8796ab; --line: #2a3a50; --line-2: #223146;
  --accent: #78a6ee; --accent-ink: #0a1525; --accent-soft: #1c3152; --accent-line: #2f4f7e;
  --sun: #f4b63d; --sun-soft: #3a2c0e;
  --plate: #0a1422; --plate-2: #132339; --plate-ink: #e8eef6; --plate-mute: #8fa1b8;
  --ok: #4cc27c; --ok-bg: #0f2b1c; --warn: #f0b04a; --warn-bg: #33250b; --crit: #ff8478; --crit-bg: #3a1714; --info: #8ab4f0; --info-bg: #15263f;
  --s-beban: #3987e5; --s-pv: #d95926; --s-bat: #199e70; --s-pln: #c98500; --s-rugi: #4a5a6e;
  --grid: #223146; --axis: #364a63;
  --neg: #e66767; --pos: #3987e5;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 18px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.22rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num-tab, table { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: .88em; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.kecil { font-size: .84rem; }
.label-up { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- kerangka ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--surface) 235px, var(--line) 235px, var(--line) 236px, transparent 236px); }
.rel { position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; border-right: 1px solid var(--line); background: var(--surface); }
.merek { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.merek svg { flex: none; }
.merek b { font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; letter-spacing: .01em; display: block; line-height: 1.05; }
.merek small { color: var(--muted); font-size: .76rem; display: block; }
.nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-s); background: none; cursor: pointer; text-align: left; color: var(--ink-2); font-weight: 500; }
.nav-btn:hover { background: var(--surface-2); color: var(--ink); }
.nav-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-btn .jml { margin-left: auto; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rel-bawah { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.status-simpan { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.status-simpan i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-top: 5px; flex: none; }
.status-simpan.akun i { background: var(--ok); }
.utama { min-width: 0; padding-block: 22px 60px; padding-inline: clamp(16px, 3vw, 36px); }
.wadah { max-width: 1220px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.nav-bawah { display: none; }
.topbar-hp { display: none; }

@media (max-width: 880px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .rel { display: none; }
  .utama { padding-block: 12px 96px; padding-inline: 16px; }
  .nav-bawah { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; }
  .nav-bawah button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--muted); font-size: .72rem; padding: 4px 0; cursor: pointer; font-weight: 600; }
  .nav-bawah button[aria-current="page"] { color: var(--accent); }
  .topbar-hp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
}

/* ---------- komponen umum ---------- */
.kartu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.kartu.datar { box-shadow: none; }
.kartu-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kartu-kepala p { color: var(--muted); font-size: .86rem; }
.tumpuk { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.baris { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.baris.jauh { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kolom-kerja { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .kolom-kerja { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 600; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--accent-line); background: var(--surface-2); }
.btn.utama-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.utama-btn:hover { filter: brightness(1.06); }
.btn.hantu { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.hantu:hover { background: var(--surface-2); }
.btn.bahaya { color: var(--crit); }
.btn.bahaya.yakin { background: var(--crit); color: #fff; border-color: var(--crit); }
.btn.kecil { padding: 5px 10px; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.ikon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-s); border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-2); }
.ikon-btn:hover { background: var(--surface-2); border-color: var(--line); }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .lbl { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.field .bantu { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.inp { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.inp:hover { border-color: var(--axis); }
.inp:focus { outline: 2px solid var(--accent-line); outline-offset: 0; border-color: var(--accent); }
textarea.inp { resize: vertical; min-height: 70px; }
select.inp { padding-right: 28px; }
.num { position: relative; display: flex; align-items: center; min-width: 0; }
.num .inp { padding-right: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.num .satuan { position: absolute; right: 9px; font-size: .78rem; color: var(--muted); pointer-events: none; }
.num.tanpa-satuan .inp { padding-right: 10px; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-3); gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.field > .seg { display: flex; }
.field > .seg button { flex: 1 1 auto; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.cek { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9rem; }
.cek input { width: 17px; height: 17px; accent-color: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.chip.on { background: var(--accent-soft); color: var(--accent); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.crit { background: var(--crit-bg); color: var(--crit); }
.chip.sun { background: var(--sun-soft); color: var(--warn); }
.jenis-ongrid { --jc: var(--s-beban); }
.jenis-hybrid { --jc: var(--s-bat); }
.jenis-offgrid { --jc: var(--s-pv); }
.chip.jenis::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--jc); }

/* ---------- daftar proyek ---------- */
.kepala-hal { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kepala-hal p { color: var(--muted); max-width: 62ch; margin-top: 4px; }
.statistik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.stat b { display: block; font-family: var(--f-display); font-size: 1.55rem; font-weight: 650; line-height: 1.1; margin-top: 3px; }
.stat span { font-size: .78rem; color: var(--muted); }
.tabel-proyek { width: 100%; border-collapse: collapse; }
.tabel-proyek th { text-align: left; font-size: .74rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tabel-proyek td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tabel-proyek td.kanan { white-space: nowrap; }
.tabel-proyek tr.klik { cursor: pointer; }
.tabel-proyek tr.klik:hover td { background: var(--surface-2); }
.tabel-proyek .nm b { display: block; font-weight: 600; }
.tabel-proyek .nm span { font-size: .8rem; color: var(--muted); }
.kanan { text-align: right; }
.gulung-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.kartu-proyek-hp { display: none; }
@media (max-width: 720px) {
  .tabel-proyek.hp-sembunyi { display: none; }
  .kartu-proyek-hp { display: flex; flex-direction: column; gap: 10px; }
  .kp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; width: 100%; }
}
.pilih-jenis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .pilih-jenis { grid-template-columns: minmax(0, 1fr); } }
.jenis-kartu { text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.jenis-kartu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--jc); }
.jenis-kartu:hover { border-color: var(--accent-line); }
.jenis-kartu[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.jenis-kartu b { font-family: var(--f-display); font-size: 1.1rem; }
.jenis-kartu span { font-size: .84rem; color: var(--ink-2); }

/* ---------- editor proyek ---------- */
.kepala-proyek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kepala-proyek .judul { flex: 1; min-width: 200px; }
.kepala-proyek .judul input { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 2px 6px; margin-left: -6px; border-radius: 6px; width: 100%; }
.kepala-proyek .judul input:hover { border-color: var(--line); }
.kepala-proyek .judul input:focus { border-color: var(--accent); background: var(--surface); outline: none; }

.pelat { background: var(--plate); color: var(--plate-ink); border-radius: var(--r); padding: 0; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); box-shadow: var(--shadow); }
.pelat-kiri { background: var(--plate-2); padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-right: 1px solid rgba(255, 255, 255, .08); min-width: 170px; }
.pelat-kiri .label-up { color: var(--plate-mute); }
.pelat-kiri b { font-family: var(--f-display); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.pelat-kiri b small { font-size: 1rem; font-weight: 600; margin-left: 3px; color: var(--plate-mute); }
.pelat-isi { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.pelat-sel { padding: 11px 16px; border-right: 1px solid rgba(255, 255, 255, .07); border-bottom: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.pelat-sel span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--plate-mute); font-family: var(--f-display); font-weight: 600; }
.pelat-sel b { display: block; font-family: var(--f-mono); font-size: .92rem; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pelat-sel b.sun { color: var(--sun); }
@media (max-width: 720px) { .pelat { grid-template-columns: minmax(0, 1fr); } .pelat-kiri { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); flex-direction: row; align-items: baseline; justify-content: space-between; } .pelat-isi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tab-langkah { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.tab-langkah::-webkit-scrollbar { display: none; }
.tab-langkah button { display: flex; align-items: center; gap: 7px; padding: 10px 12px 11px; border: 0; background: none; cursor: pointer; color: var(--muted); font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .92rem; }
.tab-langkah button i { font-style: normal; display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .72rem; font-family: var(--f-display); }
.tab-langkah button:hover { color: var(--ink); }
.tab-langkah button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-langkah button[aria-selected="true"] i { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.angka-besar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.angka-besar > div { padding: 12px 14px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.angka-besar span { font-size: .76rem; color: var(--muted); display: block; }
.angka-besar b { font-family: var(--f-display); font-size: 1.35rem; font-weight: 650; display: block; line-height: 1.15; margin-top: 2px; overflow-wrap: anywhere; }
.angka-besar small { font-size: .78rem; color: var(--ink-2); }

.opsi-ukuran { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .opsi-ukuran { grid-template-columns: minmax(0, 1fr); } }
.opsi { text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.opsi:hover { border-color: var(--accent-line); }
.opsi[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.opsi .t { font-weight: 700; font-family: var(--f-display); font-size: 1rem; }
.opsi .k { font-family: var(--f-display); font-size: 1.35rem; font-weight: 650; }
.opsi .d { font-size: .8rem; color: var(--ink-2); }

.peringatan { display: flex; flex-direction: column; gap: 8px; }
.pesan { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 9px 12px; border-radius: var(--r-s); font-size: .86rem; line-height: 1.4; align-items: start; }
.pesan svg { margin-top: 1px; }
.pesan.kritis { background: var(--crit-bg); color: var(--crit); }
.pesan.perhatian { background: var(--warn-bg); color: var(--warn); }
.pesan.info { background: var(--info-bg); color: var(--info); }
.pesan.baik { background: var(--ok-bg); color: var(--ok); }
.pesan p { color: var(--ink); }

.tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabel th { text-align: left; font-weight: 600; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabel td { padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tabel.tengah td { vertical-align: middle; }
.tabel td.kanan, .tabel th.kanan { text-align: right; }
.tabel tr.nonaktif td { color: var(--muted); text-decoration: line-through; }
.tabel tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--line); }
.tabel .inp { padding: 5px 7px; font-size: .86rem; }
.tabel .num .inp { padding-right: 8px; }
.status-ikon { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .8rem; }
.status-ikon.ok { color: var(--ok); }
.status-ikon.warn { color: var(--warn); }
.status-ikon.crit { color: var(--crit); }

/* ---------- grafik ---------- */
.grafik { position: relative; width: 100%; }
.grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafik text { fill: var(--muted); font-size: 11px; font-family: var(--f-body); }
.grafik .grid { stroke: var(--grid); stroke-width: 1; }
.grafik .sumbu { stroke: var(--axis); stroke-width: 1; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); margin-top: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda i.garis { height: 2px; width: 14px; border-radius: 1px; }
.tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: .8rem; min-width: 150px; z-index: 5; }
.tip .tj { font-weight: 700; margin-bottom: 4px; font-family: var(--f-display); }
.tip .tb { display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; align-items: center; }
.tip .tb i { height: 2px; border-radius: 1px; }
.tip .tb b { font-variant-numeric: tabular-nums; }
.pilih-bulan { display: flex; gap: 4px; flex-wrap: wrap; }
.pilih-bulan button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 3px 8px; font-size: .78rem; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.pilih-bulan button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.toggle-tabel { font-size: .8rem; }

/* diagram satu garis */
.sld { overflow-x: auto; }
.sld svg { min-width: 760px; width: 100%; height: auto; display: block; color: var(--ink); }
.sld text { font-family: var(--f-body); fill: currentColor; }
.sld .lbl2 { fill: var(--muted); }
.sld .dc { stroke: var(--s-pv); }
.sld .ac { stroke: var(--accent); }
.sld .bt { stroke: var(--s-bat); }

/* ---------- penawaran (kertas) ---------- */
.kertas-wadah { background: var(--surface-3); border-radius: var(--r); padding: clamp(10px, 2.5vw, 28px); overflow-x: auto; }
.kertas { --k-ink: #16202c; --k-mute: #5d6b7c; --k-line: #d9dee5; --k-aksen: #1d4fa6; --k-blok: #f3f5f8;
  background: #ffffff; color: var(--k-ink); width: 100%; max-width: 820px; margin: 0 auto; padding: clamp(18px, 4vw, 48px); border-radius: 4px; box-shadow: 0 2px 14px rgba(0, 0, 0, .14); font-size: 13.5px; line-height: 1.5; color-scheme: light; }
.kertas h3 { font-family: var(--f-display); font-size: 1.02rem; margin: 18px 0 8px; color: var(--k-ink); }
.kertas .kop { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--k-ink); flex-wrap: wrap; }
.kertas .kop b { font-family: var(--f-display); font-size: 1.45rem; letter-spacing: .01em; color: var(--k-ink); }
.kertas .kop div { font-size: .82rem; color: var(--k-mute); }
.kertas .kop .kanan { text-align: right; }
.kertas .judul-surat { text-align: center; margin: 18px 0 4px; font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; }
.kertas .meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .86rem; margin: 12px 0; }
.kertas table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 6px 0; }
.kertas th { background: var(--k-blok); text-align: left; padding: 6px 8px; border: 1px solid var(--k-line); font-weight: 600; color: var(--k-ink); }
.kertas td { padding: 6px 8px; border: 1px solid var(--k-line); vertical-align: top; color: var(--k-ink); }
.kertas td.kanan { text-align: right; white-space: nowrap; }
.kertas .ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--k-line); }
.kertas .ringkas div { padding: 8px 10px; border-right: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); }
.kertas .ringkas span { display: block; font-size: .72rem; color: var(--k-mute); text-transform: uppercase; letter-spacing: .05em; }
.kertas .ringkas b { font-family: var(--f-display); font-size: 1.1rem; }
.kertas .total { background: var(--k-blok); font-weight: 700; }
.kertas .terbilang { font-style: italic; color: var(--k-mute); font-size: .84rem; }
.kertas ol, .kertas ul { padding-left: 18px; margin: 4px 0; }
.kertas .ttd { display: flex; justify-content: flex-end; margin-top: 28px; text-align: center; }
.kertas .ttd div { min-width: 200px; }
.kertas .ttd .ruang { height: 64px; }
.kertas .catatan-kecil { font-size: .76rem; color: var(--k-mute); }
.kertas svg text { fill: var(--k-mute); }
@media (max-width: 600px) { .kertas .ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- dialog & toast ---------- */
.tirai { position: fixed; inset: 0; background: rgba(8, 14, 24, .45); z-index: 50; display: grid; place-items: center; padding: 16px; }
.dialog { background: var(--surface); border-radius: 14px; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.dialog-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dialog-isi { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.dialog-kaki { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--surface); flex-wrap: wrap; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: .88rem; z-index: 60; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
@media (max-width: 880px) { .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
.ai-kotak { border: 1px dashed var(--accent-line); background: var(--accent-soft); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ai-kotak .baris { justify-content: space-between; }
.berkas-btn { position: relative; overflow: hidden; }
.berkas-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: putar .8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } * { scroll-behavior: auto !important; } }
.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--sun-soft); border: 1px solid color-mix(in srgb, var(--sun) 35%, transparent); color: var(--ink); padding: 10px 14px; border-radius: var(--r); font-size: .88rem; }
details.lipat > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 6px; }
details.lipat > summary::-webkit-details-marker { display: none; }
details.lipat > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.lipat[open] > summary::before { transform: rotate(90deg); }
.bulan-12 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .bulan-12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.alat-tabel td { vertical-align: middle; }
.alat-tabel .inp { min-width: 0; }
.hr { height: 1px; background: var(--line-2); border: 0; margin: 2px 0; }
.kosong { text-align: center; padding: 36px 16px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pita-langkah { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.kolom-penawaran { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .kolom-penawaran { grid-template-columns: minmax(0, 1fr); } }
.pelat-kiri .cek-teknis { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--plate-mute); }
.pelat-kiri .cek-teknis.masalah { color: #ff9d8f; }
.pelat-kiri .cek-teknis i { width: 7px; height: 7px; border-radius: 50%; background: #4cc27c; }
.pelat-kiri .cek-teknis.masalah i { background: #ff7a6b; }
.tabel .num.sempit { width: 92px; margin-left: auto; }
.tabel .num.sedang { width: 128px; margin-left: auto; }

/* ---------- invoice & pembayaran ---------- */
.stat small { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.stat b.crit { color: var(--crit); }
.stat-btn { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.stat-btn:hover { border-color: var(--accent-line); }
.stat-btn.aktif { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tumpuk-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bilah { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.bilah i { display: block; height: 100%; }
.bilah .dibayar { background: var(--ok); }
.bilah .tertagih { background: var(--sun); }
.termin-daftar { display: flex; flex-direction: column; gap: 8px; }
.termin { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.termin.pilih { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.termin .no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: .8rem; background: var(--surface-3); color: var(--ink-2); }
.termin .no.lunas { background: var(--ok-bg); color: var(--ok); }
.termin .no.terbit { background: var(--warn-bg); color: var(--warn); }
.termin .no.batal { background: var(--surface-3); color: var(--muted); }
.termin b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.termin .rp { font-family: var(--f-mono); font-size: .86rem; white-space: nowrap; }
.termin.batal { opacity: .7; }
.termin.batal b, .termin.batal .rp { text-decoration: line-through; color: var(--muted); }
.mono-btn { font-family: var(--f-mono); font-size: .78rem; font-weight: 500; padding: 3px 6px; color: var(--accent); white-space: normal; text-align: left; }
.termin-edit { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.grid-termin { display: grid; grid-template-columns: minmax(0, 1fr) 96px 32px; gap: 6px; align-items: center; }
.lbl-kecil { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.baris-kunci { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-s); font-size: .88rem; }
.baris-kunci b { font-family: var(--f-mono); font-weight: 500; white-space: nowrap; }
.baris-tambah { display: grid; grid-template-columns: minmax(0, 1fr) 138px 32px; gap: 6px; align-items: center; }
@media (max-width: 420px) { .baris-tambah { grid-template-columns: minmax(0, 1fr) 32px; } .baris-tambah .num { grid-column: 1; } .baris-tambah .ikon-btn { grid-row: 1 / span 2; grid-column: 2; } }
.total-mini { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-s); }
.total-mini div { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--ink-2); }
.total-mini b { font-family: var(--f-mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.total-mini .besar { font-size: .95rem; color: var(--ink); font-weight: 600; }
.total-mini .besar b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; }
.info-inv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.info-inv span { display: block; font-size: .76rem; color: var(--muted); }
.info-inv b { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.bayar-form { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r); padding: 12px 14px; }

.kertas .dok-kepala { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; margin: 18px 0 12px; align-items: start; }
.kertas .dok-judul { font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: .08em; color: var(--k-aksen); line-height: 1; }
.kertas .kop .dok-judul { font-size: 1.7rem; color: var(--k-aksen); }
.kertas .dok-kepala .meta { margin: 10px 0 0; }
.kertas .kepada { background: var(--k-blok); border-radius: 4px; padding: 10px 12px; font-size: .86rem; }
.kertas .kepada .lbl { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--k-mute); margin-bottom: 3px; }
.kertas .kepada b { display: block; font-size: .98rem; }
.kertas .bawah-total { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.kertas table.tabel-total { width: auto; min-width: min(320px, 100%); margin-left: auto; }
.kertas table.tabel-total.kiri { margin-left: 0; }
.kertas .cap { display: inline-flex; flex-direction: column; align-items: center; border: 2.5px solid #0b7a39; color: #0b7a39; border-radius: 6px; padding: 4px 16px 5px; transform: rotate(-6deg); font-family: var(--f-display); margin: 12px 0 0 8px; }
.kertas .cap b { font-size: 1.45rem; letter-spacing: .14em; line-height: 1.1; }
.kertas .cap span { font-size: .72rem; }
.kertas .cap.batal { border-color: #b42318; color: #b42318; }
.kertas.kuitansi { max-width: 780px; border: 1px solid var(--k-line); }
.kertas .kw-no { color: var(--k-ink) !important; font-size: .86rem !important; }
.kertas .kw-isi { margin-top: 14px; }
.kertas .kw-baris { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; padding: 8px 0; border-bottom: 1px dotted var(--k-line); }
.kertas .kw-baris > span { color: var(--k-mute); }
.kertas .kw-terbilang { background: var(--k-blok); font-style: italic; font-weight: 600; padding: 6px 10px; border-radius: 3px; }
.kertas .kw-kaki { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.kertas .kw-nominal { border: 2px solid var(--k-ink); padding: 8px 18px; font-family: var(--f-display); font-size: 1.55rem; font-weight: 700; }
.kertas .kw-ttd { text-align: center; min-width: 200px; }
.kertas .kw-ttd .ruang { height: 64px; }
.kertas .meterai { width: 96px; height: 64px; border: 1.5px dashed var(--k-mute); display: grid; place-items: center; text-align: center; font-size: .7rem; line-height: 1.3; color: var(--k-mute); margin: 6px auto; }
@media (max-width: 600px) {
  .kertas .dok-kepala { grid-template-columns: minmax(0, 1fr); }
  .kertas .kw-baris { grid-template-columns: minmax(0, 1fr); }
  .kertas .bawah-total { flex-direction: column-reverse; align-items: stretch; }
  .kertas table.tabel-total { min-width: 0; width: 100%; }
  .info-inv { grid-template-columns: minmax(0, 1fr); }
}

.tab-langkah .pendek { display: none; }
@media (max-width: 1499px) { .tab-langkah .panjang { display: none; } .tab-langkah .pendek { display: inline; } }
@media (max-width: 720px) { .angka-besar b { font-size: 1.15rem; } }
.kertas .meta .nowrap { white-space: nowrap; }
.kertas .cap { margin-bottom: 10px; }
.kertas.kuitansi .kop { align-items: flex-start; }
.kertas.kuitansi .kop > div:first-child { flex: 1 1 260px; min-width: 0; }
.kertas.kuitansi .kop > .kanan { flex: 0 0 auto; margin-left: auto; }
.kertas.kuitansi .kop .dok-judul { line-height: 1.1; }

/* ---------- server mandiri: masuk & akun ---------- */
.status-simpan.tunda i { background: var(--sun); }
.akun-mini { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.akun-mini span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masuk-wadah { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.masuk-kartu { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.masuk-kartu h1 { font-size: 1.45rem; margin-top: 4px; }
.masuk-btn { padding: 11px 14px; font-size: 1rem; }
.muat-awal { min-height: 60vh; display: grid; place-items: center; color: var(--muted); font-family: var(--f-body); text-align: center; padding: 24px; }