body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 12px;
    background: #f7f7f7;
    color: #222
}

h2,
h3 {
    margin: 6px 0
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
}

.left {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.right {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.right_top,
.right_bottom {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    min-height: 220px;
}

.controls {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

label {
    font-size: 13px;
    color: #333
}

input,
select,
button {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #ccc
}

button {
    cursor: pointer;
    background: #1976d2;
    color: white;
    border: none
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(#fbfdff, #fff)
}

#canvasUniverse {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #000011;
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9) 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.8) 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.6) 1px, rgba(255, 255, 255, 0) 1px);
    background-size: 300px 300px, 200px 200px, 120px 120px;
    background-blend-mode: screen;
    z-index: 1;
}

.small {
    font-size: 12px;
    color: #666;
    margin-top: 6px
}

.univInfoOverlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none
}

@media (max-width:900px) {
    .container {
        grid-template-columns: 1fr
    }

    .right_top,
    .right_bottom {
        min-height: 180px
    }
}

.canvasWrap {
    position: relative;
    min-height: 420px;
    overflow: hidden
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2
}

.marker {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: none;
    will-change: transform;
}

#earthOverlay {
    perspective: 800px;
    perspective-origin: 50% 50%;
}

#earthOverlay .marker {
    transform-style: preserve-3d;
}

/* small/default sun marker (used for sunOnEarth, sunLocal) */
.marker.sun {
    background: radial-gradient(circle at 20% 20%, #fff 0%, #ffeb99 10%, #ff9a00 40%, #ff6600 70%, #ff4400 100%);
    width: 14px;
    height: 14px;
    z-index: 3;
    box-shadow: 0 0 8px rgba(255, 200, 100, 0.8);
    border: 1px solid rgba(255, 255, 200, 0.4);
}

.marker.sun.smalldot {
    width: 10px;
    height: 10px;
}

/* big decorative sun for universe view */
#sunMarker {
    background: radial-gradient(circle at 60% 40%, #fffde4 0%, #ffd600 55%, #ff9800 80%, #ff6d00 100%);
    border-radius: 50%;
    box-shadow: 0 0 80px 30px #ffd600cc, 0 0 160px 60px #ff980088, 0 0 0 12px #fffde422;
    border: 4px solid #fff176;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    animation: sun-glow 2.5s infinite alternate;
}

/* label beside sun marker (for sun seen from earth) - only when data-label attribute present */
.marker.sun[data-label]::after{
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 6;
}

@keyframes sun-glow {
    from {
        transform: translate(-50%, -50%) scale(1.28);
        filter: drop-shadow(0 0 40px rgba(255, 210, 80, 0.8));
    }

    to {
        transform: translate(-50%, -50%) scale(1.3);
        filter: drop-shadow(0 0 80px rgba(255, 200, 60, 0.95));
    }
}

/* Earth marker styling */
.marker.earth {
    background: radial-gradient(circle at 30% 30%, #cbe9ff 0%, #6ebfff 40%, #1e90ff 80%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), inset 0 -2px 6px rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.12);
    position: relative;
}

.marker.earth::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 206, 250, 0.12), rgba(0, 0, 0, 0));
    box-shadow: 0 0 16px rgba(0, 120, 200, 0.12);
    z-index: -1;
    pointer-events: none;
}

.marker.earth::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: #222;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.marker.smalldot {
    width: 10px;
    height: 10px
}

.marker.panel {
    background: green
}