*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:"Segoe UI",system-ui,sans-serif;background:#0f1419;color:#e8eef2}
#app{display:flex;height:100%}
#sidebar{
  width:360px;max-width:42vw;flex-shrink:0;display:flex;flex-direction:column;
  background:#1a222c;border-right:1px solid #2c3a47;padding:14px 14px 10px;gap:8px;
  overflow:hidden;
}
.brand h1{margin:0;font-size:1.25rem;letter-spacing:.02em;color:#fff}
.tag{margin:2px 0 8px;font-size:11px;color:#8b9aab}
.lbl{font-size:12px;font-weight:600;color:#b0bec5}
#q{
  width:100%;padding:10px 12px;border:2px solid #3d4f5f;border-radius:8px;
  background:#0f1419;color:#fff;font-size:14px;
}
#q:focus{outline:none;border-color:#3498db}
.suggest{
  max-height:220px;overflow:auto;background:#0f1419;border:1px solid #3d4f5f;
  border-radius:6px;
}
.suggest button{
  display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-bottom:1px solid #2a3540;
  background:transparent;color:#e8eef2;font-size:12px;cursor:pointer;
}
.suggest button:hover{background:#243040}
.toggles{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#cfd8dc;margin-top:4px}
.toggles label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.status{font-size:11px;color:#5dade2;min-height:1.2em}
.details{
  flex:1;overflow:auto;background:#121820;border:1px solid #2c3a47;border-radius:8px;
  padding:10px;font-size:13px;line-height:1.45;
}
.details h3{margin:0 0 6px;font-size:15px}
.details .badge{
  display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;
  margin-bottom:8px;
}
.details .inc{
  background:#1a222c;border-left:3px solid #e67e22;padding:8px;margin:8px 0;border-radius:4px;
}
.details a{color:#5dade2}
.muted{color:#7f8c8d;font-size:12px}
.foot{font-size:9px;color:#5d6d7e;line-height:1.35}
#map{flex:1;min-width:0;height:100%}

.marker-inc{
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;color:#fff;
  font:700 12px/24px "Segoe UI",sans-serif;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:pointer;
}
.r1{background:#f1c40f;color:#1a1a1a}
.r2{background:#f39c12}
.r3{background:#e67e22}
.r4{background:#e74c3c}
.marker-so{
  width:18px;height:18px;background:#c0392b;border:2px solid #fff;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:0 2px 5px rgba(0,0,0,.35);cursor:pointer;
}
.marker-ev{
  width:36px;height:36px;line-height:36px;text-align:center;font-size:28px;
  color:#f4d03f;text-shadow:0 0 2px #000,0 2px 4px rgba(0,0,0,.5);cursor:pointer;
  user-select:none;
}
.marker-zero{
  max-width:140px;padding:2px 6px;background:rgba(255,255,255,.92);border:1px solid #7f8c8d;
  border-radius:4px;color:#2c3e50;font:600 11px/1.2 "Segoe UI",sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}

@media (max-width:800px){
  #app{flex-direction:column}
  #sidebar{width:100%;max-width:none;height:42vh}
  #map{height:58vh}
}