:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#172033;
  --muted:#697386;
  --line:#e7eaf0;
  --accent:#176b5b;
  --accent-soft:#e8f5f1;
  --gold:#b8860b;
  --danger:#b42318;
  --shadow:0 10px 30px rgba(23,32,51,.07);
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
}
.wrap{max-width:1180px;margin:auto;padding:28px 18px 50px}
header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-bottom:22px;
}
h1{margin:0;font-size:clamp(26px,4vw,38px);letter-spacing:-.03em}
.subtitle{color:var(--muted);margin:5px 0 0}
.clock{
  text-align:right;white-space:nowrap;
}
.clock .time{font-size:30px;font-weight:800}
.clock .date{font-size:13px;color:var(--muted)}
.install-btn{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:7px 14px;border:none;border-radius:999px;cursor:pointer;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  font-family:inherit;letter-spacing:.01em;
}
.install-btn:hover{background:#125548}
/* Same specificity as the class rule above, but declared after it, so this
   correctly wins and keeps the [hidden] attribute's native display:none
   behavior working (without it, "display:inline-flex" above would show the
   button immediately, before beforeinstallprompt ever fires). */
.install-btn[hidden]{display:none}
.grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-head{padding:20px 22px 12px}
.card-head h2{margin:0;font-size:19px}
.card-head p{margin:4px 0 0;color:var(--muted);font-size:13px}
.schedule{padding:8px 12px 14px}
.item{
  position:relative;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  padding:15px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition:.2s ease;
}
.item + .item{margin-top:3px}
.item.active{
  background:var(--accent-soft);
  border-color:#b7ded4;
  box-shadow:inset 4px 0 0 var(--accent);
}
.item.active .title{color:var(--accent);font-weight:800}
.time-range{font-weight:750;font-size:14px;color:#374151}
.title{font-weight:650;font-size:15px}
.desc{font-size:12px;color:var(--muted);margin-top:2px}
.countdown{
  font-size:13px;font-weight:800;color:var(--accent);margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.badge{
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
}
.prayers{padding:12px 18px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.prayer{
  padding:13px;border:1px solid var(--line);border-radius:13px;background:#fafbfc;
}
.prayer .name{font-size:12px;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.prayer .pt{font-size:15px;font-weight:800;margin-top:4px;line-height:1.3}
.prayer.active{
  border-color:#b7ded4;background:var(--accent-soft);
  box-shadow:inset 4px 0 0 var(--accent);
}
.prayer.active .pt{color:var(--accent)}
.status{
  margin:0 18px 16px;padding:12px 14px;border-radius:12px;
  background:#f7f8fa;color:var(--muted);font-size:12px;
}
.status.error{background:#fff1f0;color:var(--danger)}
.notes{padding:0 22px 22px}
.upwork-link{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 16px;border-radius:13px;
  background:var(--accent-soft);border:1px solid #b7ded4;
  text-decoration:none;color:inherit;transition:.15s ease;
}
.upwork-link:hover{background:#dcf0ea;border-color:var(--accent)}
.upwork-link-label{font-size:14px;font-weight:800;color:var(--accent)}
.upwork-link-url{font-size:12px;color:var(--muted)}
.footer{margin-top:18px;color:var(--muted);font-size:11px;text-align:center}
@media(max-width:850px){
  .grid{grid-template-columns:1fr}
  header{align-items:center}
}
@media(max-width:560px){
  .wrap{padding:18px 12px 35px}
  header{display:block}
  .clock{text-align:left;margin-top:12px}
  .item{grid-template-columns:95px 1fr;gap:10px;padding:13px 9px}
  .prayers{grid-template-columns:repeat(2,1fr);padding:10px 12px 16px}
}