#system_container {
    position: relative;
    width: 100%;
    height: 900px;

    background: #050816;

    background-image: url('/img/univers/pixnio-3840x2176.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid #1b2a4a;
    border-radius: 10px;

    overflow: hidden;
}

#system_map {
    width: 100%;
    height: 100%;
    display: block;

    cursor: grab;
}

#system_map:active {
    cursor: grabbing;
}

.system-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;
}

.system-controls {
    display: flex;
    gap: 10px;
}

.system-controls button {
    background: #12203a;

    border: 1px solid #2c4d7a;

    color: #ffffff;

    padding: 8px 14px;

    border-radius: 6px;

    cursor: pointer;

    transition: 0.2s;
}

.system-controls button:hover {
    background: #1c3158;
}

.system-info {
    margin-top: 15px;
}

.system-info p {
    margin-bottom: 10px;
}

.system-legend {
    display: flex;
    flex-wrap: wrap;

    gap: 15px;

    margin-top: 15px;
}

.legend-item {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 14px;
}

.legend-color {
    width: 14px;
    height: 14px;

    border-radius: 50%;
}

.legend-star {
    background: #ffd966;
}

.legend-planet {
    background: #4da6ff;
}

.legend-moon {
    background: #cccccc;
}

.legend-station {
    background: #00ff99;
}