.tool-page { padding-top: var(--space-6); padding-bottom: var(--space-12); }
.step-section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.step-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.step-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--gradient-primary); color: #fff; border-radius: 50%; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.step-header h3 { font-size: 1.05rem; font-weight: 600; color: var(--color-text-primary); }

.upload-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-secondary); padding: var(--space-8) var(--space-4); text-align: center; cursor: pointer; position: relative; transition: all var(--transition-base); }
.upload-zone:hover { border-color: var(--color-border-hover); background: var(--color-surface); }
.upload-zone .icon { font-size: 3rem; display: block; margin-bottom: var(--space-2); opacity: 0.6; transition: transform var(--transition-base); }
.upload-zone:hover .icon { transform: scale(1.05); }
.upload-zone.dragover { border-color: var(--color-accent-blue); background: rgba(59,130,246,0.05); transform: scale(1.01); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone .file-input-label { display: inline-block; padding: 0.5rem 1.5rem; background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; font-weight: 500; font-size: 0.9rem; transition: all var(--transition-fast); }
.upload-zone .file-input-label:hover { background: var(--color-border-hover); transform: scale(1.02); }

.video-wrapper { background: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-4); display: flex; justify-content: center; align-items: center; margin: var(--space-4) 0; min-height: 200px; }
#videoPreview { max-width: 100%; max-height: 400px; border-radius: var(--radius-sm); background: #000; }

.trim-controls { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0; padding: var(--space-4); background: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.trim-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.trim-inputs .control-group input[type="text"] { width: 100%; padding: 0.5rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9rem; background: var(--color-bg-primary); color: var(--color-text-primary); font-family: var(--font-mono); }
.trim-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.trim-info { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-md); margin: var(--space-2) 0; font-size: 0.9rem; border: 1px solid var(--color-border); }
.trim-info strong { color: var(--color-text-primary); }

.progress-container { padding: var(--space-4); background: var(--color-bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.progress-label { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: var(--space-2); color: var(--color-text-secondary); }
.progress-bar-track { width: 100%; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background: var(--gradient-primary); border-radius: 4px; transition: width 0.3s ease; }
.progress-bar-fill.complete { background: #22C55E; }

.result-preview { background: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-4); display: flex; justify-content: center; align-items: center; margin: var(--space-4) 0; }
#resultVideo { max-width: 100%; max-height: 400px; border-radius: var(--radius-sm); background: #000; }
.result-info { display: flex; gap: var(--space-6); padding: var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-md); margin: var(--space-2) 0; font-size: 0.9rem; border: 1px solid var(--color-border); }
.result-info strong { color: var(--color-text-primary); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }

@media (max-width: 768px) {
    .trim-inputs { grid-template-columns: 1fr; }
    .trim-info { flex-direction: column; gap: var(--space-2); }
    .result-info { flex-direction: column; gap: var(--space-2); }
    .video-wrapper { min-height: 150px; }
    #videoPreview { max-height: 250px; }
    #resultVideo { max-height: 250px; }
    .step-header { gap: var(--space-2); }
    .step-number { width: 28px; height: 28px; font-size: 0.75rem; }
}