.client-install-fab[hidden], .client-install-backdrop[hidden], .client-install-done[hidden] { display: none !important; }
.client-install-fab { display: none; }

@media (max-width: 700px) {
  .client-install-fab {
    position: fixed;
    z-index: 42;
    right: max(16px, calc((100vw - 430px) / 2 + 12px));
    bottom: calc(88px + env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 4px 15px 4px 4px;
    border: 1px solid #9579ff;
    border-radius: 99px;
    background: #6338e9;
    box-shadow: 0 10px 25px #33137c55, 0 2px 5px #2b126b33;
    color: #fff;
    font: 800 12px 'DM Sans', sans-serif;
    letter-spacing: .01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .client-install-fab:hover { background: #754dff; }
  .client-install-fab:active { transform: scale(.96); }
  .client-install-fab:focus-visible, .client-install-close:focus-visible, .client-install-done:focus-visible { outline: 2px solid #a68aff; outline-offset: 3px; }
  .client-install-fab-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffffff26; }
  .client-install-fab-icon .ti { font-size: 21px; }
  .auth-body .client-install-fab { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .app-body:has(.client-install-fab:not([hidden])) { padding-bottom: calc(142px + env(safe-area-inset-bottom)); }
}

.client-install-backdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: #110b29a8;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.client-install-sheet {
  position: relative;
  width: min(100%, 430px);
  padding: 26px 23px 23px;
  border: 1px solid #e7defb;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 25px 70px #10083166;
  color: #281c43;
  text-align: center;
}
.client-install-close { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 33px; height: 33px; border: 0; border-radius: 10px; background: #f4f0ff; color: #51426f; cursor: pointer; }
.client-install-close .ti { font-size: 20px; }
.client-install-sheet-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; background: #eee8ff; color: #6236e9; }
.client-install-sheet-icon .ti { font-size: 29px; }
.client-install-sheet h2 { margin: 0; font: 800 20px 'DM Sans', sans-serif; letter-spacing: -.035em; }
.client-install-sheet p { max-width: 320px; margin: 9px auto 0; color: #776e8a; font: 500 13px/1.5 'DM Sans', sans-serif; }
.client-install-sheet p .ti { font-size: 17px; vertical-align: -2px; }
.client-install-done { width: 100%; min-height: 44px; margin-top: 22px; border: 0; border-radius: 12px; background: #6236e9; color: #fff; font: 800 13px 'DM Sans', sans-serif; cursor: pointer; }
.client-install-done:hover { background: #754dff; }

html[data-theme="dark"] .client-install-sheet, body.dark .client-install-sheet { border-color: #3d325c; background: #211931; color: #f8f5ff; }
html[data-theme="dark"] .client-install-sheet p, body.dark .client-install-sheet p { color: #b8adc9; }
html[data-theme="dark"] .client-install-close, body.dark .client-install-close { background: #352849; color: #e3d6ff; }
html[data-theme="dark"] .client-install-sheet-icon, body.dark .client-install-sheet-icon { background: #3d2c66; color: #beadff; }

@media print { .client-install-fab, .client-install-backdrop { display: none !important; } }