.pwa-action {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    max-width: calc(100vw - 2rem);
    border: 1px solid rgba(168, 186, 208, 0.35);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    background: #10243d;
    color: #f4f8ff;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    font: inherit;
    cursor: pointer;
}

.pwa-action:hover,
.pwa-action:focus-visible {
    background: #183455;
}

.pwa-action:focus-visible {
    outline: 3px solid #8cafff;
    outline-offset: 2px;
}

.pwa-status {
    position: fixed;
    left: 50%;
    top: 1rem;
    z-index: 1200;
    transform: translateX(-50%);
    max-width: calc(100vw - 2rem);
    border-radius: 0.75rem;
    padding: 0.7rem 1rem;
    background: #10243d;
    color: #f4f8ff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.pwa-status[data-kind="offline"] {
    background: #8b2635;
}

.pwa-status[data-kind="online"] {
    background: #176b51;
}

@media (max-width: 640px) {
    .pwa-action {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}