.document-preview-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--mobile-card-pad);
  border: 1px solid color-mix(in srgb, var(--cdx-primary) 16%, var(--cdx-border));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0%, rgba(6, 182, 212, 0.12), transparent 9rem),
    linear-gradient(180deg, var(--cdx-surface), color-mix(in srgb, var(--cdx-surface-2) 58%, var(--cdx-surface)));
  box-shadow: var(--shadow-card);
}

.document-preview-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed color-mix(in srgb, var(--cdx-border) 82%, transparent);
}

.document-preview-head img {
  width: 46px;
  height: 46px;
}

.document-preview-head h2,
.document-preview-card h3 {
  margin: 0;
  color: var(--cdx-ink);
  font-family: var(--font-display);
  font-weight: 950;
}

.document-preview-head p,
.document-preview-card p {
  margin: 0;
  color: var(--cdx-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.document-title-band {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(20, 184, 166, 0.12)),
    var(--cdx-surface);
}

.document-title-band h1 {
  margin: 0;
  color: var(--cdx-ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1.1;
  font-weight: 950;
}

.document-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.document-info-item,
.document-total-box,
.signature-box {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cdx-border) 84%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cdx-surface) 84%, transparent);
}

.document-info-item span,
.document-row span,
.document-total-box span {
  color: var(--cdx-muted);
  font-size: var(--text-xs);
  font-weight: 850;
}

.document-info-item strong,
.document-row strong,
.document-total-box strong {
  color: var(--cdx-ink);
  font-weight: 950;
}

.document-breakdown {
  display: grid;
  gap: var(--space-2);
}

.document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--cdx-border) 74%, transparent);
}

.document-row.total {
  border-bottom: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.11), rgba(20, 184, 166, 0.1));
}

.document-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.signature-box {
  min-height: 86px;
  align-content: end;
  border-style: dashed;
  text-align: center;
}

.print-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.document-note {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cdx-warning-soft) 80%, transparent);
  color: var(--cdx-muted);
  font-size: var(--text-sm);
}

html[data-theme="dark"] .document-preview-card,
body[data-theme="dark"] .document-preview-card,
html[data-theme="dark"] .document-title-band,
body[data-theme="dark"] .document-title-band,
html[data-theme="dark"] .document-info-item,
body[data-theme="dark"] .document-info-item,
html[data-theme="dark"] .document-total-box,
body[data-theme="dark"] .document-total-box,
html[data-theme="dark"] .signature-box,
body[data-theme="dark"] .signature-box {
  border-color: color-mix(in srgb, var(--cdx-border) 76%, transparent);
  background: color-mix(in srgb, var(--cdx-surface-2) 76%, var(--cdx-surface));
}

@media (max-width: 374px) {
  .document-preview-head,
  .document-info-grid,
  .document-summary-grid,
  .print-actions {
    grid-template-columns: 1fr;
  }
}

@media print {
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    width: auto;
    min-height: auto;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .mobile-preloader,
  .top-app-bar,
  .bottom-nav,
  .print-actions,
  .no-print,
  .toast-host {
    display: none !important;
  }

  .app-root,
  .app-shell,
  .section {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  .document-preview-card {
    border: 1px solid #111111 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 18px !important;
  }

  .document-title-band,
  .document-info-item,
  .document-total-box,
  .signature-box,
  .document-row.total {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #333333 !important;
  }

  .document-preview-card h1,
  .document-preview-card h2,
  .document-preview-card h3,
  .document-preview-card strong,
  .document-preview-card span,
  .document-preview-card p {
    color: #000000 !important;
  }

  .document-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}