/* pwa-install-button — minimal, themeable, no dependencies.
 * Override the CSS variables in your site to match your brand; nothing here assumes a framework. */
:root {
  --pwa-accent: #0a3f7a;          /* button background */
  --pwa-accent-ink: #ffffff;      /* button text */
  --pwa-radius: 10px;
  --pwa-card-bg: #ffffff;
  --pwa-ink: #141b2b;
  --pwa-soft: #48546b;
  --pwa-line: #e2e7f0;
}

.pwa-install-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: var(--pwa-accent-ink); background: var(--pwa-accent);
  border: 0; border-radius: var(--pwa-radius); padding: 11px 18px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(20,27,43,.18); -webkit-appearance: none;
}
.pwa-install-btn:hover { filter: brightness(1.06); }
.pwa-install-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--pwa-accent) 40%, #fff); outline-offset: 2px; }
.pwa-install-btn::before { content: "⬇"; font-size: 15px; line-height: 1; opacity: .9; }
.pwa-install-btn[hidden] { display: none !important; }

/* floating variant (used when no explicit [data-pwa-install] mount is present and floating:true) */
.pwa-install-btn--floating {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2147483000;
}

/* iOS guide modal */
.pwa-install-modal {
  position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center;
  background: rgba(10,16,26,.55); padding: 20px;
}
.pwa-install-card {
  background: var(--pwa-card-bg); color: var(--pwa-ink); border-radius: 16px; max-width: 380px; width: 100%;
  padding: 22px 22px 18px; box-shadow: 0 12px 40px rgba(10,16,26,.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
.pwa-install-title { margin: 0 0 6px; font-size: 18px; }
.pwa-install-body { margin: 0 0 14px; color: var(--pwa-soft); font-size: 14px; }
.pwa-install-steps { margin: 0 0 12px; padding: 0; list-style: none; }
.pwa-install-steps li {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--pwa-line);
  font-size: 14.5px;
}
.pwa-install-steps li:last-child { border-bottom: 0; }
.pwa-install-steps li span {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--pwa-accent);
  color: var(--pwa-accent-ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.pwa-install-steps svg { color: var(--pwa-accent); flex: 0 0 auto; }
.pwa-install-note, .pwa-install-hint { margin: 6px 0 14px; font-size: 12.5px; color: var(--pwa-soft); }
.pwa-install-close {
  width: 100%; border: 0; border-radius: 10px; padding: 11px; cursor: pointer;
  background: var(--pwa-accent); color: var(--pwa-accent-ink); font-weight: 600; font-size: 15px;
}