:root{
    --bg:#031723;
    --panel:#06263a;
    --panel-2:#083247;
    --gold:#f4b72a;
    --cream:#fff5d8;
    --muted:#a9bbc4;
    --line:rgba(255,255,255,.16);
    --green:#32d69b;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(circle at 50% -15%,rgba(31,102,142,.28),transparent 40%),
      linear-gradient(180deg,#031827,#020f18 72%);
    color:#fff;
    font-family:Inter,Arial,sans-serif;
}
.display-shell{
    width:min(1700px,100%);
    margin:0 auto;
    padding:24px;
}
.display-header{
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr 1.1fr;
    border-bottom:1px solid var(--line);
    align-items:stretch;
}
.display-header>div{
    padding:18px 24px;
    border-right:1px solid var(--line);
}
.display-header>div:last-child{border-right:0}
.brand-block{display:flex;align-items:center;gap:16px}
.brand-mark{
    width:54px;height:54px;border-radius:50%;
    display:grid;place-items:center;
    border:2px solid var(--gold);
    color:var(--gold);font-size:25px
}
.brand-block strong{display:block;font:700 1.5rem Georgia,serif}
.brand-block span{display:block;color:var(--gold);font-size:.78rem;letter-spacing:.14em;margin-top:6px}
.date-block strong,.clock-block strong{
    display:block;font-size:clamp(2rem,4vw,3.5rem);line-height:1
}
.date-block span,.clock-block span{display:block;color:var(--muted);margin-top:7px}
.weather-block{
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:14px;
}
.weather-icon{font-size:3.2rem}
.weather-block>div strong{display:block;font-size:3.2rem;line-height:1}
.weather-block>div span{display:block;font-size:1.35rem;margin-top:8px}
.weather-block dl{margin:0}
.weather-block dl div{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--muted)}
.weather-block dd{margin:0;color:#fff}
.next-prayer-strip{
    display:grid;
    grid-template-columns:1fr .9fr 1.3fr 1.6fr;
    align-items:center;
    border-bottom:1px solid var(--line);
    min-height:150px;
    transition:.25s ease;
}
.next-prayer-strip>div,.next-prayer-strip blockquote{
    padding:24px;
    border-right:1px solid var(--line);
}
.next-prayer-strip blockquote{border-right:0;margin:0;text-align:center;font:700 1.15rem Georgia,serif}
.next-prayer-strip cite{display:block;color:var(--gold);margin-top:10px;font-style:normal}
.next-prayer-name span,.next-prayer-time span{display:block;color:var(--gold);text-transform:uppercase;font-weight:800;letter-spacing:.08em}
.next-prayer-name strong{display:block;font-size:clamp(2.5rem,6vw,4.7rem);font-weight:300;letter-spacing:.08em}
.next-prayer-time strong{display:block;font-size:2.1rem;margin-top:8px}
.countdown{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.countdown div{text-align:center}
.countdown strong{display:block;font-size:clamp(2rem,4vw,3.8rem);font-variant-numeric:tabular-nums}
.countdown span{color:var(--muted);font-size:.75rem;text-transform:uppercase}
.next-prayer-strip[data-urgency="soon"]{background:rgba(244,183,42,.08)}
.next-prayer-strip[data-urgency="near"]{background:rgba(255,112,62,.12);animation:pulse 1.3s ease-in-out infinite}
.next-prayer-strip[data-urgency="now"]{background:rgba(50,214,155,.12)}
.prayer-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    margin-top:22px;
}
.prayer-card{
    position:relative;
    min-height:510px;
    background-image:var(--card-image);
    background-position:center;
    background-size:cover;
    overflow:hidden;
    border-right:1px solid rgba(255,255,255,.28);
}
.prayer-card:last-child{border-right:0}
.prayer-card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.25) 40%,rgba(0,10,15,.93) 100%);
}
.prayer-card-content{
    position:relative;
    z-index:1;
    min-height:510px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:26px 16px 20px;
}
.prayer-icon{font-size:2.4rem;color:var(--cream);text-shadow:0 2px 8px #000}
.prayer-card h2{
    margin:8px 0 0;
    font-size:clamp(1.25rem,2.2vw,2rem);
    text-shadow:0 3px 12px #000;
}
.prayer-card .arabic{margin:6px 0;color:var(--cream);font-size:1.35rem}
.prayer-time-row{
    width:100%;
    margin-top:auto;
    padding:15px 0 0;
    border-top:1px solid rgba(255,255,255,.3);
}
.prayer-time-row+.prayer-time-row{margin-top:18px}
.prayer-time-row span{display:block;color:#d3dce0}
.prayer-time-row strong{display:block;font-size:1.65rem;margin-top:5px}
.prayer-card small{color:var(--gold);font-weight:800;margin-top:12px}
.content-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:22px;
}
.content-card{
    min-height:255px;
    border:1px solid rgba(244,183,42,.55);
    border-radius:16px;
    padding:24px;
    background:
      radial-gradient(circle at 100% 0,rgba(244,183,42,.12),transparent 38%),
      linear-gradient(145deg,#073449,#052436);
}
.card-heading{
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:.03em;
    font-size:1.15rem;
}
.content-card p{line-height:1.65;color:#e5edf0}
.content-card .arabic-text{font-size:1.55rem;line-height:2;text-align:right}
.content-card h3{color:var(--gold)}
.content-card footer{color:var(--gold);font-weight:700;margin-top:18px}
.empty-state{color:var(--muted)!important}
.weather-alert{
    margin-top:16px;
    padding:18px 22px;
    border-radius:14px;
    background:#5f1d1d;
    border:1px solid #ff6f61;
    display:flex;
    gap:18px;
}
@keyframes pulse{50%{box-shadow:inset 0 0 55px rgba(255,112,62,.15)}}
@media(max-width:1150px){
    .display-header{grid-template-columns:1fr 1fr}
    .display-header>div:nth-child(2){border-right:0}
    .display-header>div{border-bottom:1px solid var(--line)}
    .next-prayer-strip{grid-template-columns:1fr 1fr}
    .prayer-grid{grid-template-columns:repeat(3,1fr)}
    .prayer-card:nth-child(3){border-right:0}
    .content-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
    .display-shell{padding:10px}
    .display-header{grid-template-columns:1fr}
    .display-header>div{border-right:0}
    .weather-block{grid-template-columns:auto 1fr}
    .weather-block dl{grid-column:1/-1}
    .next-prayer-strip{grid-template-columns:1fr}
    .next-prayer-strip>div,.next-prayer-strip blockquote{border-right:0;border-bottom:1px solid var(--line)}
    .prayer-grid{grid-template-columns:1fr}
    .prayer-card{border-right:0;border-bottom:1px solid rgba(255,255,255,.28)}
}
@media(prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto!important}
}