* {
  box-sizing:border-box;
}
:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:4px;
}
body {
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--bg-body);
  color:var(--text-main);
}
.layout {
  display:flex;
  min-height:100vh;
}
.sidebar {
  width:255px;
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  position:fixed;
  inset:0 auto 0 0;
  padding:20px 15px;
  box-shadow:var(--sidebar-shadow);
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  margin:5px 8px 28px;
}
.brand-logos {
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.brand-logos img {
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  padding:3px;
  box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.brand-logos img+img {
  padding:5px;
}
.brand small {
  display:block;
  color:var(--sidebar-text-muted);
  font-size:11px;
  margin-top:2px;
}
.brand b {
  font-size:15px;
  letter-spacing:.2px;
}
.logo {
  width:44px;
  height:44px;
  border-radius:12px;
  background:#2f75b5;
  display:grid;
  place-items:center;
  font-weight:900;
}
.nav a {
  display:block;
  color:var(--nav-text);
  text-decoration:none;
  padding:11px 12px;
  border-radius:9px;
  margin:4px 0;
}
.nav a:hover {
  background:var(--nav-hover);
}
.main {
  margin-left:255px;
  width:calc(100% - 255px);
  padding:22px 28px;
}
.top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.top h1 {
  font-size:24px;
  margin:4px 0;
}
.muted {
  color:var(--text-muted);
  font-size:12px;
}
.user {
  background:var(--bg-panel);
  color:var(--text-main);
  padding:9px 12px;
  border-radius:9px;
  box-shadow:0 2px 12px var(--shadow-color);
}
.user a {
  color:#b91c1c;
  text-decoration:none;
  margin-left:10px;
}
.cards {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px;
}
.card, .panel {
  background:var(--bg-panel);
  color:var(--text-main);
  border-radius:14px;
  box-shadow:0 5px 18px var(--shadow-color);
}
.card {
  padding:17px;
}
.card .label {
  font-size:11px;
  color:var(--text-muted);
  text-transform:uppercase;
}
.card .value {
  font-size:22px;
  font-weight:800;
  margin-top:7px;
  color:var(--text-main);
}
.panel {
  padding:18px;
  margin-top:16px;
}
.filters {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  align-items:end;
}
.fg label {
  font-size:11px;
  font-weight:700;
  display:block;
  margin-bottom:5px;
}
.fg input, .fg select, .fg textarea {
  width:100%;
  padding:9px;
  border:1px solid var(--border-color);
  border-radius:8px;
  font:inherit;
  background:var(--bg-input);
  color:var(--text-main);
}
.btn {
  display:inline-block;
  padding:9px 12px;
  border-radius:8px;
  background:#2f75b5;
  color:#fff;
  text-decoration:none;
  border:0;
  cursor:pointer;
}
.btn.dark {
  background:#17365d;
}
.btn.green {
  background:#15803d;
}
.btn.red {
  background:#b91c1c;
}
.btn.gray {
  background:#64748b;
}
.grid2 {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:16px;
}
.table-wrap {
  overflow:auto;
  max-height:610px;
}
.table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.table th, .table td {
  padding:9px;
  border-bottom:1px solid var(--border-color);
  vertical-align:top;
}
.table th {
  background:var(--bg-panel-soft);
  position:sticky;
  top:0;
  text-align:left;
  z-index:1;
}
.badge {
  display:inline-block;
  border-radius:99px;
  padding:4px 8px;
  font-size:10px;
  font-weight:800;
}
.g {
  background:#dcfce7;
  color:#166534;
}
.y {
  background:#fef3c7;
  color:#92400e;
}
.r {
  background:#fee2e2;
  color:#991b1b;
}
.b {
  background:#dbeafe;
  color:#1d4ed8;
}
.gr {
  background:#e5e7eb;
  color:#374151;
}
.alert {
  padding:11px;
  border-radius:9px;
  margin-bottom:13px;
  background:var(--alert-ok-bg);
  color:var(--alert-ok-text);
}
.alert.error {
  background:var(--alert-err-bg);
  color:var(--alert-err-text);
}
.actions {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.progress {
  height:8px;
  background:var(--bg-track);
  border-radius:9px;
  overflow:hidden;
}
.progress span {
  display:block;
  height:100%;
  background:#2f75b5;
}
.kpi {
  display:flex;
  justify-content:space-between;
  margin:9px 0;
}
.formgrid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.full {
  grid-column:1/-1;
}
.note {
  font-size:11px;
  color:var(--text-muted);
}
.late {
  color:#b91c1c;
  font-weight:800;
}
@media(max-width:1050px) {
  .cards {
    grid-template-columns:repeat(2,1fr);
  }
  .filters {
    grid-template-columns:repeat(2,1fr);
  }
  .grid2 {
    grid-template-columns:1fr;
  }
  .sidebar {
    width:210px;
  }
  .main {
    margin-left:210px;
    width:calc(100% - 210px);
  }
}
.note {
  line-height:1.45;
}
.table td {
  vertical-align:top;
}
.table form input {
  min-width:110px;
}
.badge.r {
  background:#ffe2e2;
  color:#a40000;
}
.badge.y {
  background:#fff2c2;
  color:#8a5a00;
}
.badge.g {
  background:#ddf6e4;
  color:#14733d;
}
/* Premium executive dashboard */
.hero-dashboard {
  margin:0 0 16px;
  padding:24px 26px;
  border-radius:18px;
  background:linear-gradient(135deg,#102b4d 0%,#173f68 58%,#2f75b5 100%);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 16px 34px rgba(16,43,77,.20);
  position:relative;
  overflow:hidden;
}
.hero-dashboard:after {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-70px;
  top:-130px;
  background:rgba(255,255,255,.10);
  box-shadow:-80px 120px 0 rgba(255,255,255,.04);
}
.hero-dashboard h2 {
  font-size:30px;
  margin:5px 0;
}
.hero-dashboard p {
  margin:0;
  color:#d8e7f5;
}
.eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  font-weight:800;
  opacity:.75;
}
.hero-chip, .mini-badge {
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(8px);
  position:relative;
  z-index:2;
}
.filter-premium {
  border:1px solid var(--border-color);
}
.premium-cards {
  perspective:1200px;
}
.k3d {
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition:.2s;
  box-shadow:0 10px 20px rgba(23,54,93,.10),0 18px 0 rgba(23,54,93,.035);
}
.k3d:hover {
  transform:translateY(-3px) rotateX(1deg);
  box-shadow:0 16px 28px rgba(23,54,93,.15),0 22px 0 rgba(23,54,93,.04);
}
.k3d:before {
  content:"";
  position:absolute;
  right:-30px;
  top:-30px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(47,117,181,.13),rgba(255,255,255,0));
}
.k3d small {
  display:block;
  color:var(--text-muted);
  margin-top:5px;
}
.dashboard-grid {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:16px;
}
.dashboard-grid.lower {
  grid-template-columns:1.6fr .8fr;
}
.chart3d {
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(23,54,93,.09),0 10px 0 rgba(23,54,93,.025);
}
.chart3d:after {
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-7px;
  height:12px;
  background:linear-gradient(90deg,rgba(23,54,93,.08),rgba(47,117,181,.03));
  transform:skewX(-28deg);
  filter:blur(2px);
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.section-head h3 {
  margin:3px 0;
}
.chart-wrap {
  height:310px;
  position:relative;
}
.chart-wrap.donut {
  height:290px;
}
.unit-cards {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.unit-card {
  padding:13px;
  border-radius:12px;
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  border:1px solid var(--border-color);
  box-shadow:5px 6px 0 rgba(23,54,93,.035);
}
.unit-top {
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.unit-top span {
  font-weight:800;
}
.unit-target {
  font-size:14px;
  font-weight:800;
  margin:7px 0;
}
.unit-meta {
  font-size:10px;
  color:var(--text-muted);
  margin-top:6px;
}
.score-ring {
  width:160px;
  height:160px;
  border-radius:50%;
  margin:15px auto 18px;
  background:conic-gradient(#2f75b5 calc(var(--score)*1%),var(--bg-track) 0);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 12px var(--bg-panel),0 12px 22px rgba(23,54,93,.10);
}
.score-ring>div {
  width:104px;
  height:104px;
  border-radius:50%;
  background:var(--bg-panel);
  display:grid;
  place-items:center;
  align-content:center;
  box-shadow:0 4px 15px rgba(23,54,93,.10);
}
.score-ring b {
  font-size:22px;
}
.score-ring small {
  color:var(--text-muted);
}
.mini-badge {
  background:var(--bg-highlight);
  color:var(--text-main);
}
.filter-premium .filters {
  grid-template-columns:repeat(5,1fr);
}
@media(max-width:1050px) {
  .dashboard-grid, .dashboard-grid.lower {
    grid-template-columns:1fr;
  }
  .unit-cards {
    grid-template-columns:1fr;
  }
  .hero-dashboard {
    align-items:flex-start;
    gap:12px;
    flex-direction:column;
  }
  .filter-premium .filters {
    grid-template-columns:repeat(2,1fr);
  }
}
/* v2.2 navigation/layout fix */
html {
  scroll-behavior:smooth;
}
body {
  overflow-x:hidden;
}
.sidebar {
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  z-index:20;
}
.sidebar::-webkit-scrollbar {
  width:6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background:var(--sidebar-border);
  border-radius:10px;
}
.brand {
  position:sticky;
  top:0;
  z-index:3;
  background:var(--sidebar-bg);
  padding:5px 0 14px;
  margin-bottom:10px;
}
.nav {
  padding-bottom:22px;
}
.nav a {
  white-space:normal;
  line-height:1.25;
}
.nav a.active {
  background:#2f75b5;
  color:#fff;
  box-shadow:inset 3px 0 0 #fff;
}
.main {
  min-height:100vh;
  overflow:visible;
}
.top {
  position:sticky;
  top:0;
  z-index:10;
  background:var(--bg-body);
  padding:4px 0 12px;
  margin:-4px 0 18px;
}
.priority-card {
  padding:13px 0;
  border-bottom:1px solid var(--border-color);
}
.priority-title {
  font-weight:800;
  font-size:15px;
  margin-bottom:5px;
}
.status-link {
  text-decoration:none;
  cursor:pointer;
}
.status-link:hover {
  filter:brightness(.95);
  transform:translateY(-1px);
}
.filters .fg {
  min-width:0;
}
@media(max-width:1050px) {
  .sidebar {
    width:210px;
  }
  .main {
    margin-left:210px;
    width:calc(100% - 210px);
  }
}
/* v2.3 identity + notifications */
.brand-logos {
  display:flex;
  gap:6px;
  align-items:center;
}
.brand-logos img {
  width:34px;
  height:34px;
  object-fit:contain;
  background:#fff;
  border-radius:9px;
  padding:3px;
}
.top-actions {
  display:flex;
  align-items:center;
  gap:10px;
}
.notif-wrap {
  position:relative;
}
.notif-btn {
  border:0;
  background:var(--bg-panel);
  color:var(--text-main);
  padding:10px 12px;
  border-radius:10px;
  box-shadow:0 2px 12px var(--shadow-color);
  cursor:pointer;
  font-weight:700;
}
.notif-count {
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:99px;
  background:#b91c1c;
  color:#fff;
  font-size:10px;
  margin-left:4px;
}
.notif-box {
  display:none;
  position:absolute;
  right:0;
  top:46px;
  width:360px;
  max-height:430px;
  overflow:auto;
  background:var(--bg-panel);
  border:1px solid var(--border-color);
  border-radius:14px;
  box-shadow:0 18px 40px var(--shadow-color);
  padding:8px;
  z-index:50;
}
.notif-box.show {
  display:block;
}
.notif-item {
  padding:10px;
  border-radius:10px;
  border-bottom:1px solid var(--border-color);
  font-size:12px;
  line-height:1.4;
  color:var(--text-main);
}
.notif-item.unread {
  background:var(--bg-highlight);
}
.notif-item small {
  display:block;
  color:var(--text-muted);
  margin-top:5px;
}
.brand {
  gap:9px;
}
@media(max-width:800px) {
  .notif-box {
    right:-70px;
    width:310px;
  }
  .top-actions {
    gap:5px;
  }
  .top {
    align-items:flex-start;
  }
  .user {
    font-size:12px;
  }
  .notif-btn {
    font-size:11px;
  }
}
/* v3.0 weekly control + executive premium */
.executive-hero {
  min-height:220px;
  padding:28px 34px;
  background:radial-gradient(circle at 78% 42%,rgba(91,141,184,.35),transparent 24%),linear-gradient(135deg,#081d36 0%,#123b63 52%,#2f75b5 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(8,29,54,.28);
  border-radius:24px;
}
.hero-copy {
  position:relative;
  z-index:2;
  max-width:760px;
}
.hero-copy h2 {
  font-size:36px;
  letter-spacing:-.03em;
}
.hero-copy p {
  max-width:680px;
  font-size:14px;
  line-height:1.65;
}
.hero-stats {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.hero-stats span {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  padding:8px 12px;
  border-radius:999px;
  font-size:11px;
  backdrop-filter:blur(10px);
}
.hero-orb {
  width:190px;
  height:190px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff 0,#dbeaf6 10%,#5b8db8 38%,#17365d 72%);
  box-shadow:inset -20px -20px 30px rgba(0,0,0,.16),inset 15px 15px 30px rgba(255,255,255,.28),0 22px 45px rgba(0,0,0,.22);
  position:relative;
  z-index:2;
}
.orb-core {
  width:132px;
  height:132px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  display:grid;
  place-items:center;
  align-content:center;
  box-shadow:0 8px 22px rgba(8,29,54,.18);
  text-align:center;
}
.orb-core span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
  color:#6e7f94;
}
.orb-core b {
  font-size:29px;
  color:#17365d;
}
.orb-core small {
  font-size:9px;
  color:#738198;
}
.executive-kpis .k3d {
  min-height:128px;
  border-radius:18px;
}
.kpi-glow {
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  right:-40px;
  bottom:-55px;
  background:radial-gradient(circle,rgba(47,117,181,.20),transparent 65%);
}
.executive-charts {
  grid-template-columns:1.75fr .75fr;
}
.chart-tall {
  height:370px;
}
.gauge-panel {
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
}
.premium-ring {
  width:190px;
  height:190px;
  background:conic-gradient(#2f75b5 calc(var(--score)*1%),var(--bg-track) 0);
  box-shadow:inset 0 0 0 14px var(--bg-panel),0 16px 30px rgba(23,54,93,.13);
}
.premium-ring>div {
  width:124px;
  height:124px;
}
.premium-ring b {
  font-size:28px;
}
.health-meter {
  height:10px;
  border-radius:99px;
  background:var(--bg-track);
  overflow:hidden;
  margin:8px 0 15px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
}
.health-meter span {
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--chart-target),var(--chart-realisasi),#8ab4d6);
  box-shadow:0 2px 8px rgba(47,117,181,.25);
}
.control-message {
  margin-top:15px;
  padding:12px;
  border-radius:12px;
  background:var(--bg-highlight);
  color:var(--text-main);
  font-size:11px;
  line-height:1.5;
}
.executive-second {
  grid-template-columns:.8fr 1.2fr;
}
.premium-unit {
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  box-shadow:7px 8px 0 rgba(23,54,93,.035),0 8px 18px rgba(23,54,93,.06);
}
.warning-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px;
}
.warning-card {
  display:block;
  text-decoration:none;
  color:var(--text-main);
  padding:15px;
  border-radius:15px;
  border:1px solid var(--border-color);
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  box-shadow:0 8px 16px rgba(23,54,93,.06),6px 7px 0 rgba(23,54,93,.025);
  transition:.18s;
}
.warning-card:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 24px rgba(23,54,93,.11),7px 9px 0 rgba(23,54,93,.035);
}
.warning-card.r {
  border-left:5px solid #b91c1c;
}
.warning-card.y {
  border-left:5px solid #c58a00;
}
.warning-card.g {
  border-left:5px solid #15803d;
}
.warning-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.warning-title {
  font-size:12px;
  font-weight:800;
  margin:5px 0 10px;
  line-height:1.4;
}
.warning-numbers {
  display:flex;
  align-items:baseline;
  gap:5px;
}
.warning-numbers span {
  font-size:15px;
  font-weight:900;
}
.warning-numbers small {
  color:var(--text-muted);
}
.warning-numbers b {
  margin-left:auto;
  font-size:16px;
}
.period-ribbon {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:13px;
  padding:11px 14px;
  border-radius:12px;
  background:var(--bg-highlight);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  font-size:11px;
}
.period-ribbon b {
  color:var(--text-main);
  font-size:12px;
}
.weekly-hero {
  min-height:155px;
}
.weekly-hero h2 {
  font-size:28px;
}
.weekly-hero p {
  max-width:850px;
}
@media(max-width:1100px) {
  .executive-charts, .executive-second {
    grid-template-columns:1fr;
  }
  .hero-orb {
    width:150px;
    height:150px;
  }
  .orb-core {
    width:108px;
    height:108px;
  }
  .warning-grid {
    grid-template-columns:1fr;
  }
}
@media(max-width:800px) {
  .executive-hero {
    padding:22px;
    min-height:0;
  }
  .hero-orb {
    display:none;
  }
  .hero-copy h2 {
    font-size:29px;
  }
  .executive-kpis {
    grid-template-columns:repeat(2,1fr);
  }
  .warning-grid {
    grid-template-columns:1fr;
  }
}
/* Interactive Control Score KPIs */
.score-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:inherit;
  text-decoration:none;
  width:100%;
}
.score-link:hover {
  opacity:.82;
  text-decoration:none;
}
/* v16.1 reliability fallbacks */
.chart-fallback {
  height:100%;
  min-height:320px;
  padding:16px 10px 8px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.fallback-legend {
  display:flex;
  gap:18px;
  font-size:12px;
  margin-bottom:8px;
  color:var(--text-muted);
}
.fallback-legend i {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--chart-target);
  margin-right:5px;
}
.fallback-legend span:last-child i {
  background:var(--chart-realisasi);
}
.fallback-bars {
  height:270px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  border-bottom:1px solid var(--border-color);
  padding:0 4px;
}
.fallback-bar {
  height:100%;
  flex:1;
  min-width:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
}
.bar-pair {
  height:92%;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
}
.bar-pair span {
  display:block;
  width:42%;
  min-height:2px;
  border-radius:5px 5px 0 0;
}
.bar-target {
  background:var(--chart-target);
}
.bar-real {
  background:var(--chart-realisasi);
}
.fallback-bar small {
  font-size:11px;
  color:var(--text-muted);
  margin-top:6px;
}
.source-fallback {
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  gap:13px;
  width:100%;
}
.mix-row {
  width:100%;
}
.mix-label {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  margin-bottom:5px;
}
.mix-label b {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mix-label span {
  font-weight:700;
  white-space:nowrap;
}
.mix-track {
  height:9px;
  background:var(--bg-track);
  border-radius:999px;
  overflow:hidden;
}
.mix-track span {
  display:block;
  height:100%;
  background:#2f75b5;
  border-radius:999px;
}
.chart-wrap canvas {
  position:relative;
  z-index:2;
}
.chart-wrap {
  position:relative;
}
.chart-fallback {
  position:absolute;
  inset:0;
  z-index:1;
}
.source-fallback {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:auto;
}
.donut canvas {
  z-index:2;
}
.report-filters {
  grid-template-columns:repeat(6,1fr)!important;
}
.report-toggles {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  grid-column:1/-1;
  padding:10px 12px;
  background:var(--bg-highlight);
  border:1px solid var(--border-color);
  border-radius:12px;
}
.report-toggles label {
  font-size:11px;
  font-weight:800;
  color:var(--text-main);
}
.report-toggles input {
  accent-color:#2f75b5;
}
.report-bars {
  height:270px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:42px;
  padding:20px;
}
.report-bars>div {
  height:100%;
  width:85px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:9px;
}
.report-bars span {
  display:block;
  width:58px;
  border-radius:14px 14px 6px 6px;
  background:linear-gradient(180deg,var(--chart-realisasi),var(--chart-target));
  box-shadow:8px 9px 0 rgba(23,54,93,.06);
}
.report-bars small {
  font-weight:800;
  color:var(--text-muted);
}
.report-tl {
  padding:7px 8px;
  margin:3px 0;
  border-radius:8px;
  background:var(--bg-highlight);
  border:1px solid var(--border-color);
}
.report-tl b {
  display:block;
  font-size:10px;
}
.report-tl small {
  display:block;
  color:var(--text-muted);
  margin-top:3px;
}
.table-wrap {
  overflow:auto;
}
.table-wrap table {
  min-width:900px;
}
.table-wrap td small {
  display:block;
  color:var(--text-muted);
  margin-top:3px;
}
.report-mix {
  padding:10px;
}
.report-mix .mix-row {
  margin:12px 0;
}
.report-mix .mix-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  margin-bottom:5px;
}
.report-mix .mix-label span {
  color:var(--text-muted);
}
.report-mix .mix-track {
  height:10px;
  background:var(--bg-track);
  border-radius:99px;
  overflow:hidden;
}
.report-mix .mix-track span {
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#17365d,#2f75b5,#8ab4d6);
}
@media(max-width:1100px) {
  .report-filters {
    grid-template-columns:repeat(3,1fr)!important;
  }
}
@media(max-width:700px) {
  .report-filters {
    grid-template-columns:1fr 1fr!important;
  }
}
/* v16.1 UX + premium visualization refinements */
.user-editor {
  border-top:4px solid #2f75b5;
}
.pic-input-hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.pic-period-form {
  grid-template-columns:1fr 1fr 1.4fr auto!important;
}
.pic-unit-panel {
  border-top:4px solid #2f75b5;
}
.pic-unit-title {
  margin:3px 0;
  font-size:23px;
}
.pic-source-block {
  margin-top:18px;
}
.pic-source-title {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  border-radius:13px;
  background:linear-gradient(135deg,#0d355b,#2f75b5);
  color:#fff;
  box-shadow:0 8px 16px rgba(23,54,93,.14);
}
.pic-source-title b {
  display:block;
  font-size:14px;
}
.pic-source-title small {
  display:block;
  color:#d9e9f7;
  margin-top:2px;
}
.source-number {
  font-size:20px;
  color:#ffd15a;
}
.pic-target-list {
  display:grid;
  gap:12px;
  margin-top:12px;
}
.pic-target-card {
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  border:1px solid var(--border-color);
  border-radius:18px;
  padding:15px;
  box-shadow:7px 8px 0 rgba(23,54,93,.035),0 10px 24px rgba(23,54,93,.07);
  transition:.18s;
}
.pic-target-card:hover {
  transform:translateY(-2px);
  box-shadow:9px 11px 0 rgba(23,54,93,.035),0 14px 30px rgba(23,54,93,.10);
}
.pic-target-head {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.pic-target-kicker {
  font-size:9px;
  letter-spacing:.14em;
  font-weight:900;
  color:var(--text-muted);
}
.pic-target-head h3 {
  font-size:16px;
  margin:3px 0 7px;
  color:var(--text-main);
}
.context-badges {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.context-badges span {
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:var(--bg-highlight);
  color:#17608e;
  font-size:9px;
  font-weight:900;
  border:1px solid var(--border-color);
}
.pic-capaian {
  min-width:82px;
  text-align:center;
  padding:9px 10px;
  border-radius:14px;
  font-size:19px;
  font-weight:950;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 6px 12px rgba(23,54,93,.08);
}
.pic-capaian small {
  display:block;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  opacity:.75;
}
.pic-target-metrics {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:13px 0;
}
.pic-target-metrics div {
  padding:9px;
  border-radius:11px;
  background:var(--bg-panel);
  border:1px solid var(--border-color);
}
.pic-target-metrics span {
  display:block;
  font-size:8px;
  color:var(--text-muted);
  text-transform:uppercase;
  font-weight:800;
}
.pic-target-metrics b {
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--text-main);
}
.pic-progress {
  height:10px;
  background:var(--bg-track);
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
  margin-bottom:12px;
}
.pic-progress span {
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--chart-target),var(--chart-realisasi),#1bb8c7);
  box-shadow:0 2px 7px rgba(47,117,181,.3);
}
.pic-input-form {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:9px;
  align-items:end;
}
.pic-input-box {
  padding:9px 10px;
  border-radius:12px;
  background:var(--bg-highlight);
  border:1px solid var(--border-color);
}
.pic-input-box label {
  display:block;
  font-size:9px;
  font-weight:900;
  color:var(--text-main);
  margin-bottom:5px;
}
.pic-input-box input {
  width:100%;
  border:1px solid var(--border-color);
  border-radius:9px;
  padding:10px;
  font:inherit;
  background:var(--bg-input);
  color:var(--text-main);
}
.pic-save-btn {
  height:42px;
  white-space:nowrap;
}
.pic-arahan-alert {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
  padding:10px 12px;
  border-radius:11px;
  background:var(--alert-warn-bg);
  border:1px solid var(--alert-warn-border);
  color:var(--alert-warn-text);
  font-size:10px;
}
.pic-arahan-alert span {
  display:block;
}
.pic-help {
  border-left:4px solid #f0b33c;
}
.pic-help-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.pic-help-grid>div {
  padding:12px;
  border-radius:12px;
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  border:1px solid var(--border-color);
}
.pic-help-grid b {
  display:block;
  color:var(--text-main);
  font-size:11px;
}
.pic-help-grid span {
  display:block;
  color:var(--text-muted);
  font-size:10px;
  margin-top:4px;
  line-height:1.45;
}
.luxury-health {
  position:relative;
  padding:18px;
  border-radius:18px;
  background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.9),transparent 28%),linear-gradient(145deg,#081d36,#173f68 65%,#2f75b5);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 30px rgba(8,29,54,.24);
}
.luxury-health .eyebrow, .luxury-health h3 {
  color:#fff;
}
.luxury-health .score-ring {
  width:178px;
  height:178px;
  background:conic-gradient(#f6c453 calc(var(--score)*1%),rgba(255,255,255,.16) 0);
  box-shadow:inset 0 0 0 13px rgba(255,255,255,.95),0 18px 35px rgba(0,0,0,.25);
}
.luxury-health .score-ring>div {
  width:116px;
  height:116px;
  background:#fff;
}
.luxury-health .score-ring b {
  color:#17365d;
}
.luxury-health .score-ring small {
  color:#64748b;
}
.luxury-health .health-meter {
  background:rgba(255,255,255,.18);
}
.luxury-health .health-meter span {
  background:linear-gradient(90deg,#f7c95d,#fff2b2);
  box-shadow:0 2px 9px rgba(247,201,93,.35);
}
.health-gems {
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-top:12px;
}
.health-gems span {
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-size:8px;
  font-weight:900;
}
.unit-3d-chart {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:7px 0;
}
.unit-3d-row {
  display:grid;
  grid-template-columns:145px 1fr 55px;
  gap:9px;
  align-items:center;
}
.unit-3d-name {
  font-size:10px;
  font-weight:900;
  color:var(--text-main);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.unit-3d-track {
  height:20px;
  background:var(--bg-track);
  border-radius:7px;
  transform:skewX(-12deg);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08);
  overflow:visible;
}
.unit-3d-fill {
  height:100%;
  border-radius:7px;
  background:linear-gradient(180deg,#43c7d4 0%,#1976b9 55%,#0c4776 100%);
  box-shadow:8px 5px 0 rgba(12,71,118,.13),0 5px 10px rgba(25,118,185,.18);
  position:relative;
}
.unit-3d-fill:after {
  content:"";
  position:absolute;
  right:-8px;
  top:3px;
  width:8px;
  height:100%;
  background:#0b416c;
  transform:skewY(35deg);
  border-radius:0 3px 3px 0;
}
.unit-3d-pct {
  font-size:10px;
  font-weight:950;
  text-align:right;
  color:#1976b9;
}
.donut3d-dynamic {
  width:205px;
  height:205px;
  border-radius:50%;
  margin:auto;
  position:relative;
  box-shadow:inset -16px -18px 0 rgba(0,0,0,.11),inset 13px 13px 0 rgba(255,255,255,.22),0 16px 28px rgba(8,41,74,.18);
}
.donut3d-dynamic:after {
  content:"";
  position:absolute;
  inset:48px;
  border-radius:50%;
  background:var(--bg-panel);
  box-shadow:inset 0 4px 12px rgba(8,41,74,.08);
}
.donut3d-dynamic .donut-center {
  position:absolute;
  z-index:3;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
}
.donut3d-dynamic .donut-center b {
  font-size:19px;
  color:var(--text-main);
}
.donut3d-dynamic .donut-center small {
  font-size:8px;
  color:var(--text-muted);
  font-weight:900;
}
.mix-color-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mix-color-item {
  display:grid;
  grid-template-columns:12px 1fr auto;
  gap:7px;
  align-items:center;
}
.mix-color-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.mix-color-item b {
  font-size:9px;
  color:var(--text-main);
}
.mix-color-item span {
  font-size:9px;
  color:var(--text-muted);
  font-weight:800;
}
@media(max-width:900px) {
  .pic-input-form {
    grid-template-columns:1fr;
  }
  .pic-target-metrics {
    grid-template-columns:repeat(2,1fr);
  }
  .pic-help-grid {
    grid-template-columns:1fr 1fr;
  }
  .pic-period-form {
    grid-template-columns:1fr 1fr!important;
  }
  .unit-3d-row {
    grid-template-columns:100px 1fr 45px;
  }
}
@media(max-width:600px) {
  .pic-input-hero {
    display:block;
  }
  .pic-target-head {
    display:block;
  }
  .pic-capaian {
    margin-top:10px;
  }
  .pic-target-metrics {
    grid-template-columns:1fr 1fr;
  }
  .pic-help-grid {
    grid-template-columns:1fr;
  }
}
.pic-task-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}
.pic-task-card {
  padding:15px;
  border-radius:17px;
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  border:1px solid var(--border-color);
  box-shadow:6px 7px 0 rgba(23,54,93,.03),0 10px 22px rgba(23,54,93,.06);
}
.pic-task-card.is-late {
  border-left:5px solid #b91c1c;
}
.pic-task-top {
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.pic-task-top h3 {
  font-size:15px;
  margin:3px 0 7px;
  color:var(--text-main);
}
.pic-task-grid-info {
  display:grid;
  gap:8px;
  margin:12px 0;
}
.pic-task-grid-info>div {
  padding:9px;
  border-radius:10px;
  background:var(--bg-highlight);
  border:1px solid var(--border-color);
}
.pic-task-grid-info span {
  display:block;
  font-size:8px;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:900;
}
.pic-task-grid-info b {
  display:block;
  font-size:10px;
  color:var(--text-main);
  margin-top:3px;
  line-height:1.45;
}
.pic-feedback-form {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:9px;
  padding:10px;
  border-radius:12px;
  background:var(--bg-highlight);
  border:1px solid var(--border-color);
}
.pic-feedback-form label {
  display:block;
  font-size:9px;
  font-weight:900;
  color:var(--text-main);
  margin-bottom:4px;
}
.pic-feedback-form select, .pic-feedback-form textarea {
  width:100%;
  border:1px solid var(--border-color);
  border-radius:9px;
  padding:9px;
  background:var(--bg-input);
  color:var(--text-main);
  font:inherit;
}
.pic-feedback-form textarea {
  min-height:70px;
}
.pic-feedback-form .full {
  grid-column:1/-1;
}
.pic-task-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  grid-column:1/-1;
}
.pic-readonly-status {
  padding:10px;
  border-radius:10px;
  background:var(--bg-highlight);
  color:var(--text-muted);
  font-size:10px;
}
.score-link {
  display:block;
  color:#fff;
  text-decoration:none;
}
.luxury-link {
  padding:9px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  transition:.15s;
}
.luxury-link:hover {
  background:rgba(255,255,255,.15);
  transform:translateY(-1px);
}
.luxury-link .score-link span, .luxury-link .score-link b {
  color:#fff;
}
.luxury-link small {
  display:block;
  color:#d6e7f6;
  font-size:8px;
  margin-top:2px;
}
@media(max-width:950px) {
  .pic-task-grid {
    grid-template-columns:1fr;
  }
}
@media(max-width:700px) {
  .pic-feedback-form {
    grid-template-columns:1fr;
  }
}
.parkir-hierarchy-panel {
  margin-top:16px;
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  border:1px solid var(--border-color);
  box-shadow:0 14px 32px rgba(20,55,90,.08);
}
.parkir-hierarchy-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.parkir-segment-card {
  border:1px solid var(--border-color);
  border-radius:16px;
  background:linear-gradient(145deg,var(--bg-panel),var(--bg-panel-soft));
  padding:14px;
  box-shadow:0 8px 18px rgba(20,55,90,.05);
}
.parkir-segment-head {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding-bottom:10px;
  border-bottom:2px solid var(--border-color);
  color:var(--text-main);
}
.parkir-segment-head b {
  font-size:14px;
}
.segment-number {
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--bg-highlight);
  margin-right:7px;
}
.segment-total {
  font-weight:900;
  color:#1976b9;
  white-space:nowrap;
}
.parkir-child-list {
  display:flex;
  flex-direction:column;
}
.parkir-child-row {
  display:grid;
  grid-template-columns:1.5fr .9fr .55fr;
  gap:8px;
  padding:9px 0;
  border-bottom:1px solid #edf2f7;
  font-size:11px;
  align-items:center;
}
.parkir-child-row:last-child {
  border-bottom:0;
}
.parkir-child-row span:nth-child(2) {
  text-align:right;
  font-weight:800;
  color:var(--text-main);
}
.parkir-child-row span:nth-child(3) {
  text-align:right;
  font-weight:900;
  color:#16803d;
}
@media(max-width:900px) {
  .parkir-hierarchy-grid {
    grid-template-columns:1fr;
  }
}
.nav-section-label {
  padding:16px 12px 6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sidebar-text-muted);
}
.nav-section-label:first-of-type {
  padding-top:6px;
  margin-top:6px;
  border-top:1px solid var(--sidebar-border);
}
.nav a {
  font-size:13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:root {
  --bg-body:#f4f6f9;
  --bg-panel:#ffffff;
  --bg-panel-soft:#f3f7fb;
  --bg-input:#ffffff;
  --bg-highlight:#eaf3ff;
  --bg-track:#e8edf3;
  --text-main:#172033;
  --text-muted:#6b7890;
  --border-color:#dfe6ee;
  --shadow-color:rgba(18,43,77,.08);
  --sidebar-bg:#ffffff;
  --sidebar-text:#33415c;
  --sidebar-text-muted:#8592a8;
  --sidebar-border:rgba(16,43,77,.09);
  --sidebar-shadow:0 0 0 1px rgba(16,43,77,.06),4px 0 24px rgba(16,43,77,.05);
  --nav-text:#3d4c68;
  --nav-hover:#eef3f9;
  --alert-ok-bg:#dcfce7;
  --alert-ok-text:#166534;
  --alert-err-bg:#fee2e2;
  --alert-err-text:#991b1b;
  --alert-warn-bg:#fff7df;
  --alert-warn-text:#795b0b;
  --alert-warn-border:#f1d68b;
  --chart-target:#17365d;
  --chart-realisasi:#2f75b5;
  --focus-ring:#2f75b5;
}
html.theme-dark {
  --bg-body:#0d1524;
  --bg-panel:#161f34;
  --bg-panel-soft:#1e2a44;
  --bg-input:#1b2740;
  --bg-highlight:#1c3358;
  --bg-track:#26314a;
  --text-main:#e9edf6;
  --text-muted:#93a0b8;
  --border-color:#2a3650;
  --shadow-color:rgba(0,0,0,.4);
  --sidebar-bg:#0a1428;
  --sidebar-text:#c7d3e8;
  --sidebar-text-muted:#7c8ba8;
  --sidebar-border:rgba(255,255,255,.08);
  --sidebar-shadow:1px 0 0 rgba(255,255,255,.05);
  --nav-text:#c7d3e8;
  --nav-hover:#16233f;
  --alert-ok-bg:#123123;
  --alert-ok-text:#4ade80;
  --alert-err-bg:#341717;
  --alert-err-text:#f87171;
  --alert-warn-bg:#382c11;
  --alert-warn-text:#facc65;
  --alert-warn-border:#5c481c;
  --chart-target:#6f9ac2;
  --chart-realisasi:#4a8fd1;
  --focus-ring:#5b9bd8;
}
.theme-toggle {
  border:0;
  background:var(--bg-panel);
  color:var(--text-main);
  width:38px;
  height:38px;
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  box-shadow:0 2px 12px var(--shadow-color);
}
.theme-icon-dark {
  display:none;
}
html.theme-dark .theme-icon-light {
  display:none;
}
html.theme-dark .theme-icon-dark {
  display:inline;
}