:root{
  --navy:#173349;
  --mint:#D7E67A;
  --orange:#F36628;
  --yellow:#FFD33C;
  --stroke:rgba(23,51,73,.14);
  --muted:rgba(23,51,73,.72);
  --shadow:0 12px 34px rgba(23,51,73,.12);
  --glass:rgba(255,255,255,.72);
  --zoomBlue:#2D8CFF;
  --liveGreen:#1aa94c;
}

html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:18px 14px 28px;
  background:transparent;
  color:var(--navy);
  -webkit-text-size-adjust:100%;
}

/* ------------------------------------------------ */
/* SPLASH SCREEN */
/* ------------------------------------------------ */

#splashScreen{
  position:fixed;
  inset:0;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  opacity:1;
  transition:opacity .42s ease, visibility .42s ease;
}

#splashScreen.fade-out{
  opacity:0;
  visibility:hidden;
}

.splashInner{
  text-align:center;
  width:min(300px,82vw);
  padding:20px 20px 24px;
  transform:translateY(0);
  opacity:1;
  transition:transform .42s ease, opacity .42s ease;
}

#splashScreen.fade-out .splashInner{
  transform:translateY(-6px);
  opacity:0;
}

.splashLogo{
  width:108px;
  height:108px;
  object-fit:contain;
  display:block;
  margin:0 auto 14px;
}

.splashGuide{
  font-size:16px;
  font-weight:1000;
  letter-spacing:.14em;
  color:#173349;
  text-transform:uppercase;
  line-height:1.2;
}

.splashMonth{
  font-size:13px;
  margin-top:6px;
  color:#6b7a89;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.splashLoadWrap{
  margin:14px auto 0;
  width:100%;
  max-width:220px;
}

.splashLoadText{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:900;
  color:#6b7a89;
  letter-spacing:.02em;
  margin-bottom:7px;
}

.splashBar{
  height:6px;
  width:100%;
  border-radius:999px;
  background:rgba(23,51,73,.10);
  overflow:hidden;
  position:relative;
}

.splashBarFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#2D8CFF,#7AB7FF);
  box-shadow:0 1px 8px rgba(45,140,255,.18);
  transition:width .24s ease;
  position:relative;
}

.splashBarFill::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:28px;
  height:100%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.42),
    rgba(255,255,255,0)
  );
  animation:splashShine 1.15s linear infinite;
}

@keyframes splashShine{
  from{ transform:translateX(-28px); }
  to{ transform:translateX(180px); }
}

/* ------------------------------------------------ */
/* BACKGROUND */
/* ------------------------------------------------ */

.bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.18) 38%,
      rgba(255,255,255,.28) 100%
    ),
    linear-gradient(
      135deg,
      rgba(237,242,204,.46) 0%,
      rgba(245,240,197,.34) 45%,
      rgba(223,230,217,.42) 100%
    ),
    url("bg.jpg") center center / cover no-repeat;
  z-index:-2;
}

.wrap{
  max-width:980px;
  margin:0 auto;
}

/* ------------------------------------------------ */
/* HEADER */
/* ------------------------------------------------ */

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:var(--navy);
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(255,255,255,.62);
  box-shadow:0 2px 8px rgba(23,51,73,.04);
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(215,230,122,.35);
}

h1{
  margin:16px 0 8px;
  font-size:34px;
  font-weight:1000;
  letter-spacing:-.03em;
  line-height:1.03;
  color:var(--navy);
}

.date{
  margin:0 0 18px;
  color:var(--muted);
  font-weight:800;
  font-size:16px;
}

/* ------------------------------------------------ */
/* TOP ACTIONS */
/* ------------------------------------------------ */

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  min-height:48px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--glass);
  color:var(--navy);
  font-weight:900;
  font-size:15px;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:transform .12s ease, box-shadow .12s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(23,51,73,.12);
}

.btn.copy{
  background:rgba(215,230,122,.82);
  border:none;
}

.btn.whatsapp{
  background:rgba(255,211,60,.92);
  border:none;
}

.btn.prayer{
  background:var(--orange);
  color:#fff;
  border:none;
}

/* ------------------------------------------------ */
/* ZOOM CARD */
/* ------------------------------------------------ */

.zoomCard{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:18px 20px;
  align-items:center;
  padding:18px 20px;
  border-radius:26px;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.94),
    rgba(255,255,255,.82)
  );
  border:1px solid rgba(45,140,255,.18);
  box-shadow:
    0 16px 36px rgba(23,51,73,.12),
    0 4px 10px rgba(23,51,73,.06);
  margin:0 0 18px;
}

.zoomHead{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.zoomBadge{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(45,140,255,.12);
  border:1px solid rgba(45,140,255,.16);
  flex:0 0 auto;
}

.zoomMeta{
  min-width:0;
}

.zoomTitle{
  font-weight:1000;
  font-size:20px;
  line-height:1.08;
  color:var(--navy);
}

.zoomSub{
  margin-top:4px;
  font-size:14px;
  font-weight:900;
  color:rgba(23,51,73,.68);
}

.zoomTimesWrap{
  min-width:0;
}

.zoomTimesLabel{
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(23,51,73,.58);
}

.zoomTimes{
  margin-top:6px;
  font-size:22px;
  line-height:1.08;
  font-weight:1000;
  color:var(--navy);
  white-space:nowrap;
}

.zoomStatusWrap{
  margin-top:10px;
}

.zoomStatus{
  font-size:15px;
  line-height:1.35;
  font-weight:1000;
  color:rgba(23,51,73,.82);
}

.zoomStatus.live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(26,169,76,.12);
  color:#138a3d;
  border:1px solid rgba(26,169,76,.18);
}

.zoomStatus.live::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--liveGreen);
  box-shadow:0 0 0 6px rgba(26,169,76,.12);
  flex:0 0 auto;
}

.zoomHint{
  margin-top:8px;
  min-height:18px;
  font-size:13px;
  font-weight:900;
  color:rgba(45,140,255,.92);
}

.zoomActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  width:100%;
}

.zoomJoin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,#2D8CFF,#1F6FE5);
  color:#fff;
  font-weight:1000;
  font-size:16px;
  text-decoration:none;
  box-shadow:0 12px 22px rgba(45,140,255,.20);
  transition:transform .15s ease, box-shadow .15s ease;
}

.zoomJoin:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(45,140,255,.30);
}

.zoomReminder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(23,51,73,.12);
  background:rgba(255,255,255,.78);
  color:var(--navy);
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

/* ------------------------------------------------ */
/* PRAYER POINTS DIVIDER */
/* ------------------------------------------------ */

.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 16px;
}

.divider .line{
  flex:1;
  height:1px;
  background:rgba(23,51,73,.14);
}

.divider .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(23,51,73,.14);
  background:rgba(255,255,255,.74);
  box-shadow:0 8px 18px rgba(23,51,73,.06);
}

.pillIcon{
  font-size:19px;
  line-height:1;
}

.pillTitle{
  font-size:15px;
  font-weight:1000;
  color:var(--navy);
}

.divider .hint{
  font-size:12px;
  font-weight:900;
  color:rgba(23,51,73,.62);
}

/* ------------------------------------------------ */
/* CONTENT CARD */
/* ------------------------------------------------ */

.card{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.55);
  border-radius:24px;
  box-shadow:
    0 14px 34px rgba(23,51,73,.10),
    0 4px 10px rgba(23,51,73,.05);
  overflow:hidden;
}

details{
  border-top:1px solid rgba(23,51,73,.10);
}

details:first-child{
  border-top:none;
}

summary{
  padding:18px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  list-style:none;
}

summary::-webkit-details-marker{
  display:none;
}

.left{
  display:flex;
  gap:14px;
  align-items:center;
  min-width:0;
}

.icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(215,230,122,.35);
  border:1px solid rgba(23,51,73,.10);
  color:var(--navy);
  flex:0 0 auto;
}

.sec-title{
  font-weight:1000;
  font-size:19px;
  color:var(--navy);
}

.sec-sub{
  display:inline-flex;
  margin-top:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(23,51,73,.14);
  background:rgba(255,255,255,.58);
  font-size:12px;
  font-weight:900;
  color:rgba(23,51,73,.78);
}

.sec-sub:empty{
  display:none;
}

.chev{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(23,51,73,.12);
  background:rgba(255,255,255,.68);
  color:rgba(23,51,73,.75);
  font-weight:1000;
  transition:transform .2s ease;
  flex:0 0 auto;
}

details[open] .chev{
  transform:rotate(180deg);
}

.content{
  padding:0 18px 18px 78px;
  color:rgba(11,18,32,.92);
}

.lead{
  font-weight:900;
  font-size:17px;
  line-height:1.4;
  margin:6px 0 10px;
  color:#0f1624;
}

.para{
  font-weight:700;
  line-height:1.55;
  color:rgba(11,18,32,.88);
  margin:4px 0;
}

/* ------------------------------------------------ */
/* SCRIPTURE PILLS */
/* ------------------------------------------------ */

.scripture{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:6px 8px 10px 0;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(23,51,73,.08);
  border:1px solid rgba(23,51,73,.12);
  color:rgba(23,51,73,.88);
  font-weight:900;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  vertical-align:middle;
}

.scripture .book{
  font-size:13px;
  line-height:1;
}

.scripture .tag{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(23,51,73,.12);
  background:rgba(255,255,255,.74);
  line-height:1;
}

/* ------------------------------------------------ */
/* PRAYER ITEMS */
/* ------------------------------------------------ */

.pitem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  margin:8px 0;
  border-radius:12px;
  background:rgba(215,230,122,.18);
  border:1px solid rgba(23,51,73,.10);
}

.pbar{
  width:4px;
  border-radius:999px;
  background:var(--mint);
  flex:0 0 auto;
  margin-top:2px;
}

.ptext{
  font-weight:800;
  line-height:1.55;
}

/* ------------------------------------------------ */
/* LOADING SHIMMER */
/* ------------------------------------------------ */

.loading-card{
  padding:6px 0;
}

.loading-block{
  height:18px;
  border-radius:10px;
  background:linear-gradient(
    90deg,
    rgba(23,51,73,.06) 25%,
    rgba(23,51,73,.12) 37%,
    rgba(23,51,73,.06) 63%
  );
  background-size:400% 100%;
  animation:shimmer 1.2s ease-in-out infinite;
  margin:10px 0;
}

.loading-block.short{ width:38%; }
.loading-block.mid{ width:62%; }
.loading-block.long{ width:88%; }

@keyframes shimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:0 0; }
}

/* ------------------------------------------------ */
/* MODAL */
/* ------------------------------------------------ */

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.modal.show{
  display:block;
}

.backdrop{
  position:absolute;
  inset:0;
  background:rgba(23,51,73,.35);
}

.panel{
  position:relative;
  width:min(820px, calc(100% - 24px));
  margin:10vh auto 0;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(23,51,73,.25);
  max-height:76vh;
  display:flex;
  flex-direction:column;
}

.modalHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border-bottom:1px solid rgba(23,51,73,.10);
}

.modalKicker{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(23,51,73,.75);
}

.modalTitle{
  font-size:18px;
  font-weight:1000;
  color:var(--navy);
  margin-top:4px;
}

.xbtn{
  border:1px solid rgba(23,51,73,.14);
  background:rgba(255,255,255,.65);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  color:rgba(23,51,73,.8);
}

.modalBody{
  padding:14px 16px;
  overflow:auto;
}

.modalMeta{
  margin-top:12px;
  font-size:12px;
  font-weight:900;
  color:rgba(23,51,73,.70);
  border-top:1px solid rgba(23,51,73,.10);
  padding-top:10px;
}

.verseNum{
  font-size:.75em;
  vertical-align:super;
  color:rgba(23,51,73,.55);
}

.vline{
  padding:2px 0;
  border-radius:8px;
}

.passageWrap{
  position:relative;
}

.passageWrap.collapsed .passageInner{
  max-height:280px;
  overflow:hidden;
  mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
}

.passageToggle{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(23,51,73,.14);
  background:rgba(255,255,255,.65);
  font-weight:1000;
  cursor:pointer;
  color:rgba(23,51,73,.85);
}

@media (max-width:700px){
  .zoomCard{
    grid-template-columns:1fr;
    gap:14px;
    padding:16px;
    align-items:flex-start;
  }

  .zoomActions{
    width:100%;
  }

  .zoomJoin,
  .zoomReminder{
    width:100%;
  }
}

@media (max-width:520px){
  body{
    padding:14px 14px 20px;
  }

  .splashInner{
    width:min(280px,84vw);
    padding:18px 18px 22px;
  }

  .splashLogo{
    width:100px;
    height:100px;
    margin-bottom:12px;
  }

  .splashGuide{
    font-size:15px;
    letter-spacing:.12em;
  }

  .splashMonth{
    font-size:12px;
  }

  .splashLoadWrap{
    max-width:210px;
    margin-top:12px;
  }

  .splashLoadText{
    font-size:10.5px;
    margin-bottom:6px;
  }

  h1{
    font-size:28px;
  }

  .zoomCard{
    padding:15px;
    border-radius:22px;
  }

  .content{
    padding:0 14px 16px 14px;
  }

  .icon{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:16px;
  }

  .sec-title{
    font-size:17px;
  }

  .divider{
    gap:8px;
  }

  .divider .pill{
    padding:8px 12px;
    gap:6px;
  }

  .pillTitle{
    font-size:14px;
  }

  .divider .hint{
    font-size:11px;
  }
}