body{height:100vh;overflow:hidden}.convert-layout{gap:var(--space-4);padding:var(--space-4) var(--space-6);margin-top:var(--navbar-height);height:calc(100vh - var(--navbar-height));max-height:calc(100vh - var(--navbar-height));grid-template-columns:320px 1fr 280px;max-width:100%;min-height:0;display:grid;overflow:hidden}.convert-sidebar{gap:var(--space-4);height:100%;min-height:0;padding:var(--space-4);flex-direction:column;display:flex;overflow:hidden auto}.panel-title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:var(--space-2)}.upload-zone{border:2px dashed var(--glass-border);border-radius:var(--radius-md);padding:var(--space-6) var(--space-4);text-align:center;transition:all var(--transition-normal);cursor:pointer;background:#ffffff05;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex;position:relative;overflow:hidden}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent-primary);background:#6366f10d}.upload-icon{color:var(--text-tertiary);margin-bottom:var(--space-3)}.upload-text{font-weight:var(--fw-medium);margin-bottom:var(--space-2)}.upload-or{font-size:var(--fs-sm);color:var(--text-tertiary);margin-bottom:var(--space-3)}.upload-preview{object-fit:contain;background:var(--bg-primary);width:100%;height:100%;position:absolute;top:0;left:0}.remove-bg-btn{z-index:3;color:#fff;font-size:12px;font-weight:var(--fw-semibold,600);cursor:pointer;background:linear-gradient(135deg,#ff8c9d 0%,#ffb6c1 55%,#87cefa 100%);border:1px solid #ffffff8c;border-radius:999px;align-items:center;gap:5px;padding:6px 12px;transition:transform .2s,box-shadow .2s,filter .2s;display:inline-flex;position:absolute;top:8px;right:8px;box-shadow:0 6px 16px #ff8c9d47}.remove-bg-btn:hover:not(:disabled){filter:brightness(1.03);transform:translateY(-1px);box-shadow:0 8px 18px #ff8c9d57}.remove-bg-btn:disabled{cursor:wait;opacity:.78}.restore-bg-btn{z-index:3;color:#8f5f72;font-size:12px;font-weight:var(--fw-semibold,600);cursor:pointer;background:#ffffffdb;border:1px solid #ffffffb8;border-radius:999px;align-items:center;gap:5px;padding:6px 12px;transition:transform .2s,box-shadow .2s,filter .2s,color .2s;display:inline-flex;position:absolute;top:44px;right:8px;box-shadow:0 6px 16px #b79aa62e}.restore-bg-btn:hover{color:#7d5364;transform:translateY(-1px);box-shadow:0 8px 18px #b79aa63d}.upload-preview.has-alpha{background-color:#fff;background-image:linear-gradient(45deg,#f3e8ee 25%,#0000 25%),linear-gradient(-45deg,#f3e8ee 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f3e8ee 75%),linear-gradient(-45deg,#0000 75%,#f3e8ee 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.params-section{gap:var(--space-4);flex-direction:column;display:flex}.params-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-wider);border-bottom:1px solid var(--glass-border);padding-bottom:var(--space-2);margin-top:var(--space-2)}.param-group{align-items:center;gap:var(--space-3);display:flex}.is-hidden{display:none!important}.conversion-mode-control{border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--bg-primary);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:3px;display:grid;box-shadow:inset 0 1px #ffffff80}.conversion-mode-option{min-width:0;min-height:36px;color:var(--text-secondary);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);overflow-wrap:anywhere;cursor:pointer;transition:transform .22s var(--ease-spring), background .22s ease, box-shadow .22s ease, color .22s ease, filter .22s ease;background:0 0;border:0;border-radius:5px;padding:6px 4px;line-height:1.25}.conversion-mode-option:hover{filter:saturate(1.05);transform:translateY(-1px)scale(1.015)}.conversion-mode-option.is-active{color:var(--text-primary);background:linear-gradient(#fffffff2,#fff8fce6);box-shadow:0 6px 18px #ff8c9d1f,inset 0 1px #ffffffbf}.param-group>label{font-size:var(--fs-sm);color:var(--text-secondary);min-width:40px}.param-group>.convert-toggle{align-items:center;gap:var(--space-2);white-space:nowrap;width:auto;height:24px;display:inline-flex}.convert-toggle input{position:absolute}.convert-toggle .toggle-track{flex:0 0 44px;width:44px;height:24px;position:relative;inset:auto}.convert-toggle .toggle-label{line-height:24px}.custom-size-group{padding:var(--space-3);border-radius:var(--radius-sm);transform-origin:top;background:#0003}.mode-section-enter{will-change:transform, opacity, filter}.size-inputs{align-items:center;gap:var(--space-2);width:100%;display:flex}.size-input-wrap{align-items:center;gap:var(--space-2);flex:1;display:flex}.size-input-wrap input{width:100%}.slider-value{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--accent-primary);text-align:right;min-width:30px}.convert-preview{background:var(--bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--glass-border);flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden;box-shadow:0 20px 40px #e8becc2e}.preview-header{border-bottom:1px solid var(--glass-border);background:var(--glass-bg);display:flex}.preview-tab{padding:var(--space-3) var(--space-6);font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border-bottom:2px solid #0000}.preview-tab:hover{color:var(--text-primary);background:#ff8c9d0d}.preview-tab.active{color:var(--text-primary);border-bottom-color:var(--accent-primary);background:#ff8c9d1a}.preview-canvas-wrap{background:var(--bg-tertiary);isolation:isolate;background-image:linear-gradient(45deg,#00000008 25%,#0000 25% 75%,#00000008 75%,#00000008),linear-gradient(45deg,#00000008 25%,#0000 25% 75%,#00000008 75%,#00000008);background-position:0 0,10px 10px;background-size:20px 20px;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.preview-canvas-wrap:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 0 0,#fff6,#0000 35%),radial-gradient(circle at 100% 100%,#afeeee1a,#0000 32%);position:absolute;inset:0}.preview-canvas-wrap .canvas-coords{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-variant-numeric:tabular-nums;color:#fff;z-index:3;pointer-events:none;background:#0009;border:1px solid #ffffff2e;border-radius:999px;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex;position:absolute;bottom:12px;left:12px}.preview-canvas-wrap .coords-swatch{border:1px solid #ffffff73;border-radius:50%;flex-shrink:0;width:12px;height:12px;box-shadow:inset 0 1px 2px #00000059}.preview-canvas-wrap .coords-swatch.is-hidden,.preview-canvas-wrap .canvas-coords.is-hidden{display:none}.preview-loading{z-index:4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:linear-gradient(#fff8f3eb,#fff0f5db);flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0}.preview-loading-board{aspect-ratio:1;background:linear-gradient(#fffffff2,#fff5f8e0);border:1px solid #ffffffb3;border-radius:24px;width:min(70%,420px);position:relative;overflow:hidden;box-shadow:0 18px 38px #e2bacc3d}.loading-board-canvas{z-index:2;width:100%;height:100%;display:block;position:absolute;inset:0}.preview-loading.is-scanning .preview-loading-sheen,.preview-loading.is-scanning .preview-loading-grid,.preview-loading.is-scanning .preview-loading-scanline{display:none}.preview-loading-grid{background-color:#ffffffad;background-image:linear-gradient(#b1a0ab24 1px,#0000 1px),linear-gradient(90deg,#b1a0ab24 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:26px 26px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-radius:18px;position:absolute;inset:12% 10%}.preview-loading-sheen{background:linear-gradient(115deg,#0000 30%,#fff9 47%,#0000 62%);animation:1.6s ease-in-out infinite preview-sheen;position:absolute;inset:-20%}.preview-loading-scanline{background:linear-gradient(90deg,#ff8c9d00,#ff8c9deb,#87cefa00);border-radius:999px;height:4px;animation:1.6s ease-in-out infinite preview-scanline;position:absolute;top:16%;left:11%;right:11%;box-shadow:0 0 18px #ff8c9d59}.preview-loading-text{letter-spacing:.04em;color:#8b6d78;margin:0;font-size:13px;font-weight:700}#originalCanvas{object-fit:contain;max-width:100%;max-height:100%;box-shadow:var(--shadow-lg);display:none}#previewCanvas{cursor:grab;z-index:1;width:100%;height:100%;display:none;position:relative}.effect-canvas{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0}.compare-view{z-index:3;background:#fff8f3;justify-content:stretch;align-items:stretch;display:flex;position:absolute;inset:0}.compare-stage{border-radius:var(--radius-md);-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:100%;position:relative;overflow:hidden}.compare-stage canvas{display:block;position:absolute;top:0;left:0}.compare-clip{z-index:2;width:50%;position:absolute;inset:0 auto 0 0;overflow:hidden}.compare-clip canvas{max-width:none}.compare-handle{cursor:ew-resize;z-index:4;justify-content:center;align-items:center;width:28px;margin-left:-14px;transition:transform .18s;display:flex;position:absolute;top:0;bottom:0;left:50%}.compare-handle-line{background:linear-gradient(#ffb6c1 0%,#ff8c9d 50%,#87cefa 100%);border-radius:999px;width:3px;margin-left:-1.5px;position:absolute;top:0;bottom:0;left:50%;box-shadow:0 0 0 1px #ffffffa6}.compare-handle-knob{z-index:1;color:#fff;width:34px;height:34px;transition:transform .18s var(--ease-spring), box-shadow .18s ease;background:linear-gradient(135deg,#ff8c9d,#ffb6c1 60%,#87cefa);border:2px solid #ffffffd9;border-radius:50%;justify-content:center;align-items:center;gap:0;display:flex;position:relative;box-shadow:0 8px 18px #ff8c9d59}.compare-handle:hover .compare-handle-knob,.compare-handle.is-dragging .compare-handle-knob{transform:scale(1.08);box-shadow:0 12px 24px #ff8c9d6b}.compare-handle:hover .compare-handle-line,.compare-handle.is-dragging .compare-handle-line{width:4px;margin-left:-2px}.compare-handle-knob svg{width:11px;height:11px}.compare-label{z-index:5;letter-spacing:.02em;color:#7a5a63;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;background:#ffffffd1;border:1px solid #ffb6c18c;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;position:absolute;top:14px}.compare-label-left{left:14px}.compare-label-right{right:14px}.compare-toggle-btn{align-items:center;gap:6px;display:inline-flex}.compare-toggle-btn.is-active{color:#fff;background:linear-gradient(135deg,#ff8c9d,#ffb6c1 60%,#87cefa);border-color:#0000;box-shadow:0 6px 14px #ff8c9d47}.preview-empty{align-items:center;gap:var(--space-3);color:var(--text-tertiary);flex-direction:column;display:flex}@keyframes preview-sheen{0%{transform:translate(-30%)translateY(-4%)rotate(0)}to{transform:translate(30%)translateY(4%)rotate(0)}}@keyframes preview-scanline{0%{opacity:.4;top:16%}45%{opacity:1}to{opacity:.5;top:82%}}.preview-actions{justify-content:flex-end;align-items:center;gap:var(--space-3);padding:var(--space-3);border-top:1px solid var(--glass-border);background:linear-gradient(#ffffff1f,#fff0f52e);display:flex}.convert-export-guide-slot{border-top:1px solid var(--glass-border);padding-top:var(--space-3);background:linear-gradient(#ffffff14,#fff0f51f)}.convert-export-guide-slot.is-visible+.preview-actions{border-top:0}.export-pattern-btn{min-width:156px}.convert-stats{flex-direction:column;height:100%;min-height:0;padding:0;display:flex;overflow:hidden}.convert-stats .panel-title{padding:var(--space-4) var(--space-4) 0;flex-shrink:0}.stats-summary{padding:var(--space-4);border-bottom:1px solid var(--glass-border);flex-shrink:0}.stats-summary-grid{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.stats-summary-card{padding:var(--space-3);border-radius:var(--radius-md);background:#ffffff0f;border:1px solid #ffffff14;flex-direction:column;gap:8px;display:flex}.stats-summary-card-primary{color:#fff;background:linear-gradient(135deg,#ff8c9dd9,#87cefacc)}.stats-summary-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-secondary)}.stats-summary-card-primary .stats-summary-label{color:#ffffffe0}.stats-summary-value{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--text-primary)}.stats-summary-card-primary .stats-summary-value{color:#fff}.stats-summary-color{font-size:var(--fs-base);align-items:center;gap:8px;display:inline-flex}.stats-summary-color-dot{background:#ffffffbf;border-radius:50%;width:16px;height:16px;box-shadow:inset 0 2px 4px #00000040}.stats-distribution{max-height:28%;padding:0 var(--space-4) var(--space-3);border-bottom:1px solid var(--glass-border);flex-shrink:0;overflow-y:auto}.stats-distribution h3{margin:0 0 var(--space-2);color:var(--text-secondary);font-size:var(--fs-sm)}.stats-distribution-list{flex-direction:column;gap:10px;display:flex}.stats-distribution-item{grid-template-columns:22px 1fr auto;align-items:center;gap:10px;display:grid}.stats-distribution-swatch{border-radius:50%;width:22px;height:22px;box-shadow:inset 0 2px 4px #00000040}.stats-distribution-bar{background:#ffffff0f;border-radius:999px;height:14px;position:relative;overflow:hidden}.stats-distribution-fill{border-radius:inherit;width:0;transition:width .42s cubic-bezier(.22,1,.36,1);position:absolute;inset:0 auto 0 0}.stats-distribution-meta{color:#6f5b65;justify-content:space-between;align-items:center;padding:0 10px;font-size:11px;font-weight:700;display:flex;position:absolute;inset:0}.flat-color-mapping{max-height:30%;padding:0 var(--space-4) var(--space-3);border-bottom:1px solid var(--glass-border);flex-shrink:0;overflow-y:auto}.flat-color-mapping h3{margin:0 0 var(--space-2);color:var(--text-secondary);font-size:var(--fs-sm)}.flat-mapping-item{align-items:center;gap:var(--space-2);min-height:30px;color:var(--text-secondary);font-size:var(--fs-sm);border-radius:var(--radius-sm);background:#ffffff0a;grid-template-columns:24px 16px 24px 1fr;padding:6px 8px;display:grid}.flat-mapping-swatch{border:1px solid var(--glass-border);border-radius:4px;width:24px;height:24px}.flat-mapping-code{color:var(--text-primary);font-weight:var(--fw-bold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stats-total{background:var(--gradient-cool);padding:var(--space-3);border-radius:var(--radius-md);color:#fff;justify-content:space-between;align-items:center;display:flex}.stats-total-label{font-weight:var(--fw-medium)}.stats-total-value{font-size:var(--fs-xl);font-weight:var(--fw-bold)}.stats-list{min-height:0;padding:var(--space-2);flex:1;overflow:hidden auto}.stats-empty{padding:var(--space-4);text-align:center;color:var(--text-tertiary)}.stats-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);transition:background var(--transition-fast);grid-template-columns:auto 1fr auto auto;display:grid}.stats-item:hover{background:#ffffff0d}.stats-item-main{flex-direction:column;gap:3px;min-width:0;display:flex}.stats-item-top{justify-content:space-between;align-items:center;gap:10px;display:flex}.stats-item-percent{color:var(--text-tertiary);font-size:11px;font-weight:700}.stats-item-bar{background:#ffffff0f;border-radius:999px;height:8px;overflow:hidden}.stats-item-bar-fill{border-radius:inherit;width:0;height:100%;transition:width .42s cubic-bezier(.22,1,.36,1)}.matting-modal{z-index:10020;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.matting-modal-backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#180e1657;position:absolute;inset:0}.matting-modal-card{z-index:1;background:#fffffff2;border-radius:24px;width:min(960px,100%);max-height:calc(100vh - 48px);padding:22px;position:relative;overflow:auto;box-shadow:0 30px 70px #926c7c47}.matting-modal-close{color:#916476;cursor:pointer;background:0 0;border:0;font-size:30px;line-height:1;position:absolute;top:12px;right:14px}.matting-modal-header h3{color:#6d4f5d;margin:0 0 6px}.matting-modal-header p{color:#8d7480;margin:0 0 16px;font-size:14px}.matting-compare{grid-template-columns:1fr 1fr;gap:16px;display:grid}.matting-compare-pane{flex-direction:column;gap:8px;display:flex}.matting-compare-label{color:#7d5364;font-size:13px;font-weight:700}.matting-compare-pane canvas{aspect-ratio:1;background-color:#0000;background-image:linear-gradient(45deg,#00000008 25%,#0000 25% 75%,#00000008 75%),linear-gradient(45deg,#00000008 25%,#0000 25% 75%,#00000008 75%);background-position:0 0,8px 8px;background-repeat:repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-radius:18px;width:100%;box-shadow:inset 0 1px #ffffffb3}.matting-modal-actions{justify-content:flex-end;gap:12px;margin-top:18px;display:flex}.stats-color-swatch{border:1px solid #ffffff1a;border-radius:50%;width:20px;height:20px;box-shadow:inset 0 2px 4px #0000004d}.stats-color-name{font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.stats-color-id{font-size:var(--fs-xs);color:var(--text-tertiary);font-variant-numeric:tabular-nums}.stats-color-count{font-weight:var(--fw-bold);color:var(--text-secondary);font-variant-numeric:tabular-nums}@media (width<=1024px){.convert-layout{grid-template-rows:1fr auto;grid-template-columns:280px 1fr}.convert-stats{grid-column:1/-1;height:300px}}@media (width<=768px){body{height:auto;overflow:auto}.convert-layout{grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr);height:auto;max-height:none;overflow:visible}.convert-layout>*{min-width:0}.convert-sidebar,.convert-stats{height:auto;max-height:none;overflow:visible}.stats-list{max-height:360px}.stats-summary-grid,.matting-compare{grid-template-columns:1fr}.convert-preview{height:auto;min-height:0;overflow:visible}.preview-canvas-wrap{flex:none;height:50vh;min-height:320px}.preview-actions{flex-wrap:wrap}.preview-actions #compareToggleBtn,.preview-actions #sendToEditorBtn{flex:1 1 calc(50% - var(--space-2))}.preview-actions #exportPngBtn{flex:1 0 100%;order:3;width:100%}}.tooltip-container{align-items:center;display:inline-flex;position:relative}.tooltip-text{visibility:hidden;background-color:var(--bg-elevated);color:var(--text-primary);text-align:left;border-radius:var(--radius-md);z-index:9999;width:240px;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);opacity:0;pointer-events:none;padding:10px 12px;font-size:12px;font-weight:400;line-height:1.5;transition:opacity .2s,transform .2s;position:absolute;bottom:150%;left:50%;right:auto;transform:translate(-50%)translateY(10px)}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1;transform:translate(-50%)translateY(0)}