* { box-sizing: border-box; }
body { margin: 0; padding: 0; background-color: #0B0E14; color: white; font-family: 'Roboto', sans-serif; height: 100vh; width: 100vw; overflow-y: auto; overflow-x: hidden; }

.top-menu { width: 100%; height: 70px; background-color: #0B0E14; display: flex; align-items: center; justify-content: space-between; padding: 0 80px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 0; z-index: 1000; }
.menu-title { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 18px; color: white; text-transform: uppercase; letter-spacing: 1px; }
.menu-right { display: flex; gap: 15px; }
.btn-pill-top { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; color: white; text-decoration: none; padding: 8px 24px; border: 1.5px solid white; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; display: inline-block; }
.btn-pill-top:hover { background-color: rgba(255, 255, 255, 0.1); }
.btn-pill-top.active { background-color: white; color: #0B0E14; }

.filter-bar { display: flex; gap: 10px; margin-bottom: 30px; justify-content: flex-start; }
.filter-pill { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; color: white; background: transparent; padding: 10px 20px; border: 1.5px solid white; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; min-width: 200px; 
    text-align: center; }
.filter-pill:hover { background-color: rgba(255, 255, 255, 0.1); }
.filter-pill.active { background-color: white; color: #0B0E14; }

.container { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 30px; padding: 40px 80px 80px 80px; max-width: 1728px; margin: 0 auto; align-content: start; }
.main-content { grid-column: span 3; }
.content-sidebar { grid-column: span 1; padding-top: 105px; }
.main-title { font-family: 'Roboto Condensed', sans-serif; font-weight: 200; font-size: 32px; margin: 0 0 20px 0; text-transform: capitalize; }

.overview-title { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 24px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; color: white; }
.overview-text { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255); }
.overview-text p { margin-bottom: 20px; }

.planetary-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px; 
    margin: 50px 0 15px 0;
    text-transform: uppercase;
    color: white;
}

.planetary-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px; 
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.planetary-text p {
    margin-bottom: 15px;
}

.image-wrapper { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background-color: #000; }
.nebula-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease; }
.caption { font-size: 12px; margin-top: 10px; color: rgba(255, 255, 255, 0.7); }

.hotspot { position: absolute; border: 2px solid white; border-radius: 50%; cursor: pointer; display: none; transition: all 0.3s ease; }

#hotspot-stella { width: 40px; height: 40px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12; }
#hotspot-stella:hover { background-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 15px white; }

#hotspot-polvere { width: 120px; height: 120px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; }
#hotspot-polvere:hover { background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }

#hotspot-nodi { width: 120px; height: 120px; top: 45%; left: 55%; transform: translate(-50%, -50%); z-index: 11; }
#hotspot-nodi:hover { background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }

.popup-box { position: absolute; width: 500px; height: 300px; background-color: #0B0E14; border-radius: 15px; border: 1px solid white; display: none; z-index: 20; padding: 0px; overflow: hidden; }

.popup-top-right { top: 5%; right: 5%; }
.popup-bottom-left { bottom: 5%; left: 5%; }
.popup-bottom-right { bottom: 5%; right: 5%; }

.popup-content { display: flex; align-items: center; height: 100%; gap: 0; position: relative; }
.zoom-container { width: 60%; height: 100%; position: relative; overflow: hidden; }
.zoom-container img { width: 100%; height: 100%; border-radius: 14px 0 0 14px; object-fit: cover; }

.arrow-marker { position: absolute; top: 48%; left: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid white; transform: translate(-50%, -100%); z-index: 5; }
.arrow-marker::before { content: ""; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 2px; height: 20px; background-color: white; }

.popup-text { width: 40%; padding: 20px; font-size: 12px; line-height: 1.3; color: white; }
.close-btn { position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 20px; z-index: 25; }
.connection-line-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; display: none; }