:root {
  --paper:#eef5fb;
  --navy:#112f50;
  --navy2:#174b76;
  --ink:#193c59;
  --teal:#2379b7;
  --mint:#d9ecfa;
  --muted:#668099;
  --line:#dbe8f2;
  --shadow:0 10px 35px rgba(20,62,102,.055);
}
body {background:var(--paper);color:var(--ink)}
.sidebar {background:#102e50;color:#d5e8f8}
.brand {border-color:#345777}
.brand-mark {background:#a9d8f7;color:#123b5c}
.brand-mark i {border-color:#3d83b2}
.brand-accent {color:#9bd3f5}
.brand small,.nav:before,.side-bottom {color:#92b5cd}
.nav button {color:#bdd5e8}
.nav button:hover {background:#244c70}
.nav button.active {background:#b9dffa;color:#133c5f;box-shadow:0 5px 15px rgba(6,27,56,.16)}
.side-meter {background:#183e62;border-color:#3d6484}
.side-meter .row {color:#b6d6e9}
.side-meter strong,.side-bottom a {color:#c6e8ff}
.side-meter .meter {background:#426b8a}
.side-meter .meter span {background:#8ac9f2}
.side-bottom {border-color:#365b7c}
.topbar {background:rgba(249,252,255,.95);border-color:#dce9f3;box-shadow:0 5px 20px rgba(22,67,108,.025)}
.crumb {color:#637f96}
.crumb-sep {color:#afc6d8}
.live-dot,.signal {background:#66b6e9;box-shadow:0 0 0 4px rgba(102,182,233,.15)}
.pill {color:#236899;background:#e8f4fd;border-color:#c8e3f5}
.btn {color:#234c6a;border-color:#d5e3ee}
.btn:hover {border-color:#95c5e4}
.btn.primary,.sync-button {background:#1b5b8e;border-color:#1b5b8e;color:white}
.btn.primary:hover,.sync-button:hover {background:#2476b2;border-color:#2476b2}
.sidebar-toggle {color:#2f6d9a;background:#e8f4fc;border-color:#cfe4f4}
.sidebar-toggle:hover {background:#d9ecfa}
.hero {
  background-color:#112d4c;
  background-image:linear-gradient(90deg,rgba(7,27,51,.91) 0%,rgba(8,33,60,.67) 48%,rgba(8,33,60,.32) 100%),url('./assets/aroem-ballroom.jpg');
  box-shadow:0 18px 44px rgba(12,48,91,.13);
}
.hero-kicker {color:#c6e3f3}
.hero-edition {color:#91b8d0}
.hero h1 em {color:#a8d9fa}
.hero h1 span {color:#e2f0fb}
.hero p {color:#c4dae9}
.hero-meta .meta-chip {color:#d3e5f1;border-top-color:rgba(214,239,255,.4)}
.hero-meta b {color:#9bd4f5}
.hero-score {background:rgba(10,35,64,.73);border-color:rgba(208,234,252,.25)}
.hero-score .score-head {color:#c4e1f1}
.score-index {color:#8bb7d0}
.hero-score .progress-dial strong {color:#bee3fb}
.hero-score small {color:#e0f0fa}
.hero-score .formula {color:#a2c7da}
.score-line {background:#3d6685}
.score-line span {background:#8acaf4}
.kpi,.phase-card,.distribution-panel,.time-block,.note-card,.info-card {background:#fff;border-color:#dbe8f2;box-shadow:var(--shadow)}
.kpi .label,.kpi .sub {color:#6d879c}
.kpi .value,.phase-card strong,.panel h3,.time-block strong {color:#173b5d}
.section-head .eyebrow,.eyebrow {color:#2c82b9}
.section-head h2,.page-title h1 {color:#173b5d}
.section-head p,.method-note {color:#7690a3}
.phase-card:hover {border-color:#89bee0;box-shadow:0 15px 30px rgba(21,83,133,.11)}
.phase-card:before {color:#8db6d0}
.phase-card .phase-pct {color:#277bb6}
.phase-card .phase-track {background:#e5f0f8}
.phase-card .phase-track span {background:#55a8d9}
.phase-card .phase-foot {color:#7890a2}
.phase-card .phase-foot b {color:#2678ad}
.focus-panel {background:#153b61;border-color:#153b61;color:#edf7ff}
.focus-panel .panel-heading,.text-link {border-color:#456d8e}
.focus-panel h3,.focus-item strong {color:#f2f8fd}
.panel-index,.pulse-label {color:#b6d9ee}
.distribution-panel .panel-heading {border-color:#dce8f2}
.distribution-panel .panel-index {color:#7292aa}
.distribution-panel .track {background:#e6eff6}
.distribution-panel .bar-row,.distribution-panel .bar-row strong {color:#355d78}
.distribution-panel .bar-row[data-status="Belum dimulai"] .fill {background:#aabfce}
.focus-item {border-color:#3c6384}
.focus-item .id,.text-link {color:#a9daf7}
.focus-item small {color:#a5c7dc}
.text-link:hover {color:white}
.time-block b,.timeline-time,.timeline-content small {color:#287eb7}
.source-note {background:#e7f2fa;border-color:#d1e5f3;color:#4b6e86}
.source-note strong {color:#173b5d}
.page-title {border-color:#d5e5f1}
.search,select {background:#fff;border-color:#d5e5f1;color:#244c6d}
.table-wrap {border-color:#d7e5f0}
.table th {background:#e3f0f9;color:#3d6684}
.table td {border-color:#e6eef5}
.table tr:nth-child(even) td {background:#f8fbfe}
.table tr:hover td {background:#edf6fc}
.table .title-cell,.info-card .big {color:#17486e}
.timeline-line {border-color:#b9d9ee}
.timeline-line:before {background:#5bacdc}
.group-chip {background:#eaf5fc;border-color:#d1e8f6;color:#315f7f}
.dialog {color:#1b3b57}
.dialog label {color:#456983}
.dialog textarea {border-color:#cbdfea}
:focus-visible {outline-color:#5caee0}
@media(max-width:650px) {
  .hero {background-image:linear-gradient(180deg,rgba(7,27,51,.90) 0%,rgba(8,33,60,.76) 58%,rgba(8,33,60,.58) 100%),url('./assets/aroem-ballroom.jpg')}
  .hero-score {background:rgba(10,35,64,.84)}
}