/* =====================================================
   Retro TX/RX LED system (shared)
   ===================================================== */
.led-title,
.led-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.led-txrx {
    --led-color: #3fa9f5;
    --led-glow: rgba(63, 169, 245, 0.45);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--led-color) 30%, #0c1624 75%);
    box-shadow:
        0 0 2px #0c1624 inset,
        0 0 6px rgba(0, 0, 0, 0.35),
        0 0 14px var(--led-glow);
    animation: led-breathe 3.2s ease-in-out infinite;
    margin-right: 8px;
}

.led-txrx::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, rgba(255, 255, 255, 0.65) 25%, transparent 65%);
    opacity: 0.9;
    mix-blend-mode: screen;
}

.led-idle {
    --led-color: #4aa6ff;
    --led-glow: rgba(74, 166, 255, 0.5);
    animation: led-breathe 3.4s ease-in-out infinite;
}

.led-active {
    --led-color: #44bd32;
    --led-glow: rgba(68, 189, 50, 0.6);
    animation: led-pulse 1.35s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

.led-warning {
    --led-color: #fbc531;
    --led-glow: rgba(251, 197, 49, 0.55);
    animation: led-pulse 1.6s ease-in-out infinite;
}

.led-error {
    --led-color: #e84118;
    --led-glow: rgba(232, 65, 24, 0.6);
    animation: led-alert 1s ease-in-out infinite;
}

@keyframes led-breathe {
    0% { transform: scale(0.92); box-shadow: 0 0 2px #0c1624 inset, 0 0 6px rgba(0,0,0,0.35), 0 0 10px var(--led-glow); opacity: 0.7; }
    50%{ transform: scale(1.05); box-shadow: 0 0 2px #0c1624 inset, 0 0 6px rgba(0,0,0,0.35), 0 0 16px var(--led-glow); opacity: 1; }
    100%{ transform: scale(0.92); box-shadow: 0 0 2px #0c1624 inset, 0 0 6px rgba(0,0,0,0.35), 0 0 10px var(--led-glow); opacity: 0.7; }
}

@keyframes led-pulse {
    0% { transform: scale(0.95); opacity: 0.75; }
    45%{ transform: scale(1.05); opacity: 1; }
    90%{ transform: scale(0.97); opacity: 0.82; }
    100%{ transform: scale(0.95); opacity: 0.75; }
}

@keyframes led-alert {
    0% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 4px var(--led-glow)); }
    35%{ transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 10px var(--led-glow)); }
    70%{ transform: scale(0.96); opacity: 0.8; filter: drop-shadow(0 0 6px var(--led-glow)); }
    100%{ transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 4px var(--led-glow)); }
}