:root{
  --bg:#10161c;--panel:#171f27;--panel2:#1f2933;--line:#2d3a46;--text:#e6ebf0;--muted:#9aa8b5;--accent:#f2b84b;
  --font:"Sarabun","Noto Sans Thai","Leelawadee UI","Thonburi",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45}
#app{display:flex;height:100dvh;overflow:hidden}
#stage{position:relative;flex:1;min-width:0;background:var(--bg)}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:none}
#map.drag{cursor:grabbing}
#map.measuring{cursor:crosshair}
#side{width:370px;flex:none;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);min-height:0}
#side header{padding:14px 16px 8px}
h1{font-size:19px;margin:0}
#meta{margin:3px 0 0;color:var(--muted);font-size:13px}
nav{display:flex;border-bottom:1px solid var(--line);padding:0 8px}
nav button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;padding:8px 2px;cursor:pointer}
nav button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}
#panel{flex:1;overflow:auto;padding:6px 0;min-height:0}
#detail{border-top:1px solid var(--line);padding:12px 16px;background:var(--panel2);max-height:48%;overflow:auto}
#detail h2{font-size:16px;margin:0 0 6px;display:flex;justify-content:space-between;gap:8px}
#detail .x{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:0 2px}
dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0}
dt{color:var(--muted)}dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
table{width:100%;border-collapse:collapse}
th{font-weight:500;color:var(--muted);text-align:right;padding:5px 8px;font-size:13px;position:sticky;top:-6px;background:var(--panel)}
td{padding:6px 8px;text-align:right;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left;padding-left:16px}
th:last-child,td:last-child{padding-right:16px}
tbody tr{cursor:pointer}
tbody tr:hover,tbody tr.on{background:var(--panel2)}
.sub{color:var(--muted);font-size:12.5px;display:block}
.note{color:var(--muted);font-size:13px;padding:8px 16px;margin:0}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:0}
#tools{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
#tools button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;font:inherit;min-width:36px;height:36px;padding:0 10px;cursor:pointer}
#tools button:hover{background:var(--panel2)}
#tools button[aria-pressed=true]{background:var(--accent);color:#17120a;border-color:var(--accent)}
#legend{position:absolute;left:12px;bottom:46px;background:rgba(23,31,39,.92);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:13px;max-width:230px}
#legend label{display:block;cursor:pointer}
#legend summary{cursor:pointer;color:var(--muted)}
#legend[open] summary{margin-bottom:4px}
#bands{margin-top:5px}
#bands div{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px}
#bands i{width:20px;height:4px;border-radius:2px;display:block}
#scale{position:absolute;left:12px;bottom:12px;font-size:12.5px;display:flex;align-items:center;gap:8px;text-shadow:0 1px 2px #000}
#scaleBar{height:6px;border:2px solid var(--text);border-top:0}
#coords{position:absolute;right:12px;bottom:12px;font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
#tip{position:absolute;pointer-events:none;background:rgba(10,14,18,.94);border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:13px;max-width:240px;z-index:3}
#measureBox{position:absolute;top:58px;left:12px;background:var(--panel);border:1px solid var(--accent);border-radius:6px;padding:8px 11px;font-size:14px;max-width:300px}
button:focus-visible,canvas:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){
  #app{flex-direction:column}
  #side{width:100%;height:44dvh;border-left:0;border-top:1px solid var(--line)}
  #side header{padding:8px 16px 4px}
  #meta{display:none}
  #legend{bottom:40px;font-size:12.5px}
  #bands{display:none}
}