/* NusaPeta — dark glass UI, ikon Lucide */
:root{
  --bg:#0b101d; --bg2:#121a2b; --panel:rgba(15,21,36,.94); --panel-solid:#0f1524;
  --line:rgba(148,163,184,.13); --line2:rgba(148,163,184,.22);
  --txt:#e6ebf4; --mut:#8d99b0; --mut2:#64708a;
  --acc:#45d0c3; --acc-dim:rgba(69,208,195,.13); --acc-line:rgba(69,208,195,.35);
  --blue:#62a8f5; --danger:#f28b8b; --warn:#e8d06b; --ok:#67d391;
  --r:12px; --rs:9px;
  font-size:15px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.hidden{display:none!important}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
code{background:rgba(148,163,184,.14);padding:1px 5px;border-radius:5px;font-size:.85em}
.muted{color:var(--mut)}
svg.lucide{width:16px;height:16px;stroke-width:2;flex:none;vertical-align:-2px}

/* ---------- topbar ---------- */
#topbar{position:fixed;inset:0 0 auto 0;height:54px;z-index:1200;display:flex;align-items:center;gap:8px;
  padding:0 12px;background:var(--panel);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;padding-right:4px}
.brand .logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--acc-dim),rgba(98,168,245,.14));border:1px solid var(--acc-line)}
.brand .logo svg{width:16px;height:16px;color:var(--acc)}
.brand .bt{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-size:15.5px;letter-spacing:.2px}
.brand small{color:var(--mut);font-size:10px;letter-spacing:.6px;text-transform:uppercase}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(148,163,184,.08);border:1px solid var(--line);color:var(--txt);border-radius:var(--rs);
  min-width:36px;height:36px;cursor:pointer;flex:none;transition:background .12s,border-color .12s}
.tbtn svg{width:17px;height:17px}
.tbtn:hover{background:rgba(148,163,184,.16);border-color:var(--line2)}
.tbtn.accent{color:var(--acc);border-color:var(--acc-line);background:var(--acc-dim)}
.tbtn.accent:hover{background:rgba(69,208,195,.22)}
.tsep{width:1px;height:22px;background:var(--line2);margin:0 2px;flex:none}
#search-wrap{flex:1;position:relative;max-width:520px}
#search-wrap .search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mut2);pointer-events:none}
#search-wrap .search-ic svg{width:15px;height:15px}
#search-input{width:100%;height:36px;border-radius:var(--rs);border:1px solid var(--line);
  background:rgba(148,163,184,.08);color:var(--txt);padding:0 12px 0 34px;font-size:13.5px;outline:none;transition:border-color .12s}
#search-input::placeholder{color:var(--mut2)}
#search-input:focus{border-color:var(--acc-line);background:rgba(148,163,184,.11)}
#search-results{position:absolute;top:42px;left:0;right:0;background:var(--panel-solid);
  border:1px solid var(--line);border-radius:10px;max-height:320px;overflow:auto;z-index:1300;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.sr-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px}
.sr-item:hover{background:rgba(148,163,184,.09)}
.sr-item small{color:var(--mut);display:block;margin-top:2px}
#prov-select{height:36px;border-radius:var(--rs);border:1px solid var(--line);background:var(--bg2);
  color:var(--txt);max-width:200px;font-size:12.5px;padding:0 8px}

/* ---------- sidebar ---------- */
#sidebar{position:fixed;top:54px;left:0;bottom:0;width:336px;z-index:1100;background:var(--panel);
  backdrop-filter:blur(14px);border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .25s ease}
#sidebar.closed{transform:translateX(-350px)}
.side-head{display:flex;align-items:center;gap:9px;padding:13px 15px 8px;font-size:14.5px}
.side-head svg{color:var(--acc)}
.badge{background:rgba(148,163,184,.13);color:var(--mut);border-radius:20px;padding:1px 8px;font-size:10.5px;font-weight:600}
.badge.acc{background:var(--acc-dim);color:var(--acc)}
.side-search{padding:2px 13px 4px}
#layer-search{width:100%;height:34px;border-radius:var(--rs);border:1px solid var(--line);
  background:rgba(148,163,184,.08);color:var(--txt);padding:0 11px;font-size:12.5px;outline:none}
#layer-search::placeholder{color:var(--mut2)}
#layer-search:focus{border-color:var(--acc-line)}
.sec-title{padding:9px 15px 5px;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut2);font-weight:700}
.sec-row{display:flex;align-items:center;justify-content:space-between;padding:10px 15px 4px}
.sec-row .sec-title{padding:0}

/* layer aktif */
#sec-active{border-bottom:1px solid var(--line);padding-bottom:8px}
#active-list{max-height:208px;overflow-y:auto;padding:2px 9px 0;scrollbar-width:thin}
.empty-hint{color:var(--mut2);font-size:12px;padding:6px 6px 8px;line-height:1.45}
.al-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:var(--rs)}
.al-row:hover{background:rgba(148,163,184,.07)}
.al-name{flex:1;font-size:12.5px;line-height:1.25;overflow:hidden}
.al-name .gg{display:block;color:var(--mut2);font-size:10px}
.al-btn{background:none;border:none;color:var(--mut);cursor:pointer;padding:3px;border-radius:6px;display:inline-flex}
.al-btn:hover{color:var(--txt);background:rgba(148,163,184,.13)}
.al-btn svg{width:13.5px;height:13.5px}
.al-row.hid .al-name{opacity:.45}
.al-op{width:56px;accent-color:var(--acc);height:12px}
.al-order{display:flex;flex-direction:column;gap:0}
.al-order .al-btn{padding:0 3px;height:11px}
.al-order .al-btn svg{width:11px;height:11px}

/* pintasan & basemap */
#presets{display:flex;flex-wrap:wrap;gap:6px;padding:2px 13px 6px}
.preset{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:rgba(148,163,184,.07);color:var(--txt);border-radius:18px;padding:5px 12px;font-size:12px;cursor:pointer;
  transition:border-color .12s,background .12s}
.preset svg{width:13px;height:13px;color:var(--acc)}
.preset:hover{border-color:var(--acc-line);background:var(--acc-dim)}
#basemap-list{display:flex;flex-wrap:wrap;gap:6px;padding:2px 13px 10px}
.bmchip{border:1px solid var(--line);background:rgba(148,163,184,.07);color:var(--mut);border-radius:var(--rs);
  padding:5px 10px;font-size:12px;cursor:pointer}
.bmchip.on{border-color:var(--acc-line);color:var(--acc);background:var(--acc-dim)}

/* katalog */
#catalog{flex:1;overflow-y:auto;padding:0 8px 18px;scrollbar-width:thin}
#catalog::-webkit-scrollbar,#active-list::-webkit-scrollbar,#ai-chat::-webkit-scrollbar,#info-body::-webkit-scrollbar{width:8px}
#catalog::-webkit-scrollbar-thumb,#active-list::-webkit-scrollbar-thumb,#ai-chat::-webkit-scrollbar-thumb,#info-body::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:8px}
.grp-head{display:flex;align-items:center;gap:9px;padding:8px 8px;cursor:pointer;border-radius:var(--rs);
  font-size:13px;font-weight:600;user-select:none}
.grp-head:hover{background:rgba(148,163,184,.06)}
.grp-head .gic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:rgba(148,163,184,.09);border:1px solid var(--line)}
.grp-head .gic svg{width:14px;height:14px;color:var(--acc)}
.grp-head .caret{color:var(--mut2);display:inline-flex;transition:transform .15s}
.grp-head .caret svg{width:12px;height:12px}
.grp.open .grp-head .caret{transform:rotate(90deg)}
.grp-head .cnt{margin-left:auto;color:var(--mut2);font-weight:500;font-size:10.5px}
.grp-desc{display:none;padding:0 8px 6px 43px;color:var(--mut);font-size:11.5px;line-height:1.45}
.grp.open .grp-desc{display:block}
.grp-items{display:none;padding-bottom:4px}
.grp.open .grp-items{display:block}
.lyr{border:1px solid transparent;border-radius:10px;padding:6px 8px;margin:2px 2px}
.lyr:hover{background:rgba(148,163,184,.05);border-color:var(--line)}
.lyr-row{display:flex;align-items:flex-start;gap:9px}
.lyr-row input[type=checkbox]{accent-color:var(--acc);width:14px;height:14px;flex:none;cursor:pointer;margin-top:2px}
.lyr-name{flex:1;font-size:12.5px;line-height:1.3;cursor:pointer}
.lyr-name .ld{display:block;color:var(--mut);font-size:11px;margin-top:1px;line-height:1.35}
.lyr .tag{display:inline-block;font-size:9.5px;color:var(--acc);border:1px solid var(--acc-line);border-radius:4px;padding:0 4px;margin-left:4px;vertical-align:1px}
.lyr-tools{display:none;align-items:center;gap:8px;padding:6px 0 0 23px}
.lyr.on .lyr-tools{display:flex}
.lyr-tools input[type=range]{flex:1;accent-color:var(--blue);height:12px}
.lyr-tools .val{font-size:10px;color:var(--mut);width:32px;text-align:right}
.lyr-tools .lbtn{background:none;border:1px solid var(--line);color:var(--mut);border-radius:6px;
  font-size:10.5px;padding:2.5px 7px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.lyr-tools .lbtn svg{width:11px;height:11px}
.lyr-tools .lbtn:hover{color:var(--acc);border-color:var(--acc-line)}
.lyr-tools select{background:var(--bg2);color:var(--txt);border:1px solid var(--line);border-radius:6px;font-size:11px;height:23px}
.legend-embed{padding:6px 0 0 23px}
.legend-embed img{max-width:100%;border-radius:6px;background:#fff}
.legend-embed .sw{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--mut);padding:1px 0}
.legend-embed .sw img{width:24px;height:13px;object-fit:cover}
.side-foot{padding:9px 15px 12px;font-size:10px;color:var(--mut2);border-top:1px solid var(--line);line-height:1.5}
.no-match{padding:20px 14px;color:var(--mut);font-size:12.5px}

/* geoportal */
.gp-ctl{padding:4px 13px 8px;display:flex;gap:6px}
.gp-ctl select{flex:1;background:var(--bg2);color:var(--txt);border:1px solid var(--line);border-radius:8px;height:32px;font-size:12px}
.gp-ctl button{border:1px solid var(--line);background:rgba(148,163,184,.08);color:var(--txt);border-radius:8px;padding:0 12px;cursor:pointer;font-size:12px}
.gp-layers{max-height:250px;overflow:auto;padding:0 13px 10px;scrollbar-width:thin}
.gp-layer{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 2px;border-bottom:1px solid var(--line)}
.gp-layer span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-layer button{border:none;background:var(--acc-dim);color:var(--acc);border-radius:6px;padding:2.5px 9px;cursor:pointer;font-size:10.5px;white-space:nowrap}
.gp-layer button:disabled{opacity:.6}

/* ---------- map & floating ---------- */
#map{position:fixed;inset:54px 0 0 336px;background:#090e1a}
body.sidebar-closed #map{inset:54px 0 0 0}
.leaflet-container{background:#090e1a;font-family:inherit}
.leaflet-control-attribution{background:rgba(9,13,24,.78)!important;color:#77839c!important;font-size:10px!important}
.leaflet-control-attribution a{color:var(--blue)!important}
.leaflet-bar a{background:var(--panel-solid)!important;color:var(--txt)!important;border-color:var(--line)!important}
.leaflet-control-scale-line{background:rgba(9,13,24,.62)!important;color:var(--txt)!important;border-color:var(--line2)!important}

#timeline{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;
  align-items:center;gap:8px;background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:14px;padding:8px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tl-title{font-size:12px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tl-title svg{width:13px;height:13px;color:var(--acc)}
#tl-date{background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:3px 8px;font-size:12.5px}
.tlbtn{display:inline-flex;align-items:center;justify-content:center;background:rgba(148,163,184,.09);
  border:1px solid var(--line);color:var(--txt);border-radius:8px;width:30px;height:28px;cursor:pointer}
.tlbtn svg{width:13px;height:13px}
.tlbtn:hover{background:rgba(148,163,184,.16)}
.tlbtn.on{background:var(--acc-dim);border-color:var(--acc-line);color:var(--acc)}
#tl-info{font-size:11px;color:var(--mut);max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#loadchip{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:5px 14px;font-size:12px;color:var(--acc)}
#loadchip .spin{animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
#coordbar{position:fixed;bottom:16px;left:352px;z-index:900;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:4px 10px;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
body.sidebar-closed #coordbar{left:16px}

#measure-bar{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px}
.mbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:rgba(148,163,184,.08);color:var(--txt);border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer}
.mbtn svg{width:13px;height:13px}
.mbtn.active{background:var(--acc-dim);border-color:var(--acc-line);color:var(--acc)}
.measure-tip{background:var(--panel-solid)!important;border:1px solid var(--acc-line)!important;color:var(--txt)!important;
  border-radius:8px!important;font-size:11.5px!important;box-shadow:0 8px 20px rgba(0,0,0,.5)}

/* ---------- info panel ---------- */
#info-panel{position:fixed;top:64px;right:12px;width:352px;max-height:calc(100% - 86px);z-index:1050;
  background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(0,0,0,.5)}
#info-panel header{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:13.5px}
#info-body{overflow-y:auto;padding:10px 14px 14px;scrollbar-width:thin}
.isec{margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.isec:last-child{border-bottom:none;margin-bottom:0}
.isec h4{display:flex;align-items:center;gap:7px;margin:0 0 7px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:1.1px;color:var(--acc)}
.isec h4 svg{width:13px;height:13px}
.isec .kv{display:flex;gap:8px;font-size:12.5px;padding:2px 0}
.isec .kv b{color:var(--mut);font-weight:500;min-width:96px;flex:none}
.isec .addr{font-size:12.5px;line-height:1.5}
.isec table{width:100%;border-collapse:collapse;font-size:11px}
.isec table td{padding:2.5px 4px;border-bottom:1px solid var(--line);word-break:break-word;vertical-align:top}
.isec table td:first-child{color:var(--mut);max-width:128px}
.skel{height:11px;border-radius:6px;background:linear-gradient(90deg,rgba(148,163,184,.07),rgba(148,163,184,.16),rgba(148,163,184,.07));
  background-size:200% 100%;animation:sk 1.2s infinite;margin:5px 0;width:80%}
@keyframes sk{to{background-position:-200% 0}}
.info-err{color:var(--danger);font-size:11.5px}
.acc-h{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;padding:4px 0;user-select:none}
.acc-h .caret{color:var(--mut2);display:inline-flex}
.acc-h .caret svg{width:11px;height:11px}
.acc-b{display:none}
.acc.open .acc-b{display:block}
.acc.open .caret{transform:rotate(90deg)}
.acc{margin:2px 0}

/* ---------- AI panel ---------- */
#ai-panel{position:fixed;top:64px;right:12px;width:400px;max-height:calc(100% - 86px);z-index:1060;
  background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.55)}
#ai-panel header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.ai-h{display:flex;align-items:center;gap:10px}
.ai-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,rgba(69,208,195,.18),rgba(98,168,245,.18));border:1px solid var(--acc-line)}
.ai-logo svg{width:16px;height:16px;color:var(--acc)}
.ai-t{display:flex;flex-direction:column;line-height:1.2}
.ai-t b{font-size:13.5px}
.ai-t small{color:var(--mut);font-size:10.5px;display:flex;align-items:center;gap:4px}
.ai-t small .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block}
.ai-t small.off .dot{background:var(--danger)}
#ai-actions{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px 4px}
#ai-actions .abtn{flex:1 1 40%}
#ai-clear{flex:0 0 44px!important}
.abtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;
  border:1px solid var(--line);background:rgba(148,163,184,.08);color:var(--txt);padding:8px 10px;
  font-size:12px;cursor:pointer;font-weight:600}
.abtn svg{width:14px;height:14px;color:var(--acc)}
.abtn:hover{background:rgba(148,163,184,.14)}
.abtn.primary{background:var(--acc-dim);border-color:var(--acc-line);color:var(--acc)}
.abtn:disabled{opacity:.55;cursor:wait}
#ai-chat{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;min-height:120px}
.ai-welcome{font-size:12.5px;line-height:1.55;color:var(--txt);padding:4px 2px}
.ai-welcome .muted{font-size:12px}
.bub{border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.55;max-width:100%}
.bub.user{align-self:flex-end;background:rgba(98,168,245,.14);border:1px solid rgba(98,168,245,.3);max-width:85%}
.bub.ai{align-self:stretch;background:rgba(148,163,184,.07);border:1px solid var(--line)}
.bub.ai h3,.bub.ai h4{margin:9px 0 4px;font-size:12.5px;color:var(--acc)}
.bub.ai h3:first-child,.bub.ai h4:first-child{margin-top:0}
.bub.ai ul,.bub.ai ol{margin:4px 0;padding-left:18px}
.bub.ai li{margin:3px 0}
.bub.ai p{margin:6px 0}
.bub.ai strong{color:var(--txt)}
.bub.err{align-self:stretch;background:rgba(242,139,139,.08);border:1px solid rgba(242,139,139,.35);color:var(--danger);font-size:12px}
.ai-chart{align-self:stretch;background:rgba(148,163,184,.05);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ai-chart h5{margin:0 0 7px;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);display:flex;gap:6px;align-items:center}
.ai-chart h5 svg{width:12px;height:12px;color:var(--blue)}
.ai-chart canvas{width:100%;height:120px;display:block}
.ai-loading{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12px;padding:4px 2px}
.ai-loading svg{width:14px;height:14px;color:var(--acc);animation:rot 1s linear infinite}
#ai-form{display:flex;gap:8px;padding:10px 14px 14px}
#ai-input{flex:1;resize:none;background:rgba(148,163,184,.08);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);padding:8px 11px;font-size:12.5px;outline:none;font-family:inherit}
#ai-input:focus{border-color:var(--acc-line)}
#ai-send{width:38px;height:38px}

/* ---------- panel pemodelan ---------- */
#model-panel{position:fixed;top:64px;right:12px;width:430px;max-height:calc(100% - 86px);z-index:1055;
  background:var(--panel);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.55)}
#model-panel header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.m-tabs{display:flex;gap:5px;padding:10px 14px 2px;flex-wrap:wrap}
.m-tabs button{border:1px solid var(--line);background:rgba(148,163,184,.07);color:var(--mut);
  border-radius:18px;padding:5px 12px;font-size:11.5px;cursor:pointer;font-weight:600}
.m-tabs button.active{background:var(--acc-dim);border-color:var(--acc-line);color:var(--acc)}
#model-body{overflow-y:auto;padding:10px 14px 14px;scrollbar-width:thin}
.f-intro{font-size:12px;line-height:1.55;color:var(--mut);margin-bottom:10px}
.f-intro b{color:var(--txt)}
.f-row{margin:8px 0}
.f-row>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut2);margin-bottom:4px}
.f-row select{width:100%;background:var(--bg2);color:var(--txt);border:1px solid var(--line);border-radius:8px;height:32px;font-size:12.5px}
.f-row2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0;font-size:12px;color:var(--mut)}
.f-row2 select,.f-row2 input[type=number]{background:var(--bg2);color:var(--txt);border:1px solid var(--line);border-radius:7px;height:28px;font-size:12px;padding:0 6px}
.w70{width:70px}.w60{width:60px}
.chk-grid{display:flex;flex-direction:column;gap:2px;max-height:170px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt);cursor:pointer;padding:1.5px 0}
.chk input{accent-color:var(--acc)}
.f-note{font-size:11px;color:var(--mut);line-height:1.5;margin:6px 0}
.f-note.caveat{border-left:3px solid var(--warn);padding-left:8px;color:var(--mut)}
.res-card{background:rgba(148,163,184,.05);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-top:10px}
.res-card h4{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:12px;color:var(--acc)}
.res-card h4 svg{width:13px;height:13px}
.res-card canvas{width:100%;display:block;margin:7px 0}
.mtable{width:100%;border-collapse:collapse;font-size:11px;margin:6px 0}
.mtable th{text-align:left;color:var(--mut2);font-weight:600;padding:3px 5px;border-bottom:1px solid var(--line2)}
.mtable td{padding:3px 5px;border-bottom:1px solid var(--line);word-break:break-word}
.mtable td.sig,.sig{color:var(--ok);font-weight:600}
.res-card .abtn{margin:4px 4px 2px 0;padding:7px 12px;font-size:11.5px}
#rg-out,#fc-out,#mo-out,#km-out{margin-top:4px}
.ds-info{font-size:11.5px;color:var(--mut);background:rgba(148,163,184,.06);border:1px solid var(--line);border-radius:9px;padding:7px 10px;margin-bottom:9px;line-height:1.5}
.ds-info b{color:var(--txt)}
.ds-info .lbtn{background:none;border:1px solid var(--line);color:var(--acc);border-radius:6px;font-size:10.5px;padding:2px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;margin-left:4px}
.ds-info .lbtn svg{width:11px;height:11px}
.ds-info details{margin-top:5px;font-size:11px}
.ds-info summary{list-style:none}
.ds-info details .f-note{max-height:120px;overflow-y:auto;margin:4px 0 0}

/* ---------- legends ---------- */
#legends{position:fixed;right:12px;bottom:56px;z-index:1040;display:flex;flex-direction:column;gap:8px;max-height:45%;overflow-y:auto;scrollbar-width:thin}
.lg-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;width:230px;backdrop-filter:blur(12px)}
.lg-card header{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;font-size:11px;border-bottom:1px solid var(--line)}
.lg-card header b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-card header button{background:none;border:none;color:var(--mut);cursor:pointer;font-size:12px}
.lg-body{padding:8px 10px;font-size:10.5px}
.lg-body img{max-width:100%;background:#fff;border-radius:5px}
.lg-body .sw{display:flex;align-items:center;gap:6px;padding:1.5px 0;color:var(--mut)}
.lg-body .sw img{width:24px;height:13px}
.lg-grad{width:100%;height:12px;border-radius:6px}
.lg-ticks{display:flex;justify-content:space-between;color:var(--mut);font-size:9.5px;margin-top:2px}

/* ---------- toasts ---------- */
#toasts{position:fixed;top:64px;right:372px;z-index:1400;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel-solid);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:10px;padding:9px 14px;font-size:12px;max-width:330px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:tin .2s ease}
.toast.error{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}

/* ---------- about ---------- */
#about-modal{position:fixed;inset:0;z-index:1500;background:rgba(4,7,14,.66);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;width:580px;max-width:100%;
  max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-card header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px}
.modal-body{padding:14px 18px 18px;overflow-y:auto;font-size:13px;line-height:1.55}
.modal-body ul{padding-left:18px}
.modal-body li{margin:5px 0}
.modal-body svg{width:13px;height:13px}

/* responsive */
@media (max-width:900px){
  #sidebar{width:86vw}
  #map{inset:54px 0 0 0!important}
  .brand small,#prov-select,.tsep{display:none}
  #info-panel,#ai-panel{width:min(94vw,380px)}
  #toasts{right:12px;top:112px}
  #coordbar{left:12px}
}