:root {
    /* --- Customization Variables --- */
    --ecg-top-color: #10b981; /* Emerald 500 */
    --ecg-bottom-color: #5B21B6; /* Blue 500 */
    --glow-top-color: #10b981; /* Glow color for the top line */
    --glow-bottom-color: #3b82f6; /* Glow color for the bottom line */
    --text-color: #d1d5db; /* Gray 300 */
    --background-color: #111827; /* Gray 900 */
    --animation-duration: 4s;
}


@keyframes draw-ecg {
    0% {
        stroke-dashoffset: 255;
        opacity: 0.1;
    }

    25% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    50% {
        stroke-dashoffset: 0;
        clip-path: inset(-14px 0 0 0%);
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        clip-path: inset(-14px 0 0 100%);
        opacity: 0.1;
    }
}


.loading-overlay {
    position: fixed;
    inset: 0; /* top, right, bottom, left = 0 */
    z-index: 9999999999;
    width: 100vw;
    height: 100vh;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- Main container for the SVG animation --- */
.monitor-frame {
    width: 270px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* --- Shared styles for both ECG lines --- */
.ecg-line {
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 255; /* Must match the dashoffset in animation */
    animation: draw-ecg var(--animation-duration) ease-in-out infinite;
}

/* Top Line */
.ecg-line-top {
    stroke: var(--ecg-top-color);
    /*            filter: drop-shadow(0 0 5px var(--glow-top-color));*/
    transform: translateY(20px);
}

/* Bottom Line (flipped and delayed) */
.ecg-line-bottom {
    stroke: var(--ecg-bottom-color);
    /*            filter: drop-shadow(0 0 5px var(--glow-bottom-color));*/
    transform: translateY(60px) scaleY(-1);
    animation-delay: 0.5s;
}

/* --- Loading Text Style --- */
.loading-text {
    color: var(--text-color);
    margin-top: 1.5rem; /* mt-6 */
    font-size: 1.125rem; /* text-lg */
}

#loading {
    background-color: #000000b0;
    backdrop-filter: blur(4px);
}