/* Ehopto Print / Label Studio · Quiet UI v2
   Scoped to the label page: never changes Home, the global rail or other studios. */
body[data-label-studio] {
  --label-edge: color-mix(in srgb, var(--e-line, #34415a) 72%, transparent);
  --label-muted: var(--e-ink-muted, #9ba6b9);
}
body[data-label-studio] > main.studio {
  width: min(1240px, calc(100% - 36px)) !important;
  max-width: 1240px !important;
  margin: 110px auto 50px !important;
  display: grid;
  grid-template-columns: minmax(272px, 365px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}
body[data-label-studio] .studio > .panel,
body[data-label-studio] .studio > .preview-shell {
  min-width: 0;
  border: 1px solid var(--label-edge);
  border-radius: 16px;
  background: var(--e-card, #101b31);
  box-shadow: none;
}
body[data-label-studio] .studio > .panel {
  padding: 22px;
  position: static;
}
body[data-label-studio] .studio > .preview-shell {
  padding: 20px;
  min-height: 0;
  gap: 14px;
  position: sticky;
  top: 92px;
}
body[data-label-studio] .eyebrow { font-size: 10px; font-weight: 800; color: var(--e-accent, #4595ff); letter-spacing: .14em; }
body[data-label-studio] .panel h1 { font-size: clamp(24px,2.3vw,29px); line-height: 1.12; margin: 5px 0 8px; letter-spacing: -.04em; }
body[data-label-studio] .intro { font-size: 13px; line-height: 1.55; margin: 0 0 16px; max-width: 42ch; }
body[data-label-studio] .section {
  border-top: 1px solid var(--label-edge);
  margin-top: 14px; padding-top: 14px;
}
body[data-label-studio] .section-title { font-size: 13px; margin-bottom: 10px; align-items: center; }
body[data-label-studio] .section-title small { font-size: 11px; font-weight: 500; }
body[data-label-studio] .preset-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px;
}
body[data-label-studio] .preset {
  background: transparent;
  color: var(--e-ink, #edf5ff);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 11px;
  min-height: 40px;
  text-align: left;
  line-height: 1.3;
  font-size: 12px;
  font-weight: 660;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}
body[data-label-studio] .preset span { display: none; }
body[data-label-studio] .preset:hover { background: var(--e-sunk,rgba(119,145,186,.1)); border-color: var(--label-edge); box-shadow: none; }
body[data-label-studio] .preset.is-active,
body[data-label-studio] .preset[aria-pressed="true"] {
  background: color-mix(in srgb, var(--e-action,#3269d8) 16%, var(--e-card,#17223b));
  border-color: color-mix(in srgb, var(--e-action,#3269d8) 58%, transparent);
  box-shadow: none;
  font-weight: 760;
}
body[data-label-studio] .preset:focus-visible,
body[data-label-studio] .btn:focus-visible,
body[data-label-studio] input:focus-visible,
body[data-label-studio] select:focus-visible {
  outline: 2px solid var(--e-action,#4a8cff);
  outline-offset: 2px;
}
body[data-label-studio] .custom-parts { gap: 6px; }
body[data-label-studio] .check {
  background: transparent; padding: 7px 5px;
  border: 0; border-radius: 6px; font-weight: 560; font-size: 12px;
}
body[data-label-studio] .check input { accent-color: var(--e-action,#3676eb); }
body[data-label-studio] .field { margin-top: 8px; gap: 5px; }
body[data-label-studio] .field label { font-size: 12px; font-weight: 670; }
body[data-label-studio] .field select,
body[data-label-studio] .field input {
  background: var(--e-sunk,#17223b);
  border: 1px solid var(--label-edge);
  border-radius: 8px; color: var(--e-ink,#edf5ff);
  min-height: 38px; padding: 8px 10px; font-size: 13px;
}
body[data-label-studio] .hint { font-size: 11px; line-height: 1.5; }
body[data-label-studio] .actions { gap: 10px; align-items: center; margin-top: 16px; }
body[data-label-studio] .btn { min-height: 38px; font-size: 12px; font-weight: 760; padding: 8px 14px; border-radius: 8px; }
body[data-label-studio] .btn.primary { background: var(--e-action,#216dea); color: #fff; border: 1px solid transparent; }
body[data-label-studio] .btn.ghost { color: var(--e-ink,#eef5ff); background: transparent; border: 1px solid var(--label-edge); }
body[data-label-studio] #label-print-warning {
  font-size: 12px; font-weight: 660; margin-top: 10px;
  line-height: 1.5; color: #f6c879;
}
body[data-label-studio] #label-print-warning[hidden] { display:none!important; }
body[data-label-studio] .preview-head h2 { font-size: 14px; letter-spacing: -.01em; }
body[data-label-studio] .preview-head span { font-size: 11px; }
body[data-label-studio] .preview-area {
  min-height: clamp(340px,52vh,490px);
  padding: clamp(18px,4vw,32px);
  background: color-mix(in srgb,var(--e-sunk,#17233a) 76%, #fff 4%);
  border: 1px solid var(--label-edge);
  border-radius: 12px;
  overflow: auto;
}
body[data-label-studio] .label-card {
  color: #101a31;
  background: #fff;
  border: 1px solid #d9e1ec;
  border-radius: 11px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 22px 24px;
  width: min(100%,390px);
  max-width:100%;
  min-width:0;
  text-align: center;
  overflow-wrap: anywhere;
}
body[data-label-studio] .label-card .name { font-size: clamp(16px,2vw,20px); font-weight: 790; line-height: 1.18; letter-spacing: -.04em; }
body[data-label-studio] .label-card .type { font-size: 10px; letter-spacing: .1em; margin-top: 4px; }
body[data-label-studio] .label-card .qr {
  display:block;
  width: min(100%,174px);
  height:auto;
  aspect-ratio: 1;
  margin: 11px auto 4px;
  background:#fff;
}
body[data-label-studio] .label-card .qr img {
  display:block;width:100%;height:100%;
  object-fit:contain;
  image-rendering:pixelated;
}
body[data-label-studio] .label-card .barcode {
  width:min(100%,300px);
  max-width:100%;
  padding: 0 9px;
  margin: 12px auto 0;
  background:#fff;
}
body[data-label-studio] .label-card .barcode img {
  display:block; width:100%;height:52px; max-height:none;
  object-fit:fill; /* preserve bar widths; scanner bars can be shorter vertically */
}
body[data-label-studio] .label-card .ecode {
  font: 790 clamp(13px,1.3vw,17px)/1.2 ui-monospace,Consolas,monospace;
  letter-spacing: .075em; margin-top: 9px;
  overflow-wrap: anywhere;
}
body[data-label-studio] .label-card .url { font-size: 10px; margin-top: 5px; line-height:1.3; overflow-wrap: anywhere; }
body[data-label-studio] .label-card .retail-meta { font-size: 11px; gap: 10px; margin-top:8px; }
body[data-label-studio] .preview-tip { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--label-muted); }
body[data-label-studio] .label-card [data-part][hidden] { display:none!important; }
@media (max-width:1020px) {
  body[data-label-studio] > main.studio { grid-template-columns: minmax(255px,335px) minmax(0,1fr);gap:13px;margin-top:95px!important; }
  body[data-label-studio] .studio>.panel { padding:16px; }
  body[data-label-studio] .studio>.preview-shell { padding:14px; }
}
@media (max-width:810px) {
  body[data-label-studio] > main.studio { display:flex;flex-direction:column; margin-top:90px!important;width:min(100% - 22px,620px)!important; }
  body[data-label-studio] .studio>.panel,
  body[data-label-studio] .studio>.preview-shell {width:100%;position:static;}
  body[data-label-studio] .preset-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  body[data-label-studio] .preview-area { min-height:320px;padding:14px; }
}
@media (max-width:520px) {
  body[data-label-studio] > main.studio { margin-top:76px!important; }
  body[data-label-studio] .studio>.panel,
  body[data-label-studio] .studio>.preview-shell {padding:16px; border-radius:12px;}
  body[data-label-studio] .label-card {padding:18px;}
  body[data-label-studio] .label-card .qr { width:min(100%,150px); }
  body[data-label-studio] .preset {font-size:12px;padding:9px;}
}
@media print {
  @page { margin:0; }
  html,body[data-label-studio],html body[data-label-studio] {
    margin:0!important;padding:0!important;background:#fff!important;
    color:#000!important; width:auto!important;min-height:0!important;
  }
  body[data-label-studio] > :not(#print-stage),
  body[data-label-studio] #ehopto-drawer,
  body[data-label-studio] .ehopto-tab-bar,
  body[data-label-studio] .ehopto-topbar {
    display:none!important;
  }
  body[data-label-studio] #print-stage {
    display:flex!important;flex-wrap:wrap;align-items:flex-start;
    gap:4mm;max-width:none!important;margin:0!important;
    padding:0!important;background:#fff!important;
  }
  body[data-label-studio] #print-stage.fixed-size { display:block!important; }
  body[data-label-studio] .print-copy {break-inside:avoid;page-break-inside:avoid;}
  body[data-label-studio] #print-stage.fixed-size .print-copy {
    display:block; width:var(--print-w); height:var(--print-h);
    margin:0!important;padding:0!important;break-after:page;page-break-after:always;
  }
  body[data-label-studio] #print-stage.fixed-size .print-copy:last-child {
    break-after:auto;page-break-after:auto;
  }
  body[data-label-studio] .print-copy .label-card {
    box-shadow:none!important;
    border:0!important;
    margin:0!important;
    padding:var(--print-pad,2mm)!important;
    border-radius:0!important;
    display:flex!important; flex-direction:column;
    align-items:center; justify-content:center;
    gap:0;
    width:100%!important;height:100%!important;max-width:none!important;
    overflow:hidden;
    color:#000!important;background:#fff!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  body[data-label-studio] .print-copy .label-card .name {
    font-size:var(--print-name,11pt)!important;line-height:1.14!important;
    font-weight:800;max-width:100%;
  }
  body[data-label-studio] .print-copy .label-card .type {
    font-size:var(--print-small,7.5pt)!important;letter-spacing:.02em!important;
    margin-top:1mm!important;
  }
  body[data-label-studio] .print-copy .label-card .qr {
    width:var(--print-qr,25mm)!important;height:var(--print-qr,25mm)!important;
    max-width:100%!important;aspect-ratio:1;margin:var(--print-gap,1mm) auto 0!important;
  }
  body[data-label-studio] .print-copy .label-card .qr img {
    width:100%!important;height:100%!important;
    image-rendering:pixelated;
  }
  body[data-label-studio] .print-copy .label-card .barcode {
    width:var(--print-barcode,40mm)!important; max-width:100%!important;
    padding:0 2mm!important;margin:var(--print-gap,1mm) auto 0!important;
  }
  body[data-label-studio] .print-copy .label-card .barcode img {
    width:100%!important;height:var(--print-barcode-height,11mm)!important;
    max-height:none!important;
    object-fit:fill!important; /* full-width Code 128 bars and quiet zones */
  }
  body[data-label-studio] .print-copy .label-card .ecode {
    font-size:var(--print-code,9pt)!important;letter-spacing:.05em!important;
    margin-top:var(--print-gap,1mm)!important;
    max-width:100%;
  }
  body[data-label-studio] .print-copy .label-card .url {
    font-size:var(--print-small,7.5pt)!important;line-height:1.14;
    margin-top:.5mm!important;
  }
  body[data-label-studio] .print-copy .label-card .retail-meta {
    font-size:var(--print-small,7.5pt)!important;
    margin-top:.6mm!important;
  }
  body[data-label-studio] .print-copy .label-card .retail-meta:empty {display:none;}
  body[data-label-studio] .print-copy .label-card .qr img,
  body[data-label-studio] .print-copy .label-card .barcode img {
    filter: grayscale(1) contrast(1.8); /* crisp dark bars for real printers */
  }
}