.pwa-top-overlay-banner {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;
        background: #12161a !important;
        color: #f6f7f9 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .pwa-top-overlay-banner.dismissed {
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .pwa-banner-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
        gap: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    .pwa-banner-close-btn {
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        border-radius: 50% !important;
        transition: background 0.15s ease, transform 0.15s ease;
        flex-shrink: 0 !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .pwa-banner-close-btn:hover {
        background: rgba(255, 255, 255, 0.22) !important;
        transform: scale(1.08);
    }

    .pwa-banner-text-group {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding-right: 8px !important;
    }

    .pwa-banner-title {
        font-size: var(--text-md);
        font-weight: 800 !important;
        color: #f6f7f9 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pwa-banner-desc {
        font-size: var(--text-sm);
        font-weight: 500 !important;
        color: #b3bdcc !important;
        line-height: 1.35 !important;
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
    }

    .pwa-banner-install-btn {
        background: #ffffff !important;
        color: #14181f !important;
        border: none !important;
        border-radius: 9999px !important;
        padding: 8px 22px !important;
        font-size: var(--text-md);
        font-weight: 800 !important;
        cursor: pointer !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .pwa-banner-install-btn:hover {
        background: #f6f7f9 !important;
        color: #14181f !important;
        transform: scale(1.04);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    .pwa-banner-install-btn:active {
        transform: scale(0.96);
    }

    /* Compensação e empurrão fluido dos headers e barras de navegação quando o banner do PWA estiver ativo */
    body.has-pwa-banner {
        padding-top: var(--pwa-banner-h, 58px) !important;
    }

    body.has-pwa-banner .merchant-header-bar,
    body.has-pwa-banner .top-bar {
        top: var(--pwa-banner-h, 58px) !important;
    }

    body.has-pwa-banner .sidebar,
    body.has-pwa-banner .merchant-mobile-nav {
        top: var(--pwa-banner-h, 58px) !important;
        height: calc(100% - var(--pwa-banner-h, 58px)) !important;
    }

    body.has-pwa-banner .merchant-settings-page .adaptive-view-bar {
        top: calc(72px + var(--pwa-banner-h, 58px)) !important;
    }

    body.has-pwa-banner .mockup-sticky-container {
        top: calc(80px + var(--pwa-banner-h, 58px)) !important;
    }

    /* Estilos e transições visuais sem reflow de layout */
    .merchant-header-bar,
    .top-bar,
    .sidebar,
    .merchant-mobile-nav {
        transition: background-color 0.25s ease,
                    border-color 0.25s ease,
                    color 0.2s ease,
                    box-shadow 0.25s ease !important;
    }

    /* Bottom-sheet para iOS */
    .ios-install-sheet-backdrop {
        position: fixed; inset: 0; z-index: 1000000;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        display: flex; align-items: flex-end; justify-content: center;
        animation: pwaFadeInBackdrop 0.25s ease;
    }
    @keyframes pwaFadeInBackdrop { from { opacity: 0; } to { opacity: 1; } }
    .ios-install-sheet {
        background: var(--surface-card);
        border-radius: 24px 24px 0 0;
        border: 1px solid rgba(255,255,255,0.10);
        padding: 16px 24px 40px;
        width: 100%; max-width: 480px;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    }
    .ios-sheet-handle {
        width: 40px; height: 4px; border-radius: 99px;
        background: rgba(255,255,255,0.25);
        margin: 0 auto 20px;
    }
    .ios-sheet-title {
        font-size: var(--text-xl); font-weight: 800; color: #fff;
        margin: 0 0 6px; text-align: center;
    }
    .ios-sheet-desc {
        font-size: var(--text-base); color: #94a3b8;
        text-align: center; margin: 0 0 20px; line-height: 1.5;
    }
    .ios-sheet-steps {
        display: flex; flex-direction: column; gap: 12px;
        margin-bottom: 20px;
    }
    .ios-sheet-step {
        display: flex; align-items: center; gap: 12px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 12px; padding: 12px 14px;
    }
    .ios-step-num {
        width: 28px; height: 28px; border-radius: 50%;
        background: var(--primary-glow); border: 1.5px solid var(--primary);
        display: flex; align-items: center; justify-content: center;
        font-size: var(--text-base); font-weight: 800; color: var(--primary-light);
        flex-shrink: 0;
    }
    .ios-step-text { font-size: var(--text-base); color: #e2e8f0; line-height: 1.4; }
    .ios-sheet-close-btn {
        width: 100%; padding: 12px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px; color: #e2e8f0;
        font-size: var(--text-md); font-weight: 700;
        cursor: pointer;
    }
    html.pwa-installed-mode .pwa-top-overlay-banner {
        display: none !important;
    }
    html.pwa-installed-mode body.has-pwa-banner {
        padding-top: 0 !important;
    }
    @media all and (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
        .pwa-top-overlay-banner {
            display: none !important;
        }
        body.has-pwa-banner {
            padding-top: 0 !important;
        }
    }
    @media print {
        #pwa-top-overlay-banner,
        .pwa-top-overlay-banner {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            overflow: hidden !important;
            box-shadow: none !important;
            border: none !important;
        }
        body.has-pwa-banner {
            padding-top: 0 !important;
        }
        body.has-pwa-banner .sidebar,
        body.has-pwa-banner .merchant-mobile-nav,
        body.has-pwa-banner .merchant-header-bar,
        body.has-pwa-banner .top-bar {
            top: 0 !important;
            height: 100% !important;
        }
    }