:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#10151e;color:#eaf0f5;--mint:#62dec0;--muted:#9caabb}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1440px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #293444}.eyebrow{font:700 12px monospace;color:var(--mint);letter-spacing:.14em}h1{font-size:clamp(28px,4vw,46px);margin:10px 0}header p{margin:0;color:var(--muted)}.badge{white-space:nowrap;padding:10px 14px;border:1px solid #3c655d;border-radius:24px;font-size:12px;color:var(--mint)}.notice{padding:14px 16px;background:#16282d;border:1px solid #29534e;border-radius:12px;font-size:13px;line-height:1.6;margin-bottom:20px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px}.panel{min-width:0;border:1px solid #334152;background:#17202b;border-radius:16px;padding:20px}h2{font-size:17px;display:flex;align-items:center;gap:12px;margin:0 0 18px}h2 span{font:13px monospace;color:var(--mint)}.hint,footer{font-size:12px;color:var(--muted);line-height:1.6}label{font-size:13px;color:var(--muted);display:block;margin:12px 0 8px}textarea,select{font:13px monospace;width:100%;min-width:0;background:#101a23;border:1px solid #3a4b60;color:#f0f5f9;border-radius:9px;padding:12px}textarea{resize:vertical;line-height:1.55}textarea:focus,select:focus{outline:2px solid var(--mint);outline-offset:2px}button{font:600 14px system-ui;background:var(--mint);color:#10241f;border:1px solid transparent;border-radius:9px;padding:12px 18px;cursor:pointer;margin:12px 0}button:hover{filter:brightness(1.12)}button:focus-visible{outline:2px solid #fff;outline-offset:3px}.secondary{background:#263447;color:#edf4fa;border-color:#4d5f74}button:disabled{opacity:.6;cursor:wait}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px monospace;background:#101a23;border-radius:8px;padding:12px;max-height:220px;overflow:auto}#queryMessage{font-size:13px;color:var(--mint)}#queryMessage.error{color:#ffaaa7}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.toolbar label{margin:0;max-width:140px}.toolbar p{font:12px monospace;color:var(--muted);text-align:right}.canvas-wrap{background:#253042;padding:20px;border-radius:12px;display:flex;align-items:center;justify-content:center;min-height:260px;overflow:hidden}canvas{max-width:100%;height:auto;box-shadow:0 8px 25px #0005}.actions{display:flex;gap:12px;flex-wrap:wrap}#warnings{margin:16px 0 0;background:#322b1d;color:#ebd5a3;border-color:#655333}details{font-size:13px;color:var(--muted);margin:18px 0;line-height:1.7}summary{cursor:pointer;color:#dbe6f1}footer{border-top:1px solid #293444}code{color:#aff5dd}@media(max-width:850px){.workspace{grid-template-columns:1fr}header{align-items:flex-start;flex-direction:column;gap:14px}}@media(max-width:450px){header,main,footer{padding:16px}.panel{padding:16px}.canvas-wrap{padding:12px;min-height:180px}.badge{white-space:normal}.toolbar{align-items:flex-end}}
:root input{font:13px monospace;width:100%;min-width:0;background:#101a23;border:1px solid #3a4b60;color:#f0f5f9;border-radius:9px;padding:12px;min-height:44px}input:focus{outline:2px solid var(--mint);outline-offset:2px}input:disabled{opacity:.55}.layout-editor{padding:16px;border:1px solid #3c655d;border-radius:12px;margin-bottom:20px;background:#13252b}.layout-editor h3{font-size:14px;margin:8px 0}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.layout-editor label{min-width:0;line-height:1.5}.layout-editor input{margin-top:5px}.layout-editor .actions button{margin-bottom:0}.layout-editor [hidden],[hidden]{display:none!important}.canvas-stage{width:100%;position:relative;line-height:0}.canvas-stage canvas{display:block;width:100%;height:auto}#barcodeHandle{position:absolute;margin:0;padding:0;background:transparent;border:2px dashed #25836e;border-radius:3px;cursor:grab;touch-action:none;min-width:24px;min-height:24px}#barcodeHandle:hover,#barcodeHandle:focus-visible{background:#62dec022;filter:none}#barcodeHandle:active{cursor:grabbing}.zpl-editor{color:#dbe6f1}.zpl-editor summary{padding:10px 0;min-height:44px}.preview{align-self:start}@media(max-width:350px){.control-grid{grid-template-columns:1fr}}
.canvas-stage{max-width:min(100%,calc(70vh * var(--label-ratio,1.6)))}@media(min-width:851px){.preview{position:sticky;top:16px}}@media(max-width:850px){.canvas-stage{max-width:100%}}
.jump-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:var(--mint);font-size:13px;text-decoration:underline;line-height:1.5}.mobile-jump{display:none}.jump-link:focus-visible{outline:2px solid #fff;outline-offset:3px}#editAppearance,#labelPreview{scroll-margin-top:16px}@media(max-width:850px){.mobile-jump{display:inline-flex;margin-bottom:12px}}
.own-label{padding:16px;border:1px solid #3c655d;background:#13252b;border-radius:12px;margin:16px 0 20px}.own-label h3{font-size:16px;margin:0 0 8px}.own-label .checkbox-row{display:flex;align-items:flex-start;gap:10px;line-height:1.6;color:#eaf0f5}.own-label .checkbox-row input{flex:0 0 20px;width:20px;height:20px;min-height:20px;padding:0;margin:0;accent-color:var(--mint)}#importStatus.error{color:#ffaaa7;font-size:13px;line-height:1.6}.sql-data summary,#sampleDataEditor summary{padding:10px 0;min-height:44px}input[type=file]{font-family:system-ui;font-size:12px}input::file-selector-button{background:#263447;color:#edf4fa;border:1px solid #4d5f74;border-radius:5px;padding:8px;margin-right:8px}.own-label code{overflow-wrap:anywhere}.own-label .actions button{flex:1 1 170px;margin:0}.sample-actions button{margin:0}.sample-actions{margin-bottom:12px}
