/* =====================================================================
   Answer Prayers · style concepts, Dawn (1) is the default; ?style=0 Shoreline · 2 Aurora · 3 Blueprint · 4 Dawn Night
   Each concept = CSS variables (UI + globe: --g-* feed the pixel-globe shader in app.js)
   + its own decoration layer (.deco > .d-dawn / .d-aur / .d-hud), all behind the globe.
   --gx/--gy/--gr = globe centre + radius in px, kept current by app.js.
   ===================================================================== */
.deco{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.deco>div{display:none;position:absolute;inset:0}
:root{--gx:50vw;--gy:52vh;--gr:30vmin}

/* ---------------------------------------------------------------- 1 · DAWN */
[data-style="1"]{
  --bg:#fffaf1; --bg2:#fff1df; --ink:#2b2115; --muted:#8c7863;
  --acc:#b97b12; --acc2:#f0b947; --soft:#fdf0d4; --line:rgba(185,123,18,.24);
  --card:rgba(255,252,245,.8); --radius:18px;
  --ocean:#ffffff; --land:rgba(255,255,255,.02); --land-prayed:rgba(214,150,40,.16); --hover:rgba(240,185,71,.38); --selected:rgba(214,150,40,.3); --border:rgba(168,108,22,.55);
  --atmo:#ffb867;
  --f-head:'Cormorant Garamond',Georgia,serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'DM Mono',ui-monospace,monospace;
  --pattern:radial-gradient(rgba(185,123,18,.13) .8px,transparent 1.1px) 0 0/22px 22px;
  --glow:radial-gradient(70% 45% at 50% 0%,rgba(214,226,250,.75),transparent 70%);
  --g-tint:#ffe2b0; --g-tint-amt:.28; --g-grid:#fff7e6; --g-grid-amt:1.1; --g-lights:#ffcf6e; --g-night:.7; --g-emissive:.16;
}
[data-style="1"] body{background:linear-gradient(180deg,#eef2fb 0%,#fbf6f0 30%,#fff6ea 62%,#ffe7cf 100%)}
:is([data-style="1"],[data-style="4"]) .d-dawn{display:block}
/* sunrise behind the globe: a low warm sun + slow god-rays from the globe centre */
.d-sun{position:absolute;left:calc(var(--gx) - var(--gr) * 2.1);top:calc(var(--gy) - var(--gr) * 2.1);width:calc(var(--gr) * 4.2);height:calc(var(--gr) * 4.2);border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,140,.85) 0%,rgba(255,196,120,.55) 26%,rgba(255,206,160,.22) 42%,transparent 66%)}
.d-rays{position:absolute;left:calc(var(--gx) - 80vmax);top:calc(var(--gy) - 80vmax);width:160vmax;height:160vmax;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,200,110,.20) 0deg 3deg,transparent 3deg 14deg);
  -webkit-mask:radial-gradient(circle 127.28vmax,transparent 14%,#000 22%,rgba(0,0,0,.4) 40%,transparent 62%);mask:radial-gradient(circle 127.28vmax,transparent 14%,#000 22%,rgba(0,0,0,.4) 40%,transparent 62%);
  animation:raysTurn 140s linear infinite}
@keyframes raysTurn{to{transform:rotate(360deg)}}
:is([data-style="1"],[data-style="4"]) .serif{font-weight:500}
:is([data-style="1"],[data-style="4"]) .jn-text{font-style:italic;font-weight:500;font-size:20px;line-height:1.22;letter-spacing:.003em}
@media (min-width:860px){:is([data-style="1"],[data-style="4"]) .jn-text{font-size:31px;line-height:1.15}}
:is([data-style="1"],[data-style="4"]) .panel-head h2{font-size:34px;font-weight:600}
:is([data-style="1"],[data-style="4"]) .votd-text{font-size:17px;font-style:italic}
@media (min-width:860px){:is([data-style="1"],[data-style="4"]) .votd-text{font-size:20px}}
:is([data-style="1"],[data-style="4"]) .logo{background:radial-gradient(circle at 30% 25%,#ffe9b0,#e3a530 55%,#b97b12);box-shadow:0 6px 18px -6px #e3a530,0 0 0 1px rgba(255,255,255,.6) inset}
:is([data-style="1"],[data-style="4"]) .card{box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 34px -22px #b97b12;border-color:rgba(214,160,60,.32)}
:is([data-style="1"],[data-style="4"]) .card.accent::before,:is([data-style="1"],[data-style="4"]) .panel::before{background:linear-gradient(90deg,transparent,#e3a530,#ffe39a,#e3a530,transparent);box-shadow:0 0 12px #ffd27a}
:is([data-style="1"],[data-style="4"]) .jn::before{background:radial-gradient(60% 70% at 50% 50%,rgba(255,214,140,.45),transparent 72%)}
:is([data-style="1"],[data-style="4"]) .pin i{background:radial-gradient(circle at 35% 35%,#fff,#ffd56a 40%,#c4840f)}
:is([data-style="1"],[data-style="4"]) .pin::before,:is([data-style="1"],[data-style="4"]) .pin::after{border-color:#e3a530}
:is([data-style="1"],[data-style="4"]) .pin b{background:linear-gradient(135deg,#c4840f,#e7ad3a)}
:is([data-style="1"],[data-style="4"]) .chip{border-radius:999px}

/* ---------------------------------------------------------------- 2 · AURORA */
[data-style="2"]{
  --bg:#f5fbff; --bg2:#f4f1ff; --ink:#131c3a; --muted:#66718f;
  --acc:#0a9fb4; --acc2:#8a63ff; --soft:#e4f7fa; --line:rgba(10,159,180,.26);
  --card:rgba(255,255,255,.55); --radius:20px;
  --ocean:#ffffff; --land:rgba(255,255,255,.02); --land-prayed:rgba(10,190,210,.15); --hover:rgba(138,99,255,.30); --selected:rgba(10,170,200,.30); --border:rgba(64,120,220,.6);
  --atmo:#5fe3f2;
  --f-head:'Outfit',system-ui,sans-serif; --f-body:'Outfit',system-ui,sans-serif; --f-mono:'DM Mono',ui-monospace,monospace;
  --pattern:none;
  --glow:radial-gradient(50% 40% at 100% 100%,rgba(255,170,220,.22),transparent 70%);
  --g-tint:#d4f2ff; --g-tint-amt:.30; --g-grid:#7ff6ff; --g-grid-amt:2.3; --g-lights:#9cf6ff; --g-night:.8; --g-emissive:.15;
}
[data-style="2"] body{background:linear-gradient(170deg,#f7fdff 0%,#f2f6ff 45%,#f6f1ff 100%)}
[data-style="2"] .d-aur{display:block;filter:saturate(1.15)}
/* aurora ribbons: wide soft curtains that sway slowly (transform-only animation = cheap) */
.d-aur i{position:absolute;left:-30%;width:160%;height:46vh;border-radius:50%;opacity:.75;mix-blend-mode:multiply}
.d-aur i:nth-child(1){top:-14vh;background:radial-gradient(50% 50% at 50% 50%,rgba(70,230,210,.55),transparent 70%);transform:rotate(-8deg);animation:aur1 26s ease-in-out infinite alternate}
.d-aur i:nth-child(2){top:-4vh;background:radial-gradient(45% 40% at 35% 55%,rgba(150,110,255,.45),transparent 70%);transform:rotate(6deg);animation:aur2 31s ease-in-out infinite alternate}
.d-aur i:nth-child(3){top:auto;bottom:-22vh;background:radial-gradient(45% 45% at 60% 45%,rgba(90,200,255,.4),transparent 70%);transform:rotate(-4deg);animation:aur1 35s ease-in-out infinite alternate-reverse}
.d-aur i:nth-child(4){top:22vh;height:22vh;opacity:.55;background:linear-gradient(90deg,transparent 5%,rgba(110,240,220,.45) 30%,rgba(160,120,255,.45) 55%,rgba(255,150,220,.3) 75%,transparent 95%);
  -webkit-mask:radial-gradient(50% 40% at 50% 50%,#000 20%,transparent 100%);mask:radial-gradient(50% 40% at 50% 50%,#000 20%,transparent 100%);transform:skewY(-6deg);animation:aur3 22s ease-in-out infinite alternate}
@keyframes aur1{0%{transform:rotate(-8deg) translateX(-6%)}100%{transform:rotate(-2deg) translateX(6%) scaleY(1.15)}}
@keyframes aur2{0%{transform:rotate(6deg) translateX(5%)}100%{transform:rotate(0deg) translateX(-7%) scaleY(.9)}}
@keyframes aur3{0%{transform:skewY(-6deg) translateX(-8%)}100%{transform:skewY(-2deg) translateX(8%) scaleY(1.3)}}
/* holographic glass: translucent card + iridescent hairline border */
[data-style="2"] .card,[data-style="2"] .chip,[data-style="2"] .live,[data-style="2"] .stats,[data-style="2"] .panel{
  border:1px solid transparent;
  background:linear-gradient(color-mix(in srgb,#fff 66%,transparent),color-mix(in srgb,#fff 52%,transparent)) padding-box,
             linear-gradient(120deg,rgba(80,230,240,.85),rgba(160,120,255,.75) 35%,rgba(255,160,220,.7) 60%,rgba(80,230,240,.85)) border-box;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
[data-style="2"] .panel{background:linear-gradient(color-mix(in srgb,#fff 80%,transparent),color-mix(in srgb,#f7f5ff 76%,transparent)) padding-box,linear-gradient(160deg,rgba(80,230,240,.9),rgba(160,120,255,.8) 50%,rgba(255,160,220,.7)) border-box}
[data-style="2"] .card{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 30px -18px rgba(120,90,255,.45)}
[data-style="2"] .card.accent::before,[data-style="2"] .panel::before{background:linear-gradient(90deg,transparent,#3fe7f0,#a07bff,#ff9bd6,transparent);box-shadow:0 0 14px #7ff1ff;height:2px}
[data-style="2"] .jn-text{font-weight:400;letter-spacing:-.005em}
[data-style="2"] .jn-text .w{animation:jnWord .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + .15s) forwards,jnWaveA 9s ease-in-out calc(var(--i) * 70ms + 2.4s) infinite}[data-style="2"] .jn-text .w::after{display:none}
@keyframes jnWaveA{0%,14%,100%{color:var(--ink);text-shadow:none}6%{color:#0aa6c0;text-shadow:0 0 12px rgba(80,230,240,.9),0 0 22px rgba(160,120,255,.6)}}
[data-style="2"] .panel-head h2{font-weight:600;letter-spacing:-.01em;background:linear-gradient(100deg,#0a8ea4,#6b4dff 60%,#c357b8);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-style="2"] .logo{background:conic-gradient(from 200deg,#3fe7f0,#a07bff,#ff9bd6,#3fe7f0);box-shadow:0 0 18px -2px rgba(80,230,240,.8)}
[data-style="2"] .btn.primary{background:linear-gradient(120deg,#0aa6c0,#7a5cff);box-shadow:0 8px 22px -10px #7a5cff,0 0 0 1px rgba(255,255,255,.4) inset}
[data-style="2"] .pin i{background:radial-gradient(circle at 35% 35%,#fff,#6ff3ff 40%,#7a5cff);box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 0 14px 4px rgba(90,240,255,.75),0 0 26px 6px rgba(150,110,255,.35)}
[data-style="2"] .pin::before{border-color:#3fe7f0}[data-style="2"] .pin::after{border-color:#a07bff}
[data-style="2"] .pin b{background:linear-gradient(120deg,#0aa6c0,#7a5cff)}

/* ---------------------------------------------------------------- 3 · BLUEPRINT / HUD */
[data-style="3"]{
  --bg:#eef1f5; --bg2:#e5eaf1; --ink:#0c1a2e; --muted:#5a6880;
  --acc:#1957ff; --acc2:#22b8ff; --soft:#e2eaff; --line:rgba(25,87,255,.26);
  --card:rgba(249,251,255,.86); --radius:4px;
  --ocean:#ffffff; --land:rgba(255,255,255,.02); --land-prayed:rgba(25,87,255,.14); --hover:rgba(34,184,255,.32); --selected:rgba(25,87,255,.26); --border:rgba(25,87,255,.7);
  --atmo:#5aa2ff;
  --f-head:'Space Grotesk',system-ui,sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'DM Mono',ui-monospace,monospace;
  --pattern:linear-gradient(rgba(25,87,255,.09) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(25,87,255,.09) 1px,transparent 1px) 0 0/48px 48px,
            linear-gradient(rgba(25,87,255,.045) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,rgba(25,87,255,.045) 1px,transparent 1px) 0 0/12px 12px;
  --glow:none;
  --g-tint:#d6e2ff; --g-tint-amt:.42; --g-grid:#2a63ff; --g-grid-amt:1.25; --g-lights:#38c6ff; --g-night:.75; --g-emissive:.14;
}
[data-style="3"] body{background:linear-gradient(180deg,#f2f4f8,#e7ebf1)}
[data-style="3"] .d-hud{display:block}
.hud-ring{position:absolute;left:calc(var(--gx) - var(--gr) * 1.42);top:calc(var(--gy) - var(--gr) * 1.42);width:calc(var(--gr) * 2.84);height:calc(var(--gr) * 2.84);overflow:visible}
.hud-ring circle{fill:none;stroke:#1957ff;vector-effect:non-scaling-stroke}
.hud-ring .r-sweep-track{stroke-opacity:.22;stroke-width:1}
.hud-ring .r-minor{stroke-opacity:.45;stroke-width:5;stroke-dasharray:.35 2.65}
.hud-ring .r-major{stroke-opacity:.8;stroke-width:10;stroke-dasharray:.6 29.4}
.hud-ring .r-outer{stroke-opacity:.3;stroke-width:1;stroke-dasharray:2 2}
.hud-ring .r-arc{stroke:#22b8ff;stroke-opacity:.9;stroke-width:2.5;stroke-dasharray:46 134;transform-origin:150px 150px;animation:hudSpin 18s linear infinite}
.hud-ring text{font:500 7px 'DM Mono',monospace;fill:#1957ff;letter-spacing:.1em}
@keyframes hudSpin{to{transform:rotate(360deg)}}
/* radar sweep, masked to the band just outside the globe */
.hud-sweep{position:absolute;left:calc(var(--gx) - var(--gr) * 1.3);top:calc(var(--gy) - var(--gr) * 1.3);width:calc(var(--gr) * 2.6);height:calc(var(--gr) * 2.6);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(34,184,255,.0) 280deg,rgba(34,184,255,.30) 356deg,rgba(25,87,255,.75) 359deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 72%,#000 76%,#000 98%,transparent 100%);mask:radial-gradient(circle,transparent 72%,#000 76%,#000 98%,transparent 100%);
  animation:hudSpin 5s linear infinite}
.hud-cross{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent calc(var(--gx) - .5px),rgba(25,87,255,.22) calc(var(--gx) - .5px),rgba(25,87,255,.22) calc(var(--gx) + .5px),transparent calc(var(--gx) + .5px)),
  linear-gradient(180deg,transparent calc(var(--gy) - .5px),rgba(25,87,255,.22) calc(var(--gy) - .5px),rgba(25,87,255,.22) calc(var(--gy) + .5px),transparent calc(var(--gy) + .5px));
  }
.hud-read{position:absolute;left:calc(var(--gx) + var(--gr) * .86);top:calc(var(--gy) + var(--gr) * .9);font:500 9.5px/1.45 'DM Mono',monospace;letter-spacing:.08em;color:#1957ff;
  padding:6px 9px;border-left:2px solid #1957ff;background:rgba(240,244,250,.75);white-space:nowrap}
.hud-corner{position:absolute;font:500 9px/1.5 'DM Mono',monospace;letter-spacing:.14em;color:rgba(25,87,255,.75)}
.hud-corner.tl{right:max(18px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 150px);text-align:right}
@media (min-width:860px){.hud-corner.tl{right:28px;bottom:84px}}
@media (max-width:859px){.hud-read{left:auto;right:12px;top:calc(var(--gy) + var(--gr) * 1.02);font-size:8.5px}.hud-corner.tl{display:none}}
@media (max-width:520px){.hud-read{display:none}}
[data-style="3"] .jn-text{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.01em}
[data-style="3"] .jn-ref::before{content:"[ ";white-space:pre}[data-style="3"] .jn-ref::after{content:" ]";white-space:pre}
[data-style="3"] .panel-head h2{font-weight:600;letter-spacing:-.02em;text-transform:none}
[data-style="3"] .votd-text{font-family:'Space Grotesk',sans-serif;font-weight:400}
[data-style="3"] .panel{border-radius:6px 6px 0 0}
@media (min-width:860px){[data-style="3"] .panel{border-radius:6px}}
/* corner brackets on every card (mission-control framing) */
[data-style="3"] .card,[data-style="3"] .panel{background-image:
  linear-gradient(#1957ff,#1957ff),linear-gradient(#1957ff,#1957ff),linear-gradient(#1957ff,#1957ff),linear-gradient(#1957ff,#1957ff),
  linear-gradient(#1957ff,#1957ff),linear-gradient(#1957ff,#1957ff),linear-gradient(#1957ff,#1957ff),linear-gradient(#1957ff,#1957ff);
  background-size:10px 1.5px,1.5px 10px,10px 1.5px,1.5px 10px,10px 1.5px,1.5px 10px,10px 1.5px,1.5px 10px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-color:var(--card)}
[data-style="3"] .panel{background-color:color-mix(in srgb,#f4f7fb 94%,transparent)}
[data-style="3"] .card.accent::before,[data-style="3"] .panel::before{background:linear-gradient(90deg,transparent,#1957ff 20%,#22b8ff 50%,#1957ff 80%,transparent);height:1px;box-shadow:0 0 8px #22b8ff}
[data-style="3"] .chip,[data-style="3"] .live,[data-style="3"] .stats,[data-style="3"] .ans-chip,[data-style="3"] .btn,[data-style="3"] .icon-btn{border-radius:3px}
[data-style="3"] .chip{font-family:'DM Mono',monospace;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
[data-style="3"] .logo{border-radius:3px;background:#1957ff;box-shadow:0 0 0 3px rgba(25,87,255,.15),0 0 14px rgba(34,184,255,.6)}
[data-style="3"] .btn.primary{background:#1957ff;box-shadow:0 0 0 3px rgba(25,87,255,.15)}
[data-style="3"] .who{font-family:'Space Grotesk',sans-serif}
[data-style="3"] .compose textarea,[data-style="3"] .compose input:not([type=checkbox]){border-radius:3px}
/* square, crosshair-style markers */
[data-style="3"] .pin i{border-radius:1px;transform:rotate(45deg);background:#1957ff;box-shadow:0 0 0 1.5px #fff,0 0 10px 2px rgba(34,184,255,.75)}
[data-style="3"] .pin::before,[data-style="3"] .pin::after{border-radius:2px;border-color:#1957ff}
[data-style="3"] .pin b{border-radius:2px;background:#1957ff}
[data-style="3"] .pin.drop i{animation-name:pinDropHud}
@keyframes pinDropHud{0%{transform:translateY(-70px) rotate(45deg) scale(.5);opacity:0}45%{opacity:1}70%{transform:rotate(45deg) scale(1.5)}100%{transform:rotate(45deg)}}

/* gold stays gold in every style: answered prayers */
[data-style] .pin.answered i{background:radial-gradient(circle at 35% 35%,#fff,#f6d26a 45%,#c9902a)!important}

@media (prefers-reduced-motion:reduce){
  .d-rays,.d-aur i,.hud-ring .r-arc,.hud-sweep{animation:none!important}
}

/* ---------------------------------------------------------------- 4 · DAWN NIGHT
   Dawn's language (gold, serif italic, gold pins) after dark: navy→charcoal night sky with twinkling
   pixel stars (drawn on #specks), a gold moon-halo around the Earth, dark glass with warm gold edges.
   Text colours checked for contrast on the darkest + lightest card tones (ink ≈15:1, muted ≈7:1, gold ≈9:1). */
[data-style="4"]{
  color-scheme:dark;
  --bg:#0b1024; --bg2:#15171f; --ink:#f7f0e3; --muted:#c3b49b;
  --acc:#f3bd52; --acc2:#ffd98a; --soft:rgba(243,189,82,.14); --line:rgba(243,189,82,.30);
  --card:rgba(17,21,38,.74); --radius:18px;
  --ocean:#ffffff; --land:rgba(255,255,255,.02); --land-prayed:rgba(243,189,82,.18); --hover:rgba(255,217,138,.32); --selected:rgba(243,189,82,.34); --border:rgba(255,210,130,.55);
  --atmo:#ffb547;
  --f-head:'Cormorant Garamond',Georgia,serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'DM Mono',ui-monospace,monospace;
  --pattern:none;
  --glow:radial-gradient(60% 38% at 50% 0%,rgba(60,84,170,.28),transparent 72%),radial-gradient(50% 30% at 50% 100%,rgba(243,170,70,.10),transparent 70%);
  --g-tint:#ead8b8; --g-tint-amt:.2; --g-grid:#2a2f45; --g-grid-amt:.75;
  --g-sea:#164377; --g-sea-amt:.78;
  --g-lights:#ffd27a; --g-lights-amt:1.7; --g-lights-glow:.75; --g-night:1; --g-night-c:#0a1030; --g-emissive:.02; --g-base:#e8dfcf;
}
[data-style="4"] body{background:linear-gradient(180deg,#060a1c 0%,#0b1330 34%,#121729 66%,#17181f 100%)}
/* sun → moon: a soft gold halo hugging the globe + a faint ring, rays become barely-there moonbeams */
[data-style="4"] .d-sun{background:radial-gradient(circle,transparent 31%,rgba(255,196,96,.26) 35.5%,rgba(255,186,90,.12) 42%,rgba(120,110,200,.05) 52%,transparent 62%)}
[data-style="4"] .d-sun::after{content:"";position:absolute;inset:calc(var(--gr) * .86);border-radius:50%;border:1px solid rgba(255,214,140,.22);box-shadow:0 0 22px rgba(255,190,90,.12)}
[data-style="4"] .d-rays{background:repeating-conic-gradient(from 0deg,rgba(255,214,150,.028) 0deg 1.5deg,transparent 1.5deg 15deg);animation-duration:220s}
.d-moon{display:none}
[data-style="4"] .d-moon{display:block;position:absolute;right:9vw;top:19vh;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fff6dc,#f6d58e 55%,#d9a64a);
  -webkit-mask:radial-gradient(circle at 72% 36%,transparent 46%,#000 47.5%);mask:radial-gradient(circle at 72% 36%,transparent 46%,#000 47.5%);
  filter:drop-shadow(0 0 14px rgba(255,205,120,.65)) drop-shadow(0 0 40px rgba(255,190,90,.3));image-rendering:pixelated}
@media (max-width:859px){[data-style="4"] .d-moon{width:30px;height:30px;right:6vw;top:calc(var(--gy) - var(--gr) * 1.08)}}
/* type */
[data-style="4"] .jn-text{color:#fbf3e4;text-shadow:0 0 18px rgba(255,200,110,.18)}
[data-style="4"] .jn::before{background:radial-gradient(60% 70% at 50% 50%,rgba(10,14,32,.55),transparent 74%)}
[data-style="4"] .jn-ref{color:#f6c868}
[data-style="4"] .panel-head h2{background:linear-gradient(180deg,#fff4d6,#f3c060);-webkit-background-clip:text;background-clip:text;color:transparent}
/* dark glass + warm gold borders */
[data-style="4"] .card{background:linear-gradient(180deg,rgba(26,30,52,.78),rgba(15,18,32,.82));border-color:rgba(243,189,82,.34);
  box-shadow:0 1px 0 rgba(255,228,170,.10) inset,0 0 0 1px rgba(0,0,0,.25),0 18px 40px -22px rgba(0,0,0,.9),0 0 26px -14px rgba(243,189,82,.45);backdrop-filter:blur(14px)}
[data-style="4"] .panel{background:linear-gradient(180deg,rgba(16,20,38,.94),rgba(13,15,24,.96));border-color:rgba(243,189,82,.34);box-shadow:0 -24px 60px -30px rgba(0,0,0,.9),0 0 40px -20px rgba(243,189,82,.35)}
[data-style="4"] .chip,[data-style="4"] .stats,[data-style="4"] .live,[data-style="4"] .icon-btn,[data-style="4"] .tip{background:rgba(17,21,38,.72);border-color:rgba(243,189,82,.34);box-shadow:0 8px 24px -16px #000}
[data-style="4"] .live{color:#e9dcc4}
[data-style="4"] .live-dot{background:#3ddc97;box-shadow:0 0 0 2px rgba(61,220,151,.2),0 0 8px #3ddc97}
[data-style="4"] .compose textarea,[data-style="4"] .compose input:not([type=checkbox]),[data-style="4"] .ans-form textarea{background:rgba(6,9,20,.6);color:var(--ink);border-color:rgba(243,189,82,.32)}
[data-style="4"] ::placeholder{color:#9d917d}
[data-style="4"] .compose textarea:focus,[data-style="4"] .compose input:focus,[data-style="4"] .ans-form textarea:focus{border-color:#f3bd52;box-shadow:0 0 0 3px rgba(243,189,82,.2)}
[data-style="4"] .btn{background:rgba(255,255,255,.04);color:#f6c868;border-color:rgba(243,189,82,.38)}
[data-style="4"] .btn.primary,[data-style="4"] .prayed-btn.on,[data-style="4"] .ans-form .btn.primary{background:linear-gradient(135deg,#f6c55e,#e7a52a);color:#1c1405;border-color:transparent;box-shadow:0 8px 22px -10px #f3bd52}
[data-style="4"] .logo{color:#2a1a02;box-shadow:0 0 18px -2px rgba(243,189,82,.7),0 0 0 1px rgba(255,240,200,.5) inset}
[data-style="4"] .tag{background:rgba(243,189,82,.10);color:#f6c868}
[data-style="4"] .tag.yours{background:rgba(243,189,82,.18);color:#ffe3a3}
[data-style="4"] .pin i{box-shadow:0 0 0 1.5px rgba(255,236,190,.85),0 0 14px 4px rgba(255,190,80,.55)}
[data-style="4"] .pin b{background:linear-gradient(135deg,#f6c55e,#e7a52a);color:#1c1405}
[data-style="4"] .pin b u{border-left-color:rgba(28,20,5,.35);color:#5a3a00}
/* answered: gold glass that glows on dark */
[data-style="4"] .ans-chip{color:#ffe3a3;background:linear-gradient(135deg,rgba(255,200,90,.22),rgba(255,200,90,.08));border-color:rgba(240,201,95,.6);box-shadow:0 0 18px -6px rgba(243,189,82,.6)}
[data-style="4"] .ans-chip #ansN{color:#fff3c4}
[data-style="4"] .ans-star,[data-style="4"] .answered-badge .spk{color:#ffd36b}
[data-style="4"] .ans-pill,[data-style="4"] .answered-badge{color:#ffe3a3;background:rgba(255,200,90,.14);border-color:rgba(240,201,95,.55);box-shadow:none}
[data-style="4"] .prayer.is-answered{border-color:rgba(240,201,95,.6);box-shadow:0 0 30px -14px rgba(243,189,82,.7),0 18px 40px -22px #000}
[data-style="4"] .answer-note{background:rgba(255,200,90,.08);border-color:rgba(240,201,95,.32);color:#f6e7c6}
[data-style="4"] .answer-note b{color:#f3c060}
[data-style="4"] .ans-btn{color:#ffe3a3;background:rgba(255,200,90,.10);border-color:rgba(240,201,95,.5)}
[data-style="4"] .ans-toast{color:#2a1a00;background:linear-gradient(135deg,#fff1c4,#f6c55e);border-color:#ffe39a;box-shadow:0 0 40px -6px rgba(255,200,90,.75),0 14px 34px -14px #000}
/* celebration pops on dark: additive glow */
[data-style="4"] .party{mix-blend-mode:screen}
[data-style="4"] .party b{background:radial-gradient(circle,#fff 0,#ffe7a0 20%,rgba(255,190,70,.55) 40%,rgba(255,160,40,.15) 58%,transparent 72%)}
[data-style="4"] .party em{border-color:#ffd36b;box-shadow:0 0 22px 4px rgba(255,200,90,.7),inset 0 0 14px rgba(255,200,90,.4)}
[data-style="4"] .party span i::after{box-shadow:0 0 12px 3px var(--c)}

/* Final logo (Risen Cross): vector mark in the header; gold on cream (light) / glowing gold on navy (Dawn Night) */
.logo.logo-img{background:none!important;box-shadow:none!important;border-radius:0;width:38px;height:38px;display:block;flex:0 0 auto;margin:-3px -2px -3px -4px}
.logo.logo-img img{width:100%;height:100%;display:block}
.logo.logo-img .lm-d{display:none}
[data-style="4"] .logo.logo-img .lm-l{display:none}
[data-style="4"] .logo.logo-img .lm-d{display:block}
@media (max-width:420px){.logo.logo-img{width:34px;height:34px}}

/* Living header mark: gentle sunrise loop (halo pulse, slow ray ring, globe shimmer, occasional sparkle).
   SVG transforms/opacity only; paused while the tab is hidden; off under prefers-reduced-motion. */
.logo.logo-img svg{width:100%;height:100%;display:block;overflow:visible}
.logo-live .hx-halo,.logo-live .hx-rays,.logo-live .hx-shim,.logo-live .hx-spark{transform-box:view-box;will-change:transform,opacity}
.logo-live .hx-halo{transform-origin:256px 250px;animation:hxPulse 5.2s ease-in-out infinite}
.logo-live .hx-rays{transform-origin:256px 268px;animation:hxSpin 48s linear infinite,hxRayGlow 5.2s ease-in-out infinite}
.logo-live .hx-shim{animation:hxShim 8s cubic-bezier(.45,.05,.35,1) infinite;opacity:0}
.logo-live .hx-spark{transform-origin:446px 66px;animation:hxTwinkle 7s ease-in-out infinite;opacity:0}
@keyframes hxPulse{0%,100%{opacity:.72;transform:scale(.93)}50%{opacity:1;transform:scale(1.05)}}
@keyframes hxSpin{to{transform:rotate(360deg)}}
@keyframes hxRayGlow{0%,100%{opacity:.3}50%{opacity:.7}}
@keyframes hxShim{0%{transform:translate(-300px,0);opacity:0}6%{opacity:1}34%{opacity:1}40%{transform:translate(330px,0);opacity:0}100%{transform:translate(330px,0);opacity:0}}
@keyframes hxTwinkle{0%,62%{opacity:0;transform:scale(0) rotate(-45deg)}70%{opacity:1;transform:scale(1.15) rotate(0deg)}78%{opacity:.9;transform:scale(.85) rotate(20deg)}88%,100%{opacity:0;transform:scale(0) rotate(45deg)}}
.ap-hidden .logo-live *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.logo-live *{animation:none!important}.logo-live .hx-rays{opacity:.45}}

/* First-load intro splash (once per session, skippable). Shown only when <html> has .ap-splash. */
#apSplash{display:none}
.ap-splash #apSplash{display:grid;position:fixed;inset:0;z-index:9999;place-items:center;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 40%,#fff6e4 0%,#fffaf1 50%,#f8ecd6 100%);
  animation:apSafety .45s ease 5s forwards;-webkit-tap-highlight-color:transparent}
[data-style="4"].ap-splash #apSplash{background:radial-gradient(120% 90% at 50% 40%,#1a2350 0%,#0b1024 55%,#070b1a 100%)}
#apSplash .ap-stage{width:min(84vw,58vh,520px);aspect-ratio:1}
#apSplash .ap-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  font:500 12px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:99px;
  color:#9a7b4f;background:#fff8;border:1px solid #9a7b4f40;cursor:pointer}
[data-style="4"] #apSplash .ap-skip{color:#d9b877;background:#0b102499;border-color:#d9b87740}
#apSplash.ap-out{opacity:0;transition:opacity .38s ease;pointer-events:none}
@keyframes apSafety{to{opacity:0;visibility:hidden;pointer-events:none}}

/* ===== Light / dark toggle (sun ⇄ moon) + theme crossfade ===== */
.theme-btn{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:var(--card,rgba(255,255,255,.75));color:#c2841a;box-shadow:0 1px 6px rgba(120,80,20,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,border-color .3s,color .3s,transform .2s}
.theme-btn:hover{transform:rotate(-12deg) scale(1.06)}
.theme-btn:active{transform:scale(.92)}
.theme-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.theme-btn svg{width:19px;height:19px;overflow:visible}
.theme-btn .tb-core{fill:currentColor;transform-origin:12px 12px;transition:transform .5s cubic-bezier(.5,1.6,.4,1)}
.theme-btn .tb-cut{transform:translate(9px,-9px);transition:transform .5s cubic-bezier(.5,1.4,.4,1)}
.theme-btn .tb-rays{stroke:currentColor;stroke-width:1.9;stroke-linecap:round;fill:none;transform-origin:12px 12px;transition:transform .5s ease,opacity .35s ease}
[data-style="4"] .theme-btn{color:#f3d692;background:rgba(20,28,58,.72);box-shadow:0 0 14px rgba(243,214,146,.18)}
[data-style="4"] .theme-btn .tb-core{transform:scale(1.55)}
[data-style="4"] .theme-btn .tb-cut{transform:translate(3.4px,-3.4px)}
[data-style="4"] .theme-btn .tb-rays{transform:rotate(45deg) scale(.4);opacity:0}
.theme-btn[hidden]{display:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:ease}
.theme-fade body{animation:apThemeFade .6s ease}
@keyframes apThemeFade{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.theme-btn *{transition:none!important}}

/* ===== shared wall: Report on prayer cards ===== */
.report-btn{margin-left:auto;margin-right:8px;background:none;border:0;padding:4px 6px;cursor:pointer;font:500 10.5px var(--f-mono);
  letter-spacing:.05em;color:var(--muted);opacity:.7;border-radius:6px;transition:opacity .2s,color .2s,background .2s}
.report-btn:hover{opacity:1}
.report-btn.confirm{opacity:1;color:#b4443c;background:rgba(180,68,60,.09)}
.prayer.reported{opacity:0;transform:scale(.97);transition:opacity .35s,transform .35s}
[data-style="4"] .report-btn.confirm{color:#ff9b8e;background:rgba(255,120,100,.12)}
[data-style="4"] .err{color:#ff9b8e}
[data-style="4"] .about::backdrop{background:rgba(2,6,20,.55)}
@media (max-width:479px){ .ans-chip .ans-l{display:none} .theme-btn{width:32px;height:32px;flex-basis:32px} .theme-btn svg{width:17px;height:17px} }

/* ===== Languages: header globe picker, Translate button, non-Latin scripts, Arabic (RTL) ===== */
.lang-btn{position:relative;color:var(--acc,#2f7fb0)}
.lang-btn svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lang-btn select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none;border:0}
.lang-btn:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.lang-btn:hover{transform:scale(1.06)}
[data-style="4"] .lang-btn{color:#9fd3ff;background:rgba(20,28,58,.72)}
.lang-row{display:flex;align-items:center;gap:10px;margin:10px 0 4px}
.lang-row select{font:500 14px var(--f-body);padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.lang-en .en-note{display:none}
.en-note{margin-inline-start:6px;opacity:.75}
.tr-btn{background:none;border:0;padding:4px 6px;cursor:pointer;font:500 11px var(--f-body);color:var(--muted);opacity:.85;border-radius:6px;display:inline-flex;align-items:center;gap:3px;transition:opacity .2s,color .2s,background .2s;white-space:nowrap}
.tr-btn span{font-size:10px;font-weight:700;letter-spacing:-.02em;opacity:.8}
.tr-btn:hover{opacity:1;color:var(--acc)}
.tr-btn.on{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.tr-btn:disabled{opacity:.5;cursor:progress}
.prayer .p-foot .tr-btn{margin-inline-start:auto}
.p-foot .tr-btn + .report-btn{margin-left:0;margin-inline-start:0}
/* Arabic, Chinese, Japanese and Hindi: no tracking (it breaks Arabic joining and looks loose in CJK) */
html[data-lang="ar"] .mono,html[data-lang="zh"] .mono,html[data-lang="ja"] .mono,html[data-lang="hi"] .mono,
html[data-lang="ar"] .chip,html[data-lang="zh"] .chip,html[data-lang="ja"] .chip,html[data-lang="hi"] .chip{letter-spacing:0!important;text-transform:none}
/* the monospace face has no Arabic/CJK/Devanagari glyphs; use the body face so letters join and size evenly (numbers keep the look via .mono digits) */
html[data-lang="ar"] .mono,html[data-lang="zh"] .mono,html[data-lang="ja"] .mono,html[data-lang="hi"] .mono{font-family:var(--f-body),system-ui,sans-serif!important;letter-spacing:0!important}
html[data-lang="ar"] .jn-text,html[data-lang="ar"] .votd-text,html[data-lang="ar"] .t-verse{font-family:"Noto Naskh Arabic","Amiri","Geeza Pro","Times New Roman",serif}
html[data-lang="zh"] .jn-text,html[data-lang="ja"] .jn-text{letter-spacing:.02em}
/* RTL: the page mirrors (header, rows, cards); the place panel keeps its spot so the globe framing stays the same */
[dir="rtl"] .report-btn{margin-left:8px;margin-right:auto}
[dir="rtl"] .p-foot .tr-btn + .report-btn{margin-right:0}
[dir="rtl"] #liveN{text-align:left}
[dir="rtl"] .jn-line{transform:scaleX(-1)}
[dir="rtl"] .tip{direction:rtl}
[dir="rtl"] .t-count{direction:ltr;text-align:left}
[dir="rtl"] .panel-body,[dir="rtl"] .about-body{text-align:right}
@media (max-width:479px){ .lang-btn{width:32px;height:32px;flex-basis:32px} .lang-btn svg{width:17px;height:17px} .tr-btn{padding:4px 3px} }

/* ---------- How it works: first-visit welcome + header "?" + About section ---------- */
.help-btn span{font:700 17px/1 var(--f-body);transform:translateY(-.5px)}
.howto{max-height:min(90vh,780px);max-height:min(90dvh,780px);overflow:auto;overscroll-behavior:contain;padding-bottom:0}
.howto[open]{animation:howIn .5s cubic-bezier(.2,.9,.3,1.08)}
.howto[open]::backdrop{animation:howFade .4s ease}
@keyframes howIn{from{opacity:0;transform:translateY(16px) scale(.975)}}
@keyframes howFade{from{opacity:0}}
.h-lead{font-size:15px;margin:0}
.how-steps{list-style:none;counter-reset:hs;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.how-steps li{counter-increment:hs;position:relative;padding-inline-start:38px;display:flex;flex-direction:column;gap:1px;min-height:26px}
.how-steps li::before{content:counter(hs);position:absolute;inset-inline-start:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--f-body);color:#fff;background:linear-gradient(135deg,#c4840f,#e7ad3a);box-shadow:0 2px 8px rgba(196,132,15,.3)}
.hs-t{font-weight:650;color:var(--ink)}
.hs-d{font-size:13.5px;color:var(--muted)}
.hs-d b{font-weight:600;color:var(--acc)}
.h-lord{text-align:center;font-style:italic;font-size:16.5px;color:var(--acc);margin:2px 0 0}
.h-go{position:sticky;bottom:12px;width:100%;font-size:17px;padding:14px 18px;border-radius:16px;margin:4px 0 14px;box-shadow:0 6px 22px rgba(185,123,18,.32)}
.about-how{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0 12px;display:flex;flex-direction:column;gap:10px}
.about-how h3{margin:0;font-size:12px;color:var(--acc)}
[data-style="4"] .hs-t{color:var(--ink)}
[data-style="4"] .h-go{box-shadow:0 6px 24px rgba(243,214,146,.18)}
html:is([data-lang="ar"],[data-lang="zh"],[data-lang="ja"],[data-lang="hi"]) .h-lord{font-style:normal}
@media (max-width:420px){.chips-r{gap:4px}.chips-r .theme-btn{width:31px;height:31px;flex-basis:31px}.chips-r .theme-btn svg{width:17px;height:17px}.howto{width:calc(100vw - 20px)}.how-steps{gap:9px}}
@media (prefers-reduced-motion:reduce){.howto[open],.howto[open]::backdrop{animation:none}}
/* phone header room for the "?" button: live chip shows dot + number only; brand never runs under the buttons */
@media (max-width:420px){.live .live-l{display:none}.live{padding:5px 9px 5px 8px}}
.brand .mono{overflow:hidden;text-overflow:ellipsis}
@media (max-width:374px){.chips-r{gap:3px}.chips-r .theme-btn{width:28px;height:28px;flex-basis:28px}.chips-r .theme-btn svg{width:16px;height:16px}.help-btn span{font-size:15px}.brand{gap:6px}.live{padding:5px 7px}.ans-chip{padding:5px 7px}}

/* ---------- Share button + welcome actions + phone install bar ---------- */
.share-ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.share-btn .share-ic{width:18px;height:18px}
.h-acts{position:sticky;bottom:12px;display:flex;gap:8px;margin:4px 0 14px;z-index:1}
.h-acts .h-go{position:static;flex:1;margin:0;min-width:0}
.h-share{flex:none;gap:7px;font-size:15px;padding:14px 16px;border-radius:16px;background:var(--bg,#fffaf1);border-color:rgba(214,160,60,.45);box-shadow:0 6px 22px rgba(185,123,18,.18)}
.h-share .share-ic{width:18px;height:18px}
[data-style="4"] .h-share{background:rgba(20,28,58,.92);color:#f3d692;border-color:rgba(243,214,146,.4);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.install-hint{border-radius:18px;border:1px solid rgba(214,160,60,.38);box-shadow:0 18px 40px -16px rgba(150,95,10,.55);bottom:calc(env(safe-area-inset-bottom) + 14px)}
.install-hint .ih-text b{font-size:14px}
.install-hint #ihGo{background:linear-gradient(135deg,#c98a17,#e7ad38);color:#fff;border-color:transparent;padding:9px 16px;font-size:14px}
.install-hint.ios::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:inherit;border-right:1px solid rgba(214,160,60,.38);border-bottom:1px solid rgba(214,160,60,.38)}
.install-hint.ios{bottom:calc(env(safe-area-inset-bottom) + 18px)}
[data-style="4"] .install-hint{background:linear-gradient(180deg,#1b2140,#121731);border-color:rgba(243,189,82,.38);box-shadow:0 18px 40px -14px #000}
[data-style="4"] .install-hint .ih-text{color:#f5ecd6}
[data-style="4"] .install-hint .ih-text span{color:#c9bfa6}
[data-style="4"] .install-hint .icon-btn{color:#f3d692}
.ap-toast{z-index:80}
@media (max-width:420px){.h-share{padding:13px 13px;font-size:14px}.h-acts .h-go{font-size:16px;padding:13px 12px}}
@media (max-width:420px){.brand .mono{white-space:normal;overflow:visible}.brand .short{display:inline-block;width:min-content;line-height:1.2;letter-spacing:.1em;font-size:10.5px}}
@media (max-width:360px){.brand .short{font-size:10px;letter-spacing:.06em}}
/* v20: welcome buttons get a soft backdrop so step text never shows through behind them on short phones */
.howto .h-acts{bottom:0;margin:4px -2px 0;padding:16px 2px 14px;background:linear-gradient(to bottom,transparent,var(--bg) 38%)}
[data-style="4"] .howto .h-acts{background:linear-gradient(to bottom,transparent,rgb(14,17,30) 38%)}
/* v20: install hint never covers the bottom buttons or an open place panel */
.install-hint.lifted.ios::after{display:none}
body:has(#panel[aria-hidden="false"]) .install-hint{display:none}
/* v21: anonymous-by-default privacy line (welcome + About) and testimony note */
.h-priv{margin:10px 0 2px;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;color:var(--ink);background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.h-priv::before{content:"🔒 ";}
.about-how .h-priv{margin:6px 0 12px}
[data-style="4"] .h-priv{color:#f5ecd6;background:rgba(243,189,82,.1);border-color:rgba(243,189,82,.3)}
.t-anon-note{margin:-2px 2px 4px;font-size:12.5px;color:var(--muted)}
/* v22: "Add to your phone" directions (install-help.js). Never in the native app / when installed (html.ap-app). */
.aph-hbtn{display:none}
html.ap-phone:not(.ap-app):not(.ap-installed) .aph-hbtn{display:grid}
html.ap-app .aph-sec,html.ap-app .aph-hbtn,html.ap-app #installHint{display:none!important}
.aph-hbtn svg,.aph-sec svg,.aph-sheet svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.aph-sheet svg.f{fill:currentColor;stroke:none}
.aph-sec{margin:14px 0 4px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.aph-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:600 15px/1.25 var(--f-body);color:var(--ink)}
.aph-sec h3 svg{width:20px;height:20px;flex:none;color:var(--acc)}
.aph-sec p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.aph-btns{display:flex;gap:8px}
.aph-btns .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px}
.aph-btns svg{width:17px;height:17px}
.about-how .aph-sec{margin:12px 0}
/* sheet */
.aph-sheet{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;inset:0;display:none;align-items:flex-end;justify-content:center;color:var(--ink)}
.aph-sheet[open]{display:flex}
.aph-sheet::backdrop{background:rgba(10,14,20,.5)}
.aph-card{width:100%;max-width:480px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;
 background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px));
 box-shadow:0 -14px 40px -14px rgba(0,0,0,.45);animation:aphUp .28s cubic-bezier(.2,1,.3,1)}
@keyframes aphUp{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:600px){.aph-sheet{align-items:center}.aph-card{border-radius:20px;border-bottom:1px solid var(--line)}}
.aph-hd{display:flex;align-items:center;gap:10px}
.aph-hd img{border-radius:9px;flex:none}
.aph-hd b{flex:1;min-width:0;font:600 18px/1.2 var(--f-head)}
.aph-lead{margin:8px 0 12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.aph-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--soft);border:1px solid var(--line);margin-bottom:12px}
.aph-tabs [role=tab]{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 14px/1 var(--f-body);cursor:pointer}
.aph-tabs [role=tab] svg{width:17px;height:17px}
.aph-tabs [aria-selected=true]{background:var(--acc);color:#fff;box-shadow:0 2px 8px -3px rgba(0,0,0,.35)}
[data-style="4"] .aph-tabs [aria-selected=true]{color:#1a1406}
.aph-tabs [role=tab]:focus-visible,.aph-sec .btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.aph-one{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--soft);font-size:13.5px}
.aph-one span{flex:1;min-width:140px}
.aph-now{display:inline-flex;align-items:center;gap:6px}.aph-now svg{width:16px;height:16px}
.aph-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.aph-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;line-height:1.42}
.aph-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--acc)}
.aph-ic svg{width:20px;height:20px}
.aph-n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;font:700 11px/20px var(--f-mono);text-align:center}
[data-style="4"] .aph-n{color:#1a1406}
.aph-tx{flex:1;min-width:0}.aph-tx b{color:var(--acc);font-weight:700}
.aph-fine{margin:10px 2px 12px;font-size:12.5px;color:var(--muted)}
.aph-ok{width:100%;min-height:44px}
[data-style="4"] .aph-card{background:rgb(14,17,30)}
html[lang=ar] .aph-card,html[lang=ar] .aph-sec{letter-spacing:0}
@media (prefers-reduced-motion:reduce){.aph-card{animation:none}}
.install-hint .ih-text{cursor:pointer}
/* v22: long "Show me how" labels (es/fr/de…) may wrap so the hint text keeps its width on small phones */
@media (max-width:420px){ .install-hint #ihGo{ white-space:normal; max-width:38%; line-height:1.15; padding-inline:12px; text-align:center } }