:root {
    color-scheme: light;
    --pwa-navy: #182433;
    --pwa-red: #ef233c;
    --pwa-muted: #667085;
    --pwa-border: rgba(24, 36, 51, .12);
}

.crm-pwa-prompt {
    position: fixed;
    z-index: 1095;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .875rem;
    align-items: center;
    width: min(430px, calc(100vw - 2rem));
    padding: .875rem;
    color: #182433;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--pwa-border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(24, 36, 51, .22);
    backdrop-filter: blur(18px);
    animation: crm-pwa-enter .25s ease-out both;
}

.crm-pwa-prompt--ios {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.crm-pwa-prompt[hidden] {
    display: none;
}

.crm-pwa-prompt__icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
}

.crm-pwa-prompt__copy {
    min-width: 0;
}

    .crm-pwa-prompt__copy strong,
    .crm-pwa-prompt__copy span {
        display: block;
    }

    .crm-pwa-prompt__copy strong {
        margin-bottom: .15rem;
        font-size: .95rem;
    }

    .crm-pwa-prompt__copy span {
        color: var(--pwa-muted);
        font-size: .8rem;
        line-height: 1.35;
    }

.crm-pwa-prompt__actions {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.crm-pwa-prompt__button,
.crm-pwa-prompt__dismiss {
    border: 0;
    cursor: pointer;
}

.crm-pwa-prompt__button {
    min-height: 38px;
    padding: .5rem .85rem;
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    background: var(--pwa-navy);
    border-radius: 10px;
}

    .crm-pwa-prompt__button:hover {
        background: #25364b;
    }

.crm-pwa-prompt__dismiss {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #667085;
    font-size: 1.25rem;
    line-height: 1;
    background: transparent;
    border-radius: 50%;
}

    .crm-pwa-prompt__dismiss:hover {
        background: rgba(24, 36, 51, .07);
    }

.crm-pwa-toast {
    position: fixed;
    z-index: 1100;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    max-width: calc(100vw - 2rem);
    padding: .7rem 1rem;
    color: #fff;
    font-size: .875rem;
    line-height: 1.4;
    text-align: center;
    background: #182433;
    border-radius: 999px;
    box-shadow: 0 12px 36px rgba(24, 36, 51, .28);
    transform: translateX(-50%);
    animation: crm-pwa-enter .2s ease-out both;
}

.crm-pwa-toast--error {
    background: #b42318;
}

@keyframes crm-pwa-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 520px) {
    .crm-pwa-prompt {
        right: max(.75rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
        left: max(.75rem, env(safe-area-inset-left));
        grid-template-columns: auto minmax(0, 1fr);
        width: auto;
    }

    .crm-pwa-prompt__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .crm-pwa-prompt__button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-pwa-prompt,
    .crm-pwa-toast {
        animation: none;
    }
}

.pwa-offline-page {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    box-sizing: border-box;
    place-items: center;
    color: var(--pwa-navy);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 20% 10%, rgba(239, 35, 60, .09), transparent 32rem), linear-gradient(145deg, #f7f9fc, #eef2f7);
}

.pwa-offline-card {
    width: min(460px, 100%);
    padding: clamp(1.5rem, 7vw, 3rem);
    box-sizing: border-box;
    text-align: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--pwa-border);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(24, 36, 51, .14);
}

.pwa-offline-icon-wrap {
    display: inline-grid;
    padding: .35rem;
    background: #fff;
    border-radius: 23px;
    box-shadow: 0 10px 30px rgba(24, 36, 51, .14);
}

.pwa-offline-icon {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 18px;
}

.pwa-offline-eyebrow {
    margin: 1.25rem 0 .35rem;
    color: var(--pwa-red);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pwa-offline-card h1 {
    margin: 0;
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    letter-spacing: -.04em;
}

.pwa-offline-card p:not(.pwa-offline-eyebrow) {
    margin: 1rem 0 1.5rem;
    color: var(--pwa-muted);
    line-height: 1.65;
}

.pwa-offline-card button {
    width: 100%;
    padding: .85rem 1rem;
    color: #fff;
    font: inherit;
    font-weight: 750;
    background: var(--pwa-navy);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.pwa-offline-card small {
    display: block;
    margin-top: 1rem;
    color: #98a2b3;
}