.pwa-notice { position: fixed; z-index: 120; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: min(420px, calc(100% - 36px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid #385b62; border-radius: 16px; background: rgba(12, 24, 29, .97); box-shadow: 0 20px 52px rgba(0, 0, 0, .38); color: #eef5f4; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; backdrop-filter: blur(18px); }
.pwa-notice[hidden] { display: none; }
.pwa-notice-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #17353a; color: #55d2c9; font-weight: 850; }
.pwa-notice strong, .pwa-notice small { display: block; }
.pwa-notice small { margin-top: 2px; color: #9badb0; line-height: 1.35; }
.pwa-notice-actions { display: flex; align-items: center; gap: 6px; }
.pwa-notice button { min-height: 40px; padding: 0 12px; border: 1px solid #294047; border-radius: 10px; background: transparent; color: #dce8e7; cursor: pointer; font: inherit; font-weight: 720; }
.pwa-notice button[data-pwa-primary] { border-color: #2eaaa3; background: #2eaaa3; color: #fff; }
.pwa-notice button:hover { border-color: #55d2c9; }
.pwa-notice button:focus-visible { outline: 3px solid #8ce9e3; outline-offset: 3px; }
.pwa-offline { border-color: #80692e; }
@media (max-width: 620px) {
  .pwa-notice { grid-template-columns: auto minmax(0, 1fr); }
  .pwa-notice-actions { grid-column: 1 / -1; justify-content: flex-end; }
}