:root{
  --pink-1:#A80057;
  --pink-2:#E4007C;
  --pink-3:#FF5CA8;
  --ink:#201622;
  --ink-soft:#5B4E5E;
  --paper:#FAF7F9;
  --card:#FFFFFF;
  --line:#EAE1E6;
  --rencana:#F5A623;
  --ongoing:#2F6FED;
  --bast:#1FAA59;
  --danger:#D6335C;
  --radius:16px;
  --shadow: 0 6px 24px rgba(32,22,34,.08);
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
}
h1,h2,h3,.brand-name{font-family:var(--font-display)}
button, select, input{font-family:var(--font-body)}

a{color:inherit}
.tabular{font-variant-numeric: tabular-nums;}

/* ===== Header ===== */
.topbar{
  background:linear-gradient(100deg,var(--pink-1),var(--pink-2) 55%,var(--pink-3));
  color:#fff;
  padding:22px clamp(16px,4vw,48px) 0;
  position:sticky; top:0; z-index:50;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.35);
}
.brand-name{font-size:18px; font-weight:600; margin:0;}
.brand-sub{font-size:13px; opacity:.85; margin:2px 0 0;}
.updated-at{font-size:13px; opacity:.9;}

.ticker{
  margin-top:16px; overflow:hidden; white-space:nowrap;
  border-top:1px solid rgba(255,255,255,.25);
  padding-top:10px;
}
.ticker-track{
  display:inline-flex; gap:36px; animation: ticker 38s linear infinite;
}
.ticker span{font-size:13px; opacity:.95;}
.ticker .dot{opacity:.6; margin-right:8px;}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none} }

/* ===== Tabs ===== */
.tabnav{
  display:flex; gap:4px; margin-top:16px; padding-top:4px;
  overflow-x:auto;
}
.tab-btn{
  border:none; background:transparent; color:rgba(255,255,255,.8);
  padding:12px 18px; font-size:14px; font-weight:600; cursor:pointer;
  border-bottom:3px solid transparent; white-space:nowrap;
}
.tab-btn:hover{color:#fff;}
.tab-btn.active{color:#fff; border-bottom-color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ===== Layout ===== */
main{max-width:1280px; margin:0 auto; padding:28px clamp(16px,4vw,48px) 80px;}
section{margin-top:36px;}
main > .tab-panel > section:first-child{margin-top:0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.section-head h2{font-size:20px; margin:0;}
.section-head p{font-size:14px; color:var(--ink-soft); margin:4px 0 0;}

/* ===== KPI cards ===== */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
.kpi-grid-3{margin-top:16px;}
.kpi.kpi-wide{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.kpi.kpi-wide .value{font-size:clamp(24px,3.4vw,34px);}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
  min-width:0; /* penting supaya grid item boleh menyusut, angka tidak mendorong lebar kotak */
}
.kpi .label{font-size:12.5px; color:var(--ink-soft); line-height:1.3;}
.kpi .value{
  font-size:clamp(17px,2vw,24px); font-weight:700; margin-top:6px; line-height:1.2;
  overflow-wrap:anywhere; word-break:break-word;
}
.kpi .value.warn{color:var(--danger)}
.kpi .value.ok{color:var(--bast)}

/* ===== Progress bars (Serapan Riil vs Pagu) ===== */
.progress-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:16px;
}
.progress-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); min-width:0;
}
.progress-card .ph-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap;}
.progress-card .ph-label{font-size:13px; color:var(--ink-soft); font-weight:600;}
.progress-card .ph-pct{font-size:20px; font-weight:700; font-family:var(--font-display);}
.progress-card .ph-pct.warn{color:var(--danger)}
.progress-card .ph-pct.ok{color:var(--bast)}
.progress-card .ph-bar{height:12px; background:#F1E9ED; border-radius:999px; overflow:hidden; margin-top:8px;}
.progress-card .ph-bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--pink-1),var(--pink-3)); transition:width .3s;}
.progress-card .ph-bar-fill.over{background:linear-gradient(90deg,#B5133A,var(--danger));}
.progress-card .ph-nums{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-soft); margin-top:6px; flex-wrap:wrap;}
.progress-card .ph-nums b{color:var(--ink); font-weight:600;}

/* ===== KPI sector cards (breakdown per Sumber Dana) ===== */
.kpi-sector-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:16px;}
.kpi-sector{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); border-left:4px solid var(--ink);
}
.kpi-sector.dau{border-left-color:var(--ongoing);}
.kpi-sector.dbhcht{border-left-color:var(--pink-1);}
.kpi-sector-head{
  font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.kpi-sector-body{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.kpi-sector-item{min-width:0;}
.kpi-sector-item .label{font-size:12px; color:var(--ink-soft); line-height:1.3;}
.kpi-sector-item .value{
  font-size:clamp(15px,1.7vw,20px); font-weight:700; margin-top:5px; line-height:1.2;
  overflow-wrap:anywhere; word-break:break-word;
}
@media (max-width:420px){.kpi-sector-body{grid-template-columns:1fr;}}

/* ===== Filters ===== */
.filters{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow);
}
.filters .field{display:flex; flex-direction:column; gap:4px;}
.filters label{font-size:12px; color:var(--ink-soft); font-weight:600;}
.filters select, .filters input[type=search]{
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px; min-width:150px;
  background:#fff;
}
.chip-group{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:13px; cursor:pointer;
  background:#fff; user-select:none; transition:.15s;
}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.toggle{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.toggle button{border:none; background:#fff; padding:8px 16px; font-size:13px; cursor:pointer; font-weight:600;}
.toggle button[aria-pressed="true"]{background:var(--pink-2); color:#fff;}

/* ===== Cards ===== */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.card h3{margin:0 0 4px; font-size:15px;}
.chart-summary{
  display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; font-size:12.5px;
  margin:0 0 14px; color:var(--ink-soft);
}
.chart-summary .cs-total{font-weight:700; color:var(--ink); font-size:13.5px;}
.chart-summary .cs-total b{color:var(--pink-1);}
.chart-summary .cs-bast b{color:#1FAA59;}
.chart-summary .cs-ongoing b{color:#2F6FED;}
.chart-summary .cs-rencana b{color:#F5A623;}
.chart-summary .cs-swatch{
  width:10px; height:10px; border-radius:3px; display:inline-block;
  margin-right:5px; vertical-align:-1px;
}
.chart-summary .cs-swatch.bast{background:#1FAA59;}
.chart-summary .cs-swatch.ongoing{background:#2F6FED;}
.chart-summary .cs-swatch.rencana{background:#F5A623;}
canvas{max-width:100%;}
.chart-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px 4px;}
.chart-scroll-inner{height:280px; position:relative;}
.chart-scroll-inner canvas{height:100% !important; width:100% !important;}

/* ===== Infografis: per Cluster / per Jenis Media ===== */
.infografis-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; align-items:start;}
@media (max-width:980px){.infografis-grid{grid-template-columns:1fr;}}
.chart-card{position:sticky; top:16px;}
@media (max-width:980px){.chart-card{position:static;}}
.chart-card canvas{max-height:280px;}

.mini-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; align-content:start;}
.mini-card{
  background:var(--card); border:1px solid var(--line); border-top:4px solid var(--pink-2);
  border-radius:14px; padding:16px 18px; box-shadow:var(--shadow);
}
.mini-card-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.mini-card-title{font-weight:700; font-size:14.5px;}
.mini-card-count{font-size:12px; color:var(--ink-soft); white-space:nowrap;}
.mini-card-value{font-size:22px; font-weight:700; margin-top:6px;}
.mini-card-share{display:flex; align-items:center; gap:8px; margin-top:10px;}
.mini-card-share-bar{flex:1; height:6px; background:#F1E9ED; border-radius:999px; overflow:hidden;}
.mini-card-share-bar > div{height:100%; border-radius:999px;}
.mini-card-share span{font-size:11px; color:var(--ink-soft); white-space:nowrap;}
.mini-card-status{display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-soft); margin-top:10px;}
.mini-card-status .dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px;}
.mini-card-status .dot.bast{background:var(--bast)}
.mini-card-status .dot.ongoing{background:var(--ongoing)}
.mini-card-status .dot.rencana{background:var(--rencana)}

/* ===== Tabel rekap per Cluster / Jenis Media (siap presentasi) ===== */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.rekap-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:680px;}
.rekap-table thead th{
  text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
  padding:10px 14px; border-bottom:2px solid var(--line); white-space:nowrap; font-weight:700;
}
.rekap-table thead th:first-child{text-align:left;}
.rekap-table tbody td{padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;}
.rekap-table tbody tr:hover{background:#FBF3F7;}
.rekap-table .rt-name{text-align:left; font-weight:700; display:flex; align-items:center; gap:9px;}
.rekap-table .rt-rank{font-size:14px;}
.rekap-table .rt-dot{width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0;}
.rekap-table .rt-num{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft);}
.rekap-table .rt-num.rt-total{color:var(--ink); font-weight:700;}
.rekap-table .rt-pct{text-align:right; min-width:130px;}
.rekap-table .rt-pct-inner{display:inline-flex; align-items:center; gap:8px;}
.rekap-table .rt-pct-bar{width:64px; height:7px; background:#F1E9ED; border-radius:999px; overflow:hidden;}
.rekap-table .rt-pct-bar > div{height:100%; border-radius:999px;}
.rekap-table .rt-pct-num{font-weight:700; font-size:12.5px; min-width:34px; text-align:right;}
.rekap-table .rt-total-row{border-top:2px solid var(--ink); font-weight:700;}
.rekap-table .rt-total-row td{border-bottom:none; padding-top:13px; color:var(--ink);}
.rekap-table .rt-total-row .rt-num{color:var(--ink);}

/* ===== Serapan vs Pagu (compact) ===== */
.pagu-compact{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.pagu-compact:last-child{border-bottom:none; padding-bottom:0;}
.pagu-compact:first-child{padding-top:0;}
.pagu-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap;}
.pagu-top .name{font-weight:700; font-size:14px;}
.pagu-top .range{font-size:12px; color:var(--ink-soft); font-weight:400; margin-left:4px;}
.sumber-badge{
  display:inline-block;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:2px 9px; border-radius:999px;
  vertical-align:middle; color:#fff; line-height:1.6;
}
.sumber-badge.dau{background:var(--ongoing);}
.sumber-badge.dbhcht{background:var(--pink-1);}
.pagu-top .sumber-badge{margin-left:6px;}
.pagu-nums{display:flex; align-items:baseline; gap:6px; font-size:13px; flex-wrap:wrap; justify-content:flex-end;}
.pagu-nums .used{font-weight:700;}
.pagu-nums .sep{color:var(--ink-soft);}
.pagu-nums .total{color:var(--ink-soft);}
.pagu-nums .pct{font-weight:700; font-size:12px; padding:2px 8px; border-radius:999px; background:#F1E9ED; color:var(--ink);}
.pagu-nums .pct.warn{background:rgba(214,51,92,.12); color:var(--danger);}
.pagu-nums .pct.ok{background:rgba(31,170,89,.12); color:var(--bast);}
.pagu-bar{height:9px; background:#F1E9ED; border-radius:999px; overflow:hidden; margin-top:2px; display:flex;}
.pagu-bar-fill{height:100%; background:linear-gradient(90deg,var(--pink-1),var(--pink-3));}
.pagu-bar-fill.over{background:linear-gradient(90deg,#B5133A,var(--danger));}
.pagu-bar-fill.rencana-part{background:var(--rencana);}
.pagu-legend-inline{display:flex; gap:12px; font-size:11px; color:var(--ink-soft); margin-top:4px;}
.pagu-legend-inline span{display:inline-flex; align-items:center; gap:4px;}
.pagu-legend-inline .dot{width:8px; height:8px; border-radius:2px; display:inline-block;}
.pagu-legend-inline .dot.riil{background:var(--pink-2);}
.pagu-legend-inline .dot.rencana{background:var(--rencana);}
.pagu-status{font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:5px; margin-top:2px;}
.pagu-status.ok{color:var(--bast)}
.pagu-status.warn{color:var(--danger)}

.pagu-filter-chips{margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.pagu-sumber-row{display:flex; align-items:center; gap:6px;}
.pagu-reset-btn{margin-left:auto; padding:7px 14px; font-size:12.5px;}
.pagu-filter-summary{margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.pagu-filter-summary .pfs-ok b{color:#1FAA59;}
.pagu-filter-summary .pfs-warn b{color:#C0392B;}
.pagu-filter-summary .pfs-riil b{color:var(--ongoing);}
.pagu-filter-summary .pfs-rencana b{color:var(--rencana);}

/* ===== Peringatan kontrak yang tidak cocok bracket pagu (diagnostik) ===== */
.mismatch-warning{
  background:#FFF6E9; border:1px solid #F3D9A6; border-radius:12px;
  padding:14px 16px; margin-bottom:16px; font-size:13px;
}
.mismatch-head{font-weight:700; color:#8A5A00; margin-bottom:10px; line-height:1.5;}
.mismatch-list{display:flex; flex-direction:column; gap:6px;}
.mismatch-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#fff; border:1px solid #F3D9A6; border-radius:8px; padding:7px 10px; font-size:12.5px;
}
.mismatch-jenis{font-weight:700; color:var(--ink);}
.mismatch-count{color:var(--ink-soft); font-size:12px;}
.mismatch-total{margin-left:auto; font-weight:700; color:#8A5A00;}
.mismatch-hint{margin-top:10px; color:#8A5A00; font-size:12px; line-height:1.5;}

/* ===== Panel gelap untuk pie chart % serapan per jenis media ===== */
.card.dark-panel{
  background:radial-gradient(120% 140% at 20% 0%, #24232b 0%, #17161c 55%, #121116 100%);
  border:none; box-shadow:0 24px 50px rgba(0,0,0,.35);
}
.card.dark-panel h3{color:#F4F1F5;}

/* Chip filter versi gelap (dipakai di panel pie chart) */
.pagu-filter-chips.dark-chips{border-bottom-color:rgba(255,255,255,.12);}
.dark-chips .chip{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#E4DEE6;}
.dark-chips .chip:hover{background:rgba(255,255,255,.12);}
.dark-chips .chip[aria-pressed="true"]{background:#fff; color:#17161c; border-color:#fff;}

/* ===== Pie chart kecil per jenis media (% serapan riil vs pagu) ===== */
.pie-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:30px 20px; padding:6px 4px;}
.pie-mini-card{text-align:center;}
.pie-mini-canvas-wrap{
  position:relative; width:100%; max-width:170px; aspect-ratio:1/1; margin:0 auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
}
.pie-mini-label{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;
  font-size:12.5px; font-weight:700; margin-top:14px; color:#E4DEE6; line-height:1.35;
}
.pie-mini-sub{font-size:11px; color:#8A8394; margin-top:2px;}

/* ===== Timeline ===== */
.timeline-card{padding:0; overflow:visible;}
.timeline-sticky{
  position:sticky; top:var(--topbar-h,0px); z-index:8;
  background:var(--card);
  padding:18px 20px 0;
  border-radius:16px 16px 0 0;
}
.timeline-toolbar{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.timeline-toolbar .btn.ghost{padding:9px 16px; font-size:13px;}
.filter-active-note{font-size:12.5px; color:var(--ink-soft);}
.timeline-summary{
  display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center; font-size:12.5px;
  margin:0 0 12px; padding:11px 14px; background:#FBF3F7; border-radius:12px; color:var(--ink-soft);
}
.timeline-summary:empty{display:none; margin:0; padding:0;}
.timeline-summary .ts-badge{font-weight:700; color:var(--pink-1);}
.timeline-summary .ts-total b{color:var(--ink); font-weight:700;}
.timeline-summary .ts-total.riil b{color:var(--ongoing);}
.timeline-summary .ts-total.rencana b{color:var(--rencana);}
.timeline-summary .ts-total.warn{color:#C0392B; font-weight:600;}
.compact-filters{box-shadow:none; border-radius:12px; padding:12px 14px; margin-bottom:10px;}
#filtersPanel[hidden]{display:none !important;}
#clusterFiltersPanel[hidden]{display:none !important;}
.timeline-sticky .legend{
  display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft);
  margin:12px 0 4px;
}
.timeline-sticky .legend span{display:inline-flex; align-items:center; gap:6px;}
.swatch{width:10px; height:10px; border-radius:3px; display:inline-block;}
.swatch.rencana{background:var(--rencana)} .swatch.ongoing{background:var(--ongoing)} .swatch.bast{background:var(--bast)}

.timeline-months{
  display:grid; grid-template-columns:230px 110px 1fr;
  font-size:11px; color:var(--ink-soft); border-bottom:1px solid var(--line);
  padding-bottom:8px; margin-top:6px;
}
.timeline-months .tl-axis{display:grid; grid-template-columns:repeat(12,1fr);}
.timeline-months .tl-axis div{text-align:center;}

.timeline-wrap{overflow-x:auto; overflow-y:visible; padding:4px 20px 20px;}
.timeline{min-width:960px;}
.timeline-row{
  display:grid; grid-template-columns:230px 110px 1fr; align-items:center;
  border-bottom:1px solid var(--line); padding:12px 0; gap:8px;
}
.timeline-row:last-child{border-bottom:none;}

.tl-info{overflow:hidden;}
.tl-media-row{display:flex; align-items:center; gap:6px;}
.tl-media{font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.tl-add-btn{
  flex-shrink:0; width:18px; height:18px; border-radius:50%; border:1px solid var(--pink-2); background:#fff;
  color:var(--pink-2); font-size:13px; line-height:1; font-weight:700; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.tl-add-btn:hover{background:var(--pink-2); color:#fff;}
.tl-count{font-weight:400; color:var(--ink-soft); font-size:11.5px;}
.tl-dewanpers{font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px;}
.tl-kontributor{font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tl-total-breakdown{display:flex; flex-direction:column; gap:1px; margin-top:3px;}
.tl-total-riil, .tl-total-rencana, .tl-total-all{font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tl-total-riil{color:var(--ongoing); font-weight:600;}
.tl-total-rencana{color:var(--rencana); font-weight:600;}
.tl-total-all{color:var(--pink-1); font-weight:700; margin-top:1px;}

.tl-meta{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.tl-cluster{
  display:inline-block; color:#fff; font-size:10.5px; font-weight:700;
  padding:3px 9px; border-radius:999px; line-height:1.4;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tl-jenis{font-size:11px; color:var(--ink-soft);}
.tl-sumberdana{
  font-size:9.5px; font-weight:700; letter-spacing:.03em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:6px; padding:1px 6px; display:inline-block; margin-top:1px;
}

.timeline-track{position:relative; background:repeating-linear-gradient(90deg,#F2ECEF 0,#F2ECEF 1px,transparent 1px,transparent calc(100%/12));}
.timeline-bar{
  position:absolute; height:16px; border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.15); cursor:pointer;
}
.timeline-bar.rencana{background:var(--rencana)}
.timeline-bar.ongoing{background:var(--ongoing)}
.timeline-bar.bast{background:var(--bast)}
.tl-bar-value{
  position:absolute; top:-17px; left:0; font-size:10.5px; font-weight:700;
  color:var(--ink); white-space:nowrap;
}
.tl-edit-btn{
  position:absolute; right:-8px; top:-9px; width:18px; height:18px; border-radius:50%;
  border:1px solid #fff; background:var(--ink); color:#fff; font-size:10px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.timeline-empty{font-size:13px; color:var(--ink-soft); padding:20px 0;}

/* ===== Tooltip ===== */
.tl-tooltip{
  display:none; position:fixed; z-index:100; background:var(--ink); color:#fff;
  border-radius:10px; padding:10px 12px; font-size:12.5px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  min-width:190px; pointer-events:none;
}
.tl-tip-row{display:flex; justify-content:space-between; gap:14px; padding:2px 0;}
.tl-tip-row span{opacity:.75;}

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(32,22,34,.5); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:200;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:#fff; border-radius:18px; width:100%; max-width:460px; padding:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal h3{margin:0 0 4px;}
.modal .sub{font-size:13px; color:var(--ink-soft); margin:0 0 18px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.form-row input, .form-row select{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px;
  background:#fff;
}
.form-row input[readonly]{background:#F5F1F3; color:var(--ink-soft);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.computed{
  background:#FBF3F7; border-radius:10px; padding:10px 12px; font-size:14px; font-weight:700; color:var(--pink-1);
  margin-bottom:16px;
}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.btn{border:none; border-radius:9px; padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer;}
.btn.ghost{background:#fff; border:1px solid var(--line); color:var(--ink);}
.btn.save{background:linear-gradient(100deg,var(--pink-1),var(--pink-2)); color:#fff;}
.form-msg{font-size:13px; margin-top:10px;}
.form-msg.error{color:var(--danger);}
.form-msg.ok{color:var(--bast);}

.empty-state{padding:40px; text-align:center; color:var(--ink-soft); font-size:14px;}

/* ===== Login ===== */
.login-screen{
  display:none; position:fixed; inset:0; z-index:400;
  background:linear-gradient(120deg,var(--pink-1),var(--pink-2) 55%,var(--pink-3));
  align-items:center; justify-content:center; padding:20px;
}
.login-screen.open{display:flex;}
.login-card{
  background:#fff; border-radius:20px; width:100%; max-width:380px;
  padding:30px 28px; box-shadow:0 24px 70px rgba(0,0,0,.3);
}
.login-brand{margin-bottom:22px;}
.login-brand .brand-mark{background:linear-gradient(100deg,var(--pink-1),var(--pink-2)); color:#fff; border:none;}
.login-brand .brand-name{color:var(--ink);}
.login-brand .brand-sub{color:var(--ink-soft); opacity:1;}
.login-title{font-size:19px; margin:0 0 4px;}
.login-desc{font-size:13.5px; color:var(--ink-soft); margin:0 0 20px;}
.login-submit{width:100%; padding:11px; font-size:14px; margin-top:4px;}

/* ===== Logout ===== */
.topbar-right{display:flex; align-items:center; gap:12px;}
.logout-btn{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.45); color:#fff;
  padding:7px 15px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.logout-btn:hover{background:rgba(255,255,255,.28);}

/* ===== Refresh button ===== */
.refresh-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.45); color:#fff;
  padding:7px 15px; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.refresh-btn:hover{background:rgba(255,255,255,.28);}
.refresh-btn:disabled{opacity:.6; cursor:default;}
.refresh-icon{display:inline-block; font-size:14px; line-height:1;}
.refresh-btn.spinning .refresh-icon{animation:refresh-spin .7s linear infinite;}
@keyframes refresh-spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}

/* ===== Tab 4: Kebutuhan vs Pagu ===== */
.kb-toolbar{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;}
.kb-toolbar .field{display:flex; flex-direction:column; gap:4px;}
.kb-toolbar .field label{font-size:12px; color:var(--ink-soft); font-weight:600;}
.kb-toolbar .field input[type="date"]{
  border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:13.5px;
  font-family:var(--font-body); color:var(--ink); background:#fff;
}
.kb-mode-toggle{margin-left:auto;}
.kb-table-title{font-size:16px; margin:0; display:flex; align-items:center; gap:8px;}
.kb-table-title .sumber-badge{position:relative; top:0;}

.kebutuhan-table{width:100%; border-collapse:collapse; font-size:13.5px; table-layout:auto; min-width:1180px;}
.kebutuhan-table th, .kebutuhan-table td{
  border:1px solid var(--line); padding:11px 14px; text-align:right; white-space:nowrap;
}
.kebutuhan-table thead th{
  font-family:var(--font-display); font-size:12.5px; font-weight:700; text-align:center;
  color:var(--ink); background:#FBF3F7; line-height:1.3;
}
.kebutuhan-table thead th.kb-label{text-align:left; background:#F3E9EE; position:sticky; left:0; z-index:3; box-shadow:2px 0 4px rgba(32,22,34,.08);}
.kebutuhan-table thead th.kb-media{background:#FBDCB8;}
.kebutuhan-table thead th.kb-nonmedia{background:#CFE6FF;}
.kebutuhan-table thead th.kb-total-col{background:#F3E9EE;}
.kebutuhan-table tbody td.kb-label{
  text-align:left; font-weight:700; background:#FBF3F7; white-space:normal;
  position:sticky; left:0; z-index:1; box-shadow:2px 0 4px rgba(32,22,34,.08);
}
.kebutuhan-table tbody tr:nth-child(2) td.kb-label{background:#FBF3F7;}
.kebutuhan-table tbody td.kb-num{font-variant-numeric:tabular-nums;}
.kebutuhan-table tbody tr.kb-breakdown-row td{font-weight:400; font-size:12.5px; color:var(--ink-soft, #6b6470);}
.kebutuhan-table tbody tr.kb-breakdown-row td.kb-label{font-weight:600; background:#FFFFFF;}
.kebutuhan-table tbody tr.kb-riil-row td.kb-label{color:var(--ongoing);}
.kebutuhan-table tbody tr.kb-rencana-row td.kb-label{color:var(--rencana);}
.kebutuhan-table tbody tr.kb-selisih-row td{font-weight:700;}
.kebutuhan-table tbody tr.kb-selisih-row td.kb-label{background:#FBF3F7;}
.kebutuhan-table .kb-pos{color:var(--bast);}
.kebutuhan-table .kb-neg{color:var(--danger); font-style:italic;}
@media (max-width:640px){
  .kb-mode-toggle{margin-left:0;}
  .kb-toolbar{width:100%;}
}

/* ===== Toast ===== */
.app-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,16px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px;
  font-size:13px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:300;
  max-width:min(92vw,420px); text-align:center;
}
.app-toast.show{opacity:1; transform:translate(-50%,0);}
.app-toast.ok{background:var(--bast);}
.app-toast.error{background:var(--danger);}
.app-toast.info{background:var(--ink);}

footer{text-align:center; font-size:12.5px; color:var(--ink-soft); padding:30px 16px 50px;}

@media (max-width:760px){
  .timeline-months{grid-template-columns:150px 90px 1fr;}
  .timeline-row{grid-template-columns:150px 90px 1fr;}
}