:root{
  --bg:#0e6fb6;
  --bg2:#0b5e9b;
  --white:#fff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--white);
}
.top{padding:18px 18px 0 18px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{
  width:44px;height:44px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.15);
  font-weight:800;
}
.name{font-weight:800;letter-spacing:.3px}
.sub{font-size:12px;color:rgba(255,255,255,.75)}
.wrap{max-width:980px;margin:0 auto;padding:18px}
.hero{text-align:center;padding:30px 14px 16px 14px;}
.hero-title{font-size:28px;letter-spacing:1px;}
.hero-title span{opacity:.7}
.timer{
  font-size:96px;font-weight:800;line-height:1;
  margin:14px 0 10px;letter-spacing:2px;
}
.timer-labels{display:flex;justify-content:center;gap:64px;font-weight:700;opacity:.9;}
.meta{margin-top:18px;display:flex;justify-content:center;gap:18px;align-items:baseline;}
#nowBox{font-size:44px;font-weight:800}
.date{opacity:.85}
.hijri{margin-top:4px;font-size:14px;opacity:.85;font-weight:700;}
.grid{margin-top:18px;display:grid;grid-template-columns: repeat(6, 1fr);gap:10px;}
.card{
  background:rgba(255,255,255,.92);
  color:#0a4f80;border-radius:14px;padding:14px 12px;text-align:center;
}
.card .k{font-weight:800;font-size:13px;letter-spacing:.7px}
.card .v{font-weight:900;font-size:34px;margin-top:6px}
.highlight{background:#fff;outline:3px solid rgba(255,255,255,.35);}
.foot{margin:14px 0 8px;text-align:center;color:rgba(255,255,255,.8);font-size:12px;}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(3, 1fr);} .timer{font-size:72px} }
@media (max-width: 520px){ .grid{grid-template-columns: repeat(2, 1fr);} .hero-title{font-size:18px} .timer{font-size:56px} .timer-labels{gap:26px} }