:root{color-scheme:dark;--bg:#041a21;--panel:#082e38;--gold:#f4d274;--muted:#b4cacd;--line:#ffffff21;font-family:Tahoma,"Segoe UI",Arial,sans-serif;color:#f8f6ed;background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-width:280px;background:linear-gradient(120deg,#03141df2,#052c34e8),url("background.jpg") center/cover fixed}button,input{font:inherit}button,input[type=date]{min-height:44px;border:1px solid var(--line);border-radius:9px;background:#0c3640;color:inherit;padding:9px 14px}button{cursor:pointer}button:hover{border-color:var(--gold);background:#14434d}button:focus-visible,input:focus-visible,.month-scroll:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
#content{max-width:1600px;margin:auto;padding:clamp(16px,2.4vw,40px);min-height:100svh;display:flex;flex-direction:column;gap:18px}.masthead{display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{font-size:clamp(14px,1.1vw,20px);color:var(--gold);margin:0 0 8px}h1{font-size:clamp(26px,3vw,52px);font-weight:500;margin:0;line-height:1.3}.tools{display:flex;gap:10px;flex-wrap:wrap}.overview{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}.clock-panel,.next-panel{padding:clamp(18px,2vw,30px);border:1px solid var(--line);border-radius:18px;background:#062933b8;text-align:center;display:flex;flex-direction:column;justify-content:center}.next-panel{background:linear-gradient(135deg,#13454e,#082c35);border-color:#f4d27466}#clock,#countdown{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:clamp(42px,6.5vw,104px);line-height:1.2}#countdown{color:var(--gold)}#dateBox{margin:12px 0 5px;font-size:clamp(15px,1.4vw,23px)}.muted,footer{color:var(--muted)}#hijriDate,#nextTime{margin:4px 0;line-height:1.6}#iqamaAlert{color:var(--gold);margin:0;font-size:24px}#iqamaAlert:empty{display:none}#dateControls{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}#datePicker{max-width:100%;min-width:0}#selectedDateLabel{text-align:center;margin:0;color:var(--muted);font-size:15px}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}#prayerTable{flex:1;background:#062731b3;border:1px solid var(--line);border-radius:14px;overflow:hidden}th,td{text-align:center;padding:clamp(9px,1.2vh,18px) 12px}th{color:var(--muted);font-weight:400;font-size:clamp(14px,1.3vw,23px);border-bottom:1px solid var(--line)}#prayerTable td,#prayerTable tbody th{font-size:clamp(22px,2.8vw,46px);font-weight:400;border-bottom:1px solid #ffffff0c;color:inherit}td.time{direction:ltr;font-variant-numeric:tabular-nums}tr.active{background:#f4d2741b}#prayerTable tr.active th{color:var(--gold);box-shadow:inset 4px 0 var(--gold)}#prayerTable tr.active td{color:var(--gold)}footer{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.6}#settingsStatus{color:var(--gold)}.urgent{color:#ffd09b!important}
dialog{width:min(1100px,96vw);max-height:90svh;padding:0;border:1px solid #f4d27466;border-radius:16px;background:var(--bg);color:inherit}dialog::backdrop{background:#000b}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}.modal-header h2{font-size:20px;margin:0;font-weight:400}.month-scroll{overflow:auto;max-height:70svh}#monthTable{min-width:680px;table-layout:auto}#monthTable th{position:sticky;top:0;background:var(--panel)}#monthTable td{border-bottom:1px solid var(--line);white-space:nowrap}#monthTable .selected{background:#f4d2741b}
@media(min-width:1000px) and (min-height:600px){#content{height:100svh;min-height:0;gap:1.3vh;padding:2vh 2vw}.overview{height:27vh;gap:20px}.clock-panel,.next-panel{padding:1.5vh 20px}h1{font-size:min(3vw,5vh)}#clock,#countdown{font-size:min(6.5vw,9vh)}#dateBox{margin:1vh 0 .4vh;font-size:min(1.4vw,2.2vh)}#hijriDate,#nextTime{font-size:min(1.1vw,1.9vh)}#prayerTable{min-height:0}#prayerTable td,#prayerTable tbody th{font-size:min(2.8vw,4.2vh);padding:.65vh 12px}#prayerTable thead th{padding:.7vh 12px}#iqamaAlert{font-size:2.5vh}}
@media(max-width:700px){#content{gap:16px;padding:18px 12px}.masthead{align-items:flex-start}.tools{justify-content:flex-end;gap:6px;max-width:48%}.tools button{padding:8px 10px;font-size:12px}h1{font-size:25px}.overview{grid-template-columns:1fr;gap:12px}.clock-panel{padding:16px}.next-panel{padding:20px}#clock{font-size:52px}#countdown{font-size:58px}#dateBox{font-size:15px}#hijriDate{font-size:13px}#prayerTable td,#prayerTable tbody th{font-size:clamp(19px,5.5vw,30px);padding:16px 5px}#dateControls{gap:6px}#dateControls button{padding:8px 10px}footer{flex-direction:column;text-align:center}#selectedDateLabel{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}