/* B"H */

/* Progress Bar */
#progressContainer {
    width: 100%; height: 4px; background: #222; margin-top: 5px;
    overflow: hidden; border-radius: 2px;
}
#progressBar {
    width: 0%; height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    box-shadow: 0 0 10px var(--primary);
    transition: width 0.2s;
}

/* Loading Spinner */
.loader {
    width: 50px; height: 50px;
    border: 5px solid rgba(0, 242, 234, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Render Overlay */
#render-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.app-container.rendering #render-overlay { display: flex; }
.app-container.rendering #controls { opacity: 0.5; pointer-events: none; }

/* Randomize Button Animation */
.fieldset-randomize {
    position: absolute; top: 10px; right: 10px;
    cursor: pointer; opacity: 0.5; font-size: 1.2rem;
    transition: 0.3s;
}
.fieldset-randomize:hover {
    opacity: 1; transform: rotate(180deg) scale(1.2);
}