/* LabelHub Pro v34.0 (rewrite) */
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#f3f6f8;color:#0b1220}

:root{--bg:#f3f6f8;--card:#fff;--text:#0b1220;--muted:#5b677a;--line:rgba(10,20,30,.12);--shadow:0 10px 24px rgba(10,20,30,.10);--r:18px;--gap:12px;--pad:12px;--primary:#1f6feb;--danger:#d64545;--in:rgba(10,20,30,.06)}
[data-theme="dark"]{--bg:#0b1220;--card:#0f1a2a;--text:#e8eefb;--muted:#9db0cc;--line:rgba(240,250,255,.14);--shadow:0 10px 24px rgba(0,0,0,.35);--in:rgba(240,250,255,.06)}
body{background:var(--bg);color:var(--text)}
#toast{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:9999;display:none;background:rgba(10,20,30,.92);color:#fff;padding:10px 12px;border-radius:999px;box-shadow:var(--shadow);font-weight:800}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:12px}
.brand{display:flex;align-items:baseline;gap:10px}
.logo{font-size:24px;font-weight:900}
.accent{color:var(--primary)}
.ver{font-weight:800;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:10px}
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--shadow)}
.seg-btn{border:0;background:transparent;padding:8px 12px;border-radius:999px;font-weight:900;cursor:pointer;color:var(--muted)}
.seg-btn.active{background:var(--primary);color:#fff}
.shell{height:calc(100vh - 64px);padding:var(--pad);display:grid;gap:var(--gap);overflow:auto;grid-template-columns:1fr;grid-template-rows:auto auto auto}
@media(min-width:980px){
  body{overflow:hidden}
  /* Desktop: keep the same 3-column layout, but make Preview + Actions wider/consistent.
     (Measurements are an “idea”, not required to be exact.) */
  .shell{
    overflow:hidden;
    grid-template-columns: minmax(360px, 1.35fr) minmax(300px, 0.8fr) minmax(280px, 0.8fr);
    grid-template-rows:1fr;
    align-items:stretch
  }
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-height:0;display:flex;flex-direction:column;overflow:hidden}
.card-h{padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.card-h h2{margin:0;font-size:14px;letter-spacing:.6px;text-transform:uppercase}
.hint{margin-top:6px;font-size:12px;color:var(--muted);font-weight:700}
.fields,.actions{overflow:auto}.preview{overflow:hidden}
.preview-h{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Ensure Preview header text never clips */
.preview-h{flex-wrap:wrap}
.preview-h h2{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-tools{flex:0 0 auto;min-width:max-content}

.preview-tools{display:flex;align-items:center;gap:10px}
.copies{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:800;font-size:12px}
.copies input{width:70px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--in);color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}
@media(min-width:520px){.grid2{grid-template-columns:1fr 1fr}}
.fg{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;font-weight:900;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
input,select{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--in);color:var(--text);outline:none;font-size:14px;font-weight:650}
input:focus,select:focus{border-color:rgba(31,111,235,.6);box-shadow:0 0 0 3px rgba(31,111,235,.18)}
.row{display:flex;gap:8px;align-items:center}
.icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;box-shadow:0 8px 18px rgba(10,20,30,.08);font-size:18px}
.btn,.ghost,.primary{border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);padding:12px;font-weight:900;cursor:pointer;box-shadow:0 8px 18px rgba(10,20,30,.08)}
.ghost{background:transparent;box-shadow:none}
.primary{border:0;background:var(--primary);color:#fff}
.danger{background:var(--danger);border:0;color:#fff}
.actions-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}
.divider{height:1px;background:var(--line);margin:0 12px}
.details{margin:12px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(10,20,30,.03)}
.details summary{cursor:pointer;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px}
.stack{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.preview-stage{flex:1;min-height:0;padding:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,rgba(10,20,30,.05),rgba(10,20,30,.02))}
.scale{transform-origin:center}
.label{width:4in;height:2in;background:#fff;color:#111;border-radius:14px;border:2px solid #111;display:flex;gap:10px;padding:10px}
.label.size-3x15{width:3in;height:1.5in}
.label-left{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.title{font-size:22px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:14px;font-weight:800;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.extra{font-size:12px;font-weight:750;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{margin-top:auto;font-size:12px;font-weight:900;color:#111}
.label-right{width:34%;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:6px}
.qr{width:96px;height:96px;border:1px solid #111;border-radius:10px;display:grid;place-items:center;overflow:hidden}
.gtin{font-size:10px;font-weight:900;text-align:right;word-break:break-all}
.preview-stage.actual{overflow:auto;place-items:start center}
.preview-stage.actual .scale{transform:none!important}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:9998}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{position:relative;z-index:1;width:min(720px,calc(100vw - 24px));margin:64px auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.scan-card{width:min(760px,calc(100vw - 24px))}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:14px;letter-spacing:.6px;text-transform:uppercase}
.modal-actions{padding:12px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line)}
.scan-box{padding:12px}
#reader{width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.scan-hint{padding:0 12px 14px;color:var(--muted);font-size:12px;font-weight:750}


/* Responsive: allow columns to compress before stacking */
@media (max-width: 1400px){
  .wrap{grid-template-columns:minmax(320px, 1.35fr) minmax(260px, 0.8fr) minmax(240px, 0.8fr);}
}

/* Fields layout helpers */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width: 1100px){
  .grid3{grid-template-columns:1fr}
}
.row-under{margin-top:8px}
.icon-big{width:54px;height:44px;font-size:18px}

/* =========================
   FIELDS SPEC v1
   ========================= */

/* Give the Fields card comfortable inner padding (gap around corners) */
.fields{padding:18px}

/* Centered scan blocks */
.center-row{display:flex;justify-content:center}
.center-wrap{
  width:70%;              /* 30% smaller than full width */
  max-width:560px;
  min-width:320px;
}
.scan-input{width:100%}

/* Scan button: 15% smaller than scan input (width) and centered */
.btn-scan{
  width:85%;
  margin:0 auto;
  display:block;
  background:#16a34a;
  border:1px solid rgba(0,0,0,.05);
  color:#fff;
}
.btn-scan:hover{filter:brightness(.97)}

/* Search + Copy aligned with scan button */
.mini-actions{
  width:85%;
  margin:0 auto;
  display:flex;
  gap:10px;
}
.btn-mini{
  flex:1 1 0;
  height:40px;
  border-radius:12px;
}
.btn-mini-wide{width:100%}

/* Lot+Exp grid with copy under Exp column */
.lotexp-block{gap:14px}
.lotexp-spacer{grid-column:1}
.lotexp-copy{grid-column:2}

/* Responsive: keep centered blocks usable on small screens */
@media (max-width: 900px){
  .center-wrap{width:92%;min-width:0}
  .mini-actions{width:100%}
  .btn-scan{width:100%}
  .lotexp-spacer{display:none}
  .lotexp-copy{grid-column:1 / -1}
}

/* Center Lot/Exp copy button visually */
.lotexp-copy-mid{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   FIELDS COMPACT v2
   ========================= */

/* Center labels and keep them above controls */
.fields label{
  display:block;
  text-align:center;
}

/* Reduce overall spacing so Fields can fit without scrolling */
.fields{padding:14px}
.fg{gap:3px}
.grid2{gap:10px}
.grid3{gap:10px}
.center-wrap{max-width:520px}

/* Make inputs/buttons slightly smaller */
input, select{
  height:42px;
  font-size:15px;
}
.btn{
  height:42px;
  font-size:15px;
}
.btn-mini{
  height:40px;
  font-size:15px;
  padding:0 14px;
}
.icon{
  width:42px;
  height:42px;
}

/* Reduce block spacing */
.upc-block, .serial-block{margin-bottom:8px}
.lotexp-block{margin-bottom:8px}
.row-under{margin-top:6px}

/* Keep Search/Copy closer and compact */
.mini-actions{gap:8px}

/* Category+Add row alignment */
.catadd-block .row{align-items:center}
.catadd-block input{min-width:0}

#reader{width:100%;min-height:320px}
.scan-modal .modal{max-width:520px}

.btn-torch{margin-left:8px;background:#111827;color:#fff;border:1px solid rgba(0,0,0,.08)}
.btn-torch:hover{filter:brightness(.98)}