:root{font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#202b37;background:#edf0f3;font-synthesis:none;font-size:14px;--ink:#1c2937;--line:#e3e7ec;--accent:#365f72;--muted:#6a7684}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #80b2d1;outline-offset:3px}button:disabled{opacity:.35;cursor:default}.topbar{height:76px;background:#1b2736;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:20px}.brand{display:flex;align-items:center;gap:13px}.brand-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #6a7a8e;border-radius:10px;font-size:26px;color:#d6e5ed}.brand strong{font-size:18px;letter-spacing:.04em}.brand div>span{font-size:12px;margin-left:15px;color:#c1ccd6}.top-actions{display:flex;align-items:center;gap:13px}.top-actions>span{color:#bfcbd7;font-size:12px;margin-right:8px}.top-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#e4ecf3;border:1px solid #516071;border-radius:7px;padding:8px 12px;font-size:12px;white-space:nowrap}.top-button:hover{background:#2d3d4e}.style-nav{display:flex;gap:6px;min-height:81px;padding:13px 24px 12px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}.style-option{flex:1;min-width:104px;max-width:190px;border:1px solid transparent;background:transparent;border-radius:8px;text-align:left;padding:9px 12px;color:#627080;white-space:nowrap}.style-option:hover{background:#f1f4f7}.style-option.active{background:#edf2f5;border-color:#becbd5;color:#162e42}.style-option .style-label{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600}.style-number{font-weight:400;color:#6c7885;font-size:11px}.swatches{display:flex;gap:4px;margin-top:7px;padding-left:21px}.swatch{width:17px;height:5px;border-radius:3px;border:1px solid #00000010}.workspace{display:flex;min-height:calc(100vh - 157px)}.sidebar{width:225px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);padding:23px 14px 18px;display:flex;flex-direction:column}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:0 10px 18px}.overline{font-size:12px;color:#728090}.sidebar-header strong{font-size:12px;background:#edf0f4;font-weight:400;padding:2px 7px;border-radius:4px;margin-left:9px}.page-group{margin:13px 0 20px}.page-group h2{font-size:12px;margin:0 11px 8px;color:#6b7886;font-weight:500}.page-link{width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:10px 11px;font-size:13px;color:#475565;display:flex;gap:11px;align-items:center;line-height:1.45;min-height:38px}.page-link:hover{background:#f4f6f8}.page-link.active{background:#eaf0f4;color:#234d68;font-weight:600}.page-index{font-size:11px;color:#8a95a1;min-width:15px;font-weight:400}.page-link.active .page-index{color:#537a94}.sidebar-note{margin:24px 10px 0;padding-top:15px;border-top:1px solid #edf0f3;color:#7b8793;font-size:11px;line-height:1.8}.main{flex:1;min-width:0;padding:29px 32px 0;display:flex;flex-direction:column}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.heading-title{display:flex;align-items:center;gap:10px}.breadcrumb{font-size:12px;color:#728090;margin-bottom:7px}h1{font-size:23px;font-weight:600;margin:0;letter-spacing:.01em}.view-switch{display:flex;background:#e1e6ec;padding:3px;border-radius:7px}.view-switch button{background:transparent;border:0;color:#697585;padding:8px 13px;border-radius:5px;font-size:12px;white-space:nowrap}.view-switch button.active{background:#fff;color:#1c3a50;box-shadow:0 1px 3px #233b5210}.view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:white;border:1px solid #e0e5ea;border-radius:9px 9px 0 0;padding:11px 16px;min-height:59px}.current-style{display:flex;align-items:center;gap:8px;min-width:0}.current-style>span:first-child{width:8px;height:8px;border-radius:50%;background:#315b48;flex-shrink:0}.current-style strong{font-size:12px;white-space:nowrap}.current-style>span:last-child{font-size:11px;color:#7b8794;max-width:370px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tools{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;color:#5c6b7b}.icon-button{display:inline-grid;place-items:center;width:29px;height:29px;border:0;border-radius:5px;color:#526579;background:transparent;font-size:17px}.icon-button:hover{background:#edf2f6}.tool-button{border:0;background:none;color:#526579;display:inline-block;padding:6px 7px;font-size:12px;border-radius:4px}.tool-button:hover,.tool-button[aria-pressed=true]{background:#edf2f6;color:#214967}.tool-divider{width:1px;background:#e0e5eb;height:18px;margin:0 3px}#page-position{font-variant-numeric:tabular-nums;min-width:36px;text-align:center}#zoom-value{font-size:11px;min-width:35px;text-align:center;font-variant-numeric:tabular-nums}.image-stage{position:relative;border:1px solid #e0e5ea;border-top:0;background-color:#e7ebef;background-image:radial-gradient(#aebbc950 .65px,transparent .65px);background-size:12px 12px;border-radius:0 0 9px 9px;min-height:590px;height:calc(100vh - 344px);overflow:auto;padding:35px;display:flex;align-items:flex-start;justify-content:center}.image-stage.zoomed{justify-content:flex-start}.image-canvas{margin:auto;position:relative;flex-shrink:0;transition:width .12s ease;max-width:none}.image-canvas img{display:block;width:100%;height:auto;box-shadow:0 8px 30px #162b4320;background:#fff}.image-canvas.portrait img{border-radius:10px}.image-canvas.landscape img{border-radius:5px}.image-canvas.fitted{height:100%;width:auto;max-width:100%}.image-canvas.fitted img{object-fit:contain;width:auto;height:100%;max-width:100%;max-height:100%;box-shadow:none;border-radius:0}.image-canvas.fitted.portrait img{filter:drop-shadow(0 7px 15px #162b4318)}.loading-box,.unavailable-box,.initial-state{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;text-align:center;color:#6e7b89;line-height:1.8}.loading-box{width:320px;border-radius:10px;background:#ffffff90;border:1px solid #ffffff}.loading-circle{height:24px;width:24px;border:2px solid #cdd6df;border-top-color:#66889e;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{to{transform:rotate(360deg)}}.unavailable-box{min-height:430px;max-width:500px;gap:8px}.unavailable-symbol{font-size:40px;color:#9aa9b7}.unavailable-box strong{font-size:16px;font-weight:500;color:#516476}.unavailable-box p{margin:0;font-size:12px}.retry-button{background:#fff;border:1px solid #bfcbd5;border-radius:5px;padding:8px 15px;color:#3a5b74;margin-top:10px}.page-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;font-size:11px;color:#748291;padding:15px 1px 20px;line-height:1.8}.page-footer details{max-width:740px}.page-footer summary{cursor:pointer;color:#576a7b}.page-footer p{font-size:12px;color:#586a7a;white-space:pre-line;margin:8px 0 0}.keyboard-hint{white-space:nowrap;color:#7e8c99}.compare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));align-items:start;gap:22px;width:100%}.image-stage.comparing{height:auto;min-height:590px;padding:25px;display:block}.compare-card{background:#fff;border:1px solid #d9e1e8;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #23384f06}.compare-card.selected{border:2px solid #5e839b}.compare-card button{border:0;background:white;padding:0;display:block;width:100%;text-align:left;color:inherit}.compare-card header{padding:12px 13px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #e8edf1;font-size:12px}.compare-card header>span{color:#8b97a1;font-size:11px}.compare-card img{width:100%;height:auto;display:block}.compare-card .compare-placeholder{padding:30px 15px;min-height:220px;color:#8292a0;font-size:12px;text-align:center;display:grid;place-items:center;background:#f4f6f8}.compare-card footer{padding:9px 13px;color:#7b8997;font-size:11px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,10px);padding:10px 18px;border-radius:7px;background:#24394ee8;color:white;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:30}.toast.visible{opacity:1;transform:translate(-50%,0)}.mobile-menu,.sidebar-close{display:none}.sidebar-shade{display:none}[hidden]{display:none!important}@media(min-width:1800px){.main{padding-left:50px;padding-right:50px}.image-stage{min-height:680px}.style-option{min-width:145px}}@media(max-width:1150px){.topbar{padding:0 20px}.main{padding:24px 22px 0}.sidebar{width:200px}.current-style>span:last-child{display:none}.style-nav{padding-left:15px;padding-right:15px}.style-option{padding:9px;min-width:100px}.image-stage{padding:25px;min-height:530px}.keyboard-hint{display:none}}@media(max-width:760px){.topbar{height:65px;padding:0 16px}.brand strong{font-size:16px}.brand div>span{display:block;margin-left:0;margin-top:3px;font-size:11px}.brand-icon{display:none}.top-actions{gap:6px}.top-actions>span{display:none}.top-button{padding:7px 8px;font-size:11px}.style-nav{min-height:75px;padding:10px 12px;gap:3px}.style-option{min-width:105px;flex:0 0 auto}.workspace{min-height:calc(100vh - 140px)}.sidebar{display:none;position:fixed;left:0;top:0;bottom:0;overflow:auto;width:255px;z-index:22;box-shadow:12px 0 35px #10213333}.sidebar.open{display:flex}.sidebar-close{display:grid}.sidebar-shade:not([hidden]){display:block;position:fixed;inset:0;z-index:21;background:#19263770;border:0;width:100%;height:100%}.main{padding:18px 12px 0}.page-heading{gap:10px;margin-bottom:16px}.mobile-menu{display:grid;margin-left:-4px}.heading-title{gap:4px}.breadcrumb{font-size:10px;margin-bottom:5px}h1{font-size:19px}.view-switch button{padding:7px 9px;font-size:11px}.view-toolbar{padding:9px 10px;gap:8px}.current-style{width:100%}.tools{width:100%;justify-content:space-between;gap:1px}.icon-button{width:25px;height:27px}.tool-button{font-size:11px;padding:6px 4px}.tool-divider{margin:0 2px}.image-stage{padding:18px 10px;min-height:510px;height:calc(100vh - 330px)}.page-footer{font-size:11px;padding:12px 3px 20px}.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.image-stage.comparing{padding:12px}.compare-card header{padding:9px 7px;gap:5px;font-size:11px}.compare-card footer{font-size:10px;padding:7px}.unavailable-box{min-height:400px}.loading-box{min-height:430px;width:90%;max-width:320px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
:root{scrollbar-color:#b7c2ce transparent;scrollbar-width:thin}
@media(min-width:761px){.workspace{height:calc(100vh - 157px);min-height:0}.sidebar{height:100%;overflow-y:auto}.main{height:100%;min-height:0}.page-heading,.view-toolbar,.page-footer{flex-shrink:0}.image-stage,.image-stage.comparing{height:auto;min-height:0;flex:1}.image-stage.comparing{overflow-y:auto}.sidebar-note{margin-top:auto}}
:root{--phone-ratio:390 / 844}
.image-canvas.portrait{aspect-ratio:var(--phone-ratio);background:#fff;border:1px solid #cfd7df;border-radius:15px;overflow:hidden;box-shadow:0 8px 26px #162b4317}
.image-canvas img,.image-canvas.fitted img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;box-shadow:none;border-radius:0;filter:none}
.image-canvas.fitted.portrait img{filter:none}
.compare-image{width:100%;background:#fff;overflow:hidden}
.compare-image.portrait{aspect-ratio:var(--phone-ratio)}
.compare-image.landscape{aspect-ratio:3 / 2}
.compare-image img{width:100%;height:100%;object-fit:contain}
.compare-image .compare-placeholder{height:100%;min-height:0}
.main{padding:5px}
.view-toolbar{padding:5px;min-height:40px;gap:5px}
.view-controls{display:flex;align-items:center;gap:5px}
.view-switch{padding:2px}
.view-switch button{padding:6px 10px}
.image-stage,.image-stage.comparing{padding:5px}
.compare-grid{gap:5px}
@media(max-width:760px){.main{padding:5px}.view-toolbar{padding:5px}.view-controls{width:100%;justify-content:space-between}.mobile-menu{margin:0}.image-stage{height:calc(100dvh - 225px);min-height:360px}.image-stage.comparing{padding:5px}.compare-grid{gap:5px}}

/* 视觉方案比较和反馈 */
.feedback-open{border-color:#8ba8b7;background:#2c4858;color:#fff;font-weight:600}
#feedback-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;border-radius:10px;background:#e0f0e8;color:#225a45;font-size:11px}
.view-controls{min-width:0;flex-wrap:wrap}.single-feedback,.feedback-options{display:flex;align-items:center;gap:4px}
.view-toolbar.is-comparing .desktop-tool{display:none}
.flow-guide{display:flex;align-items:center;gap:10px;flex-basis:100%;padding:1px 5px;color:#49665a;font-size:12px;line-height:1.4}.flow-guide button{border:1px solid #a4c4b5;border-radius:6px;background:#eaf5ef;color:#235b41;padding:5px 9px;font-size:12px}
.flow-hotspot{position:absolute;z-index:2;border:2px solid #27a370;border-radius:8px;background:#55d2911f;box-shadow:0 0 0 2px #ffffffbd;cursor:pointer}.flow-hotspot:hover,.flow-hotspot:focus-visible{background:#55d29155;outline:2px solid #145638;outline-offset:2px}
.preference-button,.note-button{border:1px solid #d5dfe3;background:#fff;color:#425968;border-radius:6px;padding:6px 10px;line-height:1.2;font-size:12px;white-space:nowrap}
.preference-button:hover,.note-button:hover{background:#eff6f3;border-color:#afc9bd}
.preference-button.chosen{background:#e4f2ea;border-color:#72ab8f;color:#215b42;font-weight:600}
.note-button.has-note{color:#285f4c;border-color:#bad5c6}
.compare-grid{grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:5px}
.compare-card{display:flex;flex-direction:column;min-width:0}
.compare-card .compare-preview{width:100%;border:0;background:#fff;text-align:left;display:block;padding:0;flex:1}
.compare-card .compare-preview:hover header{background:#f1f6f4}
.compare-card header{padding:9px 10px;min-height:37px;font-size:13px}
.compare-card header .preview-caption{margin-left:auto;font-size:11px;color:#5c776c;white-space:nowrap}
.compare-image.portrait,.compare-image.landscape{aspect-ratio:auto;height:min(29vh,280px);background:#f3f5f6;padding:5px}
.compare-image.is-loading{display:grid;place-items:center}
.compare-image.is-loading::after{content:'图片加载中…';grid-area:1/1;color:#60727b;font-size:12px}
.compare-image.is-loading img{grid-area:1/1;visibility:hidden}
.compare-image img{height:100%;width:100%;object-fit:contain}
.card-actions{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;flex-wrap:wrap;background:#fff}
.compare-card .card-actions button{display:inline-block;width:auto;padding:6px 9px;text-align:center;border:1px solid #d5dfe3;border-radius:6px;background:#fff;color:#425968}
.compare-card .card-actions .preference-button.chosen{background:#e4f2ea;border-color:#72ab8f;color:#215b42}
.compare-card .card-actions .note-button.has-note{border-color:#bad5c6;color:#285f4c}
.image-canvas img{cursor:zoom-in}
.feedback-dialog{width:min(560px,calc(100% - 28px));max-width:none;max-height:min(80dvh,760px);border:0;border-radius:14px;padding:0;color:#21303b;box-shadow:0 16px 60px #0f263344;overflow:hidden}
.feedback-dialog[open]{display:flex;flex-direction:column}.feedback-dialog::backdrop,.image-dialog::backdrop{background:#18262f99}
.feedback-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 15px;border-bottom:1px solid #e7ecef}
.feedback-head h2{font-size:18px;line-height:1.3;margin:0 0 6px}.feedback-head p{font-size:13px;color:#596e78;line-height:1.5;margin:0}
.dialog-close{border:0;background:#f1f4f5;color:#38515e;width:32px;height:32px;flex-shrink:0;border-radius:7px;font-size:21px;line-height:1}
.feedback-list{overflow-y:auto;padding:5px 22px;min-height:96px}.feedback-empty{padding:30px 0;color:#61737e;font-size:14px;line-height:1.7}
.feedback-item{padding:15px 0;border-bottom:1px solid #e7ecef}.feedback-item:last-child{border:0}.feedback-item-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.feedback-item-top strong{font-size:14px}
.feedback-item label{font-size:12px;color:#5a6e78;display:block;margin-bottom:5px}.feedback-item textarea,#copy-fallback{width:100%;min-height:68px;resize:vertical;border:1px solid #cbd6dc;border-radius:7px;padding:9px 10px;font:inherit;font-size:14px;color:#24343d;line-height:1.5;background:#fff}
.feedback-page{margin-top:12px}
.feedback-item textarea:focus,#copy-fallback:focus{outline:2px solid #75a693;outline-offset:1px}
.feedback-foot{border-top:1px solid #e7ecef;padding:14px 22px 18px}.primary-button{border:0;border-radius:7px;background:#285d4b;color:#fff;padding:10px 16px;font-weight:600}.primary-button:hover{background:#1d4d3d}.feedback-foot p{display:inline;margin-left:10px;color:#4a655a;font-size:12px}.feedback-foot p:empty{display:none}#copy-fallback{margin-top:10px;min-height:120px}
.image-dialog{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:#172128;color:#fff;overflow:hidden}
.image-dialog[open]{display:flex;flex-direction:column}.image-dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:6px 12px;border-bottom:1px solid #35444c;color:#e7f0ef;font-size:13px}
.image-dialog-toolbar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-dialog-toolbar>div{display:flex;align-items:center;gap:4px;flex-shrink:0}.image-dialog-toolbar button{border:0;border-radius:6px;background:#2e3d44;color:#fff;min-width:34px;height:34px;padding:0 9px}.image-dialog-toolbar button:hover{background:#42555b}.image-dialog-toolbar output{min-width:42px;text-align:center;font-size:12px}
.lightbox-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none;cursor:grab}.lightbox-stage:active{cursor:grabbing}.lightbox-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center;pointer-events:none;user-select:none}
@media(max-width:1150px){.compare-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){
  .brand div>span{font-size:10px}.top-actions .refresh-button,.top-actions .demo-link{display:none}.top-actions{flex-shrink:0}.topbar{gap:6px}.feedback-open{font-size:12px;padding:7px 9px}
  .view-controls{justify-content:flex-start;gap:5px}.view-switch{flex-shrink:0}.single-feedback{margin-left:auto}.single-feedback .preference-button,.single-feedback .note-button{padding:6px 7px}
  .tools{width:auto;justify-content:flex-start}.tools .desktop-tool{display:none}.view-toolbar{align-items:center}.view-controls{width:auto;flex:1}.image-stage{height:calc(100dvh - 203px);min-height:360px}
  .compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.compare-image.portrait,.compare-image.landscape{height:min(31vh,260px);padding:4px}.compare-card header{font-size:12px}.compare-card .card-actions button{padding:6px 8px;font-size:12px}
  .feedback-head{padding:17px 16px 12px}.feedback-list{padding:4px 16px}.feedback-foot{padding:12px 16px 16px}.feedback-foot p{display:block;margin:8px 0 0}.image-dialog-toolbar{padding:5px 7px;font-size:11px}.image-dialog-toolbar button{min-width:30px;padding:0 7px}.image-dialog-toolbar output{min-width:38px}
}
@media(max-width:370px){.single-feedback .preference-button,.single-feedback .note-button{padding:6px 5px}.view-switch button{padding:6px}.topbar .brand div>span{font-size:9px}}