:root{--bg-primary: #0A0D14;--bg-secondary: #111622;--bg-card: rgba(22, 29, 46, .75);--bg-card-hover: rgba(30, 39, 61, .9);--bg-glass: rgba(18, 24, 38, .85);--border-subtle: rgba(255, 255, 255, .09);--border-medium: rgba(255, 255, 255, .18);--border-accent: rgba(59, 130, 246, .5);--text-primary: #F8FAFC;--text-secondary: #94A3B8;--text-muted: #64748B;--accent-blue: #3B82F6;--accent-cyan: #06B6D4;--accent-purple: #8B5CF6;--accent-green: #10B981;--accent-orange: #F59E0B;--accent-red: #EF4444;--gradient-main: linear-gradient(135deg, #3B82F6 0%, #06B6D4 50%, #8B5CF6 100%);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .45);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .65);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-heading: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace}html.light{--bg-primary: #F8FAFC;--bg-secondary: #F1F5F9;--bg-card: rgba(255, 255, 255, .88);--bg-card-hover: rgba(255, 255, 255, 1);--bg-glass: rgba(255, 255, 255, .85);--border-subtle: rgba(15, 23, 42, .08);--border-medium: rgba(15, 23, 42, .16);--text-primary: #0F172A;--text-secondary: #475569;--text-muted: #94A3B8;--shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);--shadow-md: 0 8px 24px rgba(15, 23, 42, .1);--shadow-lg: 0 16px 48px rgba(15, 23, 42, .15)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;position:relative;overflow-x:hidden;transition:background-color .3s ease,color .3s ease;line-height:1.6}.ambient-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.ambient-glow{position:absolute;border-radius:50%;filter:blur(140px)}.glow-1{top:-10%;left:10%;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.16) 0%,transparent 70%)}.glow-2{top:40%;right:-10%;width:450px;height:450px;background:radial-gradient(circle,rgba(139,92,246,.14) 0%,transparent 70%)}.glow-3{bottom:-15%;left:35%;width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.12) 0%,transparent 70%)}.app-wrapper{position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:2.5rem 1.5rem 5rem}.navbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:var(--bg-glass);border-bottom:1px solid var(--border-subtle);transition:all .3s ease}.nav-container{max-width:1240px;margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.brand-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text-primary);font-weight:700;font-family:var(--font-heading);font-size:1.25rem}.logo-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--gradient-main);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #3b82f666}.gradient-text{background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.badge-edge{display:inline-block;padding:.2rem .65rem;border-radius:var(--radius-full);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:#3b82f626;color:var(--accent-blue);border:1px solid rgba(59,130,246,.35)}.nav-actions{display:flex;align-items:center;gap:.75rem}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.online{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-dot.offline{background:var(--accent-red)}.status-dot.idle{background:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.15rem;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;border:none;transition:all .2s cubic-bezier(.4,0,.2,1);text-decoration:none}.btn-primary{background:var(--gradient-main);color:#fff;box-shadow:0 4px 14px #3b82f659}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #3b82f68c}.btn-success{background:var(--accent-green);color:#fff;box-shadow:0 4px 14px #10b98159}.btn-success:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #10b9818c}.btn-secondary{background:var(--bg-card);color:var(--accent-cyan);border:1px solid var(--border-medium);box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--accent-cyan);color:var(--text-primary);transform:translateY(-1px);box-shadow:0 4px 14px #06b6d44d}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle)}.btn-ghost:hover:not(:disabled){background:#ffffff0f;color:var(--text-primary);border-color:var(--border-medium)}.btn-icon{width:40px;height:40px;padding:0;background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.btn-icon:hover{color:var(--text-primary);background:#ffffff0f}.hero-section{text-align:center;max-width:780px;margin:0 auto 2.5rem}.hero-badges{margin-bottom:1rem}.pill-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1rem;border-radius:var(--radius-full);background:#ffffff0a;border:1px solid var(--border-subtle);font-size:.82rem;color:var(--text-secondary)}.pill-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan)}.hero-title{font-family:var(--font-heading);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.15;margin-bottom:1rem}.hero-subtitle{font-size:1.05rem;color:var(--text-secondary);max-width:660px;margin:0 auto}.studio-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-medium);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;margin-bottom:3.5rem}.toolbar-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;padding:1.5rem;border-bottom:1px solid var(--border-subtle);background:#ffffff05}.control-item{display:flex;flex-direction:column;gap:.6rem}.control-header{display:flex;align-items:center;justify-content:space-between}.control-label{font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}.value-tag{font-size:.82rem;font-weight:600;font-family:var(--font-mono);color:var(--accent-cyan)}.custom-slider{-webkit-appearance:none;width:100%;height:8px;border-radius:var(--radius-full);background:var(--border-medium);outline:none}.custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gradient-main);cursor:pointer;box-shadow:0 0 10px #3b82f680;transition:transform .15s ease}.custom-slider::-webkit-slider-thumb:hover{transform:scale(1.18)}.color-presets{display:flex;align-items:center;gap:.6rem}.color-swatch{width:32px;height:32px;border-radius:var(--radius-sm);border:1.5px solid var(--border-medium);box-shadow:inset 0 0 0 1px #0000002e,var(--shadow-sm);cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1)}.color-swatch:hover:not(.active){border-color:var(--accent-cyan);transform:scale(1.08)}.color-swatch.active{border:2.5px solid var(--accent-blue);box-shadow:0 0 0 2px #3b82f64d,0 0 14px #3b82f6a6;transform:scale(1.14)}.custom-color-picker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:0 .85rem;height:32px;border-radius:var(--radius-sm);background:var(--bg-secondary);border:1.5px solid var(--border-medium);font-size:.78rem;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .2s ease}.custom-color-picker:hover{border-color:var(--accent-blue);background:var(--bg-card)}.custom-color-picker input[type=color]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.custom-swatch-dot{width:14px;height:14px;border-radius:4px;border:1px solid var(--border-medium);box-shadow:inset 0 0 0 1px #0000002e}.mode-toggle-group{display:flex;flex-wrap:wrap;background:var(--bg-secondary);border-radius:var(--radius-md);padding:5px;border:1px solid var(--border-medium);gap:5px}.mode-btn{flex:1;min-width:52px;padding:.5rem .65rem;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:.78rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.35rem;transition:all .2s cubic-bezier(.16,1,.3,1);white-space:nowrap}.mode-btn:hover:not(.active){background:var(--border-subtle);color:var(--text-primary)}.mode-btn.active{background:var(--gradient-main);color:#fff;font-weight:700;box-shadow:0 2px 10px #3b82f666}.dropzone{padding:4rem 2rem;text-align:center;cursor:pointer;position:relative;border-bottom:1px solid var(--border-subtle);transition:all .25s ease}.dropzone:hover,.dropzone.dragover{background:#3b82f60a}.dropzone.dragover{border:2px dashed var(--accent-blue)}.hidden{display:none!important}.dropzone-inner{max-width:480px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.upload-illustration{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center}.ring-pulse{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid var(--accent-blue);opacity:.25;animation:pulseRing 2.5s infinite}@keyframes pulseRing{0%{transform:scale(.95);opacity:.5}50%{transform:scale(1.25);opacity:0}to{transform:scale(.95);opacity:.5}}.icon-circle{width:64px;height:64px;border-radius:50%;background:#3b82f61f;color:var(--accent-blue);display:flex;align-items:center;justify-content:center;border:1px solid rgba(59,130,246,.3)}.dropzone-title{font-family:var(--font-heading);font-size:1.4rem;font-weight:700}.dropzone-hint{font-size:.92rem;color:var(--text-secondary)}.browse-link{color:var(--accent-cyan);text-decoration:underline;font-weight:600}kbd{font-family:var(--font-mono);background:#ffffff14;padding:.15rem .4rem;border-radius:4px;font-size:.8rem;border:1px solid var(--border-subtle)}.supported-formats{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.supported-formats span{font-size:.72rem;font-weight:600;padding:.2rem .65rem;border-radius:var(--radius-full);background:#ffffff0a;color:var(--text-muted);border:1px solid var(--border-subtle)}.queue-section{border-bottom:1px solid var(--border-subtle);padding:2.25rem 2rem;background:var(--bg-secondary)}.queue-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:1rem}.queue-info{display:flex;align-items:center;gap:.75rem}.queue-title{font-family:var(--font-heading);font-size:1.35rem;font-weight:700}.queue-badge{padding:.25rem .8rem;border-radius:var(--radius-full);font-size:.76rem;font-weight:700;background:#3b82f626;color:var(--accent-blue);border:1px solid rgba(59,130,246,.35)}.queue-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.queue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.4rem}.queue-card{background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-lg);padding:1.35rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.15rem;box-shadow:var(--shadow-sm);transition:all .25s cubic-bezier(.16,1,.3,1)}.queue-card:hover{border-color:var(--accent-blue);transform:translateY(-2px);box-shadow:var(--shadow-md)}.card-top{display:flex;align-items:center;gap:.95rem;min-width:0;max-width:100%}.card-thumb{width:68px;height:68px;border-radius:var(--radius-sm);object-fit:cover;background:var(--bg-secondary);border:1px solid var(--border-medium);box-shadow:var(--shadow-sm);flex-shrink:0}.card-meta{flex:1;min-width:0;max-width:100%;overflow:hidden}.card-name{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);display:block;max-width:100%}.card-details{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-secondary);margin-top:.3rem}.format-tag{font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:6px;background:var(--border-subtle);color:var(--text-primary);border:1px solid var(--border-subtle)}.card-status-box{display:flex;align-items:center;justify-content:space-between;font-size:.84rem;padding:.7rem .95rem;border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--border-subtle);margin-top:1rem}.status-label{font-weight:600;color:var(--text-secondary)}.savings-tag{font-family:var(--font-mono);font-weight:700;padding:.1rem .45rem;border-radius:4px}.savings-tag.positive{color:var(--accent-green);background:#10b9811f}.savings-tag.neutral{color:var(--accent-orange);background:#f59e0b1f}.card-actions{display:flex;align-items:center;gap:.6rem}.card-actions .btn{flex:1}.card-reconvert-bottom{display:flex;justify-content:center;align-items:center;width:100%;margin-top:.4rem;padding-top:.75rem;border-top:1px dashed var(--border-medium)}.btn-reconvert-card{width:100%;justify-content:center;padding:.6rem 1rem;font-size:.86rem;font-weight:700;box-shadow:0 2px 8px #3b82f638}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1.5rem}.modal-card{background:var(--bg-secondary);border:1px solid var(--border-medium);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}.compare-modal-card{max-width:860px}.api-modal-card{max-width:520px}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}.modal-body{padding:1.5rem}.modal-footer{padding:1.25rem 1.5rem;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:.75rem;background:#00000040}.split-slider-container{position:relative;width:100%;height:420px;border-radius:var(--radius-md);overflow:hidden;background:#18181b;-webkit-user-select:none;user-select:none;border:1px solid var(--border-subtle)}.split-layer{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.split-layer img{width:100%;height:100%;object-fit:contain;pointer-events:none}.before-layer{border-right:2px solid var(--accent-blue)}.split-label{position:absolute;top:1rem;padding:.4rem .85rem;border-radius:var(--radius-sm);font-size:.78rem;font-weight:700;background:#0a0d14e0;color:#fff;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap;line-height:1.2;z-index:15;box-shadow:0 4px 12px #00000073}.before-label{left:1rem}.after-label{right:1rem}.slider-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--accent-blue);cursor:ew-resize;z-index:10}.handle-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent-blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px #3b82f699}.compare-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}.stat-box{background:#ffffff0a;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.85rem;text-align:center}.stat-box.highlight{border-color:#10b98166;background:#10b98114}.stat-label{display:block;font-size:.75rem;color:var(--text-secondary)}.stat-value{font-family:var(--font-mono);font-weight:700;font-size:1.1rem;margin-top:.25rem;display:block}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary);margin-bottom:.45rem}.form-input{width:100%;padding:.75rem 1rem;border-radius:var(--radius-sm);background:#0006;border:1px solid var(--border-medium);color:var(--text-primary);font-family:var(--font-mono);font-size:.88rem}.form-input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px #3b82f640}.form-hint{font-size:.78rem;color:var(--text-secondary);margin-top:.45rem}.api-status-banner{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;border-radius:var(--radius-sm);background:#ffffff0a;border:1px solid var(--border-subtle);font-size:.85rem}.info-section{max-width:1000px;margin:0 auto;padding:2rem 0}.section-header{text-align:center;margin-bottom:2.5rem}.section-title{font-family:var(--font-heading);font-size:1.8rem;font-weight:700;margin-bottom:.5rem}.section-subtitle{color:var(--text-secondary);font-size:.95rem}.grid-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:3.5rem}.feature-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1.75rem;transition:transform .2s ease,border-color .2s ease}.feature-card:hover{transform:translateY(-3px);border-color:var(--border-medium)}.feature-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:#3b82f61f;color:var(--accent-blue);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}.feature-card h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem}.feature-card p{font-size:.92rem;color:var(--text-secondary)}.faq-section{max-width:780px;margin:0 auto}.accordion-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.accordion-item{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.accordion-header{padding:1.15rem 1.4rem;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}.accordion-header::-webkit-details-marker{display:none}.accordion-body{padding:0 1.4rem 1.3rem;font-size:.92rem;color:var(--text-secondary);line-height:1.6}.toast-container{position:fixed;bottom:2rem;right:2rem;z-index:200;display:flex;flex-direction:column;gap:.75rem}.toast{padding:.85rem 1.25rem;border-radius:var(--radius-sm);background:var(--bg-secondary);border:1px solid var(--border-medium);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.75rem}.toast-dot{width:10px;height:10px;border-radius:50%}.toast-dot.success{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.toast-dot.error{background:var(--accent-red)}.toast-dot.warning{background:var(--accent-orange)}.toast-dot.info{background:var(--accent-blue)}.app-footer{border-top:1px solid var(--border-subtle);padding:2rem 1.5rem;text-align:center;font-size:.82rem;color:var(--text-muted)}.mobile-actions-divider{display:none}.mobile-pair-actions{display:flex;align-items:center;gap:.6rem}@media(max-width:768px){.hero-title{font-size:2.1rem}.hero-subtitle{font-size:.95rem;padding:0 1rem}.toolbar-bar{grid-template-columns:1fr;padding:1.15rem;gap:1.25rem}.queue-section{padding:1.5rem 1.15rem}.queue-header{flex-direction:column;align-items:stretch;gap:1.15rem;margin-bottom:1.35rem}.queue-info{width:100%;justify-content:space-between}.queue-title{font-size:1.2rem}.queue-actions{display:flex;flex-direction:column;width:100%;gap:.65rem}.btn-upload-more{width:100%;justify-content:center;padding:.75rem 1rem;font-size:.92rem}.mobile-actions-divider{display:block;width:100%;border:none;border-top:1px solid var(--border-subtle);margin:.25rem 0}.mobile-pair-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.6rem}.mobile-pair-actions .btn{width:100%;justify-content:center;padding:.7rem .5rem;font-size:.85rem}.btn-download-zip{width:100%;justify-content:center;padding:.75rem 1rem;font-size:.92rem}.queue-grid{grid-template-columns:1fr;gap:1rem}.queue-card{padding:1rem;gap:.9rem}.card-top{gap:.75rem}.card-thumb{width:58px;height:58px}.card-name{font-size:.93rem}.card-details{font-size:.73rem;flex-wrap:wrap}.card-status-box{padding:.6rem .75rem;font-size:.81rem;flex-wrap:wrap;gap:.4rem}.card-actions{display:flex;gap:.5rem;width:100%}.card-actions .btn{flex:1;justify-content:center;padding:.6rem .75rem;font-size:.85rem}}