:root{
  --bg:#081018;
  --panel:rgba(8,16,27,.86);
  --panel-strong:rgba(7,13,22,.95);
  --text:#edf3fb;
  --muted:#9fb0c6;
  --good:#45d889;
  --warn:#e8bf4d;
  --bad:#e66a62;
  --accent:#59c3ff;
  --shadow:0 16px 40px rgba(0,0,0,.42);
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(89,195,255,.08), transparent 26%),
    radial-gradient(circle at 82% 16%, rgba(123,141,255,.06), transparent 24%),
    linear-gradient(180deg, #09111b 0%, #09121d 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{overflow:hidden}

#map{
  position:fixed;
  inset:0;
  z-index:1;
  filter:saturate(.92) contrast(1.02) brightness(.97);
}

.leaflet-control-attribution,
.leaflet-control-zoom{
  opacity:.82;
}

.fxOverlay{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.grid{
  position:absolute;
  inset:-20%;
  opacity:.15;
  mix-blend-mode:screen;
}

.gridA{
  background:
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(89,195,255,.14) 92px 93px),
    repeating-linear-gradient(0deg, transparent 0 92px, rgba(89,195,255,.14) 92px 93px);
  animation:gridDriftA 24s linear infinite;
}

.gridB{
  background:
    repeating-linear-gradient(90deg, transparent 0 240px, rgba(123,141,255,.11) 240px 242px),
    repeating-linear-gradient(0deg, transparent 0 240px, rgba(123,141,255,.11) 240px 242px);
  transform:rotate(-5deg) scale(1.1);
  animation:gridDriftB 34s linear infinite;
}

.globeSweep{
  position:absolute;
  width:72vmax;
  height:72vmax;
  right:-20vmax;
  top:-20vmax;
  border-radius:50%;
  opacity:.10;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(89,195,255,.12) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(89,195,255,.07) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(89,195,255,.07) 18px 19px);
  animation:globeShift 26s ease-in-out infinite alternate;
}

@keyframes gridDriftA{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-92px,-92px,0)}
}

@keyframes gridDriftB{
  from{transform:rotate(-5deg) translate3d(0,0,0) scale(1.1)}
  to{transform:rotate(-5deg) translate3d(130px,90px,0) scale(1.1)}
}

@keyframes globeShift{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-2vmax,2vmax,0) rotate(8deg)}
}

.menuBtn{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 12px);
  right:10px;
  z-index:10000;
  width:50px;
  height:50px;
  border:none;
  border-radius:15px;
  background:linear-gradient(180deg, rgba(12,20,33,.90), rgba(9,16,27,.92));
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:0 13px;
}

.menuBtn span{
  display:block;
  height:2px;
  border-radius:2px;
  background:#f2f7ff;
}

.hudCard{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 12px);
  left:10px;
  right:70px;
  z-index:9999;
  background:linear-gradient(180deg, rgba(10,18,30,.84), rgba(8,15,24,.92));
  border:1px solid rgba(145,175,210,.12);
  border-radius:17px;
  padding:8px 10px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}

.hudTopRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:6px;
}

.hudTitle{
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
}

.hudSub{
  margin-top:1px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:42vw;
}

.statusBadge{
  padding:8px 10px;
  border-radius:13px;
  font-size:11px;
  font-weight:900;
  min-width:84px;
  text-align:center;
}

.statusBadge.safe{
  background:var(--good);
  color:#072013;
}

.statusBadge.warn{
  background:var(--warn);
  color:#2b2303;
}

.statusBadge.bad{
  background:var(--bad);
  color:#280606;
}

.hudMetrics{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:6px 8px;
}

.metricLabel{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:1px;
}

.metricValue{
  display:block;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(380px, 92vw);
  height:100dvh;
  z-index:10001;
  background:linear-gradient(180deg, rgba(8,16,27,.97), rgba(7,13,22,.99));
  border-left:1px solid rgba(145,175,210,.12);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  padding:calc(env(safe-area-inset-top, 0px) + 12px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
  overflow:auto;
  transform:translateX(100%);
  transition:transform .22s ease;
}

.drawer.open{
  transform:translateX(0);
}

.drawerHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:14px;
}

.drawerTitle{
  font-size:20px;
  font-weight:900;
}

.drawerSub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.drawerClose{
  width:46px;
  height:46px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text);
  font-size:20px;
  font-weight:900;
}

.drawerSection{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}

.sectionTitle{
  font-size:15px;
  font-weight:900;
}

.sectionHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.sectionActions{
  display:flex;
  gap:8px;
}

.sectionActions button,
.ghostBtn,
.toolButtons button{
  appearance:none;
  border:1px solid rgba(120,185,255,.20);
  background:linear-gradient(180deg, rgba(20,34,54,.82), rgba(12,22,36,.94));
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.ghostBtn{
  padding:8px 10px;
  font-size:12px;
}

.toolButtons{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.filterHint{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  margin-bottom:10px;
}

.activeDataBox{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.05);
}

.activeDataLine{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.activeDataLine span{
  color:var(--muted);
  font-size:13px;
}

.activeDataLine b{
  font-size:13px;
  text-align:right;
}

.checkList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.checkList label{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:14px;
}

input[type="checkbox"]{
  transform:scale(1.1);
  accent-color:var(--accent);
}

.dataGrid{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.dataRow{
  display:grid;
  grid-template-columns:minmax(120px, 1fr) auto;
  gap:10px;
  align-items:flex-start;
}

.dataRow span{
  color:var(--muted);
  font-size:13px;
}

.dataRow b{
  font-size:14px;
  justify-self:end;
  text-align:right;
  max-width:42vw;
  overflow:hidden;
  text-overflow:ellipsis;
}

.incidentMeta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}

.incidentWrap.collapsed .incidentList,
.incidentWrap.collapsed .incidentMeta{
  display:none;
}

.incidentList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-top:1px solid rgba(255,255,255,.05);
  font-size:12px;
}

.item:first-child{
  border-top:none;
}

.tag{
  color:var(--muted);
  font-size:11px;
}

.notice{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  line-height:1.35;
  border:1px solid transparent;
}

.notice.info{
  background:rgba(89,195,255,.10);
  color:#d6eeff;
  border-color:rgba(89,195,255,.22);
}

.notice.success{
  background:rgba(90,240,155,.10);
  color:#d8ffe9;
  border-color:rgba(90,240,155,.22);
}

.notice.error{
  background:rgba(255,103,103,.12);
  color:#ffd8d8;
  border-color:rgba(255,103,103,.22);
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

@media (max-width:760px){
  .menuBtn{
    top:calc(env(safe-area-inset-top, 0px) + 10px);
    right:8px;
    width:48px;
    height:48px;
    border-radius:14px;
  }

  .hudCard{
    top:calc(env(safe-area-inset-top, 0px) + 10px);
    left:8px;
    right:64px;
    padding:8px 9px;
    border-radius:15px;
  }

  .hudSub{
    max-width:40vw;
  }

  .hudMetrics{
    grid-template-columns:1fr 1fr;
    gap:6px 8px;
  }

  .drawer{
    width:100vw;
    padding-left:12px;
    padding-right:12px;
  }

  .dataRow b{
    max-width:44vw;
  }
}