:root{
  --bg:#0b1016; --panel:#121a24; --panel2:#0f1720; --line:#22303f;
  --ink:#e8eef6; --muted:#93a4b8; --dim:#6b7c90;
  --hero:#ffd166; --herobg:#2a2411; --pot:#5ec8ff; --potbg:#0f2532;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --accent:#7c9cff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 "Inter","Segoe UI",system-ui,-apple-system,sans-serif}
h1,h2,h3{margin:0 0 .4em}
a{color:var(--accent)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 22px;background:linear-gradient(90deg,#0d1520,#101b28);border-bottom:1px solid var(--line)}
.brandblock{display:flex;align-items:center;gap:14px}
.logo{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent);color:#08101c;font-weight:800;letter-spacing:.5px}
.brandtitle{font-weight:700;font-size:16px}
.brandsub{color:var(--muted);font-size:12px}
.stag{background:#3a2a00;color:#ffce4d;border:1px solid #6b5300;border-radius:5px;
  padding:1px 6px;font-size:11px;font-weight:700}
.periodbox{text-align:right;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;min-width:200px}
.pmonth{font-weight:700}.pperiod{color:var(--muted);font-size:12px}
.modnav{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px 0}
.modnav button{background:var(--panel);color:var(--muted);border:1px solid var(--line);
  border-radius:8px;padding:8px 13px;cursor:pointer;font-size:13px}
.modnav button:hover{color:var(--ink)}
.modnav button.active{background:var(--accent);color:#08101c;border-color:var(--accent);font-weight:700}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 18px;margin:10px 18px;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px}
.filterbar label{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.filterbar select{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:6px 8px;min-width:130px;font-size:13px}
.fsep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.filterbar label.hidden{display:none}
.reset{margin-left:auto;align-self:flex-end;background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:7px;padding:7px 12px;cursor:pointer}
.reset:hover{color:var(--ink);border-color:var(--accent)}
.main{padding:6px 18px 30px}
.loading,.empty{color:var(--muted);padding:30px;text-align:center}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi .k-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.kpi .k-value{font-size:22px;font-weight:800;margin-top:4px}
.kpi .k-sub{color:var(--dim);font-size:12px;margin-top:3px}
.kpi.hero{border-color:#6b5300;background:linear-gradient(180deg,#1c1808,#12160f)}
.kpi.hero .k-value{color:var(--hero)}
.kpi.pot{border-color:#1d4b63;background:linear-gradient(180deg,#0c1c26,#0f1720)}
.kpi.pot .k-value{color:var(--pot)}
/* DPI-APP-20261012-005: kartu KPI platform (Hero & Potential) — versi kompak, 4 kartu
   menggantikan baris teks "filter aktif: …" TANPA tabel apa pun. */
.kpis.ppk{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:6px}
.kpis.ppk .kpi{padding:10px 12px;border-radius:10px}
.kpis.ppk .kpi .k-label{font-size:10px;letter-spacing:.4px}
.kpis.ppk .kpi .k-value{font-size:17px;margin-top:2px}
.kpis.ppk .kpi .k-sub{font-size:11px;margin-top:2px}
.section{margin:18px 0 6px}
.section h2{font-size:15px;letter-spacing:.3px}
.section .hint{color:var(--muted);font-size:12px;margin-bottom:8px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.cols2{grid-template-columns:1fr}}
.hpgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.hpgrid{grid-template-columns:1fr}}
.hpsec{min-width:0}
.col-head{display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;border-radius:9px;margin-bottom:10px;font-weight:700}
.col-head.h{background:var(--herobg);color:var(--hero);border:1px solid #6b5300}
.col-head.p{background:var(--potbg);color:var(--pot);border:1px solid #1d4b63}
.cards{display:grid;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.card.hero{border-left:4px solid var(--hero)}
.card.pot{border-left:4px solid var(--pot)}
.card .c-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.card .c-name{font-weight:650;font-size:13.5px}
.card .c-id{color:var(--dim);font-size:11.5px;font-family:ui-monospace,Menlo,monospace;margin-top:2px}
.pill{border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap}
.pill.hero{background:var(--herobg);color:var(--hero);border:1px solid #6b5300}
.pill.pot{background:var(--potbg);color:var(--pot);border:1px solid #1d4b63}
.pill.no{background:#1a2230;color:var(--muted);border:1px solid var(--line)}
.pill.absent{background:#221a1a;color:#c8a0a0;border:1px solid #3a2424}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:10px}
.metric{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.metric .m-l{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
.metric .m-v{font-weight:700;font-size:14px;margin-top:2px}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tag{font-size:11px;border-radius:6px;padding:2px 8px;background:#1a2230;border:1px solid var(--line);color:var(--muted)}
.tag.mv-NEW{background:#122a1f;color:#7ff0b0;border-color:#1d4b33}
.tag.mv-RISING{background:#0f2a1c;color:#6ee7a0;border-color:#1d4b33}
.tag.mv-STABLE{background:#141c2a;color:#9fb6d6;border-color:#26364a}
.tag.mv-FALLING{background:#2a1414;color:#f0a0a0;border-color:#4b2424}
.tag.mv-DROPPED{background:#2a0f0f;color:#f08383;border-color:#4b1d1d}
.tag.act-SCALE{background:#12301f;color:#7ff0b0;border-color:#1d5a33}
.tag.act-MAINTAIN{background:#12243a;color:#93c5fd;border-color:#1d3b5a}
.tag.act-TEST{background:#1a2540;color:#b8b8ff;border-color:#2a3560}
.tag.act-RECOVER{background:#2a2410;color:#ffd166;border-color:#5a4a10}
.tag.act-CUT{background:#2a1010;color:#f88;border-color:#5a1d1d}
.tag.act-WATCH{background:#241a2a;color:#d8b4fe;border-color:#3a2a4a}
.tag.flag{background:#2a1010;color:#f88;border-color:#5a1d1d}
.tag.ok{background:#122a1f;color:#7ff0b0;border-color:#1d4b33}
.reason{color:var(--muted);font-size:12px;margin-top:8px;border-top:1px dashed var(--line);padding-top:7px}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top}
th{background:var(--panel2);color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.5px;position:sticky;top:0}
tbody tr:hover{background:#141d28}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--dim)}
.tblwrap{max-height:620px;overflow:auto;border-radius:11px}
.grouphead{background:var(--panel2);color:var(--ink);font-weight:700;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;margin:14px 0 6px;display:flex;justify-content:space-between}
.dqbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.dq{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12px}
.dq b{display:block;font-size:15px}
.foot{display:flex;flex-direction:column;gap:4px;padding:14px 22px;border-top:1px solid var(--line);
  color:var(--dim);font-size:11.5px}
.footwarn{color:#8a94a6}
.selrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.selrow label{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:11px}
.selrow select,.selrow input{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:7px 9px;min-width:260px;font-size:13px}
.big{font-size:15px}
.muted{color:var(--muted)}

/* ==== top menu portal (lanjutan APP-0006) — presentasi saja, konsisten dengan halaman portal ==== */
.portalnav{display:flex;gap:3px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:4px;margin:12px 22px 0;width:fit-content}
.portalnav a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:11px;transition:.18s;white-space:nowrap}
.portalnav a:hover{color:var(--ink)}
.portalnav a.on{background:linear-gradient(140deg,rgba(124,156,255,.95),rgba(94,200,255,.85));color:#08101c;
  box-shadow:0 8px 22px rgba(94,200,255,.25)}

/* ARV2-APP-0001 — Recommendation Card (Action v2). Presentasi saja. */
.rc-cards{display:flex;flex-direction:column;gap:14px}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.02)}
.rc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.rc-name{font-weight:700;font-size:15px}
.rc-sku{color:var(--dim);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rc-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;border:1px solid var(--line)}
.pill.d-scale{background:#0f2a1a;color:#6ee7a0;border-color:#1c5a37}
.pill.d-maintain{background:#0f2532;color:#5ec8ff;border-color:#1c4a63}
.pill.d-test{background:#241f0d;color:#ffd166;border-color:#5c4c14}
.pill.d-recover{background:#2a1f10;color:#fbbf24;border-color:#6b4d12}
.pill.d-cut{background:#2a1414;color:#f87171;border-color:#6b2020}
.pill.d-watch{background:#161d26;color:#93a4b8;border-color:#2a3644}
.pill.c-ok{background:#0f2a1a;color:#6ee7a0;border-color:#1c5a37}
.pill.c-warn{background:#241f0d;color:#ffd166;border-color:#5c4c14}
.pill.c-bad{background:#2a1414;color:#f87171;border-color:#6b2020}
.pill.p-bad{background:#2a1414;color:#f87171;border-color:#6b2020}
.pill.p-warn{background:#241f0d;color:#ffd166;border-color:#5c4c14}
.pill.p-muted{background:#161d26;color:#93a4b8;border-color:#2a3644}
.pill.no{background:#161d26;color:#93a4b8}
.rc-metrics{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 4px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rc-sec{margin-top:10px}
.rc-sec h4{margin:0 0 6px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.rc-basis{color:var(--ink);font-size:13px}
.rc-cmp{color:var(--muted);font-size:12.5px;margin:6px 0}
.rc-cmp b{color:var(--ink)}
.rc-guard{color:var(--muted);font-size:12.5px;padding:8px 10px;background:var(--panel2);border-radius:9px;border:1px solid var(--line)}
.rc-guard b{color:var(--warn)}
.rc-tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.task{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.task .t-l{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.task .t-v{font-size:12.5px;color:var(--ink)}
.rc-ctrl{display:flex;flex-direction:column;gap:6px}
.rc-na{color:var(--muted);font-size:12.5px;padding:8px 10px;background:var(--panel2);border-radius:9px;border:1px dashed var(--line)}
.rc-na b{color:var(--ink)}
.c-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px;padding:6px 8px;border-radius:8px;background:var(--panel2)}
.c-row .c-l{color:var(--muted);font-size:12px;font-weight:700}
.c-row .c-v{font-size:12.5px;color:var(--ink)}
.up{color:var(--ok);font-weight:700}
.down{color:var(--bad);font-weight:700}

/* ==== DPI-APP-20261012-002 — MARKET TICKER: strip pembanding sama-periode bulan
   sebelumnya di bawah baris KPI kartu. Gaya "quote panel" bursa: rapat, angka
   rata kanan tabular, hijau = naik, merah = turun, netral = datar / NO DATA. ==== */
.ticker{margin-top:8px;background:linear-gradient(180deg,#0d141d,#0f1822);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;font-variant-numeric:tabular-nums}
.tk-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px;
  font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.tk-head .tk-sub{font-family:ui-monospace,Menlo,monospace;font-size:10px;text-transform:none;
  letter-spacing:0;color:var(--dim);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px}
.tk-cell{background:#0b1219;border:1px solid #1b2735;border-radius:6px;padding:5px 7px;min-width:0}
.tk-l{color:var(--dim);font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-v{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700;color:var(--ink);
  text-align:right;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-drow{text-align:right;margin-top:1px}
.tk-d{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;white-space:nowrap}
.tk-d.up{color:var(--ok)}
.tk-d.down{color:var(--bad)}
.tk-d.flat,.tk-d.nodata{color:var(--muted);font-weight:600}
@media(max-width:820px){.rc-tasks{grid-template-columns:1fr}.c-row{grid-template-columns:1fr}}

/* ==== H-MPI-02 — MONTHLY INTELLIGENCE (MPI, pilot MAMIBELLE, staging) ====
   Blok tambahan TERISOLASI: hanya dipakai modul baru (mpi.js). Tidak ada
   selektor Weekly yang diubah. Warna & bentuk memakai ulang token yang ada. */
.tag.nd{background:#2a2410;color:#ffd166;border-color:#5a4a10;font-weight:700}
.mpisub{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 10px}
/* UI (perintah De King): sub-menu bulanan memakai GAYA MENU DPI (.modnav) yang sama — bentuk,
   ukuran huruf, warna aktif identik; teks yang tidak perlu disembunyikan. */
.mpisub button{background:var(--panel);color:var(--muted);border:1px solid var(--line);
  border-radius:8px;padding:8px 13px;cursor:pointer;font-size:13px}
.mpisub button:hover{color:var(--ink)}
.mpisub button.active{background:var(--accent);color:#08101c;border-color:var(--accent);font-weight:700}
.modnav button.mpinew{border-color:#1d4b63;color:var(--pot)}
/* UI (perintah De King): entri "Monthly Intelligence" cukup di MENU ATAS (portalnav) — tombol di
   baris menu DPI disembunyikan; deep-link ?mod=mpi_monthly tetap berfungsi. */
.modnav button.mpinew{display:none}
/* teks "PILOT" pada tombol menu tidak perlu — disembunyikan (judulnya sudah jelas) */
.modnav button.mpinew .pil{display:none}
/* ==== UI (perintah De King): tampilan KARTU gaya pasar modal (bukan tabel/kolom).
   Dipakai Movement: satu kartu = satu produk, dengan nilai besar, delta berwarna ▲▼,
   garis tren 2 titik (nilai sebelumnya → nilai kini), lalu blok statistik kecil. */
.stockgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.stock{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.stock .s-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.stock .s-name{font-weight:650;font-size:13.5px;line-height:1.35}
.stock .s-id{color:var(--dim);font-size:11px;font-family:ui-monospace,Menlo,monospace;margin-top:2px}
.stock .s-quote{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stock .s-val{font-size:21px;font-weight:800;letter-spacing:.2px}
.stock .s-delta{font-size:12.5px;font-weight:700;border-radius:7px;padding:2px 8px;border:1px solid var(--line)}
.stock .s-delta.up{background:#122a1f;color:#7ff0b0;border-color:#1d4b33}
.stock .s-delta.down{background:#2a1414;color:#f0a0a0;border-color:#4b2424}
.stock .s-delta.flat{background:#141c2a;color:#9fb6d6;border-color:#26364a}
.stock .s-delta.nd{background:#2a2410;color:#ffd166;border-color:#5a4a10}
.stock .s-spark{display:block;width:100%}
.stock .s-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  border-top:1px dashed var(--line);padding-top:8px}
.stock .s-stat .l{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.stock .s-stat .v{font-size:12.5px;margin-top:2px}
@media(max-width:420px){.stockgrid{grid-template-columns:1fr}.stock .s-val{font-size:19px}}
/* ==== H-MPI-UI-02 — Executive Dashboard: hierarki KPI (2 utama + 4 sekunder) dan kartu
   Decision Insights. Hanya tampilan Overview; tidak ada metrik/angka baru. */
.kpis.k2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kpi.xl{padding:18px 20px}
.kpi.xl .k-value{font-size:30px}
.kpi.scale{border-color:#1d5a33;background:linear-gradient(180deg,#0f2418,#0f1720)}
.kpi.scale .k-value{color:#7ff0b0}
.kpi.test{border-color:#2a3560;background:linear-gradient(180deg,#141a2e,#0f1720)}
.kpi.test .k-value{color:#b8b8ff}
.kpi.cut{border-color:#5a4a10;background:linear-gradient(180deg,#241d0c,#12160f)}
.kpi.cut .k-value{color:#ffd166}
.kpis.ins{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.insight{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.insight-h{font-weight:700;font-size:13.5px}
.insight-b{font-size:12.5px;color:var(--muted);line-height:1.55}
.insight-go{margin-top:auto;align-self:flex-start;background:var(--panel2);color:var(--pot);
  border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.insight-go:hover{border-color:var(--pot);color:var(--ink)}
.srcnote{color:var(--dim);font-size:11.5px;margin-top:8px;line-height:1.5}
@media(max-width:420px){.kpi.xl .k-value{font-size:24px}.insight{padding:12px}}
/* ==== UI (perintah De King) — Overview lebih menarik: hero band, kartu bergaya, bar komposisi,
   kartu insight beraksen. Murni tampilan; angka tetap dari payload LOCKED. */
.exec-hero{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  background:linear-gradient(120deg,rgba(124,156,255,.18),rgba(79,209,255,.10) 45%,rgba(255,209,102,.10));
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:12px 0 14px}
.exec-k{font-size:11px;letter-spacing:1.4px;color:var(--pot);font-weight:800}
.exec-s{font-size:19px;font-weight:800;margin-top:3px}
.exec-s b{color:var(--hero)}
.kpi.glow{box-shadow:0 0 0 1px rgba(124,156,255,.12),0 10px 30px -18px rgba(79,209,255,.55)}
.kpi .k-icon{font-size:15px;opacity:.9;margin-bottom:4px}
.kpi .k-of{font-size:.66em;color:var(--muted);font-weight:600}
.distbar{display:flex;height:16px;border-radius:9px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.distbar .seg{display:block;height:100%}
.seg.s-hero{background:linear-gradient(180deg,#ffd166,#c99a1e)}
.seg.s-pot{background:linear-gradient(180deg,#4fd1ff,#1f7fa8)}
.seg.s-pot2{background:linear-gradient(180deg,#8fd7ff,#2f6f92)}
.seg.s-non{background:linear-gradient(180deg,#3b4a5f,#26313f)}
.seg.s-na{background:repeating-linear-gradient(45deg,#4a3f1a,#4a3f1a 6px,#2a2410 6px,#2a2410 12px)}
.seg.s-scale{background:linear-gradient(180deg,#7ff0b0,#1d8b52)}
.seg.s-maint{background:linear-gradient(180deg,#93c5fd,#2f5f9b)}
.seg.s-test{background:linear-gradient(180deg,#b8b8ff,#4a4aa8)}
.seg.s-cut{background:linear-gradient(180deg,#ffd166,#a8791a)}
.seg.s-blank{background:repeating-linear-gradient(45deg,#33404f,#33404f 6px,#1d2530 6px,#1d2530 12px)}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:7px;font-size:11.5px;color:var(--muted)}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend .lg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend .lg i.s-hero{background:#ffd166}.legend .lg i.s-pot{background:#4fd1ff}.legend .lg i.s-pot2{background:#8fd7ff}
.legend .lg i.s-non{background:#3b4a5f}.legend .lg i.s-scale{background:#7ff0b0}.legend .lg i.s-maint{background:#93c5fd}
.legend .lg i.s-test{background:#b8b8ff}.legend .lg i.s-cut{background:#ffd166}.legend .lg i.s-blank{background:#33404f}
.legend .lg i.s-full{background:#7ff0b0}.legend .lg i.s-part{background:#ffd166}
.insight{border-left:4px solid var(--line)}
.insight.ins-green{border-left-color:#7ff0b0}
.insight.ins-amber{border-left-color:#ffd166}
.insight.ins-blue{border-left-color:var(--pot)}
.insight-h{display:flex;align-items:center;gap:7px}
/* ==== H-MPI-UI-03 — blok kontribusi pada kartu produk (omzet + % vs Hero/Platform,
   budget iklan + % budget). Murni tampilan dari angka LOCKED. */
.pmetrics{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:9px 0 4px}
.pm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pm-head span{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.pm-big{font-size:20px;font-weight:800;color:var(--hero)}
.pm-rank{background:linear-gradient(140deg,rgba(255,209,102,.22),rgba(255,209,102,.06));border:1px solid #6b5300;
  border-radius:9px;padding:5px 10px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.pm-rank b{color:var(--hero);font-size:15px;margin-left:4px}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin-top:8px}
.pm-i{border-left:2px solid var(--line);padding-left:8px;min-width:0}
.pm-i span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  overflow-wrap:anywhere;word-break:break-word}
.pm-i b{display:block;font-size:14.5px;margin-top:2px}
.pm-i i{display:block;color:var(--dim);font-size:10.5px;font-style:normal;margin-top:2px;line-height:1.35}
.rcard .pmetrics,.card .pmetrics{margin-top:8px}
@media(max-width:420px){.pm-big{font-size:17px}.pm-grid{grid-template-columns:1fr 1fr;gap:7px}.pm-i b{font-size:13px}}
@media(max-width:420px){
  .exec-s{font-size:16px}.exec-hero{padding:12px 14px;border-radius:12px}
  .distbar{height:13px}.legend{gap:9px;font-size:11px}
}
body.mpi-mode .filterbar{display:none}
/* UI (perintah De King): saat modul Monthly Intelligence aktif, baris menu DPI (Weekly) TIDAK
   ditampilkan — menu di bawah judul hanya sub-menu Monthly Intelligence. */
body.mpi-mode .modnav{display:none}
/* H-MPI-06.2: filter bar MPI ikut tersembunyi oleh aturan di atas (display:none) sehingga user
   tidak bisa mengganti Brand/Tahun/Bulan/Platform di mode MPI → dipulihkan (spesifisitas lebih tinggi). */
body.mpi-mode .filterbar.mpi{margin:12px 0;background:var(--panel2);display:flex}

/* ==== H-MPI-05 — 8 sub-tab bulanan: kartu dapat di-expand, notebox, kartu bertanda,
   responsif 420px. Blok tetap TERISOLASI (hanya dipakai mpi.js). */
.c-foot{margin-top:10px}
.c-exp{background:var(--panel2);color:var(--muted);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;font-size:11.5px;cursor:pointer}
.c-exp:hover{color:var(--ink);border-color:#1d4b63}
.c-expand{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px;overflow-x:auto}
.c-expand table{font-size:11.5px}
.c-exp-h{font-weight:650;font-size:12px;color:var(--ink);margin:10px 0 5px}
.st-small{font-size:10px;color:var(--dim);line-height:1.35}
.notebox{background:#12202b;border:1px solid #1d4b63;border-radius:10px;padding:8px 12px;
  font-size:12px;color:var(--muted);margin:8px 0;line-height:1.5}
.notebox.warn{border-color:#5a4a10;background:#2a2410;color:#ffe08a}
.flagcard{background:var(--panel2);border:1px solid #5a4a10;border-radius:10px;padding:10px 12px;margin:8px 0}
.flagcard-h{font-weight:700;font-size:12.5px;color:#ffd166;margin-bottom:4px}
/* ID workbook panjang pada kartu KPI: biarkan membungkus, jangan meluber keluar kartu */
.kpi .k-value{word-break:break-word;overflow-wrap:anywhere}
.kpi .k-value a{word-break:break-all;overflow-wrap:anywhere}
/* ------------------------------------------------------------------ H-MPI-06.2
   AUDIT DISPLAY: konflik atribusi CUT WAJIB terlihat di layar (bukan hanya status backend) */
.mpiaudit{background:#2a1d10;border:1px solid #6b4a12;border-left:4px solid #ffd166;border-radius:10px;
  padding:12px 14px;margin:0 0 14px}
.mpiaudit-h{font-weight:700;color:#ffd166;font-size:13px;margin-bottom:6px}
.mpiaudit-b{font-size:12.5px;color:#e8e2d4;line-height:1.6}
.mpiaudit-b>div{margin:3px 0}
.mpiaudit-t{font-weight:700;color:#fff}
.mpiaudit-x{color:#7ff0b0;font-weight:700}
.tag.warn{background:#2a1d10;color:#ffd166;border-color:#6b4a12;font-weight:700}
@media(max-width:420px){
  .mpiaudit{padding:10px}.mpiaudit-h{font-size:12px}.mpiaudit-b{font-size:11.5px}
}
@media(max-width:420px){
  .mpisub button{font-size:11.5px;padding:6px 9px}
  .notebox{font-size:11.5px}
  .c-expand table th,.c-expand table td{font-size:10.5px;padding:5px 6px}
  .c-expand{max-width:100%}
  .fltgrid{grid-template-columns:1fr}
}

/* ---------- H-MPI-UI-04: kartu/tile Pattern, Action, Backtest, Data Quality, Rulebook ---------- */
.ppk{margin-top:8px}
.ppk .kpi{min-height:auto}
.qcbox{margin-top:6px}
.qcrow{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:12.5px}
.qcl{flex:0 0 44%;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;font-size:11.5px}
.qcbar{flex:1;height:8px;background:#151b26;border-radius:6px;overflow:hidden}
.qcbar i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#93c5fd);border-radius:6px}
.qcbar i.ok{background:linear-gradient(90deg,#1d7a4d,#7ff0b0)}
.qcbar i.nd{background:linear-gradient(90deg,#7a6320,#ffd166)}
.qcn{flex:0 0 62px;text-align:right;font-variant-numeric:tabular-nums;color:#e6edf7;font-weight:600}
.qagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:10px;margin-top:8px}
.qacard{background:#101722;border:1px solid #1d2632;border-left:4px solid #2a6fd6;border-radius:10px;padding:10px 12px}
.qacard.cut{border-left-color:#e0b34d}
.qacard.scale{border-left-color:#43c98a}
.qa-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.qa-body{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.45}
.qa-foot{color:#8b98a8;font-size:11px;margin-top:6px;border-top:1px dashed #1d2632;padding-top:5px}
.fpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:8px}
.fwcard{background:#101722;border:1px solid #1d2632;border-radius:10px;padding:10px 12px}
.fw-h{font-weight:700;color:#e6edf7;font-size:13px}
.fw-b{font-size:12px;color:var(--muted);margin-top:5px}
.fw-i{font-size:11.5px;color:#93c5fd;margin-top:5px}
.rulegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px;margin-top:8px}
.rulecard{background:#101722;border:1px solid #1d2632;border-left:4px solid #2a6fd6;border-radius:10px;padding:10px 12px}
.rulecard.cut{border-left-color:#e0b34d}
.rulecard.scale{border-left-color:#43c98a}
.rule-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#e6edf7}
.rule-b{font-size:13px;color:#dfe8f5;margin-top:6px;line-height:1.45}
.rule-e{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.mapv{font-size:11.5px;font-weight:600;color:#cfe0f7}
.notebox.warn{border-color:#6b5300;background:linear-gradient(140deg,rgba(255,209,102,.10),rgba(255,209,102,.02))}
.rc-cards{margin-top:4px}
.rcard.act-SCALE{border-left:4px solid #43c98a}
.rcard.act-MAINTAIN{border-left:4px solid #3b82f6}
.rcard.act-TEST{border-left:4px solid #8b8bff}
.rcard.act-CUT{border-left:4px solid #e0b34d}
@media (max-width:520px){.qcl{flex:0 0 52%}.qcn{flex:0 0 48px}.qagrid,.rulegrid,.fpgrid{grid-template-columns:1fr}}

/* ---------- Grafik perjalanan produk HERO (tab Movement) ---------- */
.section.journey{padding-bottom:6px}
.jwrap{position:relative;width:100%;overflow-x:auto}
.jsvg{width:100%;min-width:720px;height:auto;display:block}
.jgrid{stroke:#1d2632;stroke-width:1;stroke-dasharray:3 5;opacity:.75}
.jlbl{fill:#7d8b9c;font-size:11px}
.jyear{fill:#cfd9e6;font-size:13px;font-weight:700}
.jband{fill:#0e141d}
.jband.alt{fill:#0b1119}
.jdot{cursor:pointer;transition:fill-opacity .15s}
.jhit{cursor:pointer}
.jhit:hover + .jdot,.jdot:hover{fill-opacity:1}
.jtooltip{position:absolute;z-index:5;max-width:250px;background:#0b1220;border:1px solid #2a3646;border-radius:9px;
  padding:7px 9px;font-size:11.5px;line-height:1.45;color:#e6edf7;box-shadow:0 8px 20px rgba(0,0,0,.45);pointer-events:none}
.jlegend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ---------- Grafik perjalanan hero v2: legenda produk & sorotan ---------- */
.jlegend-ser{margin-top:10px}
.jlegend{display:flex;flex-wrap:wrap;gap:6px}
.jleg{display:inline-flex;align-items:center;gap:6px;background:#0f1620;border:1px solid #1d2632;border-radius:9px;
  padding:5px 9px;font-size:11.5px;color:#dfe8f5;cursor:pointer;transition:border-color .15s,background .15s}
.jleg:hover{border-color:#3b82f6}
.jleg.aktif{border-color:#58a6ff;background:#12203a}
.jleg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.jleg-nama{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.jleg-plat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.jleg-per{color:#7d8b9c;font-size:10.5px}
.jseri,.jdot,.jhalo{transition:opacity .15s}
.jline{pointer-events:none}
.jsvg{min-width:900px}
@media (max-width:520px){.jleg-nama{max-width:140px}}