:root{
--bg1:#0f2027;
--bg2:#203a43;
--accent:#00c9a7;
--gold:#ffd369;
--glass:rgba(255,255,255,0.06);
}

body{
margin:0;
font-family:Segoe UI,system-ui,Arial;
background:linear-gradient(135deg,var(--bg1),var(--bg2));
color:white;
overflow:hidden;
}

/* HEADER */
.header{
text-align:center;
padding:20px;
background:rgba(0,0,0,0.25);
backdrop-filter:blur(8px);
font-size:42px;
font-weight:600;
letter-spacing:2px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.header .ar{
font-size:30px;
color:var(--gold);
}

/* CLOCK */
.clock{
text-align:center;
font-size:72px;
color:var(--accent);
margin-top:10px;
font-weight:300;
}

.date{
text-align:center;
font-size:22px;
opacity:.8;
margin-bottom:10px;
}

/* MAIN LAYOUT */
.container{
display:flex;
gap:25px;
padding:25px;
height:63vh;
}

/* GLASS CARD */
.card{
background:var(--glass);
border-radius:18px;
padding:25px;
flex:1;
backdrop-filter:blur(12px);
box-shadow:0 10px 40px rgba(0,0,0,.4);
}

/* PRAYER TABLE */
.prayer table{
width:100%;
border-collapse:collapse;
font-size:28px;
}

.prayer td{
padding:18px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.prayer .ar{
display:block;
font-size:24px;
opacity:.7;
}

.active{
background:rgba(0,201,167,.15);
border-left:6px solid var(--accent);
font-weight:600;
}

/* SIDE INFO */
.side{
display:flex;
flex-direction:column;
gap:25px;
flex:1;
}

.info-title{
color:var(--gold);
font-size:24px;
margin-bottom:8px;
}

.countdown{
font-size:36px;
color:var(--accent);
margin-top:10px;
}

/* TICKER */
.ticker{
position:absolute;
bottom:0;
width:100%;
background:#000;
padding:14px;
font-size:24px;
white-space:nowrap;
overflow:hidden;
}

.ticker span{
display:inline-block;
padding-left:100%;
animation:scroll 28s linear infinite;
}

@keyframes scroll{
from{transform:translateX(0)}
to{transform:translateX(-100%)}
}