@layer components {
  .confirm-dialog {
    width: min(380px, calc(100vw - var(--space-8)));
    padding: var(--space-5);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);

    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    transition: opacity var(--speed) var(--ease-out),
                transform var(--speed) var(--ease-out),
                filter var(--speed) var(--ease-out),
                overlay var(--speed) var(--ease-out) allow-discrete,
                display var(--speed) var(--ease-out) allow-discrete;
  }
  .confirm-dialog:not([open]) {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(4px);
  }
  @starting-style {
    .confirm-dialog[open] {
      opacity: 0;
      transform: scale(0.96);
      filter: blur(4px);
    }
  }

  .confirm-dialog::backdrop {
    background: rgba(20, 16, 10, 0.45);
    transition: opacity var(--speed) var(--ease-out),
                overlay var(--speed) var(--ease-out) allow-discrete,
                display var(--speed) var(--ease-out) allow-discrete;
    opacity: 1;
  }
  .confirm-dialog:not([open])::backdrop { opacity: 0; }
  @starting-style {
    .confirm-dialog[open]::backdrop { opacity: 0; }
  }

  .confirm-dialog p {
    margin: 0 0 var(--space-5);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-bottom: 0;
  }
}