: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}@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}}