#moonView.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.moon-container {
  flex: 1;
  width: 100%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  background: #0f172a;
}

.dark-mode .moon-container {
  background: #020617;
}

.moon-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sun */
.moon-sun {
  fill: #fbbf24;
  stroke: #f59e0b;
  stroke-width: 2;
}

.dark-mode .moon-sun {
  fill: #fcd34d;
  stroke: #fbbf24;
}

/* Earth */
.moon-earth {
  fill: #3b82f6;
  stroke: #1d4ed8;
  stroke-width: 2;
}

.dark-mode .moon-earth {
  fill: #60a5fa;
  stroke: #3b82f6;
}

/* Moon */
.moon-moon {
  fill: #9ca3af;
  stroke: #6b7280;
  stroke-width: 1.5;
}

.dark-mode .moon-moon {
  fill: #d1d5db;
  stroke: #9ca3af;
}

/* Orbit paths */
.moon-orbit {
  stroke: rgba(148, 163, 184, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.dark-mode .moon-orbit {
  stroke: rgba(203, 213, 225, 0.4);
}

/* Labels */
.moon-label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: #e2e8f0;
}

.dark-mode .moon-label {
  fill: #f1f5f9;
}

.moon-label-sun {
  fill: #fef3c7;
}

.dark-mode .moon-label-sun {
  fill: #fde68a;
}

.moon-label-earth {
  fill: #bfdbfe;
}

.dark-mode .moon-label-earth {
  fill: #93c5fd;
}

.moon-label-moon {
  fill: #d1d5db;
}

.dark-mode .moon-label-moon {
  fill: #e5e7eb;
}