.pwa-install-button {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 1060;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 0;
    border-radius: 999px;
    padding: .72rem 1rem;
    background: linear-gradient(135deg, #2A3C78, #172347);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 18px 40px rgba(23, 35, 71, .28);
}

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

.pwa-install-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 44px rgba(23, 35, 71, .34);
}

.pwa-install-icon {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(216, 165, 49, .22);
    color: #F7D47A;
}

.pwa-ios-sheet {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    align-items: end;
}

.pwa-ios-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(4px);
}

.pwa-ios-panel {
    position: relative;
    width: min(520px, calc(100% - 22px));
    margin: 0 auto calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 1.1rem 1.1rem 1.25rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    color: #111827;
    box-shadow: 0 -18px 50px rgba(15, 23, 42, .28);
    animation: pwaSheetIn .28s ease-out both;
}

.pwa-ios-close {
    position: absolute;
    top: .8rem;
    right: .9rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #eef2f7;
    color: #334155;
    font-size: 1.35rem;
    line-height: 1;
}

.pwa-ios-art {
    display: grid;
    place-items: center;
    margin: .15rem 0 .35rem;
}

.pwa-ios-art svg {
    width: min(260px, 88vw);
    height: auto;
}

.pwa-phone {
    fill: url(#pwaPhoneGradient);
    filter: drop-shadow(0 8px 18px rgba(42, 60, 120, .22));
}

.pwa-share-arrow {
    stroke-dasharray: 128;
    stroke-dashoffset: 128;
    animation: pwaDraw 1.35s ease-in-out infinite;
}

.pwa-share-box {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: pwaDraw 1.8s ease-in-out infinite .16s;
}

.pwa-plus {
    transform-origin: 205px 60px;
    animation: pwaPulse 1.2s ease-in-out infinite;
}

.pwa-ios-panel h2 {
    margin: 0 2rem .65rem 0;
    font-size: 1.15rem;
    font-weight: 900;
}

.pwa-ios-steps {
    margin: 0;
    padding-left: 1.25rem;
    color: #475569;
}

.pwa-ios-steps li + li {
    margin-top: .3rem;
}

@keyframes pwaSheetIn {
    from { transform: translateY(28px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pwaDraw {
    0% { stroke-dashoffset: 128; opacity: .45; }
    45%, 70% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -128; opacity: .55; }
}

@keyframes pwaPulse {
    0%, 100% { transform: scale(.92); opacity: .65; }
    50% { transform: scale(1.1); opacity: 1; }
}

@media (max-width: 575.98px) {
    .pwa-install-button {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        padding: .68rem .9rem;
    }
}
