:root {
  --pd-preview-limit: 1100px;
  --pd-preview-canvas: #f4f5f7;
  --pd-preview-dark-bg: #1d222a;
  --pd-preview-dark-text: #e7eaf0;
  --pd-preview-dark-muted: #9ba4b4;
  --pd-preview-dark-line: #353c47;
  --pd-preview-enlarged-size: 48px;
  --pd-preview-badge-size: 24px;
  --pd-preview-fire: #d97706;
}
body { margin: 0; background: var(--pd-preview-canvas); color: var(--pd-color-text); font-family: var(--pd-font-system); }
.pd-square-preview { max-width: var(--pd-preview-limit); margin: auto; padding: var(--pd-space-5) var(--pd-space-4); }
.pd-preview-heading { margin-bottom: var(--pd-space-4); }
.pd-preview-heading h1 { margin: 0; font-size: var(--pd-fs-display); font-weight: var(--pd-fw-semibold); }
.pd-square-preview p, .pd-square-preview footer { color: var(--pd-color-text-secondary); font-size: var(--pd-fs-sm); line-height: var(--pd-lh-normal); }
.pd-square-preview h2 { font-size: var(--pd-fs-md); font-weight: var(--pd-fw-semibold); margin: 0; }
.pd-preview-heading p { margin: var(--pd-space-2) 0 0; }
.pd-preview-assets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pd-space-4); margin-bottom: var(--pd-space-4); }
.pd-preview-assets article { display: flex; align-items: center; gap: var(--pd-space-4); background: var(--pd-color-surface); padding: var(--pd-space-3); border: 1px solid var(--pd-color-border); border-radius: var(--pd-radius-md); }
.pd-preview-enlarged { width: var(--pd-preview-enlarged-size); height: var(--pd-preview-enlarged-size); flex-shrink: 0; }
.pd-preview-assets p { margin: var(--pd-space-2) 0; font-size: var(--pd-fs-xs); }
.pd-preview-assets nav { display: flex; gap: var(--pd-space-3); font-size: var(--pd-fs-xs); }
.pd-preview-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-space-5); }
.pd-preview-surface { background: var(--pd-color-surface); border: 1px solid var(--pd-color-border); border-radius: var(--pd-radius-lg); padding: var(--pd-space-5); }
.pd-preview-surface h2 { color: var(--pd-color-text-secondary); margin-bottom: var(--pd-space-3); font-size: var(--pd-fs-sm); }
.pd-preview-thread { padding: var(--pd-space-5) 0; border-bottom: 1px solid var(--pd-color-border); }
.pd-preview-thread:last-child { border: 0; padding-bottom: var(--pd-space-2); }
.pd-preview-title { display: flex; align-items: center; gap: var(--pd-space-2); font-size: var(--pd-fs-lg); font-weight: var(--pd-fw-medium); line-height: var(--pd-lh-snug); }
.pd-preview-title img { flex-shrink: 0; width: var(--pd-preview-badge-size); height: var(--pd-preview-badge-size); }
.pd-preview-title i { color: var(--pd-preview-fire); font-size: var(--pd-icon-lg); width: var(--pd-preview-badge-size); text-align: center; flex-shrink: 0; }
.pd-preview-thread p { margin: var(--pd-space-2) 0 0; padding-left: calc(var(--pd-preview-badge-size) + var(--pd-space-2)); font-size: var(--pd-fs-xs); }
.pd-preview-dark { --pd-color-surface: var(--pd-preview-dark-bg); --pd-color-text: var(--pd-preview-dark-text); --pd-color-text-secondary: var(--pd-preview-dark-muted); --pd-color-border: var(--pd-preview-dark-line); color: var(--pd-color-text); }
.pd-square-preview footer { margin-top: var(--pd-space-5); font-size: var(--pd-fs-xs); }
@media (max-width: 760px) { .pd-preview-pair, .pd-preview-assets { grid-template-columns: 1fr; } .pd-square-preview { padding: var(--pd-space-5) var(--pd-space-4); } }

.pd-preview-heading h1 { color: var(--pd-color-text); }
.pd-preview-assets article { flex-direction: column; align-items: flex-start; }