:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#242426;background:#eaeaec;font-size:15px;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.35}button:focus-visible,input:focus-visible{outline:3px solid #7786a4;outline-offset:2px}[hidden]{display:none!important}.preview-label{max-width:480px;margin:16px auto 6px;color:#707078;font-size:11px;padding:0 18px;line-height:1.5}#app{max-width:480px;min-height:680px;margin:0 auto 30px;background:#f5f5f7;border-radius:24px;overflow:clip;box-shadow:0 10px 50px #22222208}header{position:sticky;top:0;z-index:2;background:#f5f5f7f5;backdrop-filter:blur(16px);display:flex;align-items:center;gap:8px;padding:12px 16px;min-height:66px;border-bottom:1px solid #e9e9ed}header .back{border:0;background:transparent;width:36px;min-height:44px;font-size:32px;color:#64646b;padding:0}header h1{font-size:19px;letter-spacing:-.5px;line-height:1.15;margin:0;flex:1;font-weight:600}header .brand{font-size:10px;letter-spacing:1.4px;color:#76767e}main{padding:18px 16px 24px}.home{padding-top:26px}.eyebrow{font-size:12px;letter-spacing:.8px;color:#77777f;margin:0 0 8px}.home h2{font-size:30px;letter-spacing:-1px;font-weight:600;margin:0 0 8px}.muted{color:#73737b}.home>p{margin-top:0;margin-bottom:28px;font-size:14px}.operation{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:0;border-radius:18px;background:#fff;padding:22px 18px;margin-bottom:12px;color:inherit}.operation .symbol{display:grid;place-items:center;background:#f0f1f4;border-radius:14px;width:52px;height:52px;flex:none;font-size:26px;color:#5c6571}.operation strong{display:block;font-size:19px;font-weight:600}.operation small{display:block;color:#77777f;font-size:13px;margin-top:5px}.chevron{margin-left:auto;color:#9a9aa3;font-size:24px}.context{font-size:13px;color:#72727b;line-height:1.5;margin:16px 2px 0}.section-title{font-size:13px;font-weight:500;color:#74747c;margin:22px 12px 8px}.panel{background:#fff;border-radius:16px;padding:16px}.order{display:block;width:100%;text-align:left;color:inherit;border:0;background:#fff;border-radius:16px;padding:17px;margin-bottom:12px}.order-top,.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.order strong{font-size:17px;font-weight:600}.order p{margin:8px 0 4px}.order small{color:#75757d;font-size:12px}.badge{font-size:11px;border-radius:6px;background:#f0f0f3;color:#696972;padding:4px 7px;white-space:nowrap}.order-status{font-size:12px;margin-top:12px;color:#69717b}.doc-info{font-size:13px;line-height:1.5;margin-bottom:12px}.doc-info strong{font-size:16px;font-weight:600;display:block;color:#29292e}.search{width:100%;border:0;border-radius:10px;background:#e9e9ee;padding:12px;color:#28282c;font-size:16px;margin-bottom:12px}.tabs{display:flex;padding:3px;border-radius:10px;background:#e8e8ed;margin-bottom:12px;gap:3px}.tabs button{flex:1;min-height:38px;border:0;border-radius:8px;background:transparent;font-size:13px;color:#66666f}.tabs button.active{background:#fff;color:#27272c;box-shadow:0 1px 5px #0000000b}.summary{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#73737c;margin:10px 2px 14px;gap:8px}.summary strong{font-weight:500;color:#3b3b42}.products{background:white;border-radius:15px;overflow:hidden}.product-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #eeeef1;min-height:82px}.product-row:last-child{border-bottom:0}.photo{border:0;border-radius:9px;background:#f8f8fa;padding:2px;flex:none;width:44px;height:50px;overflow:hidden}.photo img{width:100%;height:100%;object-fit:contain;display:block}.no-photo{color:#9b9ba3;font-size:24px}.product-open{border:0;background:transparent;text-align:left;min-width:0;flex:1;padding:2px 0;color:inherit}.product-open strong{font-size:13px;line-height:1.25;font-weight:600;display:block}.variant{display:block;color:#73737b;font-size:12px;margin-top:4px;line-height:1.3}.line-status{font-size:11px;display:block;margin-top:5px;color:#a35536;line-height:1.3}.ok{color:#377c54!important}.qty{font-size:12px;white-space:nowrap;color:#70707a;margin-left:2px}.primary,.secondary{border:0;border-radius:13px;min-height:46px;padding:12px 16px;font-weight:500}.primary{background:#29292e;color:white}.secondary{background:#e9e9ef;color:#45454e}.wide{display:block;width:100%;margin-top:14px}.toolbar{display:flex;gap:8px;margin-bottom:14px}.toolbar button{flex:1;font-size:12px;min-height:42px;padding:8px}.product-card{background:white;border-radius:16px;padding:16px}.product-card .info{display:flex;align-items:center;gap:12px}.product-card .photo{width:60px;height:66px}.product-card h2{font-size:16px;font-weight:600;line-height:1.3;margin:0}.expected{font-size:13px;color:#74747d;margin:7px 0 0}.kit-result{border-top:1px solid #eeeef1;margin-top:16px;padding-top:14px}.kit-result .between{font-size:13px}.kit-result b{font-size:23px;font-weight:500;letter-spacing:-.6px;font-variant-numeric:tabular-nums}.kit-result p{font-size:12px;color:#a35536;margin:7px 0 0}.packs{background:#fff;border-radius:16px;padding:0 14px}.pack{display:grid;grid-template-columns:minmax(0,1fr) 144px;gap:4px 6px;padding:13px 0;border-bottom:1px solid #eeeef1;align-items:center}.pack:last-child{border:0}.pack-title{font-size:13px;font-weight:600}.weight{font-size:12px;color:#73737c;margin-top:4px}.counter{display:grid;grid-template-columns:44px 56px 44px;align-items:center}.counter button{border:0;border-radius:11px;background:#f0f0f4;color:#36363e;width:44px;height:44px;font-size:25px}.counter button:active{background:#dddde4}.counter output{text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.pack-status{grid-column:1/-1;font-size:12px;color:#a35536}.extra-note{font-size:12px;color:#777780;line-height:1.5}.empty{color:#74747e;text-align:center;padding:30px 12px;font-size:14px}.result-line{border-bottom:1px solid #eeeef1;padding:12px 0;font-size:13px}.result-line:last-child{border:0}.result-line p{font-size:12px;color:#a35536;margin:5px 0}.result-line small{color:#73737b}.saved{font-size:12px;color:#377c54;margin-top:10px}.number-input{font-size:22px;width:100%;text-align:center;padding:14px;border:1px solid #dddde5;border-radius:12px;margin:16px 0}.notice{font-size:12px;color:#75757e;line-height:1.5}.scan-code{width:100%;font-size:16px;border:1px solid #dddde5;border-radius:12px;padding:14px}.scan-form{margin-top:14px}dialog{border:0;border-radius:20px;padding:16px;width:min(92vw,540px);max-height:90vh;background:white}dialog::backdrop{background:#11131bb3}dialog img{display:block;max-width:100%;max-height:72vh;object-fit:contain;margin:14px auto 0}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:#313138;color:white;padding:12px 18px;border-radius:12px;font-size:13px;z-index:20;box-shadow:0 8px 30px #0002}.loading{padding:24px}.danger{color:#a35536;background:transparent;border:0;font-size:13px;margin-top:18px;padding:10px}.footer-space{margin-top:24px}@media(max-width:500px){:root{background:#f5f5f7}.preview-label{margin-top:6px}#app{border-radius:0;box-shadow:none;min-height:calc(100dvh - 50px);margin-bottom:0}header{padding-top:6px}main{padding-top:14px}}

.brand-logo{width:62px;height:35px;object-fit:contain;flex:none}header:has(+ .home) .brand-logo{width:86px;height:48px}

#search{position:sticky;top:72px;z-index:3;box-shadow:0 0 0 6px #f5f5f7}

/* Approved direction 05: Graphite. Shared by all warehouse screens. */
:root{
 color-scheme:dark;
 --canvas:#101316;--app:#171b1f;--surface:#22262b;--raised:#2b3037;
 --line:#343a42;--ink:#f1f2f5;--muted:#b1b6bf;--accent:#6572cf;
 --success:#88cfa5;--warning:#edb17c;
 font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:var(--ink);background:var(--canvas);
}
#app{background:var(--app);box-shadow:0 18px 70px #0004;border:1px solid #2d333a}
.preview-label{color:#a4aab4}
header{background:#171b1ff5;border-color:var(--line)}
header .back{color:var(--ink);display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;line-height:1;padding:0}
header .back .ui-icon{display:block;width:24px;height:24px;margin:0;flex:none}
.brand-logo{filter:brightness(0) invert(1);opacity:.94}
.muted,.eyebrow,.context,.section-title,.variant,.expected,.weight,.qty,
.notice,.extra-note,.empty,.order small,.order-status,.operation small,
.summary,.result-line small{color:var(--muted)}
.home h2{font-weight:600;letter-spacing:-.8px}
.operation,.order,.panel,.product-card,.packs,.products{background:var(--surface)}
.operation,.order{border:1px solid var(--line)}
.operation .symbol{background:#333941;color:#d6dcf5;box-shadow:inset 0 1px #ffffff0c}
.operation[data-kind="receipt"] .symbol{background:#353c61;color:#cbd1ff}
.chevron{color:#b0b7c3}
.badge{background:var(--raised);color:var(--muted)}
.doc-info strong,.summary strong{color:var(--ink)}
.search{background:var(--raised);color:var(--ink);border:1px solid #3b424c}
.search::placeholder,.scan-code::placeholder{color:#b1b7c1}
#search{box-shadow:0 0 0 6px var(--app)}
.tabs{background:var(--surface);border:1px solid var(--line)}
.tabs button{color:#c4c9d2}
.tabs button.active{background:var(--accent);color:#fff;box-shadow:inset 0 1px #ffffff1a}
.product-row,.pack,.kit-result,.result-line{border-color:var(--line)}
.photo{background:#30363d}
.photo img{border-radius:6px}
.no-photo{color:var(--muted)}
.line-status,.pack-status,.kit-result p,.result-line p,.danger{color:var(--warning)}
.ok,.saved{color:var(--success)!important}
.primary{background:var(--accent);color:#fff;box-shadow:inset 0 1px #ffffff21,0 3px 9px #0002}
.primary:hover{background:#707ddd}
.secondary{background:var(--raised);color:#e3e6ef;border:1px solid #3b424b}
.secondary:hover{background:#343b45}
.counter button{background:#3a4048;color:#e8eaf0;border:1px solid #454c56;border-radius:10px}
.counter button[data-action="plus"]{background:var(--accent);border-color:#7a85d5;color:#fff}
.counter button:active{background:#525b70}
.counter output{font-size:15px;color:var(--ink)}
button:disabled{opacity:.4}
.number-input,.scan-code{background:var(--raised);border-color:#464e59;color:var(--ink)}
dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
dialog::backdrop{background:#06080bce}
#toast{background:#363d49;color:#fff;border:1px solid #4c5563}
button:focus-visible,input:focus-visible{outline-color:#b3bcff}
.ui-icon{width:21px;height:21px;display:inline-block;vertical-align:middle;flex:none}
.symbol .ui-icon{width:28px;height:28px}
.toolbar button .ui-icon{width:17px;height:17px;margin-right:6px}
@media(max-width:500px){:root{background:var(--app)}#app{border:0}}

/* Keep labels clear of the outside focus ring. */
.scan-form>label{display:block;margin:0 0 10px;line-height:1.4}
.product-card>label.expected{display:block;margin:16px 0 10px;line-height:1.4}
.product-card>.number-input{display:block;margin:0 0 16px}

.variant-row{min-height:84px}
.variant-choice{min-height:48px}
.variant-choice strong{font-size:15px}
.variant-choice:disabled{opacity:.6}
.variant-existing{color:var(--muted);font-size:18px;padding:0 4px}
.warehouse-picker{display:grid;gap:8px;margin:0 0 16px;font-size:13px;color:var(--muted)}
.warehouse-picker select,.warehouse-picker input{width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--ink);padding:10px 12px;font:inherit;color-scheme:dark}
.warehouse-picker small{font-size:11px;line-height:1.5}
.warehouse-picker select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b1b6bf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px}
.extra-quantity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.extra-quantity-row .counter{flex-shrink:0}
.counter input{width:56px;min-width:0;height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;text-align:center;appearance:textfield;-moz-appearance:textfield}
.counter input::-webkit-inner-spin-button,.counter input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.counter button[data-action="quantity-plus"]{background:var(--accent);color:white}
.report-text{display:block;box-sizing:border-box;width:100%;height:230px;resize:vertical;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:12px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.line-status .accepted-number{display:inline;color:var(--success);font:inherit;line-height:inherit;background:none;border-radius:0;padding:0;margin:0}
.receipt-progress{display:block;max-width:110px;height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.receipt-progress>span{display:block;height:100%;background:var(--success);border-radius:inherit}
.pack-reference{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-width:0;margin-top:4px}
.package-thumb{padding:3px;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--raised)}
.package-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}
.package-add{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;color:var(--muted);border:1px dashed #505965;border-radius:8px;cursor:pointer;overflow:hidden}
.package-add>span:first-child{font-size:20px}
.package-add input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.package-add:focus-within{outline:3px solid #aeb8ff;outline-offset:2px}
.package-add:has(input:disabled){opacity:.5;pointer-events:none}
.photo-actions{display:flex;align-items:center;gap:12px;justify-content:space-between}
.photo-actions strong{font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.photo-actions button{flex:none}
.order-weight{font-size:13px;color:var(--ink);margin-top:8px;font-variant-numeric:tabular-nums}
.order-weight small{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:var(--warning)}
.draft-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.draft-toolbar .secondary{flex:none;font-size:12px;padding:10px 12px;min-height:44px}
.draft-state{font-size:11px;color:var(--muted);line-height:1.4}
.review-actions{margin-top:16px}
.order-open{display:block;width:100%;border:0;background:transparent;color:inherit;font:inherit;padding:0;text-align:left}
.packing-gap-link{display:block;width:100%;min-height:44px;padding:8px 0 0;border:0;background:transparent;text-align:left;color:var(--warning);font:inherit;font-size:11px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.packing-gap-row{padding:14px;border-bottom:1px solid var(--line)}
.packing-gap-row:last-child{border-bottom:0}
.packing-gap-row .info{display:flex;align-items:center;gap:10px}
.packing-gap-row .info>div{min-width:0}
.packing-gap-row strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.packing-gap-row ul{margin:10px 0 0;padding-left:16px;color:var(--warning);font-size:12px;line-height:1.6}
.order{position:relative}
.order-reset{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--muted)}
.order-reset:hover{color:var(--ink);border-color:#6b7481}
.order-status,.order-weight{padding-right:44px}
header h1{min-width:0;overflow-wrap:anywhere}
header{gap:8px}
.product-row .chevron{flex:none;min-width:16px;text-align:center}
.product-open strong,.product-card h2,.doc-info strong,.order p{overflow-wrap:anywhere}
.product-card .info>div{min-width:0}
.no-photo{display:flex;align-items:center;justify-content:center}
select:focus-visible,textarea:focus-visible{outline:3px solid #aeb8ff;outline-offset:2px}
@media(max-width:360px){header{padding-left:8px;padding-right:12px}header h1{font-size:17px}.brand-logo{width:54px}main{padding-left:12px;padding-right:12px}.product-row{gap:8px;padding-left:10px;padding-right:10px}.extra-quantity-row{gap:8px}.summary{flex-wrap:wrap}}

/* Supplier-order cards: separate metrics and actions, no overlapping controls. */
.order{padding:16px;border-radius:18px;overflow:hidden}
.order-top{align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.order-top small{white-space:nowrap}
.order .order-supplier{font-size:15px;line-height:1.4;margin:12px 0 6px}
.order-warehouse,.order-counts{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.order-counts{margin-top:3px}.order-counts>span{padding:0 5px}
.order-metrics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px}
.order-metric{min-width:0}.order-metric>span{display:block;color:var(--muted);font-size:11px;line-height:1.4;margin-bottom:5px}
.order .order-metric>strong{display:block;font-size:14px;line-height:1.45;font-weight:600;letter-spacing:-.2px;font-variant-numeric:tabular-nums;overflow-wrap:normal}
.packing-gap-link{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 12px;margin-top:14px;border:1px solid #efb07326;border-radius:10px;background:#efb07308;color:var(--warning);font-size:12px;line-height:1.4;text-decoration:none}
.packing-gap-link>span{min-width:0}.packing-gap-link>.ui-icon{flex:none;width:16px;height:16px}
.order-actions{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.order-continue{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;min-width:0;min-height:44px;padding:10px 12px;border:0;border-radius:10px;background:var(--raised);color:var(--ink);text-align:left;font-size:12px;font-weight:500;line-height:1.4}
.order-continue>.ui-icon{flex:none;width:16px;height:16px}
.order .order-reset{position:static;flex:none;width:44px;height:44px;border:0;border-radius:10px;background:transparent;padding:10px;color:var(--muted)}
.order-reset>.ui-icon{width:21px;height:21px}
@media(max-width:360px){.order{padding:14px}.order-metrics{gap:10px}.order .order-metric>strong{font-size:13px}}
@media(max-width:310px){.order-metrics{grid-template-columns:1fr}}

.order-receiving{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.order-receiving>div{display:flex;flex-direction:column;gap:4px;min-width:0}.order-receiving span{font-size:11px;color:var(--muted)}.order .order-receiving strong{font-size:14px;font-variant-numeric:tabular-nums}