.compose-wrapper{padding:8px 0}.upload-area{padding:40px 16px;margin-bottom:20px}.hidden-upload{position:absolute;width:0;height:0;overflow:hidden;opacity:0}.input{width:70px}.actions{display:flex;flex-direction:column;gap:10px}.download-btn{background:#e5edff!important;color:#4f46e5!important;border:none}.preview-grid{display:flex;flex-wrap:nowrap;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:4px}.preview-item{flex:0 0 auto;width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid #e5e7eb;background:#fff}.preview-item img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.warning-tip{background:#fef3c7;border:1px solid #fbbf24;border-radius:8px;padding:10px 12px;margin-bottom:16px;font-size:12px;color:#92400e;line-height:1.5}.video-wrapper{padding:8px 0}.section-title{margin-bottom:16px}.upload-area.dragging{border-color:#4f46e5;background:#e0e7ff;transform:scale(1.02)}.hidden-video-input{position:absolute;width:0;height:0;opacity:0;overflow:hidden}.preview-container{margin-bottom:16px}.video{width:100%;max-height:260px;border-radius:12px;background:#000}.controls{margin-top:8px}.control-group{margin-bottom:16px}.control-group.inline{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.control-label{font-size:14px;font-weight:500;color:#374151}.inline-label{margin-left:8px}.input{width:80px;border:1px solid #cbd5e1;border-radius:6px;padding:4px 6px;font-size:13px}.size-input-small{width:60px;text-align:center}.overlay-text-input{width:100%;padding:8px 10px;border-radius:6px;border:1px solid #cbd5e1;font-size:14px;box-sizing:border-box;margin-bottom:8px}.range{width:100%;margin-top:8px}.value-display{margin-left:4px;color:#4f46e5;font-weight:600}.actions{margin-top:8px}.action-buttons{display:flex;gap:12px}.convert-btn{flex:2}.download-btn{flex:1}.helper-text{margin-top:6px;font-size:12px;color:#6b7280;line-height:1.5}.preview-img{display:block;margin:16px auto 0;max-width:100%;max-height:260px;border-radius:12px;box-shadow:0 6px 12px rgba(15,23,42,.15)}.progress-actions{margin-top:12px;text-align:center}.video-info{display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap}.info-item{font-size:12px;color:#6b7280;background:#f3f4f6;padding:4px 8px;border-radius:4px}.time-range-container{display:flex;gap:12px;margin-bottom:8px;flex-wrap:wrap}.time-input-group{display:flex;align-items:center;gap:4px}.time-label{font-size:12px;color:#6b7280;min-width:30px}.time-input{width:70px}.time-unit{font-size:12px;color:#9ca3af}.time-range-slider{position:relative;width:100%;height:20px}.time-slider{position:absolute;width:100%;height:4px;background:transparent;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}.time-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}.fps-presets{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.preset-btn{padding:4px 8px;font-size:11px;border:1px solid #cbd5e1;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s}.preset-btn:hover{background:#f3f4f6;border-color:#667eea}.preset-btn.active{background:#667eea;color:#fff;border-color:#667eea}.size-input-group{margin-bottom:8px}.size-inputs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.size-label{font-size:12px;color:#6b7280;min-width:35px}.size-input{width:70px}.size-separator{font-size:14px;color:#6b7280;font-weight:500}.size-unit{font-size:12px;color:#9ca3af;margin-left:4px}.size-presets{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.size-presets .preset-btn{padding:4px 6px;font-size:10px;min-width:50px}.estimated-size{font-size:16px;font-weight:600;color:#4f46e5;margin-top:4px}.size-warning{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:#f59e0b}.warning-icon{font-size:14px}.split-wrapper{padding:8px 0}.section-title{font-size:20px;font-weight:700;margin-bottom:12px;color:#1f2933}.upload-area{border:2px dashed #9fb3ff;border-radius:16px;padding:32px 16px;background:#f8f9ff;text-align:center;cursor:pointer;transition:all .3s;margin-bottom:16px}.upload-area--compact{padding:20px 16px}.upload-area:hover{border-color:#667eea;background:#f0f2ff}.upload-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.upload-icon{font-size:40px;margin-bottom:4px}.upload-text{font-size:16px;color:#4f46e5;font-weight:600}.upload-hint{font-size:12px;color:#9ca3af}.hidden-gif-input{position:absolute;width:0;height:0;opacity:0;overflow:hidden}.original-preview{margin-bottom:16px}.preview-title{font-size:14px;font-weight:600;margin-bottom:8px;color:#374151}.original-gif{max-width:100%;border-radius:12px;box-shadow:0 4px 10px rgba(15,23,42,.15)}.frames-list{margin-top:8px}.actions{margin:12px 0}.btn-primary{width:100%;padding:10px 0;border-radius:8px;border:none;background:#667eea;color:#fff;font-size:15px;font-weight:600;cursor:pointer}.frames-grid{max-height:260px;overflow-y:auto;padding-right:4px}.frame-item{display:flex;align-items:center;padding:8px 10px;background:#f8f9ff;border-radius:10px;margin-bottom:8px}.frame-thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;margin-right:10px;flex-shrink:0;border:1px solid #e5e7eb}.frame-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.frame-info{flex:1;font-size:13px;color:#4b5563}.btn-small{padding:6px 12px;font-size:12px;border-radius:6px;border:none;background:#667eea;color:#fff;cursor:pointer}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.progress-container{margin:16px 0;padding:12px;background:#f8f9ff;border-radius:8px}.progress-label{font-size:13px;color:#4f46e5;font-weight:500;margin-bottom:8px;text-align:center}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:4px;transition:width .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);padding:16px;color:#333}#app,body{min-height:100vh}.container{max-width:500px;margin:0 auto}header{text-align:center;color:#fff;margin-bottom:24px;padding-top:20px}h1{font-size:28px;font-weight:700;margin-bottom:8px}.subtitle{font-size:14px;opacity:.9}.tabs{display:flex;background:#fff;border-radius:12px;padding:4px;margin-bottom:16px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.tab{flex:1;padding:12px 8px;text-align:center;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s;border:none;background:transparent;color:#666}.tab.active{background:#667eea;color:#fff}.content{background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.tab-content{display:none}.tab-content.active{display:block}