.dv { height: 100%; display: flex; flex-direction: column; }
.dv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; }
.dv-preview { overflow: auto; padding: 28px 24px 80px; background: var(--paper-2); }
.dv-panel { overflow: auto; border-left: 1px solid var(--line); background: var(--surface); padding: 6px 0 40px; }
.dv-sec { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.dv-sec.disabled > *:not(:first-child) { opacity: 0.7; }
.dv-issues { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dv-issue { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-13); background: var(--warn-soft); color: #6f4507; }
.dv-issue.block { background: var(--bad-soft); color: #7a2618; }
.dv-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dv-fmt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; }
.dv-fmt b { font-size: var(--fs-13); }
.dv-fmt.on { border-color: var(--accent); background: var(--accent-soft); }
.dv-fmt.on .ni-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.dv-fmt[disabled] { opacity: 0.4; pointer-events: none; }
.dv-pkg { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); text-align: left; }
.dv-pkg .switch { margin-top: 2px; }
.dv-k { width: 60px; flex: none; font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); }
.dv-cards { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--r-md); background: var(--surface-2); }
.dv-card { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-sm); text-align: left; }
.dv-card:hover { background: var(--paper); }
.dv-card.on .ni-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.dv-card:not(.on) { opacity: 0.55; }
.dv-travel { padding: 10px 12px; border-radius: var(--r-md); background: var(--paper); font-size: var(--fs-12); color: var(--ink-2); display: flex; flex-direction: column; gap: 5px; }
.dv-travel .icon { color: var(--ink-3); margin-right: 2px; }
.dv-go { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.dv-log { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.dv-log > .icon { color: var(--ink-3); }
.dv-done { margin: 14px 20px 6px; padding: 22px 18px; border-radius: var(--r-lg); background: var(--ok-soft); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.dv-done-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.dv-done .banner { text-align: left; }