:root {
  --ink: #142a25;
  --ink-soft: #58706a;
  --paper: #f2efe7;
  --sheet: #fffdf8;
  --line: #d6d1c5;
  --mint: #d8eadf;
  --green: #17634d;
  --orange: #e55e36;
  --yellow: #f4ce5f;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(229, 94, 54, .38); outline-offset: 2px; }
.shell { max-width: 1360px; margin: 0 auto; padding: 20px clamp(18px, 4vw, 52px) 48px; }
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 5px 12px 5px 5px; background: var(--yellow); font-weight: 900; letter-spacing: -1px; transform: rotate(-3deg); }
.brand-name { display: block; font-size: 20px; font-weight: 850; letter-spacing: -.8px; }
.brand small { display: block; color: var(--ink-soft); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.mode-nav { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); background: #e7e3da; }
.mode { min-height: 32px; padding: 0 11px; border: 0; background: transparent; color: #50645e; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.mode:hover { color: var(--ink); }
.mode.active { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.demo-status { justify-self: end; display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #299774; box-shadow: 0 0 0 4px rgba(41,151,116,.13); }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding: clamp(29px, 5vw, 54px) 0 25px; }
.eyebrow, .section-kicker { margin: 0 0 8px; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.7px; }
h1 { max-width: 730px; font-size: clamp(31px, 4.3vw, 54px); line-height: .98; letter-spacing: -2.6px; }
h2 { font-size: 22px; }
.intro > p { max-width: 410px; margin: 0; color: var(--ink-soft); font-size: 15px; }
.view { display: none; }
.view.active { display: block; }
.workspace { display: grid; grid-template-columns: minmax(282px, 364px) minmax(0, 1fr); border: 1px solid var(--line); background: var(--line); box-shadow: 0 18px 46px rgba(20,42,37,.09); }
.editor { padding: clamp(20px, 3vw, 34px); background: var(--sheet); }
.editor-copy, .scan-intro > p, .dialog-copy { margin: 8px 0 22px; color: var(--ink-soft); font-size: 12px; }
.fields { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { font-size: 11px; font-weight: 800; letter-spacing: .02em; }
input, select { width: 100%; min-height: 43px; padding: 0 11px; border: 1px solid #c9c5ba; border-radius: 7px; background: #fffefa; color: var(--ink); }
.sku-box { padding: 14px; border: 1px solid #b9cec3; background: var(--mint); }
.sku-box span { display: block; color: #526962; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sku-box strong { display: block; margin-top: 4px; overflow-wrap: anywhere; font: 800 clamp(16px, 2vw, 21px)/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .025em; }
.code-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.code-breakdown span { padding: 8px; background: #faf8f2; color: var(--ink-soft); font-size: 10px; }
.code-breakdown b { display: inline-block; margin-right: 4px; color: var(--ink); font: 800 11px "SFMono-Regular", Consolas, monospace; }
.sample-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sample { min-height: 29px; padding: 0 8px; border: 1px solid #c8c4ba; border-radius: 20px; background: transparent; color: var(--ink); font-size: 10px; font-weight: 750; cursor: pointer; text-transform: none; }
.sample:hover { border-color: var(--green); color: var(--green); }
.label-area { min-width: 0; }
.label-stage { position: relative; display: grid; min-height: 598px; place-items: center; overflow: hidden; padding: clamp(60px, 5vw, 70px); background-color: #e0ddd4; background-image: linear-gradient(45deg, rgba(255,255,255,.32) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.32) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.32) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.32) 75%); background-position: 0 0, 0 16px, 16px -16px, -16px 0; background-size: 32px 32px; }
.stage-top { position: absolute; top: 19px; right: 22px; left: 22px; display: flex; justify-content: space-between; gap: 12px; color: #556b64; font-size: 11px; font-weight: 760; letter-spacing: .03em; }
.label-paper { position: relative; width: min(100%, 650px); min-height: 325px; padding: clamp(27px, 4vw, 49px); overflow: hidden; isolation: isolate; background: #fff; color: #111; box-shadow: 0 18px 30px rgba(0,0,0,.18); }
.label-paper::before { position: absolute; inset: 13px; z-index: -1; border: 1px solid #111; content: ""; }
.watermark { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; color: rgba(20,42,37,.075); font-size: clamp(50px, 10vw, 112px); font-weight: 900; letter-spacing: -.08em; text-transform: lowercase; transform: rotate(-19deg); user-select: none; }
.label-head, .label-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.label-head { padding-bottom: 13px; border-bottom: 2px solid #111; }
.label-brand { max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state { color: #175b47; }
.product-name { max-width: 80%; margin: clamp(27px, 5vw, 53px) 0 5px; overflow-wrap: anywhere; font-size: clamp(30px, 5.1vw, 58px); font-weight: 900; letter-spacing: -2.8px; line-height: .94; text-transform: uppercase; }
.product-variant { max-width: 74%; min-height: 21px; color: #333; font-size: clamp(12px, 1.5vw, 17px); }
.label-bottom { display: grid; grid-template-columns: minmax(135px, 1fr) minmax(145px, .9fr); align-items: end; gap: 23px; margin-top: clamp(30px, 5vw, 56px); }
.sku-caption { color: #555; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.label-sku { margin-top: 5px; overflow-wrap: anywhere; font: 800 clamp(13px, 2vw, 20px)/1.15 "SFMono-Regular", Consolas, monospace; letter-spacing: .035em; }
.barcode svg { display: block; width: 100%; height: 57px; }
.barcode-number { margin-top: 3px; font: 700 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .16em; text-align: center; }
.label-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid #111; font-size: 8px; }
.print-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 21px; background: var(--sheet); }
.quantity { display: flex; align-items: center; gap: 8px; }
.quantity label { white-space: nowrap; }
.quantity input { width: 76px; min-height: 40px; text-align: center; }
.print-actions, .movement-actions, .camera-actions { display: flex; gap: 9px; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--line); border-radius: 7px; background: #fffefa; font-weight: 800; cursor: pointer; text-align: center; white-space: nowrap; }
.button:hover { border-color: #8e9893; transform: translateY(-1px); }
.button.primary { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 7px 14px rgba(23,99,77,.2); }
.button.primary:hover { background: #114d3c; }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.scan-layout { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(390px, 1.2fr); align-items: start; gap: 1px; background: var(--line); box-shadow: 0 18px 46px rgba(20,42,37,.09); }
.scan-intro { min-height: 446px; padding: clamp(28px, 4vw, 50px); background: var(--ink); color: #f8f5ed; }
.scan-intro .section-kicker { color: var(--yellow); }
.scan-intro > p { color: #b9cdc6; font-size: 14px; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 37px; color: #cfe0da; font-size: 11px; font-weight: 800; }
.flow span { padding: 8px 9px; border: 1px solid rgba(255,255,255,.2); }
.flow i { color: var(--yellow); font-style: normal; }
.movement-card { display: grid; gap: 19px; padding: clamp(28px, 4vw, 50px); background: var(--sheet); }
.movement-summary { padding: 15px; border: 1px solid #b9cec3; background: var(--mint); }
.movement-summary span, .movement-summary code { display: block; }
.movement-summary span { color: #526962; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.movement-summary strong { display: block; margin: 3px 0; font-size: 18px; }
.movement-summary code { font: 800 13px "SFMono-Regular", Consolas, monospace; }
.evidence { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center; min-height: 85px; padding: 12px; border: 1px dashed #aaa79e; background: #faf8f2; }
.evidence img { width: 90px; height: 64px; object-fit: cover; border: 1px solid var(--line); }
.evidence-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #eee9df; color: var(--green); font-size: 21px; font-weight: 900; }
.evidence strong, .evidence p { display: block; margin: 0; }
.evidence p, .helper { color: var(--ink-soft); font-size: 11px; }
.helper { margin: -8px 0 0; }
.history-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 19px; }
.history-list { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); box-shadow: 0 18px 46px rgba(20,42,37,.09); }
.history-item { display: grid; grid-template-columns: 134px minmax(0, 1fr) auto; gap: 19px; align-items: center; padding: 13px; background: var(--sheet); }
.history-photo { width: 134px; height: 88px; object-fit: cover; background: #e0ddd4; }
.history-item strong, .history-item span { display: block; }
.history-item strong { overflow-wrap: anywhere; }
.history-item code { margin-top: 3px; color: var(--ink-soft); font: 800 12px "SFMono-Regular", Consolas, monospace; }
.history-transition { color: var(--green); font-size: 12px; font-weight: 800; text-align: right; }
.history-transition small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 650; }
.empty-history { margin: 0; padding: 33px; background: var(--sheet); color: var(--ink-soft); }
.camera-dialog { width: min(680px, calc(100vw - 28px)); padding: 0; border: 0; background: var(--sheet); color: var(--ink); box-shadow: 0 22px 70px rgba(0,0,0,.35); }
.camera-dialog::backdrop { background: rgba(11,28,23,.65); backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 22px 23px 0; }
.dialog-copy { padding: 0 23px; margin-bottom: 15px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; }
.video-frame { position: relative; min-height: 280px; overflow: hidden; background: #17231f; }
.video-frame video { display: block; width: 100%; max-height: 500px; object-fit: cover; }
.camera-guide { position: absolute; inset: 22%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 999px rgba(0,0,0,.18); }
.camera-actions { justify-content: end; padding: 18px 23px 23px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; max-width: 360px; padding: 12px 15px; border-radius: 8px; background: var(--ink); color: #fff; box-shadow: 0 14px 35px rgba(0,0,0,.2); opacity: 0; transform: translateY(24px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast b { color: #8de3bf; }
#print-sheet { display: none; }
@media (max-width: 1020px) { .site-header { grid-template-columns: 1fr auto; } .mode-nav { grid-row: 2; grid-column: 1 / -1; justify-self: start; } .workspace { grid-template-columns: 330px minmax(0,1fr); } .label-stage { min-height: 570px; padding: 54px 36px; } }
@media (max-width: 800px) { .intro { align-items: start; flex-direction: column; } .workspace, .scan-layout { grid-template-columns: 1fr; } .label-stage { min-height: 530px; } .scan-intro { min-height: auto; } }
@media (max-width: 560px) { .shell { padding: 16px 14px 30px; } .site-header { grid-template-columns: 1fr; gap: 13px; padding-bottom: 15px; } .mode-nav { grid-row: auto; grid-column: auto; width: 100%; overflow-x: auto; } .mode { flex: 1 0 auto; } .demo-status { display: none; } .intro { padding: 29px 0 23px; } h1 { letter-spacing: -1.8px; } .editor { padding: 22px 17px; } .field-row { grid-template-columns: 1fr; } .label-stage { min-height: 410px; padding: 53px 16px 22px; } .label-paper { min-height: 290px; padding: 30px 27px; } .product-name { margin-top: 32px; letter-spacing: -1.6px; } .label-bottom { grid-template-columns: 1fr; gap: 19px; margin-top: 30px; } .barcode svg { height: 42px; } .label-foot { margin-top: 13px; } .print-panel, .movement-actions { align-items: stretch; flex-direction: column; } .print-actions { display: grid; grid-template-columns: 1fr 1fr; } .button { padding: 0 10px; } .scan-intro, .movement-card { padding: 28px 21px; } .history-item { grid-template-columns: 90px 1fr; gap: 11px; } .history-photo { width: 90px; height: 66px; } .history-transition { grid-column: 2; text-align: left; } .camera-actions { flex-direction: column; } .camera-actions .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media print { @page { size: A4; margin: 8mm; } body > * { display: none !important; } #print-sheet { display: grid !important; grid-template-columns: repeat(2, 100mm); gap: 5mm; background: #fff; } #print-sheet .label-paper { display: block; width: 100mm; min-height: 50mm; padding: 7mm; box-shadow: none; break-inside: avoid; } #print-sheet .label-paper::before { inset: 3mm; } #print-sheet .watermark { font-size: 27mm; } #print-sheet .label-head, #print-sheet .label-foot { font-size: 6px; } #print-sheet .product-name { max-width: 82%; margin: 6mm 0 1mm; font-size: 17pt; letter-spacing: -1.1px; } #print-sheet .product-variant { font-size: 8pt; } #print-sheet .label-bottom { grid-template-columns: 1fr .9fr; gap: 6mm; margin-top: 7mm; } #print-sheet .label-sku { font-size: 8pt; } #print-sheet .barcode svg { height: 14mm; } #print-sheet .label-foot { margin-top: 4mm; padding-top: 2mm; } }