/* Themed replacement for window.confirm(), used for destructive actions.
   The browser dialog cannot be styled and shows the bare host name ("localhost says"), which
   reads as a browser warning rather than part of the page. */
.ki-confirm[hidden] { display: none; }
.ki-confirm {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 19, 13, .62);
    backdrop-filter: blur(4px);
}
.ki-confirm-card {
    width: 100%;
    max-width: 420px;
    padding: 26px;
    border: 1px solid var(--ki-confirm-border, #dce7df);
    border-radius: 18px;
    background: var(--ki-confirm-bg, #fff);
    color: var(--ki-confirm-text, #1c332b);
    box-shadow: 0 24px 60px rgba(8, 19, 13, .3);
}
.ki-confirm-card h2 { margin: 0 0 10px; font-size: 1.22rem; font-weight: 700; color: inherit; }
.ki-confirm-card p { margin: 0; color: var(--ki-confirm-muted, #63796f); font-size: .95rem; line-height: 1.6; }
.ki-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.ki-confirm-actions button {
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 650;
    cursor: pointer;
}
.ki-confirm-cancel {
    border: 1px solid var(--ki-confirm-border, #dce7df);
    background: transparent;
    color: inherit;
}
.ki-confirm-cancel:hover { background: var(--ki-confirm-soft, #f1f6f3); }
.ki-confirm-ok { border: 0; background: #c62f42; color: #fff; }
.ki-confirm-ok:hover { background: #a82436; }
.ki-confirm button:focus-visible { outline: 3px solid var(--ki-confirm-accent, #27664e); outline-offset: 3px; }

[data-theme="dark"] .ki-confirm {
    --ki-confirm-bg: #192820;
    --ki-confirm-text: #e4eee7;
    --ki-confirm-muted: #aac0b0;
    --ki-confirm-border: #354c3d;
    --ki-confirm-soft: #22382b;
    --ki-confirm-accent: #a6d8bd;
}
[data-theme="dark"] .ki-confirm-ok { background: #d1465a; }
[data-theme="dark"] .ki-confirm-ok:hover { background: #b8394c; }

@media (max-width: 480px) {
    .ki-confirm-actions { flex-direction: column-reverse; }
    .ki-confirm-actions button { width: 100%; }
}