@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f8f6;--surface:#fff;--surface-raised:#fdfdfc;--border:#e8e8e4;--border-subtle:#f0f0ec;--text-primary:#1a1a18;--text-secondary:#6b6b66;--text-tertiary:#9d9d96;--accent:#2d6a4f;--accent-light:#e8f5ee;--accent-hover:#245a42;--accent-subtle:#f0faf5;--danger:#c0392b;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000014, 0 2px 6px #0000000a;--shadow-lg:0 12px 32px #0000001a, 0 4px 12px #0000000f;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--transition:.18s cubic-bezier(.4, 0, .2, 1)}html,body{height:100%}body{background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.5}#root{flex-direction:column;min-height:100vh;display:flex}button{cursor:pointer;transition:all var(--transition);border:none;outline:none;font-family:inherit}input[type=range]{appearance:none;background:var(--border);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;width:16px;height:16px;transition:all var(--transition);box-shadow:0 0 0 3px var(--accent-light);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;width:16px;height:16px;box-shadow:0 0 0 3px var(--accent-light);border:none;border-radius:50%}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--border) transparent}.scrollbar-thin::-webkit-scrollbar{width:5px}.scrollbar-thin::-webkit-scrollbar-track{background:0 0}.scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:3px}.app{flex-direction:column;min-height:100vh;display:flex}.header{border-bottom:1px solid var(--border-subtle);background:var(--surface);padding:0 24px}.header-inner{align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:18px 0;display:flex}.logo{flex-shrink:0;align-items:center;gap:8px;display:flex}.logo-icon{color:var(--accent);font-size:18px}.logo-text{color:var(--text-primary);letter-spacing:-.02em;font-size:15px;font-weight:600}.header-tagline{color:var(--text-tertiary);font-size:13px;font-weight:400}.main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:40px 24px}.upload-section{flex-direction:column;gap:20px;max-width:560px;margin:48px auto 0;display:flex}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-xl);background:var(--surface);cursor:pointer;transition:all var(--transition);text-align:center;flex-direction:column;align-items:center;gap:10px;padding:56px 40px;display:flex}.dropzone:hover,.dropzone--active{border-color:var(--accent);background:var(--accent-subtle);box-shadow:var(--shadow-md);transform:translateY(-1px)}.dropzone-icon{border-radius:var(--radius-md);background:var(--accent-light);width:56px;height:56px;color:var(--accent);transition:all var(--transition);justify-content:center;align-items:center;margin-bottom:4px;display:flex}.dropzone:hover .dropzone-icon,.dropzone--active .dropzone-icon{background:var(--accent);color:#fff;transform:scale(1.05)}.dropzone-title{color:var(--text-primary);letter-spacing:-.02em;font-size:16px;font-weight:600}.dropzone-sub{color:var(--text-tertiary);font-size:13px}.dropzone-badge{background:var(--border-subtle);color:var(--text-secondary);letter-spacing:.02em;text-transform:uppercase;border-radius:20px;margin-top:4px;padding:3px 10px;font-size:11px;font-weight:500;display:inline-block}.features-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.feature-chip{background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);border-radius:20px;align-items:center;gap:5px;padding:5px 12px;font-size:12px;font-weight:400;display:flex}.feature-chip svg{color:var(--accent);flex-shrink:0}.error-msg{border-radius:var(--radius-md);color:var(--danger);background:#fdf2f2;border:1px solid #f5c6c6;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:13px;display:flex}.error-close{color:var(--danger);cursor:pointer;opacity:.7;background:0 0;border:none;flex-shrink:0;align-items:center;padding:2px;display:flex}.error-close:hover{opacity:1}.workspace{grid-template-columns:300px 1fr;align-items:start;gap:20px;display:grid}.sidebar{flex-direction:column;gap:14px;display:flex;position:sticky;top:24px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.card-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:14px 16px 12px;display:flex}.card-title{color:var(--text-primary);letter-spacing:-.01em;font-size:13px;font-weight:600}.file-card{padding:12px 14px}.file-info{justify-content:space-between;align-items:center;gap:8px;display:flex}.file-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}.preview-size-tabs{gap:2px;display:flex}.size-tab{color:var(--text-tertiary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:5px;padding:3px 7px;font-size:11px;font-weight:500}.size-tab:hover{color:var(--text-secondary);background:var(--border-subtle)}.size-tab--active{background:var(--accent-light);color:var(--accent)}.preview-canvas{justify-content:center;align-items:center;min-height:160px;padding:24px;display:flex}.preview-canvas--checker{background-color:#f4f4f0;background-image:linear-gradient(45deg,#e8e8e4 25%,#0000 25%),linear-gradient(-45deg,#e8e8e4 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e8e8e4 75%),linear-gradient(-45deg,#0000 75%,#e8e8e4 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.preview-canvas--white{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:#fff}.preview-bound{justify-content:center;align-items:center;transition:width .25s,height .25s;display:inline-flex;position:relative}.preview-bound:after{content:"";pointer-events:none;border:1.5px dashed #2d6a4f80;animation:.3s forwards cut-line-in;position:absolute;inset:0}.preview-bound .cut-corner{pointer-events:none;width:10px;height:10px;position:absolute}.preview-bound .cut-corner--tl{border-top:2px solid #2d6a4fcc;border-left:2px solid #2d6a4fcc;top:-1px;left:-1px}.preview-bound .cut-corner--tr{border-top:2px solid #2d6a4fcc;border-right:2px solid #2d6a4fcc;top:-1px;right:-1px}.preview-bound .cut-corner--bl{border-bottom:2px solid #2d6a4fcc;border-left:2px solid #2d6a4fcc;bottom:-1px;left:-1px}.preview-bound .cut-corner--br{border-bottom:2px solid #2d6a4fcc;border-right:2px solid #2d6a4fcc;bottom:-1px;right:-1px}@keyframes cut-line-in{0%{opacity:0}to{opacity:1}}.preview-img{object-fit:contain;width:100%;height:100%;transition:all .3s;display:block}.preview-label{text-align:center;color:var(--text-tertiary);padding:8px 0 12px;font-size:11px}.controls-card .card-header{border-bottom:none}.control-group{flex-direction:column;gap:8px;padding:0 16px 16px;display:flex}.control-label{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:12px;font-weight:500;display:flex}.control-value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}.toggle-group{background:var(--bg);border-radius:var(--radius-sm);gap:3px;padding:3px;display:flex}.toggle-btn{color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:4px;flex:1;padding:6px 10px;font-size:12px;font-weight:500}.toggle-btn:hover{background:var(--surface)}.toggle-btn--active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}.range-labels{color:var(--text-tertiary);justify-content:space-between;margin-top:4px;font-size:11px;display:flex}.content{flex-direction:column;gap:14px;display:flex}.sizes-actions{align-items:center;gap:6px;display:flex}.divider-dot{color:var(--text-tertiary);font-size:14px}.sizes-count{color:var(--text-tertiary);background:var(--bg);border-radius:20px;padding:2px 8px;font-size:11px}.sizes-grid{background:var(--border-subtle);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;padding:1px;display:grid}.size-card{background:var(--surface);transition:all var(--transition);align-items:center;gap:0;display:flex;position:relative}.size-card:hover{background:var(--surface-raised)}.size-card--selected{background:var(--accent-subtle)}.size-card--selected:hover{background:var(--accent-light)}.size-card-toggle{cursor:pointer;text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:10px;min-width:0;padding:10px 12px;display:flex}.size-thumb-wrap{background:var(--bg);border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;overflow:hidden}.size-thumb{object-fit:contain;display:block}.size-label{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:12px;font-weight:500;overflow:hidden}.size-px{color:var(--text-tertiary);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:11px}.size-check{border:1.5px solid var(--border);background:var(--surface);width:18px;height:18px;color:var(--accent);transition:all var(--transition);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.size-card--selected .size-check{background:var(--accent);border-color:var(--accent);color:#fff}.size-dl-btn{border:none;border-left:1px solid var(--border-subtle);width:36px;height:100%;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.size-dl-btn:hover{color:var(--accent);background:var(--accent-subtle)}.download-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;display:flex}.download-info{flex-direction:column;gap:2px;display:flex}.download-count{color:var(--text-primary);font-size:14px;font-weight:600}.download-desc{color:var(--text-tertiary);font-size:12px}.btn-primary{border-radius:var(--radius-md);background:var(--accent);color:#fff;cursor:pointer;transition:all var(--transition);white-space:nowrap;letter-spacing:-.01em;border:none;align-items:center;gap:7px;padding:10px 22px;font-size:13px;font-weight:600;display:inline-flex}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2d6a4f40}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.download-btn{padding:11px 26px;font-size:14px}.btn-ghost{cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-sm);transition:all var(--transition);background:0 0;border:none;align-items:center;gap:5px;padding:4px 6px;font-size:12px;font-weight:500;display:inline-flex}.btn-ghost:hover{color:var(--text-primary);background:var(--border-subtle)}.btn-sm{font-size:12px}.progress-bar-wrap{background:var(--border);border-radius:2px;height:3px;overflow:hidden}.progress-bar{background:var(--accent);border-radius:2px;height:100%;transition:width .2s}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.toast{background:var(--text-primary);color:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:100;padding:10px 18px;font-size:13px;font-weight:500;animation:.22s slide-in,.3s 2.5s forwards fade-out;position:fixed;bottom:24px;right:24px}@keyframes slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out{to{opacity:0;transform:translateY(4px)}}.footer{border-top:1px solid var(--border-subtle);text-align:center;color:var(--text-tertiary);background:var(--surface);padding:14px 24px;font-size:12px}@media (width<=900px){.workspace{grid-template-columns:1fr}.sidebar{position:static}}@media (width<=600px){.main{padding:24px 16px}.header{padding:0 16px}.header-tagline{display:none}.download-bar{flex-direction:column;align-items:stretch}.download-btn{justify-content:center}}