.pwa-dialog { box-sizing: border-box; position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 440px; max-height: 92dvh; padding: 14px 24px max(22px,env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: white; color: #171717; text-align: center; font-family: inherit; }
.pwa-dialog[open] { animation: pwa-enter .25s ease-out; }
.pwa-dialog::backdrop { background: rgb(23 23 23 / 48%); }
.pwa-handle { width: 42px; height: 4px; border-radius: 2px; background: #d9d2ca; margin: 0 auto 11px; }
.pwa-icon { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 11px; border-radius: 20px; background: #f3ece4; }
.pwa-icon span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #171717; color: #c8a77f; font: 500 21px sans-serif; }
.pwa-icon [hidden], .pwa-dialog [hidden] { display: none !important; }
.pwa-dialog h2 { margin: 11px 0; font-size: 21px; font-weight: 700; }
.pwa-dialog p { margin: 11px 0; color: #6f6861; font-size: 10px; line-height: 1.8; }
.pwa-dialog ul { padding: 0; margin: 11px 0; list-style: none; text-align: right; }
.pwa-dialog li { display: flex; align-items: center; gap: 7px; min-height: 28px; color: #4f4944; font-size: 10px; }
.pwa-dialog li img { width: 16px; height: 16px; }
.pwa-dialog[data-mode="install"] { inset: 0; width: calc(100% - 32px); max-width: 370px; height: fit-content; margin: auto; padding: 22px 20px 20px; border-radius: 20px; box-shadow: 0 24px 70px rgb(23 23 23 / 22%); }
.pwa-dialog[data-mode="install"] .pwa-handle { display: none; }
.pwa-dialog[data-mode="install"] .pwa-icon { width: 66px; height: 66px; margin-bottom: 14px; border-radius: 17px; }
.pwa-dialog[data-mode="install"] .pwa-icon span { width: 54px; height: 54px; border-radius: 14px; font-size: 18px; }
.pwa-dialog[data-mode="install"] h2 { margin: 8px 0 6px; font-size: 19px; }
.pwa-dialog[data-mode="install"] > p { margin: 6px auto 14px; max-width: 290px; font-size: 10px; }
.pwa-dialog[data-mode="install"] ul { display: grid; gap: 8px; margin: 0 0 16px; }
.pwa-dialog[data-mode="install"] li { align-items: center; min-height: 44px; padding: 8px 10px; border: 1px solid #eee8e0; border-radius: 11px; background: #fbf9f6; font-size: 10px; line-height: 1.75; }
.pwa-step-number { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; background: #171717; color: #d5b46e; font-size: 10px; font-weight: 700; }
.pwa-dialog[data-mode="install"] [data-pwa-confirm] { margin-top: 0; }
.pwa-dialog[data-mode="update"] { inset: 0; width: calc(100% - 32px); max-width: 370px; height: fit-content; margin: auto; padding: 22px 20px 20px; border: 1px solid #e8e1d8; border-radius: 20px; text-align: center; box-shadow: 0 24px 70px rgb(23 23 23 / 22%); }
.pwa-dialog[data-mode="update"] .pwa-handle,
.pwa-dialog[data-mode="update"] .pwa-icon,
.pwa-dialog[data-mode="update"] ul { display: none; }
.pwa-dialog[data-mode="update"] h2 { margin: 0 0 6px; font-size: 18px; }
.pwa-dialog[data-mode="update"] > p { margin: 6px auto 12px; max-width: 300px; font-size: 10px; }
.pwa-dialog[data-mode="update"] [data-pwa-version] { padding: 9px 10px; font-size: 10px; }
.pwa-dialog[data-mode="update"] button { min-height: 40px; font-size: 10px; }
.pwa-dialog button { width: 100%; min-height: 48px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; }
.pwa-dialog button:disabled { opacity: .6; cursor: wait; }
.pwa-dialog button:focus-visible { outline: 2px solid #8a6a47; outline-offset: 3px; }
[data-pwa-confirm] { background: #0b0b0b; color: white; border: 1px solid #0b0b0b; margin-top: 11px; }
[data-pwa-dismiss] { background: white; color: #8b847c; border: 1px solid transparent; margin-top: 11px; }
.pwa-dialog[data-mode="notification"] [data-pwa-dismiss] { border-color: #d5cdc4; color: #4f4944; }
[data-pwa-version] { padding: 20px 12px; background: #faf8f5; border-radius: 9px; font-size: 11px; }
@media(min-width:640px) { .pwa-dialog { inset: 0; margin: auto; height: fit-content; border-radius: 18px; } }
@keyframes pwa-enter { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@media(prefers-reduced-motion:reduce) { .pwa-dialog[open] { animation: none; } }