/* Controls Section Branding Colors */
.controls-section .card {
    background: white;
    border: 1px solid #e5e7eb;
}

.dark-mode .controls-section .card {
    background: var(--bg-darker);
    border-color: var(--border-dark);
}

/* Tabs with branding colors */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab {
    flex: 1;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748b;
}

.tab:hover {
    border-color: #ff7780;
    color: #ff7780;
}

.tab.active {
    background: #ff7780;
    border-color: #ff7780;
    color: white;
}

.dark-mode .tab {
    background: var(--bg-darker);
    border-color: var(--border-dark);
}

.dark-mode .tab.active {
    background: #ff7780;
    border-color: #ff7780;
}

/* Add Clip Button */
.add-clip-btn {
    width: 100%;
    padding: 0.75rem;
    background: white;
    border: 2px dashed #ff7780;
    color: #ff7780;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-clip-btn:hover {
    background: #fffafb;
    border-color: #ff7780;
    color: #ff7780;
}

.dark-mode .add-clip-btn {
    background: var(--bg-darker);
}

.dark-mode .add-clip-btn:hover {
    background: rgba(32, 163, 162, 0.12);
}

/* Primary buttons with branding */
.btn-primary {
    background: linear-gradient(135deg, #ffb3b8 0%, #ff7780 50%, #e65960 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #34C4C2 0%, #e65960 100%);
}

/* Outline buttons with branding */
.btn-outline {
    background: white;
    border: 2px solid #ff7780;
    color: #ff7780;
}

.btn-outline:hover:not(:disabled) {
    background: #ff7780;
    color: white;
}

.btn-outline.btn-primary {
    background: #ff7780;
    border-color: #ff7780;
    color: white;
}

.dark-mode .btn-outline {
    background: transparent;
}

.dark-mode .btn-outline:hover:not(:disabled) {
    background: #ff7780;
}