.pp-confirm-dialog {
  width: min(92vw, 34rem);
  max-height: min(88dvh, 44rem);
  margin: auto;
  padding: 0;
  color: var(--ink-strong, #0b2d2b);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #d7dfda);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 18px 50px rgba(18, 61, 58, .16));
  font-family: var(--font, ui-sans-serif, sans-serif);
  overflow: hidden;
}

.pp-confirm-dialog::backdrop { background: rgba(11, 45, 43, .55); }
.pp-confirm-dialog__panel { display: flex; max-height: min(88dvh, 44rem); padding: clamp(1.25rem, 4vw, 2rem); box-sizing: border-box; flex-direction: column; }
.pp-confirm-dialog__title { margin: 0 0 .75rem; font-size: clamp(1.3rem, 4vw, 1.65rem); line-height: 1.2; }
.pp-confirm-dialog__message { min-height: 0; margin: 0; padding-right: .25rem; overflow: auto; color: var(--ink-soft, #47615f); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-confirm-dialog__actions { display: flex; margin-top: 1.5rem; justify-content: flex-end; gap: .75rem; }
.pp-confirm-dialog__actions button { min-height: 44px; padding: .7rem 1.1rem; border: 1px solid var(--ink, #123d3a); border-radius: var(--radius-sm, 10px); font: inherit; font-weight: 750; cursor: pointer; }
.pp-confirm-dialog__cancel { color: var(--ink, #123d3a); background: var(--surface, #fff); }
.pp-confirm-dialog__confirm { color: #fff; background: var(--ink, #123d3a); }
.pp-confirm-dialog--danger .pp-confirm-dialog__confirm { background: var(--error, #a32929); border-color: var(--error, #a32929); }
.pp-confirm-dialog__actions button:focus-visible { outline: 3px solid var(--accent, #f0c95e); outline-offset: 3px; }

@media (max-width: 30rem) {
  .pp-confirm-dialog__actions { flex-direction: column-reverse; }
  .pp-confirm-dialog__actions button { width: 100%; }
}

@media (max-height: 25rem) {
  .pp-confirm-dialog__panel { padding-block: 1rem; }
  .pp-confirm-dialog__actions { margin-top: .75rem; }
}

/* Keep useful copy visible when a narrow viewport is combined with large text. */
@media (max-width: 30rem) and (max-height: 40rem) {
  .pp-confirm-dialog__panel { padding: 16px; }
  .pp-confirm-dialog__title { margin-bottom: 8px; }
  .pp-confirm-dialog__actions { margin-top: 10px; gap: 8px; }
  .pp-confirm-dialog__actions button { min-height: 44px; padding: 8px 12px; }
}