#sunpath-overlay.sunpath-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 80vw;
  pointer-events: auto;
  z-index: 10000;

  background: var(--panel-bg, #111);
  border-radius: 6px;
}

#sunpath-overlay.sunpath-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: var(--dialog-border-width, 2px) solid var(--dialog-border-color, #00ff00);
  box-shadow: var(--dialog-box-shadow, 0 0 20px rgba(0, 255, 0, 0.3));
  pointer-events: none;
}

.sunpath-bg {
  fill: var(--panel-bg, #111);
  stroke: var(--border-color, #333);
  stroke-width: 1;
}

.sunpath-axis line {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1;
}

.sunpath-axis text {
  fill: var(--primary-color, #00ff00);
  font-size: 10px;
}

.sunpath-title {
  padding: 10px;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  background: var(--panel-bg, #111);
}

.sunpath.sunrise {
  fill: none;
  stroke: #ffcc33;
  stroke-width: 1.5;
}

.sunpath.sunset {
  fill: none;
  stroke: dodgerblue;
  stroke-width: 1.5;
}

.sunpath-hitareas rect {
  fill: transparent;
  pointer-events: all;
}

.sunpath-twilight-astronomical {
  fill: rgba(1, 54, 107, 0.35);
  stroke: none;
  pointer-events: none;
}

.sunpath-twilight-nautical {
  fill: rgba(0, 96, 192, 0.25);
  stroke: none;
  pointer-events: none;
}

.sunpath-twilight-civil {
  fill: rgba(141, 207, 248, 0.18);
  stroke: none;
  pointer-events: none;
}

.sunpath-hover-line {
  stroke: rgba(var(--primary-rgb, 0, 255, 0), 0.8);
  stroke-width: 1;
  pointer-events: none;
}

.sunpath-month-line {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.5;
  pointer-events: none;
}

.sunpath-month-label {
  fill: var(--primary-color, #00ff00);
  font-size: 9px;
}

.sunpath-tooltip {
  position: absolute;
  background: var(--panel-bg, #111);
  color: var(--primary-color, #00ff00);
  border: var(--dialog-border-width, 2px) solid var(--dialog-border-color, #00ff00);
  padding: 4px 8px;
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
  border-radius: 4px;
  box-shadow: var(--dialog-box-shadow, 0 0 20px rgba(0, 255, 0, 0.3));
  pointer-events: none;
  z-index: 10001;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #sunpath-overlay.sunpath-overlay {
    top: 50%;
    width: 95vw;
    max-width: 95vw;
  }
}