body {
    background-color: #0d0d0d;
    color: #ffffff;
    font-family: 'Rubik', Arial, sans-serif;
    margin: 0;
    overflow: hidden;
    text-align: center;
}

.container { display: flex; flex-direction: column; justify-content: space-around; height: 100vh; padding: 20px; }
#clock { font-size: 16rem; font-weight: bold; margin: 0; color: #00ff88; }
#date { font-size: 2.5rem; color: #aaa; }

.prayer-grid { display: flex; justify-content: space-around; gap: 10px; margin-bottom: 5rem; }
.card { background: #1a1a1a; padding: 20px; border-radius: 10px; width: 18%; border-bottom: 5px solid #00ff88; }
.card span { font-size: 2rem; color: #00ff88; }
.card p { font-size: 4rem; font-weight: bold; margin: 10px 0; }

/* OVERLAY SYSTEM */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; display: flex; justify-content: center; align-items: center;
}
.overlay-content { width: 100%; }

#azan-overlay { background: rgba(0, 100, 50, 0.95); }
#azan-overlay h1 { font-size: 6rem; margin: 0; }
#azan-overlay h2 { font-size: 8rem; color: gold; margin: 20px 0; }

#iqomah-overlay { background: #b30000; }
#iqomah-overlay h3 { font-size: 4rem; margin: 0; }
#iqomah-overlay span { font-size: 15rem; font-weight: bold; display: block; }

#blank-screen { flex-direction: column; gap: 1rem; }
.black-bg { background: black !important; }
.hidden { display: none !important; }

/* TEST PANEL */
#test-panel { position: fixed; bottom: 60px; left: 10px; opacity: 0; z-index: 10001; }
#test-panel:hover { opacity: 1; }
button { padding: 10px; background: #00ff88; border: none; cursor: pointer; font-weight: bold; }

.running-text { font-size: 2rem; background: #111; padding: 15px 0; position: absolute; bottom: 0; width: 100%; color: #fff; }