.pwa-action-panel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pwa-pill,
.pwa-state {
    border: 1px solid rgba(19, 184, 170, 0.22);
    background: rgba(19, 184, 170, 0.08);
    color: var(--brand, #062b4f);
    border-radius: 999px;
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-weight: 750;
    font-size: 0.84rem;
    white-space: nowrap;
}

.pwa-pill {
    cursor: pointer;
}

.pwa-pill:hover,
.pwa-pill.is-enabled {
    background: var(--brand, #062b4f);
    color: #fff;
    border-color: var(--brand, #062b4f);
}

.pwa-state {
    background: #fff;
    color: #577086;
    box-shadow: 0 8px 22px rgba(6, 43, 79, 0.06);
}

.pwa-state[data-mode="ok"] {
    color: #08786e;
    border-color: rgba(19, 184, 170, 0.3);
}

.pwa-state[data-mode="warning"] {
    color: #9a5b00;
    border-color: rgba(214, 168, 95, 0.42);
}

.pwa-state[data-mode="busy"] {
    color: #062b4f;
}

.pwa-native-card {
    border: 1px solid rgba(19, 184, 170, 0.16);
    background: linear-gradient(135deg, rgba(19, 184, 170, 0.1), rgba(255, 255, 255, 0.92));
}

.pwa-native-card .pwa-action-panel {
    margin-top: 12px;
}

.pwa-preference-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line, #d9efec);
    border-radius: 999px;
    padding: 8px 11px;
    background: #fff;
    color: var(--muted, #577086);
    font-size: 0.9rem;
    font-weight: 700;
}

@media (max-width: 960px) {
    .topbar-actions .pwa-action-panel {
        width: 100%;
        order: 5;
    }

    .pwa-state {
        display: none;
    }
}

@media (max-width: 680px) {
    .pwa-pill {
        min-height: 42px;
        padding: 0 14px;
    }

    .pwa-native-card .pwa-action-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pwa-native-card .pwa-pill,
    .pwa-native-card .pwa-state {
        justify-content: center;
        width: 100%;
    }
}

@media (display-mode: standalone) {
    html,
    body {
        overscroll-behavior-y: none;
        min-height: 100dvh;
    }

    body.family-theme {
        background: var(--pro-bg, #f3fbfa);
        padding-top: env(safe-area-inset-top);
    }

    .app-shell {
        min-height: 100dvh;
    }

    .app-topbar {
        position: sticky;
        top: env(safe-area-inset-top);
        z-index: 40;
        background: color-mix(in srgb, var(--pro-bg, #f3fbfa) 84%, #fff);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(6, 43, 79, 0.08);
    }

    .content-frame {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        height: calc(74px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: 24px 24px 0 0;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        box-shadow: 0 -18px 45px rgba(6, 43, 79, 0.12);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        min-height: 54px;
    }
}

.admin-app-mode .pwa-pill:hover,
.admin-app-mode .pwa-pill.is-enabled {
    background: #062b4f;
    border-color: #062b4f;
}

.admin-app-mode .mobile-bottom-nav .active,
.admin-app-mode .mobile-bottom-nav .nav-add {
    color: #062b4f;
}

.family-app-mode .mobile-bottom-nav .active,
.family-app-mode .mobile-bottom-nav .nav-add {
    color: #08786e;
}

@supports not (background: color-mix(in srgb, #fff, #000)) {
    @media (display-mode: standalone) {
        .app-topbar {
            background: rgba(243, 251, 250, 0.94);
        }
    }
}