:root {
	--bg: #04060A;
	--bg-grid: rgba(0, 255, 255, 0.07);
	--panel: rgba(10, 14, 22, 0.82);
	--text: #E8F7FF;
	--muted: #8AA2B2;
	--accent: #00ff22;  
	--accent2: #FF00E6;  
	--alt-low: #39FF14;   
	--alt-mid: #FFD166;   
	--alt-high: #FF357A;  
}

html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: "IBM Plex Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; }

body::before {
	content: "";
	position: fixed; inset: 0; z-index: -2;
	background-image:
		linear-gradient(transparent 31px, var(--bg-grid) 32px),
		linear-gradient(90deg, transparent 31px, var(--bg-grid) 32px);
	background-size: 32px 32px;
	pointer-events: none;
}

#topbar {
	position: absolute; top: 0; left: 0; right: 0; height: 48px;
	background: linear-gradient(180deg, rgba(8,12,22,0.88), rgba(8,12,22,0.55));
	color: var(--text);
	display: flex; align-items: center; gap: 12px; padding: 0 12px;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(0,229,255,0.18);
	z-index: 1000;
}
#topbar .brand { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent);  }
#topbar .legend { display: flex; align-items: center; gap: 10px; margin-left: 12px; font-size: 12px; color: var(--muted); }
#topbar .legend .dot { display:inline-block; width: 10px; height: 10px; margin-right: 4px; }
#topbar .legend .alt-low { background: var(--alt-low); }
#topbar .legend .alt-mid { background: var(--alt-mid); }
#topbar .legend .alt-high { background: var(--alt-high); }
#topbar #stats { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }

#map { position: absolute; top: 48px; bottom: 0; left: 0; right: 0; filter: saturate(0.9) contrast(1.05); }

.aircraft { text-align: center; white-space: nowrap; pointer-events: auto; }
.aircraft .plane { font-size: 16px; transform-origin: 50% 50%;}
.aircraft .plane svg { width: 16px; height: 16px; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.aircraft .plane.alt-low { color: var(--alt-low); fill: var(--alt-low); }
.aircraft .plane.alt-mid { color: var(--alt-mid); fill: var(--alt-mid); }
.aircraft .plane.alt-high { color: var(--alt-high); fill: var(--alt-high); }

.aircraft .label {
	color: var(--text);
	background: var(--panel);
	padding: 3px 6px; font-size: 12px; margin-top: 4px;
}

.leaflet-container { background: #0a0d12; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #161b22; color: var(--text); border: 1px solid rgba(255,255,255,0.05); }
.leaflet-control-attribution { background: rgba(0,0,0,0.4); color: var(--muted); }

.crt-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 500; opacity: 0.35; mix-blend-mode: lighten; background-image: linear-gradient(rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.15) 50%); background-size: 100% 3px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 1200; }
.modal.show { display: flex; }
.modal-panel {
	width: min(720px, 92vw);
	background: rgba(8,12,22,0.9);
	border: 1px solid var(--accent);
	padding: 14px 16px 16px;
	position: relative;
}
.modal-close { position: absolute; top: 8px; right: 10px; background: transparent; color: var(--accent); border: 1px solid var(--accent);  padding: 2px 8px; cursor: pointer; }
.modal-close:hover { background: rgba(0,229,255,0.08); }
.modal-header { margin-bottom: 10px; }
.modal-title { font-weight: 800; font-size: 18px; letter-spacing: 1px; color: var(--accent); }
.modal-subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }
.modal-body { margin-top: 8px; }
.modal-body .grid { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: baseline; }
.modal-body .k { color: var(--accent2); }
.modal-body .v { color: var(--text); }