.upload-area{background:linear-gradient(135deg, #fff, #f8fafc);border:2px dashed var(--gray-300);border-radius:32px;padding:48px 24px;text-align:center;cursor:pointer;transition:all 0.3s ease;margin-bottom:24px}.upload-area:hover{border-color:var(--primary-color);background:linear-gradient(135deg, #f8fafc, #fff);transform:translateY(-2px)}.upload-icon i{font-size:64px;color:var(--primary-color);margin-bottom:16px}.upload-text h3{font-size:1.2rem;margin-bottom:8px;color:var(--gray-700)}.upload-text p{font-size:0.85rem;color:var(--gray-500);margin-bottom:20px}.upload-btn{padding:12px 32px;border-radius:50px}.gif-info-card{background:linear-gradient(135deg, var(--gray-50), #fff);border-radius:24px;padding:20px;margin-bottom:24px;border:1px solid var(--gray-200)}.info-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px}.info-item{text-align:center;min-width:100px}.info-item i{font-size:1.5rem;color:var(--primary-color);display:block;margin-bottom:8px}.info-item span{display:block;font-size:0.7rem;color:var(--gray-500);margin-bottom:4px}.info-item strong{display:block;font-size:1.1rem;font-weight:700;color:var(--gray-800)}.preview-area{background:var(--gray-50);border-radius:24px;padding:20px;margin-bottom:24px;border:1px solid var(--gray-200)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}.preview-title{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--gray-700)}.preview-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.control-btn{background:white;border:1px solid var(--gray-200);width:36px;height:36px;border-radius:50%;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center}.control-btn:hover{background:var(--primary-color);border-color:var(--primary-color);color:white}.frame-slider{width:200px;height:4px;-webkit-appearance:none;background:var(--gray-300);border-radius:2px;outline:none}.frame-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--primary-color);border-radius:50%;cursor:pointer}.frame-slider-label{font-size:0.75rem;color:var(--gray-500)}.preview-container{text-align:center;position:relative}.preview-canvas{max-width:100%;max-height:300px;background:#1a1a2e;border-radius:16px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}.frame-info{text-align:center;margin-top:12px;font-size:0.8rem;color:var(--gray-500)}.frames-area{background:var(--gray-50);border-radius:24px;padding:20px;border:1px solid var(--gray-200)}.frames-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}.frames-title{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--gray-700)}.frames-count{background:var(--primary-color);color:white;padding:2px 10px;border-radius:30px;font-size:0.7rem;font-weight:500}.frames-actions{display:flex;gap:10px;flex-wrap:wrap}.action-btn-sm{background:transparent;border:1px solid var(--gray-300);padding:6px 14px;border-radius:30px;font-size:0.75rem;cursor:pointer;transition:all 0.2s}.action-btn-sm:hover{background:var(--gray-200)}.btn-primary-sm{background:var(--primary-color);border:none;padding:6px 14px;border-radius:30px;font-size:0.75rem;color:white;cursor:pointer;transition:all 0.2s}.btn-primary-sm:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-outline-sm{background:transparent;border:1px solid var(--gray-300);padding:6px 14px;border-radius:30px;font-size:0.75rem;cursor:pointer;transition:all 0.2s}.btn-outline-sm:hover{background:var(--gray-200)}.frames-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:16px;max-height:500px;overflow-y:auto;padding:4px}.frame-card{background:white;border-radius:16px;overflow:hidden;transition:all 0.2s;border:2px solid transparent;cursor:pointer;position:relative}.frame-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.1)}.frame-card.selected{border-color:var(--primary-color);box-shadow:0 4px 12px rgba(59,130,246,0.2)}.frame-card.selected::after{content:'✓';position:absolute;top:8px;right:8px;background:var(--primary-color);color:white;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold}.frame-img{width:100%;aspect-ratio:1;object-fit:cover;background:#1a1a2e}.frame-number{text-align:center;padding:8px;font-size:0.7rem;font-weight:500;background:var(--gray-50);border-top:1px solid var(--gray-200)}.loading-state{text-align:center;padding:60px;background:var(--gray-50);border-radius:24px}.loading-spinner{width:50px;height:50px;border:3px solid var(--gray-200);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}.loading-state p{color:var(--gray-600);margin-bottom:8px}.loading-tip{font-size:0.7rem;color:var(--gray-400)}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:768px){.info-row{flex-direction:column;align-items:center}.frames-header{flex-direction:column;align-items:flex-start}.preview-controls{justify-content:center}.frame-slider{width:150px}.frames-grid{grid-template-columns:repeat(auto-fill, minmax(100px, 1fr))}}