#recoveryPanel,
#awarenessPanel,
#servicesPanel {
    position: relative;
}

#recoveryPanel > .panel-crossfade-out,
#recoveryPanel > .panel-crossfade-in,
#awarenessPanel > .panel-crossfade-out,
#awarenessPanel > .panel-crossfade-in,
#servicesPanel > .panel-crossfade-out,
#servicesPanel > .panel-crossfade-in {
    transition: opacity 0.38s ease;
}

#recoveryPanel > .panel-crossfade-in,
#awarenessPanel > .panel-crossfade-in,
#servicesPanel > .panel-crossfade-in {
    opacity: 0;
    position: absolute;
    inset: 0;
}

#recoveryPanel > .panel-crossfade-out,
#awarenessPanel > .panel-crossfade-out,
#servicesPanel > .panel-crossfade-out {
    opacity: 1;
}

#recoveryPanel > .panel-crossfade-in.panel-crossfade-active,
#awarenessPanel > .panel-crossfade-in.panel-crossfade-active,
#servicesPanel > .panel-crossfade-in.panel-crossfade-active {
    opacity: 1;
}

#recoveryPanel > .panel-crossfade-out.panel-crossfade-active,
#awarenessPanel > .panel-crossfade-out.panel-crossfade-active,
#servicesPanel > .panel-crossfade-out.panel-crossfade-active {
    opacity: 0;
}

#headerBackup.header-state-warning,
#headerBackup.header-state-warning * {
    color: var(--header-neutral);
    animation: headerAttentionBreath 2.8s ease-in-out infinite;
}

#headerBackup.header-state-critical,
#headerBackup.header-state-critical * {
    color: var(--header-critical);
}

#headerBackup.header-state-neutral,
#headerBackup.header-state-neutral * {
    color: var(--header-neutral);
}

/* REVIVE BUTTON WARNING PULSE */

.revive-warning {
    background: var(--state-critical);
    animation: revivePulse 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes revivePulse {
    0% {
        box-shadow: 0 0 12px var(--glow-critical-soft);
    }

    50% {
        box-shadow: 0 0 12px var(--glow-critical-strong);
    }

    100% {
        box-shadow: 0 0 12px var(--glow-critical-soft);
    }
}

/* MODAL OVERLAY */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 5000;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* MODAL BOX */

.modal-box {
    background: var(--surface-panel);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-panel);
    padding: 30px;
    width: 420px;
    text-align: center;
    box-shadow: var(--shadow-panel);
}

/* MODAL TEXT */

.modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.modal-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 25px;
}

/* ACTION BUTTONS */

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.modal-cancel {
    background: var(--surface-disabled);
}

.modal-cancel:focus {
    outline: 2px solid var(--state-success);
}

.modal-proceed {
    background: var(--state-critical);
}