.pwa-install-host:empty { display: none; }

.pwa-install-host--public {
  width: 100%;
}

.pwa-install-banner {
  --pwa-accent: var(--ds-accent, #9333ea);
  --pwa-text: var(--ds-text, #0f172a);
  --pwa-soft: var(--ds-text-soft, #64748b);
  --pwa-border: var(--ds-border, rgba(148, 163, 184, 0.32));
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 54px 16px 16px;
  border: 1px solid var(--pwa-border);
  border-radius: 16px;
  color: var(--pwa-text);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(12px);
}

.pwa-install-banner--profile {
  box-shadow: none;
  background:
    linear-gradient(135deg, rgba(147, 51, 234, 0.08), rgba(37, 99, 235, 0.08)),
    #fff;
}

.pwa-install-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}

.pwa-install-copy { min-width: 0; }
.pwa-install-title { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 800; }
.pwa-install-text { margin: 5px 0 0; color: var(--pwa-soft); font-size: 13px; line-height: 1.4; }

.pwa-install-banner--public .pwa-install-action {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #9333ea, #2563eb);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 9px 22px rgba(37, 99, 235, 0.22);
}

.pwa-install-banner--public .pwa-install-action:hover { transform: translateY(-1px); }
.pwa-install-action:focus-visible,
.pwa-install-close:focus-visible { outline: 2px solid var(--pwa-accent); outline-offset: 2px; }

.pwa-install-banner .pwa-install-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--pwa-soft);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pwa-install-banner .pwa-install-close:hover { color: var(--pwa-text); background: rgba(148, 163, 184, 0.12); }
.pwa-install-banner .pwa-install-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.pwa-install-instructions {
  grid-column: 2 / -1;
  margin: -3px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(147, 51, 234, 0.08);
  color: var(--pwa-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.pwa-install-instructions[hidden] { display: none; }

@media (max-width: 720px) {
  body.pwa-install-visible { padding-bottom: var(--pwa-page-bottom-space, 220px); }
  .pwa-install-banner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 13px 44px 13px 13px;
    border-radius: 14px;
  }
  .pwa-install-icon { width: 44px; height: 44px; border-radius: 11px; }
  .pwa-install-title { font-size: 14px; }
  .pwa-install-text { font-size: 12px; }
  .pwa-install-banner--public .pwa-install-action,
  .pwa-install-banner--profile .pwa-install-action {
    grid-column: 1 / -1;
    width: 100%;
  }
  .pwa-install-instructions { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-banner--public .pwa-install-action:hover { transform: none; }
}

.pwa-engagement-modal { position: relative; width: min(520px, calc(100vw - 24px)); }
.pwa-engagement-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
.pwa-engagement-modal > h2 { padding-right: 42px; }
.pwa-engagement-message { margin: 12px 0 0; color: var(--ds-text-soft, #64748b); line-height: 1.45; }
.pwa-engagement-success { margin: 12px 0 0; color: var(--ds-success, #15803d); font-weight: 700; }
.pwa-profile-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; align-items: center; }
.pwa-profile-actions p { margin: 5px 0 0; }

@media (max-width: 620px) {
  .pwa-profile-actions { grid-template-columns: 1fr; gap: 10px; }
  .pwa-profile-actions button { width: 100%; }
}