:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#13234e;background:#f8faff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #5e9eff;outline-offset:3px}.hidden{display:none!important}header{background:#fff;border-bottom:1px solid #e8edf5}.header-inner{max-width:1376px;margin:auto;min-height:76px;padding:14px 32px;display:flex;align-items:center;gap:20px}.logo{width:190px;height:auto}.divider{height:28px;width:1px;background:#cbd3df}.vv{display:flex;gap:9px;align-items:center;white-space:nowrap}.vv b{background:#c51c14;color:#fff;border-radius:50%;padding:7px 9px;font-size:18px}.vv strong{font-size:20px;color:#66261e}.header-tag{font-size:13px;border-radius:50px;padding:8px 16px;background:#eaf2ff;color:#2252bd;font-weight:700}.header-user{margin-left:auto;border:0;background:#f3f6fb;border-radius:20px;padding:9px 14px;color:#234a9a}.view{max-width:1376px;margin:auto;padding:34px 32px}h1,h2,p{margin:0}h1{font-size:clamp(29px,3vw,48px);letter-spacing:-.03em}h2{font-size:23px}.hero{position:relative;min-height:270px;border-radius:24px;background:linear-gradient(105deg,#fff 5%,#fffaf0 100%);display:flex;overflow:hidden;align-items:center;padding:30px 38px}.hero-copy{z-index:1;max-width:72%}.hero h1{line-height:1.18}.hero em{font-style:normal;color:#2452df}.hero p{margin-top:16px;color:#62718a;line-height:1.6}.eyebrow,.section-title small,.work-head small{color:#2b5dde;font-size:12px;letter-spacing:.14em;font-weight:800;margin-bottom:9px}.products{position:absolute;right:5%;bottom:0;height:99%;display:flex;gap:3px;align-items:end}.products img{height:89%;width:auto;mix-blend-mode:multiply;object-fit:contain}.steps{display:flex;align-items:center;gap:12px;margin-top:25px;flex-wrap:wrap}.steps span{background:#ecf4ff;color:#17418b;border-radius:30px;padding:10px 17px;font-weight:700;font-size:14px}.steps i{font-style:normal;color:#3468e9;font-size:11px;margin-right:6px}.steps b{color:#83c45d}.section-title{display:flex;align-items:end;justify-content:space-between;margin:31px 0 16px}.text-button{border:0;color:#2754be;background:transparent;font-weight:700;padding:10px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:20px}.choice{border:2px solid #fff;border-radius:23px;padding:27px;display:flex;align-items:center;text-align:left;gap:19px;box-shadow:0 8px 22px #203a7812;transition:transform .2s,box-shadow .2s}.choice:hover,.choice:focus-visible{transform:translateY(-5px);box-shadow:0 14px 28px #203a7826}.choice-mobile{background:#e8f3ff}.choice-desktop{background:#fff5df}.choice-icon{width:70px;height:70px;display:grid;place-items:center;font-size:35px;border-radius:20px;background:#fff;color:#2457de}.choice-desktop .choice-icon{color:#76bb25}.choice-copy{display:grid;gap:9px;flex:1}.choice-copy strong{font-size:25px}.choice-copy small{font-size:15px;color:#66758a;line-height:1.5}.arrow{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#3062ec;color:white;font-size:25px;animation:nudge 2.5s ease-in-out infinite}.choice-desktop .arrow{background:#7cba2d;animation-delay:.4s}@keyframes nudge{0%,75%,100%{transform:translateX(0)}85%{transform:translateX(5px)}}.tip{color:#73829b;font-size:13px;margin:14px 4px 26px}.preview,.card{background:#fff;border:1px solid #e6ebf3;border-radius:21px;box-shadow:0 8px 28px #223e7810;padding:24px}.preview-heading{display:flex;align-items:baseline;gap:18px;margin-bottom:18px}.preview-heading p{color:#8994a7;font-size:13px}.preview-body{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:18px}.preview-picture{min-height:176px;border-radius:14px;background:linear-gradient(120deg,#f0f8e7,#fff7dd);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.preview-picture img{height:140px;mix-blend-mode:multiply}.preview-picture span{position:absolute;bottom:8px;color:#74856a;font-size:11px}.preview-facts{display:grid;gap:8px}.preview-facts div{background:#f4f7fc;border-radius:12px;padding:13px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.preview-facts span{color:#74829a}.preview-list{padding:5px 8px;font-size:13px}.preview-list strong{font-size:15px}.preview-list p{margin-top:13px;font-weight:700}.preview-list b{float:right;color:#2561cd}.preview-list small{color:#8291a4}.login-view{min-height:calc(100vh - 140px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;max-width:1050px}.login-box{background:#fff;border:1px solid #e5eaf3;border-radius:25px;padding:42px;box-shadow:0 18px 60px #2a4d8b12}.mini-brand{color:#3260d1;font-weight:700;margin-bottom:20px}.login-box h1{font-size:36px;line-height:1.25}.login-box>p{color:#738098;margin:14px 0 26px}.login-box label{display:block;font-size:14px;font-weight:700;margin:14px 0 8px}.login-box input{width:100%;padding:14px;border:1px solid #dce3ee;border-radius:10px}.primary,.secondary{border:0;border-radius:11px;padding:14px 20px;font-weight:700}.primary{background:#285bea;color:white}.primary:disabled{opacity:.4;cursor:not-allowed}.login-box .primary{width:100%;margin:20px 0 12px}.primary span{float:right}.login-box small{color:#a0aaba}.login-art{display:flex;align-items:end;justify-content:center;position:relative}.login-art img{height:340px;mix-blend-mode:multiply;z-index:1}.sun{position:absolute;width:360px;height:360px;border-radius:50%;background:#fbf1d4}.error{color:#c6443e!important;font-size:13px}.work-head{display:flex;gap:24px;align-items:center;margin:5px 0 27px}.work-head h1{font-size:32px}.work-head p{color:#8490a3;margin-top:7px}.work-head .text-button{margin-left:auto}.back{border:1px solid #e0e7f1;border-radius:10px;background:#fff;padding:11px}.work-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.upload-empty{min-height:330px;display:grid;place-content:center;justify-items:center;text-align:center;border:2px dashed #d5e1f3;border-radius:16px;background:#fafcff}.upload-icon{width:64px;height:64px;border-radius:18px;background:#ebf3ff;color:#2f63eb;font-size:36px;display:grid;place-items:center;animation:nudge 2.5s ease-in-out infinite}.upload-empty h2{margin:16px 0 8px}.upload-empty p,.notice{color:#8994a5;font-size:13px}.image-preview{display:block;max-width:100%;max-height:520px;object-fit:contain;margin:auto;border-radius:12px}.upload-actions{display:flex;gap:10px;margin-top:20px}.upload-actions button{flex:1}.secondary{background:#edf3ff;color:#2755c5}.notice{margin-top:12px;line-height:1.5}.result-empty{min-height:350px;display:grid;place-content:center;text-align:center;color:#8a96a8}.result-empty span{font-size:38px;color:#a7bdf4}.result-empty h2{font-size:20px;color:#344765;margin:13px 0}.result-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.result-facts div{background:#f4f7fc;padding:13px;border-radius:10px}.result-facts small{display:block;color:#8590a1;margin-bottom:5px}.sku{border:1px solid #e5ebf2;border-radius:11px;padding:13px;margin-top:10px}.sku summary{cursor:pointer;font-weight:700}.sku p{margin:8px 0 0 19px;color:#68768b;font-size:14px}.history-row{display:flex;width:100%;gap:10px;align-items:center;padding:15px 4px;border:0;border-bottom:1px solid #eff2f6;background:#fff;text-align:left}.history-row span{flex:1}.history-row small{color:#8a95a4}.annotated{position:relative;display:inline-block;max-width:100%}.annotated img{display:block;width:100%;height:auto}.box{position:absolute;border:2px solid #5ac23c;pointer-events:none}.box label{position:absolute;bottom:100%;left:0;font-size:10px;color:#fff;background:#168f31;white-space:nowrap;max-width:120px;overflow:hidden}.visual{margin:15px 0}.danger{color:#be4a43}footer{text-align:center;color:#a3adbc;font-size:12px;padding:25px}@media(max-width:760px){.header-inner{min-height:62px;padding:12px 18px;gap:10px}.logo{width:125px}.vv strong{font-size:15px}.vv b{font-size:13px;padding:5px}.header-tag{display:none}.header-user{font-size:12px}.view{padding:22px 16px}.hero{min-height:230px;padding:26px 20px;align-items:flex-start}.hero-copy{max-width:100%}.hero h1{font-size:29px;max-width:290px}.hero p{font-size:13px;max-width:66%}.products{height:49%;right:3%;bottom:4px}.steps{gap:5px;margin-top:17px}.steps span{padding:7px 9px;font-size:11px}.steps b{font-size:11px}.choices,.work-grid,.preview-body{grid-template-columns:1fr}.choice{padding:19px;gap:13px}.choice-copy strong{font-size:20px}.choice-copy small{font-size:13px}.choice-icon{width:54px;height:54px;font-size:28px}.arrow{width:39px;height:39px}.preview{padding:17px}.preview-heading{display:block}.preview-heading p{margin-top:7px}.preview-picture{min-height:135px}.preview-picture img{height:112px}.preview-facts{grid-template-columns:repeat(3,1fr)}.preview-facts div{display:block;font-size:12px}.preview-facts b{display:block;margin-top:6px}.login-view{display:flex;flex-direction:column-reverse;justify-content:center;gap:8px;min-height:calc(100vh - 120px)}.login-box{padding:26px;width:100%}.login-box h1{font-size:27px}.login-art img{height:150px}.sun{width:165px;height:165px}.work-head{gap:12px}.work-head h1{font-size:24px}.work-head p{font-size:12px}.upload-empty{min-height:260px}.upload-actions{flex-wrap:wrap}.upload-actions button{min-width:120px}.result-empty{min-height:200px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.preview-picture{background-image:url(/assets/design-reference.png);background-size:235% auto;background-position:3% 99%;background-repeat:no-repeat}

.choice-icon img{display:block;width:84%;height:84%;object-fit:contain}

.work-grid.has-result{grid-template-columns:minmax(190px, .48fr) minmax(0, 2fr);align-items:start}
.has-result .upload-card{padding:16px}
.has-result .image-preview{width:100%;max-height:200px}
.has-result .upload-actions{flex-direction:column}
.result-card.result-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:22px;align-items:start}
.result-image,.result-details{min-width:0}
.result-image h2,.result-details h2{font-size:20px}
.sku-filter,.layer-filter{font:inherit;text-align:left;border:0;background:transparent;color:inherit;cursor:pointer}
.sku-filter{font-weight:700;max-width:calc(100% - 20px);overflow-wrap:anywhere}
.layer-filter{display:block;margin:6px 0 0 19px;padding:6px 9px;border-radius:6px;color:#68768b;font-size:14px}
.sku-filter.active,.layer-filter.active{color:#1858c8;background:#eaf2ff}
.box.dimmed{opacity:.18}.box.dimmed label{display:none}.box.selected{border:3px solid #ff8b1e;box-shadow:0 0 0 2px #fff,0 0 10px #ff8b1e;z-index:2}.box.selected label{background:#c74b00}
@media(max-width:900px){.work-grid.has-result{grid-template-columns:1fr}.has-result .upload-actions{flex-direction:row;flex-wrap:wrap}.result-card.result-layout{grid-template-columns:1fr}.has-result .image-preview{max-height:180px}}

/* 识别结果：固定查看窗口和紧凑明细 */
.upload-target{cursor:pointer;border-radius:16px}.upload-target:focus-visible{outline:3px solid #5e9eff;outline-offset:3px}.upload-target[aria-disabled=true]{cursor:wait;opacity:.7}
.result-card.result-layout{gap:14px;padding:16px}.result-facts{gap:6px;margin:10px 0}.result-facts div{padding:9px}.result-facts small{margin-bottom:3px}.sku{padding:9px;margin-top:6px}.layer-filter{padding:4px 8px;margin-top:3px}.result-layout .visual{height:500px;overflow:auto;background:#f3f5f8;border:1px solid #e5eaf1;border-radius:10px;margin:8px 0;display:flex;align-items:flex-start}.result-layout .annotated{flex:none;max-width:none;margin:auto}.result-layout .annotated img{width:100%;height:auto}.zoom-controls{display:flex;align-items:center;gap:6px;margin-top:8px}.zoom-controls button{border:1px solid #dce5f1;background:#fff;color:#234c98;border-radius:7px;min-width:31px;height:30px;cursor:pointer}.zoom-controls span{font-size:12px;color:#6f7c91;min-width:40px;text-align:center}.result-image .text-button{padding:6px 0}.result-image .notice:empty{display:none}

/* 使用接口返回的 SKU 颜色；选中时以光晕强调，保留边框原色。 */
.box{border-color:var(--box-color,#5ac23c)}
.box.selected{border-color:var(--box-color,#5ac23c)}

/* 识别过程与标注操作 */
.show-all-boxes{display:block;width:100%;margin:8px 0;padding:9px 12px;border:1px solid #c9d9f4;border-radius:9px;background:#f2f7ff;color:#2456bd;font-weight:700;text-align:center;cursor:pointer}.show-all-boxes:hover{background:#e5efff}
.recognition-progress{margin:0 0 16px;padding:16px 20px;border:1px solid #d6e4fb;border-radius:16px;background:linear-gradient(105deg,#f4f8ff,#fffdf4);box-shadow:0 6px 20px #244b8910}.progress-heading{display:flex;align-items:center;gap:12px}.progress-heading strong{font-size:16px}.progress-heading p{font-size:13px;color:#718099;margin-top:4px}.progress-spinner{width:23px;height:23px;border:3px solid #cbdafa;border-top-color:#2c5deb;border-radius:50%;animation:progress-spin .8s linear infinite;flex:none}.progress-steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.progress-steps span{font-size:12px;color:#8997aa;background:#eef2f8;border-radius:20px;padding:6px 10px}.progress-steps span.current{color:#1b4fc4;background:#dceaff;font-weight:700}.progress-steps span.done{color:#3f8131;background:#e8f5e4}.recognition-progress.failed{border-color:#f1d2cf;background:#fff7f6}.recognition-progress.failed .progress-spinner{animation:none;border-color:#e6aaa4}.recognition-progress.failed .progress-heading strong{color:#ac3933}@keyframes progress-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.progress-spinner{animation:none}}