:root,[data-theme=light]{--color-paper: #FFFBF5;--color-paper-light: #FFFFFF;--color-paper-dark: #FFF5EB;--color-ink: #3D3029;--color-ink-light: #7A6B5F;--color-ink-faint: #E8DFD5;--color-accent: #E86A33;--color-accent-dark: #D45A25;--color-accent-rgb: 232, 106, 51;--color-success: #6B9F6B;--color-warning: #E89B3C;--color-error: #D94F4F;--doodle-opacity: .12;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--duration-fast: .15s;--duration-normal: .25s}[data-theme=dark]{--color-paper: #1F1A17;--color-paper-light: #2A2420;--color-paper-dark: #161210;--color-ink: #F0EBE5;--color-ink-light: #B5A99D;--color-ink-faint: #3D3530;--color-accent: #F08C5A;--color-accent-dark: #E86A33;--color-accent-rgb: 240, 140, 90;--doodle-opacity: .08}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background:var(--color-paper);color:var(--color-ink);line-height:1.5;min-height:100vh;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none}input[type=range]{cursor:pointer}img{max-width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes progressPulse{0%,to{box-shadow:0 0 rgba(var(--color-accent-rgb),.4)}50%{box-shadow:0 0 0 8px rgba(var(--color-accent-rgb),0)}}@keyframes checkmark{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(-100px) rotate(720deg);opacity:0}}.animate-fade-in{animation:fadeIn .3s ease-out forwards}.animate-fade-out{animation:fadeOut .3s ease-out forwards}.animate-slide-up{animation:slideUp .4s cubic-bezier(.16,1,.3,1) forwards}.animate-slide-down{animation:slideDown .4s cubic-bezier(.16,1,.3,1) forwards}.animate-scale-in{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-bounce{animation:bounce .6s ease-in-out}.state-entering{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.state-exiting{animation:scaleOut .2s ease-out forwards}.skeleton{background:linear-gradient(90deg,var(--color-paper-dark) 25%,var(--color-paper-light) 50%,var(--color-paper-dark) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}.progress-bar{position:relative;height:4px;background:var(--color-ink-faint);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-dark));border-radius:2px;transition:width .3s ease-out}.progress-bar-indeterminate .progress-bar-fill{width:30%;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.spinner-large{width:40px;height:40px;border-width:3px}.spinner-accent{border-color:rgba(var(--color-accent-rgb),.3);border-top-color:var(--color-accent)}.success-checkmark{width:24px;height:24px}.success-checkmark circle{fill:var(--color-success);animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.success-checkmark path{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:checkmark .4s .2s ease-out forwards}.stagger-item{opacity:0;animation:slideUp .4s cubic-bezier(.16,1,.3,1) forwards}.stagger-item:nth-child(1){animation-delay:0ms}.stagger-item:nth-child(2){animation-delay:50ms}.stagger-item:nth-child(3){animation-delay:.1s}.stagger-item:nth-child(4){animation-delay:.15s}.stagger-item:nth-child(5){animation-delay:.2s}.stagger-item:nth-child(6){animation-delay:.25s}.stagger-item:nth-child(7){animation-delay:.3s}.stagger-item:nth-child(8){animation-delay:.35s}.hover-lift{transition:transform .2s ease,box-shadow .2s ease}.hover-lift:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.press-effect{transition:transform .1s ease}.press-effect:active{transform:scale(.98)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(100px);padding:12px 24px;background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-md);box-shadow:0 4px 20px #0003;z-index:1000;opacity:0;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s ease}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.toast-success{background:var(--color-success)}.toast-error{background:var(--color-error)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.animate-spin{animation:none}.progress-bar-indeterminate .progress-bar-fill{animation:none;width:50%}}.app:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--doodle-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%232C2C2C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Camera --%3E%3Crect x='15' y='20' width='30' height='22' rx='3'/%3E%3Ccircle cx='30' cy='31' r='6'/%3E%3Crect x='25' y='17' width='10' height='4' rx='1'/%3E%3C!-- Photo frame --%3E%3Crect x='70' y='15' width='28' height='24' rx='2'/%3E%3Cpath d='M73 35l6-8 4 5 8-10 7 13'/%3E%3Ccircle cx='78' cy='22' r='3'/%3E%3C!-- Landscape mountains --%3E%3Cpath d='M120 38l10-18 10 18M125 38l5-10 5 10'/%3E%3Ccircle cx='145' cy='18' r='4'/%3E%3C!-- Image file icon --%3E%3Cpath d='M165 15h18v26h-22v-22l4-4z'/%3E%3Cpath d='M165 15v4h-4'/%3E%3Ccircle cx='172' cy='27' r='3'/%3E%3C!-- Compress arrows --%3E%3Cpath d='M20 70l8 8m0-8l-8 8M35 70l-8 8m0-8l8 8'/%3E%3Crect x='17' y='67' width='21' height='14' rx='2'/%3E%3C!-- Gallery grid --%3E%3Crect x='65' y='65' width='10' height='10' rx='1'/%3E%3Crect x='78' y='65' width='10' height='10' rx='1'/%3E%3Crect x='91' y='65' width='10' height='10' rx='1'/%3E%3Crect x='65' y='78' width='10' height='10' rx='1'/%3E%3Crect x='78' y='78' width='10' height='10' rx='1'/%3E%3C!-- Crop tool --%3E%3Crect x='120' y='60' width='24' height='20' rx='1' stroke-dasharray='4 2'/%3E%3Cpath d='M117 65v-5h5M147 65v-5h-5M117 75v5h5M147 75v5h-5'/%3E%3C!-- Resize icon --%3E%3Crect x='165' y='60' width='20' height='16' rx='2'/%3E%3Cpath d='M175 68l5 5m0-5l-5 5'/%3E%3C!-- Polaroid --%3E%3Crect x='15' y='110' width='26' height='32' rx='2'/%3E%3Crect x='18' y='113' width='20' height='18' rx='1'/%3E%3C!-- Film strip --%3E%3Crect x='60' y='110' width='50' height='26' rx='2'/%3E%3Crect x='64' y='114' width='12' height='12' rx='1'/%3E%3Crect x='80' y='114' width='12' height='12' rx='1'/%3E%3Crect x='96' y='114' width='12' height='12' rx='1'/%3E%3Ccircle cx='67' y='130' r='1.5'/%3E%3Ccircle cx='75' y='130' r='1.5'/%3E%3Ccircle cx='83' y='130' r='1.5'/%3E%3Ccircle cx='91' y='130' r='1.5'/%3E%3Ccircle cx='99' y='130' r='1.5'/%3E%3Ccircle cx='105' y='130' r='1.5'/%3E%3C!-- Magic wand --%3E%3Cpath d='M130 138l15-22'/%3E%3Cpath d='M127 120l4 4M135 116l4 4M142 122l-4-4'/%3E%3Ccircle cx='130' cy='111' r='2'/%3E%3C!-- Layers --%3E%3Crect x='160' y='105' width='22' height='14' rx='2'/%3E%3Crect x='163' y='110' width='22' height='14' rx='2'/%3E%3Crect x='166' y='115' width='22' height='14' rx='2'/%3E%3C!-- Download arrow --%3E%3Cpath d='M28 165v12M22 171l6 6 6-6'/%3E%3Cpath d='M18 182h20'/%3E%3C!-- Color palette --%3E%3Ccircle cx='70' cy='170' r='12'/%3E%3Ccircle cx='64' cy='166' r='3'/%3E%3Ccircle cx='76' cy='166' r='3'/%3E%3Ccircle cx='70' cy='176' r='3'/%3E%3C!-- Aspect ratio --%3E%3Crect x='105' y='160' width='24' height='18' rx='2'/%3E%3Cpath d='M110 178l14-18'/%3E%3C!-- Quality meter --%3E%3Crect x='150' y='162' width='35' height='8' rx='2'/%3E%3Crect x='152' y='164' width='20' height='4' rx='1'/%3E%3Cpath d='M155 175l5-3 5 3 5-5 10 5'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px;background-repeat:repeat}[data-theme=dark] .app:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23E8E6E3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Camera --%3E%3Crect x='15' y='20' width='30' height='22' rx='3'/%3E%3Ccircle cx='30' cy='31' r='6'/%3E%3Crect x='25' y='17' width='10' height='4' rx='1'/%3E%3C!-- Photo frame --%3E%3Crect x='70' y='15' width='28' height='24' rx='2'/%3E%3Cpath d='M73 35l6-8 4 5 8-10 7 13'/%3E%3Ccircle cx='78' cy='22' r='3'/%3E%3C!-- Landscape mountains --%3E%3Cpath d='M120 38l10-18 10 18M125 38l5-10 5 10'/%3E%3Ccircle cx='145' cy='18' r='4'/%3E%3C!-- Image file icon --%3E%3Cpath d='M165 15h18v26h-22v-22l4-4z'/%3E%3Cpath d='M165 15v4h-4'/%3E%3Ccircle cx='172' cy='27' r='3'/%3E%3C!-- Compress arrows --%3E%3Cpath d='M20 70l8 8m0-8l-8 8M35 70l-8 8m0-8l8 8'/%3E%3Crect x='17' y='67' width='21' height='14' rx='2'/%3E%3C!-- Gallery grid --%3E%3Crect x='65' y='65' width='10' height='10' rx='1'/%3E%3Crect x='78' y='65' width='10' height='10' rx='1'/%3E%3Crect x='91' y='65' width='10' height='10' rx='1'/%3E%3Crect x='65' y='78' width='10' height='10' rx='1'/%3E%3Crect x='78' y='78' width='10' height='10' rx='1'/%3E%3C!-- Crop tool --%3E%3Crect x='120' y='60' width='24' height='20' rx='1' stroke-dasharray='4 2'/%3E%3Cpath d='M117 65v-5h5M147 65v-5h-5M117 75v5h5M147 75v5h-5'/%3E%3C!-- Resize icon --%3E%3Crect x='165' y='60' width='20' height='16' rx='2'/%3E%3Cpath d='M175 68l5 5m0-5l-5 5'/%3E%3C!-- Polaroid --%3E%3Crect x='15' y='110' width='26' height='32' rx='2'/%3E%3Crect x='18' y='113' width='20' height='18' rx='1'/%3E%3C!-- Film strip --%3E%3Crect x='60' y='110' width='50' height='26' rx='2'/%3E%3Crect x='64' y='114' width='12' height='12' rx='1'/%3E%3Crect x='80' y='114' width='12' height='12' rx='1'/%3E%3Crect x='96' y='114' width='12' height='12' rx='1'/%3E%3Ccircle cx='67' y='130' r='1.5'/%3E%3Ccircle cx='75' y='130' r='1.5'/%3E%3Ccircle cx='83' y='130' r='1.5'/%3E%3Ccircle cx='91' y='130' r='1.5'/%3E%3Ccircle cx='99' y='130' r='1.5'/%3E%3Ccircle cx='105' y='130' r='1.5'/%3E%3C!-- Magic wand --%3E%3Cpath d='M130 138l15-22'/%3E%3Cpath d='M127 120l4 4M135 116l4 4M142 122l-4-4'/%3E%3Ccircle cx='130' cy='111' r='2'/%3E%3C!-- Layers --%3E%3Crect x='160' y='105' width='22' height='14' rx='2'/%3E%3Crect x='163' y='110' width='22' height='14' rx='2'/%3E%3Crect x='166' y='115' width='22' height='14' rx='2'/%3E%3C!-- Download arrow --%3E%3Cpath d='M28 165v12M22 171l6 6 6-6'/%3E%3Cpath d='M18 182h20'/%3E%3C!-- Color palette --%3E%3Ccircle cx='70' cy='170' r='12'/%3E%3Ccircle cx='64' cy='166' r='3'/%3E%3Ccircle cx='76' cy='166' r='3'/%3E%3Ccircle cx='70' cy='176' r='3'/%3E%3C!-- Aspect ratio --%3E%3Crect x='105' y='160' width='24' height='18' rx='2'/%3E%3Cpath d='M110 178l14-18'/%3E%3C!-- Quality meter --%3E%3Crect x='150' y='162' width='35' height='8' rx='2'/%3E%3Crect x='152' y='164' width='20' height='4' rx='1'/%3E%3Cpath d='M155 175l5-3 5 3 5-5 10 5'/%3E%3C/g%3E%3C/svg%3E")}@keyframes doodle-drift{0%{background-position:0 0}to{background-position:200px 200px}}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);position:relative;background:var(--color-paper);transition:background-color var(--duration-normal) ease}.app:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at top,rgba(var(--color-accent-rgb),.03) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(var(--color-accent-rgb),.02) 0%,transparent 50%)}.main-area{position:relative;z-index:1;width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.top-nav{position:fixed;top:var(--space-md);right:var(--space-md);display:flex;align-items:center;gap:var(--space-sm);z-index:100}.nav-group{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 12px;background:var(--color-paper-light);border:1px solid var(--color-ink-faint);border-radius:var(--radius-md);box-shadow:0 2px 6px #0000000f}.nav-label{font-size:var(--font-size-xs);color:var(--color-ink-light);font-weight:500}.nav-group .nav-link{padding:4px 8px;background:transparent;border:none;box-shadow:none;font-size:var(--font-size-xs)}.nav-group .nav-link:hover{background:rgba(var(--color-accent-rgb),.1)}.nav-link{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--color-paper-light);border:1px solid var(--color-ink-faint);border-radius:var(--radius-md);color:var(--color-ink-light);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;transition:all var(--duration-fast) ease;box-shadow:0 2px 6px #0000000f}.nav-link:hover{border-color:var(--color-accent);color:var(--color-accent);background:rgba(var(--color-accent-rgb),.05)}.nav-link-highlight{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.nav-link-highlight:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark);color:#fff}.nav-link svg{flex-shrink:0}.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--color-paper-light);border:1px solid var(--color-ink-faint);display:flex;align-items:center;justify-content:center;color:var(--color-ink);transition:all var(--duration-normal) ease;box-shadow:0 2px 6px #0000000f}.theme-toggle:hover{border-color:var(--color-accent);transform:scale(1.1) rotate(15deg);box-shadow:0 4px 12px rgba(var(--color-accent-rgb),.25)}.theme-toggle:active{transform:scale(.95)}.theme-toggle svg{transition:transform var(--duration-normal) ease,opacity var(--duration-fast)}.theme-toggle:hover svg{transform:rotate(-15deg)}.theme-toggle .icon-moon,[data-theme=dark] .theme-toggle .icon-sun{display:none}[data-theme=dark] .theme-toggle .icon-moon{display:block}[data-theme=dark] .theme-toggle{box-shadow:0 2px 8px #0000004d}.privacy-badge{position:fixed;bottom:var(--space-md);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-paper-dark);border:1px solid var(--color-ink-faint);border-radius:var(--radius-lg);font-size:var(--font-size-xs);color:var(--color-ink-light);z-index:100}.privacy-badge svg{color:var(--color-success)}.brand{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.brand-icon{width:72px;height:72px;object-fit:contain}.brand-text{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-ink);letter-spacing:-.5px}.drop-zone-subtitle{font-size:var(--font-size-md);color:var(--color-ink-light);text-align:center;margin-bottom:var(--space-md)}.drop-zone{width:100%;aspect-ratio:4/3;border:2px dashed var(--color-ink-faint);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);cursor:pointer;transition:all var(--duration-fast) ease;background:var(--color-paper-light)}.drop-zone:hover{border-color:var(--color-accent);border-style:solid;background:var(--color-paper-light)}.drop-zone.drag-over{border-color:var(--color-accent);border-style:solid;border-width:3px;background:var(--color-paper-light);transform:scale(1.01)}.drop-zone-icon{width:72px;height:72px;color:var(--color-accent);opacity:.6;transition:all var(--duration-fast)}.drop-zone:hover .drop-zone-icon{opacity:1;transform:scale(1.05)}.drop-zone.drag-over .drop-zone-icon{opacity:1;transform:scale(1.1);color:var(--color-accent)}.drop-zone-text{text-align:center}.drop-zone-primary{font-size:var(--font-size-lg);font-weight:600;color:var(--color-ink);margin-bottom:4px}.drop-zone-secondary{font-size:var(--font-size-sm);color:var(--color-ink-light)}.drop-zone:hover .drop-zone-primary{color:var(--color-accent)}.keyboard-hint{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-xs);color:var(--color-ink-light)}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;background:var(--color-paper-dark);border:1px solid var(--color-ink-faint);border-radius:4px;font-family:inherit;font-size:11px;font-weight:600}.smoosh-card{width:100%;background:var(--color-paper-light);border:1px solid var(--color-ink-faint);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px #00000014}[data-theme=dark] .smoosh-card{box-shadow:0 4px 20px #0000004d}.smoosh-card-preview{width:100%;height:300px;display:flex;align-items:center;justify-content:center;background:var(--color-paper);border-bottom:1px solid var(--color-ink-faint);position:relative;overflow:hidden}.smoosh-card-preview img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.loading{color:var(--color-ink-light);font-size:var(--font-size-sm)}.comparison-container{position:absolute;inset:0;cursor:ew-resize;user-select:none}.comparison-before,.comparison-after{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.comparison-before{z-index:2}.comparison-after{z-index:1}.comparison-before img,.comparison-after img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}.comparison-label{position:absolute;top:var(--space-sm);padding:4px 10px;background:#000000b3;color:#fff;font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;border-radius:var(--radius-sm);z-index:5}.comparison-label-before{left:var(--space-sm)}.comparison-label-after{right:var(--space-sm)}.comparison-size{position:absolute;bottom:var(--space-sm);padding:4px 10px;background:#000000b3;color:#fff;font-size:var(--font-size-sm);font-weight:700;font-variant-numeric:tabular-nums;border-radius:var(--radius-sm);z-index:5}.comparison-size-before{left:var(--space-sm)}.comparison-size-after{right:var(--space-sm)}.comparison-slider{position:absolute;top:0;bottom:0;width:4px;background:#fff;z-index:10;transform:translate(-50%);box-shadow:0 0 8px #0006}.comparison-slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d;transition:transform var(--duration-fast)}.comparison-slider-handle:hover{transform:translate(-50%,-50%) scale(1.1)}.comparison-slider-handle svg{color:var(--color-ink)}.smoosh-card-info{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-paper-dark);border-bottom:1px solid var(--color-ink-faint)}.smoosh-card-filename{font-weight:600;font-size:var(--font-size-sm);color:var(--color-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}.smoosh-card-size{font-size:var(--font-size-sm);color:var(--color-ink-light);font-weight:500}.smoosh-result{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:linear-gradient(135deg,#d4edda,#c3e6cb);border-bottom:1px solid var(--color-ink-faint);animation:resultBounce .4s ease-out}[data-theme=dark] .smoosh-result{background:linear-gradient(135deg,#5a8f5a4d,#5a8f5a33)}@keyframes resultBounce{0%{transform:scale(1)}30%{transform:scale(1.02)}60%{transform:scale(.99)}to{transform:scale(1)}}.smoosh-result-stats{display:flex;align-items:baseline;gap:var(--space-sm)}.smoosh-result-savings{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-success);letter-spacing:-1px}.smoosh-result-text{font-size:var(--font-size-sm);color:var(--color-success);opacity:.8}.smoosh-controls{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md)}.format-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm)}.format-btn{padding:var(--space-sm) var(--space-xs);border:1px solid var(--color-ink-faint);border-radius:var(--radius-md);background:var(--color-paper);font-size:var(--font-size-sm);font-weight:600;color:var(--color-ink-light);transition:all var(--duration-fast);display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.format-btn .format-name{text-transform:uppercase;letter-spacing:.5px;font-size:var(--font-size-xs)}.format-btn .format-estimate{font-size:10px;font-weight:500;opacity:.7}.format-btn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);background:rgba(var(--color-accent-rgb),.05)}.format-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.format-btn.active .format-estimate{opacity:.9}.format-btn:disabled{opacity:.4;cursor:not-allowed}.format-btn.recommended{border-color:var(--color-accent)}.format-rec{position:absolute;top:-4px;right:-4px;font-size:10px;color:var(--color-accent)}.quality-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) 0;min-height:44px}.quality-row.disabled{opacity:.4;pointer-events:none}.quality-row.disabled .quality-label:after{content:" (lossless)";font-weight:400}.quality-label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-ink-light);min-width:55px}.quality-slider{flex:1;-webkit-appearance:none;height:8px;border-radius:4px;background:var(--color-paper-dark);border:1px solid var(--color-ink-faint)}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-accent);border:3px solid var(--color-paper);box-shadow:0 2px 4px #0003;cursor:grab;transition:transform var(--duration-fast)}.quality-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.quality-value{font-size:var(--font-size-md);font-weight:700;color:var(--color-ink);min-width:45px;text-align:right;font-variant-numeric:tabular-nums}.quality-estimate{font-size:var(--font-size-xs);color:var(--color-ink-light);background:var(--color-paper-dark);padding:2px 8px;border-radius:var(--radius-sm);min-width:60px;text-align:center}.advanced-toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm);background:none;border:none;color:var(--color-ink-light);font-size:var(--font-size-xs);font-weight:500;cursor:pointer;transition:color var(--duration-fast);width:100%}.advanced-toggle:hover{color:var(--color-accent)}.advanced-toggle svg{transition:transform var(--duration-fast)}.advanced-toggle.open svg{transform:rotate(180deg)}.advanced-options{display:none;flex-direction:column;gap:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--color-ink-faint);margin-top:var(--space-sm)}.advanced-options.open{display:flex}.option-label{font-size:var(--font-size-xs);font-weight:600;color:var(--color-ink-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.resize-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm)}.resize-btn{padding:var(--space-sm) var(--space-xs);border:1px solid var(--color-ink-faint);border-radius:var(--radius-sm);background:var(--color-paper);font-size:var(--font-size-xs);font-weight:500;color:var(--color-ink-light);transition:all var(--duration-fast)}.resize-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.resize-btn.active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.smoosh-btn-big{width:100%;padding:var(--space-md) var(--space-lg);background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-dark) 100%);border:none;border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 14px rgba(var(--color-accent-rgb),.4);transition:all var(--duration-fast)}.smoosh-btn-big:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(var(--color-accent-rgb),.5)}.smoosh-btn-big:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px rgba(var(--color-accent-rgb),.4)}.smoosh-btn-big:disabled{opacity:.6;cursor:not-allowed}.smoosh-btn-big.processing{background:linear-gradient(135deg,var(--color-ink-light) 0%,#555 100%);box-shadow:0 4px 14px #0003}.smoosh-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-right:var(--space-xs);vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.download-btn{width:100%;padding:var(--space-md);background:linear-gradient(135deg,var(--color-success) 0%,#4a8f4a 100%);border:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);transition:all var(--duration-normal) ease;box-shadow:0 4px 12px #5a8f5a4d;position:relative;overflow:hidden}.download-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.download-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #5a8f5a66}.download-btn:hover:before{left:100%}.download-btn:active{transform:translateY(0);box-shadow:0 2px 8px #5a8f5a4d}.download-btn svg{transition:transform var(--duration-fast)}.download-btn:hover svg{transform:translateY(2px)}.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}.action-btn{padding:var(--space-sm);border:1px solid var(--color-ink-faint);border-radius:var(--radius-sm);background:var(--color-paper);font-size:var(--font-size-sm);font-weight:500;color:var(--color-ink-light);transition:all var(--duration-fast)}.action-btn:hover{border-color:var(--color-ink);color:var(--color-ink);background:var(--color-paper-dark)}.progress-container{width:100%}.progress-bar{width:100%;height:6px;background:var(--color-paper-dark);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--color-accent);border-radius:3px;transition:width .3s ease}.progress-text{font-size:var(--font-size-xs);color:var(--color-ink-light);text-align:center;margin-top:var(--space-xs)}.batch-container{width:100%;max-width:600px;background:var(--color-paper-light);border:1px solid var(--color-ink-faint);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 4px 20px #00000014;animation:slideUp .3s ease-out}[data-theme=dark] .batch-container{box-shadow:0 4px 20px #0000004d}.batch-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);background:var(--color-paper-dark);border-bottom:1px solid var(--color-ink-faint)}.batch-title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-ink);margin:0}.batch-count{font-size:var(--font-size-sm);color:var(--color-ink-light);font-weight:500}.batch-settings{padding:var(--space-md);border-bottom:1px solid var(--color-ink-faint);display:flex;flex-direction:column;gap:var(--space-md)}.batch-list{max-height:400px;overflow-y:auto;padding:var(--space-sm)}.batch-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:var(--color-paper);border:1px solid var(--color-ink-faint);border-radius:var(--radius-md);margin-bottom:var(--space-sm);transition:all var(--duration-fast) ease}.batch-item:last-child{margin-bottom:0}.batch-item:hover{border-color:var(--color-ink-light)}.batch-item.processing{border-color:var(--color-accent);background:rgba(var(--color-accent-rgb),.05)}.batch-item.complete{border-color:var(--color-success);background:#5a8f5a0d}.batch-item.error{border-color:var(--color-error);background:#dc35450d}.batch-item-preview{width:48px;height:48px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--color-paper-dark)}.batch-item-preview img{width:100%;height:100%;object-fit:cover}.batch-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.batch-item-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batch-item-size{font-size:var(--font-size-xs);color:var(--color-ink-light)}.batch-item-savings{font-size:var(--font-size-xs);font-weight:700;color:var(--color-success)}.batch-item-error{font-size:var(--font-size-xs);font-weight:500;color:var(--color-error)}.batch-item .progress-bar{margin-top:4px;height:4px}.batch-item-actions{display:flex;gap:var(--space-xs);flex-shrink:0}.batch-download-btn,.batch-remove-btn{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--color-ink-faint);background:var(--color-paper);display:flex;align-items:center;justify-content:center;color:var(--color-ink-light);transition:all var(--duration-fast) ease}.batch-download-btn:hover{border-color:var(--color-success);color:var(--color-success);background:#5a8f5a1a}.batch-remove-btn:hover{border-color:var(--color-error);color:var(--color-error);background:#dc35451a}.batch-summary{padding:var(--space-md);background:linear-gradient(135deg,#d4edda,#c3e6cb);text-align:center;font-size:var(--font-size-sm);font-weight:600;color:var(--color-success)}[data-theme=dark] .batch-summary{background:linear-gradient(135deg,#5a8f5a4d,#5a8f5a33)}.batch-actions{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm);border-top:1px solid var(--color-ink-faint)}@media(max-width:768px){.app{padding:var(--space-md)}.main-area{max-width:100%}.drop-zone{aspect-ratio:4/3}.drop-zone-icon{width:60px;height:60px}.drop-zone-title{font-size:var(--font-size-xl)}.format-row,.resize-row{grid-template-columns:repeat(4,1fr)}.privacy-badge{font-size:10px;padding:var(--space-xs) var(--space-sm)}}@media(max-width:480px){.app{padding:var(--space-sm);padding-bottom:60px}.main-area{gap:var(--space-md)}.drop-zone-title{font-size:var(--font-size-lg)}.drop-zone-subtitle{font-size:var(--font-size-sm)}.drop-zone{aspect-ratio:1/1;padding:var(--space-md)}.drop-zone-icon{width:48px;height:48px}.drop-zone-primary{font-size:var(--font-size-md)}.keyboard-hint{display:none}.smoosh-card-preview{aspect-ratio:4/3}.smoosh-card-info{padding:var(--space-xs) var(--space-sm)}.smoosh-card-filename{font-size:var(--font-size-xs);max-width:55%}.smoosh-controls{padding:var(--space-sm);gap:var(--space-sm)}.format-row{grid-template-columns:repeat(2,1fr)}.format-btn{padding:var(--space-xs);font-size:var(--font-size-xs)}.format-btn .format-estimate{font-size:8px}.quality-row{flex-wrap:wrap;gap:var(--space-sm)}.quality-label{min-width:auto;width:100%}.quality-slider{flex:1;min-width:100px}.quality-estimate{display:none}.resize-row{grid-template-columns:repeat(2,1fr)}.resize-btn{font-size:10px}.smoosh-btn-big{padding:var(--space-md);font-size:var(--font-size-md)}.smoosh-result{padding:var(--space-sm)}.smoosh-result-savings{font-size:var(--font-size-xl)}.actions-row{gap:var(--space-xs)}.action-btn{padding:var(--space-xs);font-size:var(--font-size-xs)}.comparison-label{font-size:10px;padding:2px 6px}.comparison-size{font-size:var(--font-size-xs);padding:2px 6px}.comparison-slider-handle{width:28px;height:28px}.theme-toggle{width:36px;height:36px;top:var(--space-sm);right:var(--space-sm)}.theme-toggle svg{width:16px;height:16px}.privacy-badge{bottom:var(--space-sm)}}@media(max-width:360px){.drop-zone-title{font-size:var(--font-size-md)}.format-row,.resize-row{grid-template-columns:repeat(2,1fr);gap:4px}.smoosh-btn-big{font-size:var(--font-size-sm)}}@media(hover:none)and (pointer:coarse){.format-btn,.resize-btn,.action-btn{min-height:44px}.quality-slider::-webkit-slider-thumb{width:28px;height:28px}.format-btn:hover,.resize-btn:hover,.action-btn:hover,.smoosh-btn-big:hover{transform:none}.comparison-slider-handle:hover{transform:translate(-50%,-50%)}}@media(max-height:500px)and (orientation:landscape){.app{padding:var(--space-sm)}.drop-zone,.smoosh-card-preview{aspect-ratio:16/9}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.smoosh-card{border-width:1px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.smoosh-spinner{animation:none;border:2px solid white}}@media print{.theme-toggle,.privacy-badge,.smoosh-controls,.actions-row{display:none}.smoosh-card{box-shadow:none;border:1px solid #ccc}}