:root{
  color-scheme:dark;
  --bg0:#0A130E; --bg1:#0E1A12; --bg2:#12211A;
  --ink:#E9F0E7; --ink2:#AEBDA9; --muted:#7E8E80; --line:#2A382E; --line2:#3A4B3E;
  --accent:#3FB06F; --accent-soft:#173226; --accent-ink:#8FE0B0; --on-accent:#08150E;
  --gold:#E3C35A; --gold-soft:#3A3116;
  --surface:#16221B; --surface2:#1E2C23; --sunken:#0E1712;
  --t-kuat:#2FA968; --t-cukup:#8CC66A; --t-rawan:#E0B23C; --t-lemah:#D6543F;
  --t-kuat-soft:#173528; --t-cukup-soft:#243318; --t-rawan-soft:#3A2F12; --t-lemah-soft:#3A1C15;
  --sim:#C09BE0; --sim-soft:#2C2138;
  --map-base:#0B0E0C; --map-water:#12211C;
  --glass:rgba(17,28,21,.60); --glass2:rgba(23,35,27,.80); --glass-line:rgba(255,255,255,.10);
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);font:14px/1.55 "Public Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;
  background:radial-gradient(125% 95% at 22% 10%,#15281D 0%,var(--bg1) 46%,var(--bg0) 100%)}
h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;text-wrap:balance;margin:0}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
.num{font-family:"Archivo",system-ui,sans-serif;font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- stage & map ---------- */
#stage{position:fixed;inset:0;overflow:hidden}
#mapWrap{position:absolute;inset:0;display:grid;place-items:center;padding:14px;touch-action:none}
#map{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-logo{display:none!important}
.maplibregl-canvas{outline:none}
#map:active{cursor:grabbing}
#mapG{transition:transform .06s linear;will-change:transform;transform-box:view-box;transform-origin:0 0}
#map path{stroke:var(--bg0);stroke-width:.8;cursor:pointer;transition:filter .12s,opacity .12s}
#map path:hover{filter:brightness(1.18)}
#map path.sel{stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;filter:brightness(1.12)}
#mapG path[data-c]{transition:opacity .55s cubic-bezier(.4,0,.2,1);stroke:rgba(255,255,255,.16);stroke-width:.6;vector-effect:non-scaling-stroke;cursor:pointer}
#mapG path[data-c]:hover{stroke:rgba(143,224,176,.75);stroke-width:1}
#mapG path[data-c].sel{stroke:var(--accent);stroke-width:1.3}
#mapG.focus path[data-c]:not(.sel){opacity:.1}
#kecG{animation:kecFade .55s cubic-bezier(.4,0,.2,1) both}
#kecG.out{animation:none;opacity:0;transition:opacity .35s ease}
@keyframes kecFade{from{opacity:0}to{opacity:1}}
#map path.ul{fill:var(--map-base);stroke:var(--map-base);stroke-width:11;stroke-linejoin:round;pointer-events:none}
#map .water{fill:var(--map-water);pointer-events:none}
#map path.kec{stroke:rgba(255,255,255,.42);stroke-width:.7;vector-effect:non-scaling-stroke;cursor:pointer;transition:filter .12s}
#map path.kec:hover{filter:brightness(1.3)}
#kecG path.kec{transition:opacity .55s cubic-bezier(.4,0,.2,1),filter .12s}
#kecG.kfocus path.kec:not(.ksel){opacity:.12}
#map path.kelbase{stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
#map path.kel{fill-opacity:1;stroke:rgba(255,255,255,.5);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;transition:filter .12s}
#map path.kel:hover{filter:brightness(1.28)}
#kelG path{transition:opacity .55s cubic-bezier(.4,0,.2,1),filter .12s}
#kelG.kfocus path:not(.ksel){opacity:.12}
#kelG path.kel.ksel{stroke:#fff!important;stroke-width:2.4}
#map g.rw circle{fill:var(--gold);stroke:#0b140f;stroke-width:1.3;vector-effect:non-scaling-stroke;cursor:pointer;transition:filter .12s,opacity .4s ease}
#map g.rw text{fill:#0b140f;font-family:"Archivo",sans-serif;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:opacity .4s ease}
#map g.rw:hover circle{filter:brightness(1.18)}
#rwG g.rw{transition:opacity .4s ease}
#rwG.rwfocus g.rw:not(.rwsel){opacity:.14}
#rwG g.rw.rwsel circle{stroke:#fff;stroke-width:3}
#rwG{animation:kecFade .55s cubic-bezier(.4,0,.2,1) both}
#rwG.out{animation:none;opacity:0;transition:opacity .35s ease}
#map g.rt circle{stroke:#0b140f;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:filter .12s,opacity .4s ease}
#map g.rt text{fill:#0b140f;font-family:"Archivo",sans-serif;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:opacity .4s ease}
#map g.rt:hover circle{filter:brightness(1.2)}
#rtG g.rt{transition:opacity .4s ease}
#rtG.rtfocus g.rt:not(.rtsel){opacity:.14}
#rtG g.rt.rtsel circle{stroke:#fff;stroke-width:2.4}
#rtG{animation:kecFade .55s cubic-bezier(.4,0,.2,1) both}
#rtG.out{animation:none;opacity:0;transition:opacity .35s ease}
#kelG{animation:kecFade .55s cubic-bezier(.4,0,.2,1) both}
#kelG.out{animation:none;opacity:0;transition:opacity .35s ease}
.crumbs{position:fixed;top:64px;left:16px;z-index:21;padding:7px 14px;display:flex;align-items:center;gap:8px;font-size:12px;max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.crumbs[hidden]{display:none}
.crumbs button{color:var(--ink2);font-weight:600;white-space:nowrap}
.crumbs button:hover{color:var(--accent-ink)}
.crumbs button.cur{color:var(--ink);font-weight:700;cursor:default}
.crumbs .sep{color:var(--muted);flex:none}
.kec-badge{position:fixed;top:64px;left:16px;z-index:21;padding:7px 13px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--sim)}
.kec-badge[hidden]{display:none}
.kec-badge b{color:var(--ink);font-family:"Archivo";font-weight:700}
.kec-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--sim);display:inline-block;flex:none}

/* ---------- glass floating ---------- */
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);border-radius:var(--radius);box-shadow:var(--shadow)}
.f-brand{position:fixed;top:16px;left:16px;z-index:20;display:flex;align-items:center;gap:11px;padding:9px 16px 9px 10px}
.mark{width:42px;height:42px;border-radius:50%;flex:none;background:#080c08 center/cover no-repeat;background-image:url("data:image/webp;base64,UklGRpoVAABXRUJQVlA4II4VAADwQQCdASqAAIAAPlEgjEQjoiEYfS7sOAUEswBmKvntn0gzK+w3KP7Lyi9IsZL5zw4/6v1Q+K90sfMz5y3pA/uPo7dSl6IHnNf+v2cP7/v/94b48PcXtR6v+I/qa/y/756h/y77tfrPLP/nf3zxL+IH+D6gv5T/Q/8x+Znod7IPaf9p6AXtb9X/2H+E/I74yvkvMf7E/8z3AP6D/Sv9D+a3+A+g/9r4GHk30gfYB/Pf7L/u/7//g/+j/jvkb/8P8z59Ppb/wf6D4Cv5t/ZP+F/g/bF///ua/bf//+7z+3btIxlFGYXX//llqEMnuX8EfBha4dISjRrYk/i2XozSeydyWx+Juf60G0VQg6+gySE0GB/rJ4jJOWJFRuq4a4U/bCtJ1j/UMfHKZUA8r9CFG/vkIXoMTsuPCDnyjbAPw4R6yzyQ8FKg9g1qbUcLfNj2msRHtcgFcsLDhOtL46HffY5yuECT8GRjH18JX+9tRHqvrcS9DSWu/OJ/U75C13Ff69sw5HopDPITQh57vhfNUTQAXkrn9deG4O/0u9/iln2LX9rdrcla0oOB4vk5UO3DcvlWIA2d4Y338xjg4an6UCm31JsGWrnoxJw01di2YT4zIEMjnqFMnTFSkp8PxS1aaHk3pWMNvqv2cVmzdfBEfaFMvpGr4MMIasr6AcAuSVcVAGY3t1jF5QXX514Pp1yr+JXH//wP/5XGIAD+/w1lPqL5GVDM8x3Zh6TVBb68fX44cMFcxc2R+jYFWNGXsxY76+M9Kt9QbHvcsqMlTU4dpP0gnu0tmeM+pWnnBIbof8yQ2yz5LjXARKFEZzgD+ckylq6f+GnyeVXwIEmyI9q5d9M9WUX5UVN/BdoVO+isSwxYs0itB6Ndx+e37/+VVQFLXNML+nex3n5YrBDw1h6dZXMcVUT+yojwYVUU0fL/5HLSe6zenGoINJNNRwjycixkTOMHPG5GSWvmrP5R7MNJnqRKn5KVMi3YJxS7w8XXfCfk3VPfO4iyM4FFwguMh0ZxBjgy1U59n3hn2xeqzY3nKn3fGxjuypR5pr6PR8bhBpz9bdAznsJpZ0xvYV+KZJZwz3pO7vfnG1JAoQjF0fjJPKWOI/xx9sKLfw52bYtMPk07j7xntGTB7ttaTc3dxpD2VNSqct5h07pQTpAAoLr8gx4YAWZm8Q+StP396xv38INR+SU/qm11D15XVPpawcukW+4TsecY0YHSpzy/ULR9k0lotu8xuArYJeVV1uZd57/adXRp1O0wSMWmob0tVJBSu3xXy0ebflLRVe5bxXAXnfA08ytt14L6IbUGR++BgrAnqCyiXX0hRraUHrUGBn8Ajj52j3xAY5GtP4F4OVCpF4aWL8S3fgh2h9gAO7DHfc7U7hpH+fTKIbnvAaFsjEeJ8Gmjima+S++PetOksEzCaNSdQIHHCdEj/Y2yapg83rkEJYnEk55oEOYFWl9Hr/DmXP1cHbyDlTl5NMzZuNit/8Qkxu9CkTlAryOzGvKPTg6vW+AaIJXVSjsg/AVAiIYkcEnC+/ZCeQ5xkQ7WzlRFFMnf1vqB1ZKIpRMDE3zz8roJhoivOTfLoiAmBFJwNsz4L5+N5KLCbAUX6qoyDP+nrS0XbybchKnlyGKidl4Dnk+Ea185zX5Sbu7zRwOC5b2VW/UdF2RNLUh9VD6BxMduBzvQoVPLrE1LW3K1KkVKYU0u2cuXmZ7d4RdusXO9//dyVSry98nIlnk/rZJ+0Q1ekuWfTa6ZPyUEvtQy+DTqV5eYyhf8dYdmrkSV1m9YvsshxOzzxGox8m2HgaNxtsvxE9Wkxr0EHOCQUxcYbrAJv0/ei6BCOQNy689uFtjg2fFCS7SZ3WN4TFoKe1pQ/Xcs39lYI2i12I6nDiYnaQp5Qh1wLypuT/Wr8itetg5yGkvAqJ3GzArT1thKE6qjS4MuUlYzwAgfqah2mvnNM3OEwD3J6VHtytacVhbfJnrkvwMvLbH36NX+/F4PhT2jZmIEZJfXEWMF3FFGhqB9GVZBFgfbG4zMMr78131m4UVLi8e2KZkHvjNN7o2hyxHyyunyrZl3uYCnmwGqHs5sNcMPJ6K7PNc45Mq78k1EQNiHD8veg5I5DooD1So9AXv/ISStv4VzuWi+4QxGE76vk0Kb2DM8LyK8NvXVNy9v5aZiBeVipM+Y4I1HFNInah2nedUE7OAArf0lzz3aher+EPh9D1Me62PkqT42raDcMRkYEZi9WBNzABpP94IPgw7VeleawwzuXb52+KoIy1qxXpOIpE70OhMAd4sc0TQoGagX6Zd3ceMA2uAYuFrWYi/kTcoXQLgf4YBnIKckUjD8SibLfRVTIEYa38qT3V5emcYNpS9jM55VzL8S/ms06Y5Je1m/JnmRzB97bpNewoOd3rL4VmGh18YX1S8enOvIrATO1BOTaLfQE+PlG/XBsHPbngvFkQftsLOH45j9Ynrh9iQRWFQLvMYw3YBYPBsMciHh6D+8iWfuNuGKS8gAjjnIU468+uNvz05wA2hRBWS1YT5XPPjLdzjfDfCFusppzm0ccO0cLQKATm7gBKbCgOzP12vkcWfrIBsCPfmr9qvS5tved2nG8xraA9Qt+dxCn7x5TByv7Q8UaxDvXyxvxsaz86sS5+wm4JpbUUwee8mEke48CiZ6bNHsigG7T7Bg41391DJoFbYPFo6s6VIBaAk1yNB2pJl62+6rpepB9udrZdCMHmsDZY+ChRfZ0qJOKMJx5A6J94r/48huwMAChQa7wJFWHQ7mMcsXd4ObhDiRP0d9TxCAqmNUvrq2hbBvniicrQHk1l/XJ9cfl/WRZ4Y2/geokbV784HAnTChGFwwcGUMYfvCl+C3hq65wzGyjA48YPE4WvYC80faKFFrsLCd3VUcwKsZg2qzGht2X/cF7BlaMQMc7UxeLOpOauOhLRa4xqZZmv6k8Se/1ChgHy2sTq7+nTIAyrJZaLVhlcuyNgBLhiS57DED27ok6UpaSDaLJCn/+TkLJfiRPcAxporBz3yyQtuwrxOfWaLDqLFcjhvvTjszJuNJYFxWJ9eOtOMEegrOPGul4IVhLAIhtqHy6IzBxOxtY+z4SBxek8XY7PonM52p99g3be7+RNPVfCC5uDz+CPxV74Yca4D+C7kT3IES0kDZYNLrnlTNuudsy83sDC8NY/kpAalRdkcdAGbs80wnL1fOS5t+EwRiQU1OogK/fs6MKeJcELKXI4dAVuQ+61OS/o7Pj/CHWyChLcn/sLzihNEDAwYgPtnqb+CA6PQ/stF4/pOk6N5GNeHnLiM5DiTJbVChG2LsmDsGPRDQVlKHE3tTC8uqw77FlumpxGljsAvkvzmYbDRaeklJQrwcxLS+8zcaOFXS3RN41nEYviogzIfgsP1fM7XrCi9JA78epMWpN8T1Rj2tSX/uVqMivqnwxhr6IJz5TIaA/89QHAUAVJcmJ3mtcYBoqsUAvMPVpWz1O544A127Q/KRUA6wNZegjGD7xr0b4Kd4F+mlcr2udCQaSIlZ0JNPJuHNxzHe6FnPhQOAmDvKK+DmZiPSbARjQNqeZlxF8FWRkZ9AoVK3r49x/rUUBjwy0KXHviuP2vtQ8qta6odJkGFTbJBIb0yBMcz3DwtPKj/MuHT9yrJsazVQweo+mUf4oOkbAbHASI7NaLlUP/hTWPj5TaXQfWqzcVgMugYjoJ4G8LMUrmEt/z9PFHulNyg1TUKApYkUAYwuUI7vsgSzedbfMuIOOyH9B7Iz0gu6wcpToUuUu64WZCGnkecIslX9HYNowFFoAdgfg7VyYFgfYziN+WQSFs32q0Xl9m086jTFw1APCJocTpp03tgg4vaoJoK1T2tlRPZ+JE9fX5NoFXCd3aNTqaY2m1FZkzGFexH1Bf9UUz36wIQiqnqSkRNWKwHVfLkSiHjChHzmxAIupzMDIN+V8KbgmcqcndEJdFMgbaalGl5Xo7y25YRQT0pIlnC2pLxT2Pqy6z0zskFm1gUHA6Uapj4k1GeWpaIex230bAT6Iltw7CFpsbLL3x6nRTexnCcUyarTi4FNcX70/6H9/P/q1or2k/96expGjQMgKpQ2IoKcWQ64O8Wu+3vl4vjXob5kcPL/hmnLsP8zsXlVo+DO7bYt1lCBK7jXJj4IFpXhXLZtrRhemXmcF78El+kKaWr1qd6/DN4wgPr9SzjArMHDk0xrX0Ad7eWK2zRcp5Sgq9HxVv/NMPkoidm4huBp122YcM/fDn8h45Tyder/A5r9gnf5Fa3Ymnj51mqt4iVFBv4F4TaxnWn8yptsdOxGRWkOWyjFVMFFGBXDEiZ1FyDf4AH4bGiU3SbQoL5miFrUyHk5ZfvuQdPfYiFTjUCoizuRl5ktkl4HovUaW3t71H7qR4m+oMjWt+gRpLqin8LlPEq8FCqG/oYT+2Dge19o4gkRxjxk937jDe38aqoaFnPAuQSDHnLd0K3MCX7D/VcCDzBdEuA85teP4Rt/GZjUH8nB/NpxzHtlE3Gy1207RaCFA5v1OkEEukn7yyNq8W4jiFWZqZvV/qchwQkbSTpVg2PrYdbAse1uqxRgB6OaKRQ1XJ9DsLkTs279LCz8rMJPfn2RWB1HAHlXEwx3veSB2uOyq/H7H0xKPJv+w2VH+Qvg6rPOw9UNVPtgi6PdOsIp0UZY2h8n6hnNU1ZOi2jxMZmGyQUG01GeI+sFWEx8EX+LJQlsZmBMRrjJhHtFP5SHoKK96YfrLGhseQbS1q/UIlh1gV4pEXB1p009dxMrc1FjsoyTguVH4nKLd4yWclaA7qL6WOWQkK75UvwtrUW+Hx6wJ5xgw+anccXLsUA904YqFme0iJvCtfE/ucpobdvNap7wnss0M2l56RewFAeS3iUeB2MpwPq9xv7vuUa887zYm3pQiTbzsM9jWpK1vcWabmrqwuzmJdBSvHvwQuRdThsUqp+5Sb3FJ44tHZ1A/H/O8p4uA1SzMLTgvPy4qaXsZn2D6E2nb0gDL4QPaAffHQlQdkBXnzSmiziAW72uoI3j6iMFFAkJVelDhC+iO9mAbk0ys/ogtTFjVk2lR/3n/jKSmz+K3XCa3gMi+7cvkknk4wK29E4iLmqbmuc3fylV/C2QsatRIQtunBn3jnkEroRJHmfl416SbtVxhVVLquhmtRqAOJ77xToamoWDPPsjd0iTcuHz//GHmzX8GMovpaluqsyosw6ZjS5wJQVfppAYuTEmS/LMRdCpfs0cKo1Y6eWPsEf5rxRNgMJPPUbYsUl5eRpWTVYLFEk2ZTfbTwjw7QPwnNgXzaPXLa0zUZqmxJ3pPYHebd61U8nc1GiBH1LY4M4AZuUtR7cm0BIRELHcTHgedeG1EJMXnFT+0Eq5fcdG4G4TiIWzVRVe93HFqBu25vSC0G5xd0y/rBPU5bDx4eTC5dqKSE/wiejkET7rd1JOrqlHz1KrjnUOAcm3b9+Zgh+glKghe12GN+y4w2S6492F/nZZNcXyB1SeCtZhuP2Wd3F8+1tvxB7GDOuSj6zCjnf7KKYl0f+B6QYX0q40039OaMPDq0tOd/6B1CdibzBRYGKVSSq7Zkp+SVImGH9GS1LFjUfexDD3RGkfoiXEd38eS9trM3IMcxqzh2rrzgeKi8bZZKQSXf3Z6bsdokQ4OHpvk3/En4ky3i/4ZkMEUUQor9nWgqrVhMzTepL0D/ZQCgp+TtxDnTCu28+ZjCoKTD3g0jHUii8uOaShDYBagoRYYdJq1+4jjpRUIN8sVP7pyFFbjlfs8hukx6YPB72gKEsfe4h2G9a57rttI8WxVnjcEDqiSM4PaY/erHYiUehibFX6cPmmMdczlbz0dpJBG5YW8KZktPT+ZUh9qPFCD55TViZ4hx9Xyc6GhyjK5ozkTQOfXshxbf/v+ovQFtl0Esu2UqOSh7aePWaIO2AlaBUAXp93QIcYq0TCJAVZGi1SQTv5FLBWr3gUg4g2b07/FW+OabvmdrDa/Yy/XLO5C9SbGzJZkN6q3qcATvXAQJYdDA5f7C5aJA+FWQXKjKBY1YPyJ1j9zCTod6wsgqrp2QOZCZ2/fEreapAXzriVbp2f57+vhb4IUajGGtIltUEa+mk7tupv140xL/Uku4v/jqC2ukJJgyBYkP5TgXyajQtN77B+ptxbDPyl4Dpa08t2yjFS3cVdyW+z5QM0i5f8VYRRyD7QlGBJrqYP3akgnIUOVgGVCAHfMC9T5+yAbGmmSfEpu0wMNQxODUHXA2BFWXmK3CvjC6Xx7BCjKhUdudxhWleCcw/TJyHLuiLzWIkkjE4wxea2J1+UuDcUv6Cj08I+y+vbZwxvK7UnMB2VF6XX1PRf5zn5Ft+rkRZ9Ok7B0pxDepWCpoPTYnUsXokdhBvn794Xrx9Py/lqW7BtzOAxphcPgJapS/f7hmuFU2dbWcHt27LLHstw8A4AM43LgrncCYljp3udkkWmZYzgNDOI2po/IYO+Nr8qZEcMcYZobkQFHIG04E/y9Yo2Cexd8Za3wXg5eylvMr1AxY1H8BzoQNO/Mw4+oAHdeny2Q9sgPthWSSPxdWgSATBOBar9t8K2L2BaPDzpZDB1uNxrOrC+rMtSyPtDHeB8BFASZJz5LTf/e49vHJOcIOZBe5864Ric92KdEaQKkMWnTt9SxwTDKauWrfB6oycq3KP4FwQ75FpmFCBOswXym4QHQ7F77eeVq1P7SPbCOWsw2HThsv3CpVQjLUlIwV3CdwvmtuiUcyk2MUY08QHwaP40BbdfGBsiBeo/FmITQCnnI54wtj8Vx3qai/+iGa7aGfqjXnzvy2I5X4oYTKB8aJObOhOkwYvxhpc5wbaLkmqXo2oPy0RtVoEfbMQh/qvSsJLnCb+zaJwoRpBi7teaHpatNZr2AjnyCee9qQ0IcweyjuLNP0JxWGyq4emLXShAIjc2ff84JPhHBvb0ctDmUR6TbPA56mJZVtXfa7cYcZ6OxoXvcq16ioqo/Er5hPBXPTPePBLfXh60ZcSvRN3gTUwNwav8X7aFg1lYmhQGG4v1OeJNh0xE8NAawmaHbkVB+Pcg0s3TnoW61E2pUB+0B2+qyHe2cRKbdqhw7sJw/hRcynHKebAibLyP4pyA8gOr2xFhhjMJY0cZcTZccjLkHFfALQm8zQ1PHipxnYHuKmD21L9fJeBlVVAOTbAvZDEb1Ztlo63J27njSfkVYRF5JNDUc8xRKM5ppIgQh6yo5xQ/kewUHMBilgdxsGZWEh+ZpgKOZGklmwoB7uwqsZuq4pBH++mNvUx8Kc8H3gDrsPK7B/aBQaIy8GKAXgOCsZu9W96kSaZmqLAcel5XU8qagUbcCNM/UDWBWNXaBVhipBqgbCAgAAAA");box-shadow:0 0 0 1px rgba(255,255,255,.10),0 2px 8px rgba(0,0,0,.4)}
.f-brand h1{font-size:16.5px;font-weight:800;letter-spacing:.3px;line-height:1;display:flex;align-items:center;gap:8px}
.f-brand .sub{font-size:11px;color:var(--ink2);margin-top:3px}
.badge-proto{font-family:"Archivo";font-size:9px;font-weight:700;letter-spacing:1.1px;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 8px}

.f-layers{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:3px;padding:5px 6px;max-width:calc(100vw - 32px);overflow-x:auto}
.f-layers .lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:0 8px 0 6px;white-space:nowrap}
.layer-btn{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:11px;color:var(--ink2);white-space:nowrap;transition:.12s}
.layer-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.layer-btn.on{background:var(--accent);color:var(--on-accent)}

.f-nav{position:fixed;top:16px;right:16px;z-index:20;display:flex;align-items:center;gap:5px;padding:5px 6px}
.f-nav button{font-size:12.5px;font-weight:600;color:var(--ink2);padding:7px 12px;border-radius:11px;white-space:nowrap;transition:.12s;display:flex;align-items:center}
.f-nav button:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.f-nav .fsbtn{padding:7px 10px}
.f-nav .fsbtn svg{display:block}

.f-legend{position:fixed;left:16px;bottom:16px;z-index:20;padding:11px 15px;max-width:min(440px,48vw)}
.legend{display:flex;gap:14px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.map-note{font-size:11px;color:var(--muted);margin-top:7px}

/* ---------- floating side (summary / profile) ---------- */
.f-side{position:fixed;top:74px;right:16px;bottom:78px;width:362px;max-width:calc(100vw - 32px);z-index:19;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;padding:1px;scrollbar-width:thin;transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.f-side > *{pointer-events:auto}   /* wadah pass-through: area kosong panel tak blokir gesture peta; kartu tetap interaktif */

/* ---------- zoom controls ---------- */
.f-zoom{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:2px;padding:5px 6px}
.f-zoom button{width:34px;height:34px;border-radius:10px;color:var(--ink2);font-size:20px;font-weight:600;display:grid;place-items:center;transition:.12s;line-height:1}
.f-zoom button:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.f-zoom .zpct{font-size:11.5px;color:var(--muted);min-width:46px;text-align:center;font-variant-numeric:tabular-nums;font-family:"Archivo"}
.f-nav .sidetgl.on{color:var(--accent-ink)}

/* dim floating overlays while panning/zooming so the map reads clearly */
.f-brand,.f-layers,.f-nav,.f-legend,.f-zoom{transition:opacity .22s ease}
#stage.panning .f-brand,#stage.panning .f-layers,#stage.panning .f-nav,#stage.panning .f-legend,#stage.panning .f-zoom,#stage.panning .f-side{opacity:.08;pointer-events:none}

/* hide/show the info side panel */
#stage.side-hidden .f-side{opacity:0;transform:translateX(18px);pointer-events:none}
#stage.side-hidden .f-side *{pointer-events:none!important}   /* saat tersembunyi: kartu (anak) juga tak boleh menangkap gesture */

/* ---------- tooltip ---------- */
#tip{position:fixed;pointer-events:none;background:var(--glass2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-line);border-radius:11px;box-shadow:var(--shadow);padding:9px 12px;font-size:12.5px;z-index:60;max-width:250px}
#tip .t-name{font-family:"Archivo";font-weight:700;font-size:13.5px;margin-bottom:3px}
#tip .t-row{display:flex;justify-content:space-between;gap:16px;color:var(--ink2)}

/* ---------- sheet overlay (secondary views) ---------- */
#sheet{position:fixed;inset:0;z-index:40;overflow-y:auto;background:rgba(6,11,8,.62);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);padding:22px 20px 44px}
#sheet[hidden]{display:none}
.sheet-inner{max-width:1080px;margin:0 auto;position:relative}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sheet-title{font-family:"Archivo";font-size:19px;font-weight:800}
.sheet-close{margin-left:auto;width:38px;height:38px;border-radius:11px;font-size:16px;color:var(--ink);display:grid;place-items:center;flex:none}
.sheet-close:hover{background:rgba(255,255,255,.10)}
.view{display:none}.view.on{display:block}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ---------- responsive ---------- */
@media (max-width:820px){
  #mapWrap{align-items:start;padding-top:152px}
  .f-nav{top:10px;left:10px;right:10px;justify-content:flex-start;overflow-x:auto}
  .f-brand{display:none!important}   /* brand/logo hanya tampil di desktop — hemat ruang, hindari tumpang tindih */
  .f-burger{top:16px!important}      /* mobile: menu (burger) di atas… */
  .f-lap{top:82px!important}         /* …lalu Lapisan di bawahnya */
  .f-layers{top:104px;left:10px;right:10px;transform:none;justify-content:flex-start}
  .f-side{top:auto;left:10px;right:10px;bottom:64px;width:auto;max-height:42vh}   /* sisakan strip bawah utk zoom/tools/legenda */
  .f-legend{display:none}
  .kec-badge{top:150px;left:10px}
  .crumbs{top:150px;left:10px}
}

/* ---------- panels & cards ---------- */
.panel{background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.panel + .panel{margin-top:14px}
.panel h3{font-size:15px;font-weight:700;margin-bottom:10px}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--surface2);border-radius:10px;padding:10px 12px}
.stat .v{font-family:"Archivo";font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.15}
.stat .l{font-size:11.5px;color:var(--ink2);margin-top:2px}
.stat .d{font-size:11px;font-weight:600;margin-top:3px}
.up{color:var(--t-kuat)}.down{color:var(--t-lemah)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.chip.kuat{background:var(--t-kuat-soft);color:var(--t-kuat)}.chip.kuat i{background:var(--t-kuat)}
.chip.cukup{background:var(--t-cukup-soft);color:var(--t-cukup)}.chip.cukup i{background:var(--t-cukup)}
.chip.rawan{background:var(--t-rawan-soft);color:var(--t-rawan)}.chip.rawan i{background:var(--t-rawan)}
.chip.lemah{background:var(--t-lemah-soft);color:var(--t-lemah)}.chip.lemah i{background:var(--t-lemah)}
:root[data-theme="dark"] .chip.kuat,:root[data-theme="dark"] .chip.cukup{color:var(--ink)}
.sim-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--sim);background:var(--sim-soft);border:1px dashed var(--sim);border-radius:6px;padding:1px 7px;vertical-align:1px}
.dist{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.prio{list-style:none;margin:6px 0 0;padding:0}
.prio li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer}
.prio li:hover{background:var(--surface2)}
.prio .rank{font-family:"Archivo";font-weight:700;font-size:12px;color:var(--muted);width:16px;text-align:right}
.prio .nm{font-weight:600;flex:1}
.prio .sc{font-family:"Archivo";font-weight:700;font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted);margin-top:10px}

/* profile */
.prof-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.prof-head h3{font-size:18px;font-weight:800;flex:1;margin:0}
.score-big{text-align:right}
.score-big .v{font-family:"Archivo";font-weight:800;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.score-big .l{font-size:10.5px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.dims{margin:14px 0 4px;display:grid;gap:9px}
.dim .dr{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.dim .dl{font-weight:600;color:var(--ink2)}
.dim .dv{font-family:"Archivo";font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:4px;background:var(--sunken);overflow:hidden}
.bar b{display:block;height:100%;border-radius:4px;background:var(--accent)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fact{background:var(--surface2);border-radius:9px;padding:8px 10px}
.fact .fv{font-family:"Archivo";font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.fact .fl{font-size:11px;color:var(--ink2)}
.diag{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.diag li{display:flex;gap:8px;font-size:12.5px;color:var(--ink2)}
.diag li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t-lemah);flex:none;margin-top:6px}
.diag li.plus::before{background:var(--t-kuat)}
.reko{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 9px 9px 0;padding:10px 12px;font-size:12.5px;color:var(--ink);margin-top:12px}
.reko b{color:var(--accent-ink)}
.src-note{font-size:11px;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.back-btn{font-size:12px;font-weight:600;color:var(--accent-ink);margin-bottom:8px;display:inline-block}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);border-radius:var(--radius);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:820px;font-size:13px}
thead th{font-family:"Archivo";font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th[data-k]{cursor:pointer}
th[data-k]:hover{color:var(--ink)}
th .arr{font-size:9px;margin-left:3px}
tbody td{padding:9px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface2)}
td .dn{font-weight:600}
td.r,th.r{text-align:right}
.mini-delta{font-size:11px;font-weight:700;margin-left:5px}

/* ---------- struktur ---------- */
.wide{max-width:860px}
.lvl{display:grid;grid-template-columns:150px 1fr 170px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.lvl:last-child{border-bottom:none}
.lvl .ln{font-family:"Archivo";font-weight:700;font-size:14px}
.lvl .ls{font-size:11.5px;color:var(--muted)}
.lvl .lv{text-align:right;font-size:12.5px;color:var(--ink2)}
.lvl .lv b{font-family:"Archivo";font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.bar.big{height:12px;border-radius:6px}
@media (max-width:640px){.lvl{grid-template-columns:1fr;gap:6px}.lvl .lv{text-align:left}}
.callout{background:var(--surface2);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--ink2);margin-top:14px}
.callout b{color:var(--ink)}
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-top:12px}
.fstep{background:var(--surface2);border:1px solid var(--line2);border-radius:9px;padding:8px 12px;font-size:12px;text-align:center;flex:1;min-width:110px}
.fstep b{display:block;font-family:"Archivo";font-size:12.5px}
.fstep span{color:var(--muted);font-size:11px}
.farrow{align-self:center;color:var(--muted);padding:0 7px;font-size:15px;flex:none}

/* ---------- akses matrix ---------- */
.mx td,.mx th{text-align:center;padding:9px 10px}
.mx td:first-child,.mx th:first-child{text-align:left}
.mx tbody tr{cursor:default}
.yes{color:var(--accent-ink);font-weight:700}
.no{color:var(--line2)}
.part{color:var(--gold);font-weight:700;font-size:11px}

/* ---------- metodologi ---------- */
.mrow{display:grid;grid-template-columns:110px 1fr 60px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.mrow:last-child{border-bottom:none}
.mrow .mw{font-family:"Archivo";font-weight:800;font-size:16px;text-align:right;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.mrow .mn{font-weight:700}
.mrow .md{color:var(--muted);font-size:12px}
.status-l{display:grid;gap:8px;font-size:13px;margin-top:6px}
.status-l div{display:flex;gap:10px;align-items:baseline}
.src-list{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink2)}
.src-list li{margin-bottom:5px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
footer{margin-top:28px;font-size:11.5px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}


.badge-proto{display:none!important}
.f-layers{display:none!important}
.f-nav{display:none!important}
.f-legend{display:none!important}

/* ---- Layar pemuatan (boot) ---- */
#bootLoader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1000px 480px at 50% 20%, #12241a 0%, #0A130E 62%);
  transition:opacity .45s ease}
#bootLoader.hide{opacity:0;pointer-events:none}
.bl-card{width:min(340px,84vw);text-align:center;padding:0 8px}
.bl-mark{width:76px;height:76px;border-radius:18px;object-fit:cover;margin:0 auto 18px;display:block;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7)}
.bl-title{font-family:"Archivo",sans-serif;font-weight:800;font-size:26px;letter-spacing:.4px;color:#E9F0E7}
.bl-title span{color:#8FE0B0}
.bl-sub{font-size:12.5px;color:#7E8E80;margin-top:4px;margin-bottom:26px}
.bl-track{height:7px;border-radius:999px;background:#17281E;border:1px solid #26332B;overflow:hidden}
.bl-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#2FA968,#3FB06F);
  box-shadow:0 0 12px rgba(63,176,111,.5);transition:width .32s cubic-bezier(.4,0,.2,1)}
.bl-row{display:flex;justify-content:space-between;align-items:center;margin-top:11px;font-size:12.5px}
.bl-msg{color:#AEBDA9}
.bl-pct{font-family:"JetBrains Mono",ui-monospace,monospace;color:#8FE0B0;font-weight:600;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.bl-bar{transition:none}}


  .f-tools{position:fixed;right:16px;bottom:16px;z-index:22;display:flex;gap:4px;padding:5px;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--glass-line);border-radius:14px;box-shadow:var(--shadow)}
  .f-tools button{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--ink2);
    font-size:16px;background:none;border:none;cursor:pointer;transition:.12s}
  .f-tools button:hover{color:var(--ink);background:rgba(255,255,255,.07)}
  .f-tools button.on{color:var(--accent-ink)}
  .f-profile{position:fixed;top:16px;right:16px;z-index:23}
  .pf-btn{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 9px;border-radius:12px;cursor:pointer;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--glass-line);box-shadow:var(--shadow);color:var(--ink);font:600 13px "Public Sans",sans-serif}
  .pf-btn .pf-av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);
    display:grid;place-items:center;font-size:13px;flex:none}
  .pf-btn .pf-nm{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pf-btn .fa-chevron-down{font-size:11px;color:var(--muted);transition:transform .15s}
  .f-profile.open .pf-btn .fa-chevron-down{transform:rotate(180deg)}
  .pf-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;padding:6px;
    background:var(--glass2,var(--glass));backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--glass-line);border-radius:12px;box-shadow:var(--shadow);
    opacity:0;transform:translateY(-10px);transform-origin:top right;visibility:hidden;
    transition:opacity .18s ease,transform .18s cubic-bezier(.4,0,.2,1),visibility 0s linear .18s}
  .f-profile.open .pf-menu{opacity:1;transform:translateY(0);visibility:visible;
    transition:opacity .18s ease,transform .18s cubic-bezier(.4,0,.2,1),visibility 0s}
  @media (prefers-reduced-motion:reduce){.pf-menu{transition:none}}
  .pf-head{padding:8px 12px 4px}
  .pf-head .ph-nm{font-weight:700;font-size:13.5px;color:var(--ink)}
  .pf-head .ph-rl{font-size:11.5px;color:var(--muted);text-transform:capitalize}
  .pf-sep{border-top:1px solid var(--line);margin:6px 2px}
  .pf-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:9px;
    background:none;border:none;color:var(--ink2);font:600 13.5px "Public Sans",sans-serif;cursor:pointer;text-align:left}
  .pf-menu button:hover{background:rgba(255,255,255,.07);color:var(--ink)}
  .pf-menu button i{width:16px;text-align:center;color:var(--muted)}


  .f-burger{position:fixed;top:82px;left:16px;z-index:24;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--glass-line);box-shadow:var(--shadow);color:var(--ink2);font-size:17px;cursor:pointer;transition:opacity .22s ease,color .12s}
  .f-burger:hover{color:var(--ink)}
  .f-burger.on{color:var(--accent-ink)}
  #stage.panning ~ .f-burger{opacity:.08;pointer-events:none}
  .f-drawer{position:fixed;top:0;left:0;bottom:0;width:266px;max-width:82vw;z-index:40;display:flex;flex-direction:column;
    background:rgba(13,23,17,.62);backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);
    border-right:1px solid var(--glass-line);box-shadow:var(--shadow);transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);padding:16px 12px}
  .f-drawer.open{transform:translateX(0)}
  .f-drawer .dw-head{display:flex;align-items:center;gap:11px;padding:6px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .f-drawer .dw-head img{width:34px;height:34px;border-radius:9px;object-fit:cover}
  .f-drawer .dw-head .t{font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;letter-spacing:.3px;color:var(--ink)}
  .f-drawer .dw-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 6px}
  .f-drawer .dw-x:hover{color:var(--ink)}
  .dw-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
  .dw-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--ink2);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;background:none;border:none;text-align:left;width:100%}
  .dw-item i{width:20px;text-align:center;font-size:15px}
  .dw-item:hover{background:rgba(255,255,255,.06);color:var(--ink)}
  .dw-item.active{background:var(--accent);color:var(--on-accent)}
  .dw-soon{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.7px;color:var(--gold,#E3C35A);background:var(--gold-soft,#3A3116);border:1px solid var(--gold,#E3C35A);border-radius:999px;padding:2px 7px;line-height:1;flex:none}
  .dw-soonitem{opacity:.78}
  .dw-soonitem:hover{opacity:1}
  .dw-item.active .dw-soon{color:var(--on-accent);background:rgba(0,0,0,.18);border-color:transparent}
  .dw-sec{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px}
  @media (prefers-reduced-motion:reduce){.f-drawer{transition:none}}


  /* ---- Lapisan (dropdown) — "kacamata" data di peta ---- */
  .f-lap{position:fixed;top:16px;left:16px;z-index:23;padding:4px}
  .lap-btn{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;color:var(--ink);font-size:13px;font-weight:600}
  .lap-btn:hover{background:rgba(255,255,255,.05)}
  .lap-btn .fa-layer-group{color:var(--accent);font-size:15px}
  .lap-cv{font-size:10px;color:var(--muted);transition:transform .2s}
  .f-lap.open .lap-cv{transform:rotate(180deg)}
  .lap-menu{position:absolute;top:calc(100% + 6px);left:0;transform:translateY(-6px);width:280px;max-width:calc(100vw - 24px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);border-radius:14px;box-shadow:var(--shadow);padding:7px}
  .f-lap.open .lap-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
  .lap-h{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:6px 9px 8px}
  .lap-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;color:var(--ink2)}
  .lap-item>.fa-solid:first-child{width:16px;text-align:center;color:var(--muted)}
  .lap-item:hover{background:rgba(255,255,255,.06);color:var(--ink)}
  .lap-item.on{background:var(--accent-soft);color:var(--ink)}
  .lap-item.on>.fa-solid:first-child{color:var(--accent)}
  .lap-item>div{flex:1;min-width:0}
  .lap-nm{font-size:13px;font-weight:600}
  .lap-ds{font-size:11px;color:var(--muted)}
  .lap-empty{padding:14px 12px;font-size:12px;color:var(--muted);line-height:1.5;text-align:center}
  .lap-ck{color:var(--accent);font-size:12px}
  .lap-item:not(.on) .lap-ck{display:none}
  .lap-soon{opacity:.62;cursor:default}
  .lap-soon:hover{background:none;color:var(--ink2)}
  .lap-soonbadge{font-size:9px;font-weight:800;letter-spacing:.6px;color:var(--gold,#E3C35A);background:var(--gold-soft,#3A3116);border:1px solid var(--gold,#E3C35A);border-radius:999px;padding:2px 7px;line-height:1;flex:none}
  /* Grup Lapisan (Kekuatan / Elektoral) */
  .lap-g{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:9px 9px 4px;margin-top:2px;border-top:1px solid var(--glass-line)}
  .lap-g:first-child{border-top:0;margin-top:0}
  /* Bar kontrol konteks Elektoral (adaptif) — muncul di bawah Lapisan */
  .f-elxctl{position:fixed;z-index:22;display:flex;align-items:center;gap:7px;padding:6px 8px}
  .f-elxctl .exc-lbl{font-size:11px;font-weight:700;color:var(--ink2);white-space:nowrap;padding:0 3px}
  .f-elxctl .exc-lbl i{color:var(--accent)}
  .f-elxctl .exc-sel{background:var(--sunken,#0E1712);border:1px solid var(--glass-line);border-radius:8px;padding:5px 8px;color:var(--ink);font-size:12px;font-weight:600;outline:none;cursor:pointer}
  .f-elxctl .exc-sel:focus{border-color:var(--accent)}
  .f-elxctl .exc-sel:disabled{opacity:.5;cursor:default}
  /* Masa Bakti diredупkan saat mode Elektoral aktif (tak relevan) */
  .f-periode.per-off{opacity:.4;pointer-events:none;filter:grayscale(.5)}
  /* Marker pin TPS: wrapper (posisi dari MapLibre) + dot (visual, dianimasi) */
  .tps-mark{width:0;height:0}
  .tps-dot{position:relative;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
    font-family:"Archivo",sans-serif;font-size:10px;font-weight:800;color:#0b0e0c;border:1.5px solid rgba(255,255,255,.92);
    box-shadow:0 1px 5px rgba(0,0,0,.55);cursor:pointer;transition:transform .14s ease,opacity .18s ease}
  .tps-dot:hover{transform:scale(1.35);z-index:6}
  .tps-dot.tps-dim{opacity:.25}
  .tps-dot.tps-sel{transform:scale(1.4);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.6);z-index:7}
  /* Link Foto C1 di panel kanan (TPS) */
  .f-side .wl-c1{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:12.5px;color:var(--accent-ink);text-decoration:none;background:var(--accent-soft);border:1px solid #1f4530;border-radius:10px;padding:9px 12px;pointer-events:auto}
  .f-side .wl-c1:hover{border-color:var(--accent)}
  .f-side .wl-c1lbl{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:12.5px;color:var(--muted)}
  .f-side .wl-c1lbl+ .wl-c1, .f-side .wl-c1+ .wl-c1{margin-top:6px;margin-right:4px;padding:6px 10px}
  .f-side .wl-c1note{display:block;margin-top:7px;font-size:11px;color:var(--muted)}
  /* Badge "memuat data" saat pewarnaan elektoral diproses */
  .f-elxload{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:40;padding:8px 14px;font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
  .f-elxload i{color:var(--accent-ink)}
  @media (max-width:820px){ .f-elxload{top:auto;bottom:150px} }
  /* Legenda kategori Elektoral (tolak ukur % PPP) — bisa hide/show */
  .f-elxleg.collapsed{padding:0;min-width:0;border:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .f-elxleg .elg-btn{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink);padding:8px 12px;border-radius:12px;cursor:pointer;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
  .f-elxleg .elg-btn i{color:var(--accent-ink)}
  .f-elxleg .elg-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
  .f-elxleg .elg-x{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;font-size:12px}
  .f-elxleg .elg-x:hover{color:var(--ink)}
  .f-elxleg .elg-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2);padding:2px 0}
  .f-elxleg .elg-sw{width:12px;height:12px;border-radius:3px;flex:none}
  .f-elxleg .elg-k{font-weight:700;min-width:44px}
  .f-elxleg .elg-v{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
  .f-elxleg{position:fixed;left:16px;bottom:16px;z-index:22;padding:10px 12px;min-width:172px}
  .f-elxleg .elg-t{font-size:11px;color:var(--ink2);margin-bottom:6px}
  .f-elxleg .elg-t b{color:var(--accent-ink)}
  .f-elxleg .elg-bar{height:9px;border-radius:5px;background:linear-gradient(90deg,#D6543F,#E0B23C,#8CC66A,#2FA968)}
  .f-elxleg .elg-sc{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
  .f-elxleg .elg-lb{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
  @media (max-width:820px){ .f-elxleg{left:16px;bottom:16px;min-width:130px} }
  @media (max-width:820px){ .f-elxctl{top:130px!important;left:16px!important;right:16px!important;flex-wrap:wrap} }
  .lap-badge{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--sim);background:var(--sim-soft);border:1px dashed var(--sim);border-radius:6px;padding:2px 6px;white-space:nowrap}
  #lapToast{position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:60;padding:10px 15px;border-radius:11px;font-size:12.5px;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:min(360px,90vw);text-align:center;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
  #lapToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .f-lapleg{position:fixed;left:16px;bottom:16px;z-index:21;padding:10px 14px;max-width:min(440px,60vw)}
  .ll-h{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:9px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  .ll-sum{font-size:10.5px;font-weight:600;color:var(--muted)}
  .ll-scale{display:flex;gap:13px;flex-wrap:wrap}
  .ll-t{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2)}
  .ll-t i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
  @media (max-width:820px){.f-lapleg{display:none}}


  .jb-add{flex:none;margin-right:10px;background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  .jb-add:hover{filter:brightness(1.06)}
  .jb-add:disabled{background:var(--sunken,#0E1712);color:var(--muted);border:1px solid var(--line);cursor:not-allowed;filter:none;opacity:.75}
  .jb-grp{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:14px 12px 4px}
  .jb-grp-organ{color:var(--accent-ink);padding:9px 12px 3px;font-size:9.5px;opacity:.95}
  .jb-jrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;border:1px solid transparent}
  .jb-jrow:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
  .jb-urut{width:24px;text-align:center;color:var(--muted);font-size:12px;flex:none;font-variant-numeric:tabular-nums}
  .jb-grip{width:24px;text-align:center;color:var(--muted);font-size:13px;flex:none;cursor:grab}
  .jb-grip:active{cursor:grabbing}
  .jb-jrow[draggable="true"]{cursor:default}
  .jb-jrow.jb-dragging{opacity:.5;background:var(--accent-soft);border-color:var(--accent)}
  /* pohon: bawahan menjorok + garis penghubung ke atasan */
  .jb-sibs{display:flex;flex-direction:column;gap:2px}
  .jb-children{margin-left:17px;padding-left:15px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:2px;margin-top:2px;margin-bottom:2px}
  .jb-node{position:relative}
  .jb-node.jb-collapsed>.jb-children{display:none}
  .jb-caret{width:22px;height:22px;flex:none;border:none;background:none;color:var(--muted);cursor:pointer;font-size:11px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0}
  .jb-caret:hover{color:var(--ink);background:rgba(255,255,255,.06)}
  .jb-caret i{transition:transform .15s ease}
  .jb-node.jb-collapsed>.jb-jrow .jb-caret i{transform:rotate(-90deg)}
  .jb-caret-empty{cursor:default}
  .jb-count{font-size:10.5px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:20px;min-width:20px;text-align:center;padding:2px 7px;flex:none;font-variant-numeric:tabular-nums}
  .jb-node.jb-collapsed>.jb-jrow .jb-count{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
  .jb-hint{color:var(--muted);font-size:11px;font-weight:400}
  .jb-jmeta{flex:1;min-width:0}
  .jb-jnm{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jb-jtag{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jb-badge-inti{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:3px 7px;flex:none}
  .jb-act{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;flex:none;font-size:12.5px}
  .jb-act:hover{color:var(--ink);border-color:var(--accent)}
  .jb-act.del:hover{color:var(--t-lemah);border-color:var(--t-lemah)}
  /* ===== Data Personil ===== */
  .dp-top{display:flex;align-items:center;gap:12px}
  .dp-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;margin-left:auto}
  .dp-wil{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-ink);border:none;border-radius:10px;padding:8px 13px;cursor:pointer;font-size:12.5px;font-weight:600;max-width:260px}
  .dp-wil span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dp-wil:hover{filter:brightness(1.08)}
  .dp-wils{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dp-wils i{opacity:.8}
  /* picker wilayah */
  .dp-pov .dp-pbox{width:min(440px,100%);max-height:88vh;display:flex;flex-direction:column;background:var(--glass2,#16221B);border:1px solid var(--glass-line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
  .dp-pcrumb{padding:10px 18px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:5px;align-items:center}
  .dp-pcrumb span:last-child{color:var(--ink);font-weight:600}
  .dp-pbody{flex:1;overflow-y:auto;padding:8px;min-height:120px}
  .dp-prow{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border:none;background:none;color:var(--ink);cursor:pointer;border-radius:10px;text-align:left}
  .dp-prow:hover{background:rgba(255,255,255,.05)}
  .dp-pj{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.06);border-radius:6px;padding:3px 7px;flex:none;min-width:70px;text-align:center}
  .dp-pn{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dp-prow i{color:var(--muted);flex:none}
  .dp-pleaf{font-size:10.5px;color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:3px 8px;flex:none}
  .dp-pnone{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
  .dp-pfoot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
  .dp-pfoot .jb-save{flex:1}
  .dp-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .dp-card{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
  .dp-card:hover{border-color:var(--glass-line)}
  .dp-av{width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-ink);font-size:16px}
  .dp-av img{width:100%;height:100%;object-fit:cover}
  .dp-ini{font-weight:700;font-size:18px}
  .av-fill{width:100%;height:100%;display:grid;place-items:center;border-radius:inherit;letter-spacing:.5px}
  .dp-info{flex:1;min-width:0}
  .dp-nm{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dp-mt{font-size:11.5px;color:var(--muted);margin-top:1px}
  .dp-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .dp-bdg{font-size:11px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:7px;padding:2px 7px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dp-bdg i{opacity:.8;margin-right:2px}
  .dp-bdg.ok{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
  .dp-bdg.muted{opacity:.6}
  .dp-sos{display:flex;gap:11px;margin-top:7px;color:var(--muted);font-size:14px}
  .dp-sos i{opacity:.85}
  .dp-acts{display:flex;gap:6px;flex:none}
  /* overlay form */
  .dp-ov{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(6,11,8,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:18px}
  .dp-ov.open{display:flex}
  .dp-fbox{width:min(460px,100%);max-height:94vh;overflow-y:auto;background:var(--glass2,#16221B);border:1px solid var(--glass-line);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .dp-fhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink);position:sticky;top:0;background:var(--glass2,#16221B);z-index:1}
  .dp-fx{width:32px;height:32px;border-radius:8px;border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px}
  .dp-fx:hover{color:var(--ink)}
  .dp-form{padding:16px 18px;display:flex;flex-direction:column;gap:8px}
  .dp-fimgs{display:flex;gap:16px;justify-content:center;margin-bottom:6px}
  .dp-fimg{display:flex;flex-direction:column;align-items:center;gap:6px}
  .dp-ibox{width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--accent-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent-ink);font-size:30px}
  .dp-ibox.ktp{border-radius:10px;width:140px;height:92px;background:rgba(255,255,255,.04);color:var(--muted)}
  .dp-ibox img{width:100%;height:100%;object-fit:cover}
  .dp-ibtn{font-size:11.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border-radius:8px;padding:5px 11px;cursor:pointer}
  .dp-ibtn:hover{filter:brightness(1.1)}
  .dp-irm{font-size:10.5px;color:var(--t-lemah);background:none;border:none;cursor:pointer;padding:0}
  .dp-l{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:4px}
  .dp-in{width:100%;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:14px;outline:none;font-family:inherit}
  .dp-in:focus{border-color:var(--accent)}
  .dp-row2{display:flex;gap:10px}
  .dp-row2>div{flex:1;min-width:0}
  .dp-sosgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dp-sosin{display:flex;align-items:center;gap:8px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:0 10px}
  .dp-sosin i{color:var(--muted);flex:none}
  .dp-sosin .dp-in{border:none;background:none;padding:10px 0}
  .dp-fact{display:flex;gap:10px;margin-top:10px}
  .dp-fact .jb-save{flex:1}
  .dp-cancel{flex:none;background:none;border:1px solid var(--line);color:var(--muted);border-radius:11px;padding:0 18px;cursor:pointer;font-size:14px}
  .dp-cancel:hover{color:var(--ink);border-color:var(--glass-line)}
  /* penempatan jabatan dalam form */
  .dp-pnmt{margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
  .dp-phint{font-size:12px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:4px;line-height:1.5}
  .dp-phint.warn{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
  .dp-phint i{margin-right:5px}
  .dp-plist{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
  .dp-prow2{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
  .dp-pr-main{flex:1;min-width:0}
  .dp-pr-jab{font-size:13.5px;font-weight:600;color:var(--ink)}
  .dp-pr-org{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-ink);background:var(--accent-soft);border-radius:5px;padding:2px 6px;margin-left:5px}
  .dp-pr-sk{font-size:11px;color:var(--muted);margin-top:2px}
  .dp-pr-sk .ok{color:var(--t-kuat,#4ade80)}
  .dp-pr-sk .muted{opacity:.7}
  .dp-pr-sk i{opacity:.7;margin-right:1px}
  .dp-pr-act{display:flex;gap:4px;flex:none}
  .dp-pr-view,.dp-pr-del,.dp-pr-up{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .dp-pr-view:hover,.dp-pr-up:hover{color:var(--accent-ink);border-color:var(--accent)}
  .dp-pr-del:hover{color:var(--t-lemah);border-color:var(--t-lemah)}
  .dp-pnone2{font-size:12px;color:var(--muted);padding:8px 2px}
  .dp-addp{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
  .dp-addt{font-size:11.5px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.4px}
  .dp-addp2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .dp-addp2 .jb-save{margin-left:auto}
  .dp-pfn{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
  /* wizard tambah personil */
  .dp-wzbox{width:min(480px,100%);max-height:94vh;display:flex;flex-direction:column;background:var(--glass2,#16221B);border:1px solid var(--glass-line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
  .dp-steps{display:flex;align-items:center;padding:14px 18px;gap:0;border-bottom:1px solid var(--line)}
  .dp-step{display:flex;align-items:center;gap:8px;flex:none}
  .dp-stn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line);flex:none}
  .dp-step.on .dp-stn{background:var(--accent);color:#06130c;border-color:transparent}
  .dp-step.done .dp-stn{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
  .dp-stl{font-size:12px;font-weight:600;color:var(--muted)}
  .dp-step.on .dp-stl{color:var(--ink)}
  .dp-stline{flex:1;height:2px;background:var(--line);margin:0 10px;border-radius:2px;min-width:16px}
  .dp-stline.done{background:var(--accent-soft)}
  .dp-wzbody{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
  .dp-wzfoot{display:flex;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
  .dp-sum{display:flex;align-items:center;gap:14px}
  .dp-sumav{width:62px;height:62px;font-size:22px}
  .dp-sumnm{font-size:17px;font-weight:700;color:var(--ink)}
  .dp-sumbadges{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap}
  @media(max-width:560px){ .dp-row2,.dp-sosgrid{flex-direction:column;grid-template-columns:1fr} .dp-stl{display:none} }
  .jb-modal{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(6,11,8,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:20px}
  .jb-modal[hidden]{display:none!important}
  .jb-mcard{width:min(430px,100%);max-height:100%;overflow-y:auto;background:var(--glass2,#16221B);border:1px solid var(--glass-line);border-radius:14px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px}
  .jb-mh{display:flex;align-items:center;font-family:"Archivo",sans-serif;font-weight:800;font-size:16px;color:var(--ink)}
  .jb-mh .adm-x{margin-left:auto}
  .jb-mcard label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
  .jb-mcard input,.jb-mcard select{background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--ink);font-size:14px;outline:none;width:100%}
  .jb-mcard input:focus,.jb-mcard select:focus{border-color:var(--accent)}
  .jb-row2{display:flex;gap:12px;align-items:flex-end}
  .jb-row2>label:first-child{width:96px;flex:none}
  .jb-row2.jb-eq>label{flex:1;width:auto;min-width:0}
  .jb-row2.jb-eq>label input{min-width:0}
  .jb-chk{flex-direction:row!important;align-items:center;gap:8px!important;color:var(--ink2)!important;padding-bottom:11px;cursor:pointer;font-size:13px!important}
  .jb-chk input{width:16px!important;height:16px}
  .jb-msg{font-size:12px;min-height:15px}
  .jb-msg.err{color:var(--t-lemah)}.jb-msg.ok{color:var(--accent-ink)}
  .jb-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
  .jb-cancel{background:none;border:1px solid var(--line);color:var(--ink2);border-radius:9px;padding:9px 15px;cursor:pointer;font:inherit}
  .jb-save{background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:9px 17px;font-weight:700;cursor:pointer;font:inherit}
  .jb-save[disabled]{opacity:.6;cursor:default}


  .st-tab{background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12px;color:var(--ink2);cursor:pointer}
  .st-tab.on{background:var(--accent);color:var(--on-accent);border-color:transparent}
  .sc-wrap{flex:1;min-height:0;position:relative;overflow:auto}
  .sc-wrap.pan{overflow:hidden;touch-action:none;cursor:grab;background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px}
  .sc-wrap.grabbing{cursor:grabbing}
  .sc-stage{padding:8px 12px}
  .sc-wrap.pan .sc-stage{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
  .sc-wrap:not(.pan) .st-zoom{display:none}
  .st-zoom{position:absolute;right:14px;bottom:14px;z-index:6;display:flex;flex-direction:column;gap:3px;align-items:center;background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);border-radius:12px;padding:5px;box-shadow:var(--shadow)}
  .st-zoom button{width:34px;height:34px;border:none;background:none;color:var(--ink2);border-radius:8px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
  .st-zoom button:hover{color:var(--ink);background:rgba(255,255,255,.08)}
  .st-zval{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding:1px 0 2px}
  .sc-organ{margin:4px 0 26px}
  .sc-organ-h{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--accent-ink);text-transform:uppercase;padding:8px 10px 0;display:flex;align-items:center;gap:8px}
  .sc-tree{overflow:visible;padding:16px 8px 8px}
  .sc-tree>ul{width:max-content}
  .sc-tree ul{display:flex;justify-content:center;position:relative;padding-top:20px;margin:0;list-style:none}
  .sc-tree li{list-style:none;position:relative;padding:20px 7px 0;text-align:center}
  .sc-tree li::before,.sc-tree li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid rgba(255,255,255,.16);width:50%;height:20px}
  .sc-tree li::after{right:auto;left:50%;border-left:2px solid rgba(255,255,255,.16)}
  .sc-tree li:only-child::after,.sc-tree li:only-child::before{display:none}
  .sc-tree li:only-child{padding-top:0}
  .sc-tree li:first-child::before,.sc-tree li:last-child::after{border:0 none}
  .sc-tree li:last-child::before{border-right:2px solid rgba(255,255,255,.16);border-radius:0 6px 0 0}
  .sc-tree li:first-child::after{border-radius:6px 0 0 0}
  .sc-tree ul ul::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid rgba(255,255,255,.16);width:0;height:20px}
  .sc-node{display:inline-flex;align-items:flex-start;gap:9px;min-width:140px;max-width:244px;padding:9px 12px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);text-align:left;vertical-align:top}
  .sc-nb{min-width:0;flex:1}
  .sc-node.inti{border-color:var(--accent);background:var(--accent-soft)}
  .sc-has>.sc-node{cursor:pointer}
  .sc-has>.sc-node:hover{border-color:var(--accent)}
  .sc-nm{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25}
  .sc-person{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px}
  .sc-cnt{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:1px 6px;margin-top:5px}
  .sc-has.collapsed>ul{display:none}
  .sc-has.collapsed .sc-cnt i{transform:rotate(-90deg)}
  .sc-group{display:inline-block;background:var(--sunken,#0E1712);border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:9px;width:420px;max-width:calc(100vw - 60px);text-align:left}
  .sc-group-h{font-size:10.5px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.4px;padding:1px 4px 8px;display:flex;align-items:center;gap:7px;cursor:pointer}
  .sc-group-h:hover{color:var(--ink)}
  .sc-group-n{font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:1px 7px}
  .sc-gcaret{margin-left:auto;font-size:11px;color:var(--muted);transition:transform .15s}
  .sc-group.collapsed .sc-grid{display:none}
  .sc-group.collapsed .sc-group-h{padding-bottom:1px}
  .sc-group.collapsed .sc-gcaret{transform:rotate(180deg)}
  .sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sc-cell{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
  .sc-cb{min-width:0;flex:1}
  .sc-cell.inti{border-color:var(--accent)}
  .sc-cell-nm{font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.22}
  .sc-cell-p{font-size:10px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:4px}
  /* ---- frame foto pengurus. Kosong dulu: foto diunggah sendiri oleh yang bersangkutan
     saat aktivasi akun, lalu tinggal disuntik ke ava() lewat p.foto. ---- */
  .sc-ava{flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);background:var(--sunken,#0E1712);border:1px dashed rgba(255,255,255,.22);border-radius:8px}
  .sc-ava img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
  .sc-ava.has{border-style:solid;border-color:rgba(255,255,255,.24)}
  .sc-node.inti .sc-ava,.sc-cell.inti .sc-ava,.ot-card.inti .sc-ava{border-color:var(--accent)}
  .sc-ava-lg{width:36px;height:48px;border-radius:9px;font-size:14px}   /* pas foto 3:4 */
  .sc-ava-md{width:28px;height:28px;border-radius:8px;font-size:11px}
  .sc-ava-sm{width:26px;height:26px;border-radius:7px;font-size:10px}
  .sc-ini{font-weight:800;color:var(--ink2,#AEBDA9);line-height:1}
  .sc-stage.no-foto .sc-ava{display:none}
  .st-foto{flex:none;margin-right:8px;background:var(--sunken,#0E1712);border:1px solid var(--line);color:var(--ink2);font:inherit;font-size:12px;padding:6px 11px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:6px}
  .st-foto.on{background:var(--accent);color:var(--on-accent);border-color:transparent}
  .sc-legend{font-size:11px;color:var(--muted);padding:4px 12px 0;display:flex;gap:14px;flex-wrap:wrap}
  .sc-legend b{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px}
  .st-view{display:flex;gap:2px;margin-right:10px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:9px;padding:3px;flex:none}
  .st-view button{border:none;background:none;color:var(--ink2);font:inherit;font-size:12px;padding:5px 11px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:6px}
  .st-view button.on{background:var(--accent);color:var(--on-accent)}
  /* mode POHON (indentasi vertikal — muat 1 layar) */
  .ot{list-style:none;margin:0;padding:0}
  .ot .ot{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.15)}
  .ot-li{position:relative}
  .ot-row{display:flex;align-items:center;gap:8px;padding:3px 0}
  .ot-cta{flex:none;width:20px;height:20px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}
  .ot-cta:hover{color:var(--ink);border-color:var(--accent)}
  .ot-cta i{transition:transform .15s}
  .ot-sp{width:20px;flex:none}
  .ot-card{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);max-width:100%;cursor:pointer}
  .ot-card:hover{border-color:var(--accent)}
  .ot-card.inti{border-color:var(--accent);background:var(--accent-soft)}
  .ot-nm{font-size:13px;font-weight:600;color:var(--ink)}
  .ot-person{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
  .ot-cnt{font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:1px 7px;white-space:nowrap}
  .ot-li.collapsed>ul{display:none}
  .ot-li.collapsed>.ot-row .ot-cta i{transform:rotate(-90deg)}


  .pu-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;border:1px solid transparent}
  .pu-row:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
  .pu-av{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none;font-size:14px;overflow:hidden}
  .pu-meta{flex:1;min-width:0}
  .pu-nm{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pu-tag{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pu-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:6px;padding:3px 8px;flex:none;white-space:nowrap}
  .pu-b-pending{color:var(--sim);background:var(--sim-soft);border:1px dashed var(--sim)}
  .pu-b-aktif{color:var(--accent-ink);background:var(--accent-soft)}
  .pu-b-nonaktif{color:var(--muted);background:var(--sunken,#0E1712);border:1px solid var(--line)}
  .pu-act{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;flex:none;font-size:12px}
  .pu-act:hover{color:var(--ink);border-color:var(--accent)}
  .pu-act.danger:hover{color:var(--t-lemah);border-color:var(--t-lemah)}
  .pu-wsearch{position:relative}
  .pu-wsearch input{padding-right:32px}
  .pu-wcaret{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
  .pu-wres{position:fixed;z-index:10;max-height:230px;overflow-y:auto;background:var(--surface,#16221B);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
  .pu-wres:empty{display:none}
  .pu-wres button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);padding:9px 12px;cursor:pointer;font:inherit;border-bottom:1px solid var(--line)}
  .pu-wres button:hover,.pu-wres button.active{background:var(--accent-soft)}
  .pu-wempty{padding:11px 12px;color:var(--muted);font-size:12px}
  .pu-wres .j{font-size:11px;color:var(--muted);text-transform:capitalize;margin-top:1px}
  .pu-wpick{display:flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:9px;padding:9px 11px;color:var(--ink);font-size:13px}
  .pu-wpick .x{margin-left:auto;cursor:pointer;color:var(--muted);padding:2px 6px}
  .pu-wpick .x:hover{color:var(--ink)}
  .pu-res{background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:11px;padding:14px;display:flex;flex-direction:column;gap:11px}
  .pu-link{display:flex;gap:6px}
  .pu-link input{flex:1;font-size:12px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink)}
  .pu-wa{background:#25D366;color:#04140A;border:none;border-radius:10px;padding:12px;font-weight:800;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
  .pu-copy{background:none;border:1px solid var(--line);color:var(--ink2);border-radius:9px;padding:0 13px;cursor:pointer;font:inherit}
  .pu-hint{font-size:11.5px;color:var(--muted)}


  .f-bell{position:fixed;top:16px;z-index:23;padding:4px}
  .bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:12px;color:var(--ink2);font-size:16px;cursor:pointer;background:none;border:none}
  .bell-btn:hover{color:var(--ink)}
  .bell-dot{position:absolute;top:4px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--sim);border:2px solid var(--bg1,#0E1A12)}
  .bell-menu{position:absolute;top:calc(100% + 6px);right:0;width:320px;max-width:calc(100vw - 24px);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);border-radius:14px;box-shadow:var(--shadow);padding:7px}
  .f-bell.open .bell-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
  .bell-h{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:6px 9px 8px}
  .bell-list{display:flex;flex-direction:column;gap:4px;max-height:360px;overflow-y:auto}
  .bell-item{display:flex;gap:11px;padding:10px;border-radius:10px}
  .bell-item:hover{background:rgba(255,255,255,.04)}
  .bell-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:14px}
  .bell-ic.amber{background:var(--sim-soft);color:var(--sim)}
  .bell-ic.info{background:var(--accent-soft);color:var(--accent-ink)}
  .bell-body{flex:1;min-width:0}
  .bell-t{font-size:13px;font-weight:600;color:var(--ink)}
  .bell-d{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
  .bell-act{margin-top:8px;background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
  .bell-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:12.5px}


  @media (max-width:720px){
    /* Lapisan: ikon saja (teks disembunyikan) biar hemat tempat */
    .lap-cur{display:none}
    .lap-btn{padding:10px 12px}
    /* naikkan konteks saat terbuka agar sheet+backdrop di atas elemen lain */
    .f-lap.open,.f-profile.open,.f-bell.open{z-index:58}
    /* PENTING: backdrop-filter di wrapper membuat position:fixen anak jadi relatif ke wrapper.
       Matikan di mobile agar sheet benar-benar menempel ke bawah viewport. */
    .f-lap,.f-bell,.f-profile{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
    /* zoom peta: sembunyikan angka %, sisakan - + reset biar ringkas */
    #zPct{display:none}
    /* Semua dropdown muncul dari BAWAH (bottom-sheet) — nyaman dijangkau jempol, tak menutupi menu lain */
    .lap-menu,.pf-menu,.bell-menu{
      position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;min-width:0;max-width:none;
      border-radius:18px 18px 0 0;
      padding:8px 14px calc(18px + env(safe-area-inset-bottom,0px));
      transform:translateY(100%);transform-origin:bottom center;
      max-height:78vh;overflow-y:auto;z-index:60;box-shadow:0 -14px 40px rgba(0,0,0,.5)
    }
    .lap-menu::before,.pf-menu::before,.bell-menu::before{
      content:'';display:block;width:40px;height:4px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto 12px
    }
    /* item lebih lega untuk sentuhan */
    .lap-item,.bell-item{padding:14px 12px}
    .pf-menu>button{padding:13px 10px}
    /* backdrop redup di belakang sheet */
    .f-lap.open::after,.f-profile.open::after,.f-bell.open::after{
      content:'';position:fixed;inset:0;background:rgba(4,9,6,.5);z-index:59;backdrop-filter:blur(1px)
    }
  }


  .f-periode{position:fixed;top:16px;left:16px;z-index:23;display:flex;align-items:center;padding:4px}
  .per-btn{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:12px;color:var(--ink);font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;white-space:nowrap}
  .per-btn i.fa-calendar-days{color:var(--accent-ink)}
  .per-btn .per-lbl{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .per-btn .per-cur{font-family:"Archivo",sans-serif;font-weight:700}
  .per-cv{font-size:11px;color:var(--muted);transition:transform .18s}
  .f-periode.open .per-cv{transform:rotate(180deg)}
  .per-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:250px;max-width:calc(100vw - 24px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
    background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-line);border-radius:14px;box-shadow:var(--shadow);padding:7px}
  .f-periode.open .per-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .per-h{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:6px 10px 8px}
  .per-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:var(--ink2);padding:10px 11px;border-radius:10px;cursor:pointer;font-size:13px}
  .per-item:hover{background:rgba(255,255,255,.06);color:var(--ink)}
  .per-item.on{background:var(--accent);color:var(--on-accent)}
  .per-item .pn{font-weight:700;color:inherit}
  .per-item .pj{font-size:10.5px;color:var(--muted);text-transform:capitalize}
  .per-item.on .pj{color:var(--on-accent);opacity:.8}
  .per-item .pk{margin-left:auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 7px}
  .per-item.on .pk{color:var(--on-accent);border-color:rgba(4,20,10,.3)}
  @media (max-width:820px){
    .f-periode{top:16px;left:68px;right:auto;bottom:auto;transform:none;padding:2px}
    .f-periode .per-lbl{display:none}
    .f-periode .per-cur{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .f-periode .per-menu{left:0;transform:translateX(0) translateY(-6px)}
    .f-periode.open .per-menu{transform:translateX(0) translateY(0)}
  }


  .pt-peri{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;padding:4px 11px;font-weight:700;margin:0 22px 10px}
  .pt-peri i{font-size:10px}
  .pt-tabs{display:flex;margin:0 22px 12px;border-bottom:1px solid var(--line)}
  .pt-tabs button{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:9px 2px;margin-right:18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .pt-tabs button:hover{color:var(--ink2)}
  .pt-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
  .pt-chart{position:relative;height:190px;border:1px dashed var(--line);border-radius:12px;background:var(--sunken,#0E1712);display:grid;place-items:center;margin-bottom:12px;overflow:hidden}
  .pt-chart::before{content:"";position:absolute;left:12px;right:12px;bottom:26px;border-bottom:1px solid var(--line)}
  .pt-chart::after{content:"periode →";position:absolute;right:14px;bottom:8px;font-size:10px;color:var(--muted)}
  .pt-chart i{font-size:30px;color:var(--line)}
  .pt-scope{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2);background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin-bottom:12px}
  .pt-scope i{color:var(--accent-ink);font-size:10px}
  .pt-scope b{color:var(--ink);font-weight:700}
  /* varian header: chip cakupan di samping judul panel (bukan di body) */
  .pt-scope-h{margin:0 12px 0 10px;flex:none;max-width:46%;white-space:nowrap}
  .pt-scope-h b{overflow:hidden;text-overflow:ellipsis}
  @media (max-width:640px){ .pt-scope-h .pt-scope-lbl{display:none} .pt-scope-h{max-width:40%;padding:5px 10px} }
  .pt-persel{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .pt-persel label{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .pt-persel select{flex:1;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:13px;font-weight:600;padding:10px 12px;outline:none;cursor:pointer}
  .pt-persel select:focus{border-color:var(--accent)}
  .pt-loading{color:var(--muted);font-size:12.5px;padding:24px 0;text-align:center}
  .pt-empty-center{flex-direction:column;text-align:center;align-items:center;padding:36px 18px;gap:10px}
  .pt-empty-center i{font-size:30px;color:var(--muted)}
  /* empty-state seragam (reusable __emptyState) */
  .es{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:34px 20px}
  .es .es-ic{font-size:30px}
  .es .es-t{font-size:14px;font-weight:700;color:var(--ink)}
  .es .es-s{font-size:12.5px;color:var(--muted);line-height:1.55;max-width:320px}
  .es-badge{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--sim);background:var(--sim-soft);border:1px dashed var(--sim);border-radius:999px;padding:2px 9px}
  .es-kosong .es-ic{color:var(--accent-ink)}
  .es-segera{opacity:.85}
  .es-segera .es-ic{color:var(--muted)}
  .es-segera .es-t{color:var(--ink2)}
  .pt-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 22px 22px}
  .pt-intro{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:16px}
  .pt-mh{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .pt-metrik{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
  .pt-m{display:flex;align-items:center;gap:11px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
  .pt-m .pt-mn{flex:1;font-size:13px;color:var(--ink);font-weight:600}
  .pt-m .pt-mv{font-family:"Archivo",sans-serif;font-weight:800;color:var(--muted);font-size:14px}
  .pt-m .pt-w{font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:2px 8px;flex:none}
  .pt-empty{display:flex;gap:12px;align-items:flex-start;background:var(--sunken,#0E1712);border:1px dashed var(--line);border-radius:12px;padding:15px 16px;color:var(--ink2);font-size:12.5px;line-height:1.6}
  .pt-empty i{color:var(--sim);font-size:16px;margin-top:1px}
  /* D4: tabel peringkat wilayah (lapisan Elektoral) */
  .rk-n{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
  .rk-bar{display:flex;justify-content:flex-end;margin:0 0 8px}
  .rk-sortbtn{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px solid #1f4530;border-radius:999px;padding:5px 12px;cursor:pointer}
  .rk-sortbtn:hover{border-color:var(--accent)}
  .rk-tbl{display:flex;flex-direction:column;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .rk-row{display:grid;grid-template-columns:26px 1fr 64px 62px 62px;align-items:center;gap:6px;padding:8px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
  .rk-row:last-child{border-bottom:0}
  .rk-row:hover{background:rgba(63,176,111,.08)}
  .rk-row.rk-head{cursor:default;background:transparent;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);padding:9px 12px 7px}
  .rk-row.rk-head:hover{background:transparent}
  .rk-no{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .rk-nm{font-size:12.5px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rk-nm small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  .rk-pct{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .rk-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px rgba(0,0,0,.35)}
  .rk-v{font-size:11.5px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .rk-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:9px}
  /* toggle Tabel|Grafik */
  .rk-bar{justify-content:space-between;align-items:center;gap:10px}
  .rk-seg{display:inline-flex;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:3px}
  .rk-seg button{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted);background:none;border:0;border-radius:8px;padding:5px 11px;cursor:pointer}
  .rk-seg button.on{background:var(--accent-soft);color:var(--accent-ink)}
  /* grafik batang horizontal (peringkat wilayah & antar partai) */
  .rk-chart{display:flex;flex-direction:column;gap:7px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:12px;padding:12px}
  .rk-cr{display:flex;flex-direction:column;gap:3px;background:none;border:0;padding:4px 2px;text-align:left;font:inherit;color:var(--ink);border-radius:8px}
  button.rk-cr{cursor:pointer}
  button.rk-cr:hover{background:rgba(63,176,111,.08)}
  .rk-cnm{font-size:12px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rk-cnm small{color:var(--muted);font-weight:500}
  .rk-nu{display:inline-block;min-width:16px;text-align:center;font-size:10px;font-weight:800;color:var(--ink2);background:rgba(255,255,255,.07);border-radius:5px;padding:1px 3px}
  .rk-tag{font-size:9.5px;font-weight:800;color:#0B1510;background:var(--accent);border-radius:5px;padding:1px 6px;vertical-align:1px}
  .rk-ctrack{position:relative;display:flex;align-items:center;height:16px;background:rgba(255,255,255,.05);border-radius:6px;overflow:hidden}
  .rk-cbar{height:100%;border-radius:6px 0 0 6px;min-width:3px}
  .rk-cval{position:absolute;right:7px;font-size:10.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .rk-ppp .rk-cnm{color:var(--accent-ink)}
  .rk-ppp .rk-ctrack{box-shadow:inset 0 0 0 1px #1f4530}
  /* grafik garis tren antar tahun (SVG) */
  .rk-svg{width:100%;height:auto;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
  .rk-grid{stroke:rgba(180,210,190,.12);stroke-width:1}
  .rk-grid0{stroke:rgba(180,210,190,.25)}
  .rk-line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
  .rk-pt{stroke:#0B1510;stroke-width:1.5}
  .rk-ax{fill:var(--muted);font-size:9.5px;font-family:"Inter",sans-serif}
  .rk-val{fill:var(--ink);font-size:10.5px;font-weight:700;font-family:"Inter",sans-serif}
  .rk-trentbl .rk-row{cursor:default}
  .rk-trentbl .rk-row:hover{background:transparent}
  .rk-up{color:#2FA968}
  .rk-down{color:#D6543F}
  .pt-elx{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
  .pt-seg{display:inline-flex;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:3px}
  .pt-seg button{border:none;background:none;color:var(--ink2);font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer}
  .pt-seg button.on{background:var(--accent);color:var(--on-accent)}
  .pt-elx-badan .pt-seg{flex-wrap:wrap}
  .pt-elx-res{font-size:12px;color:var(--ink2);margin-bottom:16px}
  .pt-elx-res b{color:var(--accent-ink)}


  .per-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:11px;border:1px solid transparent}
  .per-row:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
  .per-meta{flex:1;min-width:0}
  .per-rn{font-size:14px;font-weight:700;color:var(--ink)}
  .per-rt{font-size:11.5px;color:var(--muted);text-transform:capitalize}
  .per-st{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:6px;padding:3px 9px;flex:none}
  .per-st-aktif{color:var(--accent-ink);background:var(--accent-soft)}
  .per-st-arsip{color:var(--muted);background:var(--sunken,#0E1712);border:1px solid var(--line)}
  .per-st-draf{color:var(--sim);background:var(--sim-soft);border:1px dashed var(--sim)}
  .aud-row{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:11px;border:1px solid transparent}
  .aud-row:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
  .aud-ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:13px;color:var(--accent-ink);background:var(--accent-soft)}
  .aud-meta{flex:1;min-width:0}
  .aud-rk{font-size:13px;font-weight:600;color:var(--ink);line-height:1.4}
  .aud-sub{font-size:11px;color:var(--muted);margin-top:2px}
  .aud-time{font-size:11px;color:var(--muted);white-space:nowrap;flex:none;margin-top:2px}
  .aud-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 22px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .aud-search{flex:1;min-width:150px;display:flex;align-items:center;gap:8px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:0 11px}
  .aud-search i{color:var(--muted);font-size:12px}
  .aud-search input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:13px;padding:9px 0}
  .aud-filter select{background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:12.5px;font-weight:600;padding:9px 10px;outline:none;cursor:pointer;max-width:180px}
  .aud-date{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-weight:600}
  .aud-date input{background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:12px;padding:8px 9px;outline:none;color-scheme:dark}
  .aud-reset{flex:none;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;color:var(--muted);cursor:pointer;padding:9px 11px;font-size:12px}
  .aud-reset:hover{color:var(--ink);border-color:var(--accent)}
  .aud-more{display:block;width:100%;margin:10px 0 2px;background:none;border:1px solid var(--line);border-radius:10px;color:var(--ink2);font-size:12.5px;font-weight:600;padding:10px;cursor:pointer}
  .aud-more:hover{border-color:var(--accent);color:var(--ink)}
  .set-tabs{display:flex;margin:0 22px 12px;border-bottom:1px solid var(--line)}
  .set-tabs button{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:9px 2px;margin-right:18px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .set-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
  .set-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 22px 22px}
  .set-intro{font-size:12.5px;color:var(--ink2);line-height:1.6;margin-bottom:14px}
  .bobot-row{display:flex;align-items:center;gap:12px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin-bottom:8px}
  .bobot-nm{flex:1;font-size:13px;font-weight:600;color:var(--ink)}
  .bobot-in{width:78px;background:var(--surface2);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:14px;font-weight:700;text-align:right;padding:8px 10px;outline:none;font-variant-numeric:tabular-nums}
  .bobot-in:focus{border-color:var(--accent)}
  .bobot-in:disabled{opacity:.55;cursor:not-allowed}
  .bobot-foot{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
  .bobot-total{font-size:12.5px;color:var(--ink2)}
  .bobot-total b{font-family:"Archivo";font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
  .bobot-total.warn b{color:var(--sim)}
  .set-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
  .set-note i{color:var(--accent-ink)}
  .info-dim{margin-bottom:16px}
  .info-dh{font-size:13px;font-weight:700;color:var(--accent-ink);margin-bottom:6px}
  .info-m{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:var(--ink2);padding:6px 0;border-bottom:1px solid var(--line)}
  .info-m .im-s{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
  .info-m .im-lag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
  /* Pengaturan → Ambang Elektoral (dibatasi lebar, tidak full) */
  .amb-wrap{max-width:460px}
  .amb-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
  .amb-cat{display:flex;align-items:center;gap:8px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px}
  .amb-cat .amb-sw{width:14px;height:14px;border-radius:4px;flex:none}
  .amb-cat .amb-rg{margin-left:auto;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
  .amb-form{display:grid;gap:9px;margin-top:6px}
  .amb-form label{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
  .amb-lb{display:flex;flex-direction:column;gap:1px;font-size:13px;color:var(--ink2)}
  .amb-lb b{color:var(--ink);font-weight:700}
  .amb-lb small{color:var(--muted);font-size:10.5px}
  .amb-in{display:flex;align-items:center;gap:6px;flex:none}
  .amb-in input{width:78px;background:var(--glass2,#16221B);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;outline:none;text-align:right}
  .amb-in input:focus{border-color:var(--accent)}
  .amb-in>span{color:var(--muted);font-size:13px}
  @media (max-width:560px){ .amb-wrap{max-width:none} .amb-preview{grid-template-columns:1fr} }
  /* Info → Jadwal Pemilu (tabel referensi statis) */
  .info-jd-g{font-size:11.5px;font-weight:700;color:var(--ink2);margin:12px 0 4px;letter-spacing:.2px}
  .info-jd-t{border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .info-jd-r{display:grid;grid-template-columns:64px 150px 1fr;gap:10px;align-items:baseline;font-size:12px;color:var(--ink2);padding:6px 10px;border-bottom:1px solid var(--line)}
  .info-jd-r:last-child{border-bottom:0}
  .info-jd-r span:first-child{font-weight:700;font-variant-numeric:tabular-nums}
  .info-jd-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:rgba(255,255,255,.03)}
  @media (max-width:560px){ .info-jd-r{grid-template-columns:52px 1fr;} .info-jd-r span:nth-child(3){grid-column:2;font-size:10.5px} }

/* E2: Data Kewilayahan */
.dw-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;background:#D6543F;color:#fff;border-radius:50%;font-size:9px;font-weight:800;vertical-align:1px}
.kw-intro{font-size:12.5px;color:var(--ink2);line-height:1.6;margin-bottom:12px}
.kw-edit{display:flex;gap:8px;align-items:stretch}
.kw-edit input{flex:1;min-width:0;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.kw-edit input:focus{outline:none;border-color:var(--accent)}
.kw-chips{display:flex;flex-wrap:wrap;gap:7px}
.kw-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.kw-chip.lock{border-color:#1f4530;color:var(--accent-ink)}
.kw-chip i{font-size:10px;color:var(--accent-ink)}
.kw-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:9px}
.pu-block{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(214,84,63,.1);border:1px solid rgba(214,84,63,.4);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:4px}
.pu-block[hidden]{display:none}
.pu-block i{color:#E0B23C}
.pu-block button{background:var(--accent-soft);color:var(--accent-ink);border:1px solid #1f4530;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer}
#puWrw{width:100%;margin-top:4px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:14px}
.kw-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);padding:20px}
.kw-modal[hidden]{display:none}
.kw-mbox{background:var(--glass2,#16221B);border:1px solid var(--glass-line);border-radius:16px;max-width:400px;width:100%;padding:26px 24px;text-align:center;box-shadow:var(--shadow)}
.kw-mic{width:54px;height:54px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border-radius:14px;color:var(--accent-ink);font-size:22px}
.kw-mbox h3{font-family:"Archivo",sans-serif;font-size:18px;font-weight:800;color:var(--ink);margin:0 0 8px}
.kw-mbox p{font-size:13px;color:var(--ink2);line-height:1.6;margin:0 0 18px}
.kw-mact{display:flex;gap:10px;justify-content:center}
.kw-mact button{border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--line)}
.kw-later{background:transparent;color:var(--ink2)}
.kw-now{background:var(--accent);color:#0B1510;border-color:var(--accent)!important}

/* ===== Kelengkapan Struktur ===== */
.kl-hero{display:flex;align-items:center;gap:20px;padding:6px 2px 14px}
.kl-ring{width:104px;height:104px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.kl-ringin{width:80px;height:80px;border-radius:50%;background:var(--glass2,#16221B);display:flex;align-items:baseline;justify-content:center;font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.kl-ringin span{font-size:13px;font-weight:600;color:var(--muted);margin-left:1px}
.kl-heroinfo{flex:1;min-width:0}
.kl-herobig{font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.kl-herolbl{font-size:13px;color:var(--muted);margin-top:-2px}
.kl-herosub{font-size:12px;color:var(--accent-ink);margin-top:6px}
.kl-mrow{display:flex;gap:10px;margin-bottom:6px}
.kl-metric{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.kl-mn{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.kl-ml{font-size:11.5px;color:var(--muted);margin-top:2px}
.kl-sec{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.kl-orow{margin-bottom:10px}
.kl-ohead{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink);margin-bottom:4px}
.kl-on{color:var(--muted);font-variant-numeric:tabular-nums}
.kl-bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden}
.kl-barf{height:100%;background:var(--accent);border-radius:5px;transition:width .4s ease}
.kl-ogrp{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-ink);margin:12px 0 5px}
.kl-seat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:5px}
.kl-seat.on{border-color:transparent;background:var(--accent-soft)}
.kl-seatj{font-size:13.5px;font-weight:600;color:var(--ink);min-width:0}
.kl-seatp{font-size:12.5px;color:var(--accent-ink);text-align:right;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-seatk{font-size:12px;color:var(--muted);flex:none}
.kl-inti{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-ink);background:var(--accent-soft);border-radius:5px;padding:2px 5px;margin-left:4px}
.kl-seat.on .kl-inti{background:rgba(0,0,0,.18)}
/* bagan */
.kl-sibs{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.kl-children{margin-left:17px;padding-left:15px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:3px;margin-top:3px}
.kl-node.kl-col>.kl-children{display:none}
.kl-nrow{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.kl-caret{width:22px;height:22px;flex:none;border:none;background:none;color:var(--muted);cursor:pointer;font-size:11px;border-radius:6px;padding:0;margin-top:1px}
.kl-caret:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.kl-caret i{transition:transform .15s ease}
.kl-node.kl-col>.kl-nrow .kl-caret i{transform:rotate(-90deg)}
.kl-ce{cursor:default}
.kl-nmeta{flex:1;min-width:0}
.kl-njab{font-size:13.5px;font-weight:600;color:var(--ink)}
.kl-nwho{margin-top:4px;display:flex;flex-wrap:wrap;gap:5px}
.kl-nwho.kosong{margin-top:2px}
.kl-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);background:var(--accent-soft);border-radius:20px;padding:3px 10px 3px 3px;font-weight:500}
.kl-cav{width:20px;height:20px;border-radius:50%;overflow:hidden;background:var(--glass2,#16221B);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted);flex:none}
.kl-cav img{width:100%;height:100%;object-fit:cover}
.kl-empty{font-size:11.5px;color:var(--muted)}

/* Kelengkapan — tab Bagan (diagram zoomable) */
.sc-person.kosong,.sc-cell-p.kosong{opacity:.55;font-style:italic}
.pt-body.kl-baganmode{display:flex;flex-direction:column;overflow:hidden;padding-bottom:4px}
.kl-baganmode .kl-nav,.kl-baganmode .st-bar{flex:none}
.kl-baganmode .sc-wrap{flex:1;min-height:0}
/* navigasi wilayah (breadcrumb + telusuri bawah) */
.kl-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.kl-crumb{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:1;min-width:0}
.kl-up{background:none;border:none;color:var(--accent-ink);cursor:pointer;font-size:12.5px;font-weight:600;padding:3px 4px;border-radius:6px}
.kl-up:hover{background:var(--accent-soft)}
.kl-sep{color:var(--muted);font-size:9px;opacity:.6}
.kl-cur{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.kl-down{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-ink);border:none;border-radius:10px;padding:7px 12px;cursor:pointer;font-size:12px;font-weight:600;flex:none}
.kl-down:hover{filter:brightness(1.08)}
/* node jembatan ke sub-wilayah di bagan */
.sc-wnode{display:inline-flex;align-items:center;gap:9px;min-width:150px;padding:10px 14px;border-radius:11px;background:var(--accent-soft);border:1.5px dashed var(--accent);color:var(--accent-ink);cursor:pointer;text-align:left;vertical-align:top}
.sc-wnode:hover{filter:brightness(1.08)}
.sc-wnode>i{font-size:17px}
.sc-wnm{font-size:14px;font-weight:800}
.sc-wct{font-size:10.5px;opacity:.85;margin-top:1px}
.st-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.st-hint{font-size:11px;color:var(--muted)}
@media(max-width:640px){.st-hint{display:none}}

/* avatar yang bisa diklik → modal detail */
.sc-clk{cursor:pointer}
.sc-clk:hover{outline:2px solid var(--accent);outline-offset:1px}
.dp-av-clk{cursor:pointer}
.dp-av-clk:hover{outline:2px solid var(--accent);outline-offset:1px}
/* Modal Detail Personil */
.pd-ov .pd-box{position:relative;width:min(440px,100%);max-height:92vh;overflow-y:auto;background:var(--glass2,#16221B);border:1px solid var(--glass-line);border-radius:16px;box-shadow:var(--shadow);padding:22px}
.pd-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;border:none;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;font-size:15px;z-index:2}
.pd-x:hover{color:var(--ink)}
.pd-body{display:flex;flex-direction:column;align-items:center;gap:4px}
.pd-photo{width:160px;height:160px;border-radius:16px;overflow:hidden;background:var(--sunken,#0E1712);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:40px;margin-bottom:12px}
.pd-photo img{width:100%;height:100%;object-fit:cover}
.pd-ini{font-weight:800;color:var(--accent-ink,#8FE0B0);font-size:56px;line-height:1}
.pd-main{width:100%;text-align:center}
.pd-nm{font-size:20px;font-weight:800;color:var(--ink)}
.pd-wil{font-size:12px;color:var(--accent-ink);margin-top:3px}
.pd-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.pd-kontaks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.pd-kontak{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:6px 11px;text-decoration:none}
.pd-kontak:hover{border-color:var(--accent)}
.pd-soss{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.pd-sos{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.pd-ket{font-size:12.5px;color:var(--muted);margin-top:12px;padding:10px 12px;background:rgba(255,255,255,.03);border-radius:10px;text-align:left;line-height:1.5}
.pd-sec{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;text-align:left}
.pd-jablist{display:flex;flex-direction:column;gap:6px}
.pd-jab{font-size:13px;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;padding:9px 12px;text-align:left}
.pd-jab i.fa-sitemap{color:var(--accent-ink);margin-right:3px}
.pd-sk{font-size:11px;color:var(--muted)}
.pd-nojab{font-size:12.5px;color:var(--muted);text-align:left;padding:4px 2px}

/* Mode immersive = fallback "layar penuh" utk iOS (yang tak izinkan Fullscreen API non-video).
   Sembunyikan semua chrome kecuali peta, zoom, dan tombol keluar (f-tools). */
body.immersive .f-brand,body.immersive .f-periode,body.immersive .f-bell,body.immersive .f-profile,
body.immersive .f-lap,body.immersive .f-burger,body.immersive .f-elxctl,body.immersive .f-strukctl,
body.immersive .f-elxleg,body.immersive .f-strukleg,body.immersive .f-lapleg,body.immersive .f-side,
body.immersive .crumbs,body.immersive .kec-badge{display:none!important}
body.immersive #mapWrap{padding-top:0!important}

/* Indikator realtime (SSE) */
.f-live{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:21;display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:1px;background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--glass-line);color:var(--muted);transition:color .3s,opacity .3s}
.f-live .lv-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.f-live.on{color:var(--t-kuat,#4ade80)}
.f-live.on .lv-dot{background:var(--t-kuat,#4ade80);box-shadow:0 0 7px var(--t-kuat,#4ade80)}
.f-live.off{opacity:.55}
.f-live.pulse .lv-dot{animation:lvpulse .7s ease}
@keyframes lvpulse{0%{transform:scale(1)}40%{transform:scale(2)}100%{transform:scale(1)}}
@media (max-width:820px){ .f-live{top:auto;bottom:62px;right:16px;left:auto;transform:none;padding:4px 8px} .f-live .lv-tx{display:none} }

/* Feed aktivitas LIVE berjenjang (command center) — kiri-bawah, naik dari bawah ke atas, hilang ~5s */
.f-feed{position:fixed;left:16px;bottom:104px;z-index:21;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:min(330px,42vw);max-height:52vh;pointer-events:none}
.f-feed .fd-item{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:12px;background:var(--glass,rgba(18,33,26,.82));backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--glass-line,#2A382E);box-shadow:0 6px 20px rgba(0,0,0,.35);transform:translateY(12px);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .32s ease}
.f-feed .fd-item.in{transform:translateY(0);opacity:1}
.f-feed .fd-item.out{opacity:0;transform:translateY(-6px)}
.f-feed .fd-ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;background:var(--accent-soft,#173226);color:var(--accent-ink,#8FE0B0);margin-top:1px}
.f-feed .fd-ic.login{background:#173528;color:var(--t-kuat,#2FA968)}
.f-feed .fd-bd{min-width:0;flex:1}
.f-feed .fd-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.25}
.f-feed .fd-nm{font-weight:800;font-size:12.5px;color:var(--ink,#E9F0E7)}
.f-feed .fd-role{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--accent-ink,#8FE0B0);background:var(--accent-soft,#173226);border-radius:999px;padding:1px 7px;white-space:nowrap}
.f-feed .fd-msg{font-size:11.5px;color:var(--ink2,#AEBDA9);margin-top:2px;line-height:1.35;word-break:break-word}
@media (prefers-reduced-motion:reduce){ .f-feed .fd-item{transition:opacity .2s ease} }
@media (max-width:820px){ .f-feed{display:none} }

/* Cari wilayah di peta */
.ms-hidden{display:none!important}
.f-searchbtn{display:flex;align-items:center;justify-content:center;padding:7px 10px}
.f-searchbtn i{font-size:14px}
.f-searchbtn.on{color:var(--accent-ink)}
.f-mapsearch{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:30;width:min(560px,92vw);padding:8px;display:flex;flex-direction:column;gap:6px}
.f-mapsearch .ms-box{position:relative;display:flex;align-items:center}
.f-mapsearch .ms-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
.f-mapsearch input{width:100%;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:12px;padding:13px 42px;color:var(--ink);font-size:15px;line-height:1.2;outline:none}
.f-mapsearch input:focus{border-color:var(--accent)}
.f-mapsearch input::placeholder{color:var(--muted)}
.f-mapsearch .ms-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;border-radius:8px}
.f-mapsearch .ms-x:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.ms-res{max-height:min(60vh,440px);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.ms-res:empty{display:none}
.ms-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;text-align:left;width:100%;background:none;border:none;cursor:pointer;color:var(--ink2)}
.ms-item:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.ms-it-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none;font-size:13px}
.ms-it-b{display:flex;flex-direction:column;min-width:0}
.ms-it-nm{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-it-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-hint{padding:14px;text-align:center;color:var(--muted);font-size:13px}

/* Mobile: Masa Bakti ringkas (ikon saja) agar tak tumpang tindih dgn bell/profil */
@media (max-width:560px){
  .per-btn .per-lbl, .per-btn .per-cur{display:none}
  .per-btn{padding:10px 11px;gap:6px}
}

/* Mobile: legenda default sembunyi + zoom pindah kiri (tak tabrak tools/search) */
@media (max-width:820px){
  .f-elxleg, .f-strukleg{ display:none!important }
  .f-zoom{ left:16px; transform:none }
}
/* Desktop: tombol menu (burger) di SEBELAH KIRI logo (standar aplikasi) */
@media (min-width:821px){
  .f-brand{ left:76px }
  .f-burger{ top:20px; left:16px }
}

/* ===== Papan pesan antar-tingkat (lonceng) ===== */
.bell-top{display:flex;align-items:center;justify-content:space-between;padding:6px 9px 8px;gap:8px}
.bell-top .bell-h{padding:0}
.bell-compose{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent);border-radius:9px;padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer}
.bell-compose:hover{filter:brightness(1.08)}
.bell-sec{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:9px 9px 3px;margin-top:2px;border-top:1px solid var(--line)}
.bell-msg{position:relative;cursor:pointer}
.bell-msg.unread .bell-t{font-weight:700}
.bell-udot{position:absolute;top:12px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
/* modal pesan (baca) */
.pm-meta{font-size:12.5px;color:var(--ink2);margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pm-meta i{color:var(--muted)}
.pm-badge{background:var(--accent-soft);color:var(--accent-ink);border-radius:6px;padding:1px 7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.pm-time{color:var(--muted);font-size:11.5px;margin-left:auto}
.pm-body{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word;border-top:1px solid var(--line);padding-top:14px}
/* modal tulis — textarea & select ikut gaya input pf-card */
.pf-card textarea{background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--ink);font-size:15px;outline:none;font-family:inherit;resize:vertical;line-height:1.5}
.pf-card textarea:focus{border-color:var(--accent)}
.pf-card select{background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--ink);font-size:15px;outline:none;cursor:pointer}
.pf-card select:focus{border-color:var(--accent)}
.cm-sug{display:flex;flex-direction:column;gap:3px;margin-top:4px;max-height:168px;overflow-y:auto}
.cm-sgi{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--ink);font-size:13px;cursor:pointer;text-align:left;width:100%}
.cm-sgi:hover{border-color:var(--accent);background:rgba(255,255,255,.04)}
.cm-sgi span{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;flex:none}

/* ===== Papan pesan: badge counter, footer, lampiran, modal email ===== */
/* badge lonceng = counter pesan belum dibaca (menimpa .bell-dot titik) */
.bell-dot{width:auto;min-width:16px;height:16px;top:-6px;right:-6px;border-radius:9px;padding:0 4px;background:#E5484D;color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;border:2px solid var(--bg1,#0E1A12);box-sizing:content-box;z-index:2;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.bell-all{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:6px;padding:9px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink2);font-size:12px;font-weight:700;cursor:pointer}
.bell-all:hover{border-color:var(--accent);color:var(--accent-ink)}
.bell-all i{font-size:12px}
/* lampiran di modal baca */
.pm-lampwrap{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.pm-lamp{display:flex;align-items:center;gap:12px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.pm-lamp-ic{width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-size:17px}
.pm-lamp-meta{flex:1;min-width:0}
.pm-lamp-nm{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-lamp-sz{font-size:11.5px;color:var(--muted);margin-top:2px}
.pm-lamp-dl{flex:none;background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pm-lamp-dl:disabled{opacity:.6}
/* pemilih lampiran di modal tulis */
.cm-filebtn{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:var(--sunken,#0E1712);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;color:var(--ink2);font-size:13px;font-weight:600;cursor:pointer}
.cm-filebtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.cm-fileinfo{display:flex;align-items:center;gap:9px;margin-top:8px;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--ink)}
.cm-fileinfo i{color:var(--accent-ink);font-size:16px;flex:none}
.cm-fnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-fsz{color:var(--muted);font-size:11.5px;flex:none}
.cm-fx{flex:none;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.cm-fx:hover{color:var(--sim,#e06)}
/* modal "Lihat semua" — dua panel */
.pf-card.mbox{max-width:780px;height:72vh;max-height:620px;display:flex;flex-direction:column;padding:22px 22px 18px}
.mb-wrap{flex:1;min-height:0;display:flex;gap:16px;margin-top:14px}
.mb-nav{width:188px;flex:none;display:flex;flex-direction:column;gap:6px}
.mb-tab{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink2);font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
.mb-tab:hover{background:rgba(255,255,255,.04)}
.mb-tab.active{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.mb-tab i{width:16px;text-align:center}
.mb-ct{margin-left:auto;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:800;padding:0 5px}
.mb-compose{margin-top:10px;display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:10px;border:1px dashed var(--line);background:transparent;color:var(--ink2);font-size:12.5px;font-weight:700;cursor:pointer}
.mb-compose:hover{border-color:var(--accent);color:var(--accent-ink)}
.mb-content{flex:1;min-width:0;overflow-y:auto;border-left:1px solid var(--line);padding-left:16px;display:flex;flex-direction:column;gap:4px}
.mb-item{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.mb-item:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.mb-item.unread{background:var(--accent-soft)}
.mb-item.unread .mb-t{font-weight:700}
.mb-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--sunken,#0E1712);color:var(--ink2);font-size:14px}
.mb-item.unread .mb-ic{background:var(--accent);color:var(--on-accent)}
.mb-body{flex:1;min-width:0}
.mb-t{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-d{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-time{flex:none;font-size:11px;color:var(--muted)}
.mb-empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px;margin:auto}
@media (max-width:820px){
  .pf-card.mbox{height:80vh;max-height:none}
  .mb-wrap{flex-direction:column;gap:10px}
  .mb-nav{width:auto;flex-direction:row;flex-wrap:wrap}
  .mb-tab{flex:1}
  .mb-compose{width:100%;justify-content:center;margin-top:0}
  .mb-content{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:10px}
}

/* kolom pencarian di modal Papan Pesan (kanan: search + daftar) */
.mb-right{flex:1;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:16px}
.mb-content{border-left:none!important;padding-left:0!important}
.mb-searchwrap{position:relative;flex:none;margin-bottom:10px}
.mb-searchwrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.mb-search{width:100%;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 34px;color:var(--ink);font-size:14px;outline:none}
.mb-search:focus{border-color:var(--accent)}
@media (max-width:820px){ .mb-right{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:10px} }

/* header "Papan pesan" + link Bersihkan (kanan) */
.bell-sec{display:flex;align-items:center;justify-content:space-between}
.bell-clear{background:none;border:none;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:none;cursor:pointer;padding:2px 4px;border-radius:6px}
.bell-clear:hover{color:var(--sim,#E5484D);background:rgba(255,255,255,.05)}

/* kolom cari di picker Pilih Wilayah (dua modal: Data Personil & Kelengkapan Struktur) */
.dp-psearch{position:relative;padding:8px 14px 0}
.dp-psearch i{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
.dp-psearch input{width:100%;background:var(--sunken,#0E1712);border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 32px;color:var(--ink);font-size:14px;outline:none}
.dp-psearch input:focus{border-color:var(--accent)}
/* badge jabatan di kartu personil */
.dp-bdg.jab{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
.dp-bdg.jab.inti{font-weight:700}
.dp-jmore{opacity:.75;font-weight:700;margin-left:2px}
.dp-bdg.nojab{color:#E0A23B;background:rgba(224,162,59,.12);border-color:rgba(224,162,59,.35)}
.dp-nojabn{color:#E0A23B}
.dp-nojabn i{margin-right:2px;font-size:10px}

/* ===== Editor Bidang per wilayah (redesain Struktur P3) ===== */
.kl-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;margin-bottom:6px}
.kl-pill.ok{background:rgba(47,169,104,.16);color:#6fd49a;border:1px solid rgba(47,169,104,.35)}
.kl-pill.bad{background:rgba(214,84,63,.16);color:#e88a79;border:1px solid rgba(214,84,63,.4)}
.kl-lk{font-size:10px;opacity:.5;margin-left:4px}
.kl-bed-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kl-bed-hint{font-size:10px;font-weight:500;opacity:.6;display:inline-flex;align-items:center;gap:4px}
.kl-bed-bantu{font-size:11px;color:#e0b23c;background:rgba(224,178,60,.1);border:1px solid rgba(224,178,60,.25);border-radius:8px;padding:6px 9px;margin-bottom:8px;display:flex;gap:6px;align-items:flex-start;line-height:1.35}
.kl-bed-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.kl-bed-empty{font-size:12px;opacity:.6;padding:8px 2px}
.kl-bed-row{display:flex;gap:6px;align-items:center}
.kl-bed-nm{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;color:inherit;padding:7px 10px;font-size:13px}
.kl-bed-nm:focus{outline:none;border-color:var(--accent)}
.kl-bed-save,.kl-bed-del{flex:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.kl-bed-save:hover{border-color:#2FA968;color:#6fd49a}
.kl-bed-del:hover{border-color:#D6543F;color:#e88a79}
.kl-bed-save:disabled,.kl-bed-del:disabled,.kl-bed-add button:disabled{opacity:.5;cursor:default}
.kl-bed-add{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.kl-bed-add input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;color:inherit;padding:8px 10px;font-size:13px}
.kl-bed-add input:focus{outline:none;border-color:var(--accent)}
.kl-bed-add button{flex:none;background:var(--accent);color:#07140c;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* Atur Struktur: mode switch + editor per-wilayah */
.as-modes{display:flex;gap:6px;margin-bottom:12px}
.as-mode{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;color:inherit;padding:9px 10px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.as-mode.on{background:var(--accent);color:#07140c;border-color:transparent}
.asw-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.asw-crumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12px}
.asw-up{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px;padding:2px 3px}
.asw-sep{opacity:.4;font-size:10px}
.asw-cur{font-weight:700}
.asw-down{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;color:inherit;cursor:pointer;font-size:11.5px;padding:5px 9px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.asw-h{font-size:15px;font-weight:700;margin:4px 0 2px}
.asw-sub{font-size:11px;font-weight:500;opacity:.65}
.asw-lock{display:flex;flex-direction:column;gap:3px}
.asw-lrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);font-size:12.5px}
.asw-lnm{opacity:.85}
.asw-lwho{opacity:.9;text-align:right}
.asw-empty{opacity:.45}
.asw-pick{position:absolute;top:calc(100% + 4px);right:0;z-index:40;width:min(300px,90%);background:var(--panel,#10201a);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.5);padding:8px;max-height:320px;display:flex;flex-direction:column}
.asw-pick-q{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:7px;color:inherit;padding:7px 9px;font-size:12.5px;margin-bottom:6px}
.asw-pick-q:focus{outline:none;border-color:var(--accent)}
.asw-pick-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.asw-pick-i{background:none;border:none;color:inherit;text-align:left;cursor:pointer;padding:7px 9px;border-radius:6px;font-size:12.5px}
.asw-pick-i:hover{background:rgba(255,255,255,.07)}