:root{
  --bg:#04070a; --pn:rgba(10,16,22,.94); --pn2:#0f1820; --bd:#1d2b36; --bd2:#2b3f4e;
  --tx:#d7dfe5; --mu:#7f909c; --ac:#f2b33d; --rd:#ff5b47; --gn:#6fd18d; --bl:#6cc3ff; --vi:#e27bff;
  --pw:clamp(238px,20.5vw,330px); --th:44px;
  font-size:clamp(11px,calc(.36vw + 6.7px),14px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--tx);
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
#map{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}


button{font:inherit;color:inherit}
.btn{background:#15212b;border:1px solid var(--bd2);border-radius:6px;padding:.42em .78em;cursor:pointer;
  white-space:nowrap;transition:background .12s,border-color .12s,transform .06s}
.btn:hover:not(:disabled){border-color:var(--ac);background:#1c2b38}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.pri{background:var(--ac);color:#17120a;border-color:var(--ac);font-weight:600}
.btn.pri:hover{filter:brightness(1.1)}
.btn.on{background:#23381e;border-color:var(--gn);color:#cdf3d8}
.btn.warn{border-color:#8a3a30;color:#ffc9c0}
.btn.alarm{background:#5c1712;border-color:var(--rd);color:#fff;font-weight:600;animation:pulse 1.4s infinite}
.btn:disabled{opacity:.38;cursor:default}
.btn.sm{padding:.28em .6em;font-size:.94em}
.btn.dflt{box-shadow:inset 0 0 0 1px rgba(242,179,61,.5)}
.seg{display:inline-flex;border:1px solid var(--bd2);border-radius:6px;overflow:hidden;vertical-align:middle;max-width:100%}
.seg button{background:#121d26;border:0;border-right:1px solid var(--bd2);padding:.4em .6em;cursor:pointer;flex:1;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{background:#1b2a36}
.seg button.on{background:var(--ac);color:#17120a;font-weight:600}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(255,91,71,.22)}}


[hidden]{display:none!important}