:root {
    --kc-pwa-primary: #004494;
    --kc-pwa-dark: #06172f;
    --kc-pwa-surface: #ffffff;
    --kc-pwa-text: #0f172a;
    --kc-pwa-muted: #64748b;
    --kc-pwa-border: #dbe4f0;
    --kc-pwa-success: #15803d;
    --kc-pwa-warning: #b45309;
    --kc-pwa-danger: #b91c1c;
}

.kc-pwa-install,
.kc-pwa-toast,
.kc-pwa-network,
.kc-pwa-dialog {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.kc-pwa-install {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 2147482000;
    display: none;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    background: var(--kc-pwa-primary);
    color: #fff;
    box-shadow: 0 16px 45px rgba(0, 68, 148, .28);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.kc-pwa-install[data-visible="true"] { display: inline-flex; }
.kc-pwa-install:hover { transform: translateY(-2px); box-shadow: 0 20px 52px rgba(0, 68, 148, .34); }
.kc-pwa-install:focus-visible { outline: 3px solid rgba(40, 223, 255, .6); outline-offset: 3px; }
.kc-pwa-install svg { width: 20px; height: 20px; flex: 0 0 auto; }

.kc-pwa-network {
    position: fixed;
    left: 50%;
    top: max(12px, env(safe-area-inset-top));
    z-index: 2147482001;
    display: none;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 9px 14px;
    border-radius: 999px;
    background: #7f1d1d;
    color: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .2);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.kc-pwa-network[data-visible="true"] { display: block; }

.kc-pwa-toast {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
    z-index: 2147482002;
    display: none;
    width: min(390px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid var(--kc-pwa-border);
    border-radius: 16px;
    background: var(--kc-pwa-surface);
    color: var(--kc-pwa-text);
    box-shadow: 0 22px 64px rgba(15, 23, 42, .22);
}

.kc-pwa-toast[data-visible="true"] { display: block; }
.kc-pwa-toast strong { display: block; margin-bottom: 5px; font-size: 15px; }
.kc-pwa-toast p { margin: 0; color: var(--kc-pwa-muted); font-size: 13px; line-height: 1.55; }
.kc-pwa-toast__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.kc-pwa-toast button {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--kc-pwa-border);
    border-radius: 10px;
    background: #fff;
    color: var(--kc-pwa-text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.kc-pwa-toast button[data-primary="true"] { border-color: var(--kc-pwa-primary); background: var(--kc-pwa-primary); color: #fff; }

.kc-pwa-dialog {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(6, 23, 47, .66);
    backdrop-filter: blur(5px);
}

.kc-pwa-dialog[data-visible="true"] { display: grid; }
.kc-pwa-dialog__card {
    width: min(470px, 100%);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .3);
    color: var(--kc-pwa-text);
}
.kc-pwa-dialog h2 { margin: 0 0 8px; font-size: 21px; }
.kc-pwa-dialog p, .kc-pwa-dialog li { color: var(--kc-pwa-muted); font-size: 14px; line-height: 1.65; }
.kc-pwa-dialog ol { margin: 14px 0; padding-left: 22px; }
.kc-pwa-dialog__close { width: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--kc-pwa-primary); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }

@media (display-mode: standalone) {
    .kc-pwa-install { display: none !important; }
}

@media (max-width: 640px) {
    .kc-pwa-install { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 44px; padding: 9px 13px; }
    .kc-pwa-toast { right: 12px; bottom: max(70px, calc(env(safe-area-inset-bottom) + 70px)); width: calc(100vw - 24px); }
}

@media print {
    .kc-pwa-install, .kc-pwa-toast, .kc-pwa-network, .kc-pwa-dialog { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .kc-pwa-install { transition: none; }
}