#map{
  width:100%;
  height:62vh;
  min-height:430px;
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.04);
  margin-bottom:12px;
}

body[data-page-key="index"] .container,
body[data-page-key="pro"] .container,
body[data-page-key="topo"] .container{
  margin-top:0;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 10px;
  align-items:center;
}
#graphWrap{margin-top:8px}
#graph{
  background:var(--surface-2);
  padding:10px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
}
#graph img{display:block;max-width:100%;height:auto;margin:0 auto;border:none}

.graphTools{display:none;gap:8px;flex-wrap:wrap;margin-top:10px}
.graphToolBtn{
  border:1px solid #334155;
  background:#0f172a;
  color:#93a3b8;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  padding:6px 11px;
  cursor:pointer;
  transition:.18s ease;
}
.graphToolBtn:hover{background:#162033;color:#dbeafe}
.graphToolBtn.is-active{
  background:#1e293b;
  color:#f8fafc;
  border-color:#f97316;
  box-shadow:0 0 0 1px rgba(249,115,22,.25);
}
.loader{
  display:none;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  background:#111827;
  margin-top:10px;
  border:1px solid #374151;
  color:#f59e0b;
}
.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid #334155;border-top-color:#f59e0b;
  animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

.historyItem{
  margin:0 0 4px;
  padding:0;
  border:0;
  background:transparent;
  color:#cbd5e1;
  font-size:12px;
  line-height:1.4;
}

.map-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:14px;
  align-items:start;
  margin-top:10px;
}
.map-main{min-width:0}
.map-side{
  position:sticky;
  top:84px;
  align-self:start;
}
.map-side .comments{
  margin-top:0;
}

@media (max-width: 720px){
  #map{height:53vh;min-height:320px}
  body[data-page-key="index"] .container,
  body[data-page-key="pro"] .container,
  body[data-page-key="topo"] .container{
    margin-top:0;
  }
  .map-workspace{
    grid-template-columns:1fr;
    gap:10px;
  }
  .map-side{position:static}
}