:root{
  --bg:#0f1724;
  --panel:#0b1220;
  --accent:#ffb400;
  --muted:#9aa7bf;
  --card:#0e1a2b;
}

*{box-sizing:border-box}
html,body,#map{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#041129 0%, #071b2e 100%);
  color:#e6eef8;
  height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(90deg, rgba(255,180,0,0.06), transparent);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.topbar h1{margin:0;font-size:18px;letter-spacing:0.4px}
.controls{display:flex;gap:8px;align-items:center}
.controls input{
  padding:8px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);color:inherit;min-width:220px;
}
.controls button{
  background:var(--accent);border:none;padding:8px 10px;border-radius:6px;color:#0a0a0a;font-weight:600;cursor:pointer;
}

.hl-777 {
  color: #ff3b3b;           /* bright red */
  font-weight: 800;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}

main{
  display:flex;
  flex:1 1 auto;
  min-height:0; /* allow children to scroll */
}

/* Sidebar */
#sidebar{
  width:320px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-right:1px solid rgba(255,255,255,0.03);
  padding:12px;
  overflow:auto;
}
#sidebar h2{margin:4px 0 8px 0;font-size:16px}
#list{display:flex;flex-direction:column;gap:8px}
.node{
  background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
.node:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.node .title{font-weight:700}
.node .meta{font-size:13px;color:var(--muted)}

/* Map area */
#map-container{flex:1;position:relative;display:flex;flex-direction:column}
#map{flex:1}
.status{
  position:absolute;right:12px;top:12px;background:rgba(6,11,18,0.7);padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);
  font-size:13px;color:var(--muted)
}

.footer{
  padding:8px 14px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.02);
}

/* small screens */
@media (max-width:860px){
  #sidebar{width:100%;height:240px;order:2}
  main{flex-direction:column}
  #map-container{order:1;height:60vh}
}