:root{--bg:#12141a;--bg-elevated:#1b1e27;--bg-hover:#232733;--border:#2e3342;--text:#e6e8ee;--text-dim:#9aa0b0;--accent:#4f8cff;--accent-hover:#6b9dff;--accent-skin:#0ea5e9;--accent-skin-hover:#38bdf8;--danger:#ff5c5c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:PingFang TC,Noto Sans TC,Microsoft JhengHei,-apple-system,system-ui,sans-serif;line-height:1.6}.app{flex-direction:column;max-width:960px;min-height:100vh;margin:0 auto;padding:1.5rem 1rem 3rem;display:flex}.app-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:1.5rem;display:flex}.feature-nav{background:var(--bg-elevated);border:1px solid var(--border);border-radius:9999px;gap:.25rem;margin-bottom:1.25rem;padding:.3rem;display:inline-flex;box-shadow:0 4px 20px #00000040}.nav-tab-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9999px;align-items:center;gap:.4rem;padding:.45rem 1.15rem;font-size:.95rem;font-weight:500;transition:all .2s;display:flex}.nav-tab-btn:hover:not(.active){color:var(--text);background:var(--bg-hover)}.nav-tab-btn.active{color:#fff;background:#283145;border-color:#4f8cff66;box-shadow:0 2px 8px #00000059}.tab-icon{font-size:1.05rem}.app-header h1{letter-spacing:-.02em;margin:0 0 .25rem;font-size:1.6rem}.subtitle,.hint-text{color:var(--text-dim);margin:.25rem 0;font-size:.875rem}.app-main{flex:1}.app-footer{text-align:center;color:var(--text-dim);margin-top:2rem;font-size:.8rem}.upload-zone{border:2px dashed var(--border);text-align:center;cursor:pointer;background:var(--bg-elevated);border-radius:12px;padding:3.5rem 1.5rem;transition:border-color .15s,background .15s}.upload-zone:hover,.upload-zone.dragging{border-color:var(--accent);background:var(--bg-hover)}.upload-icon{color:var(--text-dim);margin-bottom:.75rem}.upload-title{margin:0 0 .5rem;font-size:1.05rem}.upload-hint{color:var(--text-dim);margin:0;font-size:.85rem}.error-message{color:var(--danger);background:#ff5c5c1a;border:1px solid #ff5c5c59;border-radius:8px;margin:1rem 0 0;padding:.6rem .9rem;font-size:.9rem}.notice{color:var(--text-dim);background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;margin:0 0 1rem;padding:.5rem .9rem;font-size:.85rem}.skintone-intro-wrapper{flex-direction:column;align-items:center;display:flex}.feature-badge{color:var(--accent-skin-hover);background:#0ea5e926;border:1px solid #0ea5e959;border-radius:999px;margin-bottom:.6rem;padding:.25rem .75rem;font-size:.82rem;font-weight:600;display:inline-block}.intro-text{text-align:center;color:var(--text-dim);max-width:580px;margin:0 0 1.5rem;font-size:.9rem}button{font:inherit;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:.5rem 1rem;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.primary:hover:not(:disabled){background:var(--accent-hover)}button.skin-primary-btn{background:var(--accent-skin);border-color:var(--accent-skin)}button.skin-primary-btn:hover:not(:disabled){background:var(--accent-skin-hover);border-color:var(--accent-skin-hover)}button.active{border-color:var(--accent);color:var(--accent)}.mode-selection-bar{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;margin-bottom:.75rem;padding:.75rem 1rem}.direction-tabs{gap:.5rem;margin-bottom:.5rem;display:flex}.direction-btn{text-align:center;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);border-radius:6px;flex:1;padding:.5rem .75rem;font-size:.88rem;font-weight:500;transition:all .15s}.direction-btn:hover{color:var(--text);border-color:var(--accent-skin)}.direction-btn.active{border-color:var(--accent-skin);color:#fff;background:#0ea5e92e;font-weight:600}.direction-hint{color:var(--text-dim);background:#0003;border-radius:4px;padding:.4rem .6rem;font-size:.8rem}.toolbar{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.25rem;margin-bottom:.75rem;padding:.6rem .9rem;display:flex}.tool-selector{gap:.4rem;display:flex}.tool-btn{padding:.45rem .75rem;font-size:.85rem}.tool-btn.active{border-color:var(--accent-skin);color:#fff;background:#0ea5e933}.sample-indicator{border:1px solid var(--border);background:#00000040;border-radius:6px;align-items:center;gap:.5rem;padding:.35rem .7rem;font-size:.85rem;display:flex}.sample-label{color:var(--text-dim)}.sample-chip{align-items:center;gap:.4rem;display:flex}.color-dot{border:1px solid #fff6;border-radius:50%;width:16px;height:16px;display:inline-block;box-shadow:0 1px 4px #00000080}.sample-hex{color:#fff;font-family:monospace;font-weight:600}.sample-prompt{color:#f59e0b;font-style:italic}.sliders-bar{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-bottom:.75rem;padding:.6rem .9rem;display:flex}.brush-control{white-space:nowrap;align-items:center;gap:.6rem;font-size:.86rem;display:flex}.brush-control input[type=range]{width:110px;accent-color:var(--accent)}.skin-tone-editor .brush-control input[type=range]{accent-color:var(--accent-skin)}.brush-value{color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:3.2em;font-size:.82rem}.toolbar-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.canvas-container{width:100%}.canvas-stack{border:1px solid var(--border);border-radius:8px;max-width:100%;position:relative;overflow:hidden}.base-canvas,.overlay-canvas{width:100%;height:auto;display:block}.overlay-canvas{cursor:crosshair;touch-action:none;position:absolute;inset:0}.overlay-canvas.erasing{cursor:cell}.overlay-canvas.eyedropper{cursor:copy}.action-bar{flex-wrap:wrap;justify-content:flex-end;gap:.75rem;margin-top:1rem;display:flex}.processing{text-align:center;padding:4rem 1rem}.spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;margin:0 auto 1rem;animation:.9s linear infinite spin}.spinner.skin-spinner{border-top-color:var(--accent-skin)}@keyframes spin{to{transform:rotate(360deg)}}.compare-container{border:1px solid var(--border);cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:8px;width:100%;position:relative;overflow:hidden}.compare-layer{width:100%;height:auto;display:block}.compare-clip{position:absolute;inset:0 auto 0 0;overflow:hidden}.compare-divider{pointer-events:none;background:#fff;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;box-shadow:0 0 6px #0009}.compare-label{pointer-events:none;background:#0000008c;border-radius:999px;padding:.15rem .6rem;font-size:.75rem;position:absolute;top:.6rem}.label-before{right:.6rem}.label-after{left:.6rem}.result-view .hint-text{text-align:center}.ai-magic-btn{color:#d8b4fe;background:linear-gradient(135deg,#9333ea40,#3b82f640);border:1px solid #a855f780;font-weight:600;transition:all .2s}.ai-magic-btn:hover:not(:disabled){color:#fff;background:linear-gradient(135deg,#9333ea73,#3b82f673);border-color:#c084fc;box-shadow:0 0 12px #a855f759}.bg-intro-wrapper{flex-direction:column;align-items:center;display:flex}.bg-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;display:flex}.bg-selector,.manual-tools{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.control-label{color:var(--text-dim);margin-right:.2rem;font-size:.85rem}.bg-chip-btn{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:6px;padding:.35rem .65rem;font-size:.82rem}.bg-chip-btn.active{border-color:var(--accent);background:var(--bg-hover);color:#fff;font-weight:600}.bg-chip-label{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:6px;align-items:center;gap:.3rem;padding:.35rem .65rem;font-size:.82rem;display:inline-flex}.bg-chip-label.active{border-color:var(--accent);color:#fff}.bg-chip-label input[type=color]{cursor:pointer;background:0 0;border:none;width:20px;height:20px;padding:0}.checkerboard-bg{background-color:#1a1d24;background-image:linear-gradient(45deg,#242833 25%,#0000 25%),linear-gradient(-45deg,#242833 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#242833 75%),linear-gradient(-45deg,#0000 75%,#242833 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.bg-display-canvas{width:100%;height:auto;display:block}.checkerboard-bg.interactive .bg-display-canvas{cursor:crosshair;touch-action:none}.bg-primary-btn{background:#8b5cf6;border-color:#8b5cf6}.bg-primary-btn:hover:not(:disabled){background:#a78bfa;border-color:#a78bfa}.spinner.bg-spinner{border-top-color:#8b5cf6}@media (width<=680px){.direction-tabs{flex-direction:column}.sliders-bar{flex-direction:column;align-items:stretch}.brush-control{justify-content:space-between}.brush-control input[type=range]{flex:1;width:auto}}@media (width<=560px){.app{padding:1rem .75rem 2rem}.app-header h1{font-size:1.3rem}.nav-tab-btn{padding:.4rem .8rem;font-size:.88rem}.upload-zone{padding:2.5rem 1rem}.toolbar{flex-direction:column;align-items:stretch}.toolbar-buttons{justify-content:space-between}.toolbar-buttons button{flex:1}.action-bar{flex-direction:column-reverse}.action-bar button{width:100%;padding:.7rem 1rem}}.crop-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;background:#0a0e17d9;justify-content:center;align-items:center;padding:1.5rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.crop-modal-content{background:#181d28;border:1px solid #ffffff1f;border-radius:16px;flex-direction:column;width:100%;max-width:960px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 24px 64px #0009}.crop-modal-header{background:#141822;border-bottom:1px solid #ffffff14;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}.crop-title-group{align-items:center;gap:.75rem;display:flex}.crop-modal-title{color:#fff;font-size:1.1rem;font-weight:700}.crop-dimensions{color:#79a8ff;background:#4f8cff26;border:1px solid #4f8cff4d;border-radius:6px;padding:.2rem .6rem;font-family:monospace;font-size:.82rem}.crop-aspect-buttons{background:#0d1117;border:1px solid #ffffff0f;border-radius:8px;gap:.35rem;padding:.25rem;display:flex}.crop-ratio-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.3rem .7rem;font-size:.82rem;transition:all .15s}.crop-ratio-btn:hover{color:#fff;background:#ffffff0f}.crop-ratio-btn.active{color:#fff;background:#2f4575;font-weight:600}.crop-stage{-webkit-user-select:none;user-select:none;touch-action:none;background:#0b0f17;flex:1;min-height:380px;max-height:calc(85vh - 150px);position:relative;overflow:hidden}.crop-source-image,.crop-source-canvas{pointer-events:none;background-image:linear-gradient(45deg,#181d28 25%,#0000 25%),linear-gradient(-45deg,#181d28 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#181d28 75%),linear-gradient(-45deg,#0000 75%,#181d28 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;box-shadow:0 4px 20px #00000080}.crop-scrim{pointer-events:none;background:#000000a6;position:absolute}.crop-box{box-sizing:border-box;cursor:move;touch-action:none;border:2px solid #4f8cff;position:absolute;box-shadow:0 0 0 1px #0006}.crop-grid-line{pointer-events:none;background:#ffffff40;position:absolute}.crop-grid-h1{height:1px;top:33.333%;left:0;right:0}.crop-grid-h2{height:1px;top:66.666%;left:0;right:0}.crop-grid-v1{width:1px;top:0;bottom:0;left:33.333%}.crop-grid-v2{width:1px;top:0;bottom:0;left:66.666%}.crop-handle{touch-action:none;background:#fff;border:2px solid #3b82f6;border-radius:2px;width:12px;height:12px;position:absolute;box-shadow:0 2px 4px #0006}.crop-handle.nw{cursor:nwse-resize;top:-6px;left:-6px}.crop-handle.n{cursor:ns-resize;top:-6px;left:calc(50% - 6px)}.crop-handle.ne{cursor:nesw-resize;top:-6px;right:-6px}.crop-handle.e{cursor:ew-resize;top:calc(50% - 6px);right:-6px}.crop-handle.se{cursor:nwse-resize;bottom:-6px;right:-6px}.crop-handle.s{cursor:ns-resize;bottom:-6px;left:calc(50% - 6px)}.crop-handle.sw{cursor:nesw-resize;bottom:-6px;left:-6px}.crop-handle.w{cursor:ew-resize;top:calc(50% - 6px);left:-6px}.crop-modal-footer{background:#141822;border-top:1px solid #ffffff14;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;display:flex}.mode-toggle-group{background:#0d1117cc;border:1px solid #ffffff14;border-radius:8px;gap:.2rem;padding:.2rem;display:flex}.mode-chip-btn{color:#94a3b8;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:.35rem .65rem;font-size:.82rem;font-weight:500;transition:all .15s}.mode-chip-btn:hover{color:#fff;background:#ffffff0f}.mode-chip-btn.active{color:#fff;background:#2563eb;font-weight:600;box-shadow:0 2px 8px #2563eb66}.detected-badge{letter-spacing:.02em;border-radius:20px;align-items:center;padding:.25rem .75rem;font-size:.8rem;font-weight:600;display:inline-flex}.detected-badge.portrait{color:#60a5fa;background:#3b82f62e;border:1px solid #3b82f659}.detected-badge.object{color:#c084fc;background:#a855f72e;border:1px solid #a855f759}.dual-upload-wrapper{text-align:center;max-width:980px;margin:0 auto}.dual-cards-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;margin:2rem 0;display:flex}.dual-upload-card{cursor:pointer;background:#141824;border:2px dashed #ffffff26;border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:280px;max-width:420px;min-height:240px;padding:1.5rem;transition:all .2s;display:flex;position:relative}.dual-upload-card:hover{background:#171d2b;border-color:#4f8cff}.dual-upload-card.dragging{background:#3b82f61a;border-color:#3b82f6}.dual-upload-card.loaded{cursor:default;border-style:solid;border-color:#fff3}.card-badge{color:#fff;background:#2563eb;border-radius:6px;padding:.2rem .6rem;font-size:.75rem;font-weight:700;position:absolute;top:1rem;left:1rem}.card-role-hint{color:#94a3b8;font-size:.78rem;position:absolute;top:1.1rem;right:1rem}.card-empty{flex-direction:column;align-items:center;gap:.75rem;margin-top:1rem;display:flex}.upload-emoji{font-size:2.8rem}.upload-tip{color:#cbd5e1;font-size:.95rem;font-weight:500}.card-preview{flex-direction:column;align-items:center;gap:.75rem;width:100%;margin-top:1.2rem;display:flex}.thumbnail-img{object-fit:contain;background:#0d1117;border:1px solid #ffffff1a;border-radius:8px;max-width:160px;max-height:140px}.card-info{flex-direction:column;align-items:center;gap:.2rem;display:flex}.card-info .file-name{color:#e2e8f0;text-overflow:ellipsis;white-space:nowrap;max-width:240px;font-size:.85rem;font-weight:600;overflow:hidden}.card-info .file-size{color:#94a3b8;font-family:monospace;font-size:.75rem}.card-remove-btn{color:#f87171;cursor:pointer;background:#ef444426;border:1px solid #ef44444d;border-radius:6px;padding:.3rem .8rem;font-size:.8rem;transition:all .15s}.card-remove-btn:hover{color:#fff;background:#ef44444d}.dual-swap-divider{flex-direction:column;align-items:center;gap:.35rem;display:flex}.swap-circle-btn{color:#e2e8f0;cursor:pointer;background:#1e293b;border:2px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.3rem;transition:all .2s;display:flex}.swap-circle-btn:hover:not(:disabled){color:#fff;background:#3b82f6;border-color:#60a5fa;transform:rotate(180deg)}.swap-circle-btn:disabled{opacity:.4;cursor:not-allowed}.swap-hint{color:#64748b;font-size:.75rem}.merge-launch-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);border:none;border-radius:12px;padding:.8rem 2.2rem;font-size:1.05rem;font-weight:700;transition:all .2s;box-shadow:0 8px 24px #3b82f64d}.merge-launch-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #8b5cf666}.merge-launch-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.merge-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.merge-sliders{background:#141822;border:1px solid #ffffff0f;border-radius:12px;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-bottom:1rem;padding:.75rem 1.25rem;display:flex}.checkbox-control{color:#cbd5e1;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;font-size:.88rem;display:inline-flex}.checkbox-control input[type=checkbox]{accent-color:#8b5cf6;cursor:pointer;width:16px;height:16px}.merge-primary-btn{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);border:none}.merge-display-canvas{touch-action:none;display:block}