.document-viewer {
  resize: both;
  overflow: hidden;
  min-width: 680px;
  min-height: 480px;
}

.document-state-badge.duplicate:is(button,[role="button"]) {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: .64rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.document-compare-viewer {
  width: min(98vw, 1800px);
  height: 92vh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #eef2f7;
  box-shadow: 0 30px 90px rgba(10, 25, 48, .45);
}

.document-compare-viewer::backdrop { background: rgba(15, 27, 45, .72); }
.document-compare-viewer > section { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.document-compare-viewer > section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid #d7e0eb; background: #fff; }
.document-compare-viewer h2 { margin: 3px 0; color: #1d3457; }
.document-compare-viewer header p { margin: 0; color: #69788c; }
.document-compare-viewer > section > header button { padding: 9px 12px; border: 1px solid #b9c6d5; border-radius: 8px; background: #fff; color: #203b63; font-weight: 750; }
.document-compare-viewer > section > main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; gap: 8px; padding: 8px; }
.document-compare-viewer > section > main[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.document-compare-viewer main > article { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; overflow: hidden; border: 1px solid #d5dee9; border-radius: 10px; background: #fff; }
.document-compare-viewer main > article > header { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border-bottom: 1px solid #dfe5ed; }
.document-compare-viewer main > article > header > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #294568; color: #fff; font-weight: 800; }
.document-compare-viewer main > article > header div { display: grid; min-width: 0; gap: 3px; }
.document-compare-viewer main > article > header b,.document-compare-viewer main > article > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-compare-viewer main > article > header small { color: #728096; font-size: .65rem; }
.document-compare-viewer main > article > header a { color: #294568; font-size: .68rem; font-weight: 750; }
.document-compare-global-actions,.document-compare-viewer main > article > footer { display: flex; align-items: center; gap: 8px; }
.document-compare-global-actions [data-keep-all] { border-color: #47775d; background: #e8f3ec; color: #28543c; }
.document-compare-viewer [data-copy-status] { font-size: .64rem; text-transform: uppercase; }
.document-compare-viewer [data-copy-status].probable-original { color: #2d6a47; }
.document-compare-viewer [data-copy-status].probable-copy { color: #9a493e; }
.document-compare-viewer main > article > footer { justify-content: flex-end; padding: 9px 10px; border-top: 1px solid #dfe5ed; background: #fff; }
.document-compare-viewer main > article > footer button { padding: 8px 10px; border: 1px solid #b8c5d4; border-radius: 7px; background: #fff; color: #294568; font-size: .68rem; font-weight: 750; }
.document-compare-viewer main > article > footer [data-delete] { border-color: #d3a7a1; color: #8d3e36; }
.document-comparison-preview { display: grid; place-items: center; min-height: 0; overflow: auto; background: #343943; }
.document-comparison-preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.document-comparison-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.document-comparison-preview .unsupported-preview { padding: 24px; border-radius: 10px; background: #fff; text-align: center; }

@media (max-width: 760px) {
  .document-viewer {
    min-width: 0;
    min-height: 0;
    resize: none;
  }
  .document-compare-viewer { width: 100vw; height: 100vh; border-radius: 0; }
  .document-compare-viewer > section > main,.document-compare-viewer > section > main[data-count="3"] { grid-template-columns: minmax(280px, 1fr); overflow-y: auto; }
  .document-compare-viewer main > article { min-height: 70vh; }
}