:root{--navy:#082b61;--blue:#0867dc;--ice:#eaf4ff;--ice-strong:#d8ebff;--text:#112b4c;--muted:#6c7f98;--line:#dce6f1;--green:#00a99d;--danger:#d94c4c;--white:#fff;--shadow:0 14px 40px #13365f1f}*{box-sizing:border-box}html{background:#f4f8fd}body{min-width:320px;min-height:100vh;color:var(--text);-webkit-font-smoothing:antialiased;background:#f4f8fd;margin:0;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,-apple-system,sans-serif}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #0867dc47}.app-shell{background:var(--white);max-width:1180px;min-height:100vh;margin:0 auto}.topbar{border-bottom:1px solid var(--line);z-index:30;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff2;grid-template-columns:1fr auto 1fr;align-items:center;height:80px;padding:0 24px;display:grid;position:sticky;top:0}.topbar-title{text-align:center;flex-direction:column;gap:2px;display:flex}.topbar-title strong{letter-spacing:.03em;font-size:22px}.topbar-title span{color:var(--muted);font-size:12px}.date-picker{color:var(--muted);justify-content:center;align-items:center;gap:6px;font-size:12px;font-weight:800;display:flex}.date-picker input{border:1px solid var(--line);height:28px;color:var(--navy);background:#fff;border-radius:8px;padding:0 6px;font-size:12px;font-weight:900}.topbar-actions{justify-self:end;align-items:center;gap:8px;display:flex}.icon-button{cursor:pointer;background:0 0;border:0;border-radius:14px;place-items:center;width:44px;height:44px;display:inline-grid}.icon-button:hover{background:var(--ice)}.live-pill{color:#008d99;cursor:pointer;background:#eafcfc;border:0;border-radius:999px;align-items:center;gap:5px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-flex}.category-tabs{z-index:25;border-bottom:1px solid var(--line);scrollbar-width:none;background:#fff;padding:0 18px;display:flex;position:sticky;top:80px;overflow-x:auto}.category-tabs::-webkit-scrollbar{display:none}.category-tabs button{color:#53677f;cursor:pointer;background:#fff;border:0;border-bottom:3px solid #0000;flex:1 0 auto;min-width:88px;height:60px;padding:0 16px;font-size:16px;font-weight:700}.category-tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}.catalog-head{justify-content:space-between;align-items:end;padding:26px 26px 18px;display:flex}.catalog-head h1{margin:0 0 4px;font-size:24px}.catalog-head p{color:var(--muted);margin:0;font-size:14px}.refresh-button{background:var(--ice);color:var(--blue);cursor:pointer;border:0;border-radius:12px;align-items:center;gap:5px;padding:9px 12px;font-weight:700;display:inline-flex}.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0 24px;display:grid}.product-card{border:1.5px solid var(--line);content-visibility:auto;contain-intrinsic-size:260px 350px;background:#fff;border-radius:16px;min-width:0;transition:border-color .18s,box-shadow .18s,transform .18s;overflow:hidden}.product-card.selected{border-color:var(--blue);box-shadow:0 0 0 2px #0867dc1c}.product-card.sold-out{opacity:.58}.product-image-button{aspect-ratio:1/1.18;cursor:pointer;background:#fff;border:0;width:100%;padding:0;display:block;position:relative;overflow:hidden}.product-image-button:disabled{cursor:not-allowed}.product-image-button img{object-fit:contain;background:#fff;width:100%;height:100%;transition:transform .25s;display:block}.product-image-button:hover img{transform:scale(1.018)}.selected-mark{color:var(--blue);filter:drop-shadow(0 2px 4px #00000024);position:absolute;top:12px;right:12px}.quantity-mark{color:#fff;background:#ff3b30;border:4px solid #fff;border-radius:999px;justify-content:center;align-items:center;min-width:52px;height:52px;padding:0 10px;font-size:23px;font-weight:1000;display:inline-flex;position:absolute;bottom:10px;right:10px;box-shadow:0 8px 18px #ff3b3047}.stock-badge{color:var(--text);background:#ffffffeb;border:1px solid #0c2f5814;border-radius:9px;padding:6px 9px;font-size:13px;font-weight:800;position:absolute;bottom:10px;right:10px}.product-card.selected .stock-badge{inset:10px auto auto 10px}.catalog-sku-badge{color:#fff;background:#082b61eb;border-radius:9px;padding:6px 9px;font-size:12px;font-weight:900;position:absolute;bottom:10px;left:10px}.stock-badge.low{color:#bd5b14;background:#fff7e9}.size-row{border-top:1px solid var(--line);align-items:center;gap:9px;padding:10px;display:flex}.sku-label{color:var(--navy);min-width:32px;font-size:13px;font-weight:900}.size-options{flex:1;gap:5px;min-width:0;display:flex;overflow-x:auto}.size-options button{cursor:pointer;background:#f0f4f9;border:0;border-radius:9px;justify-content:center;align-items:center;gap:3px;min-width:42px;height:36px;font-size:12px;font-weight:800;display:flex}.size-options button small{color:var(--muted);font-size:9px}.size-options button.active{background:var(--blue);color:#fff}.size-options button.active small{color:#dcecff}.size-options button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}.quantity-row{border-top:1px solid var(--line);background:#f7fbff;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;padding:9px 10px;display:grid}.quantity-row button{background:var(--blue);color:#fff;cursor:pointer;border:0;border-radius:11px;height:38px;font-size:24px;font-weight:900;line-height:1}.quantity-row button:disabled{cursor:not-allowed;background:#b5c5d6}.quantity-row input{border:1px solid var(--ice-strong);width:100%;height:38px;color:var(--navy);text-align:center;background:#fff;border-radius:11px;font-size:20px;font-weight:1000}.load-more{border:1px solid var(--line);background:var(--ice);min-height:52px;color:var(--blue);cursor:pointer;border-radius:14px;grid-column:1/-1;font-weight:800}.selection-bar{width:min(1180px,100%);height:calc(82px + env(safe-area-inset-bottom));padding:10px 18px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:35;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffff7;grid-template-columns:1fr minmax(180px,42%);align-items:center;display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.selection-count{align-items:baseline;gap:10px;padding-left:8px;display:flex}.selection-count-button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:14px;min-height:52px}.selection-count-button:disabled{cursor:not-allowed;opacity:.55}.selection-count-button:not(:disabled):hover{background:var(--ice)}.selection-count span{font-weight:700}.selection-count strong{color:var(--blue);font-size:29px}.selection-count small{color:var(--navy);font-size:16px}.selection-count em{color:var(--muted);font-size:13px;font-style:normal;font-weight:800}.selection-bar>button:not(.selection-count-button),.primary-button{background:var(--blue);color:#fff;cursor:pointer;border:0;border-radius:14px;justify-content:center;align-items:center;gap:7px;min-height:52px;font-size:16px;font-weight:800;text-decoration:none;display:inline-flex}.selection-bar>button:not(.selection-count-button):disabled,.primary-button:disabled{cursor:not-allowed;background:#b5c5d6}.bottom-bar-spacer{height:112px}.modal-backdrop{z-index:60;background:#03162e80;justify-content:center;align-items:flex-end;padding-top:30px;display:flex;position:fixed;inset:0}.sheet{width:min(560px,100%);max-height:92vh;padding:14px 22px calc(24px + env(safe-area-inset-bottom));box-shadow:var(--shadow);background:#fff;border-radius:26px 26px 0 0;overflow-y:auto}.sheet-handle{background:#d4dce6;border-radius:9px;width:42px;height:5px;margin:0 auto 12px}.sheet-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.sheet-head p{color:var(--blue);margin:0 0 4px;font-size:13px;font-weight:800}.sheet-head h2{margin:0;font-size:23px}.sheet form,.login-panel form{gap:16px;display:grid}.sheet label,.login-panel label{color:#50647d;gap:8px;font-size:13px;font-weight:700;display:grid}.sheet input,.login-panel input{width:100%;height:52px;color:var(--text);background:#fff;border:1.5px solid #cfdbe8;border-radius:12px;padding:0 14px;font-size:16px}.sheet input:focus,.login-panel input:focus{border-color:var(--blue)}.privacy-note{background:var(--ice);color:#316a9e;border-radius:12px;align-items:center;gap:8px;padding:12px 14px;font-size:13px;display:flex}.form-error{color:var(--danger);margin:-4px 0 0;font-size:13px}.toast{z-index:100;color:#fff;box-shadow:var(--shadow);background:#102d50;border-radius:12px;max-width:calc(100% - 32px);padding:11px 16px;font-size:14px;position:fixed;bottom:104px;left:50%;transform:translate(-50%)}.selection-sheet{max-width:680px}.selection-list{gap:10px;display:grid}.selection-item{border:1px solid var(--line);background:#f8fbff;border-radius:16px;grid-template-columns:82px 1fr 132px;align-items:center;gap:12px;padding:10px;display:grid}.selection-thumb{background:#fff;border:1px solid #e6eef7;border-radius:12px;width:82px;height:96px;position:relative;overflow:hidden}.selection-thumb img{object-fit:contain;width:100%;height:100%;display:block}.selection-thumb span{color:#fff;background:#ff3b30;border:3px solid #fff;border-radius:999px;justify-content:center;align-items:center;min-width:34px;height:34px;font-size:15px;font-weight:1000;display:inline-flex;position:absolute;bottom:5px;right:5px}.selection-info{gap:5px;min-width:0;display:grid}.selection-info strong{color:var(--navy);text-overflow:ellipsis;white-space:nowrap;font-size:16px;overflow:hidden}.selection-info small{color:var(--muted);font-size:12px;font-weight:800}.selection-controls{grid-template-columns:34px 1fr 34px;align-items:center;gap:6px;display:grid}.selection-controls button{background:var(--blue);color:#fff;cursor:pointer;border:0;border-radius:10px;height:34px;font-size:21px;font-weight:900}.selection-controls button:disabled{cursor:not-allowed;background:#b5c5d6}.selection-controls input{border:1px solid var(--ice-strong);text-align:center;width:100%;height:34px;color:var(--navy);background:#fff;border-radius:10px;font-size:17px;font-weight:1000}.selection-sheet-actions{background:linear-gradient(#ffffffd1,#fff 18%);grid-template-columns:1fr 1.3fr;gap:10px;margin-top:14px;padding-top:12px;display:grid;position:sticky;bottom:-24px}.selection-sheet-actions>button:first-child{border:1px solid var(--line);min-height:52px;color:var(--navy);cursor:pointer;background:#fff;border-radius:14px;font-weight:900}.sort-sheet{max-width:760px}.sort-hint{color:#4d6682;background:#f0f7ff;border-radius:13px;margin:-8px 0 14px;padding:11px 13px;font-size:13px;line-height:1.55}.sort-grid{--sort-columns:3;grid-template-columns:repeat(var(--sort-columns), minmax(0, 1fr));gap:10px;display:grid}.sort-card{border:1px solid var(--line);aspect-ratio:1/1.24;background:#fff;border-radius:15px;min-width:0;transition:transform .16s,box-shadow .16s,border-color .16s;position:relative;overflow:hidden;box-shadow:0 10px 26px #13365f12}.sort-card.dragging{border-color:var(--blue);opacity:.78;transform:scale(.965);box-shadow:0 18px 38px #0867dc2e}.sort-card img{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;background:#fff;width:100%;height:100%;display:block}.sort-drag-handle{z-index:3;color:#fff;cursor:grab;touch-action:none;background:#082b61e6;border:0;border-radius:11px;place-items:center;width:34px;height:34px;display:grid;position:absolute;top:7px;left:7px;box-shadow:0 8px 18px #082b6138}.sort-drag-handle:active{cursor:grabbing}.sort-index{z-index:2;min-width:30px;height:30px;color:var(--navy);background:#fffffff0;border-radius:10px;justify-content:center;align-items:center;font-size:13px;font-weight:1000;display:inline-flex;position:absolute;top:7px;left:45px;box-shadow:0 6px 14px #082b611f}.sort-quantity{z-index:2;color:#fff;background:#ff3b30;border:3px solid #fff;border-radius:999px;justify-content:center;align-items:center;min-width:38px;height:38px;padding:0 8px;font-size:17px;font-weight:1000;display:inline-flex;position:absolute;bottom:42px;right:7px;box-shadow:0 8px 18px #ff3b304d}.sort-label{z-index:2;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;background:#082b61eb;border-radius:10px;min-height:28px;padding:6px 8px;font-size:12px;font-weight:950;position:absolute;bottom:42px;left:7px;right:7px;overflow:hidden}.sort-nudge{z-index:3;border-top:1px solid var(--line);background:#f8fbfff5;grid-template-columns:1fr 1fr;display:grid;position:absolute;bottom:0;left:0;right:0}.sort-nudge button{min-height:36px;color:var(--blue);cursor:pointer;background:0 0;border:0;font-size:12px;font-weight:900}.sort-nudge button+button{border-left:1px solid var(--line)}.sort-nudge button:disabled{color:#a8b5c3;cursor:not-allowed}.result-sheet{max-width:640px}.success-callout{color:#00877e;background:#eafbf8;border-radius:12px;align-items:center;gap:8px;margin-bottom:14px;padding:11px 13px;font-weight:700;display:flex}.report-preview{object-fit:contain;background:#f2f5f8;border-radius:14px;width:100%;max-height:58vh;display:block}.download-button{margin-top:14px}.drawer{width:min(520px,100%);height:min(86vh,780px);padding:22px 18px calc(20px + env(safe-area-inset-bottom));background:#fff;border-radius:26px 26px 0 0;overflow-y:auto}.order-list{gap:10px;display:grid}.order-row{cursor:pointer;background:#f8fafc;border:1px solid #0000;border-radius:14px;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:14px;display:grid}.order-row:hover{border-color:var(--ice-strong);background:#f2f8ff}.order-row:focus-visible{outline-offset:2px;outline:3px solid #0867dc47}.order-row.cancelled{opacity:.56}.order-icon{background:var(--ice);width:38px;height:38px;color:var(--blue);border-radius:12px;place-items:center;display:grid}.order-copy{flex-direction:column;gap:4px;min-width:0;display:flex}.order-copy strong{font-size:14px}.order-copy span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.cancel-button{color:var(--danger);cursor:pointer;background:#fff0f0;border:0;border-radius:9px;padding:8px 10px;font-weight:800}.status-text{color:var(--muted);font-size:12px}.drawer-actions{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;padding-top:16px;display:grid}.drawer-actions button,.add-user-button{border:1px solid var(--line);min-height:46px;color:var(--navy);cursor:pointer;background:#fff;border-radius:12px;justify-content:center;align-items:center;gap:7px;font-weight:800;display:inline-flex}.add-user-button{background:var(--ice);width:100%;color:var(--blue);border-color:var(--ice-strong)}.new-user-form{border:1px solid var(--line);background:#f8fbfe;border-radius:14px;gap:12px;margin:14px 0;padding:14px;display:grid}.new-user-form label{color:var(--muted);gap:6px;font-size:12px;font-weight:700;display:grid}.new-user-form input{border:1px solid #cfdbe8;border-radius:10px;height:44px;padding:0 11px}.user-list{gap:9px;margin-top:16px;display:grid}.user-row{background:#f8fafc;border-radius:13px;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:12px;display:grid}.user-row>div:nth-child(2){flex-direction:column;gap:3px;display:flex}.user-row strong{font-size:14px}.user-row span{color:var(--muted);font-size:11px}.user-row button{cursor:pointer;border:0;border-radius:9px;padding:8px 10px;font-weight:800}.user-row button.deactivate{color:var(--danger);background:#fff0f0}.user-row button.activate{color:#00877e;background:#eafbf8}.login-screen{background:#edf6ff;place-items:center;min-height:100vh;padding:28px 18px;display:grid}.login-panel{text-align:center;background:#fff;border:1px solid #dce7f2;border-radius:26px;width:min(430px,100%);padding:36px;box-shadow:0 26px 70px #1c416c24}.login-brand{background:var(--navy);color:#fff;border-radius:22px;place-items:center;width:70px;height:70px;margin:0 auto 16px;font-size:31px;font-weight:900;display:grid}.eyebrow{color:var(--blue);letter-spacing:.16em;margin:0 0 6px;font-size:11px;font-weight:900}.login-panel h1{margin:0;font-size:28px}.login-subtitle{color:var(--muted);margin:8px 0 26px;font-size:14px}.login-panel label{text-align:left}.demo-hint{color:#8a9aab;margin:18px 0 0;font-size:11px}.center-state,.empty-state{min-height:260px;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.spinner{border:3px solid var(--ice-strong);border-top-color:var(--blue);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}.skeleton-card{aspect-ratio:1/1.25;background:#eef3f8;border-radius:16px;animation:1.4s infinite alternate pulse}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{to{opacity:.58}}@media (max-width:760px){.app-shell{width:100%}.topbar{height:68px;padding:0 12px}.topbar-title strong{font-size:20px}.date-picker{gap:4px;font-size:10px}.date-picker input{max-width:128px;height:26px;font-size:11px}.category-tabs{padding:0;top:68px}.category-tabs button{min-width:94px;height:54px;padding:0 14px;font-size:15px}.catalog-head{padding:20px 14px 14px}.catalog-head h1{font-size:20px}.catalog-head p{font-size:12px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 10px}.product-card{border-radius:12px}.product-image-button{aspect-ratio:1/1.45}.size-row{padding:8px;display:block}.sku-label{margin:0 0 6px 2px;display:block}.size-options button{min-width:38px;height:34px}.live-pill{padding:7px 9px;font-size:11px}.desktop-user{display:none}.refresh-button{padding:8px;font-size:12px}.selection-bar{height:calc(80px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);grid-template-columns:50% 50%}.selection-count-button{border-radius:0;height:80px;padding-left:14px}.selection-bar>button:not(.selection-count-button){border-radius:0;height:80px}.selection-item{grid-template-columns:72px 1fr}.selection-thumb{width:72px;height:86px}.selection-controls{grid-column:2;width:132px}.sort-sheet{max-height:94vh;padding-left:14px;padding-right:14px}.sort-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sort-card{border-radius:12px}.sort-drag-handle{width:32px;height:32px;top:6px;left:6px}.sort-index{min-width:28px;height:28px;top:6px;left:42px}.sort-label{font-size:11px;bottom:38px}.sort-quantity{min-width:34px;height:34px;font-size:15px;bottom:38px;right:6px}.sort-nudge button{min-height:34px;font-size:11px}.bottom-bar-spacer{height:104px}.login-panel{border-radius:22px;padding:30px 22px}}@media (max-width:520px){.catalog-head{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
