.vdp-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); gap: 1.5rem; align-items: start; }
.vdp-editor-layout > .vdp-properties { grid-column: 2; grid-row: 1; }
.vdp-editor-layout > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
.vdp-setup-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.vdp-setup-card { display: flex; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.vdp-setup-card > div { flex: 1; min-width: 0; }
.vdp-setup-card strong { display: block; margin-bottom: .25rem; }
.vdp-setup-card p, .vdp-inspector-head p, .vdp-actions p { margin: 0 0 .7rem; color: var(--muted); font-size: .85rem; }
.vdp-setup-card label { display: grid; gap: .3rem; font-size: .82rem; }
.vdp-setup-card input { max-width: 100%; }
.vdp-font-panel { display: grid; gap: .7rem; margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.vdp-font-panel h2 { margin: 0 0 .2rem; font-size: 1rem; }
.vdp-font-panel p { margin: 0; font-size: .82rem; color: var(--muted); }
.vdp-font-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); align-items: end; gap: .8rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.vdp-font-row strong, .vdp-font-row small { display: block; overflow-wrap: anywhere; }
.vdp-font-row small { margin-top: .2rem; color: var(--muted); font-size: .75rem; }
.vdp-font-row small.vdp-font-source { color: var(--teal-dark); font-weight: 700; }
.vdp-font-row small.vdp-font-missing { color: #9b2828; font-weight: 700; }
.vdp-font-row label, .vdp-font-upload label { display: grid; gap: .3rem; font-size: .8rem; }
.vdp-font-row select { width: 100%; }
.vdp-font-upload { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.vdp-font-upload label { flex: 1 1 240px; }
.vdp-font-example { display: grid; gap: .3rem; padding: .7rem; border: 1px solid var(--line); border-radius: 6px; background: white; }
.vdp-font-example small { color: var(--muted); }
.vdp-font-example span { overflow-wrap: anywhere; white-space: pre-wrap; }
.vdp-cmyk { display: grid; gap: .4rem; }
.vdp-cmyk > span { font-size: .78rem; color: var(--muted); }
.vdp-cmyk .field-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.vdp-cmyk input { min-width: 0; width: 100%; }
.vdp-step-tag { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #edf4f1; color: var(--teal-dark); font-size: .75rem; font-weight: 700; }
.vdp-file-state { display: block; margin-top: .35rem; color: var(--teal-dark); font-size: .8rem; }
.vdp-inspector-head { display: flex; justify-content: space-between; align-items: start; gap: .75rem; }
.vdp-inspector-head h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.vdp-field-state { margin: 0; padding: .55rem .7rem; background: #fff1db; color: #714b18; border-radius: 6px; font-size: .8rem; }
.vdp-field-state[data-ready="true"] { background: #e9f4ec; color: #225b37; }
.vdp-property-group { display: grid; gap: .7rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.vdp-property-group h3 { margin: 0; font-size: .88rem; }
.vdp-property-group p { margin: 0; color: var(--muted); font-size: .78rem; }
.vdp-typography { display: grid; gap: .7rem; }
.vdp-typography[open] { display: grid; }
.vdp-typography summary { cursor: pointer; color: var(--teal-dark); font-size: .82rem; font-weight: 600; }
.vdp-typography .field-row { margin-top: .7rem; }
.vdp-actions { position: sticky; top: .5rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 3px 12px #0001; }
.vdp-actions > div { flex: 1 1 250px; }
.vdp-actions strong { display: block; margin-bottom: .25rem; }
.vdp-actions p { margin: 0; }
.vdp-upload-panel, .vdp-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.vdp-upload-panel label { flex: 1 1 220px; }
.vdp-toolbar label { min-width: 100px; }
.vdp-properties { padding: 1rem; border: 1px solid #ddd; border-radius: 12px; background: #fff; }
.vdp-properties fieldset { border: 0; padding: 0; display: grid; gap: .75rem; min-width: 0; }
.vdp-properties .checkbox-label { display: flex; align-items: start; gap: .5rem; }
.vdp-properties .checkbox-label input { width: auto; margin-top: .25rem; }
.vdp-scroll { overflow: auto; padding: 1.5rem; background: #e9edeb; border-radius: 12px; min-height: 250px; max-height: 75vh; }
.vdp-stage { position: relative; background: white; box-shadow: 0 3px 14px #0002; }
.vdp-stage > img { display: block; width: 100%; height: 100%; }
.vdp-field { position: absolute; border: 1px dashed #507972; background: #d5eee333; cursor: move; padding: 0; margin: 0; touch-action: none; overflow: visible; box-sizing: border-box; }
.vdp-field.active { outline: 2px solid #237969; background: #d5eee366; }
.vdp-field.sample { background: transparent; }
.vdp-field.sample.active { background: #d5eee322; }
.vdp-field.sample .vdp-field-text { display: none; }
.vdp-field-text { display: block; overflow: hidden; width: 100%; height: 100%; white-space: pre-wrap; pointer-events: none; }
.vdp-handle { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border: 1px solid white; background: #237969; cursor: se-resize; }
.vdp-customer-preview img { display: block; width: 100%; max-width: none; }
.vdp-field-error { color: #9b2828; }
.config-layout:has([data-personalisation]) { grid-template-columns: 1fr; gap: 1.5rem; }
.config-layout:has([data-personalisation]) .config-intro { position: static; }
.vdp-personalise-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
[data-vdp-status][data-error="true"] { color: #9b2828; }
[data-variable-editor] [hidden], [data-personalisation] [hidden] { display: none !important; }
@media (max-width: 900px) { .vdp-editor-layout, .vdp-personalise-layout, .vdp-setup-panel, .vdp-font-row { grid-template-columns: 1fr; } .vdp-editor-layout > .vdp-properties { grid-column: 1; grid-row: 2; } .vdp-editor-layout > div:first-child { grid-column: 1; grid-row: 1; } .vdp-actions { position: static; } .vdp-scroll { max-height: 60vh; } }