button:disabled { cursor: not-allowed; opacity: .45; background: white; color: #64777a; }
.preview-shell { background: #e6ebea; border: 1px solid #c8d5d2; border-radius: 10px; padding: 1rem; min-height: 70vh; }
.preview-toolbar { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .8rem; }
.preview-toolbar h2 { margin: 0 auto 0 0; }
.preview-toolbar label { font-size: .85rem; color: #40585b; }
.preview-zoom-control,.preview-variable-display-control { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.preview-zoom-control select,.preview-variable-display-control select { min-width: 5.2rem; padding: .38rem 1.7rem .38rem .5rem; border: 1px solid #bdd1ce; border-radius: 6px; background: white; color: #173c40; }
.preview-layout { display: grid; grid-template-columns: var(--preview-object-panel-width, 260px) 10px minmax(320px, 1fr); gap: .35rem; align-items: stretch; }
.preview-object-panel { max-height: 72vh; overflow: auto; padding: .75rem; background: white; border-radius: 8px; scrollbar-gutter: stable; }
.preview-splitter { position: relative; min-height: 4rem; border-radius: 5px; cursor: col-resize; touch-action: none; }
.preview-splitter::before { content: ''; position: absolute; inset: 0 3px; border-radius: 3px; background: #adc3bf; transition: background-color .12s, box-shadow .12s; }
.preview-splitter:hover::before,.preview-splitter.is-dragging::before { background: #287a77; }
.preview-splitter:focus-visible { outline: none; }
.preview-splitter:focus-visible::before { background: #287a77; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #287a77; }
.preview-object-panel h3 { margin: 0 0 .25rem; color: #315d59; font-size: .95rem; }
.preview-object-panel .meta { margin: 0 0 .65rem; line-height: 1.3; }
.preview-object-section + .preview-object-section { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid #d8e4e1; }
.preview-object-section h4 { margin: 0 0 .35rem; color: #64777a; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.preview-object-list { display: grid; gap: .22rem; margin: 0; padding: 0; list-style: none; }
.preview-object-link { display: grid; grid-template-columns: 1.55rem minmax(0,1fr); align-items: center; gap: .45rem; width: 100%; padding: .32rem .38rem; border: 0; text-align: left; background: transparent; }
.preview-object-link:hover,.preview-object-link.is-selected { background: #e7f0f8; color: #153f65; }
.preview-paragraph-entry { cursor: default; }
.preview-paragraph-entry:hover { background: transparent; color: inherit; }
.preview-object-number { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #2878b5; color: white; font-size: .7rem; font-weight: 700; }
.preview-object-list-embedded { margin: .18rem 0 .1rem 1.25rem; }
.preview-object-link-embedded { grid-template-columns: 1.7rem minmax(0,1fr); }
.preview-object-number-embedded { width: 1.6rem; height: 1.25rem; border-radius: .65rem; background: #79b8e3; font-size: .62rem; }
.preview-object-description { min-width: 0; }
.preview-object-description strong,.preview-object-description small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-object-description strong { font-size: .78rem; }
.preview-object-description small { margin-top: .06rem; color: #64777a; font-size: .68rem; }
.preview-board { overflow: auto; max-height: 72vh; padding: 1rem; background: #d7dddc; border-radius: 8px; }
.preview-canvas { display: block; margin: auto; height: auto; }
.preview-canvas[data-zoom="fit"] { width: 100%; max-width: 100%; }
.preview-canvas:not([data-zoom="fit"]) { min-width: 0; max-width: none; }
.preview-paragraph-canvas { background: #d7dddc; }
.preview-section-canvas { background: #d7dddc; }
.preview-section-paragraph-surface { fill: white; stroke: #879c99; stroke-width: 5; }
.preview-section-paragraph.is-selected .preview-section-paragraph-surface {
  stroke: #2878b5; stroke-width: 8;
}
.preview-page { fill: white; stroke: #879c99; stroke-width: 5; }
.preview-side-label { font: bold 42px system-ui, sans-serif; fill: #40585b; text-anchor: middle; }
.preview-object-surface { }
.preview-frame-surface { fill: none; fill-opacity: 0; stroke: #be0000; stroke-width: 2; vector-effect: non-scaling-stroke; }
.preview-frame-fill-order { fill: #10058d; stroke: white; stroke-width: 2; vector-effect: non-scaling-stroke; }
.preview-frame-fill-order-text { font: bold 30px system-ui, sans-serif; fill: white; text-anchor: middle; dominant-baseline: central; }
.preview-object-shadow { pointer-events: none; }
.preview-area { fill: none; stroke-width: .75; stroke-dasharray: 1.5 2.5; pointer-events: none; vector-effect: non-scaling-stroke; }
.preview-area-text { stroke: #2f80a0; }
.preview-area-table { stroke: #28704c; }
.preview-area-image { stroke: #765391; }
.preview-area-rectangle { stroke: #687174; }
.preview-area-button { stroke: #a96820; }
.preview-area-flow-area { stroke: #9e8428; }
.preview-bitmap { pointer-events: none; }
.preview-rectangle { fill: #a6adb0; stroke: #687174; }
.preview-button { fill: #e59f4a; stroke: #a96820; }
.preview-content-text { stroke: none; }
.preview-variable-underline { fill: none; stroke: #a000c8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.preview-order { fill: #176b69; stroke: white; stroke-width: 5; }
.preview-order-text { font: bold 25px system-ui, sans-serif; fill: white; text-anchor: middle; dominant-baseline: central; }
.preview-design-number { fill: #2878b5; stroke: white; stroke-width: 5; }
.preview-design-number-text { font: bold 23px system-ui, sans-serif; fill: white; text-anchor: middle; dominant-baseline: central; }
.preview-design-number-embedded { fill: #79b8e3; }
.preview-design-number-text-embedded { font-size: 15px; }
.preview-design-highlight { fill: none; stroke: #2878b5; stroke-width: 0; pointer-events: none; vector-effect: non-scaling-stroke; }
.preview-design-object.is-selected .preview-design-highlight { stroke-width: 3; stroke-dasharray: 7 4; }
.preview-table-line,.preview-table-frame {
  /* These are document strokes whose widths come from PUB in 300 dpi design
     units. Let the SVG viewport scale them with preview zoom. Diagnostic
     overlays keep non-scaling-stroke in their own rules above and below. */
  vector-effect: none;
  shape-rendering: geometricPrecision;
}
.preview-table-row-markers { pointer-events: none; }
.preview-table-row-kind { fill: #6b7477; font: 600 22px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.preview-table-row-grouped,.preview-table-section-begin { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.preview-table-row-grouped { stroke: #d83a34; }
.preview-table-section-begin { stroke: #1684a3; }
.preview-control-surface { fill: white; stroke: #000; stroke-width: 2; }
.preview-button-surface { fill: #c0c0c0; }
.preview-control-caption { fill: #000; font: 30px Arial, sans-serif; dominant-baseline: central; }
.preview-control-caption-button { text-anchor: middle; }
.preview-control-mark { fill: #000; stroke: none; }
.preview-control-checkmark { fill: none; stroke: #000; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.preview-grid { stroke: #000; stroke-width: 1; opacity: 1; }
.preview-unplaced { margin-top: 1rem; background: white; border-radius: 8px; padding: .75rem 1rem; }
.preview-unplaced h3 { margin: .15rem 0 .5rem; }
.preview-unplaced ul { margin: .2rem 0; padding-left: 1.4rem; }
.preview-legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .78rem; color: #40585b; }
.preview-legend span::before { content: ''; display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; background: var(--color); margin-right: .3rem; vertical-align: -.1rem; }
@media(max-width:800px){.preview-layout{grid-template-columns:1fr}.preview-splitter{display:none}.preview-object-panel{max-height:34vh}.preview-board{max-height:65vh}}
.preview-barcode-bar { fill:#000; stroke:none; }
.preview-barcode-hri { fill:#000; dominant-baseline:alphabetic; }