:root {
  --bg: #05070d;
  --panel-bg: rgba(10, 14, 24, 0.88);
  --panel-border: rgba(120, 150, 200, 0.25);
  --text: #e8ecf4;
  --text-dim: #93a0b8;
  --accent: #6fb7ff;
  --danger: #ff6b6b;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

#app {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#title-bar h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

#title-bar p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

#search-wrap {
  pointer-events: auto;
  position: relative;
  width: min(320px, 60vw);
}

#search-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  backdrop-filter: blur(6px);
}

#search-input:focus {
  border-color: var(--accent);
}

#search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  backdrop-filter: blur(6px);
}

.search-result {
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.search-result:hover, .search-result.active {
  background: rgba(111, 183, 255, 0.15);
}

.search-result .sr-faction {
  color: var(--text-dim);
  font-size: 11px;
}

#star-picker {
  position: fixed;
  z-index: 25;
  min-width: 170px;
  max-width: 240px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 4px;
  backdrop-filter: blur(6px);
}

.picker-title {
  padding: 6px 8px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.picker-row:hover {
  background: rgba(111, 183, 255, 0.15);
}

.picker-row .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#label-range-panel {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 11px 8px;
  backdrop-filter: blur(6px);
  /* Fixed regardless of mode — sized to fit the widest row (the radio-button
     or checkbox labels), not the sliders, so the panel never resizes when
     Local Mode toggles the second slider on/off. */
  width: 136px;
  box-sizing: border-box;
}

.lr-sliders {
  display: flex;
  justify-content: center;
  gap: 18px; /* just enough that the two titles below don't collide — see .lr-title */
  width: 100%;
}

.lr-slider-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Fixed to the slider track's own width. Without this, the title text
     below (up to 52px wide) would stretch this flex column wider than the
     28px slider it labels, which is what was silently eating most of the
     "dead space between the sliders" — the visible gap was correct, but it
     sat between two oversized invisible boxes, not the sliders themselves. */
  width: 28px;
  padding-top: 22px;
}

.lr-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.15;
}

.lr-slider-wrap {
  position: relative;
  width: 28px;
  height: 160px;
}

.lr-slider-wrap input[type="range"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 20px;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  accent-color: var(--accent);
}

.lr-value {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lr-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--panel-border);
  padding-top: 10px;
  width: 100%;
}

.lr-mode label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.lr-filter-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lr-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.lr-filter-row label {
  gap: 4px;
}

.lr-filter-row .legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sb-sub-title {
  margin-top: 8px;
}

.sb-circum {
  border-left: 3px solid rgba(255, 214, 102, 0.5);
}

@media (max-width: 480px) {
  #label-range-panel {
    transform: translateY(-50%) scale(0.85);
    transform-origin: left center;
  }
}

.hidden {
  display: none !important;
}

#legend {
  pointer-events: auto;
  margin-top: auto;
  align-self: flex-start;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  max-width: 220px;
  backdrop-filter: blur(6px);
}

#legend .legend-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

#help {
  pointer-events: none;
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

#help strong {
  color: var(--text);
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
}

#tooltip {
  position: fixed;
  pointer-events: none;
  transform: translate(12px, 12px);
  background: rgba(10, 14, 24, 0.95);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  z-index: 20;
  white-space: nowrap;
}

#tooltip .tt-faction {
  color: var(--text-dim);
  font-size: 10px;
}

.proximity-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: var(--text);
  background: transparent;
  border: none;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
  /* CSS2DObject centers the element on its 3D anchor point (which is already
     placed just below the star); nudge down by half our own height so the
     label's top edge sits at the anchor instead of its center. */
  translate: 0 50%;
}

#sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  padding: 20px;
  overflow-y: auto;
  z-index: 15;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

#sidebar.hidden {
  display: block !important;
  transform: translateX(100%);
  pointer-events: none;
}

#sidebar-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

#sidebar-close:hover {
  color: var(--text);
}

.sb-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 2px;
  padding-right: 24px;
}

.sb-class {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 14px;
}

.sb-faction-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 16px;
}

.sb-faction-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.sb-section {
  margin-bottom: 18px;
}

.sb-section-title {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.sb-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 12px;
}

.sb-stat-grid .k {
  color: var(--text-dim);
}

.sb-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}

.sb-planet-count {
  font-size: 13px;
  margin-bottom: 8px;
}

.sb-planet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-planet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
}

.sb-planet-type {
  color: var(--text-dim);
  font-size: 11px;
}

.sb-empty {
  color: var(--text-dim);
  font-size: 12px;
}

/* --- binary stars --- */
.sb-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.4;
}

.sb-star-block {
  padding: 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 8px;
}

.sb-star-name {
  font-size: 13px;
  font-weight: 600;
}

.sb-star-kind {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

/* --- system indices --- */
.sb-index-row {
  display: grid;
  grid-template-columns: 62px 1fr 92px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 5px;
}

.sb-index-label {
  color: var(--text);
}

.sb-index-word {
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
}

.sb-index-bar {
  display: flex;
  gap: 2px;
}

.sb-index-bar i {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
}

.sb-index-resource .sb-index-bar i.on { background: #6fb7ff; }
.sb-index-scientific .sb-index-bar i.on { background: #b58cff; }
.sb-index-hazard .sb-index-bar i.on { background: #ff8a5c; }

/* --- planet rows --- */
.sb-planet-row {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  border-left: 3px solid rgba(255,255,255,0.12);
}

.sb-planet-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sb-planet-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.sb-planet-name {
  margin-right: 2px;
}

.sb-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.sb-badge.hz {
  background: rgba(96, 220, 140, 0.18);
  color: #8ef0b0;
}

.sb-badge.dim {
  color: var(--text-dim);
}

.sb-badge.known {
  background: rgba(255, 214, 102, 0.18);
  color: #ffd666;
}

.sb-badge.lore {
  background: rgba(181, 140, 255, 0.18);
  color: #c9a8ff;
  cursor: help;
}

.sb-moons {
  font-size: 11px;
  color: var(--text-dim);
}

/* planet-type accent on the row's left edge */
.sb-planet-Terrestrial { border-left-color: #5ad07a; }
.sb-planet-Water       { border-left-color: #4fa3ff; }
.sb-planet-Rock        { border-left-color: #b09a7a; }
.sb-planet-Volcanic    { border-left-color: #ff6a3d; }
.sb-planet-Ice         { border-left-color: #bfe8ff; }
.sb-planet-Ice_Giant   { border-left-color: #7fc9d9; }
.sb-planet-Gas_Giant   { border-left-color: #e0b56a; }

#loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: opacity 0.3s ease;
}

#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#loading-text {
  color: var(--text-dim);
  font-size: 14px;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  #help {
    display: none;
  }
  #legend {
    max-width: 160px;
  }
}