.upload-area.dragover{border-color:#667eea;background:#e8f0fe;transform:scale(1.02)}.btn-success{background:#28a745;color:white}.btn-success:hover{background:#218838}.btn-danger{background:#dc3545;color:white;padding:8px 16px;font-size:.9rem}.btn-danger:hover{background:#c82333}.videos-container.active{display:block}.video-item{background:#f8f9fa;border-radius:12px;padding:20px;margin-bottom:15px;border:2px solid #e9ecef;transition:all .3s ease}.video-item:hover{border-color:#667eea;box-shadow:0 4px 12px rgba(0,0,0,.1)}.video-header{display:flex;gap:15px;align-items:start}.video-thumbnail{width:150px;height:100px;background:#000;border-radius:8px;position:relative;overflow:hidden;flex-shrink:0}.video-thumbnail video{width:100%;height:100%;object-fit:cover}.video-thumbnail .play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;color:white;pointer-events:none}.video-info{flex:1;min-width:0}.video-name{font-size:1.1rem;font-weight:600;margin-bottom:8px;word-break:break-word}.video-meta{font-size:.9rem;color:#6c757d;margin-bottom:12px}.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.85rem;font-weight:600;margin-bottom:12px}.status-pending{background:#e7f3ff;color:#06c}.status-compressing{background:#fff3cd;color:#856404}.status-completed{background:#d4edda;color:#155724}.status-error{background:#f8d7da;color:#721c24}.video-actions{display:flex;gap:8px;margin-left:auto}.settings-panel{display:none;margin-top:15px;padding-top:15px;border-top:1px solid #dee2e6}.settings-panel.active{display:block}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:15px}.setting-group label{display:block;font-weight:600;margin-bottom:8px;font-size:.9rem}.setting-group select,.setting-group input[type=range]{width:100%;padding:8px;border:1px solid #ced4da;border-radius:6px;font-size:.95rem}.progress-bar-wrapper{width:100%;height:20px;background:#e9ecef;border-radius:10px;overflow:hidden;margin:10px 0;display:none}.progress-bar-wrapper.active{display:block}.progress-bar{height:100%;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);transition:width .3s ease;display:flex;align-items:center;justify-content:center;color:white;font-size:.85rem;font-weight:600}.error-message.active{display:block}.slider-container{display:flex;align-items:center;gap:10px}.range-value{min-width:50px;text-align:center;font-weight:600;color:#667eea}@media (max-width:768px){.video-header{flex-direction:column}.video-thumbnail{width:100%}.settings-grid{grid-template-columns:1fr}}