/* Existing app tokens remain authoritative; these fallbacks serve offline.html. */
.pwa-install { color: var(--ink, #1d293d); font-size: 1rem; line-height: 1.85; }
.pwa-install section + section { margin-top: 24px; }
.pwa-install h3 { margin: 0 0 8px; font-size: 1.125rem; }
.pwa-install ol { margin: 0; padding-left: 1.5em; }
.pwa-install li + li { margin-top: 8px; }
.pwa-install .pwa-intro { margin-top: 0; }
.pwa-note { color: var(--muted, #647187); font-size: .875rem; line-height: 1.8; }
.pwa-notice, .pwa-connection-notice { color: var(--warning, #98631d); background: var(--warning-bg, #fff8ec); border: 1px solid var(--line, #e5eaf1); border-radius: 8px; padding: 12px 16px; line-height: 1.7; }
.pwa-connection-notice { margin: 12px 24px; font-size: .875rem; }
.pwa-connection-notice[hidden] { display: none; }
.pwa-install-status:empty { display: none; }
.pwa-install-status { font-size: .875rem; }
.drawer.stock-modal:has(.pwa-install) { width: min(640px, calc(100vw - 32px)); }

/* Insets apply only when supplied by the device; no fixed-height viewport. */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 700px) {
    body:not(.pwa-offline-page) { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .workspace { padding-bottom: env(safe-area-inset-bottom); }
    .drawer { padding-bottom: env(safe-area-inset-bottom); }
    .drawer.stock-modal { max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  }
}

.pwa-offline-page { margin: 0; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); background: #f4f6fa; color: #1d293d; font: 16px/1.85 "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif; }
.pwa-offline { width: min(100%, 440px); }
.pwa-offline-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; font-weight: 600; }
.pwa-offline-brand img { width: 40px; height: 40px; }
.pwa-offline h1 { font-size: 28px; line-height: 1.4; margin: 0 0 16px; }
.pwa-offline p { margin: 0 0 16px; }
.pwa-offline-action { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 8px 20px; border-radius: 8px; background: #315bd6; color: #fff; text-decoration: none; font-weight: 600; margin: 8px 0 16px; }
.pwa-offline-action:focus-visible { outline: 3px solid #6586e8; outline-offset: 3px; }