@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root { --ink:#f5f4e9; --muted:#b9c6b4; --surface:rgba(255,255,255,.08); --line:rgba(239,224,164,.18); --gold:#e8cf82; --green:#071b18; --accent:#38a184; }
[hidden] { display:none!important; }
.display-controls { display:flex; gap:12px; align-items:center; }
.next-prayer-card.iqamah-active { border-color:var(--gold); background:linear-gradient(110deg,#395031,#163d30); }
button:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--green); color:var(--ink); font-family:"DM Sans",sans-serif; }
.screen { min-height:100vh; position:relative; overflow:hidden; display:grid; grid-template-rows:auto auto auto 1fr; padding:clamp(22px,4vw,58px); gap:clamp(20px,3vh,36px); background:radial-gradient(circle at 85% 0%,#17604e 0%,transparent 32%),linear-gradient(135deg,#071b18,#0a2921 58%,#102d25); }
.texture { position:absolute; inset:0; opacity:.13; pointer-events:none; background-image:linear-gradient(30deg,transparent 47%,#eed887 48%,#eed887 52%,transparent 53%),linear-gradient(150deg,transparent 47%,#eed887 48%,#eed887 52%,transparent 53%); background-size:74px 128px; mask-image:linear-gradient(to right,transparent 3%,black 63%,transparent); }
.topbar,.hero,.next-prayer-card,.schedule,.hadith-card,.footer { position:relative; z-index:1; }.topbar { display:flex; justify-content:space-between; align-items:center; }.mosque-identity { display:flex; align-items:center; gap:14px; }.mark { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:28px; }.eyebrow { color:var(--gold); letter-spacing:.17em; font-size:10px; font-weight:700; margin:0 0 5px; }.mosque-identity h1 { margin:0; font:600 clamp(20px,2.1vw,30px)/1 "Playfair Display",serif; }.settings-button { color:var(--ink); border:1px solid var(--line); background:var(--surface); border-radius:50%; width:42px;height:42px;font-size:20px;cursor:pointer; }.hero { display:flex; justify-content:space-between; align-items:end; }.date-block p { margin:0; font-size:clamp(15px,1.5vw,21px); }.muted { color:var(--muted); margin-top:7px!important; }.clock-block { display:flex; align-items:baseline; gap:12px; }.clock-block time { font-size:clamp(48px,9vw,128px); font-weight:600; letter-spacing:-.08em; line-height:.78; }.clock-block span { color:var(--gold); font-size:14px; font-weight:700; }.next-prayer-card { border:1px solid var(--line); border-radius:18px; padding:clamp(17px,2.2vw,28px); background:linear-gradient(110deg,rgba(39,127,100,.38),rgba(255,255,255,.07)); }.next-content { display:flex; justify-content:space-between; align-items:end; }.next-content h2 { font:600 clamp(29px,3vw,46px)/1 "Playfair Display",serif; margin:0 0 7px; }.next-content p { margin:0;color:var(--gold);font-size:clamp(20px,2vw,30px); }.countdown-wrap { text-align:right; }.countdown-wrap span { font-size:clamp(28px,3.2vw,50px); font-variant-numeric:tabular-nums; font-weight:600; }.countdown-wrap small { display:block; color:var(--muted); font-size:9px; letter-spacing:.13em; margin-top:5px; }.schedule { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.prayer-card { min-width:0; border-top:1px solid var(--line); padding-top:15px; }.prayer-card p { margin:0 0 7px; color:var(--muted); font-size:14px; }.prayer-card strong { display:block; font-size:clamp(24px,2.4vw,37px); font-weight:500; letter-spacing:-.05em; }.prayer-card span { display:block;color:var(--gold);font-size:11px;margin-top:7px; }.prayer-card.active { border-top-color:var(--gold); }.prayer-card.active p { color:var(--gold); }.ramadan-only { display:none; }.schedule.is-ramadan { grid-template-columns:repeat(6,1fr); }.schedule.is-ramadan .ramadan-only { display:block; border-top-color:rgba(232,207,130,.58); }.hadith-card { display:flex; gap:17px; align-items:flex-start; padding:16px 18px; border-left:2px solid var(--gold); background:rgba(0,0,0,.11); }.hadith-icon { color:var(--gold); font-size:23px; line-height:1; }.hadith-card blockquote { margin:0; max-width:1050px; font:600 clamp(15px,1.4vw,21px)/1.45 "Playfair Display",serif; }.hadith-card cite { display:block; margin-top:7px; color:var(--muted); font-size:11px; font-style:normal; }.footer { align-self:end; display:flex; justify-content:space-between; gap:22px; color:var(--muted); font-size:13px; overflow:hidden; }.footer p { margin:0; white-space:nowrap; }.ticker { overflow:hidden; white-space:nowrap; }.ticker span { display:inline-block; animation:scroll 28s linear infinite; } @keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-30%)} }
dialog { width:min(720px,calc(100vw - 30px)); border:1px solid rgba(232,207,130,.3); border-radius:18px; color:#e9f1e9; background:#0b251f; padding:0; box-shadow:0 20px 100px #0009; } dialog::backdrop { background:#02100dcc; backdrop-filter:blur(5px); } form { padding:26px; }.dialog-heading { display:flex;justify-content:space-between;align-items:start;margin-bottom:22px; }.dialog-heading h2 { margin:0;font:600 28px "Playfair Display",serif; }.close { border:0;background:transparent;color:var(--ink);font-size:30px;cursor:pointer; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px; } label { display:grid;gap:5px;color:var(--muted);font-size:12px; }.hint { display:inline;color:#789284; } input,select { width:100%; padding:10px;border:1px solid #33554a;border-radius:8px;background:#10352c;color:var(--ink);font:14px "DM Sans",sans-serif; }.wide { grid-column:span 2; } fieldset { border:1px solid #33554a;border-radius:10px;margin:20px 0;padding:13px; } legend { color:var(--gold);font-size:12px;padding:0 5px; }.iqamah-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:9px; }.offline-note { color:#9db5aa;font-size:12px;margin:0; }.actions { display:flex;justify-content:end;gap:9px;margin-top:18px; } button { font-family:inherit;cursor:pointer; }.primary,.secondary { padding:10px 15px;border-radius:8px;border:0;font-weight:700; }.primary {background:var(--gold);color:#172318}.secondary{background:transparent;border:1px solid #476659;color:var(--ink)}
@media(max-width:650px){ .screen{padding:22px;}.hero,.next-content,.footer{align-items:start;flex-direction:column;gap:18px}.clock-block time{font-size:68px}.countdown-wrap{text-align:left}.schedule{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.iqamah-grid{grid-template-columns:repeat(2,1fr)} }