/* Preview chrome stays compact without changing the sampled image geometry. */
.volume-preview [hidden] { display: none !important; }
.volume-preview .panel-heading { padding: 14px 18px; }
.volume-preview .panel-heading h2 { margin: 0; font-size: 18px; }
.volume-preview .volume-geometry { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.volume-preview .volume-cover { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px 18px; }
.volume-preview .volume-cover-images { padding: 6px; }
.volume-preview .volume-preview-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.volume-preview .volume-preview-actions .button { min-height: 36px; margin: 0; padding: 8px 14px; font-size: 12px; }
.volume-preview .volume-preview-actions .muted { font-size: 12px; }
.volume-preview .volume-status { margin: 0; padding: 0 18px 12px; font-size: 12px; }
.volume-preview .volume-status:empty { display: none; }
.volume-preview .volume-compact-tools { display: block; padding: 14px 18px; border-top: 1px solid var(--line); }
.volume-preview .volume-control-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.volume-preview .volume-control-group { min-width: 0; padding: 12px; border-radius: 8px; background: var(--background); }
.volume-preview .volume-control-group h3 { margin: 0 0 12px; color: var(--ink); font-size: 12px; font-weight: 600; }
.volume-preview .volume-adjustment-grid, .volume-preview .volume-averaging-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.volume-preview .volume-compact-tools label { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; font-size: 12px; }
.volume-preview .volume-control-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.volume-preview .volume-compact-tools input[type=range] { width: 100%; min-width: 0; min-height: 24px; margin: 0; padding: 0; }
.volume-preview .volume-adjustment output { min-width: 34px; text-align: right; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.volume-preview .volume-compact-tools select { width: 100%; min-width: 0; min-height: 34px; padding: 5px 8px; font-size: 12px; }
.volume-preview .volume-control-footer { display: flex; justify-content: flex-end; margin-top: 10px; }
.volume-preview .volume-quality-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.volume-preview .volume-compact-tools .button { min-height: 32px; padding: 6px 12px; font-size: 11px; }
.volume-preview .volume-quality { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.volume-preview .volume-planes { gap: 12px; padding: 0 18px; }
.volume-preview .volume-plane { padding: 12px; }
.volume-preview .volume-plane h3 { margin: 0 0 10px; }
.volume-preview .volume-plane-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.volume-preview .volume-plane-heading h3 { margin: 0; }
.volume-preview .volume-plane-zoom-trigger { position: static; flex-shrink: 0; }
.volume-preview .volume-plane-zoom-trigger:disabled { opacity: .35; cursor: default; }
.volume-plane-zoom-pixels { display: grid; place-items: center; padding: 16px; background: #071522; }
.volume-plane-zoom-pixels canvas { display: block; width: 100%; height: auto; max-height: calc(100dvh - 150px); object-fit: fill; }
.volume-preview .volume-sliders { gap: 12px 18px; padding: 14px 18px; }
.volume-preview .volume-sliders > label { min-width: 120px; font-size: 12px; }
.volume-preview .volume-preview-note { margin: 0; padding: 10px 18px; }
@media (max-width: 740px) {
    .volume-preview .volume-cover { grid-template-columns: 1fr; gap: 12px; }
    .volume-preview .volume-cover-images { width: min(100%, 240px); }
    .volume-preview .volume-planes { grid-template-columns: 1fr; }
}