/* Token dasar dari OpenBridge 6.1 (Day); lapisan visual: gradasi pastel lembut. */
:root{
  --text:#1f2a44; --text-neutral:#5b6783; --divider:#dfe6f5; --border:#cdd8ee;
  --surface:#ffffffcc; --surface-solid:#ffffff; --glass-border:#ffffffb3;
  --amp-bg:#e6f0fd; --amp-border:#aecef8; --amp-text:#183a61; --amp-neutral:#285388;
  --bg:linear-gradient(135deg,#eaf2ff 0%,#f3eeff 42%,#fff1ea 100%);
  --blob1:#b7d2ff66; --blob2:#d9c8ff66; --blob3:#ffd9c266;
  --shadow:0 6px 20px -8px #4a6fb855; --shadow-lg:0 20px 50px -18px #3a4f8a66;
  --line:#b6c6e6;
  --g0:linear-gradient(135deg,#5f9cff 0%,#8a7dff 100%);
  --g1:linear-gradient(135deg,#e2eeff 0%,#cfe0ff 100%);
  --g2:linear-gradient(135deg,#dcf6ee 0%,#c8ecf2 100%);
  --g3:linear-gradient(135deg,#fff3d6 0%,#ffe0c8 100%);
  --g4:linear-gradient(135deg,#efe6ff 0%,#e0d4ff 100%);
  --a0:#6a8bff; --a1:#5b94f0; --a2:#3fb7a4; --a3:#f0a43c; --a4:#9a7ae6;
  --fill:#ffffff99;
}
:root[data-theme=night]{
  --text:#e8ecfa; --text-neutral:#a2accb; --divider:#2c3558; --border:#3a4670;
  --surface:#1c2342cc; --surface-solid:#1c2342; --glass-border:#ffffff1f;
  --amp-bg:#243a66; --amp-border:#3f65a8; --amp-text:#d6e6ff; --amp-neutral:#9cc0f5;
  --bg:linear-gradient(135deg,#0e1427 0%,#1a1538 50%,#2a1a30 100%);
  --blob1:#3b5bd433; --blob2:#7b4fd033; --blob3:#d0603a22;
  --shadow:0 6px 20px -8px #00000099; --shadow-lg:0 20px 50px -18px #000000cc;
  --line:#40508a;
  --g0:linear-gradient(135deg,#4a82e6 0%,#7a62e6 100%);
  --g1:linear-gradient(135deg,#25365f 0%,#1f2f58 100%);
  --g2:linear-gradient(135deg,#1c4048 0%,#1a3a4a 100%);
  --g3:linear-gradient(135deg,#4a3b24 0%,#47301f 100%);
  --g4:linear-gradient(135deg,#372b5c 0%,#2f2552 100%);
  --a0:#7f9bff; --a1:#6ea6ff; --a2:#52d1bb; --a3:#ffbb5c; --a4:#b79bff;
  --fill:#ffffff14;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{font-family:"Noto Sans",system-ui,sans-serif;font-size:16px;line-height:24px;color:var(--text);background:var(--bg);display:grid;grid-template-rows:56px auto 1fr;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(600px 400px at 10% 10%,var(--blob1),transparent 70%),radial-gradient(700px 500px at 90% 20%,var(--blob2),transparent 70%),radial-gradient(800px 500px at 60% 100%,var(--blob3),transparent 70%)}
body>*{position:relative;z-index:1}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.grow{flex:1}
button,input,textarea{font-family:inherit;color:inherit}

/* Topbar */
.topbar{display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--surface);backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border);z-index:30}
.appicon{color:var(--a0);margin-right:4px}
.brandTop{color:var(--text-neutral)}.brandTop b{color:var(--text);font-weight:700;margin-left:8px}
.ib{width:34px;height:34px;border:1px solid transparent;background:none;border-radius:5px;cursor:pointer;display:grid;place-items:center;color:var(--text-neutral);transition:background .15s}
.ib:hover{background:var(--amp-bg)}
.clock{font-weight:600;padding:4px 10px;font-variant-numeric:tabular-nums}
.combo{position:relative;margin-right:4px}
#comboBtn{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;background:var(--surface-solid);border:1px solid var(--border);border-radius:6px;cursor:pointer;min-width:250px;box-shadow:var(--shadow)}
#comboBtn .lbl{font-size:12px;line-height:12px;color:var(--text-neutral);text-transform:uppercase;letter-spacing:.06em}
#comboBtn b{font-weight:600;flex:1;text-align:left;font-size:14px}
#comboBtn svg{width:18px;height:18px}
.pop{position:absolute;right:0;top:44px;width:320px;background:var(--surface-solid);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);padding:8px;z-index:60}
.pop input{width:100%;height:38px;border:1px solid var(--border);background:var(--fill);border-radius:5px;padding:0 12px;font-size:14px;outline:0}
.pop input:focus{border-color:var(--a1);box-shadow:0 0 0 3px #5b94f033}
.pop ul{list-style:none;margin:6px 0 0;padding:0;max-height:min(60vh,420px);overflow:auto}
.pop li{padding:0 10px;height:38px;border-radius:5px;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.pop li:hover,.pop li.act{background:var(--g1);color:var(--amp-text)}
.pop li small{color:var(--text-neutral);font-size:12px}

/* KPI */
.main{display:flex;flex-direction:column;min-height:0;min-width:0;grid-row:2 / span 2}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:16px 20px 0}
.kpi{border:1px solid var(--glass-border);border-radius:8px;padding:12px 16px;text-align:left;cursor:pointer;background:var(--g1);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.kpi:nth-child(2){background:var(--g2)}.kpi:nth-child(3){background:var(--g3)}.kpi:nth-child(4){background:var(--g4)}.kpi:nth-child(5){background:linear-gradient(135deg,var(--fill),var(--fill));cursor:default}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi.on{box-shadow:0 0 0 2px var(--a1),var(--shadow-lg)}
.kpi p{margin:0;font-size:12px;line-height:16px;color:var(--text-neutral);display:flex;justify-content:space-between}
.kpi strong{display:block;font-size:22px;line-height:34px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi small{font-size:12px;color:var(--text-neutral);font-weight:600;margin-left:4px}
.kpi.info strong{font-size:14px;line-height:20px;margin-top:8px;font-weight:600}
.kpi p i{font-style:normal;font-size:12px;background:#ffffff99;border-radius:8px;padding:0 6px;color:var(--amp-neutral)}

.toolbar{height:46px;display:flex;align-items:center;gap:12px;padding:0 24px;flex:none}
.crumb{font-size:14px;color:var(--text-neutral);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb span{cursor:pointer}.crumb span:hover{color:var(--a1);text-decoration:underline}.crumb span:last-child{color:var(--text);font-weight:700;cursor:default;text-decoration:none}
.legend{display:flex;gap:14px;font-size:12px;color:var(--text-neutral)}
.legend span{display:flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;border-radius:50%}
.chart{flex:1;min-height:0;overflow:auto;padding:12px 28px 120px}
.empty{color:var(--text-neutral);padding:80px;text-align:center}

/* Org chart */
.tree{display:inline-block;min-width:100%;text-align:center}
.tree ul{display:flex;justify-content:center;gap:0;padding:26px 0 0;margin:0;list-style:none;position:relative}
.tree ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid var(--line);height:26px;opacity:.7}
.tree li{position:relative;padding:26px 7px 0;display:flex;flex-direction:column;align-items:center}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;width:50%;height:26px;border-top:2px solid var(--line);opacity:.7}
.tree li::before{right:50%}.tree li::after{left:50%;border-left:2px solid var(--line)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:26px}
.tree li:first-child::before,.tree li:last-child::after{border:0}
.tree li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
.tree li:first-child::after{border-radius:6px 0 0 0}
.tree>ul{padding-top:0}.tree>ul>li{padding-top:0}.tree>ul>li::before,.tree>ul>li::after{display:none}
.node{position:relative;width:176px;text-align:left;border:1px solid var(--glass-border);border-radius:8px;padding:10px 12px 12px;cursor:pointer;background:var(--bg-n);box-shadow:var(--shadow);overflow:hidden;transition:transform .18s,box-shadow .18s}
.node:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg)}
.node.sel{box-shadow:0 0 0 2px var(--acc),0 14px 34px -10px var(--acc)}
.node b{display:block;font-size:13px;line-height:18px;font-weight:700;color:var(--text)}
.node small{display:block;font-size:12px;line-height:16px;color:var(--text-neutral);font-variant-numeric:tabular-nums}
.node em{display:block;font-style:normal;font-size:12px;line-height:16px;margin-top:4px;color:var(--text-neutral)}
.node .meter{display:block;height:4px;border-radius:4px;margin-top:8px;background:#ffffff80;overflow:hidden}
.node .meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc),#ffffffb0);width:var(--w,0%);transition:width .4s}
.node .tag{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--a3);box-shadow:0 0 0 3px #f0a43c33}
.L0{--bg-n:var(--g0);--acc:var(--a0);width:230px}.L0 b,.L0 small,.L0 em{color:#fff}.L0 .meter{display:none}
.L1{--bg-n:var(--g1);--acc:var(--a1)}.L2{--bg-n:var(--g2);--acc:var(--a2)}.L3{--bg-n:var(--g3);--acc:var(--a3);width:150px}.L4{--bg-n:var(--g4);--acc:var(--a4);width:98px;padding:8px 10px;border-radius:8px}
.L4 b{font-size:12px;line-height:16px}

/* kartu detail melayang */
.detail{position:fixed;right:20px;bottom:20px;width:380px;max-height:calc(100vh - 176px);display:flex;flex-direction:column;background:var(--surface);backdrop-filter:blur(18px);border:1px solid var(--glass-border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:40;overflow:hidden}
.detail[hidden]{display:none}
.detail>header{display:flex;justify-content:space-between;gap:8px;padding:16px 16px 12px 20px;background:linear-gradient(135deg,#6a8bff22,#9a7ae622)}
.eyebrow{margin:0;font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.07em;color:var(--a1);font-weight:700}
.detail h2{margin:0;font-size:18px;line-height:24px;font-weight:700}.code{margin:0;font-size:12px;color:var(--text-neutral)}
.dbody{overflow:auto;padding:4px 20px 20px}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:8px 0 4px}
.stat{background:var(--fill);border:1px solid var(--glass-border);border-radius:6px;padding:8px 10px}
.stat p{margin:0;font-size:12px;line-height:14px;color:var(--text-neutral)}.stat strong{font-size:14px;line-height:22px;font-weight:600;font-variant-numeric:tabular-nums}
h3{margin:0;font-size:13px;font-weight:700}
.phead{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px;gap:6px;flex-wrap:wrap}.phead[hidden]{display:none}
.tabs{display:flex;gap:2px;background:var(--fill);border:1px solid var(--glass-border);border-radius:5px;padding:2px}
.tabs button{border:0;background:0;font-size:12px;line-height:16px;padding:3px 8px;border-radius:8px;cursor:pointer;color:var(--text-neutral)}
.tabs button.on{background:var(--surface-solid);color:var(--amp-text);font-weight:700;box-shadow:var(--shadow)}
.bars{height:120px;display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--border);padding-top:20px}
.bar{flex:1;background:linear-gradient(180deg,var(--a1),#9a7ae6aa);border-radius:4px 4px 0 0;position:relative;min-width:3px;opacity:.55}
.bar:hover,.bar.top{opacity:1}
.bar span{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:12px;line-height:14px;white-space:nowrap;display:none;background:var(--text);color:var(--surface-solid);padding:3px 7px;border-radius:6px;z-index:5}
.bar:hover span{display:block}
.barnote{font-size:12px;line-height:16px;color:var(--text-neutral);margin:6px 0 0}
.form{margin-top:18px;padding-top:14px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:10px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:16px;color:var(--text-neutral);font-weight:600}
.inp{position:relative;display:block}.inp input{width:100%}.inp i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--text-neutral);pointer-events:none}
.form input,.form textarea{border:1px solid var(--border);background:var(--surface-solid);border-radius:5px;padding:8px 10px;font-size:14px;line-height:20px;outline:0;color:var(--text);resize:vertical}
.inp input{padding-right:68px}
.form input:focus,.form textarea:focus{border-color:var(--a1);box-shadow:0 0 0 3px #5b94f033}
.calc{margin:0;font-size:12px;line-height:18px;color:var(--amp-neutral);font-weight:600;min-height:18px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--border);background:var(--surface-solid);border-radius:5px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text)}
.btn:hover{background:var(--amp-bg)}.btn.pri{background:var(--g0);color:#fff;border-color:transparent;box-shadow:var(--shadow)}.btn.pri:hover{filter:brightness(1.06)}
.hint{margin:0;font-size:12px;line-height:16px;color:var(--text-neutral)}.hint.ok{color:var(--a2);font-weight:600}

@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.detail{left:12px;right:12px;width:auto}#comboBtn{min-width:150px}.brandTop b{display:none}.legend{display:none}}

.logo{width:40px;height:40px;object-fit:contain;border-radius:5px;background:#fff;padding:2px;mix-blend-mode:multiply}
:root[data-theme=night] .logo{filter:invert(1);background:#000;mix-blend-mode:screen}
.brandTop{display:flex;flex-direction:column;line-height:1.15;margin-left:6px}
.brandTop h1{margin:0;font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.01em;background:linear-gradient(90deg,var(--a0),var(--a4));-webkit-background-clip:text;background-clip:text;color:transparent}
.brandTop span{font-size:12px;line-height:16px;color:var(--text-neutral);font-weight:600}
.srcBtn{border:1px solid var(--border);background:var(--surface-solid);border-radius:5px;height:32px;padding:0 12px;font-size:12px;font-weight:600;cursor:pointer;margin-right:4px}
.srcBtn:hover{background:var(--amp-bg)}
.sources{flex:none;padding:6px 24px;font-size:12px;line-height:16px;color:var(--text-neutral);background:var(--surface);backdrop-filter:blur(10px);border-top:1px solid var(--glass-border);display:flex;gap:6px 18px;flex-wrap:wrap}
.sources b{color:var(--text);font-weight:600}
.srcPop{position:fixed;top:60px;right:70px;width:420px;max-height:calc(100vh - 90px);overflow:auto;background:var(--surface-solid);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);padding:16px 18px;z-index:70;font-size:13px;line-height:20px}
.srcPop[hidden]{display:none}.srcPop h3{margin:0 0 8px;font-size:14px}.srcPop dl{margin:0 0 10px}.srcPop dt{font-weight:700;margin-top:8px}.srcPop dd{margin:0;color:var(--text-neutral)}
.srcPop .ok{color:var(--a2);font-weight:600}.srcPop .nb{font-size:12px;color:var(--text-neutral);border-top:1px dashed var(--border);padding-top:8px;margin-top:8px}
.srcline{margin:6px 0 0;font-size:12px;line-height:16px;color:var(--text-neutral)}
.req{font-weight:600;color:var(--a3);font-size:12px;margin-left:4px}
.main{grid-row:2 / span 2}

/* ===== v3: topbar lebih besar, panel bertab, komponen ringkas ===== */
body{grid-template-rows:68px auto 1fr}
.topbar{gap:10px;padding:0 20px}
.logo{width:46px;height:46px}
.brandTop h1{font-size:22px;line-height:28px}
.brandTop span{font-size:13px}
#comboBtn{height:42px;min-width:280px;padding:0 14px}
#comboBtn b{font-size:14px}
.srcBtn{height:40px;padding:0 16px;font-size:13px}
.ib{width:40px;height:40px}.ib svg{width:24px;height:24px}
.clock{font-size:16px;padding:4px 8px}
.kpis{grid-template-columns:repeat(6,minmax(0,1fr)) minmax(180px,1.3fr);gap:10px;padding:14px 20px 0}
.kpi{padding:9px 12px;border-radius:8px}.kpi:nth-child(n){background:var(--g1)}
.kpi:nth-child(2){background:var(--g2)}.kpi:nth-child(3){background:var(--g3)}.kpi:nth-child(4){background:var(--g4)}.kpi:nth-child(5){background:var(--g2)}.kpi:nth-child(6){background:var(--g3)}
.kpi.info{background:var(--fill);cursor:default}.kpi.info:hover{transform:none;box-shadow:var(--shadow)}
.kpi p{font-size:12px}.kpi strong{font-size:22px;line-height:28px}
.kpi.info strong{font-size:14px;line-height:20px;margin-top:2px;display:block}.kpi.info small{display:block;margin:0;font-size:12px}
.node{width:170px}.node b{font-size:13px}.node .val{font-weight:700;color:var(--text);font-size:13px;margin-top:1px}.node em{margin-top:2px}
.L0{width:230px}.L3{width:150px}.L4{width:92px}

.detail{width:460px;max-height:calc(100vh - 168px)}
.dtabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--divider);overflow-x:auto;flex:none;background:linear-gradient(135deg,#6a8bff12,#9a7ae60f)}
.dtabs button{border:0;background:0;padding:9px 11px;font-size:13px;line-height:18px;cursor:pointer;color:var(--text-neutral);border-bottom:2px solid transparent;white-space:nowrap;font-weight:600}
.dtabs button:hover{color:var(--text)}.dtabs button.on{color:var(--a1);border-bottom-color:var(--a1);font-weight:700}
.dbody{padding:12px 18px 18px}
.sec{margin:0 0 14px}.sec h4{margin:0 0 6px;font-size:13px;line-height:18px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--text)}
.sec .cnt{font-size:12px;font-weight:600;color:var(--text-neutral)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{background:var(--fill);border:1px solid var(--glass-border);border-radius:5px;padding:6px 9px}
.tile p{margin:0;font-size:12px;line-height:14px;color:var(--text-neutral)}.tile strong{font-size:14px;line-height:22px;font-weight:600;font-variant-numeric:tabular-nums}
.tile small{font-size:12px;color:var(--text-neutral);font-weight:600;margin-left:3px}
.srcline{margin:5px 0 0;font-size:12px;line-height:15px;color:var(--text-neutral)}
.note{margin:0 0 12px;font-size:12px;line-height:17px;color:var(--amp-text);background:var(--amp-bg);border:1px solid var(--amp-border);border-radius:5px;padding:7px 10px}
.muted{color:var(--text-neutral);font-size:13px}
.hb{display:flex;flex-direction:column;gap:4px}
.hbr{display:grid;grid-template-columns:minmax(96px,38%) 1fr auto;align-items:center;gap:8px;font-size:12px;line-height:16px}
.hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hbar{height:9px;border-radius:5px;background:var(--fill);overflow:hidden;border:1px solid var(--glass-border)}.hbar i{display:block;height:100%;border-radius:5px;opacity:.9}
.hv{font-variant-numeric:tabular-nums;font-weight:600;min-width:34px;text-align:right}
details{margin-top:6px}details>summary{cursor:pointer;font-size:12px;color:var(--a1);font-weight:600;list-style:none}details>summary::-webkit-details-marker{display:none}details>summary::before{content:"▸ ";}details[open]>summary::before{content:"▾ "}
.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{font-size:12px;line-height:16px;background:var(--fill);border:1px solid var(--glass-border);border-radius:6px;padding:2px 9px}.chip b{margin-left:5px;color:var(--a1);font-weight:700}
.grp{border:1px solid var(--glass-border);background:var(--fill);border-radius:6px;padding:8px 10px;margin:0 0 8px}
.grp>summary{display:flex;justify-content:space-between;color:var(--text);font-size:13px}.grp>summary::before{display:none}
.tb{width:100%;border-collapse:collapse;font-size:12px;line-height:16px;margin-top:6px}
.tb th{text-align:left;font-size:12px;color:var(--text-neutral);font-weight:600;padding:2px 4px}
.tb td{padding:3px 4px;border-top:1px solid var(--divider);vertical-align:middle}
.tb .nm{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.tb .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.tb .num small{margin-left:3px;color:var(--text-neutral);font-size:12px}.tb .yr{font-size:12px;color:var(--text-neutral)}
.spark{display:block}.spark path{fill:none;stroke:var(--a1);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.spark circle{fill:var(--a0)}
.scs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc{background:var(--fill);border:1px solid var(--glass-border);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.sc p{margin:0;font-size:12px;color:var(--text-neutral)}.sc strong{font-size:16px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums}.sc small{font-size:12px;color:var(--text-neutral);margin-left:3px;font-weight:600}
.sc .yy{font-size:12px;color:var(--text-neutral)}.sc .up{color:var(--a2);font-style:normal;font-weight:700}.sc .dn{color:#d9534f;font-style:normal;font-weight:700}.sc .rg{font-size:12px;color:var(--text-neutral)}
.lc .ar{fill:var(--a1);opacity:.14}.lc .ln{fill:none;stroke:var(--a1);stroke-width:2}.lc circle{fill:var(--a0)}.lc text{font-size:12px;fill:var(--text-neutral)}
.yy2{margin:2px 0 0;font-size:12px;font-weight:600}
@media(max-width:1250px){.kpis{grid-template-columns:repeat(3,1fr)}}

/* ===== skala huruf seragam: 12 / 13 / 14 / 16 / 18 / 22 px; berat 400 / 600 / 700 ===== */
:root{--fs-xs:12px;--fs-s:13px;--fs-m:14px;--fs-l:16px;--fs-xl:18px;--fs-2xl:22px}
body{font-size:var(--fs-m);line-height:20px}
.tile p,.kpi p,.sc p,.srcline,.hint,.crumb,.legend,.sources,.tb th,.cnt,.code,.eyebrow,.chip,.hbr,.tb,.note,.calc,.lc text,.tile small,.kpi small,.sc small,.sc .yy,.sc .rg{font-size:var(--fs-xs)}
.eyebrow{text-transform:none;letter-spacing:0;font-weight:700}
#comboBtn .lbl{text-transform:none;letter-spacing:0;font-size:var(--fs-xs)}
.tile strong,.sc strong{font-size:var(--fs-l)}
.kpi strong,.brandTop h1{font-size:var(--fs-2xl)}
.kpi.info strong,.detail h2{font-size:var(--fs-xl)}

/* teks sumber berjalan (running text) */
.sources{display:block;padding:0;height:34px;overflow:hidden;white-space:nowrap;position:relative;flex:none}
.sources .track{display:inline-flex;width:max-content;animation:run 70s linear infinite;will-change:transform}
.sources:hover .track{animation-play-state:paused}
.sources .seg{display:inline-flex;gap:0;align-items:center;height:34px;padding-right:48px}
.sources .seg span{display:inline-flex;align-items:center;gap:6px;padding:0 18px;position:relative}
.sources .seg span+span::before{content:"•";position:absolute;left:-3px;color:var(--a1)}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sources{overflow-x:auto}.sources .track{animation:none}.sources .seg[aria-hidden]{display:none}}
.dtabs{gap:0;padding:0 8px}.dtabs button{padding:10px 8px;font-size:var(--fs-s)}
.form{margin-top:0;border-top:0;padding-top:6px}

/* ===== v4: sudut lebih tegas (profesional) + lambang daerah di kartu ===== */
.detail>header .hd{display:flex;align-items:center;gap:12px;min-width:0}
.crest{width:52px;height:52px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px #0003)}
.crest[hidden]{display:none}
.detail{border-radius:10px}.node,.kpi{border-radius:8px}.logo{border-radius:6px}

/* ===== v5: panel detail jadi bar kanan (dapat ditutup) + peta ===== */
.detail{position:fixed;top:68px;right:0;bottom:0;left:auto;width:460px;max-height:none;border-radius:0;border:0;border-left:1px solid var(--divider);box-shadow:-10px 0 28px -16px #1f2a4488;background:var(--surface-solid);backdrop-filter:none;z-index:40}
body.has-detail .main{padding-right:460px}
.handle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:35;border:1px solid var(--border);border-right:0;background:var(--surface-solid);color:var(--a1);font-weight:700;font-size:var(--fs-s);padding:12px 10px;border-radius:8px 0 0 8px;cursor:pointer;box-shadow:var(--shadow);writing-mode:vertical-rl}
.handle:hover{background:var(--amp-bg)}.handle[hidden]{display:none}
.detail>header{padding:14px 12px 12px 18px;border-bottom:1px solid var(--divider)}
.mapwrap{margin:2px 0 16px}.mapwrap[hidden]{display:none}.mapwrap h3{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}.mapwrap h3 span{font-weight:400;color:var(--text-neutral);font-size:var(--fs-xs)}
#map{height:260px;border:1px solid var(--border);border-radius:6px;background:var(--fill);overflow:hidden;z-index:1}
.leaflet-container{font-family:inherit;font-size:var(--fs-xs)}
.mapmsg{position:absolute;left:8px;right:8px;bottom:8px;z-index:500;background:var(--surface-solid);border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:var(--fs-xs);line-height:16px}
@media(max-width:900px){body.has-detail .main{padding-right:0}.detail{width:100%}}
[hidden]{display:none !important}

/* ===== konten kartu rata tengah ===== */
.node,.kpi,.tile,.sc,.note,.srcline,.mapwrap h3,.sec h4,.chips,.yy2,.muted{text-align:center}
.kpi p,.sec h4{justify-content:center;gap:8px}
.kpi.info{text-align:center}
.node .tag{right:6px}
.sc{align-items:center}.sc .spark{margin:2px auto}
.chips{justify-content:center}
.srcline{text-align:center}
.mapwrap h3{justify-content:center}
.detail>header{position:relative;justify-content:center;padding:16px 44px 12px}
.detail>header .hd{flex-direction:column;text-align:center;gap:6px}
.detail>header #dClose{position:absolute;right:8px;top:8px}
.crest{width:60px;height:60px}
.eyebrow,.detail h2,.code{text-align:center}
.tb th,.tb .nm{text-align:left}.tb .num{text-align:right}
.hb .hl{text-align:left}
.form{text-align:left}.form .calc,.form .hint{text-align:center}

.logoLink{display:inline-flex;border-radius:6px;text-decoration:none;flex:none}
.logoLink:hover .logo{box-shadow:0 0 0 2px var(--amp-border)}.logoLink:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
.mapwrap{margin:0 0 16px}

/* aturan ikon svg global tidak boleh mengecilkan lapisan SVG Leaflet */
.leaflet-container svg{width:auto;height:auto;stroke-width:inherit;stroke-linecap:butt;stroke-linejoin:miter}
.leaflet-container .leaflet-overlay-pane svg{max-width:none;max-height:none}
.leaflet-container .leaflet-control-attribution svg{width:12px;height:8px}

/* ===== v6: kartu terpilih di kiri, legenda dihapus, grup pertanian terbuka, mobile ===== */
.kpis{grid-template-columns:minmax(190px,1.4fr) repeat(6,minmax(0,1fr))}
.kpi.info{text-align:left}.kpi.info p,.kpi.info strong,.kpi.info small{text-align:left;justify-content:flex-start}
.toolbar{height:40px}
.grp{border:1px solid var(--glass-border);background:var(--fill);border-radius:8px;padding:10px 12px;margin:0 0 10px}
.grp h4{margin:0 0 4px;font-size:var(--fs-s);font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-align:left}
.grp .srcline{text-align:left}
.tbwrap{overflow-x:auto}

/* ---------- tablet & mobile ---------- */
@media(max-width:1250px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi.info{grid-column:1/-1}}
@media(max-width:900px){
  body{grid-template-rows:60px auto 1fr}
  .topbar{padding:0 10px;gap:6px}
  .brandTop h1{font-size:var(--fs-l);line-height:20px}.brandTop span{display:none}
  .logo{width:40px;height:40px}
  #comboBtn{min-width:0;width:100%;height:40px;padding:0 10px}#comboBtn .lbl{display:none}
  .combo{flex:1;min-width:0;margin:0}.topbar .grow{display:none}
  .brandTop{flex:none}.clock{display:none}.srcBtn{padding:0 10px;height:40px}
  .ib{width:40px;height:40px}
  .pop{position:fixed;left:8px;right:8px;top:64px;width:auto}
  .srcPop{left:8px;right:8px;top:64px;width:auto;max-height:calc(100vh - 80px)}
  .kpis{display:flex;gap:8px;padding:10px 12px 0;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .kpi{flex:0 0 132px;scroll-snap-align:start}.kpi.info{flex:0 0 220px;grid-column:auto}
  .toolbar{padding:0 14px;height:36px}
  .chart{padding:8px 12px 140px;-webkit-overflow-scrolling:touch}
  .sources{height:30px}.sources .seg{height:30px}
  /* panel detail jadi bottom sheet */
  body.has-detail .main{padding-right:0}
  .detail{top:auto;left:0;right:0;bottom:0;width:100%;height:68vh;border-left:0;border-top:1px solid var(--divider);border-radius:14px 14px 0 0;box-shadow:0 -12px 30px -14px #1f2a4488}
  .detail>header{padding:12px 44px 8px}.crest{width:44px;height:44px}
  .dtabs{padding:0 6px}.dtabs button{padding:12px 10px}
  .dbody{padding:10px 12px 28px}
  #map{height:220px}
  .handle{top:auto;bottom:34px;transform:none;right:12px;writing-mode:horizontal-tb;border:1px solid var(--border);border-radius:20px;padding:10px 16px;box-shadow:var(--shadow-lg)}
  .btn,.dtabs button,.form input,.form textarea{min-height:40px}
  .btn{padding:8px 14px}
}
@media(max-width:560px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .scs{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .hbr{grid-template-columns:minmax(80px,40%) 1fr auto}
  .tb .nm{max-width:90px}
  .node{width:150px}.L0{width:190px}.L3{width:136px}.L4{width:84px}
  .brandTop h1{font-size:var(--fs-m)}
}
.kpi strong{white-space:nowrap}
.kpi.info strong{white-space:normal}
#comboBtn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ===== unduh PDF ===== */
.detail>header #dPdf{position:absolute;left:8px;top:8px}
#dPdf.busy{opacity:.5;cursor:progress}
#printRoot{display:none}
@media print{
  @page{size:A4;margin:14mm 12mm 16mm}
  html,body{height:auto !important;overflow:visible !important;background:#fff !important}
  body{display:block !important;color:#1f2a44;font-size:10.5pt;line-height:1.4}
  body::before{display:none !important}
  body>*:not(#printRoot){display:none !important}
  #printRoot{display:block !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-head{display:flex;align-items:center;gap:10px;border-bottom:2px solid #5b94f0;padding-bottom:8px;margin-bottom:12px}
  .rp-logo{width:42px;height:42px;object-fit:contain}
  .rp-brand{display:flex;flex-direction:column;flex:1}.rp-brand b{font-size:14pt;color:#3f5fd0}.rp-brand span{font-size:9pt;color:#5b6783}
  .rp-date{font-size:9pt;color:#5b6783}
  .rp-title{display:flex;align-items:center;gap:14px;margin:6px 0 12px;text-align:left}
  .rp-crest{width:62px;height:62px;object-fit:contain}
  .rp-title p{margin:0;font-size:9.5pt;color:#5b6783}.rp-title h1{margin:2px 0;font-size:22pt;line-height:1.15;color:#1f2a44}
  .rp-sec{margin:0 0 14px}.rp-sec>h2{font-size:13pt;margin:0 0 6px;padding:3px 8px;background:#e6f0fd;border-left:4px solid #5b94f0;color:#183a61;break-after:avoid}
  .rp-map{width:100%;height:auto;max-height:78mm;background:#f6f8fd;border:1px solid #cdd8ee}
  .sec,.grp,.sc,.tile{break-inside:avoid}.tb tr{break-inside:avoid}
  .tiles{grid-template-columns:repeat(4,1fr)}.scs{grid-template-columns:repeat(3,1fr)}
  .note,.tile,.sc,.grp,.chip,.hbar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details>summary{display:none}details{display:block}
  .rp-foot{margin-top:14px;padding-top:8px;border-top:1px solid #cdd8ee;font-size:8.5pt;color:#5b6783;text-align:left}
  .rp-foot h3{font-size:10pt;margin:0 0 3px;color:#1f2a44}.rp-foot ul{margin:0 0 6px;padding-left:16px}
  .srcline{font-size:8pt}
  a{color:inherit;text-decoration:none}
}

/* ===== mobile v2: topbar 2 baris, pohon wilayah vertikal ===== */
@media(max-width:900px){
  body{grid-template-rows:auto auto 1fr}
  .topbar{flex-wrap:wrap;padding:8px 10px;gap:8px;row-gap:8px}
  .brandTop{flex:1 1 auto;min-width:130px}.brandTop h1{font-size:var(--fs-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .combo{order:5;flex:1 1 calc(100% - 118px);min-width:0}
  .srcBtn{order:6;flex:none}
  .topbar .ib{order:4}
  #comboBtn .lbl{display:none}
  #comboBtn b{flex:1;min-width:0}
  .pop{top:112px}.srcPop{top:112px}
  /* pohon: kartu bersusun, tanpa garis konektor */
  .chart{overflow-x:hidden;padding:8px 12px 150px}
  .tree{display:block;width:100%;min-width:0}
  .tree ul{flex-wrap:wrap;gap:8px;padding:10px 0 0;justify-content:center}
  .tree ul ul::before,.tree li::before,.tree li::after{display:none}
  .tree li,.tree li:only-child{padding:0;flex:0 1 auto;max-width:100%}
  .tree>ul>li>ul,.tree ul ul{padding-top:10px}
  .node,.L0,.L3,.L4{width:calc(50vw - 18px);min-width:140px}
  .L0{width:100%;max-width:340px}
  .L4{width:calc(33vw - 14px);min-width:96px}
  .node:hover{transform:none}
  .kpis{scrollbar-width:none}.kpis::-webkit-scrollbar{display:none}
  .crumb{overflow-x:auto;white-space:nowrap}
  .toolbar{height:auto;min-height:32px;padding:4px 14px}
}
@media(max-width:560px){
  .node,.L3{width:calc(50vw - 18px)}
  .dtabs{overflow-x:auto;scrollbar-width:none}.dtabs button{white-space:nowrap;flex:none}
  .tbwrap{-webkit-overflow-scrolling:touch}
}
@supports(padding:max(0px)){@media(max-width:900px){.detail{padding-bottom:env(safe-area-inset-bottom)}.sources{padding-bottom:env(safe-area-inset-bottom)}}}