.panel-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 26px;
  border: 1px solid var(--sage-light);
  border-radius: 20px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(40, 30, 20, .28);
  font-family: 'Poppins', sans-serif;
}
.panel-dialog::backdrop { background: rgba(35, 29, 22, .48); backdrop-filter: blur(3px); }
.panel-dialog-heading { display: flex; align-items: flex-start; gap: 14px; }
.panel-dialog h2 { margin: 0; flex: 1; font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.panel-dialog-close { width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--text); font-size: 1.4rem; cursor: pointer; }
.panel-dialog p { margin: 18px 0 22px; line-height: 1.6; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.panel-dialog textarea { width: 100%; resize: vertical; max-height: 35dvh; margin-bottom: 20px; padding: 12px; border: 1px solid var(--sage-light); border-radius: 10px; background: var(--cream); color: var(--text); font: inherit; }
.panel-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.panel-dialog-actions button { min-height: 44px; padding: 11px 20px; border: 1px solid var(--sage-light); border-radius: 11px; font: inherit; font-weight: 800; cursor: pointer; }
.panel-dialog-cancel { background: var(--white); color: var(--text); }
.panel-dialog-accept { background: var(--sage); color: #fff; }
.panel-dialog-accept.is-destructive { background: #a94035; border-color: #a94035; }
.panel-dialog button:hover { filter: brightness(.94); }
.panel-dialog :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
@media (max-width: 420px) { .panel-dialog { padding: 22px 18px; } .panel-dialog-actions button { flex: 1; padding-inline: 12px; } }