:root{--bg:#07111f;--s1:#0e1b2d;--s2:#13233a;--s3:#182a44;--line:#243b59;--text:#edf6ff;--muted:#91a9c5;--pri:#1bd7c9;--pri2:#4aa8ff;--warn:#f6c453;--danger:#ff6b78;--ok:#40d18b;--shadow:0 18px 50px rgba(0,0,0,.28);--r:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 75% 0,#102b45 0,transparent 28%),var(--bg);color:var(--text);line-height:1.5}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;background:linear-gradient(180deg,#0b1728,#08131f);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:900;color:#04131c;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 0 30px rgba(27,215,201,.24)}.brand-mark.large{width:62px;height:62px;border-radius:20px;font-size:1.2rem}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:.73rem}.nav-list{display:flex;flex-direction:column;gap:6px;margin-top:34px}.nav-link{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:var(--muted);transition:.2s}.nav-link span{width:25px;text-align:center;color:#b7d4ee}.nav-link:hover,.nav-link.active{color:var(--text);background:linear-gradient(90deg,rgba(27,215,201,.15),rgba(74,168,255,.07));box-shadow:inset 3px 0 var(--pri)}.sidebar-foot{margin-top:auto;padding:14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)}.sidebar-foot small,.sidebar-foot strong{display:block}.sidebar-foot small{color:var(--muted);font-size:.72rem}.sidebar-foot strong{font-size:.85rem;margin:3px 0}.main-area{min-width:0}.topbar{min-height:88px;padding:18px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(7,17,31,.78);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.topbar h1{font-size:1.2rem;margin:0 0 2px}.topbar p{margin:0;color:var(--muted);font-size:.82rem}.user-menu{display:flex;align-items:center;gap:10px}.user-menu strong,.user-menu small{display:block}.user-menu strong{font-size:.82rem}.user-menu small{font-size:.7rem;color:var(--muted)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--s3);border:1px solid var(--line);font-weight:800}.link-button{border:0;background:none;color:var(--pri);padding:6px}.content{padding:26px;max-width:1700px;margin:auto}.panel{background:linear-gradient(160deg,rgba(19,35,58,.95),rgba(12,26,44,.96));border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}.panel h2,.panel h3,.panel h4{margin-top:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.panel-head h2,.panel-head h3{margin:0}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:.82rem}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.metric-card{position:relative;overflow:hidden;padding:18px;border-radius:16px;background:linear-gradient(145deg,var(--s2),#0b192a);border:1px solid var(--line)}.metric-card:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-25px;top:-30px;background:radial-gradient(circle,rgba(27,215,201,.25),transparent 70%)}.metric-card span,.metric-card small{display:block;color:var(--muted)}.metric-card strong{display:block;font-size:1.9rem;line-height:1.2;margin:7px 0}.metric-card small{font-size:.7rem}.two-column{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}.three-column{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0}.align-start{align-items:start}.map-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.7fr);gap:20px;align-items:start}.map-stage{min-height:430px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 50%,rgba(40,101,144,.18),transparent 60%),rgba(3,12,22,.62);border:1px solid rgba(74,168,255,.16);overflow:hidden}.map-stage.compact{min-height:330px}.indonesia-svg{width:100%;height:auto;max-height:520px}.island{fill:#18334e;stroke:#2c5c7e;stroke-width:2;transition:.2s}.indonesia-svg:hover .island{fill:#1b3957}.map-marker{cursor:pointer;outline:none}.map-marker circle{fill:var(--pri);stroke:#d9fffb;stroke-width:2;filter:drop-shadow(0 0 8px rgba(27,215,201,.8));transition:.2s}.map-marker:hover circle,.map-marker:focus circle{r:14;fill:#fff}.map-marker.attention circle{fill:var(--warn);stroke:#fff4c7}.map-marker text{fill:#dbeeff;font-size:12px;font-weight:700;paint-order:stroke;stroke:#07111f;stroke-width:3;stroke-linejoin:round}.map-note{color:var(--muted);font-size:.72rem;margin:10px 0 0}.map-detail{min-height:520px}.detail-item{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text);border-radius:12px;padding:12px;margin:7px 0;display:flex;align-items:center;justify-content:space-between;text-align:left}.detail-item:hover{border-color:var(--pri);background:rgba(27,215,201,.08)}.detail-item small,.category-bar small{color:var(--muted)}.category-bar{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.mini-stats>div{padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);text-align:center}.mini-stats strong,.mini-stats span{display:block}.mini-stats strong{font-size:1.4rem}.mini-stats span{color:var(--muted);font-size:.72rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border-radius:11px;border:1px solid transparent;font-weight:700;font-size:.86rem}.btn.primary{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#04131c}.btn.secondary{background:var(--s3);border-color:var(--line);color:var(--text)}.btn.ghost{border-color:var(--line);background:transparent}.btn.small{padding:7px 10px;font-size:.76rem}.btn.full{width:100%}.button-row{display:flex;gap:8px}.alert{padding:13px 15px;border-radius:12px;margin-bottom:16px;border:1px solid}.alert.success{background:rgba(64,209,139,.1);border-color:rgba(64,209,139,.4)}.alert.danger{background:rgba(255,107,120,.1);border-color:rgba(255,107,120,.4)}.alert.warning{background:rgba(246,196,83,.1);border-color:rgba(246,196,83,.4)}.alert ul{margin:5px 0 0}.badge,.status-label{display:inline-flex;align-items:center;padding:4px 8px;border-radius:99px;font-size:.68rem;font-weight:800;letter-spacing:.03em;background:rgba(74,168,255,.12);border:1px solid rgba(74,168,255,.28);color:#b8dcff}.status-label.online,.status-label.active,.status-label.good{color:#a9f3cd;background:rgba(64,209,139,.1);border-color:rgba(64,209,139,.35)}.status-label.offline,.status-label.not_functional,.status-label.major_damage{color:#ffc1c7;background:rgba(255,107,120,.1);border-color:rgba(255,107,120,.35)}.status-label.unknown,.status-label.not_connected,.status-label.minor_damage{color:#ffe7aa;background:rgba(246,196,83,.1);border-color:rgba(246,196,83,.35)}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:0 0 auto}.status-dot.online{background:var(--ok);box-shadow:0 0 9px var(--ok)}.status-dot.offline{background:var(--danger)}.list-stack{display:flex;flex-direction:column}.device-row{display:flex;align-items:center;gap:11px;padding:12px 4px;border-bottom:1px solid var(--line)}.device-row>div{min-width:0;flex:1}.device-row strong,.device-row small{display:block}.device-row small{color:var(--muted);font-size:.73rem}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}th{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}td{font-size:.84rem}td strong,td small{display:block}td small{color:var(--muted);margin-top:3px}.filter-bar{display:flex;gap:8px;flex-wrap:wrap}.filter-bar input{min-width:260px}.filter-bar select{min-width:160px}input,select,textarea{width:100%;border:1px solid var(--line);background:#0a1728;color:var(--text);border-radius:10px;padding:10px 11px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(27,215,201,.1)}textarea{min-height:90px;resize:vertical}label{font-size:.8rem;font-weight:700;color:#c6d8e9}label input,label select,label textarea{margin-top:6px}.form-panel{max-width:1100px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.span-2{grid-column:span 2}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.stack-form{display:flex;flex-direction:column;gap:13px}.check{display:flex;align-items:center;gap:8px;font-weight:500}.check input{width:auto;margin:0}.detail-header{display:flex;align-items:center;justify-content:space-between}.detail-header h2{margin:10px 0 3px}.detail-header p{margin:0;color:var(--muted)}.badge-row{display:flex;gap:6px}.data-list{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin:0}.data-list dt{color:var(--muted);font-size:.78rem}.data-list dd{margin:0;text-align:right;font-size:.82rem}.timeline>div{padding:10px 0 10px 18px;border-left:2px solid var(--line);position:relative}.timeline>div:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--pri);left:-5px;top:16px}.timeline p,.timeline small{margin:3px 0;color:var(--muted)}.inline-form{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.inline-form summary{cursor:pointer;color:var(--pri);font-weight:700;margin-bottom:12px}.empty,.empty-state{text-align:center;color:var(--muted);padding:22px}.loading{text-align:center;color:var(--pri);padding:30px}code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}pre{white-space:pre-wrap;background:#06101d;border:1px solid var(--line);border-radius:12px;padding:14px;color:#bcefff;overflow:auto}.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pagination-wrap{margin-top:16px}.pagination{display:flex;gap:4px;list-style:none;padding:0}.page-link{display:block;padding:6px 10px;border:1px solid var(--line);border-radius:8px}.page-item.active .page-link{background:var(--pri);color:#06101d}.page-item.disabled{opacity:.4}.login-page{min-height:100vh;display:grid;place-items:center;padding:22px;overflow:hidden}.login-ambient{position:fixed;inset:0;background:radial-gradient(circle at 25% 15%,rgba(27,215,201,.2),transparent 30%),radial-gradient(circle at 80% 70%,rgba(74,168,255,.2),transparent 30%);animation:pulse 7s ease-in-out infinite alternate}.login-card{position:relative;width:min(460px,100%);padding:30px;border:1px solid var(--line);border-radius:24px;background:rgba(10,23,40,.9);backdrop-filter:blur(16px);box-shadow:var(--shadow)}.login-brand{display:flex;align-items:center;gap:16px;margin-bottom:24px}.login-brand h1{margin:0}.login-brand p{margin:4px 0 0;color:var(--muted)}.public-link{display:block;text-align:center;margin-top:18px;color:var(--pri);font-size:.82rem}.public-page{min-height:100vh}.public-header{height:74px;padding:13px max(24px,5vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.public-main{max-width:1300px;margin:auto;padding:50px 24px}.hero{max-width:850px;margin-bottom:35px}.hero h1{font-size:clamp(2rem,5vw,4rem);line-height:1.08;margin:12px 0}.hero p{color:var(--muted);font-size:1.05rem}.eyebrow{color:var(--pri);font-size:.75rem;font-weight:900;letter-spacing:.17em}.public-map-wrap{min-height:420px;position:relative}.map-legend{color:var(--muted);font-size:.75rem;text-align:center}.mobile-only{display:none}.icon-button{border:1px solid var(--line);background:var(--s2);color:var(--text);border-radius:10px;padding:8px}fieldset{border:1px solid var(--line);border-radius:12px;padding:13px}legend{padding:0 5px;color:var(--muted);font-size:.75rem}.public-page .panel{margin-top:20px}@keyframes pulse{to{filter:hue-rotate(20deg);transform:scale(1.03)}}@media(max-width:1150px){.metric-grid{grid-template-columns:repeat(2,1fr)}.two-column,.map-layout{grid-template-columns:1fr}.three-column{grid-template-columns:1fr 1fr}.map-detail{min-height:auto}}@media(max-width:780px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-285px;transition:.25s;width:270px}.sidebar-open .sidebar{left:0}.mobile-only{display:inline-grid}.topbar{padding:13px 16px}.topbar p,.user-menu>div:not(.avatar){display:none}.content{padding:16px}.metric-grid,.three-column,.form-grid,.docs-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.panel{padding:15px}.filter-bar{display:grid;width:100%}.filter-bar input,.filter-bar select{min-width:0}.detail-header{align-items:flex-start;gap:12px}.public-main{padding:35px 16px}.hero h1{font-size:2.25rem}.map-stage{min-height:300px}}


/* ASPAK Connect province choropleth map */
.map-panel-heading{align-items:flex-end}.map-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.map-indicator-label{display:grid;gap:4px;min-width:230px}.map-indicator-label span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.map-indicator-label select{padding:7px 34px 7px 10px}.province-map-stage{position:relative;min-height:520px;background:#f8fafc;border-color:#d8e1eb}.province-map-stage.compact{min-height:350px}.province-map-svg{width:100%;height:auto;max-height:580px;overflow:visible}.province-map-svg path.land{fill:#d0d0d0;stroke:#fff;stroke-width:.55px;vector-effect:non-scaling-stroke;transition:fill .25s ease,opacity .2s ease,stroke .2s ease;cursor:pointer}.province-map-svg path.land:hover{opacity:.8;stroke:#172033;stroke-width:1.1px}.province-map-svg path.map-neighbour{fill:#edf1f5!important;opacity:.6;pointer-events:none}.province-map-svg path.map-no-data{fill:#d0d0d0!important}.province-map-svg path.map-score-0-20{fill:#ef4444!important}.province-map-svg path.map-score-21-40{fill:#f59e0b!important}.province-map-svg path.map-score-41-60{fill:#fde047!important}.province-map-svg path.map-score-61-80{fill:#34d399!important}.province-map-svg path.map-score-81-100{fill:#2d9cdb!important}.province-map-svg path.map-selected{stroke:#111827!important;stroke-width:2px!important;filter:drop-shadow(0 0 4px rgba(17,24,39,.4))}.province-map-legend{position:absolute;left:14px;bottom:14px;z-index:5;display:grid;gap:5px;min-width:205px;padding:11px 13px;border:1px solid #d1d5db;border-radius:10px;background:rgba(255,255,255,.95);color:#1f2937;box-shadow:0 8px 24px rgba(15,23,42,.12);font-size:.7rem}.province-map-legend strong{font-size:.75rem}.province-map-legend span{display:flex;align-items:center;gap:7px}.map-color{width:15px;height:15px;border:1px solid rgba(17,24,39,.3);border-radius:2px;display:inline-block}.map-color.no-data{background:#d0d0d0}.map-color.score-0-20{background:#ef4444}.map-color.score-21-40{background:#f59e0b}.map-color.score-41-60{background:#fde047}.map-color.score-61-80{background:#34d399}.map-color.score-81-100{background:#2d9cdb}.compact-legend{grid-template-columns:repeat(2,auto);min-width:0}.map-tooltip{position:absolute;z-index:20;max-width:320px;padding:8px 10px;border-radius:8px;background:rgba(17,24,39,.94);color:#fff;font-size:.72rem;box-shadow:0 8px 24px rgba(0,0,0,.22);pointer-events:none}.map-tooltip small{color:#d1d5db}.map-zoom-controls{position:absolute;right:14px;top:14px;z-index:8;display:grid;gap:7px}.map-zoom-controls button{width:36px;height:36px;border:0;border-radius:8px;background:#1667b1;color:#fff;font-size:1.05rem;font-weight:900;box-shadow:0 5px 12px rgba(15,23,42,.18)}.map-zoom-controls button:first-child{background:#218838}.map-zoom-controls button:nth-child(2){background:#c9302c}.map-zoom-controls button:hover{filter:brightness(1.08);transform:translateY(-1px)}.province-map-stage .map-marker circle{fill:#dc2626;stroke:#fff;stroke-width:1px}.province-map-stage .map-marker text{fill:#111827;stroke:#fff;stroke-width:2px;font-size:7px}.province-map-stage .map-marker.attention circle{fill:#f59e0b}.province-map-stage~.map-note{color:var(--muted)}
@media(max-width:780px){.map-panel-heading{align-items:flex-start}.map-toolbar{width:100%}.map-indicator-label{min-width:100%;width:100%}.province-map-stage{min-height:360px}.province-map-legend{position:static;margin:10px;width:calc(100% - 20px)}.compact-legend{grid-template-columns:1fr 1fr}.map-zoom-controls{top:8px;right:8px}.province-map-svg{min-width:680px}.province-map-stage{overflow:auto;justify-content:flex-start}}