/* Explore: tile grid + Hope-style verse list. Light by default; dark follows the system (scoped to Explore). */
#p-explore{--xg:#a8760c;--xs:#6b7186;--xt:#1e2b55;--xv:#4a5272;--xcard:#fff;--xrim:0 1px 2px rgba(20,30,70,.06),0 8px 22px rgba(20,30,70,.08),inset 0 0 0 .5px rgba(30,43,85,.07);
 --xgold:linear-gradient(180deg,#F8CE66 0%,#EDB041 55%,#E5A13A 100%);--xgl:0 0 14px rgba(246,196,83,.5),0 4px 10px rgba(160,110,10,.25);
 --xseg:#e3e3e8;--xsegon:#1e2b55;--xsegt:#fff;--xtg:rgba(30,43,85,.07);--xwm:rgba(200,162,74,.2);--xtile:radial-gradient(90% 90% at 0% 0%,rgba(246,196,83,.2),transparent 60%);
 --xchip:#fff;--xchipt:#1e2b55;--xmi:rgba(246,196,83,.18);--xmir:inset 0 0 0 1px rgba(200,150,40,.45);
 padding:calc(var(--top) + 8px) 20px 24px;color:var(--xt);font-family:TWG,ui-sans-serif,"SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#p-explore .ex{max-width:560px;margin:0 auto}
#p-explore button,#p-explore input{font-family:inherit;color:inherit}
#p-explore .ic{flex:none;display:block}
/* header */
#p-explore .xhd{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 14px;min-height:44px;gap:12px}
#p-explore .xhd h1{margin:0;font-size:32px;font-weight:800;letter-spacing:-.6px;line-height:1.1;color:var(--xt)}
#p-explore .rb{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--xg);background:var(--xcard);box-shadow:var(--xrim)}
#p-explore .rb:active{transform:scale(.95)}
#p-explore .xsf{flex:1;min-width:0;position:relative;display:flex;align-items:center;height:46px;border-radius:16px;background:var(--xcard);box-shadow:var(--xrim),0 0 0 1.5px rgba(229,161,58,.7);color:var(--xs)}
#p-explore .xsf>.ic{margin-left:14px}
#p-explore .xsf input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 38px 0 10px;font-size:16px;color:var(--xt);-webkit-appearance:none;appearance:none}
#p-explore .xsf input::-webkit-search-cancel-button{display:none}
#p-explore .xsf .clr{position:absolute;right:8px;top:50%;margin-top:-14px;width:28px;height:28px;border-radius:14px;display:grid;place-items:center;background:var(--xtg);color:var(--xt)}
#p-explore .xcx{font-size:16px;font-weight:700;color:var(--xg);padding:8px 2px}
/* segmented control */
#p-explore .xseg{display:flex;padding:4px;border-radius:16px;background:var(--xseg)}
#p-explore .xseg button{flex:1;text-align:center;padding:9px 0;font-size:14px;font-weight:700;color:var(--xs);border-radius:12px;transition:background .2s,color .2s}
#p-explore .xseg button.on{background:var(--xsegon);color:var(--xsegt);box-shadow:0 3px 10px rgba(30,43,85,.3),inset 0 1px 0 rgba(255,255,255,.18)}
/* sections */
#p-explore .xsec{display:flex;justify-content:space-between;align-items:baseline;margin:22px 2px 11px}
#p-explore .xsec h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.2px;color:var(--xt)}
#p-explore .xlk{font-size:13px;font-weight:700;color:var(--xg);padding:6px 2px;margin:-6px -2px}
#p-explore .xlk.n{pointer-events:none}
/* tiles */
#p-explore .xgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#p-explore .xt{position:relative;overflow:hidden;text-align:left;border-radius:22px;min-height:112px;padding:14px 16px;background:var(--xcard);box-shadow:var(--xrim);display:flex;flex-direction:column;justify-content:space-between;-webkit-tap-highlight-color:transparent;transition:transform .15s}
#p-explore .xt:active,#p-explore .xdk:active,#p-explore .xban:active,#p-explore .mt:active{transform:scale(.97)}
#p-explore .xt::before{content:"";position:absolute;inset:0;border-radius:22px;background:var(--xtile);pointer-events:none}
#p-explore .xt .wm{position:absolute;right:-22px;bottom:-26px;color:var(--xwm);transform:rotate(-8deg);pointer-events:none}
#p-explore .ib{position:relative;width:46px;height:46px;border-radius:15px;flex:none;display:flex;align-items:center;justify-content:center;color:#1a2349;background:var(--xgold);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 14px rgba(246,196,83,.5),0 4px 8px rgba(160,110,10,.2)}
#p-explore .xt .tn{position:relative;display:block;margin-top:10px;font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.15;padding-right:6px;color:var(--xt)}
#p-explore .xt .tc{position:relative;display:block;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--xg)}
#p-explore .tg{position:absolute;right:14px;top:16px;width:26px;height:26px;border-radius:13px;background:var(--xtg);display:flex;align-items:center;justify-content:center;color:var(--xt)}
/* mood chips */
#p-explore .xmrow{display:flex;gap:10px;margin:0 -20px;padding:2px 20px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#p-explore .xmrow::-webkit-scrollbar{display:none}
#p-explore .mt{width:112px;flex:none;height:92px;padding:13px;border-radius:20px;background:var(--xcard);box-shadow:var(--xrim);font-weight:700;font-size:14px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;transition:transform .15s}
#p-explore .mi{width:34px;height:34px;border-radius:12px;background:var(--xmi);box-shadow:var(--xmir);color:var(--xg);display:flex;align-items:center;justify-content:center}
/* banner */
#p-explore .xban{position:relative;width:100%;display:flex;align-items:center;gap:13px;padding:12px 16px 12px 12px;margin-top:16px;border-radius:20px;background:var(--xcard);box-shadow:var(--xrim);text-align:left;transition:transform .15s}
#p-explore .xban .ib{width:42px;height:42px;border-radius:14px}
#p-explore .xban .bt{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:30px}
#p-explore .xban b{font-size:15.5px;font-weight:800;color:var(--xt)}
#p-explore .xban .bt>span{font-size:13px;font-weight:500;color:var(--xs)}
#p-explore .xban .tg{top:50%;margin-top:-13px}
/* starter decks */
#p-explore .xdecks{display:flex;flex-direction:column;gap:11px}
#p-explore .xdk{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 50px 14px 14px;border-radius:20px;background:var(--xcard);box-shadow:var(--xrim);transition:transform .15s}
#p-explore .xdk .tg{top:50%;margin-top:-13px}
#p-explore .xdb{display:flex;flex-direction:column;gap:1px;min-width:0}
#p-explore .xdb b{font-size:16.5px;font-weight:800;color:var(--xt);letter-spacing:-.2px}
#p-explore .xdb i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--xg)}
#p-explore .xdb span{font-size:13px;line-height:1.35;color:var(--xs);margin-top:2px}
/* list view */
#p-explore .xback{display:flex;align-items:center;gap:2px;color:var(--xg);font-weight:700;font-size:16px;margin:2px 0 10px;height:34px;padding-right:12px}
#p-explore .xback .ic{transform:rotate(180deg)}
#p-explore .xhero{height:150px;border-radius:26px;position:relative;overflow:hidden;padding:20px;background:linear-gradient(160deg,#243a86,#12204f 60%,#0c1536);box-shadow:0 14px 28px rgba(30,43,85,.35),inset 0 1px 0 rgba(255,255,255,.25);color:#eef1fb}
#p-explore .xhero .art{position:absolute;inset:0;width:100%;height:100%}
#p-explore .xhero .n{position:relative;font-size:34px;font-weight:800;letter-spacing:-.6px;line-height:1.12;max-width:75%}
#p-explore .xhero .c{position:relative;color:#F6C453;font-weight:700;font-size:13.5px;margin-top:2px}
#p-explore .xhero .all{position:absolute;left:18px;bottom:18px;height:42px;padding:0 18px;border-radius:21px;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:#1a2349;background:var(--xgold);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 18px rgba(246,196,83,.45),0 6px 14px rgba(0,0,0,.35)}
#p-explore .xhero .all:active{transform:scale(.97)}#p-explore .xhero .all[disabled]{opacity:.5}
#p-explore .xtr{display:flex;gap:8px;margin:16px 0 8px}
#p-explore .xchip{flex:1;height:38px;border-radius:19px;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--xchip);color:var(--xchipt);box-shadow:var(--xrim)}
#p-explore .xchip.on{background:var(--xgold);color:#1a2349;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 12px rgba(246,196,83,.5),0 3px 8px rgba(160,110,10,.25)}
#p-explore #xctl{padding-top:0}
#p-explore .xhd+#xhome+#xtop+#xctl .xtr{margin-top:2px}
#p-explore .xpick{display:flex;margin:0 0 2px}
#p-explore .xpick button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 4px;font-size:13px;font-weight:600;color:var(--xs)}
#p-explore .xpick b{color:var(--xt);font-weight:800}
#p-explore .xpick i{display:grid;place-items:center;transform:rotate(90deg);color:var(--xg)}
#p-explore .xhint{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--xs);padding:0 4px 10px}
#p-explore .xhint svg{width:16px;height:16px;color:var(--xg);flex:none;animation:xnudge 2.4s ease-in-out infinite}
@keyframes xnudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(5px)}}
#p-explore .xcnt{font-size:13px;font-weight:700;color:var(--xg);margin:0 2px 8px}
/* verse cards */
#p-explore #xlist{margin:0}
#p-explore .xr{position:relative;overflow:hidden;margin-bottom:11px;border-radius:20px;background:var(--xcard);box-shadow:var(--xrim)}
#p-explore .xadd{position:absolute;left:0;top:0;bottom:0;right:0;background:#30b158;display:flex;align-items:center;gap:6px;padding-left:18px;color:#fff;font-weight:700;font-size:15px;opacity:0}
#p-explore .xr.xsw .xadd{opacity:1}
#p-explore .xrow{position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px 14px 15px 18px;background:var(--xcard);cursor:pointer;touch-action:pan-y;will-change:transform;transition:transform .3s cubic-bezier(.2,.9,.25,1);-webkit-tap-highlight-color:transparent;outline:0}
#p-explore .xrow.drag{transition:none}
#p-explore .xmain{flex:1;min-width:0}
#p-explore .xref{font-weight:800;font-size:16px;color:var(--xg);line-height:1.25}
#p-explore .xtx{font-size:14px;line-height:1.38;font-weight:500;color:var(--xv);margin-top:4px;max-height:calc(14px*1.38*2);overflow:hidden;transition:max-height .32s cubic-bezier(.3,.8,.3,1)}
#p-explore .xr:not(.open) .xtx.xov{-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
#p-explore .xdet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.3,.8,.3,1)}
#p-explore .xr.open .xdet{grid-template-rows:1fr}
#p-explore .xin{overflow:hidden;min-height:0}
#p-explore .xtags{font-size:12px;color:var(--xs);margin:10px 0 8px}
#p-explore .xbtns{display:flex;gap:8px;align-items:center;padding-bottom:2px;flex-wrap:wrap}
#p-explore .xbtn{height:38px;padding:0 14px;border-radius:19px;font-size:14px;font-weight:700;color:var(--xt);background:var(--xtg);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#p-explore .xbtn.pri{background:var(--xgold);color:#1a2349;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 10px rgba(246,196,83,.4)}
#p-explore .xplus{flex:none;width:38px;height:38px;border-radius:19px;display:grid;place-items:center;color:#1a2349;background:var(--xgold);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 10px rgba(246,196,83,.5),0 3px 6px rgba(160,110,10,.2);align-self:center;position:relative}
#p-explore .xplus:active{transform:scale(.93)}
#p-explore .xplus .k{display:none}
#p-explore .xr.added .xplus{background:#30b158;color:#fff;box-shadow:0 0 10px rgba(48,177,88,.4)}#p-explore .xr.added .xplus .p{display:none}#p-explore .xr.added .xplus .k{display:block}
#p-explore .xr.added .xref:after{content:" ✓";color:#30b158}
#p-explore .xempty{padding:36px 20px;text-align:center;color:var(--xs)}
#p-explore .xfoot{font-size:11px;color:var(--xs);line-height:1.45;margin:14px 8px 6px;text-align:center}
#p-explore [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){#p-explore *{transition:none!important;animation:none!important}}
/* ---- dark (system setting), Explore only ---- */
@media (prefers-color-scheme:dark){
 #p-explore{--xg:#F6C453;--xs:#9aa6cc;--xt:#eef1fb;--xv:#cdd5f1;--xcard:#16224a;--xrim:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.35);
  --xseg:rgba(255,255,255,.07);--xsegon:linear-gradient(180deg,#F8CE66,#EDB041 55%,#E5A13A);--xsegt:#1a2349;--xtg:rgba(255,255,255,.09);--xwm:rgba(246,196,83,.17);--xtile:radial-gradient(90% 90% at 0% 0%,rgba(246,196,83,.16),transparent 60%);
  --xchip:#1a2755;--xchipt:#dfe5fb;--xmi:rgba(246,196,83,.14);--xmir:inset 0 0 0 1px rgba(246,196,83,.35);--xgl:0 0 18px rgba(246,196,83,.45),0 6px 14px rgba(0,0,0,.35);
  background:radial-gradient(120% 55% at 85% -5%,rgba(246,196,83,.16),transparent 60%),radial-gradient(90% 50% at -10% 35%,rgba(94,120,255,.17),transparent 65%),radial-gradient(100% 40% at 100% 85%,rgba(60,90,200,.2),transparent 70%),linear-gradient(180deg,#0b1332 0%,#0a1130 50%,#070c22 100%)}
 #p-explore .xsegon,#p-explore .xseg button.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 14px rgba(246,196,83,.4)}
 #p-explore .xt,#p-explore .mt,#p-explore .xban,#p-explore .xdk,#p-explore .rb,#p-explore .xchip,#p-explore .xsf{background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 55%,rgba(255,255,255,.07)),#16224a}
 #p-explore .xchip.on{background:var(--xgold)}
 #p-explore .xr,#p-explore .xrow{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 55%,rgba(255,255,255,.06)),#16224a}
 #p-explore .xr{background:#16224a}#p-explore .xrow{background:linear-gradient(160deg,#243060,#17224c 60%,#1a2654)}
 #p-explore .ib{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px rgba(246,196,83,.5)}
 #p-explore .xhero{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.09),0 14px 30px rgba(0,0,0,.45)}
 #p-explore .xplus,#p-explore .xhero .all{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 14px rgba(246,196,83,.45)}
 #p-explore .xsf{box-shadow:var(--xrim),0 0 0 1.5px rgba(229,161,58,.85)}
 /* the floating tab bar goes navy while Explore is open */
 body[data-tab=explore] .tabs .pill{background:linear-gradient(160deg,rgba(40,55,110,.93),rgba(18,28,68,.97));border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(0,0,0,.55)}
 body[data-tab=explore] .tabs .tab{color:#8f9bc4}
 body[data-tab=explore] .tabs .tab.on{background:linear-gradient(180deg,#F8CE66,#EDB041 55%,#E5A13A);color:#1a2349;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 20px rgba(246,196,83,.5)}
 body[data-tab=explore] .tabs .tab.on svg{color:#1a2349}
}