body { color: var(--text); font-family: Poppins, system-ui, sans-serif; }
#starsCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
body > .wrap { position: relative; z-index: 1; padding-bottom: 64px; }
.topbar { margin-top: 22px; }
.satellite-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 70px 0 34px; }
.satellite-hero h1 { margin: 9px 0 15px; font-size: clamp(2.35rem, 5.3vw, 4.6rem); line-height: .98; letter-spacing: -.055em; }
.satellite-hero p { max-width: 660px; margin: 0; color: var(--muted); line-height: 1.65; }
.live-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(9, 27, 45, .4); color: var(--muted); font-size: .78rem; font-weight: 700; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #83f2cb; box-shadow: 0 0 0 5px rgba(131,242,203,.13), 0 0 13px #83f2cb; animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .45; transform: scale(.75); } }
.tracker-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: stretch; }
.map-card { min-height: 620px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: rgba(7, 20, 34, .64); box-shadow: var(--glass-shadow), var(--glass-inset); backdrop-filter: blur(16px); }
#satelliteMap { width: 100%; height: 620px; }
.tracker-panel { align-self: stretch; padding: 24px 20px; border-radius: 24px; }
.tracker-panel h2 { margin: 0 0 8px; font-size: 1.25rem; }
.tracker-panel__intro, .tracker-note { color: var(--muted); font-size: .79rem; line-height: 1.55; }
.orbit-legend { display: grid; gap: 12px; padding: 17px 0; margin: 0; list-style: none; }
.orbit-legend li { display: grid; grid-template-columns: 11px 1fr auto; gap: 9px; align-items: center; color: var(--muted); font-size: .82rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.legend-count { color: var(--text); font-weight: 800; }
.tracker-meta { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.tracker-meta strong { color: var(--text); font-size: .82rem; }
.tracker-note { margin: 19px 0 0; }
[data-theme="bright"] .map-card { background: rgba(240,248,255,.68); box-shadow: 0 18px 50px rgba(54,83,112,.12), inset 0 1px 0 rgba(255,255,255,.85); }
[data-theme="bright"] .live-status { background: rgba(255,255,255,.55); }
@media (max-width: 880px) { .tracker-layout { grid-template-columns: 1fr; } .tracker-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .tracker-panel h2, .tracker-panel__intro { grid-column: 1 / -1; } .tracker-note { margin: 0; } }
@media (max-width: 680px) { .topbar { margin-top: 15px; } .navlinks { display: none; } .satellite-hero { display: block; padding: 54px 0 28px; } .live-status { margin-top: 20px; } .map-card, #satelliteMap { min-height: 460px; height: 460px; } .tracker-panel { display: block; } }