.document-layout-editor__actions,
.document-layout-editor__property-heading {
    display: flex;
    align-items: end;
    gap: .5rem;
}

.document-layout-editor__actions { align-items: center; }
.document-layout-editor__body { padding: 1rem; }
.document-layout-editor__hint { color: var(--ui-text-muted); font-size: .85rem; }
.document-layout-editor__workspace { display: grid; grid-template-columns: minmax(18rem, 1.4fr) minmax(18rem, .8fr); gap: 1rem; align-items: start; }
.document-layout-editor__paper-area { min-width: 0; }
.document-layout-editor__paper-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.document-layout-editor__zoom-controls { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.document-layout-editor__zoom-value { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--ui-text-muted); }
.document-layout-editor__paper-wrap { position: relative; min-width: 0; padding: 1rem; background: #eef1f6; border: 1px solid var(--ui-border); overflow: auto; }
.document-layout-editor__paper-wrap.is-zoomed { max-height: 75vh; }
.document-layout-editor__render-status { position: absolute; z-index: 1; top: 1.5rem; left: 50%; transform: translateX(-50%); padding: .25rem .5rem; background: #fffe; border: 1px solid var(--ui-border); color: var(--ui-text-muted); font-size: .8rem; pointer-events: none; white-space: nowrap; }
.document-layout-editor__paper-base { width: 100%; max-width: 680px; margin: 0 auto; }
.document-layout-editor__paper { display: block; height: auto; margin: 0 auto; touch-action: none; box-shadow: 0 2px 12px #172b4d24; }
.document-layout-editor__sheet { fill: #fff; stroke: #d2dceb; stroke-width: .5; }
.document-layout-editor__rendered-page { pointer-events: none; }
.document-layout-editor__preview-placeholder { color: var(--ui-text-muted); font: 4px sans-serif; text-align: center; pointer-events: none; }
.document-layout-editor__zone { fill: none; pointer-events: none; }
.document-layout-editor__zone--header { stroke: #d5deec; stroke-width: .35; }
.document-layout-editor__zone--footer { stroke: #d5deec; stroke-width: .35; }
.document-layout-editor__content-zone { fill: none; stroke: #d8e0ec; stroke-width: .35; stroke-dasharray: 2 1.5; pointer-events: none; }
.document-layout-editor__content-label { color: #70809a; font: 2.8px sans-serif; pointer-events: none; }
.document-layout-editor__address-guide { fill: none; stroke: #aab8cb; stroke-width: .3; stroke-dasharray: 1.5 1; pointer-events: none; }
.document-layout-editor__snap-guide { visibility: hidden; stroke: #2255aa; stroke-width: .3; stroke-dasharray: 1.5 1; pointer-events: none; }
.document-layout-editor__snap-guide.is-visible { visibility: visible; }
.document-layout-editor__hitarea { fill: transparent; stroke: transparent; stroke-width: .5; cursor: move; pointer-events: all; }
.document-layout-editor__paper g.is-selected .document-layout-editor__hitarea { stroke: #2255aa; stroke-dasharray: 1.5 1; }
.document-layout-editor__paper g.is-dragging .document-layout-editor__hitarea { stroke: #2255aa; stroke-dasharray: 1.5 1; }
.document-layout-editor__paper g.is-dragging .document-layout-editor__hitarea { fill: #2255aa18; }
.document-layout-editor__paper g.is-overlapping .document-layout-editor__hitarea { stroke: var(--ui-warning); stroke-width: .35; stroke-dasharray: none; fill: #ffdd3326; }
.document-layout-editor__resize-handle { fill: #fff; stroke: #2255aa; stroke-width: .45; pointer-events: all; }
.document-layout-editor__resize-handle[data-resize-corner="nw"],
.document-layout-editor__resize-handle[data-resize-corner="se"] { cursor: nwse-resize; }
.document-layout-editor__resize-handle[data-resize-corner="ne"],
.document-layout-editor__resize-handle[data-resize-corner="sw"] { cursor: nesw-resize; }
.document-layout-editor__paper g.is-overlapping .document-layout-editor__resize-handle { stroke: var(--ui-warning); }
.document-layout-editor__properties { padding: .75rem; border: 1px solid var(--ui-border); background: #fff; }
.document-layout-editor__properties h3 { margin: 0 0 .5rem; font-size: 1rem; }
.document-layout-editor__properties p { color: var(--ui-text-muted); }
.document-layout-editor__insert { padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--ui-border); }
.document-layout-editor__insert-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: end; gap: .5rem; }
.document-layout-editor__insert-grid label { min-width: 0; }
.document-layout-editor__insert-grid .form-select { display: block; width: 100%; margin-top: .25rem; }
.document-layout-editor__insert-wide { grid-column: 1 / -1; }
.document-layout-editor__property-heading { justify-content: space-between; margin-bottom: .75rem; }
.document-layout-editor__property-heading h3 { margin: 0; }
.document-layout-editor__property-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); width: 100%; max-width: none; gap: .5rem .75rem; padding: 0; }
.document-layout-editor__property-grid > .document-layout-editor__position-start { grid-column: 1; }
.document-layout-editor__empty-selection { margin: 0; }
.document-layout-editor__format-options { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .35rem; }
.document-layout-editor .ui-page-message { margin-top: 1rem; }

@media (max-width: 900px) {
    .document-layout-editor__workspace { grid-template-columns: 1fr; }
    .document-layout-editor__paper-base { max-width: 560px; }
}

@media (max-width: 640px) {
    .document-layout-editor__body { padding: .75rem; }
    .document-layout-editor__actions { flex-wrap: wrap; justify-content: flex-end; }
    .document-layout-editor__paper-wrap { padding: .5rem; }
}