:root{font-family:Avenir Next,Segoe UI,system-ui,sans-serif;color:#1d1c1a;background:#e9e7e2}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}html,body{overscroll-behavior:none}.app-shell{width:100%;height:100dvh;min-height:100dvh;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 15%,#f7f5ee,#ece8dc 45%,#ddd8cc)}.map-canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.map-canvas-wrap canvas{touch-action:none}.app-title{position:absolute;z-index:4;top:10px;left:50%;transform:translate(-50%);pointer-events:none;text-align:center}.hud{position:absolute;z-index:2;top:auto;left:166px;bottom:14px;width:220px;background:#ffffffc4;border:1px solid rgba(50,45,38,.16);border-radius:12px;padding:8px 9px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.hud h1{margin:0;font-size:1rem;letter-spacing:.01em}.brand-title{margin:0;font-size:clamp(1.45rem,2.8vw,2rem);letter-spacing:.03em;line-height:1.15;text-align:center}.brand-ids{color:#0f172a;font-weight:800}.brand-tech{color:#334155;font-weight:700}.brand-gradient{font-weight:900;background:linear-gradient(120deg,#f97316,#facc15,#22c55e,#0ea5e9,#f97316);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brandFlow 6s linear infinite;text-shadow:0 0 14px rgba(249,115,22,.22)}@keyframes brandFlow{0%{background-position:0% 50%}to{background-position:300% 50%}}.hud p{margin:0;font-size:.9rem;line-height:1.3}.hud h2{margin:0;font-size:.8rem;letter-spacing:.02em;color:#111827}.control-grid{margin-top:6px;display:grid;gap:6px}.control-grid label{display:grid;gap:3px;font-size:.72rem;color:#2a2723}.control-grid input[type=range]{width:100%;height:16px}.hud code{font-family:SF Mono,Menlo,Monaco,Consolas,monospace}.dun-panel{position:absolute;z-index:3;top:14px;right:14px;width:min(320px,calc(100% - 28px));max-height:calc(100% - 28px);display:flex;flex-direction:column;gap:8px;background:linear-gradient(165deg,#ffffff4d,#f0f6ff24);border:1px solid rgba(255,255,255,.45);border-radius:16px;padding:12px;-webkit-backdrop-filter:blur(15px) saturate(135%);backdrop-filter:blur(15px) saturate(135%);box-shadow:0 18px 30px #0003}.rumah-panel{position:absolute;z-index:3;left:14px;bottom:14px;width:min(140px,calc((100% - 28px)/2));background:linear-gradient(165deg,#ffffff4d,#f0f6ff24);border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:10px;-webkit-backdrop-filter:blur(15px) saturate(135%);backdrop-filter:blur(15px) saturate(135%);box-shadow:0 18px 30px #0003}.rumah-panel .panel-header{margin-bottom:6px}.rumah-panel h2{margin:0;font-size:.82rem;letter-spacing:.02em;color:#111827;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.dun-panel.is-collapsed,.rumah-panel.is-collapsed{max-height:80px;overflow:hidden}.building-editor{margin-bottom:8px;display:grid;gap:4px}.building-editor-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.building-editor label{font-size:.64rem;font-weight:700;color:#111827;letter-spacing:.02em;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.building-editor-actions{display:flex;align-items:center;gap:5px}.building-zoom-btn{border:1px solid rgba(255,255,255,.35);background:#0f172a61;color:#f8fafc;border-radius:7px;font-size:.62rem;font-weight:700;padding:3px 7px;cursor:pointer}.building-zoom-btn:disabled{opacity:.5;cursor:not-allowed}.building-edit-btn{width:24px;height:24px;border:1px solid rgba(255,255,255,.35);background:#0f172a61;color:#f8fafc;border-radius:7px;font-size:.72rem;font-weight:800;line-height:1;cursor:pointer}.building-editor input{width:100%;border:1px solid rgba(255,255,255,.35);background:#1f29375c;color:#f8fafc;border-radius:8px;padding:6px 8px;font-size:.72rem;outline:none}.building-editor input::placeholder{color:#f1f5f9c7}.building-name-view{width:100%;border:1px solid rgba(255,255,255,.24);background:#1f293738;color:#e2e8f0;border-radius:8px;padding:6px 8px;font-size:.72rem;font-weight:600;line-height:1.2}.kampung-panel{position:absolute;z-index:20;left:14px;top:120px;bottom:auto;width:min(140px,calc((100% - 28px)/2));max-height:250px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(165deg,#ffffff4d,#f0f6ff24);border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:10px;-webkit-backdrop-filter:blur(15px) saturate(135%);backdrop-filter:blur(15px) saturate(135%);box-shadow:0 18px 30px #0003}.kampung-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.kampung-panel-header h3{margin:0;font-size:.84rem;color:#111827;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.kampung-panel-header span{color:#111827;font-size:.72rem;font-weight:700;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.kampung-list{overflow:auto;display:grid;gap:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.75) rgba(255,255,255,.2)}.kampung-list::-webkit-scrollbar{width:10px}.kampung-list::-webkit-scrollbar-track{background:linear-gradient(180deg,#ffffff3d,#ffffff1a);border:1px solid rgba(255,255,255,.28);border-radius:999px;-webkit-backdrop-filter:blur(8px) saturate(130%);backdrop-filter:blur(8px) saturate(130%)}.kampung-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ffffffc7,#bfdbfe8c);border:1px solid rgba(255,255,255,.68);border-radius:999px;box-shadow:inset 0 1px #ffffffe0,0 4px 10px #0f172a33}.kampung-item{border:1px solid rgba(255,255,255,.35);background:#0f172a6b;color:#f8fafc;border-radius:8px;text-align:left;padding:5px 7px;cursor:pointer}.kampung-item.active{background:#38bdf8cc;border-color:#bae6fdf2;color:#06283d}.kampung-item-name{display:block;font-size:.7rem;font-weight:600;line-height:1.2}.kampung-item-dun{display:block;margin-top:2px;opacity:.9;font-size:.62rem}.rumah-count-panel{position:absolute;z-index:3;top:14px;right:346px;width:170px;background:linear-gradient(165deg,#ffffff52,#f0f6ff24);border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:9px 11px;-webkit-backdrop-filter:blur(15px) saturate(135%);backdrop-filter:blur(15px) saturate(135%);box-shadow:0 18px 30px #0003}.rumah-count-label{font-size:.72rem;color:#334155;font-weight:700;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.rumah-count-value{margin-top:2px;font-size:1.16rem;color:#0f172a;font-weight:900;line-height:1.1;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.dun-panel h2{margin:0;font-size:.96rem;letter-spacing:.02em;color:#111827;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.collapse-btn{border:1px solid rgba(255,255,255,.35);background:#0f172a61;color:#f8fafc;border-radius:8px;font-size:.68rem;padding:3px 7px;cursor:pointer}.dun-filter-input{width:100%;border:1px solid rgba(255,255,255,.35);background:#1f29375c;color:#f8fafc;border-radius:10px;padding:8px 10px;outline:none}.dun-filter-input::placeholder{color:#f1f5f9cc}.dun-count{font-size:.82rem;color:#f1f5f9f2}.layer-card{border:1px solid rgba(255,255,255,.28);background:#0f172a57;border-radius:9px;padding:6px 8px}.layer-toggle{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#f8fafc;-webkit-user-select:none;user-select:none;cursor:pointer}.layer-toggle input[type=checkbox]{accent-color:#22d3ee}.layer-toggle--rumah input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.jalan-toggle{margin-top:4px}.jalan-toggle input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.jalan-layer-title{margin-top:8px;color:#111827;font-size:.66rem;font-weight:800;letter-spacing:.03em;text-shadow:-1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff}.layer-subheader{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}.mini-collapse-btn{font-size:.6rem;padding:2px 6px}.tick-ui{width:15px;height:15px;border-radius:5px;border:1px solid rgba(255,255,255,.55);background:linear-gradient(160deg,#ffffff42,#0f172a33);box-shadow:inset 0 1px #ffffff73,0 2px 6px #00000040;position:relative;transition:all .18s ease}.tick-ui:after{content:"";position:absolute;width:4px;height:8px;border-right:2px solid #06283d;border-bottom:2px solid #06283d;left:5px;top:1px;transform:rotate(45deg) scale(.7);opacity:0;transition:all .18s ease}.layer-toggle--rumah input[type=checkbox]:checked+.tick-ui{background:linear-gradient(160deg,#22d3eee0,#0ea5e9b8);border-color:#bae6fdf2;box-shadow:inset 0 1px #ffffff9e,0 0 0 2px #38bdf842,0 4px 10px #0e749059}.layer-toggle--rumah input[type=checkbox]:checked+.tick-ui:after{opacity:1;transform:rotate(45deg) scale(1)}.jalan-toggle input[type=checkbox]:checked+.tick-ui{background:linear-gradient(160deg,#facc15eb,#fb923cc7);border-color:#fef08aeb;box-shadow:inset 0 1px #ffffff9e,0 0 0 2px #fbbf2442,0 4px 10px #92400e59}.jalan-toggle input[type=checkbox]:checked+.tick-ui:after{opacity:1;transform:rotate(45deg) scale(1)}.dun-list{overflow:auto;display:grid;gap:6px;padding-right:4px}.dun-item{border:1px solid rgba(255,255,255,.2);background:#0f172a73;color:#f8fafc;border-radius:9px;text-align:left;padding:7px 9px;cursor:pointer}.dun-item.active{background:#b7d209;border-color:#b7d209f2;color:#1f2937}.dun-label{pointer-events:auto;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;font-size:.36rem;font-weight:600;line-height:1.1;color:#111827;background:#ffffffeb;border:1px solid rgba(17,24,39,.26);box-shadow:0 1px 4px #0003;border-radius:3px;padding:1px 3px;white-space:nowrap;cursor:pointer}.dun-label.active{background:#b7d209;color:#1f2937;border-color:#60780ae6}.dun-label.dimmed{opacity:.4}.kampung-label{pointer-events:none;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;font-size:.46rem;font-weight:500;color:#111827e0;background:#ffffff75;border:1px solid rgba(31,41,55,.16);border-radius:3px;padding:0 3px;white-space:nowrap}.kampung-tooltip{min-width:112px;max-width:168px;background:linear-gradient(160deg,#ffffff75,#f0f6ff33);border:1px solid rgba(255,255,255,.56);border-radius:9px;padding:5px 7px;-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);box-shadow:0 12px 26px #0f172a40}.kampung-tooltip-name{font-size:.68rem;font-weight:700;color:#0f172a;line-height:1.15}.kampung-tooltip-sub{margin-top:2px;font-size:.58rem;font-weight:600;color:#334155}@media(max-width:1024px){.hud{top:62px;left:14px;bottom:auto;width:calc(100% - 28px)}.dun-panel{top:auto;bottom:14px;width:calc(100% - 28px);max-height:42%}.rumah-panel{left:14px;right:14px;bottom:14px;width:auto}.kampung-panel{left:14px;width:calc((100% - 28px)/2);max-height:240px}.rumah-count-panel{top:64px;right:14px;width:170px}}@media(max-width:768px){.app-title{top:calc(8px + env(safe-area-inset-top))}.brand-title{font-size:clamp(1.2rem,6vw,1.48rem)}.hud,.dun-panel,.rumah-panel,.kampung-panel,.rumah-count-panel{border-radius:12px;-webkit-backdrop-filter:blur(10px) saturate(125%);backdrop-filter:blur(10px) saturate(125%)}.hud{top:auto;left:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:min(176px,calc(50vw - 12px));padding:7px 8px;max-height:42dvh;overflow:auto}.dun-panel{top:calc(46px + env(safe-area-inset-top));right:8px;width:min(188px,calc(50vw - 12px));max-height:48dvh;padding:9px}.rumah-count-panel{top:calc(46px + env(safe-area-inset-top));left:8px;right:auto;width:min(176px,calc(50vw - 12px));padding:7px 9px}.kampung-panel{left:auto;right:8px;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom));width:min(188px,calc(50vw - 12px));max-height:40dvh;padding:8px}.rumah-panel{left:8px;right:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:min(176px,calc(50vw - 12px));padding:8px;max-height:34dvh;overflow:auto}.rumah-panel .layer-card{padding:6px}.rumah-panel .tick-ui{width:13px;height:13px}.rumah-panel .tick-ui:after{left:4px;top:0;width:3px;height:7px}.rumah-panel .layer-subheader{margin-top:6px;gap:6px}.rumah-panel .mini-collapse-btn{font-size:.56rem;padding:2px 5px}.dun-panel h2,.hud h2{font-size:.74rem}.rumah-panel h2{font-size:.68rem}.collapse-btn{font-size:.62rem;padding:2px 6px}.dun-item{padding:6px 7px;font-size:.72rem}.layer-toggle{font-size:.68rem}.jalan-layer-title{font-size:.62rem}.rumah-count-label{font-size:.64rem}.rumah-count-value{font-size:1rem}}