:root {
  --bg: #0b1020;
  --panel: #121a32;
  --text: #e8eefc;
  --muted: #9fb1d9;
  --accent: #79b8ff;
  --grid: #24335c;
  --good: #56d364;
  --warn: #ffdda0;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); }
header { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid #1d2748; }
header h1 { font-size: 18px; margin: 0; letter-spacing: 0.5px; }
.tag { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #1b2648; color: var(--muted); }
main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; padding: 16px; position: relative; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid #1b2648; border-radius: 14px; padding: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
label { font-size: 12px; color: var(--muted); }
input, select, button { background: #0f1630; color: var(--text); border: 1px solid #203159; border-radius: 10px; padding: 8px 10px; font-size: 14px; }
select { min-width: 120px; }
button { cursor: pointer; }
button.primary { background: #19315f; border-color: #29539b; }
#plotWrap { position: relative; }
#plot { width: 100%; height: 600px; display: block; background: radial-gradient( circle at 50% 50%, #0d1530 0%, #0b1020 70% ); border-radius: 12px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 0 0; font-size: 12px; color: var(--muted); }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.pill { font-size: 12px; color: var(--muted); background: #0e1734; padding: 4px 8px; border-radius: 999px; }
.satList { max-height: 560px; overflow: auto; display: grid; gap: 8px; }
.satItem { background: #0e162f; border: 1px solid #1b2648; border-radius: 12px; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.satItem .meta { color: var(--muted); font-size: 12px; }
.good { color: var(--good); }
.warn { color: var(--warn); }
.error { color: #ff6b6b; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
#redOverlay{ position:fixed; inset:0; background:rgba(255,0,0,.28); mix-blend-mode:multiply; pointer-events:none; display:none; }
body.night #redOverlay{ display:block; }

/* Desktop: show vertical legend between columns, hide inline legend */
@media (min-width: 1000px) {
  #colorLegend { display: none !important; }
  #colorLegendVert { display: flex !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; flex-direction: column; align-items: center; gap: 8px; }
  #colorBarVert { width: 14px; height: 260px; border-radius: 8px; background: linear-gradient(180deg, #79b8ff, #ff6b6b); }
  #colorLegendVert .labels { display: flex; flex-direction: column; align-items: center; font-size:12px; color:var(--muted); }
}

/* Mobile: stack Set/Reset buttons below manual location input */
@media (max-width: 600px) {
  header > div[style*="display:flex;"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  header > div[style*="display:flex;"] > div[style*="margin-top:6px;"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }
  header > div[style*="display:flex;"] > div[style*="margin-top:6px;"] > input {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  header > div[style*="display:flex;"] > div[style*="margin-top:6px;"] > button {
    width: 100% !important;
    margin-bottom: 6px !important;
  }
}

/* Desktop (wider screens): keep help, location, time, manual entry and buttons on one row */
@media (min-width: 601px) {
  #topControls { flex-direction: row !important; align-items: center !important; gap: 12px !important; width: auto !important; max-width: none !important; }
  #topControls > #helpLink { margin-bottom: 0 !important; margin-right: 8px !important; }
  #manualLocWrap { flex-direction: row !important; align-items: center !important; gap: 8px !important; margin-top: 0 !important; }
  #manualLoc { width: 220px !important; max-width: 320px !important; margin-bottom: 0 !important; }
  #manualLocWrap > div { display: flex; gap: 8px; }
  #manualLocWrap button { flex: none !important; width: auto !important; }
}