/* SDA Corner PWA — styles.css — v2.0 white redesign */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --red:#fc3d39;--red-soft:#FFF1F0;--blue:#007AFF;--green:#34C759;--green-bar:#4cd964;
  --t1:#000;--t2:#3C3C43;--tm:#8E8E93;--tq:#AAAAAA;--tl:#C7C7CC;
  --bg:#fff;--fill:#F5F5F7;--line:#F2F2F2;--line2:#F0F0F0;--bd:#E5E5EA;
  --font:'Inter',-apple-system,'SF Pro Display',sans-serif;
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --reader-bg:#ffffff;--reader-text:#1D1D1F;--reader-body-color:#3c3c43;--reader-muted:#AAAAAA;--reader-btn-bg:rgba(0,0,0,.06);--reader-btn-color:#1D1D1F;
}

html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background: #eceae7;
  overflow: hidden;
}
button, input { font-family: var(--font); }
.hidden { display: none !important; }

@keyframes splashPop { 0%{transform:scale(.7);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes splashFade { to{opacity:1} }
@keyframes splashBarFill { from{width:0} to{width:100%} }

/* ── SHARED FLOAT ANIMATIONS ── */
@keyframes fA1 { 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-6deg) translateY(-6px)} }
@keyframes fA2 { 0%,100%{transform:rotate(4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-8px)} }
@keyframes fA3 { 0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(-5px)} }
@keyframes fA4 { 0%,100%{transform:rotate(2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-7px)} }
@keyframes fAv { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.float-a1{animation:fA1 4s ease-in-out infinite}
.float-a2{animation:fA2 5s ease-in-out infinite .5s}
.float-a3{animation:fA3 4.5s ease-in-out infinite 1s}
.float-a4{animation:fA4 5.5s ease-in-out infinite 1.5s}
.float-a5{animation:fAv 4.8s ease-in-out infinite 1.7s}
.si-avatars .float-a1,.si-avatars .float-a2,.si-avatars .float-a3,.si-avatars .float-a4{animation-name:fAv}

/* ── SHARED BUTTONS ── */
.btn-black{width:100%;height:50px;background:#000;border:none;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;transition:transform .12s,opacity .2s}
.btn-black:active{transform:scale(.975)}
.btn-black:disabled{opacity:.4}
.btn-black i{font-size:15px}
.circle-btn{width:34px;height:34px;border-radius:50%;background:var(--fill);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1D1D1F;flex-shrink:0;transition:transform .12s}
.circle-btn:active{transform:scale(.92)}
.circle-btn i{font-size:16px}
.reader-aa{font-size:13px;font-weight:700;color:#1D1D1F;font-family:'Inter',sans-serif}

/* ══════════ ONBOARDING (welcome) ══════════ */
#ob-welcome, #ob, #ob-signin, #ob-verify {
  left: 50% !important;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
}
.obw-inner{height:100%;display:flex;flex-direction:column;padding:0 22px calc(28px + var(--sab));overflow:hidden}
.obw-stage{flex:1;display:flex;align-items:center;justify-content:center;padding-top:calc(56px + var(--sat));min-height:0}
.obw-cluster{position:relative;width:100%;max-width:340px;height:min(42vh, 300px)}
.obw-card{position:absolute;border-radius:19px;overflow:hidden}
.obw-devo1{top:0;right:2%;width:47%;aspect-ratio:1/.98;box-shadow:0 16px 40px rgba(0,0,0,.22);z-index:3}
.obw-devo2{bottom:2%;left:12%;width:39%;aspect-ratio:1/.95;box-shadow:0 10px 28px rgba(0,0,0,.16);z-index:2}
.obw-devo-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#4a3520}
.obw-devo1 .obw-devo-img{background-image:linear-gradient(160deg,#4a3520,#8a6a3a 60%,#3a2a18)}
.obw-devo2 .obw-devo-img{background-image:linear-gradient(160deg,#1e3a2a,#3a7a54 60%,#16281e)}
.obw-devo-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,.75) 100%)}
.obw-like{position:absolute;top:9px;right:9px;background:rgba(255,255,255,.92);border-radius:14px;padding:3px 8px;display:flex;align-items:center;gap:3px}
.obw-like i{font-size:9px;color:var(--red)}
.obw-like span{font-size:9px;font-weight:700;color:#1D1D1F}
.obw-devo-txt{position:absolute;bottom:11px;left:11px;right:11px}
.obw-devo-title{font-size:13px;font-weight:800;color:#fff;line-height:1.12;margin-bottom:2px}
.obw-devo-auth{font-size:9px;color:rgba(255,255,255,.5)}
.obw-video{top:16%;left:4%;width:44%;background:#f5f5f7;padding:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);z-index:4}
.obw-watch-pill{display:inline-flex;align-items:center;gap:3px;background:rgba(252,61,57,.1);border-radius:12px;padding:3px 9px;margin-bottom:6px}
.obw-watch-pill i{font-size:7px;color:var(--red)}
.obw-watch-pill span{font-size:7px;font-weight:700;color:var(--red);letter-spacing:.3px}
.obw-video-title{font-size:11px;font-weight:700;color:#1D1D1F;line-height:1.25;margin-bottom:7px}
.obw-video-foot{display:flex;align-items:center;justify-content:space-between}
.obw-video-foot > span{font-size:8px;color:rgba(0,0,0,.45)}
.obw-play{width:19px;height:19px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center}
.obw-play i{font-size:8px;color:#fff;margin-left:1px}
.obw-guide{bottom:8%;right:4%;width:44%;background:linear-gradient(135deg,#0a4a8a,#2a8ac9);padding:13px;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:3}
.obw-guide-ey{font-size:7px;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.obw-guide-title{font-size:11px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:8px}
.obw-guide-bar{height:3.5px;border-radius:2px;background:rgba(255,255,255,.25);margin-bottom:5px}
.obw-guide-fill{width:40%;height:100%;border-radius:2px;background:var(--green-bar)}
.obw-guide-pct{font-size:7px;color:rgba(255,255,255,.55)}
.obw-text{padding-top:8px;margin-bottom:22px}
.obw-logo{width:56px;height:56px;object-fit:contain;display:block;margin-bottom:12px}
.obw-tagline{font-size:27px;font-weight:800;color:#000;line-height:1.08;letter-spacing:-.6px;margin-bottom:9px}
.obw-sub{font-size:13px;color:var(--tm);line-height:1.6}

/* ══════════ AUTH SCREENS ══════════ */
.auth-inner{height:100%;display:flex;flex-direction:column;padding:0 22px calc(28px + var(--sab));overflow-y:auto}
.auth-back{margin-top:calc(56px + var(--sat));margin-bottom:20px}
.auth-title{font-size:26px;font-weight:800;color:#000;letter-spacing:-.55px;line-height:1.1;margin-bottom:7px}
.auth-sub{font-size:13px;color:var(--tm);line-height:1.5;margin-bottom:24px}
.auth-form{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.ob-inp{width:100%;height:50px;padding:0 15px;border:1.5px solid var(--bd);border-radius:13px;font-size:16px;color:#000;outline:none;background:#fff;font-family:'Inter',sans-serif;font-weight:500}
.ob-inp::placeholder{color:var(--tq);font-weight:400}
.ob-inp:focus{border-color:#000}
.ob-err{font-size:12px;font-weight:600;color:var(--red);padding:2px 2px 0}
.auth-check{display:flex;align-items:flex-start;gap:9px;margin-bottom:11px;cursor:pointer}
.auth-check input{display:none}
.auth-checkbox{width:19px;height:19px;border-radius:6px;border:1.5px solid #D1D1D6;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.auth-check input:checked + .auth-checkbox{background:#000;border-color:#000}
.auth-check input:checked + .auth-checkbox::after{content:'✓';color:#fff;font-size:11px;font-weight:800}
.auth-check-txt{font-size:11.5px;color:var(--tm);line-height:1.5}
.auth-check-txt a{color:#000;font-weight:600;text-decoration:none}
.auth-switch{text-align:center;font-size:13px;color:var(--tm);margin-top:16px}
.auth-switch span{color:#000;font-weight:700;cursor:pointer}

/* Sign-in avatars */
.si-avatars{position:relative;height:128px;margin-bottom:6px}
.si-av{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.si-av1{top:2px;left:13%;width:40px;height:40px;background:#AF52DE;font-size:13px;box-shadow:0 8px 20px rgba(175,82,222,.3);z-index:2}
.si-av2{top:16px;left:50%;margin-left:-27px;width:54px;height:54px;background:var(--blue);font-size:18px;box-shadow:0 10px 26px rgba(0,122,255,.32);z-index:3}
.si-av3{top:32px;right:9%;width:44px;height:44px;background:#FF9500;font-size:14px;box-shadow:0 8px 22px rgba(255,149,0,.3);z-index:2}
.si-av4{bottom:4px;left:23%;width:36px;height:36px;background:var(--green);font-size:12px;box-shadow:0 7px 18px rgba(52,199,89,.3);z-index:1}
.si-av5{bottom:12px;right:26%;width:32px;height:32px;background:var(--red);font-size:11px;box-shadow:0 7px 18px rgba(252,61,57,.32);z-index:1}
.si-dot{position:absolute;border-radius:50%;background:var(--fill)}
.si-dot1{top:8px;right:22%;width:12px;height:12px}
.si-dot2{bottom:0;left:7%;width:9px;height:9px}

/* Verify */
.verify-icon{width:68px;height:68px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.verify-icon i{font-size:30px;color:#1D1D1F}
.verify-title{font-size:22px;font-weight:800;color:#000;letter-spacing:-.45px;margin-bottom:8px}
.verify-sub{font-size:13px;color:var(--tm);line-height:1.6;margin-bottom:24px}
.verify-sub span{color:#000;font-weight:600}

/* ══════════ APP LAYOUT ══════════ */
#APP{position:fixed;inset:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--bg);display:none;flex-direction:column;overflow:hidden;box-shadow:0 0 40px rgba(0,0,0,.1)}
.screen{position:absolute;inset:0;bottom:0;display:none;flex-direction:column;background:var(--bg);overflow:hidden}
.screen.on{display:flex}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#s-home .scroll,#s-devs .scroll,#s-guides .scroll,#s-profile .scroll{padding-bottom:76px}

/* ══════════ TAB BAR ══════════ */
.tab-bar{position:absolute;bottom:0;left:0;right:0;height:calc(58px + var(--sab));background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line2);display:flex;align-items:flex-start;justify-content:space-around;padding-top:7px;z-index:50}
.tb{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:#B8B8BD;padding:0 8px;transition:color .15s}
.tb i{font-size:22px}
.tb svg{width:22px;height:22px}
.tb span{font-size:9px;font-weight:500}
.tb.on{color:#000}
.tb.on span{font-weight:600}
.tb-avatar{width:23px;height:23px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}

/* ══════════ HOME ══════════ */
.home-hdr{display:flex;align-items:center;justify-content:space-between;padding:calc(18px + var(--sat)) 16px 14px}
.g-line{font-size:12px;color:var(--tq);font-weight:500;margin-bottom:1px}
.g-name{font-size:22px;font-weight:800;color:#000;letter-spacing:-.45px;line-height:1.1}
.home-hdr-r{display:flex;align-items:center;gap:8px}
.streak-pill{display:flex;align-items:center;gap:4px;background:var(--red-soft);border:none;border-radius:20px;padding:7px 12px;cursor:pointer;transition:transform .12s}
.streak-pill:active{transform:scale(.94)}
.streak-pill i{font-size:14px;color:var(--red)}
.streak-pill span{font-size:13px;font-weight:700;color:var(--red)}
.bell{position:relative;width:36px;height:36px;border-radius:50%;background:var(--fill);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bell i{font-size:16px;color:#1D1D1F}
.bdot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--fill)}

/* Hero */
.hero{margin:0 16px;position:relative;border-radius:20px;overflow:hidden;height:250px;cursor:pointer;background:#1a2438}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-image:linear-gradient(160deg,#16283f,#31517a 65%,#1a2438)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%)}
.hero-tag{position:absolute;top:13px;left:13px;background:rgba(30,30,32,.72);backdrop-filter:blur(8px);border-radius:20px;padding:6px 12px;font-size:10px;font-weight:600;color:#fff}
.hero-tag.read-tag{background:rgba(52,199,89,.85)}
.hero-likes{position:absolute;top:13px;right:13px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:20px;padding:6px 11px;display:flex;align-items:center;gap:4px}
.hero-likes i{font-size:12px;color:var(--red)}
.hero-likes span{font-size:11px;font-weight:700;color:#1D1D1F}
.hero-bottom{position:absolute;bottom:0;left:0;right:0;padding:16px}
.hero-title{font-size:22px;font-weight:800;color:#fff;line-height:1.12;letter-spacing:-.4px;margin-bottom:5px}
.hero-meta{font-size:11px;color:rgba(255,255,255,.55);margin-bottom:13px}
.hero-actions{display:flex;align-items:center;justify-content:space-between}
.hero-read{display:inline-flex;align-items:center;gap:6px;height:38px;background:#fff;border:none;border-radius:11px;padding:0 17px;font-size:13px;font-weight:700;color:#000;cursor:pointer;transition:transform .12s}
.hero-read:active{transform:scale(.96)}
.hero-read i{font-size:13px}
.hero-listen{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
.hero-listen:active{transform:scale(.92)}
.hero-listen i{font-size:16px;color:#fff}

/* Hero loading skeleton */
.hero.loading .hero-img{background-image:none;background:#f2f2f4}
.hero.loading .hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-100%);animation:shimSweep 1.5s ease-in-out infinite}
.hero.loading .hero-shade,.hero.loading .hero-tag,.hero.loading .hero-likes,.hero.loading .hero-bottom{opacity:0}
.hero-shade,.hero-tag,.hero-likes,.hero-bottom{transition:opacity .35s}

/* Watch card */
.watch-card{margin:14px 16px 0;background:#f5f5f7;border-radius:18px;padding:15px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .12s}
.watch-card:active{transform:scale(.98)}
.watch-left{flex:1;min-width:0}
.watch-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(252,61,57,.1);border-radius:13px;padding:4px 10px;margin-bottom:7px}
.watch-pill i{font-size:8px;color:var(--red)}
.watch-pill span{font-size:9px;font-weight:700;color:var(--red);letter-spacing:.3px}
.watch-label{font-size:10px;color:#8e8e93;font-weight:500;margin-bottom:3px}
.watch-title{font-size:15px;font-weight:700;color:#1D1D1F;line-height:1.25;margin-bottom:8px}
.watch-meta{display:flex;align-items:center;gap:4px}
.watch-meta i{font-size:11px;color:#a8a8ad}
.watch-meta span{font-size:10px;color:#a8a8ad}
.watch-thumb{width:72px;height:72px;border-radius:14px;background:linear-gradient(135deg,#3a2a1a,#6a4a2a);background-size:cover;background-position:center;flex-shrink:0;position:relative}
.watch-play{position:absolute;bottom:6px;right:6px;width:24px;height:24px;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center}
.watch-play i{font-size:10px;color:#fff;margin-left:1px}

/* Recent devotionals */
.recent-sec{padding-top:20px}
.recent-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin-bottom:11px}
.recent-t{font-size:16px;font-weight:700;color:#000;letter-spacing:-.3px}
.recent-all{display:flex;align-items:center;gap:2px;background:none;border:none;font-size:11px;color:var(--tq);font-weight:500;cursor:pointer}
.recent-all i{font-size:11px}
.recent-row{display:flex;gap:11px;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.recent-row::-webkit-scrollbar{display:none}
.rc-card{width:128px;flex-shrink:0;cursor:pointer}
.rc-img{position:relative;height:112px;border-radius:15px;overflow:hidden;margin-bottom:7px;background-size:cover;background-position:center;background-color:#e5e5ea}
.rc-like{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);border-radius:14px;padding:3px 7px;display:flex;align-items:center;gap:3px}
.rc-like i{font-size:9px;color:var(--red)}
.rc-like span{font-size:9px;font-weight:700;color:#1D1D1F}
.rc-title{font-size:12px;font-weight:700;color:#000;line-height:1.25;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-auth{font-size:10px;color:var(--tq)}
.rc-end{width:110px;flex-shrink:0;border:1.5px dashed var(--bd);border-radius:15px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.rc-end i{font-size:18px;color:var(--tq)}
.rc-end span{font-size:10px;font-weight:600;color:var(--tm)}

/* Notification banner + panel */
.nb{margin:calc(10px + var(--sat)) 16px 0;background:#000;border-radius:15px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer}
.nb-ic{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nb-ic i{font-size:15px;color:#fff}
.nb-txt{flex:1;min-width:0}
.nb-t{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-s{font-size:10px;color:rgba(255,255,255,.5)}
.nb-x{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;flex-shrink:0}
.nb-x i{font-size:14px}
.np{position:absolute;top:calc(60px + var(--sat));right:16px;left:16px;background:#fff;border:1px solid var(--line2);border-radius:18px;box-shadow:0 16px 44px rgba(0,0,0,.14);z-index:60;padding:14px;max-height:340px;overflow-y:auto}
.np-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.np-hdr-l{display:flex;align-items:center;gap:7px}
.np-ht{font-size:14px;font-weight:700;color:#000}
.np-cnt{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px}
.np-cl{background:none;border:none;font-size:11px;font-weight:600;color:var(--tm);cursor:pointer}.np-empty{font-size:12px;color:var(--tq);text-align:center;padding:16px 0}

/* ══════════ SECTION HEADERS (devs/guides) ══════════ */
.ih{padding:calc(18px + var(--sat)) 16px 10px;background:var(--bg)}
.ih-t{font-size:24px;font-weight:800;color:#000;letter-spacing:-.5px;margin-bottom:13px}
.srch{height:40px;background:var(--fill);border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 13px;margin-bottom:11px}
.srch i{font-size:15px;color:var(--tq)}
.srch input{flex:1;border:none;background:none;outline:none;font-size:14px;color:#000}
.srch input::placeholder{color:var(--tq)}
.cat-chips{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chip{flex-shrink:0;background:var(--fill);color:#636366;border:none;border-radius:20px;padding:8px 14px;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}
.cat-chip.active-chip{background:#000;color:#fff;font-weight:600}

/* ══════════ DEVOTIONALS LIST — ROWS ══════════ */
.dev-row{display:flex;gap:12px;align-items:center;padding:12px 16px;cursor:pointer;transition:background .12s}
.dev-row:active{background:var(--fill)}.dev-row-img{width:60px;height:60px;border-radius:14px;background-size:cover;background-position:center;background-color:#e5e5ea;flex-shrink:0}
.dev-row-mid{flex:1;min-width:0}
.dev-row-title{font-size:14px;font-weight:700;color:#000;line-height:1.25;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dev-row-meta{font-size:11px;color:var(--tq)}
.dev-row-like{display:flex;align-items:center;gap:3px;flex-shrink:0}
.dev-row-like i{font-size:13px;color:var(--red)}
.dev-row-like span{font-size:11px;color:var(--tq);font-weight:600}.dev-sep{height:1px;background:var(--line);margin:0 16px 0 88px}
/* Shimmer — left-to-right sweep used by all loading skeletons */
.shim{position:relative;overflow:hidden;background:#f2f2f4}
.shim::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-100%);animation:shimSweep 1.5s ease-in-out infinite}
@keyframes shimSweep{100%{transform:translateX(100%)}}
.dev-skel{display:flex;gap:12px;align-items:center;padding:12px 16px}
.dev-skel-img{width:60px;height:60px;border-radius:14px;flex-shrink:0}
.dev-skel-lines{flex:1}
.dev-skel-l1{height:13px;width:70%;border-radius:6px;margin-bottom:7px}
.dev-skel-l2{height:10px;width:45%;border-radius:5px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.dev-err{text-align:center;padding:40px 30px}
.dev-err i{font-size:30px;color:var(--tl);margin-bottom:10px;display:block}
.dev-err-t{font-size:14px;font-weight:700;color:#000;margin-bottom:5px}
.dev-err-s{font-size:12px;color:var(--tm);line-height:1.5;margin-bottom:16px}

/* ══════════ READER ══════════ */
#s-reader{background:var(--reader-bg,#fff)}
.reader-hero{position:relative;height:250px;flex-shrink:0;transition:height .4s cubic-bezier(.4,0,.2,1)}
.reader-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#2a3548;background-image:linear-gradient(160deg,#16283f,#31517a 65%,#1a2438)}
.reader-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,transparent 45%)}
.reader-nav{position:absolute;top:calc(14px + var(--sat));left:13px;right:13px;display:flex;align-items:center;justify-content:space-between}
.reader-navbtn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1D1D1F;transition:transform .12s}
.reader-navbtn:active{transform:scale(.92)}
.reader-nav-r{display:flex;gap:8px}
.reader-card{flex:1;display:flex;flex-direction:column;margin-top:-26px;position:relative;z-index:2;background:var(--reader-bg);border-radius:24px 24px 0 0;overflow:hidden;transition:background .3s}
#reader-scroll{padding:24px 20px 40px}
.reader-body{max-width:600px;margin:0 auto}
.reader-title{font-size:21px;font-weight:800;color:var(--reader-text);letter-spacing:-.45px;line-height:1.15;margin-bottom:6px}
.reader-author{font-size:11px;color:var(--reader-muted);margin-bottom:20px}
.reader-section-hdr{font-size:9px;font-weight:700;color:var(--reader-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:7px;margin-top:20px}
.reader-section-hdr:first-of-type{margin-top:0}
.reader-scripture-text{font-size:var(--reader-size,15px);font-family:var(--reader-font,'Inter'),sans-serif;color:var(--reader-text);line-height:1.75;font-style:normal;margin-bottom:5px}
.reader-scripture-ref{font-size:11px;color:var(--reader-muted)}
.reader-divider{height:1px;background:var(--reader-btn-bg);margin:18px 0}
#RBD p{font-size:var(--reader-size,15px);font-family:var(--reader-font,'Inter'),sans-serif;color:var(--reader-body-color);line-height:1.85;margin-bottom:14px}
.reader-section-text,#RPR p{font-size:var(--reader-size,15px);font-family:var(--reader-font,'Inter'),sans-serif;color:var(--reader-body-color);line-height:1.8;margin-bottom:8px}
.reader-action-row{display:flex;align-items:center;justify-content:space-between;padding-top:2px}
.reader-amen{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer}
.reader-amen-circle{display:flex;align-items:center;justify-content:center;transition:transform .15s}
.reader-amen:active .reader-amen-circle{transform:scale(.88)}
.reader-amen-circle i{font-size:21px;color:var(--reader-muted,#8e8e93)}
.reader-amen-n{font-size:13px;font-weight:700;color:var(--reader-text)}
.reader-act-r{display:flex;gap:9px}
.reader-actbtn{background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s;padding:6px}
.reader-actbtn:active{transform:scale(.9)}
.reader-actbtn i{font-size:20px;color:var(--reader-muted,#8e8e93)}

/* Reader audio player */
.reader-audio-player{flex-shrink:0;background:var(--reader-bg);border-top:0 solid var(--reader-btn-bg);max-height:0;opacity:0;overflow:hidden;padding:0 22px;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s,padding .45s,transform .25s ease}
.reader-audio-player.player-open{max-height:320px;opacity:1;padding:14px 20px calc(24px + var(--sab));border-top-width:1px}
.reader-hero.player-open{height:150px!important}
.reader-player-title{font-size:17px;font-weight:700;color:var(--reader-text);text-align:center;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-player-author{font-size:12px;color:var(--reader-muted);margin-top:3px;text-align:center;margin-bottom:24px}

.reader-player-btn{background:none;border:none;cursor:pointer;color:var(--reader-btn-color)}



.reader-player-time{font-size:10px;font-weight:600;color:var(--reader-muted);font-variant-numeric:tabular-nums}

/* ══════════ GUIDES LIST — GRADIENT CARDS ══════════ */
.guide-card{margin:0 16px 12px;border-radius:18px;padding:16px;position:relative;overflow:hidden;cursor:pointer;transition:transform .12s}
.guide-card:active{transform:scale(.985)}
.guide-ey{font-size:9px;font-weight:600;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.guide-title{font-size:17px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:12px}
.guide-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin-bottom:7px}
.guide-fill{height:100%;border-radius:2px;background:var(--green-bar);transition:width .6s cubic-bezier(.4,0,.2,1)}
.guide-foot{display:flex;align-items:center;justify-content:space-between}
.guide-foot-l{font-size:10px;color:rgba(255,255,255,.6)}
.guide-cta{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.16);border-radius:15px;padding:5px 12px}
.guide-cta span{font-size:10px;font-weight:700;color:#fff}
.guide-cta i{font-size:10px;color:#fff}
.guide-check{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center}
.guide-check i{font-size:12px}
.guide-card.locked{background:var(--fill) !important;cursor:default}
.guide-card.locked .guide-ey{color:var(--tq)}
.guide-card.locked .guide-title{color:var(--tm)}
.guide-card.locked .guide-foot-l{color:var(--tq)}
.guide-lock{position:absolute;top:14px;right:14px}
.guide-lock i{font-size:15px;color:var(--tl)}

/* ══════════ GUIDE VIEWER ══════════ */
#s-gv{background:var(--reader-bg,#fff)}
.gv-header{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--sat)) 15px 10px;flex-shrink:0}
.gv-header .circle-btn{background:var(--reader-btn-bg);color:var(--reader-btn-color)}
.gv-header .reader-aa{color:var(--reader-btn-color)}
.gv-page-top{font-size:12px;font-weight:600;color:var(--reader-muted);font-variant-numeric:tabular-nums}
.gv-slide-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 20px 20px}
.gv-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px calc(18px + var(--sab));flex-shrink:0}
.gv-prev{background:var(--reader-btn-bg);color:var(--reader-btn-color)}
.gv-prev:disabled{opacity:.3}
.gv-next{height:42px;background:var(--reader-text);border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 20px;font-size:13px;font-weight:700;color:var(--reader-bg);cursor:pointer;transition:transform .12s}
.gv-next:active{transform:scale(.96)}
.gv-next i{font-size:13px}

/* Guide slide content */
.gv-ey{font-size:10px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.8px;margin-bottom:9px}
.gv-slide-title{font-size:21px;font-weight:800;color:var(--reader-text);letter-spacing:-.45px;line-height:1.15;margin-bottom:7px}
.gv-slide-sub{font-size:13px;color:var(--reader-muted);line-height:1.6;margin-bottom:16px}
.gv-divider{height:1px;background:var(--reader-btn-bg);margin-bottom:16px}
.gv-body p{font-size:var(--reader-size,15px);font-family:var(--reader-font,'Inter'),sans-serif;color:var(--reader-body-color);line-height:1.85;margin-bottom:14px}
.gv-qa{margin-bottom:26px}
.gv-qa-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.gv-qa-num{width:24px;height:24px;border-radius:50%;background:var(--reader-text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gv-qa-num span{font-size:11px;font-weight:800;color:var(--reader-bg)}
.gv-qa-lbl{font-size:9px;font-weight:700;color:var(--reader-muted);text-transform:uppercase;letter-spacing:.8px}
.gv-qa-q{font-size:var(--reader-size,15px);font-family:var(--reader-font,'Inter'),sans-serif;font-weight:700;color:var(--reader-text);line-height:1.35;margin-bottom:8px}
.gv-qa-a{font-size:var(--reader-size,14px);font-family:var(--reader-font,'Inter'),sans-serif;color:var(--reader-muted);line-height:1.7}
.gv-qa-a b{color:var(--reader-text);font-weight:600}
.gv-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100%;padding:20px 6px}
.gv-quick-ic{width:56px;height:56px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.gv-quick-ic i{font-size:24px;color:var(--reader-text)}
.gv-take-item{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px}
.gv-take-check{width:22px;height:22px;border-radius:50%;background:#E8F9EE;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.gv-take-check i{font-size:12px;color:var(--green)}
.gv-take-h{font-size:14px;font-weight:700;color:var(--reader-text);line-height:1.3;margin-bottom:2px}
.gv-take-s{font-size:calc(var(--reader-size,15px) - 3px);font-family:var(--reader-font,'Inter'),sans-serif;color:var(--reader-muted);line-height:1.55}
.gv-badge{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 14px 36px rgba(0,0,0,.22)}/* ══════════ PROFILE ══════════ */
.ph{display:flex;align-items:center;gap:14px;padding:calc(18px + var(--sat)) 16px 18px}
.prof-av{width:60px;height:60px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:700;color:#fff}
.prof-av-pencil{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.prof-av-pencil i{font-size:10px;color:#636366}
.pname{font-size:18px;font-weight:800;color:#000;letter-spacing:-.35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname-pencil{width:20px;height:20px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pname-pencil i{font-size:10px;color:#636366}
.psince{font-size:11px;color:var(--tq);margin-top:2px}

/* Streak card (profile) */
.streak-b-card{background:#fff;border:1px solid var(--line2);border-radius:18px;padding:15px 16px}
.streak-chips{display:flex;gap:8px;margin-bottom:14px}
.streak-chip{flex:1;border-radius:12px;padding:10px 6px;text-align:center;background:var(--fill)}
.streak-chip.hot{background:var(--red-soft)}
.streak-chip-n{font-size:17px;font-weight:800;color:#000;line-height:1}
.streak-chip.hot .streak-chip-n{color:var(--red)}
.streak-chip-l{font-size:8px;color:var(--tm);font-weight:600;margin-top:3px}
.streak-chip.hot .streak-chip-l{color:#c97a77}
.streak-graph-lbls{display:flex;justify-content:space-between;margin-top:4px}
.streak-graph-lbls span{font-size:8px;color:var(--tl)}

/* Stat cards */
.stat-card{border:1px solid var(--line2);border-radius:16px;padding:13px 14px;background:#fff}
.stat-card i{font-size:16px;color:#1D1D1F;margin-bottom:7px;display:block}
.stat-n{font-size:18px;font-weight:800;color:#000;line-height:1}
.stat-l{font-size:9px;color:var(--tm);margin-top:3px}

/* Badge card */
.badge-card{border:1px solid var(--line2);border-radius:16px;padding:13px 14px;background:#fff}
.badge-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;cursor:pointer}
.badge-hdr-t{font-size:13px;font-weight:700;color:#000}
.badge-hdr-r{display:flex;align-items:center;gap:2px;font-size:12px;font-weight:600;color:var(--tq)}
.badge-hdr-r i{font-size:14px}
.badge-row{display:flex;gap:10px;flex-wrap:wrap}
.badge-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;padding:0;cursor:pointer;font-family:inherit;flex-shrink:0;transition:transform .12s}
.badge-circle:active{transform:scale(.93)}
.badge-circle i{font-size:22px;color:#fff}
.badge-circle.locked{background:var(--fill)}
.badge-circle.locked i{font-size:18px;color:var(--tl)}
.badge-full{display:flex;gap:12px;align-items:center;padding:10px 0;border:none;border-top:1px solid var(--line);width:100%;background:none;text-align:left;cursor:pointer;font-family:inherit}
.badge-full > i{margin-left:auto;font-size:14px;color:var(--tl)}
.badge-full-p{font-size:11px;font-weight:600;color:var(--tm);margin-top:3px}
.badge-hdr-s{font-size:11px;color:var(--tm);margin-top:2px}
.badge-tip{font-size:11px;color:var(--tm);margin-top:11px}
.badge-full-t{font-size:12px;font-weight:700;color:#000}
.badge-full-s{font-size:10px;color:var(--tm)}

/* Settings rows */
.slbl-sm{font-size:12px;font-weight:700;color:#000;padding:20px 16px 7px}
.sg{margin:0 16px;background:#fff}
.sr{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.sg .sr:last-child{border-bottom:none}
.sr-ic{width:32px;height:32px;border-radius:10px;background:var(--fill);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sr-ic i{font-size:15px;color:#1D1D1F}
.sr-ic-red{background:var(--red-soft)}
.sr-ic-red i{color:var(--red)}
.sl{flex:1;min-width:0}
.st{font-size:14px;font-weight:600;color:#000;flex:1}
.sl .st{flex:none}
.ss{font-size:11px;color:var(--tq);margin-top:1px}
.sr-chev{font-size:13px;color:var(--tl);margin-left:auto;flex-shrink:0}
.sr .sl + .sr-chev, .sr .st + .sr-chev{margin-left:auto}
.brand{text-align:center;padding:22px 0 10px}
.bver{font-size:10px;font-weight:600;color:var(--tl);letter-spacing:1.2px}/* ══════════ VIDEO PLAYER ══════════ */
#VIDEO-PLAYER{position:fixed;inset:0;z-index:9990;background:#000;left:50%;transform:translateX(-50%);width:100%;max-width:480px}
#VP-VIDEO{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#VP-VIDEO.vp-vertical{object-fit:cover}
#VP-CONTROLS{position:absolute;inset:0;transition:opacity .25s}
#VP-CONTROLS.vp-hidden{opacity:0;pointer-events:none}
#VP-CONTROLS::before{content:'';position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);pointer-events:none}
.vp-circle{position:absolute;top:calc(16px + var(--sat));width:34px;height:34px;border-radius:50%;background:rgba(235,235,240,.92);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.vp-circle i{font-size:15px;color:#1D1D1F}
#VP-CLOSE{left:14px}
.vp-dots{right:14px}
.vp-bottom{position:absolute;left:0;right:0;bottom:0;padding:90px 16px calc(20px + var(--sab));z-index:2;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,0) 100%)}
.vp-title{font-size:16px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:3px}
.vp-speaker{font-size:11px;color:rgba(255,255,255,.55);margin-bottom:14px}
.vp-progress-row{display:flex;align-items:center;gap:10px}
.vp-time{font-size:11px;color:#fff;font-weight:500;font-variant-numeric:tabular-nums;flex-shrink:0}
.vp-track{flex:1;height:20px;display:flex;align-items:center;position:relative;cursor:pointer}
.vp-track::before{content:'';position:absolute;left:0;right:0;height:3.5px;background:rgba(255,255,255,.25);border-radius:2px}
.vp-fill{position:absolute;left:0;height:3.5px;background:#fff;border-radius:2px;width:0%}
.vp-knob{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;left:0%;transform:translateX(-50%)}
.vp-pause{background:none;border:none;cursor:pointer;flex-shrink:0}
.vp-pause i{font-size:19px;color:#fff}
.vp-menu{position:absolute;top:calc(58px + var(--sat));right:14px;background:rgba(245,245,247,.95);backdrop-filter:blur(14px);border-radius:14px;overflow:hidden;z-index:3;min-width:150px}
.vp-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:12px 15px;background:none;border:none;font-size:13px;font-weight:600;color:#1D1D1F;cursor:pointer;font-family:'Inter',sans-serif}
.vp-menu button + button{border-top:1px solid rgba(0,0,0,.07)}
.vp-menu button i{font-size:15px}

/* ══════════ TOAST ══════════ */
.toast{position:fixed;bottom:calc(80px + var(--sab));left:50%;transform:translateX(-50%) translateY(16px);background:#000;color:#fff;font-size:13px;font-weight:600;padding:11px 20px;border-radius:22px;z-index:9999;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════ DESKTOP ══════════ */
@media (min-width: 520px) {
  body { background: #eceae7; }
  #APP { box-shadow: 0 0 60px rgba(0,0,0,.13); }
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Streak pulse (profile graph) */
@keyframes streakPulse {
  0% { box-shadow: 0 0 0 0 rgba(252,61,57,.35); }
  70% { box-shadow: 0 0 0 12px rgba(252,61,57,0); }
  100% { box-shadow: 0 0 0 0 rgba(252,61,57,0); }
}

/* Offline banner */
.offline-banner{background:#1c1c1e;color:#fff;font-size:13px;font-weight:500;padding:calc(10px + var(--sat)) 16px 10px;display:flex;align-items:center;gap:8px;justify-content:center;flex-shrink:0}

/* ── Notification panel items ── */
.np-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;margin-top:1px}
.np-body{flex:1;min-width:0}
.np-rt{font-size:13px;font-weight:600;color:#1D1D1F;margin-bottom:2px;line-height:1.3}
.np-ns{font-size:12px;color:#AAAAAA;line-height:1.4;margin-bottom:3px}
.np-tm{font-size:10px;color:#ccc;font-weight:500}
.np-d{width:7px;height:7px;border-radius:50%;background:#fc3d39;flex-shrink:0;margin-top:6px}
.np-d.r{background:transparent}
.np-empty{padding:28px 16px;text-align:center}
.np-empty-icon{width:48px;height:48px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;color:#AAAAAA}
.np-empty-title{font-size:14px;font-weight:600;color:#1D1D1F;margin-bottom:4px}
.np-empty-sub{font-size:12px;color:#AAAAAA;line-height:1.5}

/* ── Color picker sheet ── */
.color-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.color-picker-sheet{background:#fff;border-radius:24px 24px 0 0;padding:0 20px calc(40px + var(--sab));width:100%;max-width:480px}
.color-picker-handle{width:36px;height:4px;border-radius:2px;background:#e5e5ea;margin:12px auto 20px}
.color-picker-title{font-size:17px;font-weight:800;color:#000;text-align:center;margin-bottom:6px}
.color-picker-sub{font-size:13px;color:#8E8E93;text-align:center;margin-bottom:24px}
.color-dots{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.color-dot{width:46px;height:46px;border-radius:50%;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;border:none}
.color-dot.selected::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2.5px solid #000}
.color-picker-save{width:100%;padding:14px;background:#000;color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer}

/* ── Skeleton + errors + spinner + sheets ── */
.net-error-wrap{display:flex;flex-direction:column;align-items:center;padding:40px 20px;gap:10px;text-align:center}
.net-error-title{font-size:15px;font-weight:700;color:#000;margin-top:4px}
.net-error-sub{font-size:13px;color:#8E8E93;line-height:1.55}
.net-error-btn{margin-top:6px;background:#000;color:#fff;border:none;border-radius:12px;padding:10px 22px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
@keyframes ob-spin{to{transform:rotate(360deg)}}
.signin-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ob-spin .7s linear infinite;vertical-align:middle;margin-right:6px}
.sheet-spring{animation:sheetUp .35s cubic-bezier(.34,1.2,.64,1) both}

/* ── Screen transitions ── */
@keyframes slideInLeft { 0%{opacity:0;transform:translateX(40px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes slideInRight { 0%{opacity:0;transform:translateX(-40px)} 100%{opacity:1;transform:translateX(0)} }
.screen-slide-in { animation:slideInLeft .28s cubic-bezier(.4,0,.2,1) both }
.screen-slide-back { animation:slideInRight .28s cubic-bezier(.4,0,.2,1) both }

/* Reader + guide viewer sit above the tab bar (fullscreen) */
#s-reader, #s-gv { z-index: 55; }

/* ══════════ GUIDED PRAYER ══════════ */
.pray-card{margin:0;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;background:#f5f5f7;border-radius:18px;padding:15px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .12s}
.pray-card:active{transform:scale(.98)}
.pray-left{flex:1;min-width:0}
.pray-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(83,74,183,.1);border-radius:13px;padding:4px 10px}
.pray-pill i{font-size:9px;color:#534AB7}
.pray-pill span{font-size:9px;font-weight:700;color:#534AB7;letter-spacing:.3px}
.pray-label{font-size:10px;color:#8e8e93;font-weight:500;margin-bottom:3px}
.pray-title{font-size:15px;font-weight:700;color:#1D1D1F;line-height:1.25;margin-bottom:8px}
.pray-meta{display:flex;align-items:center;gap:4px}
.pray-meta i{font-size:11px;color:#a8a8ad}
.pray-meta span{font-size:10px;color:#a8a8ad}
.pray-tile{width:72px;height:72px;border-radius:14px;background:#ECECEE;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pray-tile i{font-size:30px;color:#534AB7}
#PRAYER-VIEWER{position:fixed;inset:0;z-index:60;background:#0b1220;overflow:hidden}
.pv-close{position:absolute;top:calc(12px + var(--sat));left:12px;width:44px;height:44px;border-radius:50%;background:rgba(235,235,240,.2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4}
.pv-close i{font-size:20px;color:#fff}
.pv-page{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:calc(72px + var(--sat)) 26px calc(124px + var(--sab));z-index:2}
.pv-page::before,.pv-page::after{content:'';flex:1 0 0}   /* centres short prayers, and lets long ones scroll from the top */
.pv-eyebrow{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:2px;margin-bottom:12px}
.pv-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:18px}
.pv-para{font-size:19px;font-weight:700;color:#fff;line-height:1.5;letter-spacing:-.2px;margin-bottom:16px}
.pv-para b{font-weight:700;color:#fff}

.pv-verse{border-left:2px solid #fff;padding-left:16px;margin-bottom:26px}
.pv-verse-text{font-family:Georgia,'Times New Roman',serif;font-size:19px;color:#fff;line-height:1.55;margin-bottom:12px}
.pv-verse-ref{font-size:12px;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:1px;text-transform:uppercase}
.pv-done{display:block;margin:28px auto 0;background:#fff;border:none;border-radius:18px;padding:12px 36px;font-size:13px;font-weight:700;color:#000;cursor:pointer;font-family:'Inter',sans-serif;transition:transform .12s}
.pv-done:active{transform:scale(.95)}
.pv-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;height:calc(104px + var(--sab));padding:0 18px var(--sab);display:flex;justify-content:space-between;align-items:center;pointer-events:none;background:linear-gradient(to top,rgba(8,12,22,.92) 35%,rgba(8,12,22,0))}
.pv-bars{display:flex;gap:5px}
.pv-bar{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);transition:background .2s}
.pv-bar.on{background:#fff}
#PRAYER-VIEWER::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(80px + var(--sat));z-index:3;pointer-events:none;background:linear-gradient(to bottom,rgba(8,12,22,.85) 40%,rgba(8,12,22,0))}   /* scrolled text fades out under the X instead of running behind it */
.pv-nav{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;padding:0;transition:transform .12s,background .15s}
.pv-nav i{font-size:24px;color:#fff}
.pv-nav:active{transform:scale(.92);background:rgba(255,255,255,.28)}

/* ══════════ LESSON OVERVIEW ══════════ */
.lov-top{padding:calc(12px + var(--sat)) 16px 10px}
.lov-back{width:34px;height:34px;border-radius:50%;background:#F2F2F4;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
.lov-back:active{transform:scale(.92)}
.lov-back i{font-size:15px;color:#1D1D1F}
.lov-scroll{padding:0 16px}
.lov-media{border-radius:18px;overflow:hidden;position:relative;aspect-ratio:16/9;background:#000;cursor:pointer}
.lov-media-cover{position:absolute;inset:0;background-size:cover;background-position:center}
.lov-media-scrim{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.lov-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lov-play div{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center}
.lov-play i{font-size:22px;color:#000;margin-left:2px}
.lov-media-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lov-media-ic i{font-size:42px;color:rgba(255,255,255,.85)}
.lov-ey{font-size:10px;font-weight:700;color:var(--red);letter-spacing:.6px;margin:16px 0 4px;text-transform:uppercase}
.lov-title{font-size:20px;font-weight:800;color:#1D1D1F;line-height:1.2;letter-spacing:-.3px;margin-bottom:10px}
.lov-prog{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lov-bar{flex:1;height:5px;border-radius:3px;background:#F2F2F4;overflow:hidden}
.lov-fill{height:100%;border-radius:3px;background:#4cd964;transition:width .4s}
.lov-prog span{font-size:11px;font-weight:600;color:#8e8e93;white-space:nowrap}
.lov-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #f2f2f4;cursor:pointer}
.lov-row:last-child{border-bottom:none}
.lov-ic{width:30px;height:30px;border-radius:50%;background:#F2F2F4;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lov-ic.done{background:#000}
.lov-ic span{font-size:12px;font-weight:700;color:#1D1D1F}
.lov-ic i{font-size:14px;color:#fff}
.lov-rt{font-size:14px;font-weight:600;color:#1D1D1F}
.lov-rs{font-size:11px;color:#a8a8ad}
.lov-state{font-size:10px;font-weight:700;color:#4cd964}
.lov-cta{margin-top:14px}

/* ══════════ VERIFY BANNER ══════════ */
.vb{margin:0 16px 14px;background:#f5f5f7;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:11px;cursor:pointer}
.vb.hidden{display:none}
.vb-ic{font-size:18px;color:#1D1D1F;flex-shrink:0}
.vb-txt{flex:1;min-width:0}
.vb-t{font-size:13px;font-weight:600;color:#1D1D1F}
.vb-s{font-size:11px;color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-resend{background:none;border:none;font-size:12px;font-weight:600;color:#1D1D1F;cursor:pointer;padding:4px 2px;flex-shrink:0;font-family:'Inter',sans-serif}
.vb-x{background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0;display:flex}
.vb-x i{font-size:14px;color:#a8a8ad}
.vbs-overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.4);display:flex;align-items:flex-end}
.vbs-sheet{width:100%;background:#fff;border-radius:24px 24px 0 0;padding:10px 22px calc(26px + var(--sab));text-align:center}
.vbs-handle{width:36px;height:4px;border-radius:2px;background:#e5e5ea;margin:4px auto 18px}
.vbs-title{font-size:20px;font-weight:800;color:#000;margin-bottom:6px}
.vbs-sub{font-size:13px;color:#8E8E93;margin-bottom:4px}
.vbs-email{font-size:14px;font-weight:600;color:#000;margin-bottom:16px;word-break:break-all}
.vbs-btn{width:100%}
.vbs-divider{font-size:12px;font-weight:600;color:#8E8E93;margin:18px 0 10px}
.vbs-input{width:100%;box-sizing:border-box;border:1px solid #e3e3e6;border-radius:12px;padding:13px 14px;font-size:15px;font-family:'Inter',sans-serif;outline:none;text-align:center}
.vbs-input:focus{border-color:#1D1D1F}
.vbs-err{font-size:12px;color:var(--red);margin-top:8px;min-height:14px}
.vbs-save{width:100%;margin-top:6px;background:#fff;border:1.5px solid #1D1D1F;border-radius:14px;padding:13px;font-size:14px;font-weight:700;color:#1D1D1F;cursor:pointer;font-family:'Inter',sans-serif}
.vbs-cancel{font-size:14px;font-weight:600;color:#8E8E93;margin-top:16px;cursor:pointer}

/* ══════════ APP-WIDE DARK MODE (follows reader Dark theme) ══════════ */
body.app-dark{
  --red-soft:rgba(252,61,57,.16);
  --t1:#fff;--t2:#EBEBF5;--tm:#98989D;--tq:#6e6e73;--tl:#48484A;
  --bg:#000;--fill:#1C1C1E;--line:#1f1f22;--line2:#242427;--bd:#2C2C2E;
  background:#000;
}
body.app-dark #APP{box-shadow:none}
body.app-dark .tab-bar{background:rgba(10,10,12,.92);border-top:1px solid #242427}
body.app-dark .tb.on{color:#fff}
body.app-dark .g-name,body.app-dark .ih-t,body.app-dark .recent-t,body.app-dark .np-ht,
body.app-dark .dev-row-title,body.app-dark .rc-title,body.app-dark .pname,
body.app-dark .stat-n,body.app-dark .badge-hdr-t,body.app-dark .badge-full-t,
body.app-dark .st,body.app-dark .streak-chip-n,body.app-dark .np-rt,
body.app-dark .np-empty-title,body.app-dark .dev-err-t,body.app-dark .net-error-title{color:#fff}
body.app-dark .bell i,body.app-dark .sr-ic i,body.app-dark .nb-ic i{color:#fff}
body.app-dark .srch input{color:#fff}
body.app-dark .cat-chip{color:#b8b8bd}
body.app-dark .cat-chip.active-chip{background:#fff;color:#000}
body.app-dark .np,body.app-dark .sg,body.app-dark .stat-card,body.app-dark .badge-card,
body.app-dark .streak-b-card{background:#1C1C1E}
body.app-dark .np{border-color:#242427;box-shadow:0 16px 44px rgba(0,0,0,.6)}
body.app-dark .watch-card,body.app-dark .pray-card,body.app-dark .vb{background:#1C1C1E}
body.app-dark .watch-title,body.app-dark .pray-title,body.app-dark .vb-t{color:#fff}
body.app-dark .watch-play{background:#fff}
body.app-dark .watch-play i{color:#000}
body.app-dark .pray-tile{background:#2C2C2E}
body.app-dark .vb-resend{color:#fff}
body.app-dark .btn-black{background:#fff;color:#000}
body.app-dark .circle-btn,body.app-dark .lov-back,body.app-dark .reader-navbtn{background:#2C2C2E}
body.app-dark .circle-btn i,body.app-dark .lov-back i,body.app-dark .reader-aa,body.app-dark .reader-navbtn i{color:#fff}
body.app-dark .lov-title,body.app-dark .lov-rt,body.app-dark .gv-page-top{color:#fff}
body.app-dark .lov-bar,body.app-dark .lov-ic{background:#2C2C2E}
body.app-dark .lov-ic span{color:#fff}
body.app-dark .lov-ic.done{background:#fff}
body.app-dark .lov-ic.done i{color:#000}
body.app-dark .lov-cta{background:#fff;color:#000}
body.app-dark .guide-cta span,body.app-dark .guide-cta i{color:#fff}
body.app-dark .vbs-sheet,body.app-dark .color-picker-sheet{background:#1C1C1E}
body.app-dark .vbs-title,body.app-dark .vbs-email,body.app-dark .color-picker-title{color:#fff}
body.app-dark .vbs-input{background:#2C2C2E;border-color:#3a3a3c;color:#fff}
body.app-dark .vbs-save{background:#1C1C1E;border-color:#fff;color:#fff}
body.app-dark .color-dot.selected::after{border-color:#fff}
body.app-dark .color-picker-save,body.app-dark .net-error-btn{background:#fff;color:#000}
body.app-dark .prof-av-pencil{border-color:#1C1C1E}
body.app-dark .toast{background:#fff;color:#000}
body.app-dark .nb{background:#1C1C1E}
body.app-dark .hero-listen{background:rgba(255,255,255,.22)}
body.app-dark .shim{background:#1C1C1E}
body.app-dark .shim::after,body.app-dark .hero.loading .hero-img::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}

.pv-reflect{font-size:15px;font-weight:400;color:rgba(255,255,255,.88);line-height:1.65;margin-bottom:14px}

/* ══════════ AUDIO PLAYER v2 ══════════ */
.rp-handle{display:flex;justify-content:center;width:100%;background:none;border:none;cursor:pointer;color:var(--reader-muted);padding:4px 0 10px;touch-action:none}
.rp-controls{display:flex;align-items:center;justify-content:center;gap:42px;margin-bottom:24px}
.rp-skip{position:relative;background:none;border:none;cursor:pointer;color:var(--reader-text);display:flex;align-items:center;justify-content:center;transition:transform .12s}
.rp-skip:active{transform:scale(.9)}
.rp-skip span{position:absolute;font-size:8px;font-weight:700;color:var(--reader-text);margin-top:1px;pointer-events:none}
.rp-pp{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:60px;height:46px;transition:transform .12s}
.rp-pp:active{transform:scale(.92)}
.rp-bars{display:flex;gap:9px}
.rp-bars span{width:13px;height:42px;border-radius:7px;background:var(--reader-text)}
.rp-play-tri{font-size:40px;color:var(--reader-text)}
.rp-scrub-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rp-track{flex:1;height:26px;display:flex;align-items:center;position:relative;cursor:pointer;touch-action:none}
.rp-track-bg{position:absolute;left:0;right:0;height:3.5px;border-radius:2px;background:var(--reader-btn-bg)}
.rp-track-fill{position:absolute;left:0;width:0%;height:3.5px;border-radius:2px;background:var(--reader-text)}
.rp-thumb{position:absolute;left:0%;width:14px;height:14px;border-radius:50%;background:var(--reader-text);transform:translateX(-50%)}
.reader-player-time{font-size:11px;font-weight:600;color:var(--reader-muted);font-variant-numeric:tabular-nums}
.rp-bottom{display:flex;align-items:center}
.rp-speed{background:var(--reader-btn-bg);border:none;border-radius:12px;padding:6px 13px;font-size:12px;font-weight:700;color:var(--reader-text);cursor:pointer;font-family:'Inter',sans-serif}
/* ══════════ PRAYER BREATHING BACKDROP ══════════ */
.pv-bg{position:absolute;inset:-4%;background:url('/images/prayer-bg/starry.jpg') center/cover no-repeat;animation:pvBreathe 16s ease-in-out infinite alternate;will-change:transform}
.pv-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.45) 40%,rgba(0,0,0,.7))}
@keyframes pvBreathe{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.pv-bg{animation:none}}
/* (the old rule that forced the prayer pages back to position:relative, so long prayers could not scroll, is gone) */
/* ══════════ PULL REFRESH SPIN ══════════ */
@keyframes ptrSpin{to{transform:rotate(360deg)}}
.ptr-spin{animation:ptrSpin .9s linear infinite}

/* ══════════ PRAYER STACK ══════════ */
.pray-stack{margin:14px 16px 0}
.pray-frame{position:relative;overflow:hidden;border-radius:18px}
.pray-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.pray-count{font-size:10px;font-weight:600;color:#a8a8ad;font-variant-numeric:tabular-nums;white-space:nowrap}
.pray-dots{display:none;justify-content:center;gap:5px;margin-top:12px}
.pray-dot{position:relative;width:5px;height:5px;border-radius:50%;background:#d6d6da;border:none;padding:0;cursor:pointer;transition:width .2s,background .2s,border-radius .2s}
.pray-dot::after{content:'';position:absolute;inset:-10px -4px}
.pray-dot.on{width:14px;border-radius:3px;background:#1D1D1F}
@media (prefers-reduced-motion: reduce){.pray-dot{transition:none}}
body.app-dark .pray-dot{background:#3a3a3c}
body.app-dark .pray-dot.on{background:#fff}
body.app-dark .pray-count{color:#6e6e73}

/* ══════════ SIGN-IN CODE ══════════ */
.code-wrap{position:relative;display:flex;justify-content:center;gap:8px;margin:0 auto 12px;max-width:320px}
.code-box{width:44px;height:54px;border:1.5px solid var(--bd);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#000;background:#fff;font-variant-numeric:tabular-nums}
.code-box.filled{background:var(--fill)}
.code-box.cur{border-color:#000}
.code-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;background:transparent;color:transparent;caret-color:transparent;outline:none}
.code-hint{font-size:12px;color:var(--tm);text-align:center;margin-bottom:16px}
.code-resend{font-size:13px;color:var(--tm);text-align:center;margin-bottom:10px;min-height:20px}
.code-resend span{color:#000;font-weight:700;cursor:pointer}

/* Add to Home Screen tip: short numbered steps */
.a2hs-steps{background:#F5F5F7;border-radius:14px;padding:4px 14px;margin-bottom:18px;text-align:left}
.a2hs-step{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.a2hs-step:last-child{border-bottom:none}
.a2hs-num{flex:none;width:24px;height:24px;border-radius:50%;background:#000;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.a2hs-step p{margin:0;font-size:15px;line-height:1.45;color:#1C1C1E}
.a2hs-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid rgba(0,0,0,.12);vertical-align:middle;margin:0 2px;font-size:15px;color:#000}
.nw{white-space:nowrap}

/* video player: loading, slow and error states */
#VP-STATE{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 36px;text-align:center;background:rgba(0,0,0,.38);pointer-events:none}
.vp-spin{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:vpSpin .85s linear infinite}
@keyframes vpSpin{to{transform:rotate(360deg)}}
.vp-state-i{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);align-items:center;justify-content:center;margin-bottom:2px}
.vp-state-i i{font-size:28px;color:#fff}
.vp-state-t{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.2px;margin:0}
.vp-state-s{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.5;margin:0}
.vp-retry{margin-top:8px;pointer-events:auto;background:#fff;color:#000;border:none;border-radius:999px;padding:13px 26px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
@media (prefers-reduced-motion:reduce){.vp-spin{animation-duration:1.6s}}

/* badge detail sheet */
#BADGE-SHEET{position:fixed;inset:0;z-index:9996;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.bs-sheet{width:100%;max-width:480px;background:#fff;border-radius:24px 24px 0 0;padding:10px 24px calc(26px + env(safe-area-inset-bottom,0px));text-align:center;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);max-height:92vh;overflow-y:auto}
.bs-handle{width:36px;height:4px;border-radius:2px;background:#d1d1d6;margin:0 auto 18px}
.bs-ic{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.bs-ic i{font-size:36px;color:#fff}
.bs-ic.locked{background:var(--fill)}
.bs-ic.locked i{color:var(--tl)}
.bs-name{font-size:21px;font-weight:800;color:#000;letter-spacing:-.4px;margin-bottom:8px}
.bs-pill{display:inline-block;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--fill);color:#6e6e73;margin-bottom:12px}
.bs-pill.on{background:rgba(52,199,89,.14);color:#1f9d44}
.bs-desc{font-size:15px;color:#3C3C43;line-height:1.5;margin-bottom:18px}
.bs-bar{height:8px;border-radius:4px;background:var(--fill);overflow:hidden;margin:0 6px 10px}
.bs-fill{height:100%;width:0;border-radius:4px;transition:width .5s ease}
.bs-prog{font-size:14px;font-weight:700;color:#000}
.bs-left{font-size:13px;color:#8E8E93;margin-top:3px;min-height:18px;margin-bottom:20px}
.bs-done{margin-top:0}
body.app-dark .bs-sheet{background:#1C1C1E}
body.app-dark .bs-handle{background:#3a3a3c}
body.app-dark .bs-name,body.app-dark .bs-prog{color:#fff}
body.app-dark .bs-desc{color:#c7c7cc}
body.app-dark .bs-pill{color:#a1a1a6}
body.app-dark .bs-pill.on{color:#30d158}
@media (prefers-reduced-motion:reduce){#BADGE-SHEET,.bs-sheet,.bs-fill{transition:none}}
.more-hdr{padding-top:22px;margin-bottom:-3px}