.pwa-tools {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 20px auto;
  padding: 12px max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  color: var(--ink, #2f2931);
  font: 500 14px/1.6 system-ui, sans-serif;
}
.pwa-tools [hidden], .pwa-offline [hidden] { display: none !important; }
.pwa-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pwa-button {
  appearance: none; cursor: pointer; font: inherit;
  min-height: 44px; padding: 10px 18px; border-radius: 14px;
  background: var(--paper, #fff); color: var(--plum-dark, #533c53);
  border: 1px solid var(--line-strong, #d8ced7);
}
.pwa-button:focus-visible { outline: 3px solid var(--plum, #70536f); outline-offset: 3px; }
.pwa-button:disabled { opacity: .65; cursor: wait; }
.pwa-message {
  margin: 0 0 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--plum-soft, #ede3ec); color: var(--ink, #2f2931);
  overflow-wrap: anywhere;
}
.pwa-help { margin-top: 12px; }
.pwa-offline {
  box-sizing: border-box; margin: 0; padding: max(24px, env(safe-area-inset-top)) 20px;
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  background: #fffaf5; color: #2f2931; font: 16px/1.6 system-ui, sans-serif;
}
.pwa-offline-card { max-width: 440px; text-align: center; }
.pwa-offline-card img { width: 80px; height: 80px; border-radius: 22px; }
.pwa-offline-card h1 { font-size: 1.65rem; line-height: 1.25; }
.pwa-offline-card .pwa-button { background: #70536f; color: #fffaf5; }
@media (prefers-color-scheme: dark) {
  .pwa-offline { background: #211d23; color: #f6edf5; }
}