.rastro-pwa-banner {
  position: fixed;
  z-index: 60;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  width: min(420px, calc(100vw - 24px));
  margin-inline: auto;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid var(--line, #dedbe8);
  border-radius: 18px;
  background: var(--surface, #faf9fc);
  color: var(--ink, #1d1b24);
  box-shadow: 0 12px 36px rgb(24 18 48 / 18%);
  font: 13px/1.35 var(--sans, system-ui, sans-serif);
}
body:has(.dock) .rastro-pwa-banner { bottom: calc(88px + env(safe-area-inset-bottom)); }
.rastro-pwa-banner img { width: 32px; height: 32px; border-radius: 9px; }
.rastro-pwa-copy { display: grid; gap: 2px; min-width: 0; }
.rastro-pwa-copy strong { font-size: 13px; font-weight: 650; }
.rastro-pwa-copy span, .rastro-pwa-instructions { color: var(--ink-2, #595565); }
.rastro-pwa-banner button { font: inherit; cursor: pointer; }
.rastro-pwa-close { align-self: start; border: 0; background: transparent; color: var(--ink-2, #595565); font-size: 20px !important; line-height: 1; padding: 0 2px; }
.rastro-pwa-action { grid-column: 2 / 4; justify-self: start; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--brand, #6c47ff); color: #faf9fc; font-weight: 600 !important; }
.rastro-pwa-instructions { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.5; }
.rastro-pwa-instructions[hidden] { display: none; }
.rastro-pwa-banner button:focus-visible { outline: 2px solid var(--brand, #6c47ff); outline-offset: 3px; }
@media (min-width: 821px), (display-mode: standalone) { .rastro-pwa-banner { display: none; } }