.convert-layout{gap:var(--space-4);padding:var(--space-4) var(--space-6);margin-top:var(--navbar-height);height:calc(100vh - var(--navbar-height));grid-template-columns:320px 1fr 280px;max-width:100%;display:grid;overflow:hidden}.convert-sidebar{gap:var(--space-4);padding:var(--space-4);flex-direction:column;display:flex;overflow-y: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}.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}.param-group>label{font-size:var(--fs-sm);color:var(--text-secondary);min-width:40px}.custom-size-group{padding:var(--space-3);border-radius:var(--radius-sm);background:#0003}.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;display:flex;overflow:hidden}.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);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}#originalCanvas{object-fit:contain;max-width:100%;max-height:100%;box-shadow:var(--shadow-lg);display:none}#previewCanvas{cursor:grab;width:100%;height:100%;display:none}.preview-empty{align-items:center;gap:var(--space-3);color:var(--text-tertiary);flex-direction:column;display:flex}.preview-actions{justify-content:flex-end;gap:var(--space-3);padding:var(--space-3);border-top:1px solid var(--glass-border);background:#0003;display:flex}.convert-stats{flex-direction:column;padding:0;display:flex;overflow:hidden}.convert-stats .panel-title{padding:var(--space-4) var(--space-4) 0}.stats-summary{padding:var(--space-4);border-bottom:1px solid var(--glass-border)}.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{padding:var(--space-2);flex:1;overflow-y: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-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){.convert-layout{grid-template-rows:auto 50vh auto;grid-template-columns:1fr;height:auto;overflow:visible}.convert-sidebar{max-height:none;overflow:visible}}.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:220px;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:-10px;transform:translateY(10px)}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1;transform:translateY(0)}