/* Photo-based final-build side preview: scoped to the review, never to pricing or forms. */
#reviewDialog { width: min(960px, calc(100% - 28px)); }
.side-preview { margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #10151b; }
.side-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.side-preview-heading p { margin: 0 0 5px; color: var(--accent-light, #62baff); font-size: 10px; letter-spacing: 1.8px; font-weight: 600; }
.side-preview-heading h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.side-preview-tag { color: var(--muted); font-size: 11px; text-align: right; }
.side-preview-viewport { overflow-x: auto; overscroll-behavior-x: contain; background: #edf1f4; background-image: linear-gradient(45deg, #e2e7ec 25%, transparent 25%), linear-gradient(-45deg, #e2e7ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e7ec 75%), linear-gradient(-45deg, transparent 75%, #e2e7ec 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; scrollbar-width: thin; }
.side-preview-viewport canvas { display: block; width: 100%; height: auto; }
.side-preview-viewport.is-zoomed canvas { min-width: 1000px; }
.side-preview-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 20px 0; }
.side-preview-tools button { min-height: 44px; padding: 10px 14px; background: #1b222b; border: 1px solid #495869; color: var(--paper); font-size: 12px; }
.side-preview-tools button:hover { border-color: #62baff; }
.side-preview-tools button:focus-visible { outline: 3px solid #62baff; outline-offset: 3px; }
.side-preview-zoom-note { color: var(--muted); font-size: 12px; margin: 0; }
.side-preview-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 20px; }
.side-preview-colors > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.side-preview-colors i { flex: 0 0 24px; height: 24px; background: var(--side-color); border: 1px solid #ffffff45; border-radius: 50%; }
.side-preview-colors p { margin: 0; min-width: 0; font-size: 12px; line-height: 1.5; }
.side-preview-colors span { display: block; color: var(--muted); font-size: 10px; }
.side-preview-wheel-detail { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.side-preview-wheel-detail img { width: 70px; height: 70px; flex-shrink: 0; object-fit: contain; background: #e9eef2; border-radius: 6px; }
.side-preview-wheel { margin: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.side-preview-wheel span { color: var(--muted); }
.side-preview-note, .side-preview-status { margin: 12px 20px 18px; font-size: 11px; line-height: 1.65; color: var(--muted); }
.side-preview-status { color: #ffd391; }
.side-preview-equipment { border-top: 1px solid var(--line); padding: 6px 20px; }
.side-preview-equipment summary { min-height: 44px; padding: 12px 0; font-size: 13px; cursor: pointer; }
.side-preview-equipment summary:focus-visible { outline: 3px solid #62baff; outline-offset: 3px; }
.side-preview-equipment[open] { padding-bottom: 20px; }
.side-preview-equipment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.side-preview-equipment-card { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.side-preview-equipment-card img { display: block; width: 100%; height: 110px; object-fit: contain; background: #e9eef2; }
.side-preview-equipment-card figcaption { padding: 10px; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.side-preview-equipment-card span { display: block; color: #81c8ff; font-size: 10px; margin-top: 5px; }
.side-preview-equipment > p { color: var(--muted); font-size: 12px; margin: 0; }
@media (max-width: 600px) {
 .side-preview-heading { padding: 14px; gap: 8px; }
 .side-preview-heading h3 { font-size: 17px; }
 .side-preview-tag { font-size: 10px; max-width: 95px; }
 .side-preview-tools { padding: 12px 14px 0; gap: 8px; }
 .side-preview-tools button { flex: 1; }
 .side-preview-colors { margin: 14px; gap: 8px; }
 .side-preview-colors > div { align-items: flex-start; gap: 6px; }
 .side-preview-colors i { flex-basis: 16px; height: 16px; margin-top: 2px; }
 .side-preview-colors p { font-size: 10px; }
 .side-preview-colors span { font-size: 9px; }
 .side-preview-wheel-detail { padding: 0 14px; gap: 9px; }
 .side-preview-wheel-detail img { width: 56px; height: 56px; }
 .side-preview-wheel { font-size: 11px; }
 .side-preview-note, .side-preview-status { margin: 12px 14px 16px; }
 .side-preview-equipment { padding: 4px 14px; }
 .side-preview-equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .side-preview-equipment-card img { height: 90px; }
}
@media print {
 #reviewDialog { width: 100%; }
 .side-preview { color: #111; background: #fff; break-inside: avoid; }
 .side-preview-tools, .side-preview-status { display: none; }
 .side-preview-viewport.is-zoomed canvas { min-width: 0; }
 .side-preview-colors span, .side-preview-wheel span, .side-preview-note, .side-preview-tag { color: #555; }
 .side-preview-equipment-card { break-inside: avoid; }
}

.side-preview-debug { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 12px; }
.side-preview-debug summary { cursor: pointer; min-height: 44px; }
.side-preview-debug > div { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.side-preview-debug label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.side-preview-debug input { width: 18px; height: 18px; }
.side-preview-debug select { padding: 8px; color: #111; background: #fff; }
.side-preview.has-side-debug .side-preview-viewport, .side-preview-viewport.is-zoomed { max-height: 70vh; overflow: auto; }
@media print { .side-preview-debug { display: none; } }