:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }
body { -webkit-tap-highlight-color: transparent; padding-bottom: var(--safe-bottom); }
.guide-shell { padding-left: max(clamp(22px,4vw,58px),var(--safe-left)); padding-right: max(clamp(22px,4vw,58px),var(--safe-right)); }
.guide-topbar { padding-top: var(--safe-top); }
.install-button { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.install-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.install-button.is-ready { color:white; border-color:transparent; background:linear-gradient(135deg,var(--guide-strong),var(--turquoise-dark)); }
.connection-banner { position:sticky; z-index:90; top:0; margin:0; padding:9px max(18px,var(--safe-right)) 9px max(18px,var(--safe-left)); color:#704815; background:#fff0cf; border-bottom:1px solid #e5c98d; text-align:center; font-size:12px; }
.footer-actions { display:flex; flex-wrap:wrap; gap:18px; }
.footer-actions button { padding:0; }
.install-dialog { width:min(520px,calc(100vw - 28px)); }
.setting-divider { height:1px; margin:20px 0; background:rgba(var(--turquoise-rgb),.1); }
.install-steps { margin:18px 0; padding-left:23px; }
.install-steps li { margin:10px 0; }
.home-prayer-summary { display:grid; grid-template-columns:minmax(230px,.8fr) 1.2fr; gap:14px; }
.next-prayer-card { position:relative; min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; overflow:hidden; border-radius:21px 21px 21px 7px; color:white; background:linear-gradient(130deg,var(--guide-strong),color-mix(in srgb,var(--turquoise-dark) 58%,#365e70)); box-shadow:0 16px 38px rgba(var(--turquoise-rgb),.14); }
.next-prayer-card::after { content:""; position:absolute; width:110px; height:110px; right:-48px; bottom:-58px; border:18px solid rgba(255,255,255,.08); border-radius:50%; }
.next-prayer-card small { display:block; color:rgba(255,255,255,.66); font-size:9px; font-weight:800; letter-spacing:1.5px; }
.next-prayer-card strong { display:block; margin-top:5px; font:400 24px Georgia,serif; }
.next-prayer-card output { position:relative; z-index:1; font:500 clamp(25px,3vw,38px)/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-1px; }
.home-prayer-summary .times-strip { align-self:stretch; }
.home-prayer-summary .time-cell { display:flex; flex-direction:column; justify-content:center; }

@media (max-width:900px) {
  .install-button span { display:none; }
  .install-button { width:40px; height:40px; justify-content:center; padding:0; }
  .home-prayer-summary { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .guide-shell { padding-left:max(18px,var(--safe-left)); padding-right:max(18px,var(--safe-right)); }
  .guide-topbar { min-height:78px; }
  .guide-brand img { width:44px; height:44px; }
  .guide-brand strong { font-size:24px; }
  .fullscreen-button { display:none; }
  .guide-nav { margin-inline:calc(max(18px,var(--safe-left)) * -1); padding-inline:max(18px,var(--safe-left)); }
  .next-prayer-card { min-height:90px; padding:18px; }
  .next-prayer-card output { font-size:27px; }
  .settings-panel { width:calc(100vw - max(20px,var(--safe-left)) - max(20px,var(--safe-right))); right:max(10px,var(--safe-right)); top:max(10px,var(--safe-top)); bottom:max(10px,var(--safe-bottom)); height:auto; max-height:calc(100dvh - max(20px,var(--safe-top)) - max(20px,var(--safe-bottom))); }
  .qibla-map { height:58vh; min-height:420px; }
}

@media (max-width:430px) {
  .guide-brand { gap:8px; }
  .guide-brand strong { font-size:22px; }
  .guide-topbar-right { gap:5px; }
  .install-button,.guide-topbar .icon-button { width:38px; height:38px; }
  .home-hero h1 { font-size:39px; }
  .home-hero-copy { padding:31px 23px; }
  .home-prayer-summary .times-strip { grid-template-columns:repeat(2,1fr); }
  .reader-panel { padding:18px; }
  .reader-panel .arabic { font-size:31px; }
  .religious-day-card { padding:17px; }
}

@media (display-mode:standalone) {
  body { overscroll-behavior-y:contain; }
  .install-button,[data-install-app] { display:none!important; }
}