dialog[data-confirmation-dialog="true"][data-modal="true"] {
    box-sizing: border-box;
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    max-width: 100%;
    margin: auto;
    padding: 0;
    border: 1px solid var(--shell-line, #17375d);
    border-radius: var(--shell-radius-md, .75rem);
    background: var(--shell-paper-strong, #091a36);
    color: var(--shell-ink, #f4f8ff);
    font-family: var(--shell-sans, Inter, Arial, sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: 0 1.5rem 4rem rgb(15 23 42 / .24);
}

dialog[data-confirmation-dialog="true"][data-modal="true"]::backdrop {
    background: rgb(15 23 42 / .56);
    backdrop-filter: blur(2px);
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-overlay-surface="true"] {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    background: inherit;
    color: inherit;
    box-shadow: none;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] header,
dialog[data-confirmation-dialog="true"][data-modal="true"] [data-overlay-body="true"] {
    display: grid;
    gap: .75rem;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] h2 {
    margin: 0;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 750;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] button,
dialog[data-confirmation-dialog="true"][data-modal="true"] input {
    min-height: 2.75rem;
    border: 1px solid var(--shell-line, #17375d);
    border-radius: var(--shell-radius-sm, .5rem);
    padding: .65rem .9rem;
    font: inherit;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] button {
    cursor: pointer;
    background: var(--shell-paper, #06152e);
    color: var(--shell-ink, #f4f8ff);
    font-weight: 600;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] button:focus-visible,
dialog[data-confirmation-dialog="true"][data-modal="true"] input:focus-visible {
    outline: 3px solid var(--shell-accent, #35c4ff);
    outline-offset: 2px;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-consequence] {
    margin: 0;
    overflow-wrap: anywhere;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-phrase-wrap] {
    display: grid;
    gap: var(--space-2, .5rem);
    margin-block-start: var(--space-4, 1rem);
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-phrase-wrap][hidden] {
    display: none;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-phrase] {
    font-weight: 700;
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-actions] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2, .5rem);
    margin-block-start: var(--space-5, 1.25rem);
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-confirm][data-tone="warning"] {
    background: var(--shell-warning, #ffc35a);
    border-color: var(--shell-warning, #ffc35a);
    color: var(--shell-side, #020b1c);
}

dialog[data-confirmation-dialog="true"][data-modal="true"] input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--shell-paper, #06152e);
    color: var(--shell-ink, #f4f8ff);
}

dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-confirm][data-tone="danger"] {
    background: var(--shell-danger, #ff7d87);
    border-color: var(--shell-danger, #ff7d87);
    color: var(--shell-side, #020b1c);
}

[data-toast-action][aria-busy="true"] {
    cursor: wait;
    opacity: .7;
}

@media (max-width: 36rem) {
    dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-actions] {
        flex-direction: column-reverse;
    }

    dialog[data-confirmation-dialog="true"][data-modal="true"] [data-confirmation-actions] button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog[data-confirmation-dialog="true"][data-modal="true"] {
        scroll-behavior: auto;
    }
}

@media (forced-colors: active) {
    dialog[data-confirmation-dialog="true"][data-modal="true"] {
        border: 2px solid CanvasText;
    }

    dialog[data-confirmation-dialog="true"][data-modal="true"]::backdrop {
        background: Canvas;
        opacity: .75;
    }

    dialog[data-confirmation-dialog="true"][data-modal="true"] button {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }
}