*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Segoe UI,Arial,sans-serif;font-size:13px;color:#1f2937;background:#e5e7eb}
.top{position:fixed;inset:0 0 auto 0;height:46px;background:#14213d;color:#fff;display:flex;align-items:center;gap:14px;padding:0 14px;z-index:20}
.top h1{font-size:15px;margin:0;font-weight:600;color:#f5d27a}
.top .sp{flex:1}
.top a{color:#cbd5e1;text-decoration:none;font-size:12px}
.top .zoomw{display:flex;align-items:center;gap:6px;font-size:12px}
.top input[type=range]{width:110px}
#status{font-size:12px;color:#a7f3d0}
.btn{background:#14213d;color:#fff;border:0;border-radius:6px;padding:7px 12px;cursor:pointer;font-size:13px}
.btn:hover{background:#1f3160}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:#fff;color:#14213d;border:1px solid #c7ccd6}
.btn.small{padding:4px 8px;font-size:12px}
.btn.print{background:#c9a227;color:#14213d;font-weight:700}
.wrap{display:grid;grid-template-columns:340px 1fr;margin-top:46px;height:calc(100vh - 46px)}
#side{background:#fff;overflow:auto;padding:8px;border-right:1px solid #d1d5db}
details{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px;background:#fafafa}
summary{cursor:pointer;padding:8px 10px;font-weight:600;background:#f1f5f9;border-radius:8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:#475569}
label.f input[type=checkbox]{width:18px;height:18px}
.grid input[type=number],.grid input[type=text],.grid select{width:100%;padding:5px 6px;border:1px solid #cbd5e1;border-radius:5px;font-size:13px;background:#fff}
.grid input[type=color]{width:100%;height:30px;padding:0;border:1px solid #cbd5e1;border-radius:5px;background:#fff}
.grid input[type=range]{width:100%}
.note{font-size:12px;background:#fff7dd;border:1px solid #f0dc9b;border-radius:8px;padding:8px;margin:8px 0}
.main{overflow:auto;padding:12px}
.panel{background:#fff;border:1px solid #d1d5db;border-radius:10px;padding:10px;margin-bottom:12px}
.panel h2{font-size:14px;margin:0 0 8px}
.row2{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.row2 input[type=text]{flex:1;min-width:200px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:6px}
#results{max-height:220px;overflow:auto}
.res{padding:6px 8px;border-bottom:1px solid #eef0f3;cursor:pointer;display:flex;flex-direction:column}
.res:hover{background:#f1f5f9}
.res span{font-size:11.5px;color:#64748b}
.empty{padding:8px;color:#64748b;font-size:12px}.err{color:#b91c1c}
.resbar{padding:4px 0}
table{width:100%;border-collapse:collapse}
th{font-size:11px;text-align:left;color:#64748b;padding:4px}
td{padding:2px}
td input{width:100%;padding:4px 5px;border:1px solid #d6dbe3;border-radius:4px;font-size:12.5px}
td input.s{min-width:90px}td input.xs{width:62px}
.x{border:0;background:#fee2e2;color:#b91c1c;border-radius:4px;cursor:pointer;width:24px;height:24px}
textarea{width:100%;height:70px;border:1px solid #cbd5e1;border-radius:6px;padding:6px;font-family:monospace;font-size:12px}
.pages{transform-origin:top left}
.page{width:210mm;height:296.5mm;background:#fff;margin:0 0 12px 0;display:grid;box-sizing:border-box;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25);align-content:start}
.page.roll{background:#fff;margin:0 0 6px 0;display:grid;box-sizing:border-box;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25);align-content:start}
.tag{box-sizing:border-box;position:relative;overflow:hidden;background:#fff}
.inner{position:absolute;display:flex;overflow:hidden}
.design{position:relative;overflow:hidden;min-height:0}
.design img{width:100%;height:100%;display:block}
.info{display:flex;flex-direction:column;justify-content:space-evenly;padding:.8mm 1.2mm;overflow:hidden;min-height:0;box-sizing:border-box}
.info .row{display:flex;justify-content:space-between;align-items:baseline;gap:2mm}
.info .bc{margin:0 auto;max-width:100%}
.deco{width:100%;height:100%;display:flex;flex-direction:column;text-align:center;font-family:Georgia,serif}
.deco-band{padding:1.2mm 1mm;font-weight:700;letter-spacing:.12em;white-space:nowrap;overflow:hidden}
.deco-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5mm;min-height:0}
.deco-logo{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.deco-tag{font-family:Arial,sans-serif}
.deco-foot{padding:.8mm 1mm;font-family:Arial,sans-serif;line-height:1.25;font-weight:600}
.login{max-width:340px;margin:90px auto;background:#fff;padding:22px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.15)}
.login h2{margin:0 0 4px;color:#14213d}.login p{margin:0 0 14px;color:#64748b;font-size:12px}
.login input{width:100%;padding:9px;margin-bottom:10px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px}
.login .btn{width:100%;padding:10px}.login .e{color:#b91c1c;margin-bottom:8px;font-size:12px}
@page{size:A4 portrait;margin:0}
@media print{
  html,body{height:auto;background:#fff}
  .top,#side,.panel{display:none!important}
  .wrap{display:block;margin:0;height:auto}
  .main{overflow:visible;padding:0}
  .pages{zoom:1!important;transform:none!important}
  .page,.page.roll{margin:0!important;box-shadow:none!important;break-after:page;page-break-after:always}
  .page:last-child,.page.roll:last-child{break-after:auto;page-break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ---- all-in-one additions ---- */
.top select{padding:4px 6px;border-radius:6px;border:0;font-size:13px;font-weight:600}
.pl .res{flex-direction:row;justify-content:space-between;gap:10px}
.tbtn{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.st{font-size:11px;background:#e2e8f0;border-radius:10px;padding:1px 8px;font-style:normal}
.panel details>summary{cursor:pointer;font-weight:600}
.panel label.inl{display:inline-flex;gap:4px;align-items:center}
/* 65 / 16 / 24 / 48 / 84 / POS Roll label photo design */
.rfh{display:flex;align-items:center;gap:1mm;padding:.35mm 1.3mm .3mm;flex:0 0 auto}
.rflogo{display:block;width:auto;flex:0 0 auto}
.rfv{width:.2mm;height:3.6mm;flex:0 0 auto}
.rft{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;letter-spacing:.03em;line-height:1.1}
.rfb{flex:1 1 0;min-height:0;display:flex;overflow:hidden}
.rfb.col{flex-direction:column;justify-content:space-between;padding:.4mm 1.3mm .5mm}
.rfl{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:.35mm .8mm .35mm 1.3mm;overflow:hidden}
.rfr{flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:.5mm 1mm .5mm .8mm;overflow:hidden;box-sizing:border-box}
.rfl>*,.rfr>*,.rfb.col>*{flex:0 0 auto}
/* 12 tag photo design */
.i2{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.i2c{flex:1 1 0;min-height:0;display:flex;padding:.9mm 1.4mm 0}
.i2l{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding-right:.8mm;overflow:hidden}
.i2d{flex:0 0 1.8mm;position:relative}
.i2d::before{content:"";position:absolute;left:50%;top:.5mm;bottom:.5mm;width:.25mm;background:var(--acc);transform:translateX(-50%)}
.i2d::after{content:"";position:absolute;left:50%;top:50%;width:1.3mm;height:1.3mm;background:var(--acc);transform:translate(-50%,-50%) rotate(45deg)}
.i2r{flex:0 0 auto;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-left:.8mm;overflow:hidden;box-sizing:border-box}
.i2l>*,.i2r>*{flex:0 0 auto}
.i2t{display:flex;align-items:center;justify-content:center;gap:.8mm;line-height:1.05}
.i2t .tt{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;line-height:1.05}
.lf{display:inline-flex;flex:0 0 auto}
.lf svg{width:2.4mm;height:1.2mm;display:block}
.lf.r{transform:scaleX(-1)}
.i2s{display:flex;align-items:center;justify-content:center;gap:.8mm}
.i2w{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:1.4mm;padding:.3mm 3mm .7mm;white-space:nowrap}
.i2w .ln{flex:1;height:.2mm;min-width:2mm}
/* ---- 12 tag premium update ---- */
.nf{clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,0 calc(100% - var(--n)),0 var(--n))}
.lf svg{width:3.4mm;height:2.3mm;display:block}
.sx{position:relative;display:inline-block}
.sx::after{content:"";position:absolute;left:-3%;right:-3%;top:50%;height:.3mm;background:var(--st);transform:rotate(-11deg);border-radius:1mm}
.i2{position:relative}
.mnd{position:absolute;width:var(--ms);height:var(--ms);opacity:.55;pointer-events:none}
.mnd svg{width:100%;height:100%;display:block}
.mnd.tl{left:calc(var(--ms) / -2);top:calc(var(--ms) / -2)}
.mnd.tr{right:calc(var(--ms) / -2);top:calc(var(--ms) / -2)}
.mnd.bl{left:calc(var(--ms) / -2);bottom:calc(var(--ms) / -2)}
.mnd.br{right:calc(var(--ms) / -2);bottom:calc(var(--ms) / -2)}
.i2w{flex-direction:column;gap:.3mm;padding:.2mm 4.2mm .6mm}
.i2wl{display:flex;align-items:center;justify-content:center;gap:1.2mm;width:100%}
.i2wl .ln{flex:1;height:.2mm;min-width:2mm}
.lot{display:inline-flex;width:6mm;height:3.4mm}
.lot svg{width:100%;height:100%;display:block}
/* ---- 12 tag Full-Width Barcode layout ---- */
.i2.fwlayout{justify-content:space-between;padding:.6mm 0 .4mm}
.i2.fwlayout .i2c{flex:0 1 auto;padding:.3mm 1.4mm 0;align-items:center}
.i2.fwlayout .i2l{justify-content:center;gap:.45mm;padding-right:.8mm}
.i2.fwlayout .i2r{justify-content:center;gap:.45mm;padding-left:.8mm}
.i2.fwlayout .i2d{align-self:stretch}
.i2.fwlayout .i2mrp{display:flex;flex-direction:column;align-items:center;gap:.1mm}
.i2bc{flex:0 0 auto;padding:0 1.4mm;width:100%;box-sizing:border-box;z-index:1}
.i2.fwlayout .i2w{padding:.15mm 3.6mm .35mm;gap:.2mm}
.i2.fwlayout .fw{padding:0 1.4mm}