.main-nav{display:flex;gap:var(--spacing-xs);align-items:center}.nav-button{padding:var(--spacing-xs) var(--spacing-md);background:transparent;border:none;color:var(--text-secondary);font-size:.875rem;font-weight:600;white-space:nowrap;position:relative;transition:color var(--transition-fast)}.nav-button:hover:not(.disabled){color:var(--text-primary)}.nav-button.active{color:var(--accent-primary);font-weight:600}.nav-button.active:after{content:"";position:absolute;bottom:-2px;left:var(--spacing-md);right:var(--spacing-md);height:2px;background:var(--accent-primary)}.nav-button.disabled{opacity:.4;cursor:not-allowed}.nav-button.disabled:hover{color:var(--text-secondary)}.mobile-menu-button{display:none;flex-direction:column;justify-content:center;align-items:center;width:32px;height:32px;padding:0;background:transparent;border:none;cursor:pointer}.menu-line{display:block;width:20px;height:2px;background:var(--text-primary);margin:3px 0;transition:all var(--transition-fast)}.mobile-menu-overlay{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:#00000080;z-index:var(--z-dropdown)}@media (max-width: 768px){.mobile-menu-button{display:flex}.main-nav{position:fixed;top:60px;right:-100%;width:250px;height:calc(100vh - 60px);background:linear-gradient(135deg,#181818,#24232b 40%,#181818cc);border-left:1px solid rgba(255,255,255,.08);flex-direction:column;gap:0;padding:var(--spacing-md) 0;box-shadow:-2px 0 10px #0000004d;transition:right var(--transition-base);z-index:calc(var(--z-dropdown) + 1)}.main-nav.mobile-open{right:0}.nav-button{width:100%;padding:var(--spacing-md) var(--spacing-lg);text-align:left;border-radius:0;font-size:1rem}.nav-button:hover,.nav-button.active{background:var(--bg-hover)}.nav-button.active:after{bottom:50%;left:0;right:auto;width:3px;height:60%;transform:translateY(50%)}.mobile-menu-overlay{display:block}}@media (max-width: 480px){.main-nav{top:56px;height:calc(100vh - 56px)}}.main-header{background:linear-gradient(135deg,#181818b3,#24232b99 40%,#181818b3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:var(--z-header);box-shadow:0 1px 3px #0000001a}.header-content{max-width:1400px;margin:0 auto;padding:0 var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;min-height:60px}.brand{display:flex;align-items:center}.site-title{font-size:1.5rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;margin:0;line-height:1}@media (max-width: 768px){.header-content{padding:0 var(--spacing-md);min-height:56px}.site-title{font-size:1.25rem}}.home-page{max-width:1200px;margin:0 auto;animation:fadeIn var(--transition-slow)}.hero{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg) var(--spacing-xl);margin-bottom:var(--spacing-2xl);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;animation:pulse 4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.hero-content{position:relative;z-index:1}.hero h1{font-size:3rem;font-weight:700;margin-bottom:var(--spacing-md);background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.hero-description{color:var(--text-secondary);line-height:1.8}.hero-description p{margin-bottom:var(--spacing-sm)}.features{margin-bottom:var(--spacing-2xl)}.features-header{text-align:center;margin-bottom:var(--spacing-xl)}.features-header h2{font-size:2rem;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.features-header p{color:var(--text-secondary)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl)}.tool-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.tool-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent-gradient);transform:translate(-100%);transition:transform var(--transition-base)}.tool-card:hover:not(.disabled){transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--accent-primary)}.tool-card:hover:not(.disabled):before{transform:translate(0)}.tool-card.disabled{opacity:.6;cursor:not-allowed}.tool-card.disabled:hover{transform:none;box-shadow:none;border-color:var(--border-color)}.tool-icon{font-size:3rem;margin-bottom:var(--spacing-md);filter:grayscale(0);transition:filter var(--transition-base)}.tool-card.disabled .tool-icon{filter:grayscale(1)}.tool-card h3{font-size:1.25rem;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.tool-description{color:var(--text-secondary);margin-bottom:var(--spacing-md);line-height:1.6}.tool-features{list-style:none;padding:0}.tool-features li{color:var(--text-tertiary);font-size:.875rem;padding-left:var(--spacing-lg);position:relative;margin-bottom:var(--spacing-xs)}.tool-features li:before{content:"✓";position:absolute;left:0;color:var(--accent-primary)}.coming-soon-badge{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:var(--bg-active);color:var(--text-secondary);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.info{margin-bottom:var(--spacing-2xl)}.info-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg)}.info-block{background:var(--bg-tertiary);padding:var(--spacing-lg);border-radius:var(--radius-lg);text-align:center;transition:transform var(--transition-base)}.info-block:hover{transform:translateY(-2px)}.info-block h3{font-size:1.25rem;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.info-block p{color:var(--text-secondary);line-height:1.6}.home-footer{text-align:center;padding:var(--spacing-xl) var(--spacing-lg);border-top:1px solid var(--border-color);color:var(--text-secondary)}.home-footer p{margin-bottom:var(--spacing-sm)}.footer-links{font-size:.875rem}@media (max-width: 768px){.hero h1{font-size:2rem}.hero-subtitle{font-size:1rem}.tools-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.info-content{grid-template-columns:1fr}}@media (max-width: 480px){.hero{padding:var(--spacing-lg)}.tool-card{padding:var(--spacing-md)}.tool-icon{font-size:2rem}}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--accent-primary)}.spinner{position:relative;margin-bottom:var(--spacing-md)}.loading-spinner.small .spinner{width:24px;height:24px}.loading-spinner.medium .spinner{width:32px;height:32px}.loading-spinner.large .spinner{width:48px;height:48px}.spinner-inner{width:100%;height:100%;border:3px solid var(--bg-tertiary);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-message{font-size:.875rem;color:var(--text-secondary);text-align:center;margin:0;font-weight:500}.loading-spinner.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:var(--z-modal);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.loading-spinner.pulse .spinner-inner{animation:spin 1s linear infinite,pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}@media (max-width: 768px){.loading-spinner{padding:var(--spacing-lg)}.loading-message{font-size:.8125rem}}.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:600;border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;position:relative;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base),background var(--transition-base),color var(--transition-base)}.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 .6s ease}.btn:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 4px 20px #333e6e4d}.btn:hover:not(.disabled):before{left:100%}.btn:active:not(.disabled){transform:translateY(-1px)}.btn.disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{width:100%;padding:var(--spacing-lg);background:var(--accent-gradient);color:#fff;border:none}.btn-secondary{flex:1;padding:var(--spacing-lg);background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-primary)}.btn-success{flex:1;padding:var(--spacing-lg);background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:var(--radius-lg)}.btn-danger-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary)}.btn-danger-icon:hover:not(.disabled){background:var(--danger-hover);border-color:var(--danger);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media (max-width: 768px){.btn-secondary,.btn-success,.btn-primary{padding:var(--spacing-md);font-size:1rem;border-radius:var(--radius-md)}.btn-icon{width:36px;height:36px}}@media (max-width: 480px){.btn-secondary,.btn-success,.btn-primary{padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem}}@media (prefers-contrast: more){.btn-primary,.btn-secondary,.btn-success,.btn-icon{border-width:2px}}@media (prefers-reduced-motion: reduce){.btn,.btn:before{transition:none}.btn:hover,.btn:active{transform:none;box-shadow:none}}:root{--bg-primary: #1a1a1a;--bg-secondary: #242424;--bg-tertiary: #2a2a2a;--bg-hover: #333333;--bg-active: #404040;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-tertiary: #888888;--accent-primary: #667eea;--accent-secondary: #764ba2;--accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);--border-color: #444444;--border-hover: #555555;--success: #28a745;--success-hover: #218838;--danger: #dc3545;--danger-hover: #c82333;--warning: #ffc107;--info: #17a2b8;--error: #dc3545;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 8px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .5);--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease;--z-dropdown: 100;--z-header: 200;--z-modal: 1000;--z-tooltip: 1100}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#181818,#24232b 40%,#181818);color:var(--text-primary);line-height:1.6;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;padding:var(--spacing-lg);max-width:1400px;margin:0 auto;width:100%}body.menu-open{overflow:hidden}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-secondary);text-decoration:underline}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;outline:none;transition:all var(--transition-base)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{font-family:inherit;font-size:inherit;background-color:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);transition:border-color var(--transition-fast)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-primary)}.container{background:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-xl)}.coming-soon{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);color:var(--text-secondary)}.coming-soon h2{color:var(--accent-primary);margin-bottom:var(--spacing-md);font-size:2rem}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}@media (max-width: 768px){:root{font-size:14px}.main-content{padding:var(--spacing-md)}.container{padding:var(--spacing-lg)}}.file-input-container{width:100%}.file-input-hidden{display:none}.file-input-label{display:block;width:100%;padding:var(--spacing-lg);background:var(--bg-tertiary);border:2px dashed var(--border-color);border-radius:var(--radius-lg);color:var(--text-secondary);text-align:center;cursor:pointer;transition:all var(--transition-base);font-weight:500;position:relative;overflow:hidden}.file-input-label:hover:not(.disabled){background:var(--bg-hover);border-color:var(--accent-primary);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.file-input-label.disabled{opacity:.5;cursor:not-allowed}.file-input-label:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,.1),transparent);transition:left .6s ease}.file-input-label:hover:before{left:100%}.file-input-label.drag-over{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.02)}.file-input-hidden:focus+.file-input-label{outline:2px solid var(--accent-primary);outline-offset:2px}@media (max-width: 768px){.file-input-label{padding:var(--spacing-md);font-size:.875rem}}@media (max-width: 480px){.file-input-label{padding:var(--spacing-sm) var(--spacing-md)}}.file-input-plain-label{all:unset;display:inline;cursor:text;font-weight:600;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}.settings-panel{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);animation:slideInUp var(--transition-base) ease-out}.settings-panel h2{text-align:center;color:var(--text-primary);font-size:2rem;margin-bottom:var(--spacing-xl);font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.input-group{margin-bottom:var(--spacing-lg)}.input-group:last-of-type{margin-bottom:0}.input-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--text-secondary);font-size:.875rem;letter-spacing:.025em}.image-selection-buttons{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.image-selection-buttons .file-input-container{flex:1}.edit-selected-button{flex:1;padding:var(--spacing-lg);background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-primary);font-weight:600;cursor:pointer;transition:all var(--transition-base)}.edit-selected-button:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.thumbnail-section{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.thumbnail-section .thumbnail-row{flex:1;margin-top:0}.clear-all-button{flex-shrink:0;width:40px;height:40px;padding:0;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.clear-all-button:hover{background:#ef4444;border-color:#ef4444;color:#fff;transform:scale(1.05);box-shadow:0 2px 10px #ef44444d}.clear-all-button:active{transform:scale(.95)}.trash-icon{width:18px;height:18px}.form-input,.form-select{width:100%;padding:var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;transition:all var(--transition-fast);font-family:inherit}.form-input:focus,.form-select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #667eea1a;background:var(--bg-primary)}.form-input:hover:not(:focus),.form-select:hover:not(:focus){border-color:var(--text-tertiary)}.form-input::placeholder{color:var(--text-tertiary);opacity:.7}.form-select{cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right var(--spacing-md) center;background-size:16px;padding-right:calc(var(--spacing-md) * 2 + 16px);-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select option{background:var(--bg-secondary);color:var(--text-primary);padding:var(--spacing-sm)}.form-input[type=number]{-moz-appearance:textfield}.form-input[type=number]::-webkit-outer-spin-button,.form-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spacing-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.spacing-settings .input-group{margin-bottom:0}.spacing-settings label{font-size:.8125rem;color:var(--text-tertiary);margin-bottom:var(--spacing-xs)}.dynamic-settings{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-top:var(--spacing-md);transition:all var(--transition-base);position:relative;overflow:hidden;margin-bottom:20px}.dynamic-settings:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--accent-gradient)}.dynamic-settings .input-group{margin-bottom:0}.pack-button{width:100%;padding:var(--spacing-lg);background:var(--accent-gradient);border:none;border-radius:var(--radius-md);color:#fff;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);margin-top:var(--spacing-xl);position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}.pack-button: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 .6s ease}.pack-button:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.pack-button:hover:not(.disabled):before{left:100%}.pack-button:active:not(.disabled){transform:translateY(-1px)}.pack-button.disabled{opacity:.5;cursor:not-allowed;transform:none;background:var(--bg-active)}.pack-button.disabled:before{display:none}.file-count{margin-top:var(--spacing-sm);font-size:.875rem;color:var(--accent-primary);font-weight:500;text-align:center;padding:var(--spacing-xs) var(--spacing-sm);background:#667eea1a;border-radius:var(--radius-sm);border:1px solid rgba(102,126,234,.2)}.settings-panel.loading{pointer-events:none;opacity:.8}.settings-panel.loading .pack-button{background:var(--bg-active);cursor:wait}.input-group.error .form-input,.input-group.error .form-select{border-color:var(--danger);box-shadow:0 0 0 3px #ef44441a}.input-group.error label{color:var(--danger)}.error-message{margin-top:var(--spacing-xs);font-size:.8125rem;color:var(--danger);display:flex;align-items:center;gap:var(--spacing-xs)}.error-message:before{content:"⚠";font-size:.875rem}.input-group.success .form-input,.input-group.success .form-select{border-color:var(--success);box-shadow:0 0 0 3px #22c55e1a}@media (max-width: 768px){.settings-panel{padding:var(--spacing-lg);margin:var(--spacing-md)}.settings-panel h2{font-size:1.5rem;margin-bottom:var(--spacing-lg)}.spacing-settings{grid-template-columns:1fr;gap:var(--spacing-sm);padding:var(--spacing-md)}.pack-button{font-size:1rem;padding:var(--spacing-md)}.thumbnail-section{flex-wrap:wrap}.clear-all-button{width:36px;height:36px}.trash-icon{width:16px;height:16px}.image-selection-buttons{flex-direction:column}}@media (max-width: 480px){.settings-panel{padding:var(--spacing-md);margin:var(--spacing-sm);border-radius:var(--radius-md)}.settings-panel h2{font-size:1.25rem}.input-group{margin-bottom:var(--spacing-md)}.form-input,.form-select{padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem}.dynamic-settings{padding:var(--spacing-md)}.edit-selected-button{padding:var(--spacing-md);font-size:.875rem}}@media (prefers-contrast: more){.form-input,.form-select{border-width:2px}.pack-button{border:2px solid var(--accent-primary)}.spacing-settings,.dynamic-settings{border-width:2px}}@media (prefers-reduced-motion: reduce){.settings-panel,.pack-button,.form-input,.form-select,.dynamic-settings{transition:none}.pack-button:hover:not(.disabled){transform:none}.pack-button:before{display:none}@keyframes slideInUp{0%,to{opacity:1;transform:translateY(0)}}}.gif-creator{width:100%;max-width:600px;margin:0 auto;animation:fadeIn var(--transition-slow)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.quality-toggle-group{display:flex;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:2px;gap:2px}.quality-toggle{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:calc(var(--radius-md) - 2px);color:var(--text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);text-align:center}.quality-toggle:hover:not(.active){background:var(--bg-hover);color:var(--text-primary)}.quality-toggle.active{background:var(--accent-primary);color:#fff;box-shadow:var(--shadow-sm)}.quality-toggle:active{transform:scale(.98)}.quality-description{margin-bottom:var(--spacing-md);padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs);font-size:.75rem;color:var(--text-tertiary);text-align:center;font-style:italic}.gif-preview-section{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-lg);border:1px solid var(--border-color);transition:all var(--transition-fast)}.gif-preview-container{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto var(--spacing-md)}.gif-preview-image{width:100%;height:auto;max-width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius-md);background:transparent;display:block}.file-info{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:.875rem;gap:var(--spacing-md)}.file-info-details{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1;min-width:0}.file-name{color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{color:var(--accent-primary);font-weight:600;white-space:nowrap}.gif-remove-button{width:36px;height:36px;min-width:36px;background:#ef4444e6;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0;flex-shrink:0}.gif-remove-button:hover{background:#dc2626;transform:scale(1.1);box-shadow:var(--shadow-md)}.gif-remove-button:active{transform:scale(1)}.gif-remove-button .trash-icon{width:18px;height:18px}.frame-info-section{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-lg);border:1px solid var(--border-color);margin-bottom:var(--spacing-xl)}.frame-info-section h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.frame-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.frame-info-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.frame-info-label{font-size:.75rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-xs)}.frame-info-value{font-size:1.5rem;font-weight:700;color:var(--accent-primary)}.frame-info-note{font-size:.875rem;color:var(--text-secondary);text-align:center;margin:0;font-style:italic}.input-helper-text{display:block;font-size:.75rem;color:var(--text-tertiary);font-weight:400;margin-top:var(--spacing-xs)}.frames-preview-section{margin-bottom:var(--spacing-xl)}.frames-preview-section .thumbnail-section{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-lg);border:1px solid var(--border-color);margin-bottom:var(--spacing-md)}.frames-preview-section .file-count{text-align:center;color:var(--accent-primary);font-weight:500;font-size:.875rem}@media (max-width: 768px){.gif-preview-image{max-height:250px}.file-info{gap:var(--spacing-sm)}.frame-info-grid{grid-template-columns:1fr}}@media (max-width: 480px){.gif-preview-section{padding:var(--spacing-md)}.gif-preview-container{max-width:100%}.gif-remove-button{width:32px;height:32px}.gif-remove-button .trash-icon{width:16px;height:16px}.frame-info-section{padding:var(--spacing-md)}}.btn-extract-frames{margin-top:var(--spacing-xl)}@media (prefers-contrast: more){.gif-preview-section,.frames-preview-section .thumbnail-section,.frame-info-section{border-width:2px}}@media (prefers-reduced-motion: reduce){.gif-preview-section,.gif-preview-container,.gif-remove-button{transition:none}.gif-remove-button:hover{transform:none}}.thumbnail-row{display:flex;align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-sm);overflow-x:auto;padding:var(--spacing-xs) 0}.thumbnail-row::-webkit-scrollbar{height:4px}.thumbnail-row::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:var(--radius-sm)}.thumbnail-row::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-sm)}.thumbnail-row::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.thumbnail-wrapper{position:relative;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;transition:all var(--transition-fast)}.thumbnail-wrapper:hover{transform:scale(1.05);z-index:2}.thumbnail-image{width:40px;height:40px;object-fit:cover;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-tertiary);transition:all var(--transition-fast)}.thumbnail-wrapper:hover .thumbnail-image{border-color:var(--accent-primary);box-shadow:var(--shadow-sm)}.thumbnail-remove{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border:none;background:var(--error-color);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;opacity:0;transform:scale(.8);transition:all var(--transition-fast);z-index:3;box-shadow:var(--shadow-sm)}.thumbnail-wrapper:hover .thumbnail-remove{opacity:1;transform:scale(1)}.thumbnail-remove:hover{background:#dc2626;transform:scale(1.1)}.thumbnail-overlay{position:absolute;bottom:0;right:0;background:#000c;color:#fff;border-radius:var(--radius-sm) 0 var(--radius-sm) 0;padding:2px 6px;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.thumbnail-count{font-size:.75rem;font-weight:600;line-height:1}.thumbnail-wrapper.loading .thumbnail-image{background:var(--bg-tertiary);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.thumbnail-image.loading{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-hover) 50%,var(--bg-tertiary) 75%);background-size:200px 100%;animation:shimmer 1.5s infinite}.thumbnail-row.empty{display:none}@media (max-width: 768px){.thumbnail-image{width:36px;height:36px}.thumbnail-remove{width:16px;height:16px;font-size:10px;top:-3px;right:-3px}.thumbnail-count{font-size:.7rem;padding:1px 4px}}@media (max-width: 480px){.thumbnail-row{gap:2px}.thumbnail-image{width:32px;height:32px}.thumbnail-remove{width:14px;height:14px;font-size:9px;top:-2px;right:-2px}}@media (prefers-contrast: high){.thumbnail-image{border-width:2px}.thumbnail-overlay{background:#000000e6;border:1px solid white}.thumbnail-remove{border:1px solid white}}@media (prefers-reduced-motion: reduce){.thumbnail-wrapper,.thumbnail-image,.thumbnail-remove{transition:none}.thumbnail-wrapper:hover{transform:none}.thumbnail-image.loading{animation:none;background:var(--bg-hover)}}.preview-panel{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);animation:slideInUp var(--transition-base) ease-out}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.preview-panel h2{text-align:center;color:var(--text-primary);font-size:2rem;margin-bottom:var(--spacing-xl);font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.preview-container{text-align:center;margin-bottom:var(--spacing-xl)}.preview-wrapper{position:relative;display:inline-block;margin-bottom:var(--spacing-lg);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-tertiary);transition:all var(--transition-base)}.preview-wrapper:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.preview-canvas{max-width:100%;max-height:60vh;display:block;cursor:pointer;transition:all var(--transition-fast);background-size:20px 20px;background:transparent}.preview-canvas:hover{transform:scale(1.02)}.preview-canvas:active{transform:scale(.98)}.preview-gif{max-width:100%;max-height:100%;display:block;margin:0 auto;object-fit:contain}.fullscreen-button{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);width:44px;height:44px;background:#000c;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}.fullscreen-button:hover{background:#667eeae6;border-color:var(--accent-primary);transform:scale(1.1);box-shadow:var(--shadow-md)}.fullscreen-button:active{transform:scale(1)}.fullscreen-icon{width:20px;height:20px;fill:currentColor;transition:transform var(--transition-fast)}.fullscreen-button:hover .fullscreen-icon{transform:scale(1.1)}.fullscreen-close{position:fixed!important;top:var(--spacing-xl)!important;right:var(--spacing-xl)!important;width:48px!important;height:48px!important;background:#000c!important;border:2px solid rgba(255,255,255,.3)!important;border-radius:var(--radius-md)!important;color:#fff!important;font-size:1.5rem!important;z-index:1001!important}.fullscreen-close:hover{background:#ef4444e6!important;border-color:#ef4444!important;transform:scale(1.1)!important}.file-name-group{margin-bottom:var(--spacing-xl)}.file-name-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--text-secondary);font-size:.875rem;text-align:left}.file-name-input-wrapper{display:flex;align-items:center;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-color);transition:all var(--transition-fast);background:var(--bg-tertiary)}.file-name-input-wrapper:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 3px #667eea1a;background:var(--bg-primary)}.file-name-input-wrapper:hover:not(:focus-within){border-color:var(--text-tertiary)}.file-name-input-wrapper input{border:none;border-radius:0;flex:1;background:transparent;padding:var(--spacing-md);color:var(--text-primary);font-size:1rem}.file-name-input-wrapper input:focus{outline:none;box-shadow:none}.file-name-input-wrapper input::placeholder{color:var(--text-tertiary);opacity:.7}.file-extension{padding:var(--spacing-md);background:var(--bg-active);color:var(--text-tertiary);font-size:1rem;font-weight:500;border-left:1px solid var(--border-color);-webkit-user-select:none;user-select:none;min-width:48px;text-align:center}.preview-action-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.download-row,.download-row .btn{width:100%}.secondary-buttons-row{display:flex;gap:var(--spacing-md)}.secondary-buttons-row .btn{flex:1}.fullscreen-modal .modal-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);background:transparent}.fullscreen-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.fullscreen-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);background:linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.05) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.05) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.preview-panel.loading{pointer-events:none;position:relative}.preview-panel.loading:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0000004d;border-radius:var(--radius-lg);z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@media (max-width: 768px){.preview-panel{padding:var(--spacing-lg);margin:var(--spacing-md)}.preview-panel h2{font-size:1.5rem;margin-bottom:var(--spacing-lg)}.secondary-buttons-row{gap:var(--spacing-sm)}.fullscreen-button{width:40px;height:40px;bottom:var(--spacing-sm);right:var(--spacing-sm)}.fullscreen-close{top:var(--spacing-lg)!important;right:var(--spacing-lg)!important;width:40px!important;height:40px!important}}@media (max-width: 480px){.preview-panel{padding:var(--spacing-md);margin:var(--spacing-sm);border-radius:var(--radius-md)}.preview-panel h2{font-size:1.25rem}.preview-wrapper{margin-bottom:var(--spacing-md)}.fullscreen-button{width:36px;height:36px;bottom:var(--spacing-xs);right:var(--spacing-xs)}.fullscreen-icon{width:16px;height:16px}.fullscreen-close{top:var(--spacing-md)!important;right:var(--spacing-md)!important;width:36px!important;height:36px!important;font-size:1.25rem!important}.file-name-input-wrapper input,.file-extension{padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem}}@media (prefers-contrast: more){.preview-wrapper{border:2px solid var(--border-color)}.fullscreen-button,.file-name-input-wrapper{border-width:2px}}@media (prefers-reduced-motion: reduce){.preview-panel,.preview-wrapper,.preview-canvas,.fullscreen-button{transition:none}.preview-wrapper:hover,.preview-canvas:hover,.fullscreen-button:hover{transform:none}@keyframes slideInUp{0%,to{opacity:1;transform:translateY(0)}}}