html,body,#app { height:100%; margin:0; padding:0; font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif; background:#0b1220; color:#dbe6f3; }

#sidebar,
#sidebar * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#sidebar::-webkit-scrollbar,
#sidebar *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#app { display:flex; height:100vh; overflow:hidden; }

aside#sidebar {
  width:320px;
  background: linear-gradient(180deg,#09101a,#0f1724);
  color:#dbe6f3;
  padding:16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:12px;
  border-right:1px solid rgba(255,255,255,0.03);
}

#sidebar header { text-align:left; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.03); }
#sidebar header img { display:block; margin-bottom:8px; }

.controls { margin-top:8px; display:block; }
.controls label { display:block; margin-bottom:8px; font-size:13px; color:#9fb2c9; }
.controls select, .controls input[type="range"], .controls input[type="number"] {
  width:100%; padding:6px 8px; margin-top:4px; background:#071221; border:1px solid rgba(255,255,255,0.04); color:#dbe6f3; border-radius:6px;
}

#feed { flex:1; overflow:auto; padding-top:8px; }
#feed h2 { margin:0 0 8px 0; font-size:14px; color:#9fb2c9; }

#eventsList { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
#eventsList .event { display:flex; gap:8px; align-items:flex-start; padding:8px; border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); }
#eventsList .dot { width:12px; height:12px; border-radius:50%; flex:0 0 12px; margin-top:6px; box-shadow:0 0 8px rgba(0,0,0,0.4); }
#eventsList .content { font-size:13px; line-height:1.1; }
#eventsList .content .meta { color:#9aa6b2; font-size:12px; margin-top:4px; }

footer { font-size:12px; color:#8da3b8; padding-top:6px; border-top:1px solid rgba(255,255,255,0.02); }

#mapwrap { flex:1; position:relative; display:flex; flex-direction:column; }
#map { position:absolute; inset:0; }

#legend { position:absolute; right:16px; top:16px; background:rgba(5,8,12,0.6); color:#dbe6f3; padding:8px 10px; border-radius:8px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.03); }
#legend div { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
#legend .pulse.small { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 10px rgba(0,0,0,0.6); }

.severity-1 { background: #34d399; }
.severity-2 { background: #60a5fa; }
.severity-3 { background: #f59e0b; }
.severity-4 { background: #f97316; }
.severity-5 { background: #ef4444; }

@media (max-width:900px) {
  aside#sidebar { width:280px; }
}
@media (max-width:640px) {
  aside#sidebar { display:none; }
}