/* Tata letak: sidebar navigasi kiri, konten kanan. Warna lewat token agar mode gelap ikut. */
:root {
  --bg: #f4f6f8; --panel: #ffffff; --ink: #17202a; --muted: #5d6b7a; --line: #dfe4ea; --soft: #eef2f6;
  --accent: #1f5fa8; --accent-soft: #e3edf8; --ok: #1d7a46; --ok-soft: #e1f3e8; --warn: #a86400; --warn-soft: #fbefd9;
  --bad: #b3261e; --bad-soft: #fbe4e2; --c1: #1f5fa8; --c2: #2f9e8f; --c3: #c77d1a; --grid: #e6eaef; --ref: #8a96a3;
  --radius: 8px; --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12171d; --panel: #1a2129; --ink: #e6ebf0; --muted: #9aa7b4; --line: #2b3540; --soft: #222b34;
    --accent: #6aa7ec; --accent-soft: #1d3049; --ok: #5cc48a; --ok-soft: #173326; --warn: #e3a64a; --warn-soft: #3a2b14;
    --bad: #f08079; --bad-soft: #3d1f1d; --c1: #6aa7ec; --c2: #4fc2b1; --c3: #e3a64a; --grid: #26303a; --ref: #7d8a97;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 22px; margin: 0; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
h3 { font-size: 13px; margin: 0; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0; }

.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.side { background: var(--panel); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { font-weight: 700; padding: 4px 10px 14px; display: grid; gap: 2px; }
.brand small { font-weight: 400; color: var(--muted); font-size: 12px; }
.nav { display: grid; gap: 2px; }
.nav-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 10px 4px; }
.nav-group:first-child { padding-top: 0; }
.nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.nav a:hover { background: var(--soft); }
.nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav .num { width: 18px; flex: none; color: var(--muted); font-size: 12px; text-align: right; }
.nav a.active .num { color: var(--accent); }
.side .who { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 10px 0; font-size: 13px; display: grid; gap: 6px; }
.side .who span { color: var(--muted); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.top label { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.content { padding: 24px; display: grid; gap: 20px; max-width: 1280px; width: 100%; }
.lede { color: var(--muted); max-width: 80ch; }
.lede b { color: var(--ink); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid > * { min-width: 0; }
.content > * { min-width: 0; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.card .hint { color: var(--muted); font-size: 12.5px; }
.card.wide { grid-column: 1 / -1; }
.kpi { display: grid; gap: 4px; }
.kpi .label { color: var(--muted); font-size: 12.5px; }
.kpi .value { font-size: 24px; font-weight: 650; letter-spacing: -.01em; }
.kpi .sub { color: var(--muted); font-size: 12.5px; }
.head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }

.banner { display: block; position: relative; padding: 10px 14px 10px 30px; border-radius: var(--radius); background: var(--warn-soft); color: var(--ink); border: 1px solid var(--line); }
.banner::before { content: ""; position: absolute; left: 13px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.banner.info { background: var(--accent-soft); }
.banner.info::before { background: var(--accent); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.hijau, .pill.tercapai, .pill.final, .pill.selesai, .pill.dibayar { color: var(--ok); background: var(--ok-soft); }
.pill.kuning, .pill.sementara, .pill.jalan, .pill.disetujui { color: var(--warn); background: var(--warn-soft); }
.pill.merah, .pill.batal { color: var(--bad); background: var(--bad-soft); }
.pill.rencana, .pill.draft, .pill.belum, .pill.kosong { color: var(--muted); background: var(--soft); }
.neg { color: var(--bad); }
.pos { color: var(--ok); }
.muted { color: var(--muted); }

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th.sort { cursor: pointer; user-select: none; }
th.sort:hover { color: var(--ink); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr.em td { font-weight: 650; }
tbody tr:hover td { background: var(--soft); }

.btn { border: 1px solid var(--line); background: var(--panel); padding: 7px 14px; border-radius: 6px; cursor: pointer; font-weight: 550; }
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 3px 10px; font-size: 12.5px; }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 10px; min-width: 0; }
input[type=range] { padding: 0; accent-color: var(--accent); }
.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); align-items: end; }
.form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.form label input, .form label select, .form label textarea { color: var(--ink); width: 100%; }
.form .full { grid-column: 1 / -1; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.slider { display: grid; grid-template-columns: 1fr 90px; gap: 10px; align-items: center; }
.slider .val { text-align: right; font-weight: 600; }

.chart { position: relative; min-height: 240px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11.5px; font-family: var(--font); }
.chart text.strong { fill: var(--ink); font-weight: 600; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -2px; }
.legend i.line { height: 0; border-top: 2px dashed var(--ref); border-radius: 0; }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 6px 10px; font-size: 12px; white-space: nowrap; z-index: 3; }
.tip b { display: block; color: var(--muted); font-weight: 500; }

.tree { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.node { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 150px; display: grid; gap: 2px; background: var(--panel); }
.node.result { border-color: var(--accent); background: var(--accent-soft); }
.node .k { font-size: 12px; color: var(--muted); }
.node .v { font-weight: 650; font-size: 16px; }
.op { align-self: center; color: var(--muted); font-weight: 700; font-size: 18px; }

dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); padding: 20px; width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(10, 15, 20, .45); }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 50; max-width: 420px; }
.toast.error { background: var(--bad); color: #fff; }

.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login .card { width: min(400px, 100%); }
.login .demo { font-size: 12.5px; color: var(--muted); }
.login code { background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.empty { color: var(--muted); padding: 20px; text-align: center; }
.skeleton { color: var(--muted); padding: 40px; text-align: center; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; }
  .brand { width: 100%; padding-bottom: 6px; }
  .nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav-group { display: none; }
  .nav a { padding: 6px 8px; }
  .nav .num { display: none; }
  .side .who { width: 100%; margin-top: 6px; }
  .top { position: static; padding: 12px 16px; }
  .content { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Tabel input bulanan */
.sheet td, .sheet th { padding: 4px 5px; }
.sheet input.cell { width: 112px; text-align: right; padding: 3px 6px; border-color: transparent; background: transparent; }
.sheet input.cell:hover { border-color: var(--line); }
.sheet input.cell:focus { border-color: var(--accent); background: var(--panel); }
.sheet tbody tr:hover td { background: transparent; }
code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
fieldset legend { padding: 0 4px; }
.sliders { display: grid; gap: 8px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.slider { margin-bottom: 6px; }
.sheet td:first-child, .sheet th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.sheet input.cell { width: 104px; }
.hint { color: var(--muted); font-size: 12.5px; }
tr.off td { opacity: .45; }
tr.off td:first-child { opacity: 1; }
tr.off td:last-child { opacity: 1; }
#itab td:last-child { white-space: nowrap; }

/* Formulir target */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-weight: 550; color: var(--muted); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.tgt { display: grid; gap: 16px; }
.tgt table td, .tgt table th { padding: 14px 12px; }
.tgt tbody tr:hover td { background: transparent; }
.tgt tfoot td { border-bottom: 0; border-top: 2px solid var(--line); }
input.num { text-align: right; }
.pctin { display: inline-flex; align-items: center; gap: 6px; }
.pctin input { width: 72px; }
.pctin i { font-style: normal; color: var(--muted); }
.field { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); max-width: 320px; }
.field input { font-size: 18px; font-weight: 600; text-align: right; color: var(--ink); padding: 8px 12px; }
.savebar { display: grid; grid-template-columns: minmax(200px, 1.2fr) 1fr 1fr auto; gap: 16px; align-items: end; border-top: 1px solid var(--line); padding-top: 16px; }
.savebar label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.savebar label input { color: var(--ink); }
.savebar .sum { display: grid; gap: 2px; justify-items: start; }
.savebar .sum b { font-size: 18px; }
@media (max-width: 860px) { .savebar { grid-template-columns: 1fr; } }

/* Skema rasio biaya */
.schemes { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.scheme-line { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.sl-name { display: grid; align-content: start; gap: 2px; padding-top: 10px; }
.scheme { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; background: var(--panel); }
.scheme.on { border-color: var(--accent); background: var(--accent-soft); }
.scheme.off { background: var(--soft); }
.scheme .sc-t { font-weight: 600; }
.scheme dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.scheme dt { color: var(--muted); }
.scheme dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.scheme .btn { justify-self: start; }
@media (max-width: 1100px) { .scheme-line { grid-template-columns: 1fr; } }

/* Batang rentang ramalan */

.rangebar { position: relative; height: 128px; margin: 16px 48px 0; }
.rb-track { position: absolute; left: 0; right: 0; top: 58px; height: 12px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); }
.rb-band { position: absolute; top: 58px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.rb-tick { position: absolute; top: 50px; height: 28px; width: 2px; margin-left: -1px; background: var(--muted); }
.rb-tick.rb-t { top: 52px; height: 26px; width: 3px; margin-left: -1.5px; background: var(--ink); }
.rb-dot { position: absolute; top: 56px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--c3); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--c3); }
.rb-lab { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 1.3; }
.rb-lab b { color: var(--ink); font-size: 14px; }
.rb-lab.up { top: -8px; }
.rb-lab.down { top: 84px; }
.rb-lab.real b { color: var(--c3); }
.rb-lab.to-l { transform: translateX(calc(-100% - 8px)); justify-items: end; text-align: right; }
.rb-lab.to-r { transform: translateX(8px); justify-items: start; text-align: left; }
.rb-gap { position: absolute; top: 58px; height: 12px; background: repeating-linear-gradient(45deg, var(--bad-soft) 0 4px, color-mix(in srgb, var(--bad) 30%, transparent) 4px 7px); }
.rangebar { position: relative; height: 128px; margin: 16px 48px 0; }

/* Rumus tabel */
.formulas { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.formulas summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.fx-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin: 12px 0; }
.fx { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.fx-t { font-weight: 600; }
.fx-f { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--soft); padding: 4px 8px; border-radius: 4px; }
.fx-e { font-size: 12.5px; color: var(--muted); }
.fx-e b { color: var(--ink); }
.season td, .season th { padding: 10px 6px; }
.season td .hint { font-size: 11px; }
.season td:first-child { white-space: nowrap; }
.season td:last-child { white-space: nowrap; }

/* Rekomendasi strategi */
.strategy { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.st-col { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 10px; align-content: start; background: var(--soft); }
.st-h { font-weight: 650; }
.st-row { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.st-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fform td, .fform th { padding: 10px 10px; }
.fform tbody tr:hover td { background: transparent; }

/* Rencana Kejar Target */
.steps { display: flex; gap: 8px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-weight: 600; color: var(--muted); }
.step span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font-size: 12px; }
.step.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.step.on span { background: var(--accent); color: #fff; }
.missions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.mission { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 12px; align-content: start; }
.m-head { display: flex; justify-content: space-between; align-items: baseline; }
.m-stage { font-weight: 650; }
.m-row { display: grid; gap: 4px; }
.m-top b { font-size: 20px; }
.pbar { height: 10px; border-radius: 6px; background: var(--soft); overflow: hidden; border: 1px solid var(--line); }
.pbar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.pbar i.done { background: var(--ok); }
.pbar.wide { width: 160px; }
.stage { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; }
.stage h3 { margin: 0; }
.stage-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; }
@media (max-width: 860px) { .stage-row { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; background: var(--panel); }
.chip input { display: none; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Papan tim */
.pb-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 4px 0 20px; }
.pb-tile { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; background: var(--panel); }
.pb-big { font-size: 22px; font-weight: 700; }
.pb-big span { font-size: 14px; font-weight: 400; color: var(--muted); }
.pb-person { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.pb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
.pb-other { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.pb-other p { margin: 10px 16px; }
.pb-table { width: 100%; }
.pb-table td, .pb-table th { padding: 9px 14px; vertical-align: middle; }
.pb-table tr.pb-line td { background: color-mix(in srgb, var(--soft) 60%, transparent); padding-top: 7px; padding-bottom: 7px; }
.pb-prog { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.pb-prog .pbar { flex: 1; max-width: 140px; }
.pb-prog b { min-width: 42px; text-align: right; }
.pbar i.ok { background: var(--ok); } .pbar i.warn { background: #d99a1e; } .pbar i.bad { background: var(--bad); }
b.ok, .st.ok { color: var(--ok); } b.warn { color: #b7790f; } b.bad { color: var(--bad); }
.st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; }
.st.warn { color: #b7790f; } .st.bad { color: var(--bad); }
.pb-table td[rowspan] { border-right: 1px solid var(--line); }
.pb-table tr:not(.pb-first):not(.pb-line) td { border-top-color: transparent; }

/* Hak akses pengguna */
.perms { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.perms-head { padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--ink); }
.form label.perm { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; cursor: pointer; color: var(--ink); font-size: 14px; }
.perms label.perm + label.perm { border-top: 1px solid var(--line); }
.form label.perm:hover { background: var(--soft); }
.form label.perm input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.form label.perm span { display: grid; gap: 2px; text-align: left; }
.form label.perm small { color: var(--muted); font-size: 12.5px; }
.form > label.perm.full { border: 1px solid var(--line); border-radius: 10px; }

/* Tabel hak akses Buat / Ubah / Hapus */
.pmx { width: 100%; border-collapse: collapse; }
.pmx th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.pmx th:first-child { text-align: left; padding-left: 14px; }
.pmx td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.pmx td:first-child { text-align: left; padding-left: 14px; }
.pmx td:first-child b { display: block; font-size: 14px; color: var(--ink); }
.pmx td:first-child small { color: var(--muted); font-size: 12px; }
.pmx td:last-child { border-left: 1px dashed var(--line); }
.pmx tr.pmx-admin td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.form .pmx label.pmx-c { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 30px; cursor: pointer; border-radius: 6px; }
.form .pmx label.pmx-c:hover { background: var(--soft); }
.form .pmx label.pmx-c input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.pmx-note { margin: 0; padding: 10px 14px; }

/* Kepala Kerja Harian Tim: target yang dikejar */
.goalbar { margin-bottom: 4px; border-left: 4px solid var(--accent); }
.gb-title { font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.gb-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.gb-tile { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.gb-big { font-size: 26px; font-weight: 700; line-height: 1.1; }
.gb-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.gb-team div { display: grid; }
.gb-team b { font-size: 20px; }
.gb-team span { font-size: 12px; color: var(--muted); }
.gb-mine { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 14px; }

/* Target lead / prospek / closing di kepala Kerja Harian Tim */
.tt-head { margin: 18px 0 10px; font-weight: 600; font-size: 14px; }
.tt-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.tt { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; background: var(--panel); }
.tt-n { font-weight: 600; font-size: 14px; display: grid; }
.tt-n small { font-weight: 400; color: var(--muted); font-size: 12px; }
.tt-big { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--accent); margin: 2px 0 4px; }
.tt-big span { font-size: 14px; font-weight: 400; color: var(--muted); }
.tt-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.tt-row b { color: var(--ink); }
.tt-lines { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }

.tt-row b { white-space: nowrap; }

/* Input data: isi per bulan */
.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { position: relative; min-width: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); }
.mchip i { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.mchip i.ok { background: var(--ok); }
.mchip.fut { color: var(--muted); }
.mchip.cur { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.mchip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.mchip.on i.ok { background: #fff; }
.inblock { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.inblock-h { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
.intable { width: 100%; border-collapse: collapse; }
.intable th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.intable th.n, .intable td.n { text-align: right; }
.intable td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.intable tr:last-child td { border-bottom: 0; }
.intable input.cell.big { width: 190px; text-align: right; padding: 8px 12px; font-size: 15px; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.intable input.cell.big:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.ktag { font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ktag.in { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.ktag.out { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
.intotal { text-align: right; font-size: 15px; padding: 4px 4px 0; }
/* Input data: lihat setahun */
.ytable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ytable th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ytable th.n:hover { color: var(--accent); }
.ytable td { padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ytable td.n, .ytable th.n { text-align: right; }
.ytable td:first-child, .ytable th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; text-align: left; }
.ytable tr.yl td { background: var(--soft); padding-top: 9px; padding-bottom: 9px; }
.ytable tr.ynet td { font-weight: 600; border-bottom: 2px solid var(--line); }
.ytable .curc { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ytable .futc { color: var(--muted); }

.cmpbar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-bottom: 16px; }
.cmpbar > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: grid; gap: 4px; }
.cmpbar b { font-size: 20px; }
.seg.small button { padding: 4px 10px; font-size: 12.5px; }

/* Kotak tahun ini vs tahun lalu */
.yoy { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.yoy-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; display: grid; gap: 8px; align-content: start; }
.yoy-row { display: flex; justify-content: space-between; font-size: 15px; }
.yoy-big { font-size: 20px; font-weight: 700; }
.yoy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.yoy-chip { display: grid; justify-items: center; min-width: 58px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.yoy-chip small { color: var(--muted); }

/* Rekomendasi otomatis */
.howto { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 8px 0 14px; }
.howto summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.autoline { margin-top: 12px; }
.autoline-h { margin-bottom: 4px; }
.steps-calc { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }

/* Langkah 3 misi per orang */
.mx { width: 100%; border-collapse: collapse; }
.mx th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.mx th.n, .mx td.n { text-align: right; }
.mx td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mx td.n input.num { width: 84px; text-align: right; }
.mx td.n small { display: inline-block; width: 52px; text-align: left; margin-left: 6px; color: var(--muted); font-size: 12px; }
.mx .na { display: inline-block; width: 142px; text-align: center; color: var(--muted); opacity: .5; }

.mx .split { margin-top: 4px; line-height: 1.5; }

/* Rekap harian: blok pelanggan baru / lama */
.defs { display: grid; gap: 3px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 13px; }
.fform tr.segrow td { padding-top: 10px; padding-bottom: 6px; border-bottom: 0; }
.fform tr.segrow.baru td b { color: var(--accent); }
.fform tr.segrow.lama td b { color: var(--c3); }

/* Pencapaian jabatan */
.roles { display: grid; gap: 14px; }
.role { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.role-h { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
.role.mk .role-h { border-left: 4px solid var(--c1); }
.role.cs .role-h { border-left: 4px solid var(--c2); }
.role.crm .role-h { border-left: 4px solid var(--c3); }
.role.co { margin-top: 14px; }
.role-f { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.co-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); padding: 14px 16px; }
.co-grid > div { display: grid; gap: 2px; }
.co-grid b { font-size: 20px; }

.lb table { font-size: 13px; }
.lb th, .lb td { padding-left: 8px; padding-right: 8px; white-space: nowrap; }

.fform td.seghead { font-size: 12.5px; vertical-align: bottom; }
.fform td.seghead .hint { font-size: 11.5px; }
.warn-dup { color: #b7790f; }

.gb-money { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.tt.mk { border-top: 3px solid var(--c1); } .tt.cs { border-top: 3px solid var(--c2); } .tt.crm { border-top: 3px solid var(--c3); }
.goalbar .tt-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }

.tt.proposed { border-style: dashed; }

/* Alur kekurangan -> misi */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 6px 0 16px; }
.flow-step { flex: 1 1 150px; display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.flow-step b { font-size: 19px; }
.flow-step.neg b { color: var(--bad); } .flow-step.pos b { color: var(--ok); } .flow-step.warn b { color: #b7790f; }
.flow-op { align-self: center; font-size: 20px; color: var(--muted); font-weight: 600; }
.tt-grid.five { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
[hidden]{display:none !important}
summary.h2sum{cursor:pointer;font-size:17px;font-weight:600;padding:2px 0}
#itemdet[open] summary.h2sum{margin-bottom:8px}
.it-line { margin-top: 14px; }
.it-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
.it-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.tt.up { border-top: 3px solid #c2410c; }
.tt.down { border-top: 3px solid #15803d; }
.isplit { margin-top: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.isplit-h { font-weight: 600; }
.isplit-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ichip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 13px; background: var(--panel); }
.stage tr.tot td{border-top:2px solid var(--line);background:var(--bg,transparent)}
.isplit-line { margin: 10px 0 6px; }
.tt.it-tile { border-top: 3px solid var(--line); }
.gb-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 14px; }
.gb-k { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; background: var(--panel); }
.gb-k span { font-size: 13px; color: var(--muted, #667085); }
.gb-k b { font-size: 22px; }
.gb-k small { font-size: 12px; color: var(--muted, #667085); }
.gb-k.neg b { color: #b42318; } .gb-k.pos b { color: #15803d; }
.big-n { font-size: 17px; }
.pill-ok { display: inline-block; font-size: 12px; font-weight: 600; color: #15803d; background: #e8f5ec; border-radius: 999px; padding: 4px 10px; margin-right: 6px; }
.fform tr.quota td { background: #f6f8fb; border-top: 1px dashed var(--line); }
.qpct { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.qpct.ok { background: #e8f5ec; color: #15803d; } .qpct.warn { background: #fdf3dc; color: #b7790f; } .qpct.bad { background: #fde8e8; color: #b42318; }
details.defs summary { cursor: pointer; }
input.num.locked { background: #eef0f3; color: #98a2b3; border-style: dashed; cursor: not-allowed; }
.dup-warn { margin-top: 4px; font-size: 12px; font-weight: 600; color: #b7790f; }
.tolak { display: flex; align-items: center; gap: 12px; border: 2px solid var(--accent, #1f5fae); border-radius: 12px; padding: 10px 16px; margin-bottom: 18px; background: var(--panel); }
.tolak.warn { border-color: #b7790f; }
.tolak-i { font-size: 22px; }
.card.dim { opacity: .6; }
.kpis.fc-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.nav a.has-sub { position: relative; }
.nav a .caret { margin-left: auto; font-size: 11px; color: var(--muted, #667085); }
.nav-sub { display: grid; gap: 2px; margin: 2px 0 6px 30px; border-left: 2px solid var(--line); padding-left: 8px; }
.nav-sub a { font-size: 13.5px; padding: 6px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.nav-sub a:hover { background: var(--soft, #f2f4f7); }
.nav-sub a.on { background: var(--accent-soft, #e6eefb); color: var(--accent, #1f5fae); font-weight: 600; }
.h1-sub { font-weight: 500; color: var(--muted, #667085); font-size: .8em; }
.vmx { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.vmx-g { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; }
.vmx-p, .vmx-s { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.vmx-s { padding-left: 20px; }
.form .vmx label.vmx-p, .form .vmx label.vmx-s { display: flex !important; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.form .vmx input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex: none; }
.form .vmx .hint { padding-left: 24px; }
.vmx { align-items: start; }
.hbadge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: #fff; margin-left: 6px; }
.hbadge.err { background: #b42318; } .hbadge.warn { background: #b7790f; }
.hc-list { display: grid; gap: 8px; }
.hc { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 10px 14px; background: var(--panel); }
.hc.error { border-left-color: #b42318; } .hc.warn { border-left-color: #b7790f; } .hc.ok { border-left-color: #15803d; }
.own-in { display: flex; align-items: baseline; gap: 6px; }
.own-in span { font-size: 18px; font-weight: 700; color: var(--muted, #667085); }
.own-in input { font-size: 20px; font-weight: 700; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; text-align: right; }

.hc.go{cursor:pointer}
.hc.go:hover{box-shadow:0 0 0 2px rgba(37,99,235,.25)}
.hc-act{display:flex;gap:6px;flex-shrink:0;align-items:center}
.hc-steps{margin:6px 0 0 18px;padding:0;font-size:13px;color:var(--ink,#222)}
.hc-steps li{margin:2px 0}
.hc-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#1e40af;color:#fff;font-size:12px;margin-right:8px}
.hc-start{background:#dcfce7;color:#166534;font-weight:600}
.fixbar{max-width:1232px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:12px 24px 0;padding:12px 16px;border:1px solid #93c5fd;border-left:4px solid #1e40af;border-radius:10px;background:#eff6ff}
.tt.cv.ok{border-top-color:#16a34a}.tt.cv.warn{border-top-color:#d97706}.tt.cv.bad{border-top-color:#dc2626}
.pb-cv td{background:#f8fafc;font-size:13px}
b.ok{color:#15803d}b.warn{color:#b45309}b.bad{color:#b91c1c}
.tt-grid.ts-12{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ts-tile .tt-big{font-size:26px}
.ts-mini{margin:10px 0 4px}
.tsm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tsm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.tsm{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--panel)}
.tsm b{font-size:17px}
.tsm.on{border:2px solid #1e40af;background:#eff6ff}
:root{--prev:#b9b7d6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--prev:#5b5880}}
.mk-child td{background:var(--soft, #f8fafc)}
.mk-child td:first-child{padding-left:26px}
textarea.mk-text{width:100%;max-width:100%;font:12.5px/1.45 ui-monospace,Menlo,monospace;padding:10px;border:1px solid var(--line);border-radius:8px;box-sizing:border-box;white-space:pre-wrap;overflow-x:hidden}
dialog:has(textarea.mk-text){width:min(820px,94vw)}
.mk-kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mk-check{margin-top:8px;font-size:13px;line-height:1.7}
.mk-ac-wrap{position:relative}
.mk-ac{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--panel,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:320px;overflow:auto}
.mk-ac button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;cursor:pointer;font:inherit}
.mk-ac button:hover{background:var(--soft,#eef4ff)}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mk-chips .chip{font-size:12px;padding:3px 9px;cursor:pointer}
.mk-chip-note{font-size:11px}
dialog:has(.mk-ac-wrap){width:min(860px,95vw)}