/* ══════════════════════════════════════════════════════════════════
   SkyGuard — styles.css  (v4 — layout + card visibility fixes)
   ══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --bg:          #02040f;
  --bg-panel:    rgba(5, 12, 35, 0.80);
  --bg-panel-s:  rgba(8, 18, 50, 0.60);

  --cyan:        #00e5ff;
  --cyan-dim:    #009ab5;
  --cyan-glow:   rgba(0, 229, 255, 0.30);
  --cyan-faint:  rgba(0, 229, 255, 0.08);

  --gold:        #ffd700;
  --gold-glow:   rgba(255, 215, 0, 0.35);

  --red:         #ff2244;
  --red-glow:    rgba(255, 34, 68, 0.40);

  --blue:        #4488ff;
  --blue-glow:   rgba(68, 136, 255, 0.35);

  --green:       #00ff88;
  --green-glow:  rgba(0, 255, 136, 0.30);

  --purple:      #b366ff;
  --orange:      #ff9933;

  /* Readable text colours — nothing below 0.55 opacity */
  --text:        #e8f4ff;
  --text-dim:    rgba(232, 244, 255, 0.70);
  --text-faint:  rgba(232, 244, 255, 0.45);

  --border:      rgba(0, 229, 255, 0.18);
  --border-s:    rgba(0, 229, 255, 0.10);

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;

  --font:        'Sora', -apple-system, sans-serif;
  --font-display:'Sora', -apple-system, sans-serif;
  --font-mono:   'IBM Plex Mono', 'Consolas', monospace;

  --topbar-h:    60px;
  --footer-h:    76px;
  --transition:  all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Radar legend ───────────────────────────────────────────── */
.radar-legend {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(4, 8, 22, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.12);
  border-radius: 30px;
  padding: 8px 14px;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(232, 244, 255, 0.65);
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-name, .modal-title, .sky-score-value, .stat-num {
  font-family: var(--font-display);
}

/* ── Star field canvas ─────────────────────────────────────────── */
#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── Layout shell ──────────────────────────────────────────────── */
.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--footer-h);
  height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ══════════════════════ TOP BAR ══════════════════════════════════ */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  background:
    radial-gradient(circle at top left, rgba(0,229,255,0.10), transparent 30%),
    radial-gradient(circle at top right, rgba(255,215,0,0.08), transparent 28%),
    linear-gradient(180deg, rgba(2,4,15,0.92), rgba(2,4,15,0.68));
  border-radius: 0 0 20px 20px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.18);
}

.topbar-brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
  font-size: 26px;
  color: var(--cyan);
  filter: drop-shadow(0 0 8px var(--cyan-glow));
  animation: brandPulse 4s ease-in-out infinite;
}
@keyframes brandPulse {
  0%,100% { filter: drop-shadow(0 0 8px var(--cyan-glow)); }
  50%     { filter: drop-shadow(0 0 20px var(--cyan-glow)) drop-shadow(0 0 40px rgba(0,229,255,0.12)); }
}
.brand-name    { font-size: 20px; font-weight: 700; color: #fff; display: block; line-height: 1.2; }
.brand-tagline { font-size: 10px; color: var(--cyan-dim); letter-spacing: 0.15em; text-transform: uppercase; font-family: var(--font-mono); }

/* Alert pill */
.topbar-center { display: flex; justify-content: center; }
.alert-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px;
  background: rgba(255,34,68,0.15);
  border: 1px solid rgba(255,34,68,0.5);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--red); letter-spacing: 0.1em;
  animation: alertPillFlash 0.8s ease-in-out infinite alternate;
}
@keyframes alertPillFlash {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 16px 2px var(--red-glow); }
}
.alert-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 6px var(--red);
  animation: dotBlink 0.6s step-end infinite;
}
@keyframes dotBlink { 0%,100%{opacity:1}50%{opacity:0} }

.topbar-right  { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.city-name     { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0.05em; }
.coord-line    { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.utc-clock     { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }

/* ══════════════════════ MAIN GRID ════════════════════════════════ */
.main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  overflow: hidden;
  padding: 14px 0;
  min-height: 0;
}

/* ─── RADAR ────────────────────────────────────────────────────── */
.radar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
#radar { border-radius: 50%; cursor: crosshair; display: block; }

@keyframes earthSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#radar {
  filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.16));
}

/* Corner labels */
.radar-label {
  position: absolute;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(5,12,35,0.92), rgba(5,12,35,0.76));
  border: 1px solid rgba(0,229,255,0.14);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.radar-label--tl { top: 12px;    left: 12px; }
.radar-label--tr { top: 12px;    right:12px; }
.radar-label--bl { bottom: 12px; left: 12px; }
.radar-label--br { bottom: 12px; right:12px; }
.rl-key { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); letter-spacing: 0.15em; text-transform: uppercase; }
.rl-val { font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--cyan); }
.rl-val--red { color: var(--red); }

/* ─── SIDE PANEL ── scrollable column, NOT fixed-height flex ──── */
.sidepanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* KEY FIX: panel scrolls when content overflows, not clips sections */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.15) transparent;
  background:
    radial-gradient(circle at top, rgba(0,229,255,0.08), transparent 28%),
    linear-gradient(180deg, rgba(5,12,35,0.82), rgba(4,8,24,0.94));
  border: 1px solid rgba(0,229,255,0.16);
  border-radius: 22px;
  padding: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.24);
}
.sidepanel::-webkit-scrollbar { width: 3px; }
.sidepanel::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.15); border-radius: 2px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: var(--transition);
  text-decoration: none; white-space: nowrap; letter-spacing: 0.02em;
}
.btn--primary  { background: rgba(0,229,255,0.10); border-color: rgba(0,229,255,0.35); color: var(--cyan); }
.btn--primary:hover  { background: rgba(0,229,255,0.20); border-color: var(--cyan); box-shadow: 0 0 16px var(--cyan-glow); }

/* GPS locked state — solid cyan fill, pulsing glow, shows "Unlock GPS" */
.btn--gps-locked {
  background: rgba(0,229,255,0.22) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  box-shadow: 0 0 12px var(--cyan-glow);
  animation: gpsLockedPulse 2.4s ease-in-out infinite;
}
.btn--gps-locked:hover {
  background: rgba(255, 60, 60, 0.15) !important;
  border-color: #ff4466 !important;
  color: #ff4466 !important;
  box-shadow: 0 0 16px rgba(255,68,102,0.35);
  animation: none;
}
@keyframes gpsLockedPulse {
  0%, 100% { box-shadow: 0 0 8px var(--cyan-glow); }
  50%       { box-shadow: 0 0 20px rgba(0,229,255,0.55); }
}
.btn--accent   { background: linear-gradient(135deg,rgba(0,229,255,0.25),rgba(68,136,255,0.20)); border-color: rgba(0,229,255,0.50); color: #fff; }
.btn--accent:hover   { background: linear-gradient(135deg,rgba(0,229,255,0.38),rgba(68,136,255,0.28)); box-shadow: 0 0 20px var(--cyan-glow); }
.btn--outline  { background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn--outline:hover  { border-color: var(--cyan); color: var(--text); }
.btn--ghost    { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn--ghost:hover    { color: var(--text); border-color: var(--border); }
.btn--notify   { width: 100%; background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.30); color: var(--gold); font-size: 11px; }
.btn--notify:hover   { background: rgba(255,215,0,0.15); border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }

/* Alert ON state — gold pulse, mirrors GPS locked */
.btn--notify-on {
  width: 100%;
  font-size: 11px;
  background: rgba(255,215,0,0.20) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 12px var(--gold-glow);
  animation: alertActivePulse 2.6s ease-in-out infinite;
}
.btn--notify-on:hover {
  background: rgba(255,60,60,0.15) !important;
  border-color: #ff4466 !important;
  color: #ff4466 !important;
  box-shadow: 0 0 16px rgba(255,68,102,0.35);
  animation: none;
}
@keyframes alertActivePulse {
  0%, 100% { box-shadow: 0 0 8px var(--gold-glow); }
  50%       { box-shadow: 0 0 22px rgba(255,215,0,0.50); }
}
.btn--twitter  { background: #000; border-color: #333; color: #e7e9ea; }
.btn--twitter:hover  { border-color: #555; }
.btn--whatsapp { background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.40); color: #25d366; }
.btn--whatsapp:hover { background: rgba(37,211,102,0.20); }

/* ── Panel Sections ─────────────────────────────────────────── */
.panel-section { display: flex; flex-direction: column; gap: 8px; }

.section-header { display: flex; align-items: center; justify-content: space-between; }
.section-title  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }
.section-badge  {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--cyan);
  background: var(--cyan-faint);
  border: 1px solid rgba(0,229,255,0.25);
  padding: 1px 8px; border-radius: 99px;
}
.section-badge--gold { color: var(--gold); background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.25); }

/* ── Radius Slider ──────────────────────────────────────────── */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: linear-gradient(to right, var(--cyan) 33%, rgba(0,229,255,0.15) 33%);
  border-radius: 2px; outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow);
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.35); box-shadow: 0 0 20px var(--cyan-glow); }
.slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--cyan); border:none; box-shadow:0 0 10px var(--cyan-glow); cursor:pointer; }
.slider-marks { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-faint); margin-top: 4px; line-height: 1.4; }
.radius-hint  { font-family: var(--font-mono); font-size: 9px; color: var(--cyan-dim); text-align: center; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════
   TRACKED OBJECT CARDS
   ══════════════════════════════════════════════════════════════════ */
/* Object list is a fixed-height scrollable box */
.object-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.20) transparent;
}
.object-list::-webkit-scrollbar { width: 3px; }
.object-list::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.20); border-radius: 2px; }

.loading-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 24px 0;
  color: var(--text-faint); font-size: 12px;
}
.spinner {
  width: 22px; height: 22px;
  border: 2px solid rgba(0,229,255,0.15);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.obj-card {
  border: 1px solid var(--border-s);
  border-radius: var(--radius-sm);
  padding: 9px 10px 9px 13px;
  background: var(--bg-panel-s);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.obj-card::before {
  content:'';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cyan); border-radius: 2px 0 0 2px; opacity: 0.7;
}
.obj-card:hover { border-color: rgba(0,229,255,0.30); background: rgba(0,229,255,0.06); transform: translateX(2px); }
.obj-card.active { border-color: rgba(0,229,255,0.50); background: rgba(0,229,255,0.10); box-shadow: 0 0 12px rgba(0,229,255,0.08); }

/* Type-specific left borders */
.obj-card--debris::before   { background: var(--red); }
.obj-card--iss::before      { background: var(--gold); }
.obj-card--crewed::before   { background: var(--gold); }
.obj-card--starlink::before { background: var(--blue); }
.obj-card--weather::before  { background: var(--green); }
.obj-card--military::before { background: var(--purple); }
.obj-card--navigation::before { background: #00dcdc; }
.obj-card--science::before  { background: var(--orange); }

/* Object name — clickable Google search link */
.obj-name {
  display: block;
  font-size: 13px; font-weight: 700;
  color: #ffffff;                   /* solid white — always visible */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 5px;
  text-decoration: none;
  transition: color 0.15s;
}
.obj-name:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }

.obj-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 4px;
}

.badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 3px; border: 1px solid;
}
.badge-iss       { color: var(--gold);   border-color: rgba(255,215,0,0.5);   background: rgba(255,215,0,0.12); }
.badge-crewed    { color: var(--gold);   border-color: rgba(255,215,0,0.5);   background: rgba(255,215,0,0.12); }
.badge-starlink  { color: var(--blue);   border-color: rgba(68,136,255,0.5);  background: rgba(68,136,255,0.12); }
.badge-debris    { color: var(--red);    border-color: rgba(255,34,68,0.5);   background: rgba(255,34,68,0.12); }
.badge-weather   { color: var(--green);  border-color: rgba(0,255,136,0.5);   background: rgba(0,255,136,0.12); }
.badge-military  { color: var(--purple); border-color: rgba(179,102,255,0.5); background: rgba(179,102,255,0.12); }
.badge-navigation{ color: #00dcdc;      border-color: rgba(0,220,220,0.5);   background: rgba(0,220,220,0.12); }
.badge-science   { color: var(--orange); border-color: rgba(255,153,51,0.5);  background: rgba(255,153,51,0.12); }
.badge-default   { color: var(--cyan);   border-color: rgba(0,229,255,0.35);  background: var(--cyan-faint); }

.obj-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim);           /* was 0.25 — now 0.70 */
  display: flex; gap: 10px; flex-wrap: wrap;
}
.obj-meta .v { color: var(--cyan-dim); }
.obj-meta .a { color: rgba(100, 160, 255, 0.85); }

/* ══════════════════════════════════════════════════════════════════
   UPCOMING PASS CARDS
   ══════════════════════════════════════════════════════════════════ */
.pass-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 210px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.15) transparent;
}
.pass-list::-webkit-scrollbar { width: 3px; }
.pass-list::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.15); border-radius: 2px; }

.pass-card {
  border: 1px solid var(--border-s);
  border-radius: var(--radius-sm);
  padding: 10px 10px 10px 13px;
  background: var(--bg-panel-s);
  position: relative;
}
.pass-card::before {
  content:'';
  position: absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--cyan-dim); border-radius: 2px 0 0 2px;
}
.pass-card--visible         { border-color: rgba(255,215,0,0.25); background: rgba(255,215,0,0.05); }
.pass-card--visible::before { background: var(--gold); }
.pass-card--imminent        {
  border-color: rgba(255,215,0,0.55);
  animation: passGlow 1s ease-in-out infinite alternate;
}
@keyframes passGlow {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 14px 2px rgba(255,215,0,0.18); }
}

/* Satellite name row in pass card */
.pass-name {
  font-size: 12px; font-weight: 700;
  color: #ffffff;                   /* solid white */
  margin-bottom: 5px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ★ PROMINENT TIME ROW */
.pass-time-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 5px;
}
.pass-time {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--cyan);
}
.pass-time-label {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* Meta row — elevation, direction, duration */
.pass-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim);           /* was 0.25 — now 0.70 */
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.pm-el  { color: #66ff99; }         /* bright green */
.pm-dir { color: var(--cyan-dim); }
.pm-dur { color: var(--text-dim); }
.pm-vis { color: var(--gold); font-weight: 700; }

/* Live countdown */
.pass-countdown {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--gold);
  margin-top: 2px;
}
.pass-countdown.now { color: var(--red); animation: dotBlink 0.6s step-end infinite; }

/* Visible badge pill */
.pass-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid rgba(255,215,0,0.50);
  color: var(--gold); background: rgba(255,215,0,0.10);
  flex-shrink: 0;
}

/* ── Sky Score ──────────────────────────────────────────────── */
.sky-score-block {
  padding: 12px; text-align: center;
  background: var(--bg-panel-s);
  border: 1px solid var(--border-s);
  border-radius: var(--radius-sm);
}
.sky-score-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text-faint); margin-bottom: 4px; }
.sky-score-value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--cyan); text-shadow: 0 0 16px var(--cyan-glow); line-height: 1; }
.sky-score-desc  { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* ══════════════════════ STATS BAR ════════════════════════════════ */
.statsbar {
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--border);
  background: rgba(2,4,15,0.70);
  backdrop-filter: blur(12px);
}
.stat { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 0; }
.stat-num { font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--cyan); text-shadow:0 0 12px var(--cyan-glow); line-height:1; transition:all 0.4s ease; }
.stat-num--red   { color:var(--red);   text-shadow:0 0 12px var(--red-glow); }
.stat-num--blue  { color:var(--blue);  text-shadow:0 0 12px var(--blue-glow); }
.stat-num--cyan  { color:var(--cyan);  text-shadow:0 0 12px var(--cyan-glow); }
.stat-num--gold  { color:var(--gold);  text-shadow:0 0 12px var(--gold-glow); }
.stat-lbl { font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; color:var(--text-faint); }
.stat-sep { width:1px; height:36px; background:var(--border); flex-shrink:0; }

/* ══════════════════════ SHARE MODAL ══════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,10,0.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation:fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  width:min(100%,760px);
  background:
    radial-gradient(circle at top left, rgba(0,229,255,0.10), transparent 38%),
    radial-gradient(circle at bottom right, rgba(255,215,0,0.08), transparent 34%),
    linear-gradient(160deg,rgba(5,12,35,0.99),rgba(2,6,22,0.99));
  border:1px solid rgba(0,229,255,0.22); border-radius:24px;
  padding:28px; display:flex; flex-direction:column; gap:18px;
  box-shadow:0 0 90px rgba(0,229,255,0.08),0 40px 80px rgba(0,0,0,0.56);
  animation:slideUp 0.25s ease; max-height:92vh; overflow-y:auto;
}
@keyframes slideUp { from{transform:translateY(20px);opacity:0.5} to{transform:translateY(0);opacity:1} }
.modal-header { display:flex; align-items:center; justify-content:space-between; }
.modal-title  { font-size:18px; font-weight:700; color:var(--text); }
.modal-close  {
  background:transparent; border:1px solid var(--border); color:var(--text-faint);
  width:30px; height:30px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; transition:var(--transition);
}
.modal-close:hover { border-color:var(--red); color:var(--red); }

/* Username row */
.share-username-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-username-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.share-username-input {
  background: rgba(0,229,255,0.05);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  padding: 10px 14px;
  outline: none;
  transition: var(--transition);
  width: 100%;
}
.share-username-input::placeholder { color: var(--text-faint); font-weight: 400; }
.share-username-input:focus {
  border-color: var(--cyan);
  background: rgba(0,229,255,0.08);
  box-shadow: 0 0 16px rgba(0,229,255,0.12);
}
.share-headline {
  font-size:18px; font-weight:600; color:var(--text); line-height:1.55;
  padding:18px 18px 16px;
  background:linear-gradient(135deg, rgba(0,229,255,0.12), rgba(68,136,255,0.08));
  border:1px solid rgba(0,229,255,0.18); border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset;
}
.share-headline strong { color:var(--cyan); }
.share-subtext  {
  font-size:13px; color:var(--text-dim); line-height:1.75;
  padding:0 2px;
}
.share-preview-wrap {
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(0,229,255,0.18);
  background:linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.24));
  min-height:180px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 36px rgba(0,0,0,0.22);
}
.share-preview-loading { display:flex; align-items:center; gap:10px; color:var(--text-faint); font-size:13px; }
.share-preview { width:100%; display:block; border-radius:20px; max-height:580px; object-fit:cover; }
.share-activity {
  padding:16px;
  background:linear-gradient(135deg, rgba(255,215,0,0.09), rgba(255,153,51,0.05));
  border:1px solid rgba(255,215,0,0.16);
  border-radius:18px;
}
.activity-title { font-weight:600; font-size:13px; margin-bottom:6px; color:var(--gold); }
.activity-text  { font-size:12px; color:var(--text-dim); line-height:1.7; }
.share-actions  { display:flex; gap:8px; flex-wrap:wrap; }
.share-actions .btn { flex:1 1 160px; }

/* ══════════════════════ PASS TOAST ═══════════════════════════════ */
.pass-toast {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%);
  z-index:800;
  display:flex; align-items:center; gap:14px;
  padding:14px 20px;
  background:linear-gradient(135deg,rgba(10,20,60,0.98),rgba(5,10,30,0.98));
  border:1px solid rgba(255,215,0,0.55);
  border-radius:var(--radius-lg);
  box-shadow:0 0 40px rgba(255,215,0,0.15),0 20px 40px rgba(0,0,0,0.6);
  min-width:320px; max-width:480px;
  animation:toastSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes toastSlideIn { from{transform:translateX(-50%) translateY(20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
.pass-toast.hidden { display:none; }
.pass-toast-icon  { font-size:28px; animation:float 3s ease-in-out infinite; }
@keyframes float  { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
.pass-toast-body  { flex:1; }
.pass-toast-title { font-weight:700; font-size:13px; color:var(--gold); margin-bottom:3px; }
.pass-toast-sub   { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); }
.pass-toast-close {
  background:transparent; border:1px solid rgba(255,215,0,0.30);
  color:var(--text-faint); width:24px; height:24px; border-radius:4px;
  cursor:pointer; font-size:11px; transition:var(--transition);
}
.pass-toast-close:hover { border-color:var(--red); color:var(--red); }

/* ══════════════════════ ISS WITNESS ══════════════════════════════ */
.witness-overlay {
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,10,0.92); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn 0.3s ease;
}
.witness-content {
  text-align:center; max-width:440px; padding:48px 32px;
  background:linear-gradient(160deg,rgba(5,12,35,0.98),rgba(2,6,22,0.95));
  border:1px solid rgba(255,215,0,0.30); border-radius:var(--radius-lg);
  box-shadow:0 0 60px rgba(255,215,0,0.08);
  animation:witnessAppear 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes witnessAppear { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }
.witness-icon   { font-size:56px; margin-bottom:16px; animation:float 3s ease-in-out infinite; }
.witness-title  { font-size:22px; font-weight:700; color:var(--gold); text-shadow:0 0 20px var(--gold-glow); letter-spacing:0.08em; margin-bottom:10px; }
.witness-sub    { font-size:14px; color:var(--text-dim); line-height:1.7; margin-bottom:8px; }
.witness-crew   { font-family:var(--font-mono); font-size:12px; color:var(--gold); opacity:0.7; margin-bottom:28px; }

/* ── Boot loading banner ─────────────────────────────────────────── */
#loadBanner {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(0,229,255,0.07), rgba(68,136,255,0.05));
  border: 1px solid rgba(0,229,255,0.22);
  border-radius: var(--radius-md);
  margin-bottom: 2px;
  animation: fadeIn 0.3s ease;
}
.lb-inner {
  display: flex; align-items: center; gap: 12px;
}
.lb-title {
  font-size: 12px; font-weight: 600; color: var(--cyan); margin-bottom: 2px;
}
.lb-sub {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
}

/* ══════════════════════ TOOLTIP ══════════════════════════════════ */
.tooltip {
  position:fixed; z-index:900; pointer-events:none;
  padding:10px 14px;
  background:rgba(2,6,22,0.97); border:1px solid rgba(0,229,255,0.25);
  border-radius:var(--radius-sm); backdrop-filter:blur(10px);
  font-size:12px; color:var(--text); line-height:1.65;
  box-shadow:0 8px 32px rgba(0,0,0,0.5); max-width:220px;
  opacity:0; transform:translateY(4px);
  transition:opacity 0.15s,transform 0.15s;
}
.tooltip.visible { opacity:1; transform:translateY(0); }
.tooltip-name   { font-weight:700; margin-bottom:4px; }

/* ── Utilities ──────────────────────────────────────────────── */
.hidden { display:none !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:900px) {
  .main { grid-template-columns: 1fr 280px; }
  .stat-num { font-size:20px; }
}
@media (max-width:680px) {
  body { overflow-y: auto; }
  .layout { grid-template-rows: var(--topbar-h) auto auto var(--footer-h); height:auto; min-height:100vh; }
  .main   { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow:visible; height:auto; padding-bottom:14px; }
  .sidepanel { max-height: none; overflow-y: visible; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-center { display:none; }
  .stat-num { font-size:18px; }
  .stat-lbl { font-size:8px; }
}

/* ══════════════════════════════════════════════════════════════
   VISIBLE NOW panel  — roof alert
   ══════════════════════════════════════════════════════════════ */
.visible-now-panel {
  margin: 0 16px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--green);
  background: rgba(0, 255, 136, 0.06);
  box-shadow: 0 0 20px rgba(0,255,136,0.12), inset 0 0 40px rgba(0,255,136,0.03);
  overflow: hidden;
  animation: vnGlow 2.5s ease-in-out infinite alternate;
}
@keyframes vnGlow {
  from { box-shadow: 0 0 10px rgba(0,255,136,0.10); }
  to   { box-shadow: 0 0 28px rgba(0,255,136,0.30); }
}
.vn-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(0,255,136,0.15);
}
.vn-pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(0,255,136,0.7);
  animation: vnPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes vnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,136,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(0,255,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}
.vn-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--green); flex: 1;
}
.vn-count {
  font-size: 11px; font-weight: 600;
  color: var(--green); opacity: 0.75;
  background: rgba(0,255,136,0.12);
  border-radius: 20px; padding: 2px 8px;
}
.vn-list {
  padding: 6px 0;
  max-height: 220px;
  overflow-y: auto;
}
.vn-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0,255,136,0.07);
  cursor: pointer;
  transition: background 0.15s;
}
.vn-item:last-child { border-bottom: none; }
.vn-item:hover { background: rgba(0,255,136,0.05); }
.vn-item-name {
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vn-item-look {
  font-size: 13px; font-weight: 800;
  color: var(--green);
  letter-spacing: 0.3px;
}
.vn-item-dist {
  font-size: 11px; color: var(--text-faint);
}
.vn-sky-status {
  padding: 6px 14px 8px;
  font-size: 11px;
  color: var(--text-faint);
  border-top: 1px solid rgba(0,255,136,0.10);
}

/* Dark sky soon banner */
.dark-sky-soon-banner {
  margin: 0 16px 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,215,0,0.3);
  background: rgba(255,215,0,0.06);
  font-size: 12px;
  color: var(--gold);
  display: flex; align-items: center; gap: 8px;
}

/* ── Object card enhancements — look direction ─────────────── */
.obj-look {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.13);
}
.obj-look-compass {
  font-size: 15px; font-weight: 800;
  color: var(--cyan);
  min-width: 36px;
  letter-spacing: 0.5px;
}
.obj-look-text {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.3;
}
.obj-look-dist {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}
.obj-visible-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,255,136,0.13); color: var(--green);
  border: 1px solid rgba(0,255,136,0.35);
  border-radius: 20px; padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px;
  animation: vnPulse 1.5s ease-in-out infinite;
}
.obj-shadow-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(100,100,120,0.15); color: rgba(200,210,240,0.45);
  border: 1px solid rgba(100,100,120,0.2);
  border-radius: 20px; padding: 2px 7px;
  font-size: 10px; font-weight: 600;
}
.obj-needs-dark-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,215,0,0.08); color: rgba(255,215,0,0.65);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 20px; padding: 2px 7px;
  font-size: 10px; font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablet & Small Laptops ── */
@media (max-width: 1024px) {
  .main {
    grid-template-columns: 1fr 280px;
    gap: 12px;
  }
  .brand-name {
    font-size: 16px;
  }
  .statsbar {
    gap: 16px;
  }
}

/* ── Mobile Phones ── */
@media (max-width: 768px) {
  .layout {
    display: flex;
    flex-direction: column;
    height: 100dvh; /* Fix bottom bouncing by using dynamic viewport */
    padding: 0;
  }
  
  /* Topbar restructuring */
  .topbar {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px;
    padding: 12px 16px;
    text-align: center;
    border-radius: 0 0 20px 20px;
  }
  .topbar-brand { justify-content: center; }
  .brand-name { font-size: 18px; }
  .topbar-right { align-items: center; gap: 2px; }
  .city-name { font-size: 13px; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 0;
    padding: 0;
    padding-bottom: 60px; /* Space for the fixed statsbar */
    flex: 1 1 auto; 
  }
  
  /* Radar wrapper - Fixed height with z-index to protect the legend */
  .radar-wrap {
    position: relative;
    width: 100vw;
    height: calc(100vw + 10px); /* Tighter height removes wasted space */
    min-height: auto;
    flex-direction: row; 
    justify-content: center;
    align-items: flex-start;
    padding-top: 10px;
    flex-shrink: 0;
    margin-top: 16px;
    overflow: visible; 
    z-index: 10; /* Ensures legend sits above sidepanel */
  }
  
  /* Radar Labels - tightly placed to corners */
  .radar-label {
    padding: 6px 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .radar-label--tl { top: 10px; left: 4px; }
  .radar-label--tr { top: 10px; right: 4px; }
  .radar-label--bl { bottom: 10px; left: 4px; } /* Moved down to hug the radar bottom */
  .radar-label--br { bottom: 10px; right: 4px; }
  .rl-key { font-size: 9px; }
  .rl-val { font-size: 15px; }

  /* Legend - Restore beautiful pill shape but adjust position for mobile */
  .radar-legend {
    bottom: -20px; /* Floats perfectly halfway over the sidepanel seam */
    width: 90%; 
    padding: 8px 12px;
    gap: 6px 10px;
    background: rgba(4, 8, 22, 0.85);
  }
  .radar-legend .legend-item { font-size: 9px; }
  .radar-legend .legend-dot { width: 7px; height: 7px; }
  
  /* Side panel - Native drawer feel */
  .sidepanel {
    position: relative;
    overflow-y: visible;
    border-radius: 30px 30px 0 0;
    border: none;
    border-top: 1px solid rgba(0,229,255,0.16);
    padding: 34px 16px 24px 16px; /* Increased top padding so floating pill doesn't cover buttons */
    background: linear-gradient(180deg, rgba(8,18,50,0.95), rgba(2,4,15,1));
    box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
    z-index: 1;
  }
  
  /* Touch-friendly buttons */
  .btn {
    min-height: 48px;
    font-size: 14px;
    border-radius: 12px;
  }

  /* Sky Score - Huge and prominent */
  .sky-score-block {
    padding: 32px 16px;
    border-radius: 16px;
    background: rgba(0,229,255,0.03);
    border: 1px solid rgba(0,229,255,0.1);
  }
  .sky-score-value {
    font-size: 80px;
    margin: 12px 0;
  }
  .sky-score-desc {
    font-size: 14px;
  }
  
  /* Stats footer - Fixed to bottom, matches desktop style but scaled */
  .statsbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    height: 60px;
    padding: 0 4px;
    background: rgba(2,4,15,0.95);
    border-top: 1px solid rgba(0,229,255,0.1);
    backdrop-filter: blur(12px);
    z-index: 1000;
    border-radius: 0;
  }
  .stat {
    flex: 1;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: none;
    min-width: 0;
    align-items: center;
  }
  .stat-num {
    font-size: 18px;
    margin-bottom: 2px;
  }
  .stat-lbl {
    font-size: 8px;
  }
  .stat-sep {
    display: block;
    height: 24px;
    opacity: 0.3;
    margin: 0 4px;
  }

  /* Modals scaling */
  .modal { width: 95vw; padding: 20px; border-radius: 24px; }
  .witness-content { width: 95vw; padding: 24px 16px; }
}