:root{--bg-page:#f5f7fb;--bg-card:#fff;--bg-card-alt:#f8fafc;--bg-inset:#f1f5f9;--bg-hover:#f0f2f7;--bg-active:#e8ebf2;--accent-indigo:#4f46e5;--accent-indigo-light:#6366f1;--accent-indigo-bg:#4f46e50f;--accent-indigo-bg-hover:#4f46e51a;--accent-violet:#7c3aed;--accent-cyan:#0891b2;--accent-cyan-bg:#0891b20f;--accent-emerald:#059669;--accent-emerald-bg:#0596690f;--accent-amber:#d97706;--accent-amber-bg:#d977060f;--accent-rose:#e11d48;--accent-rose-bg:#e11d480f;--gradient-indigo:linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);--gradient-cyan:linear-gradient(135deg, #0891b2 0%, #0ea5e9 100%);--gradient-emerald:linear-gradient(135deg, #059669 0%, #10b981 100%);--text-heading:#0f172a;--text-body:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--text-accent:#4f46e5;--border-light:#e2e8f0;--border-medium:#cbd5e1;--border-accent:#4f46e54d;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:80px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-xs:0 1px 2px #0000000a;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 6px -1px #0000000f, 0 2px 4px -2px #0000000a;--shadow-lg:0 10px 15px -3px #00000012, 0 4px 6px -4px #0000000a;--shadow-xl:0 20px 25px -5px #00000014, 0 8px 10px -6px #0000000a;--shadow-card:0 1px 3px #0000000a, 0 4px 12px #00000008;--shadow-card-hover:0 4px 12px #00000014, 0 8px 24px #0000000a;--shadow-accent:0 4px 14px #4f46e533;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.75rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--bg-page);color:var(--text-body);min-height:100vh;line-height:1.6}img{max-width:100%;display:block}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,select{color:inherit;font-family:inherit}.app-container{max-width:1280px;padding:0 var(--space-lg) var(--space-3xl);margin:0 auto}.hero{text-align:center;padding:var(--space-3xl) var(--space-lg) var(--space-2xl);position:relative}.hero:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(#4f46e50f 0%,#0000 70%);width:800px;height:500px;position:absolute;top:-200px;left:50%;transform:translate(-50%)}.hero-badge{align-items:center;gap:var(--space-sm);padding:6px var(--space-md);background:var(--accent-indigo-bg);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--accent-indigo);margin-bottom:var(--space-lg);letter-spacing:.3px;text-transform:uppercase;z-index:1;border:1px solid #4f46e51f;font-weight:600;display:inline-flex;position:relative}.hero-badge .dot{background:var(--accent-emerald);border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}.hero h1{font-size:var(--text-4xl);letter-spacing:-.03em;margin-bottom:var(--space-md);color:var(--text-heading);z-index:1;font-weight:800;line-height:1.15;position:relative}.hero h1 .gradient-text{background:var(--gradient-indigo);-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:var(--text-lg);color:var(--text-secondary);z-index:1;max-width:580px;margin:0 auto;line-height:1.7;position:relative}.service-nav{gap:var(--space-sm);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-light);margin-bottom:var(--space-xl);box-shadow:var(--shadow-xs);padding:6px;display:flex}.service-nav-btn{padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary);transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--space-sm);flex:1;font-weight:600;display:flex;position:relative}.service-nav-btn:hover{color:var(--text-body);background:var(--bg-hover)}.service-nav-btn.active{background:var(--gradient-indigo);color:#fff;box-shadow:var(--shadow-accent)}.service-nav-btn.active.convert-active{background:var(--gradient-indigo)}.service-nav-btn.active.crop-active{background:var(--gradient-cyan);box-shadow:0 4px 14px #0891b233}.service-nav-btn.active.compress-active{background:var(--gradient-emerald);box-shadow:0 4px 14px #05966933}.service-nav-btn .nav-icon{font-size:18px;line-height:1}.service-nav-btn .nav-label-short{display:none}.service-workspace{animation:.35s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.workspace-layout{gap:var(--space-xl);grid-template-columns:1fr 380px;align-items:start;display:grid}@media (width<=960px){.workspace-layout{grid-template-columns:1fr}}.upload-zone{border:2px dashed var(--border-medium);border-radius:var(--radius-xl);padding:var(--space-4xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-base);background:var(--bg-card);position:relative}.upload-zone:hover{border-color:var(--accent-indigo-light);background:var(--accent-indigo-bg);box-shadow:var(--shadow-md)}.upload-zone.drag-over{border-color:var(--accent-indigo);background:var(--accent-indigo-bg-hover);box-shadow:var(--shadow-accent);transform:scale(1.005)}.upload-icon{width:72px;height:72px;margin:0 auto var(--space-lg);background:var(--gradient-indigo);border-radius:var(--radius-xl);box-shadow:var(--shadow-accent);justify-content:center;align-items:center;font-size:32px;display:flex}.upload-icon.convert{background:var(--gradient-indigo)}.upload-icon.crop{background:var(--gradient-cyan)}.upload-icon.compress{background:var(--gradient-emerald)}.upload-title{font-size:var(--text-xl);color:var(--text-heading);margin-bottom:var(--space-sm);font-weight:700}.upload-subtitle{font-size:var(--text-sm);color:var(--text-muted)}.upload-formats{gap:var(--space-sm);margin-top:var(--space-lg);flex-wrap:wrap;justify-content:center;display:flex}.format-badge{border-radius:var(--radius-sm);font-size:var(--text-xs);background:var(--accent-indigo-bg);color:var(--accent-indigo);border:1px solid #4f46e51a;padding:4px 10px;font-weight:600}.file-info-bar{justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);box-shadow:var(--shadow-xs);display:flex}.file-details{align-items:center;gap:var(--space-sm);min-width:0;display:flex;overflow:hidden}.file-icon{border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.file-icon.convert{background:var(--accent-indigo-bg)}.file-icon.crop{background:var(--accent-cyan-bg)}.file-icon.compress{background:var(--accent-emerald-bg)}.file-name{font-weight:600;font-size:var(--text-sm);color:var(--text-heading);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-meta{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}.preview-container{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-light);padding:var(--space-md);min-height:360px;box-shadow:var(--shadow-card);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:visible}.preview-container .checkerboard{opacity:.5;border-radius:var(--radius-lg);background-image:linear-gradient(45deg,#f1f5f9 25%,#0000 25%),linear-gradient(-45deg,#f1f5f9 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f1f5f9 75%),linear-gradient(-45deg,#0000 75%,#f1f5f9 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0;overflow:hidden}.preview-canvas-wrapper{z-index:1;max-width:100%;max-height:480px;position:relative}.preview-canvas-wrapper canvas{border-radius:var(--radius-sm);object-fit:contain;max-width:100%;max-height:480px}.preview-info{bottom:var(--space-md);left:var(--space-md);right:var(--space-md);gap:var(--space-sm);z-index:2;flex-wrap:wrap;display:flex;position:absolute}.info-chip{backdrop-filter:blur(8px);border-radius:var(--radius-sm);font-size:var(--text-xs);color:#fff;font-weight:500;font-family:var(--font-mono);background:#0f172abf;padding:4px 10px}.controls-panel{gap:var(--space-md);flex-direction:column;display:flex}.control-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-card)}.control-card-title{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:.8px;font-weight:700}.format-grid{gap:var(--space-sm);grid-template-columns:repeat(2,1fr);display:grid}.format-card{padding:10px var(--space-md);background:var(--bg-card-alt);border:1.5px solid var(--border-light);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-sm);font-weight:500}.format-card:hover{background:var(--bg-hover);border-color:var(--border-medium);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.format-card.selected{border-color:var(--accent-indigo);background:var(--accent-indigo-bg);color:var(--accent-indigo);box-shadow:0 0 0 3px #4f46e514}.service-crop .format-card.selected{border-color:var(--accent-cyan);background:var(--accent-cyan-bg);color:var(--accent-cyan);box-shadow:0 0 0 3px #0891b214}.service-compress .format-card.selected{border-color:var(--accent-emerald);background:var(--accent-emerald-bg);color:var(--accent-emerald);box-shadow:0 0 0 3px #05966914}.format-card .format-ext{font-weight:700;font-size:var(--text-base);margin-bottom:1px}.format-card .format-desc{color:var(--text-muted);font-size:11px}.shape-grid{gap:var(--space-sm);grid-template-columns:repeat(2,1fr);display:grid}.shape-card{padding:var(--space-sm) var(--space-xs);background:var(--bg-card-alt);border:1.5px solid var(--border-light);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:all var(--transition-fast)}.shape-card:hover{background:var(--bg-hover);border-color:var(--border-medium);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.shape-card.selected{border-color:var(--accent-cyan);background:var(--accent-cyan-bg);box-shadow:0 0 0 3px #0891b214}.shape-card .shape-icon{margin-bottom:2px;font-size:20px}.shape-card .shape-label{color:var(--text-secondary);font-size:11px;font-weight:600}.range-group{margin-bottom:var(--space-md)}.range-group:last-child{margin-bottom:0}.range-header{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.range-label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.range-value{font-size:var(--text-sm);color:var(--accent-indigo);font-weight:700;font-family:var(--font-mono);background:var(--accent-indigo-bg);border-radius:var(--radius-sm);padding:2px 10px}.service-crop .range-value{color:var(--accent-cyan);background:var(--accent-cyan-bg)}.service-compress .range-value{color:var(--accent-emerald);background:var(--accent-emerald-bg)}input[type=range]{appearance:none;border-radius:var(--radius-full);background:var(--bg-inset);cursor:pointer;border:1px solid var(--border-light);outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--gradient-indigo);width:20px;height:20px;box-shadow:var(--shadow-md), var(--shadow-accent);cursor:pointer;transition:transform var(--transition-fast);border:3px solid #fff;border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.service-crop input[type=range]::-webkit-slider-thumb{background:var(--gradient-cyan);box-shadow:var(--shadow-md), 0 4px 14px #0891b233}.service-compress input[type=range]::-webkit-slider-thumb{background:var(--gradient-emerald);box-shadow:var(--shadow-md), 0 4px 14px #05966933}input[type=range]::-moz-range-thumb{background:var(--gradient-indigo);width:20px;height:20px;box-shadow:var(--shadow-md);cursor:pointer;border:3px solid #fff;border-radius:50%}.preset-group{margin-top:var(--space-sm);flex-wrap:wrap;gap:6px;display:flex}.preset-btn{background:var(--bg-card-alt);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--text-muted);transition:all var(--transition-fast);padding:5px 12px;font-weight:600}.preset-btn:hover{background:var(--bg-hover);color:var(--text-body);border-color:var(--border-medium)}.preset-btn.active{background:var(--accent-indigo-bg);border-color:var(--accent-indigo);color:var(--accent-indigo)}.service-crop .preset-btn.active{background:var(--accent-cyan-bg);border-color:var(--accent-cyan);color:var(--accent-cyan)}.service-compress .preset-btn.active{background:var(--accent-emerald-bg);border-color:var(--accent-emerald);color:var(--accent-emerald)}.size-comparison{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-card)}.size-row{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.size-label{font-size:var(--text-sm);color:var(--text-muted);font-weight:500}.size-value{font-size:var(--text-sm);font-weight:700;font-family:var(--font-mono)}.size-value.original{color:var(--text-secondary)}.size-value.compressed{color:var(--accent-emerald)}.size-bar{background:var(--bg-inset);border-radius:var(--radius-full);height:8px;margin:var(--space-md) 0;border:1px solid var(--border-light);overflow:hidden}.size-bar-fill{border-radius:var(--radius-full);background:var(--gradient-indigo);height:100%;transition:width var(--transition-slow)}.service-crop .size-bar-fill{background:var(--gradient-cyan)}.service-compress .size-bar-fill{background:var(--gradient-emerald)}.size-saved{text-align:center;font-size:var(--text-sm);color:var(--text-secondary);font-weight:600}.size-saved .percentage{color:var(--accent-emerald);font-size:var(--text-lg);font-weight:800}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:10px var(--space-lg);border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--transition-fast);cursor:pointer;border:none;font-weight:600;display:inline-flex}.btn-primary{background:var(--gradient-indigo);color:#fff;box-shadow:var(--shadow-md), var(--shadow-accent);width:100%;padding:14px var(--space-lg);font-size:var(--text-base);border-radius:var(--radius-md)}.btn-primary:hover{box-shadow:var(--shadow-lg), 0 6px 20px #4f46e54d;transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.service-crop .btn-primary{background:var(--gradient-cyan);box-shadow:var(--shadow-md), 0 4px 14px #0891b233}.service-crop .btn-primary:hover{box-shadow:var(--shadow-lg), 0 6px 20px #0891b24d}.service-compress .btn-primary{background:var(--gradient-emerald);box-shadow:var(--shadow-md), 0 4px 14px #05966933}.service-compress .btn-primary:hover{box-shadow:var(--shadow-lg), 0 6px 20px #0596694d}.btn-secondary{background:var(--bg-card-alt);border:1px solid var(--border-light);color:var(--text-secondary);padding:8px 16px}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-medium);color:var(--text-body)}.btn-outline-danger{color:var(--accent-rose);background:0 0;border:1px solid #e11d4833;padding:8px 16px}.btn-outline-danger:hover{background:var(--accent-rose-bg);border-color:var(--accent-rose)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.crop-overlay-container{z-index:10;cursor:crosshair;position:absolute;top:0;left:0}.crop-selection{border:2.5px solid var(--accent-cyan);cursor:move;position:absolute}.crop-selection.circle{border-radius:50%}.crop-handle{border:2.5px solid var(--accent-cyan);width:12px;height:12px;box-shadow:var(--shadow-sm);background:#fff;border-radius:3px;position:absolute}.crop-handle.top-left{cursor:nw-resize;top:-6px;left:-6px}.crop-handle.top-right{cursor:ne-resize;top:-6px;right:-6px}.crop-handle.bottom-left{cursor:sw-resize;bottom:-6px;left:-6px}.crop-handle.bottom-right{cursor:se-resize;bottom:-6px;right:-6px}.crop-dimensions{border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:var(--font-mono);color:#fff;white-space:nowrap;background:#0f172ad9;padding:3px 10px;font-weight:600;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.number-input-group{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);display:flex}.number-input-group label{font-size:var(--text-sm);color:var(--text-muted);min-width:80px;font-weight:500}.number-input{width:100%;padding:8px var(--space-md);background:var(--bg-card-alt);border:1.5px solid var(--border-light);border-radius:var(--radius-sm);font-size:var(--text-sm);font-family:var(--font-mono);color:var(--text-body);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.number-input:focus{border-color:var(--accent-indigo);box-shadow:0 0 0 3px #4f46e514}.service-compress .number-input:focus{border-color:var(--accent-emerald);box-shadow:0 0 0 3px #05966914}.number-input::placeholder{color:var(--text-muted)}.instructions-text{font-size:var(--text-sm);color:var(--text-muted);line-height:1.6}.crop-info{margin-top:var(--space-sm);font-size:var(--text-xs);font-family:var(--font-mono);color:var(--accent-cyan);background:var(--accent-cyan-bg);border-radius:var(--radius-sm);padding:4px 10px;font-weight:600;display:inline-block}.crop-actions{gap:var(--space-sm);display:flex}.crop-actions .btn-primary{flex:1}.action-bar{margin-top:var(--space-md)}.footer{text-align:center;padding:var(--space-3xl) 0 var(--space-lg);color:var(--text-muted);font-size:var(--text-sm)}.spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){.hero h1{font-size:var(--text-3xl)}.hero p{font-size:var(--text-base)}.app-container{padding:0 var(--space-md) var(--space-2xl)}.upload-zone{padding:var(--space-2xl) var(--space-md)}.service-nav-btn{padding:var(--space-sm);font-size:var(--text-xs)}.service-nav-btn .nav-label-full{display:none}.service-nav-btn .nav-label-short{display:inline}}@media (width<=480px){.hero h1{font-size:var(--text-2xl)}.hero{padding:var(--space-2xl) var(--space-sm) var(--space-lg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{color:var(--text-heading);background:#4f46e526}