/* Label Crop — a plain, desktop-first tool page that also works on a phone. */
.lc { background: var(--bg); min-height: 100vh; color: var(--text); font-family: var(--font); }
.lc * { box-sizing: border-box; }
.lc button { width: auto; margin: 0; font: inherit; }
.lc-page { max-width: 880px; margin: 0 auto; padding: 1.1rem 1rem 2.4rem; display: grid; gap: 0.9rem; }
.lc-head { display: flex; gap: 0.8rem; align-items: flex-start; }
.lc-head > div { flex: 1; min-width: 0; }
.lc-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.lc-muted { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.86rem; }
.lc-badge { flex: none; padding: 0.3rem 0.65rem; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 0.76rem; font-weight: 800; color: var(--muted); }
.lc-badge.on { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.lc-drop { display: grid; gap: 0.25rem; place-items: center; text-align: center; padding: 1.8rem 1rem; border: 2px dashed var(--line-strong); border-radius: 18px; background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.lc-drop b { font-size: 1.1rem; }
.lc-drop span { color: var(--muted); font-size: 0.86rem; }
.lc-drop.is-over, .lc-drop:hover { border-color: var(--accent); background: var(--surface-2); }
.lc-files { display: grid; gap: 0.4rem; }
.lc-file { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 0.88rem; }
.lc-file.is-bad { border-color: var(--danger); background: var(--danger-soft); }
.lc-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lc-mk { flex: none; padding: 3px 7px; border-radius: 6px; font: 800 0.66rem/1.2 var(--font); letter-spacing: 0.05em; }
.lc-mk.amz { background: #ff9900; color: #111; }
.lc-mk.fk { background: #2874f0; color: #fff; }
.lc-order { display: flex; gap: 4px; flex: none; }
.lc-order button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 800; box-shadow: none; }
.lc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0.85rem 0.95rem; display: grid; gap: 0.7rem; }
.lc-opts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem 1.2rem; }
.lc-opts > div, .lc-opts > label { min-width: 0; }
.lc-label { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lc-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-3); box-shadow: inset 0 1px 2px rgba(15, 26, 46, 0.06); }
.lc-seg button { position: relative; flex: 1 1 auto; min-width: max-content; min-height: 38px; padding: 0.5rem 0.7rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 800; font-size: 0.84rem; line-height: 1.2; white-space: nowrap; box-shadow: none; cursor: pointer; transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.12s ease, border-color 0.22s ease; }
.lc-seg button:hover:not(.on):not(:disabled) { background: var(--surface); color: var(--text); border-color: var(--line); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 26, 46, 0.08); }
.lc-seg button:active:not(:disabled) { transform: scale(0.96); }
.lc-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-seg button.on { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); box-shadow: 0 4px 12px rgba(20, 37, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.lc-seg button.on::before { content: '✓'; display: inline-block; margin-right: 0.35rem; font-size: 0.8em; }
.lc-seg button.pop { animation: lc-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes lc-pop { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(20, 37, 74, 0.45); } 60% { transform: scale(1.04); } 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(20, 37, 74, 0.28), 0 0 0 7px rgba(20, 37, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .lc-seg button, .lc-seg button.pop { transition: none; animation: none; } }
.lc-check { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.42rem 0.6rem; border: 1px solid transparent; border-radius: 11px; font-size: 0.88rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.12s; }
.lc-check:hover:not(:has(input:disabled)) { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.lc-check:has(input:checked) { color: var(--text); background: var(--accent-soft); }
.lc-check:active:not(:has(input:disabled)) { transform: scale(0.985); }
/* the box: rounded square, fills dark and draws a tick when on */
.lc-check input[type='checkbox'] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 22px; height: 22px; margin: 0; border: 2px solid var(--line-strong); border-radius: 7px; background: var(--surface); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.lc-check input[type='checkbox']::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lc-check input[type='checkbox']:checked { background: var(--accent); border-color: var(--accent); box-shadow: 0 3px 8px -2px rgba(20, 37, 74, 0.45); }
.lc-check input[type='checkbox']:checked::after { transform: rotate(45deg) scale(1); }
.lc-check:hover input[type='checkbox']:not(:checked):not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lc-check input[type='checkbox']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-check input[type='checkbox']:disabled { cursor: not-allowed; }
.lc-check.pop input[type='checkbox'] { animation: lc-tick 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lc-check.pop input[type='checkbox']:checked::after { animation: lc-tick-draw 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes lc-tick-draw { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
@keyframes lc-tick { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lc-check, .lc-check input[type='checkbox'], .lc-check input[type='checkbox']::after { transition: none !important; animation: none !important; } }
details.lc-card summary { cursor: pointer; font-weight: 800; font-size: 0.9rem; }
.lc-tune-row { display: grid; gap: 0.4rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.lc-tune-row small { color: var(--muted); }
.lc-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.lc-box label { display: grid; gap: 0.2rem; font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.lc-box input { width: 100%; min-width: 0; padding: 0.45rem; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; color: var(--text); background: var(--surface); }
.lc-go { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.05rem; box-shadow: none; }
.lc-go:disabled { opacity: 0.45; }
.lc-go.ok { background: var(--success); }
.lc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 800; text-decoration: none; }
.lc-progress { min-height: 1.2em; color: var(--muted); font-size: 0.84rem; text-align: center; }
.lc-error { padding: 0.65rem 0.8rem; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.lc-ok { padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--success-soft); color: var(--success); font-weight: 800; }
.lc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.lc-stats div { padding: 0.55rem; border-radius: 12px; background: var(--surface-2); text-align: center; min-width: 0; }
.lc-stats b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.lc-stats small { color: var(--muted); font-size: 0.74rem; }
.lc-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem; }
.lc-actions .lc-go { min-height: 46px; font-size: 1rem; }
.lc-preview { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; }
.lc-thumb { width: 110px; height: auto; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(15, 26, 46, 0.08); }
.lc-more { align-self: center; color: var(--muted); font-weight: 700; font-size: 0.84rem; }
.lc-list summary { cursor: pointer; font-weight: 800; font-size: 0.88rem; }
.lc-list { overflow-x: auto; }
.lc-list table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 0.5rem; }
.lc-list th, .lc-list td { padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.lc-list th { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lc-list tr.is-warn td { background: var(--warn-soft); }
.lc-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.lc-foot { text-align: center; color: var(--muted); font-size: 0.76rem; padding-top: 0.6rem; }
@media (max-width: 560px) {
  .lc-actions { grid-template-columns: 1fr 1fr; }
  .lc-actions .lc-go { grid-column: 1 / -1; }
  .lc-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lc-checks { display: grid; gap: 0.2rem; align-content: start; }
.lc-check input:disabled + * , .lc-check:has(input:disabled) { opacity: 0.55; }

/* Print memory: what was printed before, what is new (one PDF has both) */
.lc-mem { border: 1.5px solid var(--accent); background: var(--accent-soft); }
.lc-mem.off { border: 1px dashed var(--line-strong); background: var(--surface); }
.lc-mem-top { display: grid; gap: 0.15rem; }
.lc-mem-top b { font-size: 1rem; }
.lc-new { color: var(--success); }
.lc-membar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.lc-membar i { display: block; }
.lc-membar .p { background: var(--muted); opacity: 0.45; }
.lc-membar .n { background: var(--success); }
.lc-mem-modes { flex-wrap: wrap; background: var(--surface); }
.lc-mem-modes button { flex: 1 1 auto; }
.lc-mem-modes button.on { background: var(--accent); color: var(--surface); }
.lc-alert { border-radius: 10px; padding: 0.55rem 0.75rem; font-size: 0.86rem; }
.lc-alert.bad { background: var(--danger-soft); color: var(--danger); }
.lc-alert.warn { background: var(--warn-soft); color: var(--warn); }
.lc-okline { color: var(--success); font-weight: 800; font-size: 0.9rem; }
.lc-memnote { margin: 0; font-size: 0.86rem; font-weight: 700; }
.lc-linkbtn { justify-self: start; border: 0; background: none; padding: 0; color: var(--accent); font-weight: 800; font-size: 0.86rem; text-decoration: underline; box-shadow: none; width: auto; min-height: 0; }
.lc-hist { display: grid; gap: 0.6rem; }
.lc-hist-day { display: grid; gap: 0.35rem; }
.lc-hist-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.6rem; font-size: 0.86rem; }
.lc-hist-row .grow { flex: 1; min-width: 0; }
.lc-hist-row small { display: block; color: var(--muted); }
.lc-hist-row.is-undone { opacity: 0.55; }
.lc-tag { font-family: var(--mono, ui-monospace, monospace); font-weight: 800; background: var(--surface-3); border-radius: 6px; padding: 1px 7px; }
.lc-btn.sm { min-height: 34px; padding: 0 0.7rem; font-size: 0.8rem; width: auto; }

/* Live preview beside the options (preview.js). Paper parts are always white, like printed paper. */
.lc-hint { margin-top: 0.35rem; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.lc-optwrap { display: grid; gap: 0.9rem; align-items: start; }
.lc-optwrap.has-pv { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.lc-pv-slot { position: sticky; top: 12px; min-width: 0; }
.lc-pv { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(20, 33, 61, 0.35); animation: lc-pv-in 0.35s ease-out; }
.lc-opts > .lc-pv { grid-column: 1 / -1; }
@keyframes lc-pv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lc-pv-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 0.82rem; }
.lc-pv-head small { margin-left: auto; color: var(--muted); font-weight: 700; }
.lc-pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: lc-pv-live 1.8s infinite; }
@keyframes lc-pv-live { 0% { box-shadow: 0 0 0 0 var(--success); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.lc .lc-pv-hide { border: 0; background: none; padding: 2px 4px; color: var(--muted); font-weight: 700; font-size: 0.76rem; text-decoration: underline; box-shadow: none; cursor: pointer; min-height: 0; }
.lc-pv-stage { position: relative; height: 320px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(20, 37, 74, 0.08), transparent 70%), var(--surface-3); }
.lc-pv-cap { padding: 10px 12px 12px; display: grid; gap: 2px; min-height: 78px; }
.lc-pv-cap b { font-size: 0.9rem; }
.lc-pv-cap span { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.lc-pv-paper { background: #fff; color: #111; border-radius: 4px; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08); font-family: Arial, Helvetica, sans-serif; }
.lc-pv-x46 { width: 150px; aspect-ratio: 4 / 6; padding: 7px; display: flex; flex-direction: column; gap: 4px; }
.lc-pv-box { position: relative; border: 1.2px solid #000; flex: 1; padding: 5px; display: grid; gap: 4px; align-content: start; min-height: 0; }
.lc-pv-bars { height: 22px; background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 3px, #000 3px 4px, #fff 4px 6px, #000 6px 9px, #fff 9px 10px); }
.lc-pv-ln { height: 4px; background: #c9ccd2; border-radius: 2px; }
.lc-pv-ln.s { width: 60%; }
.lc-pv-ln.m { width: 80%; }
.lc-pv-qrs { display: flex; gap: 4px; }
.lc-pv-qrs i { width: 24px; height: 24px; background: conic-gradient(#000 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / 7px 7px; }
.lc-pv-insku { justify-self: start; border: 1px solid #000; padding: 0 3px; font-size: 6.5px; font-weight: 800; transition: background-color 0.3s; }
.lc-pv-insku.hot { background: #ffe9a8; }
.lc-pv-strip { border: 1.2px solid #000; display: flex; font-size: 6.4px; line-height: 1.35; overflow: hidden; }
.lc-pv-rows { flex: 1; padding: 2px 4px; min-width: 0; }
.lc-pv-row { display: grid; grid-template-columns: 26px 1fr; white-space: nowrap; overflow: hidden; max-height: 10px; transition: max-height 0.35s, opacity 0.35s, background-color 0.3s; }
.lc-pv-row.gone { max-height: 0; opacity: 0; }
.lc-pv-row.hot { background: #ffe9a8; }
.lc-pv-row i { font-style: normal; color: #444; }
.lc-pv-qb { background: #000; color: #fff; padding: 0 2px; }
.lc-pv-date { background: #000; color: #fff; font-weight: 800; font-size: 11px; display: grid; place-items: center; padding: 0 5px; white-space: nowrap; transition: max-width 0.35s, padding 0.35s, opacity 0.35s; max-width: 60px; }
.lc-pv-date.gone { max-width: 0; padding: 0; opacity: 0; }
.lc-pv-date.hot { outline: 2px solid #ffcc33; outline-offset: -2px; }
.lc-pv-a4 { width: 185px; aspect-ratio: 210 / 297; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.lc-pv-a4.one { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.lc-pv-mini { border: 1px solid #000; border-radius: 2px; padding: 3px; display: flex; flex-direction: column; gap: 2px; }
.lc-pv-a4.one .lc-pv-mini { width: 62%; justify-self: center; }
.lc-pv-mini .lc-pv-bars { height: 10px; }
.lc-pv-band { height: 7px; background: #000; margin-top: auto; }
.lc-pv-printer { position: absolute; top: 16px; width: 200px; height: 18px; border-radius: 6px; background: #2a3247; box-shadow: inset 0 -3px 0 #151a27; z-index: 2; }
.lc-pv-feed { animation: lc-pv-feed 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes lc-pv-feed { from { transform: translateY(-115%); clip-path: inset(100% 0 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
.lc-pv-drop { animation: lc-pv-drop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes lc-pv-drop { from { transform: translateY(-14px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
.lc-pv-lane { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; width: 290px; }
.lc-pv-card, .lc-pv-sep { width: 62px; height: 90px; padding: 4px; display: grid; gap: 3px; align-content: start; font-size: 6.5px; font-weight: 700; }
.lc-pv-card .lc-pv-bars { height: 12px; }
.lc-pv-chip { border-radius: 3px; padding: 1px 3px; color: #fff; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-pv-sep { background: #f6f3e7; font-weight: 800; }
.lc-pv-stack { display: flex; align-items: flex-end; gap: 6px; }
.lc-pv-pg { width: 44px; height: 64px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.lc-pv-pg .lc-pv-bars { height: 8px; }
.lc-pv-pg.pick { background: #fff7e0; outline: 2px solid #c98a1a; }
.lc-pv-pg.pick b { font-size: 6px; }
.lc-pv-files { display: flex; gap: 18px; }
.lc-pv-file { position: relative; width: 92px; height: 116px; padding: 10px 8px; display: grid; gap: 5px; align-content: start; font-size: 9px; font-weight: 800; }
.lc-pv-file .lc-pv-bars { height: 14px; }
.lc-pv-file::after { content: 'PDF'; position: absolute; bottom: 8px; left: 8px; background: #b42318; color: #fff; font-size: 8px; padding: 1px 4px; border-radius: 2px; }
@media (max-width: 900px) {
  .lc-optwrap.has-pv { grid-template-columns: 1fr; }
  .lc-pv-slot { position: static; }
  .lc-pv-stage { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-pv, .lc-pv *, .lc-pv-dot { animation: none !important; transition: none !important; }
}

/* Label Crop SaaS plan: the note above the options, locked options, the mark in the preview */
.lc-plan { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 0.88rem; }
.lc-plan b { font-weight: 800; }
.lc-plan span { flex: 1 1 18rem; color: var(--muted); }
.lc-plan.small { border-color: #f0dca8; background: #fff8e6; }
.lc-plan.large { border-color: #f5c7c2; background: #fdeeec; }
.lc .lc-plan-go { border: 0; border-radius: 10px; padding: 0.5rem 0.9rem; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.84rem; cursor: pointer; box-shadow: 0 4px 12px -4px rgba(20, 37, 74, 0.5); transition: transform 0.12s; }
.lc .lc-plan-go:hover { transform: translateY(-1px); }
.lc-seg button.locked, .lc-seg button:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.lc-seg button.locked:hover { transform: none; box-shadow: none; background: transparent; border-color: transparent; }
.lc-check.locked { cursor: not-allowed; }
.lc-check.locked:has(input:disabled) { opacity: 1; }
.lc-check.locked input { opacity: 0.45; }
.lc-lock { margin-left: auto; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 99px; background: #fdeeec; color: #b42318; }
.lc-pv-wm { font-family: Arial, Helvetica, sans-serif; text-align: center; }
.lc-pv-wm.s { font-size: 5.5px; color: #333; border-top: 1px dashed #999; padding-top: 2px; }
.lc-pv-wm.l { background: #000; color: #fff; font-size: 5.5px; padding: 3px 2px; line-height: 1.3; }
.lc-pv-wm.l b { display: block; font-size: 7.5px; }

/* Smart SKU names (Label Crop SaaS): a short summary, opened to edit, one row per product */
.lc-smart { gap: 0.75rem; }
.lc-smart-head { display: flex; align-items: center; gap: 0.7rem; }
.lc-smart-title { flex: 1; min-width: 0; display: grid; }
.lc-smart-title b { font-size: 1rem; }
.lc-smart-title span { font-size: 0.82rem; color: var(--muted); }
.lc-smart-badge { flex: none; font: 800 0.62rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.1em; padding: 5px 8px; border-radius: 99px; background: linear-gradient(90deg, #e0a83a, #f3d27a); color: #1b1404; box-shadow: 0 4px 12px -4px rgba(224, 168, 58, 0.7); }
.lc .lc-smart-toggle { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0 0.9rem; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--text); font-weight: 800; font-size: 0.84rem; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 26, 46, 0.06); transition: transform 0.12s, box-shadow 0.2s; }
.lc .lc-smart-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 26, 46, 0.1); }
.lc-smart-toggle i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s; }
.lc-smart-toggle.open { background: var(--accent); color: #fff; border-color: var(--accent); }
.lc-smart-toggle.open i { transform: rotate(225deg) translate(-2px, -1px); }
.lc-smart-offer { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; border-radius: 12px; background: #fff8e6; border: 1px solid #f0dca8; font-size: 0.88rem; animation: lc-pv-in 0.3s ease-out; }
.lc-smart-offer span { flex: 1 1 16rem; }
.lc .lc-btn.sm { min-height: 34px; padding: 0 0.8rem; font-size: 0.82rem; border-radius: 10px; }
.lc-smart-bar { display: flex; align-items: center; gap: 0.6rem 0.8rem; flex-wrap: wrap; }
.lc-smart-bar .lc-label { margin: 0; }
.lc-smart-seg { flex-wrap: nowrap; }
.lc-smart-seg button { flex: none; }
.lc-smart-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 4px 6px 4px 10px; border-radius: 99px; background: var(--success-soft); color: var(--success); font-size: 0.78rem; font-weight: 700; }
.lc .lc-smart-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: inherit; font-weight: 800; cursor: pointer; box-shadow: none; min-height: 0; padding: 0; }
.lc-smart-tools { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; }
.lc-smart-search { flex: 0 1 18rem; min-width: 12rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 11px; font: 600 0.86rem var(--font); background: var(--surface); color: var(--text); }
.lc-smart-search:focus, .lc-smart-in:focus, .lc-smart-gin:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lc-smart-tools .lc-muted { margin: 0; font-size: 0.78rem; }
.lc-smart-groups { display: grid; gap: 0.45rem; max-height: min(60vh, 560px); overflow: auto; padding-right: 2px; overscroll-behavior: contain; }
.lc-smart-group { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; }
.lc-smart-group.open { border-color: var(--line-strong); box-shadow: 0 6px 18px -10px rgba(15, 26, 46, 0.25); }
.lc-smart-ghead { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.45rem 0.55rem; }
.lc .lc-smart-gopen { display: flex; align-items: center; gap: 0.45rem; min-width: 0; border: 0; background: none; padding: 0.3rem; cursor: pointer; box-shadow: none; text-align: left; color: var(--text); }
.lc-smart-gopen i { flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.2s; }
.lc-smart-group.open .lc-smart-gopen i { transform: rotate(45deg); }
.lc-smart-gopen small { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.lc-smart-gin { width: 100%; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 10px; font: 800 0.9rem var(--font); background: var(--surface-2); color: var(--text); }
.lc-smart-rows { display: grid; gap: 0.3rem; padding: 0 0.55rem 0.55rem 1.6rem; animation: lc-pv-in 0.25s ease-out; }
.lc-smart-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 34px; gap: 0.5rem; align-items: center; }
.lc-part { border-radius: 5px; padding: 0 4px; }
.lc-part.pre { background: #fde8e6; color: #b42318; }
.lc-part.pre.gone { text-decoration: line-through; opacity: 0.7; }
.lc-part.prod { background: #e6eefb; color: #1f5fbf; }
.lc-part.var { background: var(--success-soft); color: var(--success); }
.lc-smart-sku { font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-smart-in { width: 100%; min-width: 0; padding: 0.42rem 0.6rem; border: 1px solid var(--line); border-radius: 9px; font: 600 0.82rem var(--font); color: var(--text); background: var(--surface); }
.lc-smart-in.own { border-color: #c98a1a; background: #fffaf0; }
.lc .lc-smart-reset { width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-size: 1rem; cursor: pointer; box-shadow: none; min-height: 0; padding: 0; }
.lc-smart-auto { font-size: 0.64rem; font-weight: 800; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.lc-smart.locked .lc-plan { margin: 0; }
@media (max-width: 640px) {
  .lc-smart-ghead { grid-template-columns: 1fr; }
  .lc-smart-row { grid-template-columns: 1fr 34px; }
  .lc-smart-sku { grid-column: 1 / -1; }
  .lc-smart-rows { padding-left: 0.55rem; }
}

/* All labels list: scrolls inside, the page stays short */
.lc-list table { display: block; max-height: min(55vh, 520px); overflow: auto; }

/* The action bar at the bottom of the screen: Crop, then Print / Download, always in reach */
.lc-page:has(.lc-dock) { padding-bottom: 6.5rem; }
.lc-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem max(0.75rem, env(safe-area-inset-right, 0px)) calc(0.6rem + env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px)); pointer-events: none; }
.lc-dock-in { pointer-events: auto; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.6rem 0.7rem 0.6rem 0.9rem; border-radius: 18px; background: rgba(20, 33, 61, 0.94); color: #fff; box-shadow: 0 18px 40px -12px rgba(10, 18, 36, 0.55); backdrop-filter: blur(10px); animation: lc-dock-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lc-dock-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.lc-dock-info { flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: 0.7rem; }
.lc-dock-info > span:last-child { display: grid; min-width: 0; }
.lc-dock-info b { font-size: 0.95rem; }
.lc-dock-info small { font-size: 0.76rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-dock-files, .lc-dock-ok { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, 0.12); font-weight: 800; }
.lc-dock-ok { background: #1f9d61; animation: lc-tick 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lc-dock-spin { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: lc-spin 0.8s linear infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }
.lc-dock-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lc .lc-dock-go { min-height: 46px; padding: 0 1.4rem; border: 0; border-radius: 13px; background: #fff; color: #14213d; font-weight: 800; font-size: 0.98rem; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); transition: transform 0.12s, box-shadow 0.2s; }
.lc .lc-dock-go.ok { background: #1f9d61; color: #fff; }
.lc .lc-dock-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.55); }
.lc .lc-dock-go:active:not(:disabled) { transform: scale(0.97); }
.lc .lc-dock-go:disabled { opacity: 0.5; cursor: not-allowed; }
.lc .lc-dock-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1rem; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: #fff; font-weight: 800; font-size: 0.9rem; text-decoration: none; cursor: pointer; box-shadow: none; }
.lc .lc-dock-btn:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 560px) {
  .lc-dock-actions { width: 100%; }
  .lc .lc-dock-go { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .lc-dock-in, .lc-dock-ok, .lc-dock-spin { animation: none; } }

/* Big preview of what will print: pages shuffled one after another, a strip to jump to one */
.lc-result-grid { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.lc-result-side { display: grid; gap: 0.7rem; min-width: 0; align-content: start; }
.lc-show-slot { min-width: 0; }
.lc-show { display: grid; gap: 0.6rem; }
.lc-show-stage { position: relative; border-radius: 18px; padding: 1.1rem 1.1rem 2.9rem; background: radial-gradient(120% 90% at 50% 0%, rgba(20, 37, 74, 0.1), transparent 70%), var(--surface-3); overflow: hidden; }
.lc-show-paper { position: relative; aspect-ratio: 4 / 6; max-height: 62vh; margin: 0 auto; perspective: 1200px; }
.lc-show-paper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 6px; box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateX(26px) rotateY(-8deg) scale(0.97); transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lc-show-paper img.on { opacity: 1; transform: none; }
.lc-show-paper img:not([src]) { visibility: hidden; }
.lc-show.loading .lc-show-paper { border-radius: 6px; background: linear-gradient(100deg, #e9edf3 30%, #f6f8fb 50%, #e9edf3 70%) 0 0 / 200% 100%; animation: lc-shimmer 1.2s linear infinite; }
@keyframes lc-shimmer { to { background-position: -200% 0; } }
.lc .lc-show-nav { position: absolute; top: 45%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.2s, transform 0.12s; padding: 0; min-height: 0; }
.lc-show-nav.prev { left: 0.6rem; }
.lc-show-nav.next { right: 0.6rem; }
.lc-show-stage:hover .lc-show-nav, .lc-show-nav:focus-visible { opacity: 1; }
.lc .lc-show-nav:active { transform: scale(0.92); }
.lc-show-bar { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; font-weight: 800; color: var(--muted); }
.lc .lc-show-play { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); font-size: 0.7rem; cursor: pointer; box-shadow: none; padding: 0; min-height: 0; color: var(--text); }
.lc-show-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(20, 37, 74, 0.08); }
.lc-show-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: lc-show-bar 2.6s linear forwards; }
.lc-show.paused .lc-show-progress i, .lc-show-stage:hover .lc-show-progress i { animation-play-state: paused; }
@keyframes lc-show-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lc-show-strip { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.4rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.lc .lc-show-thumb { position: relative; flex: none; width: 54px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(15, 26, 46, 0.12); scroll-snap-align: center; transition: border-color 0.2s, transform 0.15s; min-height: 0; }
.lc-show-thumb img { display: block; width: 100%; border-radius: 4px; }
.lc-show-thumb span { position: absolute; right: 2px; bottom: 2px; font-size: 0.6rem; font-weight: 800; padding: 0 3px; border-radius: 4px; background: rgba(20, 37, 74, 0.8); color: #fff; }
.lc .lc-show-thumb:hover { transform: translateY(-2px); }
.lc-show-thumb.on { border-color: var(--accent); }
@media (max-width: 820px) { .lc-result-grid { grid-template-columns: 1fr; } .lc-show-paper { max-height: 54vh; } .lc-show-nav { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lc-show-paper img { transition: none; } .lc-show-progress { display: none; } .lc-show.loading .lc-show-paper { animation: none; } }

/* Preview screen: opens only from "Preview & print"; Print / Download live here */
html.lc-modal-open, html.lc-modal-open body { overflow: hidden; }
.lc-preview-go { font-size: 1.05rem; }
.lc-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.lc-modal-back { position: absolute; inset: 0; background: rgba(12, 20, 38, 0.6); backdrop-filter: blur(4px); animation: lc-fade 0.2s ease-out; }
@keyframes lc-fade { from { opacity: 0; } to { opacity: 1; } }
.lc-modal-box { position: relative; width: min(760px, 100%); max-height: 100%; overflow: auto; display: grid; gap: 0.8rem; padding: 1rem 1.1rem; border-radius: 22px; background: var(--surface); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55); animation: lc-modal-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lc-modal-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.lc-modal-head { display: flex; align-items: center; gap: 0.7rem; }
.lc-modal-head > div { flex: 1; display: grid; }
.lc-modal-head b { font-size: 1.05rem; }
.lc-modal-head small { color: var(--muted); font-size: 0.8rem; }
.lc-modal-head .lc-dock-ok { color: #fff; }
.lc .lc-modal-x { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); font-size: 1rem; cursor: pointer; box-shadow: none; padding: 0; min-height: 0; color: var(--text); }
.lc-modal .lc-show-paper { max-height: min(62vh, 640px); }
.lc-modal-foot { position: sticky; bottom: -1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 -1.1rem -1rem; padding: 0.75rem 1.1rem 1rem; background: var(--surface); border-top: 1px solid var(--line); }
.lc-modal-foot .grow { flex: 1; }
.lc-modal-foot .lc-go { width: auto; min-height: 48px; padding: 0 1.4rem; }
.lc .lc-modal-back-btn { border: 0; background: none; padding: 0.4rem 0.2rem; color: var(--muted); font-weight: 800; font-size: 0.86rem; cursor: pointer; box-shadow: none; min-height: 0; }
@media (max-width: 560px) {
  .lc-modal { padding: 0; place-items: end stretch; }
  .lc-modal-box { width: 100%; max-height: 96vh; border-radius: 22px 22px 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .lc-modal-foot .lc-go { flex: 1 1 100%; order: -1; }
  .lc-modal-foot .grow { display: none; }
  .lc-modal .lc-show-paper { max-height: 52vh; }
}
@media (prefers-reduced-motion: reduce) { .lc-modal-box, .lc-modal-back { animation: none; } }

/* Basic plan: Pro options locked with a "★ Pro" chip */
.lc .lc-lock { border: 0; cursor: pointer; box-shadow: none; min-height: 0; }
.lc .lc-lock.pro { background: #0f1830; color: #f3d27a; }
.lc-plan.pro { border-color: #2a3b66; background: #0f1830; color: #eef2f8; }
.lc-plan.pro span { color: #c9d2e3; }
.lc-plan.pro .lc-plan-go { background: linear-gradient(90deg, #e0a83a, #f3d27a); color: #1b1404; }

/* Name rules (smart SKU names, Pro) */
.lc-rules { display: grid; gap: 0.5rem; padding: 0.75rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.lc-rules-head { display: grid; gap: 0.1rem; }
.lc-rules-head .lc-muted { margin: 0; font-size: 0.78rem; }
.lc-rules-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.lc-rules-chips .lc-muted { margin: 0 0.2rem 0 0; font-size: 0.76rem; }
.lc .lc-rule-chip { border: 1px dashed #c98a1a; background: #fff8e6; color: var(--text); border-radius: 99px; padding: 0.3rem 0.75rem; font: 700 0.8rem var(--font); cursor: pointer; box-shadow: none; min-height: 0; transition: transform 0.12s, background-color 0.2s; }
.lc .lc-rule-chip:hover { transform: translateY(-1px); background: #fff1cc; }
.lc-rule-chip b { color: #8a5a00; }
.lc-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 0.8fr) auto auto; gap: 0.45rem; align-items: center; padding: 0.4rem 0.5rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); animation: lc-pv-in 0.25s ease-out; }
.lc-rule input, .lc-rule-add input { min-width: 0; width: 100%; padding: 0.42rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 8px; font: 700 0.8rem 'IBM Plex Mono', ui-monospace, monospace; background: var(--surface); color: var(--text); }
.lc-rule-k, .lc-rule-arrow { font-size: 0.74rem; font-weight: 800; color: var(--muted); }
.lc-rule-n { font-size: 0.72rem; font-weight: 800; color: var(--success); white-space: nowrap; }
.lc .lc-rule-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 1rem; cursor: pointer; box-shadow: none; padding: 0; min-height: 0; }
.lc-rule-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto; gap: 0.45rem; }
.lc-rule-add input { font-family: var(--font); font-weight: 600; }
@media (max-width: 640px) {
  .lc-rule { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lc-rule-arrow { display: none; }
  .lc-rule input[data-rule-k='repl'] { grid-column: 2; }
  .lc-rule-add { grid-template-columns: 1fr; }
}