html, body { margin: 0; height: 100%; background: #111; }
#map { position: absolute; inset: 0; background: #111; }

#map .iso-img { image-rendering: pixelated; }

#sidebar {
  position: absolute; top: 12px; left: 12px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
  width: 380px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px); overflow-y: auto;
}
#panel {
  background: rgba(18, 18, 20, 0.92);
  color: #eee;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  max-width: 380px;
  backdrop-filter: blur(4px);
}
.panel-title { font-size: 15px; font-weight: 700; }
.panel-title span { color: #8fb8f5; }
.panel-sub { color: #aaa; font-size: 11.5px; margin: 2px 0 8px; }
.panel-sub b { color: #ccc; font-weight: 600; }
#station-search {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  background: #26262b; color: #eee; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 5px 8px; font: 12px inherit; font-family: inherit;
}
#station-search::placeholder { color: #777; }

#legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.band { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #ddd; white-space: nowrap; }
.band i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }

.panel-row { margin: 4px 0; }
.v-grid { display: flex; gap: 3px; align-items: flex-end; }
.v-axis { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch;
  font-size: 8.5px; color: #999; text-align: right; padding-right: 3px; padding-bottom: 14px; }
.v-col { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.v-col i { width: 18px; height: 9px; border-radius: 1.5px; display: block; }
.v-col span { font-size: 9px; color: #aaa; margin-top: 2px; }
.v-note { color: #888; font-size: 10px; margin-top: 3px; }
.mode-row { display: flex; align-items: center; gap: 6px; }
.mode-btn {
  background: #26262b; color: #bbb; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 3px 10px; font: 600 12px inherit; cursor: pointer;
  font-family: inherit;
}
.mode-btn.active { background: #3b4b66; color: #fff; border-color: #6c8cc2; }
.mode-btn:disabled { opacity: 0.4; cursor: default; }
#cursor-time { color: #fff; font-weight: 600; font-size: 12.5px; min-height: 16px; display: inline-block; margin-left: auto; }

#filters { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 6px; padding-top: 6px; }
.f-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 3px 0; }
.f-amens { color: #ccc; font-size: 11.5px; }
.f-amens label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; white-space: nowrap; }
.f-amens input { accent-color: #ffc058; margin: 0; }
#f-br {
  background: #26262b; color: #ddd; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 2px 6px; font: 12px inherit; font-family: inherit;
}
.f-count { color: #999; font-size: 11.5px; }
.src-label { color: #999; font-size: 11.5px; }
.src-btn { padding: 2px 8px; font-size: 11.5px; }
.f-amens label.unavailable { opacity: 0.35; cursor: default; }
.toggles { display: flex; gap: 14px; color: #ccc; font-size: 12px; }
.toggles label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.toggles input { accent-color: #8fb8f5; }

.panel-note { color: #777; font-size: 10.5px; margin-top: 6px; max-width: 340px; }

.rent-label {
  color: #fff;
  font: 600 11px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.9);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.rent-label .price { font-weight: 400; font-size: 10.5px; color: #e8e0c8; }
.rent-label .approx { opacity: 0.85; }

.office-marker { pointer-events: none; }
.office-marker .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #4a9df8; border: 2.5px solid #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.8);
}
.office-marker .tag {
  position: absolute; left: 18px; top: -1px;
  color: #fff; font: 700 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
  white-space: nowrap;
}

.leaflet-container { font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #1c1c1f; color: #eee;
  box-shadow: 0 3px 14px rgba(0,0,0,0.6);
}
.leaflet-popup-content { font-size: 12.5px; margin: 10px 14px; }
.leaflet-popup-content b { font-size: 13px; }
.leaflet-container a.leaflet-popup-close-button { color: #999; }

#scatter {
  background: rgba(18, 18, 20, 0.94);
  color: #eee;
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}
#scatter-head { padding: 7px 12px; font-weight: 700; cursor: pointer; user-select: none; }
#scatter-head .hint { font-weight: 400; color: #888; font-size: 10.5px; }
#scatter.collapsed .scatter-body { display: none; }
#scatter.collapsed #scatter-head .hint { display: inline; }
#scatter:not(.collapsed) #scatter-head .hint { display: none; }
#scatter-head .min-hint { float: right; font-weight: 400; color: #777; font-size: 10.5px; }
#scatter.collapsed #scatter-head .min-hint { display: none; }
.scatter-body { padding: 0 8px 6px; }
.scatter-empty { color: #888; padding: 10px; }
.sc-grid { stroke: rgba(255,255,255,0.08); }
.sc-tick { fill: #888; font-size: 9px; }
.sc-axis { fill: #999; font-size: 9.5px; }
.sc-frontier { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 1.2; stroke-dasharray: 3 2; }
.sc-dot { cursor: pointer; }
.sc-pareto { stroke: #fff; stroke-width: 1.3; }
.sc-lab { fill: #ddd; font-size: 9px; }
.sc-tip { min-height: 15px; color: #ffc058; font-size: 11px; padding: 0 4px 4px; }

@media (max-width: 600px) {
  #scatter { display: none; }
  #panel { max-width: calc(100vw - 68px); font-size: 12px; padding: 8px 11px; }
  .panel-title { font-size: 13.5px; }
  #legend { gap: 3px 8px; }
  .band { font-size: 11px; }
  .panel-note { display: none; }
  .panel-title { cursor: pointer; }
  .panel-title::after { content: ' \25B4'; color: #888; }
  #panel.compact .panel-title::after { content: ' \25BE  more'; font-weight: 400; font-size: 11px; }
  #panel.compact .panel-sub, #panel.compact #station-search, #panel.compact #filters { display: none !important; }
}