:root{
 --ink:#071b43;--muted:#55709b;--blue:#0b6df7;--line:#dce8f5;--bg:#f7fbff;--white:#fff;
 --shadow:0 9px 28px rgba(48,78,118,.08);--radius:18px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#fbfdff 0,#f6fbff 55%,#fff 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
a{text-decoration:none;color:inherit}.shell{width:min(1440px,calc(100% - 64px));margin:auto}
.topbar{height:68px;background:rgba(255,255,255,.96);border-bottom:1px solid #edf3f9;position:sticky;top:0;z-index:50;backdrop-filter:blur(16px)}
.nav{height:68px;display:flex;align-items:center;gap:28px}.brand{font-size:34px;font-weight:900;letter-spacing:-2px;margin-right:auto}.brand span{font-size:.55em;color:#1475ff;letter-spacing:-.4px}.brand.small{font-size:25px}
.navlinks{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:750}.navlinks a{height:68px;display:flex;align-items:center;position:relative}.navlinks a.active{color:#086eff}.navlinks a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#0c76ff;border-radius:6px}.search-link{font-weight:750;font-size:14px}.menu-btn{display:none;background:#eff6ff;border:0;border-radius:10px;padding:9px 11px}
.dashboard{padding-top:22px}.day-card{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);min-height:164px;overflow:hidden}
.day-block{display:flex;align-items:flex-start;gap:14px;padding:31px 32px;border-right:1px solid var(--line)}.day-block.primary{padding-left:34px}.day-block label,.sun-block label{display:block;font-size:12px;font-weight:850;letter-spacing:.04em;color:#364f78}.day-block strong{display:block;font-size:25px;letter-spacing:-.6px;margin-top:12px;white-space:nowrap}.day-block.primary strong{font-size:25px}.day-block .clock{font-size:35px}.day-block small,.sun-block small{color:var(--muted);font-size:12px;display:block;margin-top:8px}.mini-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;font-size:16px}.blue{background:#e7f2ff;color:#076df2}
.sun-block{padding:28px 24px;display:grid;gap:17px}.sun-block>div{display:flex;align-items:center;gap:14px}.sun{font-size:30px;color:#ff9d00}.sun.set{color:#ff7110}.sun-block strong{font-size:20px;display:block;margin-top:2px}
.news-ticker{margin:15px 0 17px;border:1px solid #bcd6fb;background:linear-gradient(90deg,#edf6ff,#fff);border-radius:13px;min-height:47px;display:flex;align-items:center;overflow:hidden;box-shadow:0 5px 20px rgba(44,113,218,.06)}
.ticker-badge{align-self:stretch;display:flex;align-items:center;padding:0 18px;background:#0a6ff5;color:#fff;font-size:12px;font-weight:900;letter-spacing:.04em;white-space:nowrap}.ticker-window{flex:1;min-width:0;overflow:hidden;padding:0 18px}.ticker-window a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:700}.ticker-window a:hover{color:#086eff}.ticker-source{font-size:11px;color:#5e75a0;white-space:nowrap;padding:0 12px}.ticker-controls{display:flex;align-self:stretch}.ticker-controls button{width:38px;border:0;border-left:1px solid #d4e3f8;background:#fff;color:#0b6df7;font-size:23px;cursor:pointer}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.info-card{min-height:246px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px 22px;box-shadow:var(--shadow);position:relative}.purple-card{background:linear-gradient(135deg,#fff,#fcf8ff);border-color:#e4c7ff}.orange-card{background:linear-gradient(135deg,#fff,#fffaf5);border-color:#ffe0c0}.green-card{background:linear-gradient(135deg,#fff,#f8fff9);border-color:#c7ecd4}.pink-card{background:linear-gradient(135deg,#fff,#fff8fa);border-color:#ffd0db}.info-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;float:left;margin-right:12px;font-size:22px;font-weight:800}.purple{background:#f0e1ff;color:#8434e8}.orange{background:#fff0df;color:#ff7814}.green{background:#dff8e8;color:#0aaa47}.pink{background:#ffe4ed;color:#fb2160}.info-card h3{margin:10px 0 24px;font-size:14px}.info-card p{font-size:13px;color:#10274d}.info-card p b{color:#4d27cf}.orange-card p b{color:#132a4e}.info-card blockquote{font-size:18px;font-style:italic;font-weight:650;margin:40px 0 0}.info-card>a{position:absolute;bottom:18px;left:22px;color:#0b6df7;font-size:12px;font-weight:800}.purple-card>a{color:#842be4}.orange-card>a{color:#ff6f00}.green-card>a{color:#079e43}.pink-card>a{color:#fa1c5b}.count-row{display:flex;justify-content:space-between;font-size:13px;margin:18px 0}.count-row b{font-size:14px}
.prayer-card{margin-top:17px;border:1px solid #9dc7ff;background:linear-gradient(95deg,#edf6ff 0,#fff 58%,#f7fbff 100%);border-radius:15px;box-shadow:var(--shadow);padding:19px 20px;display:grid;grid-template-columns:1.1fr .85fr 3.2fr .8fr;align-items:center;gap:20px}.prayer-brand{display:flex;align-items:center;gap:12px}.mosque{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:#cfe6ff;color:#0a68e9;font-size:26px}.prayer-brand h2{font-size:19px;margin:0}.prayer-brand small{font-size:10px;color:var(--muted)}.city-select{position:relative}.city-select>span{position:absolute;left:12px;top:11px;color:#0b6df7}.city-select select{width:100%;height:42px;padding:0 34px;border:1px solid #aecff8;background:#fff;border-radius:10px;color:#173155;font-weight:700}.city-select small{font-size:9px;color:var(--muted);display:block;margin-top:6px}.prayer-times{display:grid;grid-template-columns:repeat(6,1fr)}.prayer-times>div{text-align:center;border-left:1px solid #d8e8fb;padding:0 10px}.prayer-times i{display:block;font-size:21px;font-style:normal;color:#126cf0}.prayer-times small{display:block;font-size:10px;color:#2d4569;margin:4px 0}.prayer-times strong{font-size:17px}.prayer-times .orange{background:transparent}.prayer-times .green{background:transparent}.prayer-times .pink{background:transparent}.moon{color:#3e87ed!important}.prayer-meta{text-align:right;font-size:11px}.prayer-meta span{display:block;margin-bottom:17px;font-weight:650}.prayer-meta a{color:#086eff;font-weight:800}
.tools-section{padding:27px 0 55px}.section-title{text-align:center}.section-title h2{font-size:28px;margin:0 0 2px;letter-spacing:-.6px}.section-title p{margin:0;color:var(--muted);font-size:12px}.filter-pills{display:flex;justify-content:center;gap:12px;margin:13px 0 17px;flex-wrap:wrap}.filter-pills button{border:1px solid #e2eaf5;background:#fff;border-radius:20px;padding:7px 19px;color:#315077;font-weight:700;cursor:pointer}.filter-pills button.active{background:#086ef5;border-color:#086ef5;color:#fff}.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tool-card{background:#fff;border:1px solid var(--line);border-radius:13px;min-height:78px;display:flex;align-items:center;padding:12px 15px;gap:13px;box-shadow:0 4px 15px rgba(32,76,132,.04);transition:.18s}.tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#bcd5f6}.tool-icon{flex:0 0 50px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:27px;font-weight:750}.tool-copy{min-width:0}.tool-copy strong{display:block;font-size:13px}.tool-copy small{display:block;color:#415d85;font-size:11px;margin-top:3px}.tool-card>b{margin-left:auto;font-size:20px;color:#466389}.all-tools{display:table;margin:18px auto 0;border:1px solid #1476ff;color:#086cf0;border-radius:9px;padding:10px 24px;font-size:12px;font-weight:800;background:#fff}.footer-new{border-top:1px solid #e9f0f8;background:#fff;padding:28px 0}.footer-row{display:flex;align-items:center;gap:35px}.footer-row p{margin:2px 0;font-size:11px;color:var(--muted)}.footer-links{display:flex;gap:20px;margin-left:auto;font-size:12px;color:#486184}.copyright{font-size:11px;color:#6f83a0}
@media(max-width:1050px){.shell{width:min(100% - 32px,1440px)}.day-card{grid-template-columns:1.5fr 1fr 1fr}.sun-block{grid-column:1/-1;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.info-grid,.tools-grid{grid-template-columns:repeat(2,1fr)}.prayer-card{grid-template-columns:1fr 1fr}.prayer-times{grid-column:1/-1}.prayer-meta{grid-column:1/-1;display:flex;justify-content:space-between}.prayer-meta span{margin:0}.navlinks{gap:15px}}
@media(max-width:760px){.shell{width:calc(100% - 22px)}.navlinks,.search-link{display:none}.menu-btn{display:block}.day-card{grid-template-columns:1fr}.day-block{border-right:0;border-bottom:1px solid var(--line);padding:20px}.day-block.primary{padding-left:20px}.sun-block{grid-column:auto}.info-grid,.tools-grid{grid-template-columns:1fr}.prayer-card{grid-template-columns:1fr}.prayer-times{grid-column:auto;grid-template-columns:repeat(3,1fr);gap:8px}.prayer-times>div{border:0;background:#fff;border-radius:10px;padding:8px}.prayer-meta{grid-column:auto}.news-ticker{min-height:50px}.ticker-source{display:none}.ticker-badge{padding:0 11px;font-size:10px}.info-card{min-height:220px}.footer-row{flex-direction:column;align-items:flex-start}.footer-links{margin-left:0;flex-wrap:wrap}}


/* ===== Shared / Subpage layout ===== */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid #edf3f9;
}
.header .container{
  width:min(1180px,calc(100% - 32px));
  margin:auto;
}
.header .nav{
  height:68px;
  display:flex;
  align-items:center;
  gap:28px;
}
.header .logo{
  font-size:30px;
  font-weight:900;
  letter-spacing:-1.7px;
  margin-right:auto;
}
.header .logo span{
  color:#1475ff;
  font-size:.56em;
  letter-spacing:-.4px;
}
.header .navlinks{
  display:flex;
  align-items:center;
  gap:10px;
}
.header .navlinks a{
  padding:10px 14px;
  border-radius:10px;
  color:#1d3153;
  font-weight:750;
  font-size:13px;
}
.header .navlinks a:hover,
.header .navlinks a.active{
  color:#086ef5;
  background:#edf5ff;
}
.header .menu{
  display:none;
  border:0;
  background:#edf5ff;
  color:#16365f;
  border-radius:10px;
  padding:9px 11px;
  font-size:18px;
  cursor:pointer;
}

.page{
  padding:42px 0 78px;
}
.page > .container{
  width:min(980px,calc(100% - 32px));
  margin:auto;
}
.breadcrumbs{
  color:#6a7f9f;
  font-size:13px;
  margin-bottom:22px;
}
.breadcrumbs a{
  color:#315d9b;
}
.page .section-head{
  text-align:center;
  margin-bottom:24px;
}
.page .section-head h1,
.page h1{
  font-size:40px;
  line-height:1.1;
  letter-spacing:-1.4px;
  margin:0 0 10px;
  color:#071b43;
}
.page .section-head p{
  color:#60799e;
  margin:0;
  font-size:15px;
}

.calculator{
  max-width:760px;
  margin:0 auto;
  background:#fff;
  border:1px solid #dce8f5;
  border-radius:20px;
  padding:28px;
  box-shadow:0 10px 30px rgba(48,78,118,.08);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.field.full{
  grid-column:1/-1;
}
.field label{
  font-size:13px;
  font-weight:750;
  color:#18345b;
}
.field input,
.field select{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid #cddceb;
  border-radius:10px;
  background:#fff;
  color:#10284b;
  font:inherit;
  outline:none;
}
.field input:focus,
.field select:focus{
  border-color:#0b6df7;
  box-shadow:0 0 0 3px #eaf3ff;
}
.button{
  appearance:none;
  border:0;
  background:#0b6df7;
  color:#fff;
  min-height:46px;
  padding:11px 18px;
  border-radius:10px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  align-self:end;
  box-shadow:0 5px 14px rgba(11,109,247,.18);
}
.button:hover{
  background:#075dcc;
}
.result{
  margin-top:22px;
  background:linear-gradient(135deg,#f0f7ff,#f8fbff);
  border:1px solid #cfe3ff;
  border-radius:14px;
  padding:18px;
  color:#17375f;
}
.result strong{
  font-size:26px;
  color:#071b43;
}
.note{
  color:#6e81a0;
  font-size:12px;
  margin-top:12px;
}
.faq{
  max-width:760px;
  margin:30px auto;
}
.faq details{
  background:#fff;
  border:1px solid #dce8f5;
  padding:16px 18px;
  border-radius:12px;
  margin:9px 0;
}
.faq summary{
  font-weight:750;
  cursor:pointer;
}

.footer{
  padding:34px 0;
  background:#fff;
  border-top:1px solid #e9f0f8;
  margin-top:30px;
}
.footer .container{
  width:min(1180px,calc(100% - 32px));
  margin:auto;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 2fr .8fr;
  gap:28px;
  align-items:start;
}
.footer .logo{
  font-size:26px;
  font-weight:900;
  letter-spacing:-1.3px;
}
.footer .logo span{
  color:#1475ff;
  font-size:.56em;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:#536b90;
  font-size:12px;
}
.copyright{
  color:#7c8da7;
  font-size:11px;
  margin-top:18px;
}

/* Generic listing pages created in earlier versions */
.page .tools{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.page .tool{
  background:#fff;
  border:1px solid #dce8f5;
  border-radius:14px;
  padding:16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  transition:.18s;
}
.page .tool:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(48,78,118,.08);
}
.page .tool .icon{
  width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;
  background:#edf5ff;color:#0b6df7;
  flex:0 0 42px;
}
.page .tool strong{
  display:block;
  font-size:13px;
}
.page .tool small{
  display:block;
  color:#61799d;
  font-size:11px;
  margin-top:3px;
}
.page .tool .arrow{
  margin-left:auto;
  color:#8da0ba;
}
.page .cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.page .card{
  background:#fff;
  border:1px solid #dce8f5;
  border-radius:16px;
  padding:22px;
  box-shadow:0 8px 22px rgba(48,78,118,.05);
}
.page .card .icon{
  width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;
  background:#edf5ff;
  margin-bottom:12px;
}
.page .card h3{
  margin:0 0 8px;
}
.page .card p{
  color:#60799e;
  font-size:13px;
}
.page .card a{
  color:#0b6df7;
  font-weight:800;
  font-size:12px;
}

@media(max-width:900px){
  .header .navlinks{display:none}
  .header .menu{display:block}
  .header .nav.mobile-open .navlinks{
    display:flex;
    position:absolute;
    left:16px;right:16px;top:62px;
    background:#fff;
    border:1px solid #dce8f5;
    border-radius:14px;
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    box-shadow:0 12px 30px rgba(48,78,118,.12);
  }
  .page .tools{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .page{padding-top:28px}
  .page .section-head h1,.page h1{font-size:32px}
  .calculator{padding:20px}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .page .tools,.page .cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

.method-note{display:block;color:#6a7f9f;font-size:9px;margin:4px 0 10px}