/* RobinX ZPL showcase: illustration only; the editor lives at zpl.robinx.nl. */
.zpl-feature-art { min-width:0; width:100%; border:1px solid #426775; border-radius:11px; background:#0c222c; box-shadow:0 22px 45px #0003; overflow:hidden; transform:rotate(2deg); }
.zpl-art-top,.zpl-art-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; color:#99bcc2; font:500 .48rem var(--mono); letter-spacing:.06em; }
.zpl-art-top { background:#16323f; border-bottom:1px solid #385461; }
.zpl-art-top span:last-child { color:var(--rx-mint); }
.zpl-art-flow { display:grid; grid-template-columns:minmax(0,.9fr) 20px minmax(0,1.1fr); gap:10px; align-items:center; min-height:270px; padding:25px 14px; background:linear-gradient(#92e1de08 1px,transparent 1px),linear-gradient(90deg,#92e1de08 1px,transparent 1px); background-size:20px 20px; }
.zpl-source-card { min-width:0; padding:13px 10px; border:1px solid #34525e; border-radius:7px; background:#0a1a24; }
.zpl-source-card > span,.zpl-label-stage > span { display:block; margin-bottom:16px; color:#96b9bf; font:500 .43rem var(--mono); letter-spacing:.06em; white-space:nowrap; }
.zpl-source-card code { display:block; color:#accbd2; font:.52rem/1.95 var(--mono); white-space:nowrap; }
.zpl-source-card code b { color:var(--rx-mint); font-weight:500; }
.zpl-flow-arrow { color:var(--rx-mint); font:400 1.2rem var(--mono); text-align:center; }
.zpl-label-stage { min-width:0; }
.zpl-label-stage > span { text-align:center; color:var(--rx-mint); }
.zpl-label-sheet { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:12px; min-width:0; width:100%; padding:18px 14px; border:1px solid #e4eee6; border-radius:3px; background:#f2f5ec; color:#17333a; box-shadow:7px 9px 0 #08192380; }
.zpl-label-sheet small { font:500 .4rem/1.4 var(--mono); letter-spacing:.02em; }
.zpl-label-rule { width:100%; height:1px; background:#17333a40; }
.zpl-selection { position:relative; display:block; margin:1px -4px; padding:7px 4px; border:1px solid #267d78; background:#80ead729; font:700 clamp(.74rem,1.1vw,1rem)/1.2 var(--rx-display); letter-spacing:-.045em; }
.zpl-selection > span { position:absolute; width:5px; height:5px; border:1px solid #267d78; background:#d8fff4; }
.zpl-selection > span:nth-child(1) { top:-3px; left:-3px; }.zpl-selection > span:nth-child(2) { top:-3px; right:-3px; }.zpl-selection > span:nth-child(3) { bottom:-3px; left:-3px; }.zpl-selection > span:nth-child(4) { bottom:-3px; right:-3px; }
.zpl-label-sheet .rx-barcode { height:35px; }
.zpl-art-bottom { border-top:1px solid #385461; font-size:.42rem; }
.zpl-art-bottom span:first-child { display:flex; align-items:center; gap:6px; color:#a6eade; }
.zpl-art-bottom i { width:5px; height:5px; border-radius:50%; background:var(--rx-mint); }
.rx-window-label-preview { display:grid; place-items:center; height:173px; margin:19px 0 14px; background:linear-gradient(#94ceda0e 1px,transparent 1px),linear-gradient(90deg,#94ceda0e 1px,transparent 1px); background-size:21px 21px; }
.rx-window-label-preview .zpl-label-sheet { width:165px; padding:10px 13px; gap:8px; transform:rotate(3deg); }
.rx-window-label-preview .zpl-label-sheet small { font-size:.35rem; }
.rx-window-label-preview .zpl-selection { font-size:.8rem; }
.rx-window-label-preview .rx-barcode { height:24px; }
.rx-tool-panel-display { grid-column:span 7; background:#1d2531; color:#f0f7f4; }
.rx-tool-panel-display .rx-panel-arrow { color:var(--rx-mint); }
.rx-panel-display-art { width:100%; max-width:440px; height:175px; min-height:175px; margin:auto 0 25px; padding:30px 25px 0; border-color:#43616d; }
.zpl-editor-card-art { justify-content:center; gap:clamp(12px,3vw,35px); background:linear-gradient(#92e1de08 1px,transparent 1px),linear-gradient(90deg,#92e1de08 1px,transparent 1px),#0b212a; background-size:20px 20px; border-color:#43747b; }
.zpl-editor-card-art > code { flex-shrink:0; color:#9af4e8; font:.56rem/1.8 var(--mono); }
.zpl-editor-card-art .zpl-label-sheet { width:158px; flex-shrink:0; padding:10px 12px; gap:7px; transform:rotate(3deg); }
.zpl-editor-card-art .zpl-label-sheet small { font-size:.33rem; }
.zpl-editor-card-art .zpl-label-sheet .rx-barcode { height:22px; }
.zpl-editor-card-art .zpl-selection { font-size:.75rem; padding-block:5px; }
@media(min-width:701px) and (max-width:1100px) { .rx-featured .featured-content { grid-template-columns:minmax(0,1fr) minmax(300px,1fr); gap:22px; }.zpl-art-flow { padding-inline:10px; gap:7px; }.zpl-source-card { padding-inline:7px; }.zpl-source-card code { font-size:.46rem; }.zpl-label-sheet { padding-inline:10px; } }
@media(max-width:700px) { .zpl-feature-art { transform:none; }.zpl-art-top,.zpl-art-bottom { padding:12px 10px; font-size:.42rem; }.zpl-art-flow { min-height:245px; padding:20px 10px; gap:8px; }.zpl-source-card { padding:12px 7px; }.zpl-source-card code { font-size:clamp(.43rem,1.9vw,.6rem); }.zpl-source-card > span,.zpl-label-stage > span { font-size:.38rem; }.zpl-label-sheet { padding:14px 10px; gap:10px; }.zpl-label-sheet small { font-size:.35rem; }.zpl-selection { font-size:.8rem; }.rx-panel-display-art { margin-top:30px; }.zpl-editor-card-art { gap:12px; padding-inline:12px; }.zpl-editor-card-art .zpl-label-sheet { width:140px; }.zpl-art-bottom { font-size:.36rem; } }
@media(max-width:360px) { .zpl-art-flow { gap:5px; padding-inline:7px; grid-template-columns:minmax(0,.9fr) 14px minmax(0,1.1fr); }.zpl-source-card code { font-size:.4rem; white-space:normal; overflow-wrap:anywhere; }.zpl-label-sheet { padding-inline:8px; }.zpl-selection { font-size:.7rem; }.zpl-art-top,.zpl-art-bottom { font-size:.32rem; }.zpl-editor-card-art > code { font-size:.47rem; }.zpl-editor-card-art { gap:6px; }.zpl-editor-card-art .zpl-label-sheet { width:125px; } }