.pwa-status {
  position: fixed;
  z-index: 60;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 44px;
  padding: .55rem max(1rem, env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  border-top: 1px solid rgba(255,255,255,.22);
  background: #30344e;
  color: #fff8ed;
  font: 700 .9rem/1.45 Cairo,Tahoma,Arial,sans-serif;
  text-align: center;
  box-shadow: 0 -8px 24px rgba(20,27,52,.2);
}

.pwa-status[data-state="online"] { background: #245f64; }
.pwa-status[hidden] { display: none; }

.pwa-status:has(.pwa-install) {
  inset-inline: auto 1rem;
  bottom: 1rem;
  width: max-content;
  max-width: min(28rem, calc(100vw - 2rem));
  min-height: 0;
  padding: .5rem .6rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
}

.pwa-install {
  min-height: 44px;
  padding: .45rem .8rem;
  border: 2px solid #f4d474;
  border-radius: 12px;
  background: #fff9ea;
  color: #173d45;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.pwa-install-dismiss {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 12px;
  background: transparent;
  color: #fff8ed;
  font: 700 1.35rem/1 Cairo,Tahoma,Arial,sans-serif;
  cursor: pointer;
}

.pwa-install-dismiss:focus-visible {
  outline: 3px solid #f4d474;
  outline-offset: 2px;
}

@media (max-width:700px) {
  body:has(.mobile-bottom-nav) .pwa-status { bottom: calc(69px + env(safe-area-inset-bottom)); }
  .pwa-status:has(.pwa-install) { bottom: calc(69px + env(safe-area-inset-bottom) + .65rem); }
}

.offline-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #17494c url('/assets/learning-garden-v2.webp') center / cover fixed;
  color: #202947;
  font-family: Cairo,Tahoma,Arial,sans-serif;
}

.offline-card {
  width: min(620px, 100%);
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 2px solid rgba(76,59,98,.22);
  border-radius: 26px;
  background: rgba(255,250,240,.94);
  box-shadow: 0 24px 60px rgba(17,22,38,.25);
  text-align: center;
}

.offline-card img { border-radius: 24px; }
.offline-eyebrow { color: #4c3b62; font-weight: 800; }
.offline-card h1 { margin: .35rem 0; }
.offline-card p { line-height: 1.8; }
.offline-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.2rem; }
.offline-actions a,.offline-actions button { min-height: 48px; padding: .7rem 1rem; border: 2px solid #4c3b62; border-radius: 14px; font: inherit; font-weight: 800; cursor: pointer; }
.offline-actions a { display: inline-flex; align-items: center; background: #4c3b62; color: #fff; text-decoration: none; }
.offline-actions button { background: #fff9ea; color: #202947; }
.offline-actions a:focus-visible,.offline-actions button:focus-visible { outline: 4px solid #f4d474; outline-offset: 3px; }

@media (prefers-reduced-motion:reduce) {
  .offline-page { background-attachment: scroll; }
}