.pwa-install-button[hidden],
.pwa-install-backdrop[hidden],
.pwa-install-modal[hidden] { display: none !important; }

.pwa-install-nav { color: #e8ddff; }
.pwa-install-nav:hover { color: #fff; background: rgba(124,58,237,.15); }
.pwa-install-nav svg { color: #c4b5fd; }

.pwa-install-auth { margin-top: 14px; }
.pwa-install-auth svg { width: 18px; height: 18px; }

.app-version-label {
    display: block;
    padding: 2px 13px 0;
    color: #777b89;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
}
.app-version-label-mobile { grid-column: 1 / -1; padding: 1px 10px 0; text-align: right; }

.pwa-install-backdrop {
    position: fixed;
    z-index: 1390;
    inset: 0;
    background: rgba(2,3,8,.76);
    backdrop-filter: blur(6px);
}
.pwa-install-modal {
    position: fixed;
    z-index: 1400;
    left: 50%;
    top: 50%;
    width: min(520px, calc(100vw - 28px));
    max-height: min(760px, calc(100dvh - 28px));
    overflow-y: auto;
    padding: 26px;
    border: 1px solid rgba(196,181,253,.28);
    border-radius: 20px;
    color: #f7f5ff;
    background: linear-gradient(180deg,#171a2c,#0e101d);
    box-shadow: 0 24px 80px rgba(0,0,0,.58);
    transform: translate(-50%,-50%);
    overscroll-behavior: contain;
}
.pwa-install-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    color: #e8e5ef;
    background: rgba(255,255,255,.04);
    cursor: pointer;
}
.pwa-install-modal__close:hover { background: rgba(255,255,255,.09); }
.pwa-install-modal__close svg { width: 18px; height: 18px; }
.pwa-install-modal__eyebrow { margin: 0 48px 5px 0; color: #d4af37; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.pwa-install-modal h2 { margin: 0 48px 9px 0; font-size: clamp(23px,4vw,29px); line-height: 1.15; }
.pwa-install-modal__intro { margin: 0; color: #c6c3cf; font-size: 13px; line-height: 1.55; }
.pwa-install-steps { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: pwa-step; }
.pwa-install-steps li { counter-increment: pwa-step; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 11px; min-height: 54px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.45; }
.pwa-install-steps li::before { content: counter(pwa-step); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #1d1603; background: #d4af37; font-weight: 900; }
.pwa-install-modal__note { margin: 16px 0 0; padding: 12px 13px; border-left: 3px solid #8b5cf6; border-radius: 0 10px 10px 0; color: #bbb7c6; background: rgba(124,58,237,.10); font-size: 11px; line-height: 1.5; }
.pwa-install-modal__actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.pwa-install-modal__actions .button { min-width: 120px; }

html[data-theme="light"] .pwa-install-nav { color: #4b315e; }
html[data-theme="light"] .pwa-install-nav svg { color: #6d28d9; }
html[data-theme="light"] .pwa-install-modal { color: #2f2935; border-color: #d8cae6; background: #fffdfa; box-shadow: 0 24px 70px rgba(63,43,77,.22); }
html[data-theme="light"] .pwa-install-modal__close { color: #463d4d; border-color: #d8d0dc; background: #f5f0f7; }
html[data-theme="light"] .pwa-install-modal__intro { color: #625969; }
html[data-theme="light"] .pwa-install-steps li { color: #3b3441; border-color: #ded6e3; background: #faf7fb; }
html[data-theme="light"] .pwa-install-modal__note { color: #5c5164; background: #f4edff; }
html[data-theme="light"] .app-version-label { color: #77727c; }

@media (max-width:760px) {
    .pwa-install-mobile { color: #e8ddff !important; }
    .pwa-install-modal { top: auto; bottom: 0; width: 100%; max-height: 88dvh; padding: 24px 16px calc(20px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 22px 22px 0 0; transform: translateX(-50%); }
    .pwa-install-modal__actions .button { width: 100%; }
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    [data-pwa-install-button] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-modal, .pwa-install-backdrop { scroll-behavior: auto; }
}