*{box-sizing:border-box}
body{margin:0;background:#f4f6f8;color:#17202a;font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}
header{height:64px;background:#fff;border-bottom:1px solid #dfe5eb;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
h1{font-size:22px}h2{font-size:18px;margin-top:0}h3{margin-top:0}
main{max-width:1280px;margin:24px auto;padding:0 18px}
.card{background:#fff;border:1px solid #dfe5eb;border-radius:12px;padding:18px;margin:0 0 18px}
.row,.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:9px 0}
.toolbar{padding:9px;background:#f7f9fb;border-radius:8px}
.editor-toggle{padding:6px 8px;border:1px solid #d7dee6;border-radius:7px;background:#fff}.editor-toggle input[type="number"]{width:68px;min-width:0;padding:5px}
button,.button{border:0;border-radius:7px;padding:9px 12px;background:#1769e0;color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
button.secondary{background:#e9eef5;color:#17202a}button:disabled{opacity:.5}
input,select{border:1px solid #cbd5df;border-radius:6px;padding:8px;background:#fff;min-width:90px}
label{display:flex;gap:6px;align-items:center}
.workspace{display:grid;grid-template-columns:minmax(520px,1fr) 340px;gap:16px;margin:12px 0}
.canvas-wrap{min-height:520px;overflow:auto;background:#eef2f5;border-radius:10px;padding:24px}
#canvas{position:relative;background:#fff;box-shadow:0 3px 18px rgba(0,0,0,.18);transform-origin:0 0;outline:2px solid #263238}
.safe-zone{position:absolute;border:1px dashed #ef9800;pointer-events:none;z-index:9990;background:transparent}
.snap-guide{position:absolute;pointer-events:none;z-index:9996;background:#e91e63}.snap-guide.vertical{top:0;width:1px;height:100%}.snap-guide.horizontal{left:0;height:1px;width:100%}
.object{position:absolute;border:1px dashed #2674d9;overflow:hidden;user-select:none;touch-action:none;display:flex;align-items:center;justify-content:center}
.object.selected{outline:2px solid #0b57d0}.object.disabled{opacity:.35}
.object.print-warning{border-color:#ef9800;background:rgba(255,152,0,.06)}
.object.print-danger{border-color:#d32f2f;outline:2px solid #d32f2f;background:rgba(211,47,47,.08)}
.object.selected.print-warning{outline:2px solid #ef9800}.object.selected.print-danger{outline:2px solid #d32f2f}
.handle{position:absolute;width:10px;height:10px;right:0;bottom:0;background:#0b57d0;border-radius:50%;cursor:nwse-resize}
.image-object img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#props{border-left:1px solid #e2e8ef;padding-left:16px}
#props label{justify-content:space-between;margin:8px 0}
#props input,#props select{max-width:170px}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.grid4 label{display:block}.grid4 input{width:100%}
.preview{max-height:240px;overflow:auto}
.preview table{border-collapse:collapse;width:100%;font-size:12px}
.preview th,.preview td{border:1px solid #dde3ea;padding:5px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.muted{color:#687583}
.warning{color:#9c5b00;background:#fff4dc;border-radius:6px;padding:7px;margin-top:8px}
.progress{height:14px;background:#e5e9ee;border-radius:20px;overflow:hidden;margin-top:12px}
.progress div{height:100%;width:0;background:#1769e0;transition:width .2s}
.toast{position:fixed;top:76px;right:24px;z-index:9999;max-width:420px;padding:12px 14px;border-radius:9px;background:#17324d;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.toast.bad{background:#a62020}
.hidden{display:none!important}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.canvas-wrap{min-height:420px}#props{border-left:0;border-top:1px solid #e2e8ef;padding:12px 0 0}}

.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tiles{display:flex;gap:10px;flex-wrap:wrap}
.tile{border:1px solid #dfe5eb;border-radius:10px;padding:12px;min-width:180px;background:#fafbfd}
.tile strong{display:block;margin-bottom:5px}
.status-pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#e8f1ff;color:#184f9e}
.data-box{max-height:300px;overflow:auto;border:1px solid #e1e6eb;border-radius:8px}
.data-box table{border-collapse:collapse;width:100%;font-size:12px}
.data-box th,.data-box td{padding:6px 8px;border-bottom:1px solid #edf0f3;text-align:left;vertical-align:top}
.data-box th{position:sticky;top:0;background:#f8fafc;z-index:1}
.data-box button{padding:5px 7px;font-size:12px}
@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}}

.text-primary{font-weight:700}.text-primary input{font-weight:400}.text-help{margin:-3px 0 8px}.object-text-value{width:100%;height:100%;display:flex;align-items:center;justify-content:inherit;outline:none;white-space:pre-wrap;overflow:hidden}.object-text-value[contenteditable="true"]{background:#fff8c7;box-shadow:inset 0 0 0 1px #e6a700;cursor:text;user-select:text}

.shape-svg{width:100%;height:100%;overflow:visible;pointer-events:none}.shape-svg line,.shape-svg rect{vector-effect:non-scaling-stroke}

.chz-preview{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.chz-matrix-preview{flex:1;aspect-ratio:1;min-height:0;max-width:100%;border:2px solid #111;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0/8px 8px}.chz-tail-preview{font-size:10px;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ean-preview{width:100%;height:100%;display:block;background:#fff;overflow:visible}.ean-preview rect{shape-rendering:crispEdges}.ean-preview text{font:8px Arial,sans-serif;fill:#000}