#checklist-pwa-notices {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  width: min(calc(100vw - 28px), 520px);
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  pointer-events: none;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.checklist-pwa-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 11px 12px 11px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  color: #fafafa;
  background: rgba(24,24,27,.96);
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
}

.checklist-pwa-notice[data-kind="offline"] { border-color: rgba(239,68,68,.45); }
.checklist-pwa-notice[data-kind="slow"] { border-color: rgba(245,158,11,.45); }
.checklist-pwa-notice[data-kind="online"] { border-color: rgba(16,185,129,.45); }
.checklist-pwa-notice[data-kind="update"] { border-color: rgba(250,204,21,.5); }
.checklist-pwa-notice[data-kind="install"] { border-color: rgba(14,165,233,.45); }

.checklist-pwa-notice__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a1a1aa;
  box-shadow: 0 0 10px currentColor;
}

[data-kind="offline"] .checklist-pwa-notice__dot { background: #ef4444; }
[data-kind="slow"] .checklist-pwa-notice__dot { background: #f59e0b; }
[data-kind="online"] .checklist-pwa-notice__dot { background: #10b981; }
[data-kind="update"] .checklist-pwa-notice__dot { background: #facc15; }
[data-kind="install"] .checklist-pwa-notice__dot { background: #0ea5e9; }

.checklist-pwa-notice__copy { min-width: 0; flex: 1 1 auto; }
.checklist-pwa-notice__title { margin: 0; color: inherit; font-size: 13px; line-height: 1.25; font-weight: 800; }
.checklist-pwa-notice__text { margin: 3px 0 0; color: #a1a1aa; font-size: 11px; line-height: 1.35; }

.checklist-pwa-notice__actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.checklist-pwa-notice__button {
  min-height: 34px;
  border: 1px solid #3f3f46;
  border-radius: 9px;
  padding: 7px 10px;
  color: #fafafa;
  background: #27272a;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.checklist-pwa-notice__button--primary { border-color: #facc15; color: #18181b; background: #facc15; }
.checklist-pwa-notice__close { width: 34px; padding: 0; font-size: 18px; line-height: 1; }

@media (max-width: 560px) {
  #checklist-pwa-notices { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .checklist-pwa-notice { align-items: flex-start; flex-wrap: wrap; }
  .checklist-pwa-notice__actions { width: 100%; justify-content: flex-end; }
  .checklist-pwa-notice__button:not(.checklist-pwa-notice__close) { flex: 1 1 auto; }
}