.cm-login-pwa-install {
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--cm-login-border, #dce6ec);
  border-radius: 50%;
  color: var(--cm-login-text, #102a3e);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 6px 20px rgba(7, 40, 60, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  z-index: 30;
}

.cm-login-pwa-install.is-visible { display: grid; }
.cm-login-pwa-install[hidden] { display: none !important; }
.cm-login-pwa-install:hover { color: var(--cm-login-brand, #5b21b6); border-color: var(--cm-login-brand, #5b21b6); }
.cm-login-pwa-install:focus-visible { outline: 3px solid var(--cm-login-brand, #5b21b6); outline-offset: 2px; }
.cm-login-pwa-install svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cm-login-pwa-install--card { position: absolute; top: 13px; right: 13px; }
.cm-login-pwa-install--native {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}

.cm-login-pwa-hint {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 54px);
  max-width: min(310px, calc(100vw - 32px));
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--cm-login-border, #dce6ec);
  border-radius: 13px;
  color: var(--cm-login-text, #102a3e);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 38px rgba(7, 40, 60, .16);
  font: 600 12px/1.45 var(--cm-login-font-family, Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  z-index: 31;
}

.cm-login-pwa-hint[hidden] { display: none !important; }
.cm-login-pwa-hint button { min-width: 28px; min-height: 28px; padding: 0; border: 0; color: var(--cm-login-muted, #586c7d); background: transparent; font: inherit; font-size: 20px; cursor: pointer; }
.cm-login-pwa-hint--card { position: absolute; top: 62px; right: 13px; bottom: auto; }

@media (prefers-color-scheme: dark) {
  .cm-login-pwa-install { color: #102a3e; background: rgba(255, 255, 255, .88); border-color: #dce6ec; }
  .cm-login-pwa-hint { color: var(--cm-login-text, #f2f8fb); background: var(--cm-login-surface, #142632); border-color: var(--cm-login-border, #39515f); }
}

@media (prefers-reduced-motion: no-preference) {
  .cm-login-pwa-install.is-visible { animation: cm-login-pwa-enter .16s ease-out; }
  .cm-login-pwa-install:active { transform: scale(.94); }
}

@keyframes cm-login-pwa-enter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
