@layer components {
  dialog.confirm-modal {
    border: none;
    border-radius: var(--r-lg);
    padding: var(--s6);
    max-width: 400px;
    width: calc(100% - var(--s8));
    margin: auto;
    background: #fff;
    box-shadow: var(--shadow-lg);
    animation: modal-in 0.2s ease;
  }

  dialog.confirm-modal::backdrop {
    background: rgba(20, 23, 20, 0.4);
  }

  @keyframes modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  .confirm-modal__title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-800);
    margin: 0 0 var(--s2) 0;
  }

  .confirm-modal__message {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink-600);
    margin: 0 0 var(--s6) 0;
    line-height: 1.5;
  }

  .confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s3);
  }
}