:root {
  --app-modal-backdrop: color-mix(in srgb, var(--color-main, CanvasText) 48%, transparent);
  --app-modal-surface: var(--color-surface, var(--color-panel, Canvas));
  --app-modal-text: var(--color-main, CanvasText);
  --app-modal-muted: var(--color-muted, GrayText);
  --app-modal-border: var(--color-border, color-mix(in srgb, CanvasText 18%, Canvas));
  --app-modal-accent: var(--accent-color, Highlight);
  --app-modal-on-accent: var(--on-accent-color, HighlightText);
  --app-modal-focus: var(--accent-color, Highlight);
}

.app-modal-backdrop[hidden],
.app-modal[hidden] { display: none; }
.app-modal-backdrop { position: fixed; inset: 0; z-index: 9000; background: var(--app-modal-backdrop); }
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 9001;
  display: grid;
  place-items: center;
  padding: 24px;
}
.app-modal__dialog {
  width: min(920px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--app-modal-border);
  border-radius: 12px;
  background: var(--app-modal-surface);
  color: var(--app-modal-text);
  box-shadow: 0 22px 70px color-mix(in srgb, var(--app-modal-text) 22%, transparent);
}
.app-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--app-modal-border); }
.app-modal__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.app-modal__close { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--app-modal-border); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.app-modal__close:hover { border-color: var(--app-modal-accent); color: var(--app-modal-accent); }
.app-modal__close:focus-visible { outline: 2px solid color-mix(in srgb, var(--app-modal-focus) 35%, transparent); outline-offset: 2px; }
.app-modal__body { min-height: 0; overflow: auto; padding: 18px 20px 22px; line-height: 1.55; }
.app-modal__body > :first-child { margin-top: 0; }
.app-modal__body > :last-child { margin-bottom: 0; }
.app-modal__body h1,
.app-modal__body h2,
.app-modal__body h3 { margin: 1.3em 0 .45em; line-height: 1.2; }
.app-modal__body h1 { font-size: 26px; }
.app-modal__body h2 { font-size: 21px; }
.app-modal__body h3 { font-size: 17px; }
.app-modal__body p,
.app-modal__body ul,
.app-modal__body ol,
.app-modal__body pre,
.app-modal__body blockquote { margin: 0 0 1em; }
.app-modal__body a { color: var(--app-modal-accent); }
.app-modal__body code { padding: .1em .25em; border-radius: 4px; background: color-mix(in srgb, var(--app-modal-text) 7%, transparent); }
.app-modal__body pre { overflow: auto; padding: 12px; border-radius: 8px; background: color-mix(in srgb, var(--app-modal-text) 8%, transparent); }
.app-modal__body pre code { padding: 0; background: transparent; }
.app-modal__iframe { width: 100%; min-height: 520px; border: 0; }

@media (max-width: 640px) {
  .app-modal { padding: 10px; }
  .app-modal__dialog { max-height: calc(100vh - 20px); }
  .app-modal__body { padding: 14px; }
}