/* ----- bouton (même taille que Soft-UI natif) ----------------- */
.quantum-btn {
    all: unset;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0b0b0b; /* disque noir mat */
    box-shadow: inset 0 0 10px rgba(0,0,0,.9), /* ombre interne */
    0 2px 4px rgba(0,0,0,.4); /* ombre portée */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2100;
}

/* ----- globe interne ----------------------------------------- */
.sphere {
    position: relative;
    width: 64%;
    height: 64%; /* ≈ 36 px */
    border-radius: 50%;
    background: radial-gradient(circle at 30% 35%, rgba( 80,230,255,.95) 0%, rgba( 50,150,255,.85) 40%, rgba( 10, 10, 40,.90)100%);
    box-shadow: 0 0 12px 4px rgba( 50,200,255,.35), /* halo externe */
    inset 0 0 6px rgba(255,255,255,.6); /* brillance interne */
    overflow: hidden; /* masque les anneaux */
}

/* ----- anneaux lumineux -------------------------------------- */
.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170%;
    height: 2px; /* large ⇒ dépasse le globe */
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

/* premier anneau : plan incliné + rotation continue */
.ring-a {
    transform: translate(-50%,-50%) rotateX(65deg);
    animation: spin-a 4s linear infinite;
}

/* second anneau : autre plan + rotation inverse */
.ring-b {
    transform: translate(-50%,-50%) rotateX(-65deg) rotateY(90deg);
    animation: spin-b 6s linear infinite reverse;
}

/* animations */
.preview-box {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
}

.grad-stops .stop-group {
    display: flex;
    align-items: center;
    gap: .5rem
}

    .grad-stops .stop-group input[type="number"] {
        width: 5rem
    }
@keyframes spin-a {
    to {
        transform: translate(-50%,-50%) rotateX(65deg) rotateZ(360deg);
    }
}

@keyframes spin-b {
    to {
        transform: translate(-50%,-50%) rotateX(-65deg) rotateY(90deg) rotateZ(360deg);
    }
}