/* ZPL viewer (/zpl-viewer/, /de/zpl-viewer/): an app-like tool that fills the viewport under a compact site header
   (toolbar · settings bar · editor | preview · tool dock · status bar), the SEO sections below it (.vbelow) build on
   /demo/demo.css (tokens, cards, forms, .diag lists). Tool tokens: --t-* chrome (follows the site theme), --ed-* editor
   (always dark), --st-* stage (dark canvas with a dot grid). No external resources; icons are inline SVG in the page. */
:root{
  --t-bg:#eef1f5;--t-bar:#f8f9fb;--t-panel:#fff;--t-line:#dfe3ea;--t-line2:#cdd4de;--t-fg:#1c2b40;--t-mut:#566175;--t-dim:#8a93a3;
  --t-hov:rgba(28,43,64,.06);--t-act:rgba(28,43,64,.11);--t-acc:#c2570a;--t-acc-fg:#fff;--t-acc-s:rgba(194,87,10,.11);--t-ring:#c2570a;
  --t-shadow:0 12px 32px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08);
  --ed-bg:#0f1522;--ed-gut:#0c111c;--ed-bar:#0a0e18;--ed-fg:#d3dbe8;--ed-num:#4d586e;--ed-cur:#c7d0de;--ed-line:rgba(255,255,255,.07);--ed-mut:#8390a6;
  --st-bg:#1b2130;--st-dot:rgba(255,255,255,.075);
  --vw-cmd:#7ab4ff;--vw-data:#7ee2b8;--vw-cmt:#6f7d94;--vw-num:#f5b971;--vw-tilde:#c4b5fd;
  --c-err:#ef4444;--c-warn:#f59e0b;--c-info:#3b82f6;--c-ok:#22c55e;
  --vease:cubic-bezier(.22,.8,.24,1)
}
:root[data-theme="dark"]{
  --t-bg:#0b1120;--t-bar:#0e1526;--t-panel:#111a2d;--t-line:rgba(255,255,255,.08);--t-line2:rgba(255,255,255,.15);--t-fg:#e6eaf2;--t-mut:#9aa6b8;--t-dim:#667085;
  --t-hov:rgba(255,255,255,.06);--t-act:rgba(255,255,255,.11);--t-acc:#f59a4a;--t-acc-fg:#1b1003;--t-acc-s:rgba(245,154,74,.14);--t-ring:#f59a4a;
  --t-shadow:0 14px 36px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
  --ed-bg:#0a0f1b;--ed-gut:#080c16;--ed-bar:#070a13;
  --st-bg:#070b14;--st-dot:rgba(255,255,255,.06)
}

/* ---------- compact site header on this page only (other pages keep 64 px) ---------- */
body.vpage .gh{--gh-h:48px}
body.vpage .gh-l[aria-current]::after,body.vpage .gh-ddt.on::after{bottom:-7px}
body.vpage .gh .brand-lockup .mk{width:30px;height:30px}
body.vpage .gh .brand-lockup .wm img{height:28px}
body.vpage .gh-tb{width:34px;height:34px}
body.vpage .gh-lang>*{height:28px}
body.vpage .gh-cta{height:32px}
body.vpage .gh .hb{width:36px;height:36px}

/* ---------- app frame ---------- */
.vmain{max-width:none;padding:0}
.vw{padding:0}
.vapp{position:relative;display:flex;flex-direction:column;height:calc(100vh - var(--gh-h,64px) - 1px);height:calc(100dvh - var(--gh-h,64px) - 1px);min-height:540px;
  background:var(--t-bg);color:var(--t-fg);font:400 13px/1.4 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;border-bottom:1px solid var(--t-line);overflow:hidden;isolation:isolate}
.vapp *,.vapp *::before,.vapp *::after{box-sizing:border-box}
.vapp .sr,.vb.ico .vbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vsp{flex:1 1 auto}
.vsep{flex:none;width:1px;height:20px;margin:0 6px;background:var(--t-line2)}
.vapp kbd,.vtip kbd{font:500 .92em "Roboto Mono",ui-monospace,monospace;padding:0 4px;border:1px solid currentColor;border-radius:4px;opacity:.85}

/* ---------- buttons ---------- */
.vb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:30px;min-width:30px;min-height:0;margin:0;padding:0 9px 0 7px;
  border:1px solid transparent;border-radius:7px;background:transparent;color:var(--t-mut);font:500 12.5px/1 Roboto,system-ui,sans-serif;letter-spacing:.01em;
  cursor:pointer;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .12s,color .12s,border-color .12s,box-shadow .12s}
.vb.ico{width:30px;padding:0}
.vb:hover{background:var(--t-hov);color:var(--t-fg)}
.vb:active{background:var(--t-act)}
.vb:focus-visible,.vfile:focus-within{outline:2px solid var(--t-ring);outline-offset:1px}
.vb:disabled{opacity:.38;cursor:default;background:transparent;color:var(--t-mut)}
.vb .vi{flex:none;display:block;width:17px;height:17px}
.vb .vis{width:15px;height:15px}
.vb[aria-pressed=true]{background:var(--t-acc-s);color:var(--t-acc)}
.vb.pri{background:var(--t-acc);color:var(--t-acc-fg);box-shadow:0 1px 0 rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.12)}
.vb.pri:hover{background:var(--t-acc);color:var(--t-acc-fg);filter:brightness(1.07)}
.vb.pri:active{filter:brightness(.95)}
.vb.pri:disabled{background:var(--t-acc);color:var(--t-acc-fg)}
.vb.out{border-color:var(--t-line2);color:var(--t-fg);background:var(--t-panel)}
.vb.out:hover{border-color:var(--t-acc);color:var(--t-acc)}
.vb.out:disabled{border-color:var(--t-line2);color:var(--t-mut);background:var(--t-panel)}
.vb.done{color:var(--c-ok)}
.vb.pri.done{color:var(--t-acc-fg)}
.vb .vi-ok{animation:vpop .28s var(--vease)}
@keyframes vpop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.vfile{overflow:hidden}
.vfile input,.vlink input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;padding:0;border:0}

/* ---------- toolbar ---------- */
.vtop{flex:none;display:flex;align-items:center;gap:8px;height:46px;padding:0 10px 0 12px;background:var(--t-bar);border-bottom:1px solid var(--t-line)}
.vtitle{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto;margin-right:6px}
.vlogo{flex:none;color:var(--t-acc);display:block}
.vtitle h1{margin:0;font:600 13.5px/1.2 Roboto,system-ui,sans-serif;letter-spacing:0;color:var(--t-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtool{display:flex;align-items:center;gap:2px;flex:1 0 auto;min-width:0}
.vtg{display:flex;align-items:center;gap:2px;flex:none}
.vtgl{margin-left:auto;padding-left:8px}
.vsample select{height:30px;min-height:0;max-width:150px;margin-left:4px;padding:0 26px 0 9px;border:1px solid var(--t-line2);border-radius:7px;background-color:var(--t-panel);color:var(--t-fg);font:500 12.5px Roboto,system-ui,sans-serif;cursor:pointer}
.vsample select:hover{border-color:var(--t-acc)}
.vmob{display:none}

/* ---------- settings bar ---------- */
.vbar{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-height:0;height:40px;padding:0 12px;background:var(--t-bar);border-bottom:1px solid var(--t-line);overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
.vbar::-webkit-scrollbar{display:none}
.vbar[hidden]{display:none}
.vb[hidden]{display:none}
.vbar label{flex:none;flex-direction:row;align-items:center;gap:6px;min-height:0;font:500 12px Roboto,system-ui,sans-serif;color:var(--t-mut)}
.vbar select,.vbar input[type=number]{height:28px;min-height:0;padding:0 8px;border:1px solid var(--t-line2);border-radius:6px;background-color:var(--t-panel);color:var(--t-fg);font:500 12.5px Roboto,system-ui,sans-serif}
.vbar input[type=number]{width:62px;font-variant-numeric:tabular-nums}
.vbar select:hover,.vbar input[type=number]:hover{border-color:var(--t-dim)}
.vbar select:focus-visible,.vbar input:focus-visible{outline:2px solid var(--t-ring);outline-offset:1px}
.vbar label.check{gap:6px;color:var(--t-fg);font-weight:400;min-height:28px;cursor:pointer}
.vbar input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--t-acc)}
.vx{color:var(--t-dim);font-size:12px;margin:0 -2px}
.seg{display:inline-flex;flex:none;gap:2px;padding:2px;border:1px solid var(--t-line2);border-radius:8px;background:var(--t-bg)}
.seg button{height:22px;min-height:0;padding:0 9px;border:0;border-radius:6px;background:transparent;color:var(--t-mut);font:500 12px/1 Roboto,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background-color .12s,color .12s}
.seg button:hover{color:var(--t-fg)}
.seg button[aria-checked=true]{background:var(--t-panel);color:var(--t-fg);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--t-line)}
:root[data-theme="dark"] .seg button[aria-checked=true]{background:rgba(255,255,255,.12);box-shadow:none}
.seg button:focus-visible{outline:2px solid var(--t-ring);outline-offset:1px}

/* ---------- editor | preview ---------- */
.vbody{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,var(--vsplit,46%)) 1px minmax(0,1fr)}
.vpane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.vph{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 8px 0 10px;background:var(--t-bar);border-bottom:1px solid var(--t-line);color:var(--t-mut);font:500 12px Roboto,system-ui,sans-serif}
.vsplit{position:relative;z-index:5;background:var(--t-line);cursor:col-resize;touch-action:none}
.vsplit::before{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-4px}
.vsplit::after{content:"";position:absolute;top:0;bottom:0;left:-1px;right:-1px;background:var(--t-acc);opacity:0;transition:opacity .15s}
.vsplit:hover::after,.vsplit.drag::after,.vsplit:focus-visible::after{opacity:1}
.vsplit:focus-visible{outline:none}
/* bottom edge: drag down to make the whole tool (and with it the label stage) taller than the window */
.vgrow{flex:none;position:relative;z-index:5;height:8px;margin-top:-1px;background:var(--t-bar);border-top:1px solid var(--t-line);cursor:ns-resize;touch-action:none}
.vgrow::before{content:"";position:absolute;left:50%;top:2px;width:36px;height:3px;margin-left:-18px;border-radius:2px;background:var(--t-line2);transition:background-color .15s}
.vgrow:hover::before,.vgrow.drag::before,.vgrow:focus-visible::before{background:var(--t-acc)}
.vgrow:focus-visible{outline:none}
.vapp.vgrown{height:var(--vapp-h)}
.vw:fullscreen .vgrow,.vw.vfull .vgrow{display:none}
.vbody.dragging{cursor:col-resize;user-select:none}
.vbody.dragging.ns{cursor:ns-resize}
.vbody.dragging iframe,.vbody.dragging textarea{pointer-events:none}

/* editor pane: always dark */
.ved-pane{background:var(--ed-bg)}
.ved-pane .vph{background:var(--ed-bar);border-bottom-color:var(--ed-line);color:var(--ed-mut);padding-left:0}
.vtab{display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 14px 0 12px;color:#e6ebf3;background:var(--ed-bg);border-right:1px solid var(--ed-line);box-shadow:inset 0 2px 0 var(--t-acc);font-weight:500}
.vtab .vi{color:#7ab4ff}
.vph-h{font-weight:400;font-size:11.5px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vedit{position:relative;display:flex;flex:1 1 auto;min-height:0;background:var(--ed-bg)}
.vgut{flex:0 0 auto;min-width:50px;padding:10px 0;overflow:hidden;text-align:right;font:400 12.5px/20px "Roboto Mono",ui-monospace,monospace;color:var(--ed-num);background:var(--ed-gut);border-right:1px solid var(--ed-line);user-select:none}
.vgut div{height:20px;padding:0 12px 0 14px;white-space:nowrap}
.vgut .cur{color:var(--ed-cur)}
.vgut .e{color:#fca5a5;box-shadow:inset 3px 0 0 var(--c-err)}
.vgut .w{color:#fcd34d;box-shadow:inset 3px 0 0 var(--c-warn)}
.vgut .i{color:#93c5fd;box-shadow:inset 3px 0 0 var(--c-info)}
.vcode{position:relative;flex:1 1 auto;min-width:0;overflow:hidden}
.vcl{position:absolute;left:0;right:0;top:0;height:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(255,255,255,.03);pointer-events:none;will-change:transform}
.vcode:not(:focus-within) .vcl{opacity:.5}
.vhl,.vcode textarea{position:absolute;inset:0;margin:0;padding:10px 14px;font:400 12.5px/20px "Roboto Mono",ui-monospace,monospace;letter-spacing:0;tab-size:4;white-space:pre;border:0;border-radius:0}
.vhl{overflow:hidden;pointer-events:none;color:var(--ed-fg);background:transparent}
.vhl code{font:inherit;display:block;min-width:max-content}
.vcode textarea{width:100%;height:100%;min-height:0;resize:none;overflow:auto;background:transparent;color:transparent;caret-color:#f8fafc;outline:none;scrollbar-color:rgba(255,255,255,.18) transparent}
.vcode textarea::selection{background:rgba(122,180,255,.3);color:transparent}
.vcode textarea:focus-visible{outline:none}
.vcode.plain textarea{color:var(--ed-fg)}
.vcode.plain .vhl{display:none}
.vhl .hc{color:var(--vw-cmd);font-weight:500}
.vhl .ht{color:var(--vw-tilde);font-weight:500}
.vhl .hd{color:var(--vw-data)}
.vhl .hx{color:var(--vw-cmt);font-style:italic}
.vhl .hn{color:var(--vw-num)}
.vhl .m{position:absolute;left:0;right:0;height:20px;pointer-events:none}
.vhl .m.e{background:rgba(239,68,68,.12);box-shadow:inset 0 -2px 0 -0.5px rgba(239,68,68,.75)}
.vhl .m.w{background:rgba(245,158,11,.1);box-shadow:inset 0 -2px 0 -0.5px rgba(245,158,11,.7)}
.vhl .m.i{background:rgba(59,130,246,.08)}
.vdrop{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;background:rgba(10,15,27,.88);border:2px dashed var(--t-acc);border-radius:12px;color:#f1f5f9;font-weight:500;z-index:3}
.vdrop[hidden]{display:none}

/* context help under the editor (dark like the editor) */
.vhelp{flex:0 0 auto;height:128px;overflow:auto;padding:9px 14px 10px;border-top:1px solid var(--ed-line);background:var(--ed-gut);color:#c4cddb;font-size:12.5px;line-height:1.45;scrollbar-color:rgba(255,255,255,.18) transparent}
.vhelp[hidden]{display:none}
.vhelp p{margin:0 0 5px}
.vhelp .muted{color:var(--ed-mut)}
.vhelp .small{font-size:12px}
.vhelp-h{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;color:#f1f5f9}
.vhelp-h b{font-weight:500}
.vhelp-c{font:700 13px "Roboto Mono",ui-monospace,monospace;color:var(--vw-cmd)}
.vhelp code{font-family:"Roboto Mono",ui-monospace,monospace;font-size:.95em;overflow-wrap:anywhere}
.vhelp-s code,.vhelp-e code{color:var(--vw-cmd)}
.vhelp-d{color:#c4cddb}
.vhelp-p{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:1px 12px;margin:4px 0 7px}
.vhelp-p dt{font:500 12px "Roboto Mono",ui-monospace,monospace;color:var(--ed-mut);padding:1px 6px;border-radius:5px}
.vhelp-p dd{margin:0;padding:1px 0}
.vhelp-p .cur{background:rgba(245,154,74,.16);color:#fde7d2}
.vhelp-p dd.cur{padding:1px 6px;border-radius:5px}

/* preview pane */
.vpg{display:flex;align-items:center;gap:2px}
.vshow input{width:46px;height:26px;min-height:0;padding:0 4px;text-align:center;border:1px solid var(--t-line2);border-radius:6px;background:var(--t-panel);color:var(--t-fg);font:500 12.5px Roboto,system-ui,sans-serif;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.vshow input::-webkit-inner-spin-button,.vshow input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.vshow input:focus-visible{outline:2px solid var(--t-ring);outline-offset:1px}
.vof{margin:0 4px 0 5px;color:var(--t-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.vzm{display:flex;align-items:center;gap:2px}
.vb.vzv{min-width:52px;padding:0 6px;font-variant-numeric:tabular-nums;color:var(--t-fg)}
.vstagewrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
.vstage{position:relative;flex:1 1 auto;min-width:0;overflow:auto;background-color:var(--st-bg);background-image:radial-gradient(var(--st-dot) 1px,transparent 1.3px);background-size:16px 16px;
  scrollbar-color:rgba(255,255,255,.2) transparent}
.vcanvas{display:flex;align-items:center;justify-content:center;width:max-content;height:max-content;min-width:100%;min-height:100%;padding:28px}
.vimgwrap{position:relative;flex:none;line-height:0;background:#fff;border-radius:2px;transform-origin:50% 50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.28),0 18px 44px rgba(0,0,0,.42)}
.vimgwrap:has(img[hidden]){box-shadow:none;background:none}
.vimgwrap.spin{transition:transform .42s var(--vease)}
.vimgwrap img{display:block;max-width:none;width:auto;height:auto;background:#fff;cursor:zoom-in;-webkit-user-drag:none}
.vimgwrap img.px{image-rendering:pixelated}
.vstage.actual .vimgwrap img{cursor:zoom-out}
.vimgwrap img[hidden]{display:none}
.vover{position:absolute;inset:0;pointer-events:none}
.vover b{position:absolute;border:2px solid #16a34a;border-radius:3px}
.vover b.bad{border-color:#dc2626}
.vover b.warn{border-color:#e87d0d}
.vover b.hi{box-shadow:0 0 0 3px rgba(245,154,74,.55)}
.vempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;color:#8794aa;font-size:13px;pointer-events:none}
.vempty[hidden]{display:none}
.vprog{position:absolute;left:0;right:0;top:0;height:2px;z-index:4;overflow:hidden;opacity:0;transition:opacity .2s;pointer-events:none}
.vprog::before{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,var(--t-acc),transparent);animation:vprog 1s linear infinite}
.vstagewrap.busy .vprog{opacity:1;transition-delay:.18s}
@keyframes vprog{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.vstagewrap .errbox{position:absolute;left:12px;right:12px;top:12px;z-index:5;margin:0;padding:9px 12px;border:1px solid rgba(239,68,68,.55);border-left:3px solid var(--c-err);border-radius:8px;
  background:color-mix(in srgb,var(--c-err) 9%,var(--t-panel));color:var(--t-fg);font-size:12.5px;box-shadow:var(--t-shadow);max-height:40%;overflow:auto}
.vlint{flex:none;max-height:112px;overflow:auto;padding:6px 10px 7px;border-top:1px solid var(--t-line);background:var(--t-panel);font-size:12.5px}
.vlint[hidden]{display:none}
.vlint-h{display:flex;align-items:center;gap:10px;margin-bottom:4px;color:var(--t-fg);font-size:12px}
.vlint-h b{font-weight:500}
.vlint ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.vlint li{padding:2px 8px}
.vlint li.muted{display:none}
.vlint:has(li.muted) .vlint-h{margin-bottom:0}
.vlint:has(li.muted) #vLintN::after{content:" ✓";color:var(--c-ok)}
.vlink{position:relative;display:inline;color:var(--t-acc);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:inherit;font-weight:500}
.vlint-all{margin-left:auto;border:0;background:none;padding:0;font:500 12px Roboto,system-ui,sans-serif;min-height:24px}
.vdl{flex:none;display:flex;align-items:center;gap:2px;height:42px;padding:0 8px 0 12px;border-top:1px solid var(--t-line);background:var(--t-bar);overflow-x:auto;scrollbar-width:none}
.vdl::-webkit-scrollbar{display:none}
.vdl-t{margin-right:6px;font:600 10.5px Roboto,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--t-dim)}
.vdl .vb.out{margin-left:auto}

/* ---------- dock: problems, barcode check, image to ZPL ---------- */
.vdock{flex:none;display:flex;flex-direction:column;background:var(--t-panel);border-top:1px solid var(--t-line)}
.vdock-h{display:flex;align-items:center;height:34px;padding:0 6px 0 4px;background:var(--t-bar)}
.vtabs{display:flex;align-items:stretch;height:100%;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0;border:0}
.vtabs::-webkit-scrollbar{display:none}
.vtabs button{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:0;margin:0;padding:0 12px;border:0;background:none;color:var(--t-mut);font:500 12.5px Roboto,system-ui,sans-serif;cursor:pointer;transition:color .12s}
.vtabs button:hover{color:var(--t-fg)}
.vdock.open .vtabs button[aria-selected=true]{color:var(--t-fg)}
.vdock.open .vtabs button[aria-selected=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--t-acc)}
.vtabs button:focus-visible{outline:2px solid var(--t-ring);outline-offset:-3px;border-radius:6px}
.vcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:17px;padding:0 5px;border-radius:999px;background:var(--t-act);color:var(--t-fg);font:600 10.5px Roboto,system-ui,sans-serif}
.vcount:empty{display:none}
.vcount.e{background:var(--c-err);color:#fff}
.vcount.w{background:var(--c-warn);color:#1b1003}
#vDockTg .vi{transition:transform .2s var(--vease)}
.vdock.open #vDockTg .vi{transform:rotate(180deg)}
.vdock-b{display:none;height:min(260px,34vh);overflow:auto;padding:10px 14px 12px;border-top:1px solid var(--t-line);font-size:13px}
.vdock.open .vdock-b{display:block}
.vpanel[hidden]{display:none}
.vpanel>p{margin:0 0 8px}
.vpanel .actions{margin-bottom:8px;gap:10px}
.vfilter{display:flex;flex-wrap:wrap;gap:2px 16px;margin-bottom:6px}
.vfilter label.check{min-height:26px;color:var(--t-fg);font-size:12.5px;font-weight:400}
.vfilter input[type=checkbox]{width:15px;height:15px}
.vapp .diag{font-size:12.5px}
.vapp .diag ul{gap:4px}
.vapp .diag li{padding:4px 10px;background:var(--t-hov);color:var(--t-fg)}
.vapp .diag li b{color:var(--t-fg)}
.diag li.vclick{cursor:pointer}
.diag li.vclick:hover{background:var(--t-acc-s)}
.diag li.vclick:focus-visible{outline:2px solid var(--t-ring);outline-offset:-2px}
.diag li .vc{font:500 11.5px "Roboto Mono",ui-monospace,monospace;color:var(--t-mut);margin-right:6px}
.vgrade{display:inline-block;min-width:1.7em;margin-right:6px;padding:0 6px;border-radius:6px;text-align:center;font-weight:700;color:#fff;background:#15803d}
.vgrade.C{background:#e87d0d}.vgrade.D,.vgrade.F,.vgrade.x{background:#dc2626}
.vapp .vstat{font-size:12px;color:var(--t-mut)}
/* image to ZPL */
.vimgtool{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.vimgopts,.vimgout{display:flex;flex-direction:column;gap:10px;min-width:0}
.vimgdrop{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px;border:1.5px dashed var(--t-line2);border-radius:10px;text-align:center;color:var(--t-fg);cursor:pointer;font-size:12.5px}
.vimgdrop.over,.vimgdrop:focus-visible{border-color:var(--t-acc);outline:none;background:var(--t-acc-s)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 12px}
.fgrid label{font-size:12px;color:var(--t-mut)}
.fgrid input:not([type=checkbox]):not([type=range]),.fgrid select{width:100%;height:30px;min-height:0;padding:0 8px;border:1px solid var(--t-line2);border-radius:6px;background:var(--t-panel);color:var(--t-fg);font:500 12.5px Roboto,system-ui,sans-serif}
.fgrid input[type=range]{accent-color:var(--t-acc);min-height:0;padding:0;border:0;background:none}
.fgrid label.check{min-height:30px;color:var(--t-fg)}
.fgrid input[type=checkbox]{width:15px;height:15px}
.vimgprev{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:12px;border:1px solid var(--t-line);border-radius:10px;background:#fff;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 4px)}
.vimgprev img{max-width:100%;max-height:220px;image-rendering:pixelated}
.vimgprev .muted{color:#475569}

/* ---------- status bar ---------- */
.vstatus{flex:none;display:flex;align-items:center;gap:16px;height:26px;padding:0 10px 0 12px;border-top:1px solid var(--t-line);background:var(--t-bar);color:var(--t-mut);font:400 11.5px/1 Roboto,system-ui,sans-serif;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.vstatus>*{flex:none}
.vsb{display:inline-flex;align-items:center;gap:10px;height:20px;min-height:0;margin:0 -6px;padding:0 6px;border:0;border-radius:5px;background:none;color:inherit;font:inherit;cursor:pointer}
.vsb:hover{background:var(--t-hov);color:var(--t-fg)}
.vsb:focus-visible{outline:2px solid var(--t-ring);outline-offset:0}
.vsb>span{display:inline-flex;align-items:center;gap:4px}
.vsb .vi{width:13px;height:13px}
.vsb.has-e .vsb-e{color:var(--c-err)}
.vsb.has-w .vsb-w{color:#d97706}
:root[data-theme="dark"] .vsb.has-w .vsb-w{color:var(--c-warn)}
.vsb.has-e .vsb-e span,.vsb.has-w .vsb-w span{font-weight:600}
.vstatus .vstat{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;gap:6px}
.vstatus .vstat.busy::before{width:10px;height:10px;border-width:1.5px}
.vsb-r{margin-left:auto;color:var(--t-dim)}
.vsb-r a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.vsb-r a:hover{color:var(--t-acc)}

/* ---------- toast, tooltip, link popover ---------- */
.vtoast{position:absolute;right:16px;bottom:38px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.vt{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;max-width:min(400px,calc(100vw - 32px));padding:10px 14px 10px 12px;border-radius:10px;
  background:#121a2b;border:1px solid rgba(255,255,255,.1);color:#f1f5f9;box-shadow:0 14px 36px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);
  font:500 13px/1.4 Roboto,system-ui,sans-serif;animation:vt-in .26s var(--vease)}
.vt .vi{flex:none;width:18px;height:18px;margin-top:1px}
.vt.ok .vi{color:var(--c-ok)}.vt.info .vi{color:#7ab4ff}.vt.warn .vi{color:var(--c-warn)}
.vt small{display:block;margin-top:2px;color:#a9b5c8;font-weight:400;font-size:12px}
.vt.out{opacity:0;transform:translateY(6px) scale(.98);transition:opacity .2s,transform .2s}
@keyframes vt-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.vtip{position:fixed;left:0;top:0;z-index:100;max-width:280px;padding:5px 8px;border-radius:6px;background:#0f172a;color:#f1f5f9;font:500 11.5px/1.35 Roboto,system-ui,sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.28);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s;white-space:normal}
:root[data-theme="dark"] .vtip{background:#e6eaf2;color:#0f172a}
.vtip.on{opacity:1;transform:none}
.vpop{position:absolute;z-index:45;top:52px;right:12px;width:min(420px,calc(100% - 24px));padding:12px 14px 14px;border:1px solid var(--t-line2);border-radius:12px;background:var(--t-panel);color:var(--t-fg);box-shadow:var(--t-shadow);animation:vt-in .2s var(--vease)}
.vpop[hidden]{display:none}
.vpop-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.vpop-h b{font-weight:600;font-size:13.5px}
.vpop p{margin:0 0 8px;color:var(--t-mut);font-size:12.5px}
.vpop input{width:100%;height:32px;min-height:0;padding:0 9px;border:1px solid var(--t-acc);border-radius:7px;background:var(--t-bg);color:var(--t-fg);font:400 12px "Roboto Mono",ui-monospace,monospace}
.vpop .vpop-n{margin:8px 0 0;color:#b45309}
:root[data-theme="dark"] .vpop .vpop-n{color:var(--c-warn)}
.vpop-a{display:flex;justify-content:flex-end;margin-top:10px}

/* ---------- transform dialog ---------- */
.vdlg{max-width:min(540px,calc(100vw - 32px));width:100%;border:1px solid var(--t-line2);border-radius:14px;background:var(--t-panel);color:var(--t-fg);padding:18px 20px;box-shadow:var(--t-shadow);font-size:13.5px}
.vdlg::backdrop{background:rgba(7,11,20,.5);backdrop-filter:blur(2px)}
.vdlg[open]{animation:vt-in .22s var(--vease)}
.vdlg h2{font-size:1.05rem;margin:0 0 10px;color:var(--t-fg)}
.vdlg p{margin:2px 0 8px 30px;color:var(--t-mut)}
.vdlg .vtxopt{flex-direction:row;align-items:center;gap:10px;color:var(--t-fg);font-size:13.5px;min-height:34px}
.vdlg .vtxopt input{width:17px;height:17px;min-height:0;accent-color:var(--t-acc)}
.vdlg .vtxrow{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px 30px;color:var(--t-fg)}
.vdlg .vtxrow select{height:32px;min-height:0;padding:0 8px;border:1px solid var(--t-line2);border-radius:7px;background:var(--t-bg);color:var(--t-fg)}
.vdlg .vtxrow select:disabled{opacity:.5}
.vtxact{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.vdlg .btn{border-radius:8px}

/* ---------- full screen: the tool alone ---------- */
.vw:fullscreen{background:var(--t-bg)}
.vw:fullscreen .vapp,.vw.vfull .vapp{height:100vh;height:100dvh;border-bottom:0}
.vw.vfull{position:fixed;inset:0;z-index:90;background:var(--t-bg)}
html.vfull-on{overflow:hidden}

/* ---------- below the tool: SDK hint, FAQ, features, SDK ---------- */
.vbelow{max-width:1184px;margin:0 auto;padding:16px 16px 28px}
.vsdkhint{margin:0;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--em);border-radius:12px;background:var(--panel);color:var(--text);font-size:.93rem}
.vfaq{border-top:1px solid var(--line);padding:4px 0}
.vfaq>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px}
.vfaq>summary::-webkit-details-marker{display:none}
.vfaq>summary::before{content:"";width:7px;height:7px;border:solid var(--em);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto}
.vfaq[open]>summary::before{transform:rotate(45deg)}
.vfaq h3{margin:0;font-size:1rem;color:var(--ink)}
.vfaq p{margin:0 0 10px 15px;max-width:900px}
.vfaq code{font:400 .92em "Roboto Mono",ui-monospace,monospace;overflow-wrap:anywhere}
.vfeat{margin:6px 0 0;padding-left:1.2em;display:grid;gap:6px}
.vsdk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:10px}
.xcode{margin:0;padding:10px 12px;border-radius:10px;background:var(--code-bg);border:1px solid var(--code-line);color:#dbe2f0;font:400 12.5px/1.5 "Roboto Mono",ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}
kbd{font:500 .85em "Roboto Mono",ui-monospace,monospace;padding:0 4px;border:1px solid var(--line);border-radius:4px;background:var(--soft)}

/* ---------- narrower desktops: fewer labels ---------- */
@media (max-width:1360px){
  .vlt-density,.vlt-quality{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vbar{gap:6px}
}
@media (max-width:1180px){
  #vRotate,#vShare{width:30px;padding:0}
  #vRotate .vbl,#vShare .vbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vph-h{display:none}
  .vsb-m{display:none}
}
@media (max-width:1040px){
  .vdl .vb:not(.out){padding:0 7px 0 5px}
  .vdl .vb.out .vbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vdl .vb.out{width:30px;padding:0}
}

/* ---------- tablets and phones: stacked, editor or preview ---------- */
@media (max-width:900px){
  .vapp{min-height:560px}
  .vtop{flex-wrap:wrap;height:auto;padding:6px 8px;row-gap:4px}
  .vtitle{flex:1 1 0;margin:0}
  .vtitle h1{font-size:13px}
  .vmob{display:inline-flex;flex:none;gap:2px;padding:2px;border:1px solid var(--t-line2);border-radius:8px;background:var(--t-bg)}
  .vmob .vb{height:26px;padding:0 10px}
  .vmob .vb[aria-pressed=true]{background:var(--t-panel);color:var(--t-fg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
  :root[data-theme="dark"] .vmob .vb[aria-pressed=true]{background:rgba(255,255,255,.12)}
  .vtool{flex:1 1 100%;overflow-x:auto;scrollbar-width:none;margin:0 -8px;padding:0 8px}
  .vtool::-webkit-scrollbar{display:none}
  .vtgl{margin-left:0}
  .vb{height:34px;min-width:34px}
  .vb.ico,#vRotate,#vShare{width:34px}
  .vbody{grid-template-columns:minmax(0,1fr)}
  .vsplit{display:none}
  .vapp[data-view=preview] .ved-pane,.vapp[data-view=editor] .vpv-pane{display:none}
  .vhelp{height:96px}
  .vdock-b{height:min(300px,34vh)}
  .vsb-r,.vsb-i{display:none}
  .vimgtool,.vsdk{grid-template-columns:minmax(0,1fr)}
  .vtoast{left:12px;right:12px;align-items:stretch}
  .vt{max-width:none}
}
@media (max-width:520px){
  .vsample select{max-width:118px}
  .vdl-t{display:none}
  .vbelow{padding:12px 12px 24px}
}

/* ---------- reduced motion: no turning, no sliding ---------- */
@media (prefers-reduced-motion:reduce){
  .vimgwrap.spin{transition:none}
  .vt,.vpop,.vdlg[open],.vb .vi-ok{animation:none}
  .vprog::before{animation:none;width:100%;opacity:.6}
  #vDockTg .vi,.vtip{transition:none}
}