/* Creativewity BQR Frontend v4.0 */
.cbqrv4{
  --y:#FFC000;--yd:#E6AC00;--yp:rgba(255,192,0,.08);
  --n:#0F1123;--n2:#161929;--n3:#1E2235;--n4:#252A42;--n5:#2E3452;
  --acc:#6C63FF;--acc2:#5850e8;
  --b:rgba(255,255,255,.08);--b2:rgba(255,255,255,.13);
  --t:#F0F0F8;--t2:#A8ADCC;--t3:#5E6380;
  --g:#22D3A5;--r:#FF5565;--o:#FF9A3C;
  --rad:10px;
  font-family:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;
  color:var(--t);background:var(--n);
  border-radius:16px;overflow:hidden;
  border:1px solid var(--b);
  box-shadow:0 16px 64px rgba(0,0,0,.5);
  max-width:1160px;margin:0 auto;
}

/* Topbar */
.cv4-topbar{background:var(--n2);border-bottom:1px solid var(--b);padding:0 20px;height:50px;display:flex;align-items:center;gap:10px}
.cv4-brand{display:flex;align-items:center;gap:9px;margin-right:14px}
.cv4-hex{width:26px;height:26px;background:var(--y);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#111;flex-shrink:0}
.cv4-bname{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.3px}
.cv4-bname span{color:var(--y)}
.cv4-modes{display:flex;gap:2px}
.cv4-mode{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:18px;font-size:11px;font-weight:600;color:var(--t2);background:transparent;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:all .2s}
.cv4-mode.active{background:var(--n4);border-color:var(--b2);color:var(--t)}
.cv4-mode:hover:not(.active){color:var(--t)}

/* Body layout */
.cv4-body{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 100px);min-height:600px;max-height:900px}

/* Left scrollable */
.cv4-left{overflow-y:auto;border-right:1px solid var(--b);scrollbar-width:thin;scrollbar-color:var(--n4) transparent}
.cv4-left::-webkit-scrollbar{width:3px}
.cv4-left::-webkit-scrollbar-thumb{background:var(--n4)}

/* Step cards */
.cv4-step{border-bottom:1px solid var(--b)}
.cv4-step-hd{padding:12px 16px;display:flex;align-items:center;gap:9px;background:var(--n3)}
.cv4-snum{width:20px;height:20px;background:var(--y);color:#111;font-size:10px;font-weight:800;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cv4-stitle{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t);flex:1}
.cv4-sbadge{background:var(--y);color:#111;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}
.cv4-step-body{padding:14px 16px}

/* Tabs */
.cv4-tabs{display:flex;gap:2px;background:var(--n);border:1px solid var(--b);border-radius:8px;padding:3px;margin-bottom:12px}
.cv4-tab{flex:1;padding:5px 8px;background:transparent;border:none;border-radius:6px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:all .18s}
.cv4-tab.active{background:var(--n4);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* Paper grid */
.cv4-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cv4-pcard{border:1.5px solid var(--b);border-radius:var(--rad);padding:9px;cursor:pointer;background:var(--n3);transition:all .18s;position:relative}
.cv4-pcard:hover{border-color:rgba(255,192,0,.4);background:var(--n4)}
.cv4-pcard.active{border-color:var(--y);background:var(--yp)}
.cv4-pcard.active::after{content:'✓';position:absolute;top:6px;right:7px;font-size:9px;font-weight:800;color:var(--y)}
.cv4-pvis{background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:4px;padding:4px 3px;margin-bottom:6px;display:flex;flex-direction:column;gap:2px}
.cv4-pr{display:flex;gap:2px}
.cv4-pc{flex:1;height:5px;background:rgba(108,99,255,.4);border-radius:1px}
.cv4-pname{font-size:11px;font-weight:700;color:var(--t)}
.cv4-psub{font-size:10px;color:var(--t3)}

/* Barcode type grid */
.cv4-bcat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin:12px 0 7px}
.cv4-bgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:4px}
.cv4-bitem{border:1.5px solid var(--b);border-radius:var(--rad);padding:8px 10px;cursor:pointer;background:var(--n3);transition:all .18s}
.cv4-bitem:hover{border-color:var(--b2);background:var(--n4)}
.cv4-bitem.active{border-color:var(--y);background:var(--yp)}
.cv4-bname{font-size:12px;font-weight:700;color:var(--t);margin-bottom:2px}
.cv4-bdesc{font-size:10px;color:var(--t3)}
.cv4-bitem.active .cv4-bname{color:var(--y)}

/* EAN-13 Calculator */
.cv4-ean{background:var(--n);border:1px solid rgba(108,99,255,.3);border-radius:var(--rad);padding:12px;margin-top:10px}
.cv4-ean-hint{font-size:11px;font-weight:600;color:var(--acc);margin-bottom:9px;display:flex;align-items:center;gap:5px}
.cv4-ean-hint::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--acc);flex-shrink:0}
.cv4-ean-digs{display:flex;gap:2px;margin-bottom:8px;align-items:center}
.cv4-ed{flex:1;height:26px;min-width:0;background:var(--n4);border:1px solid var(--b);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;font-family:'JetBrains Mono','Courier New',monospace;color:var(--t3);transition:all .15s}
.cv4-ed.filled{background:rgba(108,99,255,.15);border-color:rgba(108,99,255,.4);color:var(--t)}
.cv4-ed.chk{background:var(--y);border-color:var(--y);color:#111;font-weight:800}
.cv4-ed.chk-e{background:var(--n4);border-color:rgba(255,192,0,.3);color:rgba(255,192,0,.35)}
.cv4-esep{color:var(--t3);font-size:12px;flex-shrink:0;padding:0 1px}
.cv4-ean-row{display:flex;gap:6px;margin-bottom:7px;align-items:center}
.cv4-ean-inp{flex:1;padding:8px 11px;background:var(--n3);border:1px solid var(--b2);border-radius:7px;color:var(--t);font-size:13px;font-family:'JetBrains Mono','Courier New',monospace;font-weight:500;letter-spacing:.07em;outline:none;transition:border-color .2s}
.cv4-ean-inp:focus{border-color:var(--y)}
.cv4-ean-chk{min-width:36px;height:36px;background:var(--y);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;font-family:'JetBrains Mono','Courier New',monospace;color:#111;flex-shrink:0;transition:all .2s}
.cv4-ean-chk.empty{background:var(--n4);color:var(--t3);font-size:11px}
.cv4-ean-add{padding:8px 12px;background:var(--acc);color:#fff;border:none;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s}
.cv4-ean-add:hover{background:var(--acc2)}
.cv4-ean-status{padding:6px 9px;border-radius:6px;font-size:11px;font-weight:600;display:none;align-items:center;gap:5px}
.cv4-ean-status.ok{display:flex;background:rgba(34,211,165,.1);border:1px solid rgba(34,211,165,.25);color:var(--g)}
.cv4-ean-status.warn{display:flex;background:rgba(255,154,60,.1);border:1px solid rgba(255,154,60,.25);color:var(--o)}
.cv4-ean-status.err{display:flex;background:rgba(255,85,101,.1);border:1px solid rgba(255,85,101,.25);color:var(--r)}

/* Design options */
.cv4-design{margin-top:14px;border-top:1px solid var(--b);padding-top:12px}
.cv4-tog-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--b)}
.cv4-tog-row:last-of-type{border-bottom:none}
.cv4-tog-lbl{font-size:12px;font-weight:500;color:var(--t)}
.cv4-tog{position:relative;width:38px;height:21px;flex-shrink:0}
.cv4-tog input{opacity:0;width:0;height:0;position:absolute}
.cv4-tog-track{position:absolute;inset:0;background:var(--n4);border-radius:11px;cursor:pointer;transition:background .2s;border:1px solid var(--b2)}
.cv4-tog-thumb{position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.cv4-tog input:checked + .cv4-tog-track{background:var(--y);border-color:var(--y)}
.cv4-tog input:checked + .cv4-tog-track + .cv4-tog-thumb{left:20px}
.cv4-sub-row{display:flex;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid var(--b)}
.cv4-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:5px;display:block}
.cv4-inp{width:100%;padding:7px 10px;background:var(--n3);border:1px solid var(--b2);border-radius:7px;color:var(--t);font-size:12px;font-family:inherit;outline:none;transition:border-color .2s}
.cv4-inp:focus{border-color:var(--y)}
.cv4-inp option{background:var(--n3)}
.cv4-mono{font-family:'JetBrains Mono','Courier New',monospace!important}
.cv4-swatches{display:flex;gap:6px;flex-wrap:wrap}
.cv4-sw{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0}
.cv4-sw.active,.cv4-sw:hover{border-color:rgba(255,255,255,.6);transform:scale(1.15)}

/* Data section */
.cv4-tmpl-btn{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:8px;background:var(--n3);border:1px solid var(--b2);border-radius:7px;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;font-family:inherit;transition:all .2s;margin-bottom:9px}
.cv4-tmpl-btn:hover{border-color:rgba(255,192,0,.4);color:var(--y)}
.cv4-upload{border:1.5px dashed var(--b2);border-radius:9px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:10px;background:var(--n3)}
.cv4-upload:hover,.cv4-upload.drag{border-color:var(--y);background:var(--yp)}
.cv4-up-icon{font-size:20px;margin-bottom:4px}
.cv4-up-text{font-size:11px;color:var(--t2)}
.cv4-qadd{display:grid;grid-template-columns:1fr 1fr 70px 30px;gap:5px;margin-bottom:8px;align-items:center}
.cv4-qadd-btn{width:30px;height:30px;background:var(--y);border:none;border-radius:6px;color:#111;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.cv4-qadd-btn:hover{opacity:.85}
.cv4-dtable{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:8px}
.cv4-dtable th{padding:5px 7px;text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);border-bottom:1px solid var(--b)}
.cv4-dtable td{padding:6px 7px;border-bottom:1px solid var(--b);color:var(--t);vertical-align:middle}
.cv4-dtable tbody tr:hover td{background:rgba(255,255,255,.02)}
.cv4-td-inp{background:transparent;border:none;color:var(--t);font-size:11px;font-family:'JetBrains Mono','Courier New',monospace;outline:none;width:100%;padding:1px 0}
.cv4-td-inp:focus{color:var(--y)}
.cv4-del{width:20px;height:20px;background:rgba(255,85,101,.12);border:none;border-radius:4px;color:var(--r);font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.cv4-del:hover{background:rgba(255,85,101,.25)}
.cv4-actions{display:flex;gap:7px;padding-top:10px;border-top:1px solid var(--b)}
.cv4-print-btn{flex:1;padding:10px;background:var(--acc);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;transition:background .15s}
.cv4-print-btn:hover{background:var(--acc2)}
.cv4-bprint-btn{padding:10px 14px;background:transparent;border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.cv4-bprint-btn:hover{border-color:var(--y);color:var(--y)}
.cv4-clear-btn{background:none;border:none;color:var(--y);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;width:100%;text-align:center;margin-top:8px;padding:4px;transition:opacity .15s}
.cv4-clear-btn:hover{opacity:.7}

/* Right preview */
.cv4-right{display:flex;flex-direction:column;overflow:hidden;background:var(--n)}
.cv4-prev-hd{padding:12px 20px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;background:var(--n2);flex-shrink:0}
.cv4-prev-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--y);margin-bottom:2px}
.cv4-prev-sub{font-size:11px;color:var(--t3)}
.cv4-refresh-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:transparent;border:1px solid var(--b2);border-radius:6px;color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.cv4-refresh-btn:hover{border-color:var(--y);color:var(--y)}
.cv4-expdf-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;background:var(--acc);border:none;border-radius:6px;color:#fff;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.cv4-expdf-btn:hover{background:var(--acc2)}
.cv4-prev-area{flex:1;overflow-y:auto;padding:20px;display:flex;justify-content:center;align-items:flex-start;scrollbar-width:thin;scrollbar-color:var(--n4) transparent}
.cv4-sheet{background:#fff;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);width:100%;max-width:640px;min-height:440px;padding:16px;display:grid;gap:6px;align-content:start;position:relative}
.cv4-sheet.c2{grid-template-columns:repeat(2,1fr)}.cv4-sheet.c3{grid-template-columns:repeat(3,1fr)}.cv4-sheet.c4{grid-template-columns:repeat(4,1fr)}.cv4-sheet.c5{grid-template-columns:repeat(5,1fr)}
.cv4-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.cv4-label{background:#fff;border:1px solid #e8e8e8;border-radius:3px;padding:7px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;overflow:hidden}
.cv4-label .lt{font-size:7px;font-weight:700;color:#222;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif}
.cv4-label .lp{font-size:7px;font-weight:600;color:#555;font-family:'Plus Jakarta Sans',sans-serif}
.cv4-label .ln{font-size:6px;color:#666;font-family:'JetBrains Mono','Courier New',monospace;letter-spacing:.04em}
.cv4-label .le{font-size:7px;color:#e55;text-align:center}
.cv4-wmark{text-align:center;padding:10px;font-size:10px;color:#333;border-top:1px solid var(--b);background:var(--n2)}
.cv4-wmark strong{color:var(--y)}

/* Print */
@media print{
  .cv4-topbar,.cv4-left,.cv4-prev-hd,.cv4-wmark{display:none!important}
  .cv4-body{display:block}
  .cv4-right{display:block;height:auto}
  .cv4-prev-area{padding:0;overflow:visible}
  .cv4-sheet{box-shadow:none;border-radius:0;max-width:100%;min-height:0}
}
@media(max-width:800px){
  .cv4-body{grid-template-columns:1fr;height:auto;max-height:none}
  .cv4-right{height:480px}
  .cv4-modes{display:none}
}