:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}body{margin:0}*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0f0f23;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{max-width:960px;margin:0 auto;padding:2rem 1rem}header{text-align:center;margin-bottom:2rem}header h1{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem}.subtitle{color:#888;margin-top:.5rem;font-size:.9rem}.upload-zone{text-align:center;cursor:pointer;background:#1a1a2e;border:2px dashed #444;border-radius:16px;padding:4rem 2rem;transition:all .3s}.upload-zone:hover{background:#1e1e3a;border-color:#667eea}.upload-icon{margin-bottom:1rem;font-size:3rem}.hint{color:#666;margin-top:.5rem;font-size:.85rem}.preview-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.preview-card{text-align:center;background:#1a1a2e;border-radius:12px;flex:1;min-width:280px;padding:1rem}.preview-card h3{color:#aaa;margin-bottom:.75rem;font-size:.9rem}.preview-img{background:repeating-conic-gradient(#222 0% 25%,#2a2a2a 0% 50%) 0 0/20px 20px;border-radius:8px;max-width:100%;max-height:300px}.preview-placeholder{color:#555;border:1px dashed #333;border-radius:8px;justify-content:center;align-items:center;height:200px;display:flex}.arrow{color:#667eea;flex-shrink:0;font-size:2rem}.meta{color:#888;margin-top:.75rem;font-size:.85rem}.ratio{color:#4ade80;margin-left:.5rem;font-weight:600}.ratio.up{color:#f87171}.controls{background:#1a1a2e;border-radius:12px;padding:1.5rem}.mode-toggle{gap:0;margin-bottom:1rem;display:flex}.mode-toggle button{color:#888;cursor:pointer;background:#111;border:1px solid #333;flex:1;padding:.5rem;transition:all .2s}.mode-toggle button:first-child{border-radius:8px 0 0 8px}.mode-toggle button:last-child{border-radius:0 8px 8px 0}.mode-toggle button.active{color:#fff;background:#667eea;border-color:#667eea}.input-row{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}label{color:#bbb;align-items:center;gap:.5rem;font-size:.9rem;display:flex}input[type=number],select{color:#e0e0e0;background:#111;border:1px solid #333;border-radius:6px;width:90px;padding:.4rem .6rem;font-size:.9rem}input[type=range]{accent-color:#667eea;width:120px}.checkbox{cursor:pointer}.checkbox input{accent-color:#667eea}.swap-btn{cursor:pointer;background:0 0;border:1px solid #333;border-radius:6px;padding:.3rem .5rem;font-size:1rem;transition:all .2s}.swap-btn:hover{background:#222;border-color:#667eea}.quick-sizes{gap:.5rem;display:flex}.quick-sizes button{color:#aaa;cursor:pointer;background:#111;border:1px solid #333;border-radius:6px;padding:.3rem .7rem;font-size:.8rem;transition:all .2s}.quick-sizes button:hover{color:#667eea;border-color:#667eea}.actions{flex-wrap:wrap;gap:.75rem;padding-top:.5rem;display:flex}button.primary,button.success,button.secondary{cursor:pointer;border:none;border-radius:8px;padding:.6rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s}button.primary{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2)}button.primary:hover{opacity:.9;transform:translateY(-1px)}button.primary:disabled{opacity:.5;cursor:not-allowed;transform:none}button.success{color:#fff;background:#059669}button.success:hover{background:#047857}button.secondary{color:#ccc;background:#333}button.secondary:hover{background:#444}footer{text-align:center;color:#555;border-top:1px solid #222;margin-top:2rem;padding-top:1rem;font-size:.8rem}@media (width<=640px){.preview-row{flex-direction:column}.arrow{transform:rotate(90deg)}.preview-card{min-width:auto}}