.constellation-theme {
    background: radial-gradient(circle at 18% 24%, #765bd13b, transparent 30%), radial-gradient(circle at 82% 16%, #2d93c832, transparent 30%), linear-gradient(145deg, #080b16, #121126 58%, #070910);
}

.constellation-theme + .navigation-panel .location-grid {
    grid-template-columns: minmax(0, 1fr);
}

.constellation-overview {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    width: 100%;
}

.constellation-wallet,
.constellation-meta,
.constellation-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.constellation-wallet {
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid #a892ef35;
    border-radius: 15px;
    background: #0a0e18d9;
}

.constellation-list {
    display: grid;
    gap: 12px;
}

.constellation-card,
.constellation-active {
    padding: 15px;
    border: 1px solid #8c75dc66;
    border-radius: 20px;
    background: radial-gradient(circle at 85% 20%, #8367d72e, transparent 35%), #0c111c;
    box-shadow: 0 14px 34px #0007;
}

.constellation-card header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
}

.constellation-card h3,
.constellation-active h3 {
    margin: 0 0 7px;
}

.constellation-card p {
    margin: 6px 0 10px;
    color: #aab2c0;
}

.constellation-bonuses span,
.constellation-meta span {
    padding: 6px 8px;
    border-radius: 9px;
    background: #ffffff09;
    color: #cbd3e2;
}

.constellation-meta {
    justify-content: space-between;
    margin-top: 10px;
}

.constellation-card button,
.constellation-active button {
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    border: 1px solid #b49bff75;
    border-radius: 13px;
    background: linear-gradient(135deg, #51408b, #256a88);
    color: #fff;
    font-weight: 900;
}

.constellation-card button:disabled,
.constellation-active button:disabled {
    opacity: 0.45;
}

.constellation-card.locked {
    border-color: #ffffff1e;
    filter: saturate(0.45);
}

.constellation-card.completed {
    border-color: #64d8a558;
}

.constellation-active {
    border-color: #e7c67778;
    background: radial-gradient(circle at 50% 0%, #d8b05b2c, transparent 48%), #121018;
    text-align: center;
}

.constellation-active time {
    display: block;
    margin-top: 13px;
    color: #f0cf83;
    font-size: 26px;
    font-weight: 900;
}

.constellation-confirmation {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
    background: #02040bc4;
    backdrop-filter: blur(7px);
}

.constellation-confirmation[hidden] {
    display: none;
}

.constellation-confirmation-card {
    width: min(100%, 390px);
    padding: 17px;
    border: 1px solid #b99cff6e;
    border-radius: 18px;
    background: #151320;
}

.constellation-confirmation-card div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.constellation-confirmation-card button {
    min-height: 44px;
    border: 1px solid #ffffff25;
    border-radius: 11px;
    background: #282239;
    color: #fff;
    font-weight: 800;
}