.btn-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.btn {
    background: rgba(255, 255, 255, 0.03); color: #cbd5e1; border: 1px solid var(--glass-border);
    padding: 14px 10px; border-radius: var(--radius-md); cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: var(--transition-smooth);
}

@media (hover: hover) {
    .btn:hover {
        background: var(--bg-glass-hover); border-color: rgba(255, 255, 255, 0.2); color: #ffffff;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.3); transform: translateY(-2px);
    }
}

.btn.active {
    background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 100%); border-color: rgba(255, 255, 255, 0.25); color: white;
    box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-danger { grid-column: span 2; background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.2); color: #fca5a5; }

@media (hover: hover) {
    .btn-danger:hover {
        background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%); border-color: rgba(255, 255, 255, 0.2); color: #ffffff;
        box-shadow: 0 0 25px var(--accent-error-glow);
    }
}