/* 量子比特样式 */
.qubit-rect {
    fill: rgb(153, 179, 187);
    stroke: url(#crossBorderGradient);
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: all 0.2s ease;
}

.connection-line {
    stroke: #00BEA7;
    stroke-width: 8;
    stroke-linecap: round;
    transition: filter 0.2s ease;
}

.connection-line-hit:hover + .connection-line,
.connection-line-hit[data-popup-key]:hover + .connection-line {
    filter: drop-shadow(0 0 8px #00ffe1c5);
}

.unit-group {
    cursor: pointer;
}

.unit-scale {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s ease;
}

.unit-scale.hovered {
    transform: scale(1.06);
}

.qubit-breathe .qubit-rect {
    animation-name: qubit-breathe;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

@keyframes qubit-breathe {
    0% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 6px rgba(0, 190, 167, 0.25));
    }
    50% {
        fill: #ffffff;
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.95));
    }
    100% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 6px rgba(0, 190, 167, 0.25));
    }
}

@keyframes qubit-pulse {
    0% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 0 rgba(0, 190, 167, 0));
        transform: rotate(0deg);
    }
    50% {
        fill: #ffffff;
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.95));
    }
    100% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 0 rgba(0, 190, 167, 0));
        transform: rotate(90deg);
    }
}

@keyframes qubit-wave {
    0% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 4px rgba(0, 190, 167, 0.18));
    }
    50% {
        fill: #ffffff;
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.92));
    }
    100% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 4px rgba(0, 190, 167, 0.18));
        transform: rotate(-90deg);
    }
}

@keyframes qubit-flash {
    0% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    50% {
        fill: #ffffff;
        filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.96));
    }
    100% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
        transform: rotateY(180deg);
    }
}

@keyframes qubit-shift {
    0% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 3px rgba(0, 190, 167, 0.22));
    }
    30% {
        fill: #c8fff9;
        filter: drop-shadow(0 0 12px rgba(0, 190, 167, 0.72));
    }
    60% {
        fill: #ffffff;
        filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.9));
    }
    100% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 3px rgba(0, 190, 167, 0.22));
        transform: rotateX(180deg);
    }
}

@keyframes qubit-burst {
    0% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 0 rgba(0, 255, 225, 0));
    }
    50% {
        fill: #ffffff;
        filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.98));
        transform: rotateY(180deg);
    }
    100% {
        fill: rgb(153, 179, 187);
        filter: drop-shadow(0 0 0 rgba(0, 255, 225, 0));
        transform: rotateZ(180deg);
    }
}